Detalhes

Categoria: CSS - Cascanding Style Sheet

Atualização: Sábado, 27 Fevereiro 2010 16:04

Autor: vovó Vicki

Acessos: 11704

Já faz um tempão que os webdesigners brigam com as tabelas numa página HTML porque são rígidas, estáticas, chatas de configurar, costumam embaralhar o layout quando se muda o tamanho da janela ou quando se altera a resolução e engessam qualquer impulso criativo. Pois aqui está um tutorial que ensina como se livrar destes monolitos :smile:

Apesar das muitas reclamações, as tabelas não têm culpa. É que durante muito tempo estão sendo usadas para uma tarefa para a qual não foram projetadas - tabelas servem para listar dados e não para distribuir os elementos de conteúdo em páginas web. Obviamente, a culpa é dos reclamões :thumbdown:

Este é um tutorial bem simples que ensina como planejar o layout e como criar páginas "boas para os olhos" usando apenas as propriedades de elementos do HTML. Antes de começar com o trabalho propriamente dito, algumas recomendações:

• Faça apenas uma coisa de cada vez. Parece coisa simples, mas a tendência é começar a mudar coisas a torto e a direito e só depois fazer um teste. Caso aparecer um erro ou alguma formatação não sair como desejado... hmmmm... fica difícil encontrar o bug.
• Antes de começar a criar um layout baseado em CSS, decida quais navegadores você pretende (ou precisa) atender. Os mais comuns são o Internet Explorer, Firefox, Opera, Netscape e Mozilla.
• Se puder, faça os testes em vários tipos de browsers. Apesar de existir um padrão definido para o CSS, nem todos os navegadores o obedecem e podem dar resultados imprevisíveis (o pior deles é o IE da MS).
• Faça um esquema do layout. Rabisque numa folha de papel o que você tem em mente, mesmo se você usar uma página como exemplo. Defina bem as áreas e dê um nome para cada uma delas - de preferência use nomes que indiquem a função das mesmas.

:info: Requisitos: conhecimentos básicos de HTML, conhecimento básico/intermediário de CSS e um pouco de criatividade :wink:

Agora, vamos ao que interessa. Arregace as mangas e siga as etapas.

Layout do exemplo do tutorial

Como não sei desenhar direito, fiz um esqueminha do layout que servirá de exemplo para este tutorial. O rabisco mostra o seguinte:

A área em vermelho é a área principal. No topo da área principal fica o cabeçalho. Logo abaixo do cabeçalho fica uma área de navegação. Abaixo da área de navegação, à esquerda fica a área reservada para o texto, o conteúdo da página, com a caixa do menu à direita. Na parte de baixo, a área do rodapé da página.

Definidas as áreas (ou compartimentos), chegou a hora de dar nomes aos bois. Evite nomes em inglês muito comuns para evitar possíveis conflitos com nomes que possam estar em scripts CSS que você eventualmente tenha "emprestado" de outros sites. No nosso caso, vou usar os seguintes nomes:

• principal

• cabeca
• navega
• meu_menu
• texto
• rodape

A primeira coisa é criar o esqueleto da página HTML:

Em seguida, vamos criar as áreas usando elementos <div> com o atributo id (prefira id porque este atributo se sobrepõe ao atributo class). Não se esqueça de que a área principal contém todos os outros elementos: