TUTORIAL/LAYOUT 23.05.
05 18:04 Page 53
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 ta-
U belas de HTML para se-
parar as áreas de uma
página está virando
uma solução antiquada. Cada vez
mais, os webmasters utilizam o pa-
drão CSS (Cascading Style Sheets)
para definir o layout do site no lu-
gar 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 tem-
po de carregamento e o consumo
de banda. Assim, essa tecnologia,
que há cerca de dois anos era usa-
da basicamente para configurar
CSS no IE: boa distribuição das quatro áreas do layout
TUTORIAL/LAYOUT
fontes e fundos de página, inaugu-
rou 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 In-
ternet 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 lay-
out de um site substituindo o co-
mando “table” do HTML por um
conjunto de recursos do CSS co-
nhecido como CSS-P (Cascading
Style Sheets Positio-
ning). A principal
vantagem desse mé-
todo é que todo o
layout fica num ar-
quivo separado que
vale para o site intei-
ro e só é carregado
uma vez pelo nave-
gador. Isso evita a re-
petição de tags nas
páginas e permite al-
terações mais rápi-
das no visual do site.
C O L E Ç Ã O I N F O > 53
TUTORIAL/LAYOUT 23.05.05 18:05
TUTORIAL/LAYOUT
Escolhemos um
layout com quatro
áreas: cabeçalho ho-
rizontal (onde nor-
malmente entram lo-
gotipo e banner), co-
luna esquerda (me-
nu de navegação
principal), coluna
central (área de con-
teúdo e destaques) e
coluna direita (nave-
gação secundária, CSS no Firefox: leitura altera o título e a coluna à direita
links para parceiros
etc.). O arquivo pronto está dispo-
nível para download no endereço
www.info.abril.com.br/download/
3466.shtml.
1. O HTML
O primeiro passo é criar o arquivo
HTML. Dentro do comando “head”,
é necessário escrever a seguinte tag: temos no arquivo HTML os quatro
<link rel=“stylesheet” href=”
estilo. css“type=”text/ css”>
Ela indica ao browser qual é a
folha de estilo que deve ser toma-
do como referência para o layout
(neste caso, “estilo.css”). No corpo ainda não estão em suas devidas
do arquivo HTML temos quatro blo-
cos que definem as áreas:
<div id=“topo”>conteúdo do
cabeçalho </div>
<div id=“esquerda”>conteúdo
da coluna esquerda</div>
<div id=“meio”>conteúdo da
coluna central</div>
<div id=“direita”>conteúdo da
coluna direita</div>
A tag “div” serve como depósito
54 < C O L E Ç Ã O I N F O
Page 54
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;
de conteúdo, criando camadas que margin-right: 220px; O primeiro bloco de comandos
podem ser manipuladas separada- background: silver; se refere ao cabeçalho. Os elemen-
mente. Dentro desse depósito, po- } tos “margin” e “height” definem,
demos usar normalmente todos os #direita { respectivamente, a margem e a al-
comandos HTML. position: absolute; tura em pixels. O atributo “back-
Note que cada “div” possui um top: 105px; ground” determina a cor de fundo,
atributo “id” distinto, que define right: 10px; mas é opcional e foi incluído ape-
todas as áreas do layout. Assim, já width: 200px; nas para facilitar a visualização.
background: silver; A seguir, definimos as três colu-
blocos de conteúdo. Salve o arqui- } nas do layout. O bloco da esquer-
vo e teste no browser.
2.A FOLHA DE ESTILO VALIDE SUA PÁGINA
Por enquanto, as áreas do layout O tableless já faz parte do Para seguir os padrões à
conjunto de padrões da web, risca, verifique se a página
posições e são exibidas uma abai- especificados pelo W3C que você criou está correta,
xo da outra. Isso ocorre porque não (www.w3c.org), o consórcio utilizando o serviço W3C
criamos o documento CSS, que é o que dita as regras Markup Validation Services,
responsável por definir a posição tecnológicas da grande rede. um validador de HTML
de cada bloco na página. Esse se- Por isso mesmo, a tendência gratuito disponível no
rá nosso próximo passo. é de aumentar a endereço validator.w3.org.
A folha de estilo nada mais é do compatibilidade do padrão Basta postar o endereço de
que um arquivo em texto puro com entre os navegadores e sua página, que o serviço
a extensão CSS. Abrimos então o acelerar o tempo de mostrará as tags que
Bloco de Notas do Windows e es- renderização das páginas. apresentam erros.
crevemos os seguintes comandos:
C O L E Ç Ã O I N F O > 55
TUTORIAL/LAYOUT 23.05.05 18:05
TUTORIAL/LAYOUT
Escolhemos um
layout com quatro
áreas: cabeçalho ho-
rizontal (onde nor-
malmente entram lo-
gotipo e banner), co-
luna esquerda (me-
nu de navegação
principal), coluna
central (área de con-
teúdo e destaques) e
coluna direita (nave-
gação secundária, CSS no Firefox: leitura altera o título e a coluna à direita
links para parceiros
etc.). O arquivo pronto está dispo-
nível para download no endereço
www.info.abril.com.br/download/
3466.shtml.
1. O HTML
O primeiro passo é criar o arquivo
HTML. Dentro do comando “head”,
é necessário escrever a seguinte tag: temos no arquivo HTML os quatro
<link rel=“stylesheet” href=”
estilo. css“type=”text/ css”>
Ela indica ao browser qual é a
folha de estilo que deve ser toma-
do como referência para o layout
(neste caso, “estilo.css”). No corpo ainda não estão em suas devidas
do arquivo HTML temos quatro blo-
cos que definem as áreas:
<div id=“topo”>conteúdo do
cabeçalho </div>
<div id=“esquerda”>conteúdo
da coluna esquerda</div>
<div id=“meio”>conteúdo da
coluna central</div>
<div id=“direita”>conteúdo da
coluna direita</div>
A tag “div” serve como depósito
54 < C O L E Ç Ã O I N F O
Page 54
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;
de conteúdo, criando camadas que margin-right: 220px; O primeiro bloco de comandos
podem ser manipuladas separada- background: silver; se refere ao cabeçalho. Os elemen-
mente. Dentro desse depósito, po- } tos “margin” e “height” definem,
demos usar normalmente todos os #direita { respectivamente, a margem e a al-
comandos HTML. position: absolute; tura em pixels. O atributo “back-
Note que cada “div” possui um top: 105px; ground” determina a cor de fundo,
atributo “id” distinto, que define right: 10px; mas é opcional e foi incluído ape-
todas as áreas do layout. Assim, já width: 200px; nas para facilitar a visualização.
background: silver; A seguir, definimos as três colu-
blocos de conteúdo. Salve o arqui- } nas do layout. O bloco da esquer-
vo e teste no browser.
2.A FOLHA DE ESTILO VALIDE SUA PÁGINA
Por enquanto, as áreas do layout O tableless já faz parte do Para seguir os padrões à
conjunto de padrões da web, risca, verifique se a página
posições e são exibidas uma abai- especificados pelo W3C que você criou está correta,
xo da outra. Isso ocorre porque não (www.w3c.org), o consórcio utilizando o serviço W3C
criamos o documento CSS, que é o que dita as regras Markup Validation Services,
responsável por definir a posição tecnológicas da grande rede. um validador de HTML
de cada bloco na página. Esse se- Por isso mesmo, a tendência gratuito disponível no
rá nosso próximo passo. é de aumentar a endereço validator.w3.org.
A folha de estilo nada mais é do compatibilidade do padrão Basta postar o endereço de
que um arquivo em texto puro com entre os navegadores e sua página, que o serviço
a extensão CSS. Abrimos então o acelerar o tempo de mostrará as tags que
Bloco de Notas do Windows e es- renderização das páginas. apresentam erros.
crevemos os seguintes comandos:
C O L E Ç Ã O I N F O > 55
TUTORIAL/LAYOUT 23.05.05 18:05 Page 56

TUTORIAL/LAYOUT

da, que abrigará o menu de nave- ra definida. Dessa forma, a área

gação, tem largura definida em pi-
xels. A linha “position: absolute”
permite que o webmaster determi-
ne 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 usa-
do na coluna do meio. Aqui, defi-
nimos apenas as margens esquer-
da e direita para evitar que a área
se sobreponha às outras. Observe
que, ao contrário dos blocos da es-
querda e da direita, não há largu-
central é ajustada automaticamen-
te, 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 “esti-
lo.css” no mesmo diretório do ar-
quivo HTML e faça o teste, redi-
mensionando a janela do browser.
Note que as áreas do topo e do
meio se adaptam ao novo tama-
nho, enquanto as colunas da es-
querda e da direita mantêm sua
largura. Pronto, nosso layout es-
tá terminado e agora é só escre-
ver uma carta de despedida sem
saudade para as tabelas HTML.

Mais sobre o CSS

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

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