Programação » CSS

Montando uma página com tableless

Aprenda a montar a estrutura de uma página usando tableless.

Publicado em: 5 de outubro de 2006 | Leituras: 12.691 | Canal: CSS | Autor: Nícolas Müller

Neste artigo vamos aprender a montar uma página usando tableless. O artigo mostrará passo a passo como você proceder.
Bem vamos lá, sem muito “enrolação”.
Abaixo os passos de criação da página:

PASSO 1 – “CRIANDO UM ARQUIVO .CSS”:
Vamos criar nosso arquivo com extensão “.css” e daremos o nome de “style.css”, ainda colocaremos o mesmo dentro de uma pasta chamada css. Conforme abaixo:

PASSO 2 – “ESTRUTURANDO O SITE”:
Agora vamos fazer a estrutura que queremos. Que será um topo, uma barra de navegação na esquerda do site e um conteúdo com o restante. Conforme a figura abaixo:

PASSO 3 – “CRIANDO O ARQUIVO INDEX.HTML”:
Depois de escolhida a estrutura, vamos ao arquivo index.html
OBS: Você deve criar este arquivo na raiz de seu site ou seja no mesmo nível em que se encontra a pasta css. Conforme figura:

Criamos a referência do estilo da seguinte maneira:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

  <meta http-equiv="content-type" content="text/html; charset=windows-1250">

  <meta name="generator" content="PSPad editor, www.pspad.com">

  <link href="css/style.css" rel="stylesheet" type="text/css" />

  <title></title>

  </head>

  <body>



  </body>

</html>

Agora vamos a criação das divs. Dentro das tags <body> escreva:

<div>

    <div id="body">

         <div id="top">

            Cabeçalho

         </div>

         <div id="midle">

             <div id="menu">

                 <ul>

                         <li>Menu 1</li>

                         <li>Menu 2</li>

                         <li>Menu 3</li>

                 </ul> 

            </div>

            <div id="content">

                <blockquote>Conteúdo aqui</blockquote>

            </div>

        </div>

    </div>

</div>

Onde: id=”body” é igual ao corpo externo da página; “top” é igual ao cabeçalho do site; “midle” é igual a todo conteúdo abaixo do topo; “menu” são os menus e “content” é igual ao conteúdo.

Vamos agora ao css para atribuir os estilos para estes objetos.

body { margin:0px; padding:0px; font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; font-size:12pt; }



#body { width:779px; }



#top { width:779px; text-align:center; padding:50px 0px 50px 0px; float:left; background-color:#000000; color:#FFFFFF; font-size:22pt; }

#midle { width:779px; float:left }

#menu { width:150px; float:left; background-color:#CCCCCC; }

#content{ width:625px; padding:20px 0px 20px 0px; float:left; border:2px solid #CCCCCC;}

Após feito isto é só apreciar seu código.

O resultado final é algo parecido com isto:

Isso aí pessoal, até a próxima.

Resposta em até 24 horas! (grátis)Dúvidas?

Compartilhe

Nossa url encurtada:

Autor da matéria

Nícolas Müller

Sou um profissional da área de internet, trabalho como programador, designer e desenvolvedor de sites, faz cerca de 8 anos que estou atuando na área, sendo 5 anos profissionalmente.