Trabalhar com layout feito em photoshop

[Daniel Ribeiro 4]

Olá gente!

 

Recentemente desenvolvi um layout em photoshop para um site que usarei em breve.

 

Este layout está salvo de diversas maneiras, com as imagens repartidas com slice tool, também na sua forma original sem cortes.

 

Tenho uma grande dificuldade, porém.

 

Há algum tempo utilizo o dreamweaver para programar em cima deste layoyt da seguinte maneira:

 

Jogo o layout repartido no DW e começo a fazer tabelas por tudo, uma em cima da outra.

 

Qual a surpresa? Obtenho vários bugs dependendo do navegador, as imagens ficam fora do lugar e quando tento escrever alguma coisa, tudo se mexe e o site fica todo fora do lugar.

 

Gostaria de saber COMO EU DEVO PROCEDER com este tipo de layout feito em photoshop, desde a hora de salvá-lo no próprio photoshop até a hora de programá-lo no DW.

 

O site está hospedado no seguinte endereço:

 

http://ragnacorp.forbrazil.com.br/site/index.php

 

Vejam o detalhe: O site aberto pelo Google Chrome fica perfeito, sem bugs; nos outros navegadores, porém, (firefox e ie8)ocorrem diversos bugs principalmente com as imagens.

 

Eu preciso de uma luz gente.

 

Tem gente que diz que o certo é usar tableless para este tipo de operação, mas não sei nem por onde começar.

 

Como fazer?

 

Agradeço desde já a ajuda!

 

Daniel R. G. Pereira (drgomesp).

[Thiago Retondar 18]

Incrivelmente não percebi nenhuma diferença.

 

Qual sua dúvida? Quer aprender tabeless? Ou quer resolver o seu problema com o site?

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Daniel Ribeiro 4]

Eu gostaria de saber qual o procedimento MAIS ADEQUADO E MAIS CORRETO para se organizar um layout que saiu do photoshop.

 

Procedimentos que gostaria de aprender desde fatiar o site até programá-lo no DW.

 

Não sei se tableless é o ideal para isso, se for, gostaria de aprender sim.

 

OBS: A diferença nos navegadores está no centro da página. Há 2 caixas, uma embaixo da outra, em branco. A caixa de baixo está mais para a direita, com um bug em sua esquerda também.

 

Grato.

[Thiago Retondar 18]

Eu gostaria de saber qual o procedimento MAIS ADEQUADO E MAIS CORRETO para se organizar um layout que saiu do photoshop.

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Tableless.

 

Se você fatiar o site e "jogar" no Dreamweaver ele vai construir com tabelas. O melhor à se fazer é você mesmo codificar tudo. Assim, além de aprender, vai ter mais domínio sobre a página. ;)

 

Dois links essenciais nos seus favoritos http://forum.imasters.com.br/public/style_emoticons/default/seta.gif maujor e tableless.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Daniel Ribeiro 4]

Tudo bem então, mas eu gostaria de saber mais profundamente.

 

Veja bem: que guias eu devo ler de início para aprender o básico dessa codificação.

 

OBS: Pelo que eu entendi, eu mesmo criarei as tabelas e colocarei as imagens como plano de fundo delas, correto?

[Gui.BAR 0]

Olha, eu não recomendo você fazer isso dessa maneira. Você nunca vai conseguir se satisfazer assim, vai dar pau, e sempre que quiser mudar qualquer coisa vai ter que ir ao layout no photoshop, mudar lá, exportar pro dreamweaver, acertar lá e mandar pro ftp! Ou seja.. aprenda a fazer da maneira certa e tenha um melhor aproveitamento.

 

Dá uma olhada nesse meu cometário. Eu dou umas dicas de screencasts muito bons.

 

Seu layout tá mto fod@! :lol:

[Thiago Retondar 18]

Então, não entendi muito bem. Você pretende exportar tudo como imagem? Até texto? Se for isso, vai estar errado.

 

Uma boa leitura é o livro do Maujor. ;)

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Daniel Ribeiro 4]

Na verdade eu só quero aprender a criar o layout certinho com essas imagens do meu layout sem precisar usar tabelas.

 

Dei uma olhada em alguns tutoriais sobre tableless e queria saber se tem como fazer naquela estrutura em <div> com planos de fundos para essas divs, utilizando as imagens fatiadas.

 

Não sei se essa maneira é a correta, é?

[William Bruno 1501]

Sim, esta é a maneira correta.

É possível fazer qualquer layout usando Tableless.

 

Vamos lá.. ja fiz uma vez(este 'tutorial'). Vou descrever os passos para o 'recorte em DIVs':

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Identifique os blocos do teu layout.

Vejo no link que você postou

-> Topo, Menu, Coluna de Navegação(direita), Conteudo (dentro dele um rodapé).

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Comece de cima para baixo, e da esquerda para a direita. 'Orientação Ocidental' ^_^ .

-> Faça o topo, colocando aquele banner grande como plano de fundo de uma div#topo, dê um espaço dessa div pro top do body, para poder colocar aquele menuzinho, e a parte de login.

-> Crie o menu, um simples UL LI, com o background geral que é o retângulo arredondado no UL, e cada LI com as entrâncias de cada item('Home', 'Painel de Controle'..)

-> Faça o bloco de conteudo. Basta uma DIV com largura definida, e flutuada à esquerda. Por enqnto, já pode definir as bordas redondas, como backgrounds. Para isso, você irá precisar de 2 elementos. meio-conteudo(background do topo redondinho, e a cor sólida que vai preencher o bloco), e rodape-conteudo(background com as bordas redondas de baixo desse bloco).

-> Flutue outro bloco à direita. Este aqui é a tua navegação. Ai basta dividir ele, nas seções que você criou. (Home, Controle, Doações, Informações), cada uma com o respectivo background. Para otimizar essa área, use as mesmas imagens, e permita que elas sejam espansíveis, use classes as seções.

 

E pronto, acabamos de recortar o layout.

Para isso, não use nenhuma ferramenta visual. Escreva o HTML na mão. O bloco de notas do Windows, ou qualquer editor de textos simples, sem autocomplete, e até mesmo sem highlight de sintaxe, é uma boa para treino e aprendizagem.

[Daniel Ribeiro 4]

@William Bruno

 

Exatamente este tipo de ajuda que estou procurando, muito obrigado amigo.

 

Mas tenho algumas dúvidas ainda:

 

Vejo no link que você postou

-> Topo, Menu, Coluna de Navegação(direita), Conteudo (dentro dele um rodapé).

1. Se você perceber, no menu à direita existem diversos "botões", com cantos arredondados. Esses botões são imagens que fiz no photoshop. Na tentativa de desenvolver o site com tabelas, fatiei aqueles botoezinhos e na hora de escrever em cima foi o diabo, porque às vezes aparecia meio botão, ou um botão colado ao outro. O correto seria fazer de que maneira? Pensei em deixar somente o plano de fundo do menu de navegação para ser possível de se expandir, e fazer aqueles botões com cantos arredondados em CSS. É possível isso? Como fazer para os cantos ficarem arredondados nas <div>'s que usarei para cada botão do menu? Como fazer para que quando o mouse passar em cima do botão, todo o bloco da <div> com cantos arredondados fique de outra cor?

 

-> Faça o topo, colocando aquele banner grande como plano de fundo de uma div#topo, dê um espaço dessa div pro top do body, para poder colocar aquele menuzinho, e a parte de login.

2.Não entendi a parte que falaste de dar espaço da <div> pro top do body. O que seria o top do body? O início do conteúdo? Seria então no conteúdo que o menu entraria? Ou o menu deve ser outra div em bloco e depois, sim, o conteúdo separado?

 

-> Crie o menu, um simples UL LI, com o background geral que é o retângulo arredondado no UL, e cada LI com as entrâncias de cada item('Home', 'Painel de Controle'..)

3. Isso é algo que nunca entendi, talvez por não ter conhecimentos aprofundados em HTML e CSS (é o problema de usar o Dreamweaver no modo 'design'): O que seria <ul><li>? A minha percepção diz que esse <ul> é o bloco arredondado de cada botão, e o <li> seria o texto dentro dele. É isso?

 

-> Faça o bloco de conteudo. Basta uma DIV com largura definida, e flutuada à esquerda. Por enqnto, já pode definir as bordas redondas, como backgrounds. Para isso, você irá precisar de 2 elementos. meio-conteudo(background do topo redondinho, e a cor sólida que vai preencher o bloco), e rodape-conteudo(background com as bordas redondas de baixo desse bloco).

4. Aqui eu acho que ficou melhor entendido da minha parte. O conteúdo tem bordas arredondadas em cima e embaixo. Devo fatiá-lo, portanto, no photoshop nessas três partes e deixar o meio passível de expansão?

 

-> Flutue outro bloco à direita. Este aqui é a tua navegação. Ai basta dividir ele, nas seções que você criou. (Home, Controle, Doações, Informações), cada uma com o respectivo background. Para otimizar essa área, use as mesmas imagens, e permita que elas sejam espansíveis, use classes as seções.

 

5. Essa parte não deveria ser feita antes de fazer os <ul><li> do menu que irá dentro dela?

 

Agradeço as possíveis futuras respostas,

 

Um grande abraço.

[Thiago Retondar 18]

[1] » Você pode fatiar apenas uma botão e salvar como GIF, por ser de apenas uma cor. Ou fazer com JavaScript. Para não ter eventualidades, trabalhe com display: block e height. Olhe esse terceiro menu » http://forum.imasters.com.br/index.php?/topic/354140-repente-css-menus/page__view__findpost__p__1341165 Tem exatamente o efeito :hover que você deseja. ;)

 

[2] » Seria mais ou menos isso.

<div id="topo">
	<p class="left">Login-Server: Online  | Char-Server: Online  | Map-Server: Online  | Users Online: 0</p>
	<p class="right">Bem-vindo, visitante! Login | Crie sua conta</p>
	<img src="caminho da imagem" alt="Texto alternativo" />
</div>

Para dar aquele espaço entre o texto e o topo do browser é só aplicar margin-top no #topo.

 

[3] » <ul> é uma lista não ordenada. <li> é cada item da lista, neste caso cada botão.

 

No ul você colocar o background maior, o fundo do menu inteiro e em cada li o background de cada botão. O quarto menu do link acima vai te ajudar bastante nisso. ;)

 

[5] » Não entendi sua colocação. =/ Lembre-se de que você deve codificar da esquerda http://forum.imasters.com.br/public/style_emoticons/default/seta.gif direita.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif