Montando uma página com tableless

Canal: Tableless  |  Autor: Nícolas Müller  |  Publicado em: 05/10/2006  |  Views: 11.016

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.
Creative Commons Esta obra está licenciada sob uma Licença Creative Commons. Você pode copiar, distribuir, exibir, executar, desde que seja dado crédito ao autor original (Citando nome do autor, data, local e link de onde tirou o texto). Você não pode fazer uso comercial desta obra. Você não pode criar obras derivadas.
Vote no artigo:
NR. DE VOTO(S): [2]

Compartilhe:

[x] Fechar Preencha os campos abaixo para indicar esta página:
Seu nome:
Seu e-mail:
Nome do indicado:
E-mail do indicado:
Deixe uma mensagem:
Anti-spam:

(nova imagem)
Preencha o que vê:
Twitter diHITT Facebook delicious envie por e-mail comentar

comentarComentários:

Preencha o formulário para comentar:

[x] Fechar
Nome:*
E-mail:* (não será exibido)
Site: (http://)
Comentário:*
Anti-spam:

(nova imagem)
Preencha o que vê:

Deseja receber as respostas dos comentários

Publicado em:
25/12/2006 - 13:02
Olá,
Gostei muito desta coluna, pois fazia tempo que eu estav procurando uma deste tipo!
Más, preciso de uma ajuda!
Ao invés deste menú, eu gostaria de colocar este:
Image Hosted by ImageShack.us

O código deste menú é:



Menu
















Menu
POR FAVOR ME AJUDA! EU PRECISO DO SITE COM ESTE MENU!
E EU NAO CONSIGO COLOCAR!
Publicado em:
25/12/2006 - 13:32
Desculpe,
a imagem do menu esta aqui:

http://img184.imageshack.us/img184/8729/menuapnr1.png

Aquela esta errada
Wanderson
Publicado em:
04/04/2008 - 22:12
Wanderson
Muito legal, mas... e que eu quiser que a coluna de conteúdo varie de tamanho? Sem esse tamanho fixo de 779px