Esse é para quem quer criar um site simples utilizando apenas os conceitos de Tableless + CSS.

Antes de mais nada, gostaria de me desculpar por utilizar imagem ao invés de código. Procurei um plugin que funcionasse e não pegou. Até mesmo desabilitando o rich text, e fazendo pelo code ele não funcionava. Se você quiser ver o código basta olhar uma das páginas de demonstração e clicar em Ver Código Fonte, você pode copiar, modificar, editar e dizer que é seu… Menos esse tutorial, que está sobre licença Creative Commons. 

Primeiro, crie um novo documento no programa que você preferir (pode até ser o bloco de notas…)

Esse é um exemplo de como a página começaria no Dreamweaver CS3 utilizando Doctype XHTML1.0 Transitional.

Eu utilizarei 6 divs, chamadas: website, topo, menu, conteudo, menu2, rodape. A div website será a principal, não será adicionado nenhum texto ou imagem nela, apenas outras divs.

Primeiro irei fazer a parte de HTML, depois a parte de CSS.

Acrescente o que bem desejar no topo. Só recomendo que seja menor que 770. Se for imagem, não esqueça de acrescentar a tag alt=”legenda”. Se for link, não esqueça de acrescentar a tag title=”descrição”.

Esse foi um exemplo que desenvolvi:

Ver em funcionamento.

Vamos à parte do CSS. Primeiro crie um novo estilo.

Importe o estilo, para a página index.html. Para fazer isso, adicione essa tag ao seu código html:

Defini o tamanho da tag website para 770 pixels, pois é importante que dê espaço para as barras de rolagens (para não ficar aquele maldito rolamento horizontal!).

Mais tarde irei mostrar um hack para centralizar a página.

Como a imagem sairia muito grande, disponibilizei o arquivo: estilo.css

Você pode editar da maneira que quiser, e é bom que o faça (pois eu fiz o básico dos básicos).

Isso é como ficará o site. Apenas algumas poucas modificações foram feitas no arquivo, coloquei strong em alguns links. Apenas isso.

Ver em funcionamento.

Esse é o hack que utilizo para centralizar a página:

Após algumas modificações e o site ficou pronto.

Lembre-se, você precisa editar o site de sua maneira, ou contratar um webdesign :-) - Se você colocar um site no ar, do jeito que está, será horrível (a não ser que você queira apresentar apenas um projeto ou seu currículo).

Posteriormente, irei mostrar como fazer um site melhor visualmente.

O tempo para construção desse site foi (pra mim) de 10 minutos (e ainda foi muito).

Espero que vocês gostem do tutorial, e mais tarde irei criar outros.

Ah! Esse site é valido.

Se você quiser inserir o link, a imagem é essa:

Se você quiser validar posteriormente, basta entrar no site do W3C.