Layout em tableless

Este tutorial ensinará a fazer um layout simples em tableless e php.

Tableless é uma forma de desenvolvimento de sites que não utiliza tabelas para disposição de conteúdo na página [...], o recomendado seria usar CSS.
Fonte: Wikipédia

Para entender a estrutura de um layout em tableless, observe a imagem:

Nesse exemplo que fiz, o layout tem 6 partes. A parte #content (onde ficam as tags do seu sistema de postagem) e a parte #sidebar (a coluna mais fina, editável) ficam dentro da parte #textos. O layout em si é composto pelas partes #header (imagem do topo), #textos (content e sidebar) e #footer (rodapé), uma seguida da outra. Todas essas estão dentro da parte #tudo, que serve unicamente para centralizar o layout na página.

Vamos agora fazer o CSS do seu layout. Como utilizamos tableless, o CSS que organizará as partes do layout. Tudo o que está entre /* e */ é comentário para facilitar o seu entendimento e pode ser excluído sem danos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

body {
/* cor do fundo da página abaixo */
background-color: #ebe5d3;
margin: 0px auto;
padding: 0;
}
 
#tudo {
	height: auto;
	/* defina a largura do seu layout abaixo */
	width: 827px; 
	margin: 0 auto;
	padding: 0;
}
 
#header {
	/* endereço da imagem de topo abaixo */
	background-image: url(http://ENDEREÇO);
	/* aqui a imagem do topo não se repetirá */
	background-repeat: no-repeat; 
	background-position: center;
	/* altura da imagem do topo em pixels */
	height: 122px; 
	/* largura da imagem do topo em pixels */
	width: 827px;
}
 
#textos {
	/* defina a fonte utilizada no blog abaixo */
	font-family: Georgia;
	/* tamanho da fonte utilizada no blog */
	font-size: 12px;
	font-style: normal;
	/* cor da fonte utilizada no blog abaixo */
	color: #232323; 
	text-decoration: none;
	height: auto;
	/* mesma largura do layout */
	width: 827px;
}
 
#content {
	/* serve para alinhar o content à esquerda */
	float: left; 
	height: auto;
	/* define a largura do content */
	width: 550px; 
	padding: 10px 10px 15px 15px;
}
 
#sidebar {
	/* serve para alinhar a sidebar à direita */
	float: right; 
	height: auto;
	/* define a largura da sidebar */
	width: 220px; 
	padding: 10px 15px 15px 10px;
}
 
#footer {
	/* define a fonte do rodapé */
	font-family: Arial, Helvetica, sans-serif;
	/* define o tamanho da fonte do rodapé */
	font-size: 10px; 
	font-style: normal;
	text-decoration: none;
	 /* define a cor da fonte do rodapé */
	color: #ebe5d3;
	/* define a cor do fundo do rodapé */
	background-color: #964242; 
	/* necessário pro rodapé funcionar, não retire */
	clear: both;
	/* define a altura do rodapé */
	height: 15px;
	/* define a largura do rodapé, mesma do layout */
	width: 827px;
}

Lembrando que as larguras da sidebar e do content, somadas, devem ser um pouco menor que a da parte #textos!

Copie, cole, edite esse código e salve como style.css; esta é a sua folha de estilos.
Faremos agora a sua header. Salve o código abaixo como header.php:

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título do seu blog aqui</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<body>
 
<div id="tudo">
  <div id="header"></div>
 <div id="textos">
    <div id="sidebar">

Agora copie, cole e edite este código. Ele será a sua sidebar. Salve como sidebar.php:

1
2
3
4
5
6

<h3>Exemplo de título</h3> <br />
Escreva aqui o que quiser. <br />
 
<!-- não edite daqui em diante -->
</div>
	<div id="content">

A div que ficou aberta no código da header será fechada no footer. Salve o código abaixo como footer.php lembrando de fazer as alterações necessárias:

1
2
3
4
5
6

 </div>
  <div id="footer">
  <center>Layout desenvolvido por SEU NOME - SEU ENDEREÇO com o auxílio de <a href="http://docesintonia.net" target="_blank">docesintonia.net</a></center>
 </div>
</body>
</head></html>

Para finalizar, faremos a index. As includes “chamarão” as páginas que você já criou (header.php, sidebar.php e footer.php). Copie o código abaixo, edite digitando as tags do seu sistema de postagem e salve como index.php:

1
2
3
4

<?include('header.php');?> 
<?include('sidebar.php');?> 
COLOQUE AQUI AS TAGS DO SEU SISTEMA DE POSTAGEM
<?include('footer.php');?>

Envie agora todos os arquivos (style.css, header.php, sidebar.php, footer.php e index.php) para um servidor que suporte a linguagem PHP.
Pronto, você já tem um layout 100% tableless com CSS 2.1 válido em uma página PHP. Faça os testes aqui (tableless) e aqui (CSS).

Clique na imagem para ver como ficou o meu exemplo:



Topo || Atualizar || Página inicial