TUTORIAL/LAYOUT

ADEUS, TABELAS DE HTML
O PADRÃO CSS DEFINE O LAYOUT DO SITE, DEIXA A PÁGINA LEVE E RÁPIDA DE CARREGAR
POR ANDRÉ CARDOZO

sar as tradicionais tabelas de HTML para separar as áreas de uma página está virando uma solução antiquada. Cada vez mais, os webmasters utilizam o padrão CSS (Cascading Style Sheets) para definir o layout do site no lugar das tabelas. A substituição se justifica — uma página de 60 KB com tabelas emagrece para coisa de 4 KB com CSS, reduzindo o tempo de carregamento e o consumo de banda. Assim, essa tecnologia, que há cerca de dois anos era usada basicamente para configurar

fontes e fundos de página, inaugurou a era tableless nos websites de todos os portes. A adoção do CSS não aconteceu antes porque o suporte dos browsers a essa tecnologia ainda começava. Mas os navegadores atuais, como Internet Explorer 6.0, Firefox 1.0.4 e Opera 7 e 8, interpretam o padrão com poucas diferenças (veja telas), o que permite utilizá-lo com precisão. Neste tutorial, vamos criar o layout de um site substituindo o comando “table” do HTML por um conjunto de recursos do CSS conhecido como CSS-P (Cascading Style Sheets Positioning). A principal vantagem desse método é que todo o layout fica num arquivo separado que vale para o site inteiro e só é carregado uma vez pelo navegador. Isso evita a repetição de tags nas páginas e permite alterações mais rápiCSS no IE: boa distribuição das quatro áreas do layout das no visual do site.

U

C O L E Ç Ã O I N F O > 53

TUTORIAL/LAYOUT

Escolhemos um layout com quatro áreas: cabeçalho horizontal (onde normalmente entram logotipo e banner), coluna esquerda (menu de navegação principal), coluna central (área de conteúdo e destaques) e coluna direita (navegação secundária, CSS no Firefox: leitura altera o título e a coluna à direita links para parceiros etc.). O arquivo pronto está dispode conteúdo, criando camadas que nível para download no endereço podem ser manipuladas separadawww.info.abril.com.br/download/ mente. Dentro desse depósito, po3466.shtml. demos usar normalmente todos os comandos HTML. Note que cada “div” possui um O HTML atributo “id” distinto, que define O primeiro passo é criar o arquivo todas as áreas do layout. Assim, já HTML. Dentro do comando “head”, temos no arquivo HTML os quatro é necessário escrever a seguinte tag: blocos de conteúdo. Salve o arqui<link rel=“stylesheet” href=” vo e teste no browser. estilo. css“type=”text/ css”> Ela indica ao browser qual é a folha de estilo que deve ser tomaA FOLHA DE ESTILO do como referência para o layout Por enquanto, as áreas do layout (neste caso, “estilo.css”). No corpo ainda não estão em suas devidas do arquivo HTML temos quatro bloposições e são exibidas uma abaicos que definem as áreas: xo da outra. Isso ocorre porque não <div id=“topo”>conteúdo do criamos o documento CSS, que é o cabeçalho </div> responsável por definir a posição <div id=“esquerda”>conteúdo de cada bloco na página. Esse seda coluna esquerda</div> rá nosso próximo passo. <div id=“meio”>conteúdo da A folha de estilo nada mais é do coluna central</div> que um arquivo em texto puro com <div id=“direita”>conteúdo da a extensão CSS. Abrimos então o coluna direita</div> Bloco de Notas do Windows e esA tag “div” serve como depósito crevemos os seguintes comandos:

1.

2.

54 < C O L E Ç Ã O I N F O

TUTORIAL/LAYOUT

#topo { margin: 5px; height: 80px; background: silver; } #esquerda { position: absolute; top: 105px; left: 10px; width: 150px; background: silver; } #meio { CSS no Opera: diferença de leitura na coluna à direita margin-left: 170px; O primeiro bloco de comandos margin-right: 220px; se refere ao cabeçalho. Os elemenbackground: silver; tos “margin” e “height” definem, } respectivamente, a margem e a al#direita { tura em pixels. O atributo “backposition: absolute; ground” determina a cor de fundo, top: 105px; mas é opcional e foi incluído aperight: 10px; nas para facilitar a visualização. width: 200px; A seguir, definimos as três colubackground: silver; nas do layout. O bloco da esquer}

VALIDE SUA PÁGINA
O tableless já faz parte do conjunto de padrões da web, especificados pelo W3C (www.w3c.org), o consórcio que dita as regras tecnológicas da grande rede. Por isso mesmo, a tendência é de aumentar a compatibilidade do padrão entre os navegadores e acelerar o tempo de renderização das páginas. Para seguir os padrões à risca, verifique se a página que você criou está correta, utilizando o serviço W3C Markup Validation Services, um validador de HTML gratuito disponível no endereço validator.w3.org. Basta postar o endereço de sua página, que o serviço mostrará as tags que apresentam erros.

C O L E Ç Ã O I N F O > 55

TUTORIAL/LAYOUT

da, que abrigará o menu de navegação, tem largura definida em pixels. A linha “position: absolute” permite que o webmaster determine a posição do bloco por meio de coordenadas. Neste caso, ele está a 105 pixels do topo e a 10 pixels do lado esquerdo da página. Esse procedimento vale também para a coluna da direita.

3. A COLUNA DO MEIO
O pulo-do-gato está no código usado na coluna do meio. Aqui, definimos apenas as margens esquerda e direita para evitar que a área se sobreponha às outras. Observe que, ao contrário dos blocos da esquerda e da direita, não há largu-

ra definida. Dessa forma, a área central é ajustada automaticamente, de acordo com o tamanho da janela do internauta. Caso o usuário redimensione o browser, a página será realinhada, evitando a barra de rolagem na horizontal. Salve o documento como “estilo.css” no mesmo diretório do arquivo HTML e faça o teste, redimensionando a janela do browser. Note que as áreas do topo e do meio se adaptam ao novo tamanho, enquanto as colunas da esquerda e da direita mantêm sua largura. Pronto, nosso layout está terminado e agora é só escrever uma carta de despedida sem saudade para as tabelas HTML.

Mais sobre o CSS
Conheça outros comandos úteis em folhas de estilo
> Comando > background > border > border-style > color > font > font-family > font-size > list-style > margin > padding > text-align Função Define propriedades do fundo, como cor ou imagem Determina propriedades da borda Atribui o estilo à borda Define cor da fonte ou do elemento Define propriedades da fonte Determina o tipo da fonte Regula o tamanho da fonte Define propriedades dos elementos <li> Cria espaço à volta do elemento Exemplo background: url(‘imagem/fundo.gif’) border: solid 1px #000000 border-style: solid color: rgb(255,10,10) font: 10px verdana bold font-family: arial font-size: large list-style: disc inside margin: 0px auto 0px 5px

Define espaço entre o texto e padding: 10px a borda Define o alinhamento do texto text-align: justify

Obs.: outros comandos você pode encontrar no endereço: www.w3schools.com/css.

56 < C O L E Ç Ã O I N F O