Você está na página 1de 4

TUTORIAL/LAYOUT 23.05.

05 18:04 Page 53

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 ta- fontes e fundos de página, inaugu-

U belas de HTML para se-


parar as áreas de uma
página está virando
uma solução antiquada. Cada vez
rou a era tableless nos websites de
todos os portes.
A adoção do CSS não aconteceu
antes porque o suporte dos browsers
mais, os webmasters utilizam o pa- a essa tecnologia ainda começava.
drão CSS (Cascading Style Sheets) Mas os navegadores atuais, como In-
para definir o layout do site no lu- ternet Explorer 6.0, Firefox 1.0.4 e
gar das tabelas. A substituição se Opera 7 e 8, interpretam o padrão
justifica — uma página de 60 KB com poucas diferenças (veja telas), o
com tabelas emagrece para coisa que permite utilizá-lo com precisão.
de 4 KB com CSS, reduzindo o tem- Neste tutorial, vamos criar o lay-
po de carregamento e o consumo out de um site substituindo o co-
de banda. Assim, essa tecnologia, mando “table” do HTML por um
que há cerca de dois anos era usa- conjunto de recursos do CSS co-
da basicamente para configurar 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-
CSS no IE: boa distribuição das quatro áreas do layout das no visual do site.

C O L E Ç Ã O I N F O > 53
TUTORIAL/LAYOUT 23.05.05 18:05 Page 54

TUTORIAL/LAYOUT TUTORIAL/LAYOUT

Escolhemos um #topo {
layout com quatro margin: 5px;
áreas: cabeçalho ho- height: 80px;
rizontal (onde nor- background: silver;
malmente entram lo- }
gotipo e banner), co- #esquerda {
luna esquerda (me- position: absolute;
nu de navegação top: 105px;
principal), coluna left: 10px;
central (área de con- width: 150px;
teúdo e destaques) e background: silver;
coluna direita (nave- }
gação secundária, CSS no Firefox: leitura altera o título e a coluna à direita #meio {
CSS no Opera: diferença de leitura na coluna à direita
links para parceiros margin-left: 170px;
etc.). O arquivo pronto está dispo- de conteúdo, criando camadas que margin-right: 220px; O primeiro bloco de comandos
nível para download no endereço podem ser manipuladas separada- background: silver; se refere ao cabeçalho. Os elemen-
www.info.abril.com.br/download/ mente. Dentro desse depósito, po- } tos “margin” e “height” definem,
3466.shtml. demos usar normalmente todos os #direita { respectivamente, a margem e a al-
comandos HTML. position: absolute; tura em pixels. O atributo “back-
1. O HTML Note que cada “div” possui um top: 105px; ground” determina a cor de fundo,
O primeiro passo é criar o arquivo atributo “id” distinto, que define right: 10px; mas é opcional e foi incluído ape-
HTML. Dentro do comando “head”, todas as áreas do layout. Assim, já width: 200px; nas para facilitar a visualização.
é necessário escrever a seguinte tag: temos no arquivo HTML os quatro background: silver; A seguir, definimos as três colu-
<link rel=“stylesheet” href=” blocos de conteúdo. Salve o arqui- } nas do layout. O bloco da esquer-
estilo. css“type=”text/ css”> vo e teste no browser.
Ela indica ao browser qual é a
folha de estilo que deve ser toma- 2.A FOLHA DE ESTILO VALIDE SUA PÁGINA
do como referência para o layout Por enquanto, as áreas do layout O tableless já faz parte do Para seguir os padrões à
(neste caso, “estilo.css”). No corpo ainda não estão em suas devidas conjunto de padrões da web, risca, verifique se a página
do arquivo HTML temos quatro blo- posições e são exibidas uma abai- especificados pelo W3C que você criou está correta,
cos que definem as áreas: xo da outra. Isso ocorre porque não (www.w3c.org), o consórcio utilizando o serviço W3C
<div id=“topo”>conteúdo do criamos o documento CSS, que é o que dita as regras Markup Validation Services,
cabeçalho </div> responsável por definir a posição tecnológicas da grande rede. um validador de HTML
<div id=“esquerda”>conteúdo de cada bloco na página. Esse se- Por isso mesmo, a tendência gratuito disponível no
da coluna esquerda</div> rá nosso próximo passo. é de aumentar a endereço validator.w3.org.
<div id=“meio”>conteúdo da A folha de estilo nada mais é do compatibilidade do padrão Basta postar o endereço de
coluna central</div> que um arquivo em texto puro com entre os navegadores e sua página, que o serviço
<div id=“direita”>conteúdo da a extensão CSS. Abrimos então o acelerar o tempo de mostrará as tags que
coluna direita</div> Bloco de Notas do Windows e es- renderização das páginas. apresentam erros.
A tag “div” serve como depósito crevemos os seguintes comandos:

54 < C O L E Ç Ã O I N F O C O L E Ç Ã O I N F O > 55
TUTORIAL/LAYOUT 23.05.05 18:05 Page 54

TUTORIAL/LAYOUT TUTORIAL/LAYOUT

Escolhemos um #topo {
layout com quatro margin: 5px;
áreas: cabeçalho ho- height: 80px;
rizontal (onde nor- background: silver;
malmente entram lo- }
gotipo e banner), co- #esquerda {
luna esquerda (me- position: absolute;
nu de navegação top: 105px;
principal), coluna left: 10px;
central (área de con- width: 150px;
teúdo e destaques) e background: silver;
coluna direita (nave- }
gação secundária, CSS no Firefox: leitura altera o título e a coluna à direita #meio {
CSS no Opera: diferença de leitura na coluna à direita
links para parceiros margin-left: 170px;
etc.). O arquivo pronto está dispo- de conteúdo, criando camadas que margin-right: 220px; O primeiro bloco de comandos
nível para download no endereço podem ser manipuladas separada- background: silver; se refere ao cabeçalho. Os elemen-
www.info.abril.com.br/download/ mente. Dentro desse depósito, po- } tos “margin” e “height” definem,
3466.shtml. demos usar normalmente todos os #direita { respectivamente, a margem e a al-
comandos HTML. position: absolute; tura em pixels. O atributo “back-
1. O HTML Note que cada “div” possui um top: 105px; ground” determina a cor de fundo,
O primeiro passo é criar o arquivo atributo “id” distinto, que define right: 10px; mas é opcional e foi incluído ape-
HTML. Dentro do comando “head”, todas as áreas do layout. Assim, já width: 200px; nas para facilitar a visualização.
é necessário escrever a seguinte tag: temos no arquivo HTML os quatro background: silver; A seguir, definimos as três colu-
<link rel=“stylesheet” href=” blocos de conteúdo. Salve o arqui- } nas do layout. O bloco da esquer-
estilo. css“type=”text/ css”> vo e teste no browser.
Ela indica ao browser qual é a
folha de estilo que deve ser toma- 2.A FOLHA DE ESTILO VALIDE SUA PÁGINA
do como referência para o layout Por enquanto, as áreas do layout O tableless já faz parte do Para seguir os padrões à
(neste caso, “estilo.css”). No corpo ainda não estão em suas devidas conjunto de padrões da web, risca, verifique se a página
do arquivo HTML temos quatro blo- posições e são exibidas uma abai- especificados pelo W3C que você criou está correta,
cos que definem as áreas: xo da outra. Isso ocorre porque não (www.w3c.org), o consórcio utilizando o serviço W3C
<div id=“topo”>conteúdo do criamos o documento CSS, que é o que dita as regras Markup Validation Services,
cabeçalho </div> responsável por definir a posição tecnológicas da grande rede. um validador de HTML
<div id=“esquerda”>conteúdo de cada bloco na página. Esse se- Por isso mesmo, a tendência gratuito disponível no
da coluna esquerda</div> rá nosso próximo passo. é de aumentar a endereço validator.w3.org.
<div id=“meio”>conteúdo da A folha de estilo nada mais é do compatibilidade do padrão Basta postar o endereço de
coluna central</div> que um arquivo em texto puro com entre os navegadores e sua página, que o serviço
<div id=“direita”>conteúdo da a extensão CSS. Abrimos então o acelerar o tempo de mostrará as tags que
coluna direita</div> Bloco de Notas do Windows e es- renderização das páginas. apresentam erros.
A tag “div” serve como depósito crevemos os seguintes comandos:

54 < C O L E Ç Ã O I N F O 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- central é ajustada automaticamen-
xels. A linha “position: absolute” te, de acordo com o tamanho da
permite que o webmaster determi- janela do internauta. Caso o usuá-
ne a posição do bloco por meio de rio redimensione o browser, a pá-
coordenadas. Neste caso, ele está gina será realinhada, evitando a
a 105 pixels do topo e a 10 pixels barra de rolagem na horizontal.
do lado esquerdo da página. Esse Salve o documento como “esti-
procedimento vale também para a lo.css” no mesmo diretório do ar-
coluna da direita. quivo HTML e faça o teste, redi-
mensionando a janela do browser.
3. A COLUNA DO MEIO Note que as áreas do topo e do
O pulo-do-gato está no código usa- meio se adaptam ao novo tama-
do na coluna do meio. Aqui, defi- nho, enquanto as colunas da es-
nimos apenas as margens esquer- querda e da direita mantêm sua
da e direita para evitar que a área largura. Pronto, nosso layout es-
se sobreponha às outras. Observe tá terminado e agora é só escre-
que, ao contrário dos blocos da es- ver uma carta de despedida sem
querda e da direita, não há largu- 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