[Resolvido] Photoshop e Dreamweaver - Layout

[Vi =) 0]

Gostaria de tirar algumas dúvidas sobre a criação do Layout de um site no Photoshop, assim como usá-lo no Dreamweaver.

 

Em primeiro lugar gostaria de saber as dimensões do desenho do layout feito no Photoshop para que não apareça a barra de rolagem horizontal.

 

Depois gostaria de saber qual a melhor forma de transformar esse layout (feito no Photoshop) em site propriamente dito (no Dreamweaver). Eu tentei fatiando o layout no Photoshop e colocando cada imagem em uma célula na tabela do Dreamweaver. Porém ocorreram muitos erros, não preservei o layout, em algumas células ficaram tortas em relação ao resto...um horror...Alguém poderia me ajudar qnto a isso me indicando a melhor forma de resolver isso?

 

Abraços

[Thomé 0]

Sou péssimo com web, mas ao que parece você já tem uma idéia de como montar uma pagina... Pq você nao pega um template pronto e estuda pra ver como foi feito? Sei que com o template vem o .psd, e lá da pra ter uma idéia de como é pra fatiar, exportar, etc...

[kadix 0]

Gostaria de tirar algumas dúvidas sobre a criação do Layout de um site no Photoshop, assim como usá-lo no Dreamweaver.

 

Em primeiro lugar gostaria de saber as dimensões do desenho do layout feito no Photoshop para que não apareça a barra de rolagem horizontal.

 

você tem que decidir antes de tudo, qual a resolução de tela que você vai projetar seu layout. Aconselho que use 800x600 pois ainda é a grande maioria

então, se baseando nesta resolução de 800x600 faça seu layout com 776px de largura assim não terá a barra horizontal.

 

Depois gostaria de saber qual a melhor forma de transformar esse layout (feito no Photoshop) em site propriamente dito (no Dreamweaver). Eu tentei fatiando o layout no Photoshop e colocando cada imagem em uma célula na tabela do Dreamweaver. Porém ocorreram muitos erros, não preservei o layout, em algumas células ficaram tortas em relação ao resto...um horror...Alguém poderia me ajudar qnto a isso me indicando a melhor forma de resolver isso?

 

olha a melhor forma é não usar tabelas, se tu esta começando, seria uma boa que aprendesse da maneira correta que é sem tabelas, pra não criar vícios sabe

no entanto, se prefere pular essa etapa, ao menos por enquanto, o caminho é esse mesmo, tu fatia no photoshop e quando for salvar, escolha Save for web

que o proprio photoshop já cria uma pagina html e você não precisa colocar cada imagem dentro de uma celula.

 

mas se neste layout você precisa inserir textos e imagens que irão fazer o site se extender verticalmente (ou seja pra baixo), aí vai distorcer mesmo.

se for este o caso, tu precisa criar uma tabela e fazer as divisões necessárias conforme teu layout. Eu costumava fazer isso primeiro num papel e não negar que até ficar tudo redondinho, precisava refazer essas tabelas algumas vezes.

 

qq. coisa fala aí

abraço, Carol

 

 

 

 

Abraços

[coxao 5]

senão me engano a dimensão padronizadaé 740 na horizontal.... não tenho muita certeza, eu sempre criei meus layouts usando esta resolucao por causa da resolucao 800x600

 

olha acho que você tem que aprender primeiramente então HTML antes de começar a criar esses layout, a melhor forma é criar o layout, fatia-se ele, depois exporta somente as imagens e monta dessa maneira que você disse, mais ai você precisa saber mais sobre DIV/TABLELESS ... o que não aconselho é você tentar exportar Imagens e o HTML, pois o photoshop monta um código EXTREMAMENTE poluido

[Vi =) 0]

Olá, agradeço pela colaboração =)

 

Então, fatiei o layout no Photoshop e salvei através do Salve for Web & Devices. No Dreamweaver fiz as tabelas correspondentes ao layout recortado. Porém estou com um problema.

 

Meu layout é simples. Na parte superior tenho o TOPO, na lateral esqueda o MENU, no meio a parte do CONTEÚDO, na lateral direita os ANÚNCIOS e na parte inferior o RODAPÉ.

 

O problema é: Eu fatio o layout, faço entao as tabelas (3 linhas e 3 colunas sendo que no TOPO e RODAPÉ as 3 colunas são unidas em uma só). Quando vou colocar o conteúdo na célula do meio (entre o MENU e os ANUNCIOS) dependendo do tamanho do conteúdo a parte MENU vai descendo conforme aumenta o tamanho do texto =/

 

Tentei colocar uma tabela dentro da outra na célula do CONTEÚDO e mesmo assim não adiantou. As laterais continuam a descer.

 

Como posso solucionar isso?

[coxao 5]

acho que essa parte é mais para pessoal de webdevelop.... eu não saco nada além do HTML basico e PHP =]

eu aconselho você não trabalhar com tabelas pra falar a verdade

[Mezy 0]

O problema é: Eu fatio o layout, faço entao as tabelas (3 linhas e 3 colunas sendo que no TOPO e RODAPÉ as 3 colunas são unidas em uma só). Quando vou colocar o conteúdo na célula do meio (entre o MENU e os ANUNCIOS) dependendo do tamanho do conteúdo a parte MENU vai descendo conforme aumenta o tamanho do texto =/

bom.. primeiro vou explicar por que isso acontece:

 

digamos que sua célula de conteúdo (central) tem 500px (altura) X 500px (largura)...

quando você adiciona texto a uma célula, ela funciona como uma página do Word, quando acaba o espaço horizontal ela quebra a linha.. contunuando assim na linha de baixo..

 

só que você também tem um valor fixo para a altura... se você adcionar mais texto do que cabe nessa célula ela terá que se expandir, e o fará para baixo...

como ela está em uma tabela quando o tamanho (que era 500px) aumentar... toda a linha aumentará também (no seu caso, o menu e o anuncio)

 

Solução:

 

laaaaah no inicio dos tempos (hehehe) quando ninguém se preocupava com tableless e etc.. criava-se algo do tipo

 

<table>
<tr>
<td>lalal</td>
<td width="500px" height="500px"><div style="overflow:scroll;">AQUI ENTRA SEU TEXTO</div></td>
</tr>
</table>

 

isso se chama CSS, e hoje em dia as pessoas quando criam sites se preocupam com acessibilidade e etc, por isso fazemos de outra maneira... mas assim também funciona

[Pantoja 5]

nossa!

 

alguem move isso daqui pelamordeddeus ta me dando dor de cabeça esses códigos já.

[peshe 0]

nossa!

 

alguem move isso daqui pelamordeddeus ta me dando dor de cabeça esses códigos já.

 

É peshe, vai demorar bastante, mas hoje tive uma boa noticia, o Johnny falou com o Brent, ele vai arrumar uma foto de frente decente \o/ ! Pô, to começando a me sentir importante :P Mas o Brent deve ser um cara legal, acho que ele deve tá curioso para saber como vai ficar! Espero que aprovem nosso video clipe, e que ponham no site oficial e na TV dos USA, hauahuhauha que eu vou por no Overdrive da MTV :P e no Youtube claro, podem deixar vocês estão me ajudando, vocês uma das primeiras pessoas a ver o video, levando em consideração que há muita gente envolvida.

 

Abraço!

haUhauahuaha

 

É verdade, essa seção é sobre Photoshop...

[Mezy 0]

desculpem... nem percebi que respondendo a pergunta o tópico perderia o sentido... enfim.. é só mover para a área adequada... http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

[dreadlocks83 0]

esse esquema de layout

TOPO

MENU - CONT. - ANUN

RODAPE

 

dá pra fazer sem crise com CSS

é só fatiar certinho e leia esse esquema pra criar o layout no dreamweaver

http://www.maujor.com/tutorial/marcatemplate.php

você vai usar até a codificação 3 colunas, depois já são pra outros tipos

 

abraços

[Vi =) 0]

Obrigado pessoal, consegui solucionar o meu problema. Criei o layout no Photoshop, fatiei, salvei para web e no Dreamweaver fiz a tabela corretamente. O problema que eu tive ( ao colocar conteudo no meio as laterais descerem) foi solucionado colocando uma tabela dentro dos campos das laterais e alinhando-a no topo. Bem simples...

 

Agora vou dar uma estudada em CSS e tableless pq pelo o que eu vi por aqui fazer uso de tabelas no DW pra fazer sites parece q nao se usa mais ne? rssss

 

Abraços