Designer, você já consegue trabalhar tranquilamente com os recursos do CSS? Segundo o Fred, todo web designer deveria saber codificar a linguagem XHTML manualmente, porque apenas fazer o design no aplicativo gráfico e mandar para o programador diagramar em linguagem de marcação é coisa de webdesigner capenga.
Dreamweaver faz um bom layout baseado em tabelas, mas mesmo na versão 2004 ainda tem que melhorar muito para renderizar 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.
Calma, antes veja um exemplo onde se cria uma estrutura com três colunas:
<div id="coluna1" style="float:left; width: 180px;">Olá</div>
<div id="coluna2" style="float:left; width: 400px;">tudo</div>
<div id="coluna3" style="float:left; width: 180px;">bem?</div>
Você acostumado com o Dreamweaver (como eu também), já pensou quantas linhas seriam criadas fazendo isso com tabelas em HTML? Agora pense nessa tag <div> como aquelas caixas de texto no Corel Draw, PageMaker etc. Percebe as possibilidades?
Olha, é possÃvel (e deve-se) melhorar ainda mais:
<html>
<style type="text/css">
.colunalateral { float:left; width: 180px; }
#colunacentral { float:left; width: 400px; }
</style>
<body>
<div class="colunalateral">Olá</div>
<div id="colunacentral">tudo</div>
<div class="colunalateral">bem?</div>
</body>
</html>
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:
<link rel="stylesheet" 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?
Os estilos que estão no arquivo externo fazem 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 120×120 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.
Realmente não é nada complicado. E eu digo isso por experiência pessoal. Desde que descobri esse “tal de Tableless” caà na real de como é bem mais fácil você projetar o conteúdo de uma página web em uma estrutura de linguagem chamada XHTML (que é a evolução natural do HTML 4 ao qual estamos mal-acostumados), e especificar os detalhes de layout de forma separada do conteúdo em uma estrutura chamada CSS.
Tableless não é uma nova linguagem, muito menos um programa que você vai ter que aprender a usar. Mas uma nova metodologia de desenvolvimento onde você programa e oferece o conteúdo nos seus arquivos XHTML e define o “design” do seu site em um único arquivo de folhas de estilos, o CSS, economizando tempo, tamanho de arquivos e consequentemente banda de internet, além de trabalhar com arquivos semanticamente (ou politicamente) corretos melhorando inclusive seu ranking em buscadores baseados em padrões de web, como o oráculo Google.
Baseado e citando o artigo de Frederick van Amstel, no WebInsider.
1 Comentário até agora
3/June/2005 @16:24
Valeu pelas dicas…ateh +
Deixe seu comentário