Tableless
Montando uma página com tableless
Publicado em: 05/10/2006 |
Tableless |
Visualizações: 6.816 |
3 Comentário(s)
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.
Nícolas Müller
Sou um profissional da área de internet, trabalho como programador, designer e desenvolvedor de site.
» Site do colunista
Todas as matérias de Nícolas Müller
- Compartilhando o acesso à internet 3G
A rede 3G de acesso à internet é uma grande realidade hoje, em funcionamento em . - Os 10 piores bugs da história
Os 10 piores bugs da história, acompanhe abaixo esses bugs e caso você conheça u. - Indicadores da Qualidade
Os indicadores da qualidade, são na realidade uma das ferramentas mais utilizada. - Internet, intranet e extranet o que são, e quais as diferenças?
Este artigo demonstra o que é cada um destes acessos. Como funcionam, e para que. - Photoshop - Criando gif animado
Vídeo aula de photoshop, ensina a criar um gif animado com a utilização da guia .
- O que é Tableless?
Tableless é uma forma de desenvolvimento de sites que não utiliza tabelas para d. - Tableless: Formulário sem tabela
Está matéria mostra como desenvolver um formulário sem a utilização de tabelas. . - O uso da div
Usando div sensatamente! - Validação de Código
Validar seu código (X)HTML na W3C. - Criando Menu Vertical em Tableless
Aprenda a criar menus com o uso de listas
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: <a href="http://imageshack.us"><img src="http://img184.imageshack.us/img184/8729/menuapnr1.png" border="0" alt="Image Hosted by ImageShack.us" /></a> O código deste menú é: <html> <head> <title>Menu</title> <style type="text/css"> <!-- ul#menu {width:140px; height:20px; border:1px solid #000066; background:#599BFF; margin:0; padding:0; list-style-type:none;} ul#menu li a:link, ul#menu li a:visited {display:block; height:1%; text-decoration:none; font-family: verdana; font-size:14px; color:#FFFFFF; border-left:10px solid #0066FF; padding-left:1px;} ul#menu li a:hover { background-color: #0033FF; color:#FFFFFF; border-left:10px solid #000066; font-style:bold} </style> </head> <body> <ul id="menu"> <li><a href="#">MENU</a></li> </ul> </body> </html> <html> <head> <link rel="stylesheet" href=" menu.css" type="text/css" /> </head> <body> <div id="menu"> <ul> <li><a href="#">» LINK 1</a></li> <li><a href="#">» LINK 2</a></li> <li><a href="#">» LINK 3</a></li> <li><a href="#">» LINK 4</a></li> <li><a href="#">» LINK 5</a></li> <li><a href="#">» LINK 6</a></li> <li><a href="#">» LINK 7</a></li> <li><a href="#">» LINK 8</a></li> <li><a href="#">» LINK 9</a></li> </ul> </div> </body> </html> <html> <head> <title>Menu</title> 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
Muito legal, mas... e que eu quiser que a coluna de conteúdo varie de tamanho? Sem esse tamanho fixo de 779px