Pare! Pare tudo o que você está fazendo agora. Você já manja de CSS?
Não estou falando daquele painel do Dreamweaver, estou falando dos
recursos que o CSS oferece. Cheguei a conclusão de que todo designer de
interface Web tem que saber codificar um bom XHTML na mão. Esse negócio
de fazer o layout no Photoshop e entregar ao programador é coisa de
webdesigner capenga.

Sabe porque? Simplesmente porque há
diversas decisões do design que acontecem durante a codificação. Não
existe ainda uma ferramenta WYSIWYG que agilize tanto a criação de
XHTML a ponto de dispensar o Photoshop ou o Flash para esboçar o
layout. Então, o layout deve ser criado primeiro e codificado depois.
No entanto, quando esse layout vai ser implementado em CSS, algumas
adaptações tem que ser feitas para acatar as restrições. Detalhes como
área de ação, efeitos rollover e otimização de arquivos são todos
decididos nesse momento e isso é tarefa de designer.

Talvez você
esteja com duas dúvidas: e esse Flash de que você fala tanto? E o
Dreamweaver não quebra o galho? Primeiro, Flash tem suas aplicações mas
com certeza disponibilizar textos não é uma delas. E Web ainda é 90%
texto. Dreamweaver faz um bom layout baseado em tabelas, mas mesmo na
versão 2004 ainda tem que melhorar muito para rendereizar um layout
baseado em CSS position e float. Ah, você não sabe o que é isso? Então
nem adiantaria tentar usar o Dreamweaver, porque ele vai te exigir
saber CSS de cor do mesmo jeito. Trate de aprender urgente.

Não
é nada complicado. Aliás se você pudesse esquecer tudo o que sabe sobre
o arcaico HTML 4, veria que XHTML com CSS é tão fácil que editar código
na mão é moleza (ainda mais usando o TopStyle). Não é aquele bixo de
sete cabeças como é o HTML4. Para criar um layout de três colunas basta
o seguinte código:





Lembra
quantas linhas eram necessárias para fazer isso usando tabelas? Essa
tag div aí é análoga as caixas do Pagemaker e do Corel Draw. Olha só,
dá pra fazer melhor ainda:







Opa!
Acho que você já pegou quais são as duas grandes vantagens do CSS:
separação entre formatação e conteúdo (e consequente facilidade para
atualização) e diminuição drástica no tamanho do código. Se você pegar
aquelas linhas dentro da tag style e colocar num arquivo externo e
carregar em cada página com esse código: href="estilos.css" type="text/css" /> você controla o layout de
todas as páginas de um site com um só arquivo. Genial, não? Melhor
ainda para seu usuário que só vai precisar baixar isso para uma página
fictícia (note como só com o código é possível entender a página):

Nós
temos o melhor design do mundo, aquele que pode ser visto por qualquer
pessoa em qualquer lugar. Ubiquidade é
nosso codinome.

Os
estilos que estão no arquivo externo é quem faz o posicionamento dos
elementos, as cores, as imagens de fundo e etc. Agora imagine se o
usuário não pode ver a página diagramada, como na ocasião de usar um
Palm que tem uma tela de 120x120 pixels ou usando um leitor de tela?
Sem problemas, mesmo ignorando os estilos, a página continua
completamente usável, um luxo inatingível usando tabelas.

Agora
minha última cartada para te convencer: sim, os browsers atuais são
compatíveis com essa codificação. Se você tiver saco de lidar com algumas pequenas diferenças
de renderização, seu website vai ficar igual nos browsers Internet
Explorer 5+, Mozilla, Opera 7+ e virtualmente qualquer browser que
possa vir a surgir. Como eu garanto? Simplesmente porque você está
fazendo aquilo que está oficializado pelo W3C como sendo o padrão de mercado.

Por
falar em mercado, que tal ganhar algum dinheiro com isso? Diga aos seus
clientes que você domina técnicas que podem jogar os websites deles lá
pra cima na listagem do Google. "Imagine digitar o ramo que sua empresa
atua e ver ela em primeiro lugar?" Provoque, mexa nos egos deles. Se
você conseguir convencê-lo não será difícil cumprir a promessa. Basta
escrever um código bem esperto, semântico.

Opa, qual o
significado dessa palavra? Significado, oras! Lembra da tag

que a gente nunca usava naqueles tempos de HTML 4 porque ficava muito
grande? Pois o conteúdo que estiver dentro dela é interpretado pelo
Google como sendo um título, ou seja, coisa importante. Escreva um
título gostoso de ler, com uma palavra-chave legal no meio e pronto!
Mais um pontinho no ranking dos buscadores. Não, o seu h1 não vai ficar
grande se você colocar isso no CSS: h1 { font-size: 100%; }. Conheça
bem as tags semânticas do XHTML e as formatações que o CSS possibilita e arrase.

Fonte: FlashMasters