In Design Para Dreamweaver

[fabiojpoli]

Olá pessoal, estou com um problema aqui. Tenho uns arquivos que estão em inDesign, tenho que passar esses arquivos para html, Css, ao exportar do indesign para o dreamweaver, fiquei sabendo que não tem como exportar a formação do texto, nem a tabulação do jeito que realmente o arquivo do indesign está, porém gostaria de saber se vocês tem alguma sugestão quanto a isso, a principio estou criando umas classe no CSS, mas isso fica muito trabalhoso e leva mais tempo. Obrigado!

[Willian Antunes]

Ué ... Não entendi direito ..

Tipo, eu costumo montar os layouts no Photoshop, depois de aprovado pro cliente, exporto a imagem completa e coloco no browser, vo fazendo o xhtml e o css usando um complemento do firefox, measureit, e vo fazendo as medidas e criando as caixas onde vo colocar textos, imagens, formulários, etc.

Depois de montar o "esqueleto", fatio as imagens do photoshop e coloco no css.

Simples ... É só fazer isso q você consegue (se for isso que to pensando).

[fabiojpoli]

Ué ... Não entendi direito ..

Tipo, eu costumo montar os layouts no Photoshop, depois de aprovado pro cliente, exporto a imagem completa e coloco no browser, vo fazendo o xhtml e o css usando um complemento do firefox, measureit, e vo fazendo as medidas e criando as caixas onde vo colocar textos, imagens, formulários, etc.

Depois de montar o "esqueleto", fatio as imagens do photoshop e coloco no css.

Simples ... É só fazer isso q você consegue (se for isso que to pensando).

Tipo, na verdade é um livro que ta no in design e tenho que fazer desses arquivos página html, com CSS, nesses livros tem imagens, textos, textos em cima de imagens, etc...esse que é o problema, na verdade comecei com CSS há 2 dias, mas acho tranquilo a questão de entender ele, mas o problema por exemplo, quando tenho que colocar um texto em cima da imagem, sei que na CSS devo colocar a propriedade background, a imagem fica no fundo, porém essa imagem não fica no tamanho normal dela, fica cortada, no tamanho do texto, e a questão do trabalho que leva formatar esses livros, por isso que perguntei se tinha alguma sugestão com relação a esta importação do in design para dreamweaver já que ele não exporta a formatação como está no livro. Obrigado!

não entendi esse measureit, pode me explicar o que ele faz e como usá-lo? Obrigado

Editado Maio 15, 2009 por fabiojpoli

[Willian Antunes]

Hummm .. pelo jeito você vai ter que estudar com afinco CSS ...

Lê TUDO desse site e vai colocando em prática cada explicação:

http://www.maujor.com/index.php

Esse outro é pra você ver os vídeos tutoriais de tableless, são muito bons também:

http://visie.com.br/campus/

O que você tiver pronto e não conseguir fazer, poste o código que nós do fórum vamos estruindo.

A formatação vai ser tranquilo com CSS, mais por enquanto preocupe-se e entender como funciona.

Nesse vídeo explica a funcionalidade do measureit (fica quase no final do vídeo):

http://visie.com.br/campus/video/1

O Measureit é uma Régua que faz medidas em pixels, ajuda muito a montar um layout baseado em algum, fazer medidas pra margem, espaçamento, etc.

Abraços!

[fabiojpoli]

Hummm .. pelo jeito você vai ter que estudar com afinco CSS ...

Lê TUDO desse site e vai colocando em prática cada explicação:

http://www.maujor.com/index.php

Esse outro é pra você ver os vídeos tutoriais de tableless, são muito bons também:

http://visie.com.br/campus/

O que você tiver pronto e não conseguir fazer, poste o código que nós do fórum vamos estruindo.

A formatação vai ser tranquilo com CSS, mais por enquanto preocupe-se e entender como funciona.

Nesse vídeo explica a funcionalidade do measureit (fica quase no final do vídeo):

http://visie.com.br/campus/video/1

O Measureit é uma Régua que faz medidas em pixels, ajuda muito a montar um layout baseado em algum, fazer medidas pra margem, espaçamento, etc.

Abraços!

beleza...vlw...você pode sanar so a duvida da imagem. Por exemplo, tenho uma imagem e quero colocar texto em cima dela, como faço isso? tentei o seguinte mas não deu certo: a imagem não fica inteira no emboaixo do texto, mas fica cortada

.tituloBrancoPrincipal {  
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 20px; 
    color:#FFFFFF; 
    font-weight: bold; 
    text-transform: none;  
    background-image:url(teste-fabio-web-images/Fundo%20Capa_opt.jpeg);
    background-repeat:no-repeat;
    background-position:left;
    right:50px;
    text-align:right;
    width:575px;
 }

[Willian Antunes]

Se baseia-se nesse exemplo:

Código CSS:

#imagemfundo  {
      background-image: url(exemplo.jpg);
      background-repeat: no-repeat;
      width: 500px;
      height: 400px;
}

#texto  {
      Coloque as config que quiser ...
}

E o Html.

<div id="imagemfundo">
<div id="texto">
<h3>O Reinado Alado dos Pássaros</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et nibh eget felis rhoncus viverra. Morbi sit amet justo justo. Aliquam hendrerit quam vitae ligula tincidunt tincidunt. Suspendisse consectetur rhoncus magna, quis auctor diam ultricies ut. Sed ligula quam, vestibulum sed pulvinar et, ornare a urna. In non sapien nibh, eu condimentum libero. Nam dui libero, facilisis nec suscipit a, pharetra eget turpis.</p></div><!-- Fim TEXTO -->
</div><!-- Fim ImagemFundo -->

[fabiojpoli]

Se baseia-se nesse exemplo:

Código CSS:

#imagemfundo  {
      background-image: url(exemplo.jpg);
      background-repeat: no-repeat;
      width: 500px;
      height: 400px;
}

#texto  {
      Coloque as config que quiser ...
}

E o Html.

<div id="imagemfundo">
<div id="texto">
<h3>O Reinado Alado dos Pássaros</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et nibh eget felis rhoncus viverra. Morbi sit amet justo justo. Aliquam hendrerit quam vitae ligula tincidunt tincidunt. Suspendisse consectetur rhoncus magna, quis auctor diam ultricies ut. Sed ligula quam, vestibulum sed pulvinar et, ornare a urna. In non sapien nibh, eu condimentum libero. Nam dui libero, facilisis nec suscipit a, pharetra eget turpis.<p></div><!-- Fim TEXTO -->
</div><!-- Fim ImagemFundo -->

beleza, obrigado por enquanto, eu tava esquecendo de colocar a altura da imagem, coloquei somente a largura