Montando uma página com tableless

Fonte: http://ronnyroriz.wordpress.com/2007/10/13/montando-uma-pagina-com-tableless/


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, http://www.pspad.com”&gt;
<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.

Nícolas Müller – Portal Oficina da NET

Anúncios

Deixe um comentário

Faça o login usando um destes métodos para comentar:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s