Blog - Luiz Gustavo Web

Neste espaço me dedico a escrever artigos sobre GNU/Linux e desenvolvimento web.
Sinta-se à vontade.

Site em Tableless - Parte 1

10 de Maio de 2008

Veremos neste tutorial como montar um site em Tableless usando as técnicas de CSS. Você que ainda formata página usando tabelas, não sabe o que anda perdendo diante da poderosa linguagem CSS. Vamos deixar bem claro que a tabela ainda é usada para inserir dados tabulares, mas nunca com o intuito de criar o layout da página. Além disso seu site ficará ágil para modificações posteriores e com um alto nível de acessibilidade. Dividi o tutorial em 5 partes. Então vamos ao que interessa!

Crie um novo documento HTML e salve-a com o nome de index.html. Em seguida vamos criar um novo documento no formato CSS. Salve-a no mesmo diretório da index com o nome de estrutura.css.

Agora vamos adicionar o arquivo CSS na página HTML. Abra a página index.html e adicione o seguinte código dentro da seção head.

       

Agora nossa folha de estilos está ligada ao documento HTML. O que significa que agora podemos definir o layout da página no documento CSS. Agora vamos editar o CSS. Abra o documento estrutura.css e vamos definir os atributos body da index.html:

       
body {
    margin:0; /* definimos nenhuma margem para o site */
    background-color:#09F; /* definimos uma cor de fundo para a página*/
    font-family:"Trebuchet MS, Tahoma, Verdana"; /* definimos uma fonte */
    font-size:12px; /* definimos o tamanho da fonte */
    color:#999; /* definimos a cor da fonte */
}

Depois disso abra a página index.html. Você pode observar que a página está com uma cor de fundo azul-clara e o cursor centralizado conforme definimos no documento CSS! Isso quer dizer que está havendo uma conexão da index.html com a estrutura.css.

Por hoje é só! Na próxima parte definiremos o conteúdo da página, bem como o posicionamento dos elementos na página. Valeu galera! Fiquem com Deus!

Ir para parte 2

© 2006 - 2017