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.
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]
Artigo anterior
Porque usar tableless?
Saiba quais são as diferenças entre us. Próximo artigo
Diferença entre margin e paddi.
Saiba a diferença entre margin e paddi.
Porque usar tableless?
Saiba quais são as diferenças entre us. Próximo artigo
Diferença entre margin e paddi.
Saiba a diferença entre margin e paddi.
Compartilhe:
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:
O código deste menú é:
POR FAVOR ME AJUDA! EU PRECISO DO SITE COM ESTE MENU!
E EU NAO CONSIGO COLOCAR!
a imagem do menu esta aqui:
http://img184.imageshack.us/img184/8729/menuapnr1.png
Aquela esta errada