Voltar para o site

Autor: Russ Weakley
URL do original:https://www.maxdesign.com.au/presentation/process/index.htm
Título original: Colored boxes - one method of building full CSS layouts
Traduzido com autorização expressa do autor.

Layout CSS passo a passo

Publicado em: 13/02/208
Atualizado em: 13/03/2011

Objetivo

Você sabe construir um layout CSS completo? Existe um método que possa ser utilizado para construção de qualquer layout CSS?

Este artigo explica como construir um layout CSS a partir do zero. O método de construção descrito se baseia no posicionamento de containers coloridos, foi testado em uma variedade considerável de navegadores e pode ser adaptado para construir layouts CSS em geral.

Introdução

Vamos começar com uma imagem do layout e ao longo do artigo iremos transformá-la em uma página (X)HTML. A finalidade principal desse tutorial não é ensinar a construção de um layout idêntico ao apresentado mas sim aprender as técnicas para construção de layout CSS em geral.

Imagem do layout (NT: usarei as imagens do artigo original — em inglês)

Vejamos algumas diretrizes importantes antes de iniciar.

Construa cada passo por etapas bem definidas e ao concluir a etapa teste em diferentes navegadores

Não caia na armadilha de construir todo o layout e depois testar, pois você poderá constatar uma quebra de layout difícil de detectar devido a grande quantidade de código. Construa em passos pequenos e teste cada passo em diferentes navegadores. Assim fazendo você irá detectar eventuais problemas com o layout tão logo eles apareçam, tornando a correção mais fácil.

Desenvolva para os navegadores modernos e depois adapte para os antigos

É mais produtivo desenvolver para os navegadores complacentes com os Padrões Web e depois usar artifícios, tal como esconder CSS (via @import), para servir os navegadores antigos.

Na fase de desenvolvimento e testes coloque a folha de estilos na seção HEAD da página

É muito mais fácil construir seu layout com a folha de estilos incorporada na página em construção — é mais rápido e evita que a folha de estilos fique no cache da máquina. Ao terminar a construção do layout retire a folha de estilos da página e coloque-a em um arquivo externo linkando-a.

Valide seu código HTML e CSS

Valide com freqüência seu HTML e CSS. Muitos problemas com layouts podem ser corrigidos com auxílio dos relatórios do validador.

1o. passo - Decidir a qual nível de navegadores o layout será servido

Antes de começar seu layout você deverá decidir a quais navegadores ele deverá ser servido. Para ajudá-lo nesta decisão é importante saber quais os usuários do site (público-alvo) e se possível examinar os relatórios e logs indicativos de navegadores mais usados.

Existem 3 níveis de suporte às CSS pelos navegadores, que devem ser considerados:

Nota do tradutor: Os níveis de suporte às CSS pelos navegadores, mostrado no artigo, data do ano de 2004. Para os padrões atuais considere adaptações e atualização.

Navegadores antigos

Win/Netscape4.x, Win/InternetExplore4.x, Mac/Netscape4.x, Mac/InternetExplorer4.x, etc

Navegadores recentes

Win/InternetExplore 5, Win/InternetExplore 5.5, Win/Netscape 6, Win/Mozilla1.x, Win/Opera6, Mac/Netscape6, Mac/Mozilla1.x, Mac/Opera5 etc

Navegadores modernos

Win/InternetExplore 6, Win/ Netscape7, Win/Mozilla1.5, Win/Firebird0.7, Win/Opera7, Mac/InternetExplore5.2, Mac/Safari1, Mac/ Netscape7, Mac/Mozilla1.5, Mac/Opera6 etc

Níveis de suporte

Suporte total às CSS - O navegador suporta todas as regras CSS e renderiza o layout de maneira totalmente consistente. Se você pretende suporte total para navegadores antigos deverá usar somente regras CSS básicas e evitar posicionamentos CSS complexos.

Suporte parcial às CSS - Algumas regras CSS devem ser escondidas para determinado navegador. Isto implica em que aquele navegador não renderiza o layout de forma totalmente consistente, contudo razoável grau de apresentação é obtido. Por exemplo: fontes e cores são renderizadas corretamente, mas certos aspectos do posicionamento não são.

Conteúdos não estilizados - Todas as regras de estilos são escondidas para um determinado navegador.

Opções para suporte às CSS
Navegadores modernos Navegadores recentes Navegadores antigos
Opção 1. Suporte total às CSS Suporte total às CSS Suporte total às CSS
Opção 2. Suporte total às CSS Suporte total às CSS Suporte parcial às CSS
Opção 3. Suporte total às CSS Suporte total às CSS Conteúdos não estilizados
Opção 4. Suporte total às CSS Suporte parcial às CSS Conteúdos não estilizados

Neste artigo escolhemos a Opção 2

2o. passo - Escolher os containers do layout

Para posicionar os elementos na página devemos criar os containers principais. Analise o design da página (que pode ser uma figura, um esboço em folha de papel ou um template existente) e defina os containers principais.

Imagem do layout com containers definidos.

3o. passo - Nomear os containers

Estes containers serão os elementos DIV principais nas quais serão inseridos os conteúdos e eles deverão ser designados com nomes ligados semanticamente às suas finalidades evitando-se nomeá-las de acordo com sua apresentação ou aparência. No nosso exemplo adotaremos os seguintes nomes para as DIVs principais do layout:

  • container
  • header
  • mainnav
  • menu
  • contents
  • footer

Se o container for único na página use IDs no lugar de classes. Isto é importante para a aplicação de estilos na página. Caso ocorram regras CSS conflitantes, os seletores IDs terão prioridade sobre os seletores classes.

Imagem do layout com containers nomeados

4o. passo - Criar a marcação

Comece a declaração de DOCTYPE — no nosso caso vamos usar HTML 4.10 strict 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"          
"https://www.w3.org/TR/html4/strict.dtd">  <html lang="en">

Prossiga com a seção head do documento, incluindo a codificação de caracteres, link para folhas de estilo que no nosso exemplo foi chamada de “styles.css”: 

<head>  	
	<meta http-equiv="content-type" content="text/html; charset=utf-8">  	
	<title>Page title</title>  	
	<link rel="stylesheet" href="style.css" type="text/css" media="screen">  
</head>

Finalmente inclua as informações para a seção body — crie DIVs vazias para os containers do layout. Veja o exemplo a seguir.

<body>
<div id="container">
	<div id="header"></div>
	<div id="mainnav"></div>
	<div id="menu"></div>
	<div id="contents"></div>
	<div id="footer"></div>
</div>
</body>
</html>

5o. passo - Inserir conteúdo

<body>  
<div id="container">  	
	<div id="header" title="sitename">  		
		<div id="skipmenu"><a href="#content">Skip to content</a></div>  		
		<h1>Sitename</h1>  	
	</div>  	
<div id="mainnav">  		
	<ul>  			
		<li><a href="#">Section 1</a></li>  			
		<li><a href="#">Section 2</a></li>  			
		<li><a href="#">Section 3</a></li>  			
		<li><a href="#">Section 4</a></li>  		
	</ul>  	
</div>  	
<div id="menu">  		
<h3>Archives</h3>  		
	<ul>  			
		<li><a href="#">December 2003</a></li>  			
		<li><a href="#">November 2003</a></li>  			
		<li><a href="#">October 2003</a></li>  			
		<li><a href="#">September 2003</a></li>  			
		<li><a href="#">August 2003</a></li>  		
	</ul>  		
<h3>Last 10 Entries</h3>  		
	<ul>  			
		<li><a href="#">Entry 120 (4)</a></li>  			
		<li><a href="#">Entry 119 (0)</a></li>  			
		<li><a href="#">Entry 118 (9)</a></li>  			
		<li><a href="#">Entry 117 (3)</a></li>  		
	</ul>   	
</div>  	
<div id="contents">  		
<div class="blogentry">  			
	<h2>  				
	<a href="#" title="Permanent link to this item">Heading here</a>  			
	</h2>  			
	<h3>Wednesday, 3 December 2003</h3>  			
	<p><img class="imagefloat" src="flower.jpg" alt="" width="100" height="100" border="0">  				
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a href="#">Duis autem vel eum</a> iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.  			
	</p>  			
	<p>  				
	Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
	</p>  			
	<ul>  				
	<li><a href="#">Comments (4)</a></li>  				
	<li><a href="#">Pingbacks (1)</a></li>  				
	<li>Category: <a href="#" title="Category">CSS</a></li>  			
	</ul>  		
	</div>  	
	</div>  	
<div id="footer">  		
Copyright © Sitename 2004  	
</div>  
</div>  
</body>  
</html>

6o. passo - Posicionar os containers

Os containers do layout devem ser posicionados com uso dos métodos CSS de posicionamento. Para isso vamos definir regras de estilo no arquivo style.css. Depois que os containers forem posicionados voltaremos ao arquivo da folha de estilo para acresentar mais regras CSS.


body  {  	
	margin: 0;  	
	padding: 0;  	
	background: #ddd;  
	}    
#container  {  	
	margin: 1em auto;  	
	width: 650px;  	
	background: #fff;  
	}    
#header {background: #CF3;}  
#mainnav {background: #9F3; }    
#menu  {  	
	float: right;  	
	width: 165px;  	
	background: #6F9;  
	}    
#contents  {  	
	float: left;  	
	width: 440px;  	
	background: #9FC;  	
	margin: 0 0 0 20px;  
	}    
#footer  {  	
	clear: both;  	
	background: #FF9;  
	}

7o. passo - Algum problema?

O layout construido funciona bem em todos os navegadores, mas apresenta problema no Internet Explorer 6. Observe como ele é renderizado naquele navegador.

A margem esquerda do container contents é muito grande. Isso acontece porque o IE6 apresenta o bug da margem dobrada para elementos flutuados. Esse bug pode ser resolvido acresentando-se a declaração display: inline para o container flutuado, no caso #contents.

#contents {
	float: left;
	width: 440px;
	background: #9FC;
	margin: 0 0 0 20px;
	display: inline;
	}

Como essa declaração é somente para o IE6 é melhor movê-la para um arquivo de folha de estilo separada a ser servida somente para o IE6. Essa folha de estilo será servida com uso de comentário condicional específico para o IE6, como mostrado a seguir.

<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Page title</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen">
	<!--[if IE 6]>
	<link rel="stylesheet" href="ie6.css" type="text/css" media="screen">
	<![endif]-->
</head>

8o. passo - Completar a folha de estilos

Uma vez posicionado os containers e sendo o layout consistente para todos os navegadores podemos completar nossa folha de estilos, como mostrado a seguir.

/* global styles */

body {
	margin: 0;
	padding: 0;
	font: 85% arial, hevetica, sans-serif;
	text-align: center;
	color: #333;
	background: #ddd url(img_39.gif) repeat 0 0;
	}

a:link { color: #B52C07; }
a:visited { color: #b93411; }
a:focus { color: #000; }
a:hover { color: #7d8206; }
a:active { color: red; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; }

h2 {
	color: #B52C07;
	font: 140% georgia, times, "times new roman", serif;
	}

h2 a { text-decoration: none; }

h3 {
	color: #7d8206;
	font: 110% georgia, times, "times new roman", serif;
	}

/* container styles */

#container {
	margin: 1em auto;
	width: 650px;
	text-align: left;
	background: #fff;
	border: 1px solid #676767;
	}

/* header styles */

#header {
	height: 45px;
	width: 100%;
	position: relative;
	background: url(header.jpg) no-repeat 0 0;
	border-bottom: 1px solid #fff;
	}

#header h1 {
	position: absolute;
	left: -500em;
	}

#skipmenu {
	position: absolute;
	left: 0;
	top: 5px;
	width: 645px;
	text-align: right;
	}

#skipmenu a {
	color: #555;
	text-decoration: none;
	}

/* mainnav styles */

#mainnav {
	background: #9FA41D;
	color: #272900;
	padding: 2px 0;
	margin-bottom: 22px;
	}

#mainnav ul {
	margin: 0 0 0 20px;
	padding: 0;
	list-style-type: none;
	border-left: 1px solid #C4C769;
	}

#mainnav li {
	display: inline;
	padding: 0 10px;
	border-right: 1px solid #C4C769;
	}

#mainnav li a {
	text-decoration: none;
	color: #272900;
	}

#mainnav li a:hover {
	text-decoration: none;
	color: #fff;
	background-color: #272900;
	}

/* menu styles */

#menu {
	float: right;
	width: 165px;
	border-left: 1px solid #C5C877;
	padding-left: 15px;
	}

#menu ul {
	margin: 1em 0;
	padding: 0;
	}

#menu ul li {
	margin: 0 0 1em;
	padding: 0;
	list-style-type: none;
	}

/* contents styles */

#contents {
	float: left;
	width: 430px;
	margin: 0 0 0 20px;
	}

#contents p { line-height: 165%; }
.blogentry { border-bottom: 1px solid #C5C877; }

.blogentry ul {
	text-align: right;
	margin: 1em 0;
	padding: 0;
	font-size: 95%;
	}

.blogentry li {
	list-style-type: none;
	display: inline;
	margin: 0;
	padding: 0 0 0 7px;
		}

.imagefloat {
	float: right;
	padding: 2px;
	border: 1px solid #9FA41D;
	margin: 0 0 10px 10px;
	}

/* footer styles */

#footer {
	clear: both;
	color: #272900;
	text-align: right;
	font-size: 90%;
	background: #9FA41D;
	padding: 5px;
	}

9o. passo - Folha de estilo para impressão

Para terminar vamos preparar o layout para impressão. Se você pretende que o layout seja impresso exatamente como aparece na tela basta definir os valores all ou print para o atributo media do elemento que linka para a folha de estilo conforme mostrado a seguir.

<link rel="stylesheet" href="style.css" type="text/css" media="screen print">

ou

<link rel="stylesheet" href="style.css" type="text/css" media="all">

Para criar uma folha de estilos destinada a impressão personalizada (sem os elementos da tela que não interessam, como por exemplo, logotipos, rodapés, figuras decorativas, etc) siga os seguintes passos.

Crie uma cópia da folha de estilo principal (styles.css) e grave a cópia com o nome de backup.css. Vamos trabalhar na folha style.css que estando linkada ao documento irá refletir no layout as alterações feitas, permitindo que se visualize imediatamente a alteração sem necessidade de dar um "visualizar impressão" cada vez que se faz uma alteração.
Quando terminarmos com as alterações basta renomear o arquivo para print.css, renomear o arquivo backup.css para style.css e linká-los ao documento.

Olhe para o layout e decida quais são os conteúdos que serão impressos.

No nosso exemplo nós descartaremos o gráfico do topo (header), a navegação principal (mainnav), o menu da direita bem como as cores e sublinhados dos links.

  • remova todos os containers não necessários com uso da declaração display: none;
  • Mude todas as cores para preto ou tons de cinza.
  • Retire sublinhados de links com a declaração a { text decoration: none;}
  • Remova os tamanhos de fonte e deixe tudo com o tamanho padrão 100% (default).
body {
	margin: 0;
	padding: 0;
	font: 100% arial, hevetica, sans-serif;
	color: #000;
	background-color: #fff;
	}

a {
	color: #000;
	text-decoration: none;
	}

#header { border-bottom: 1px solid #999; }
#header h1 { color: #000; }
#mainnav, #menu, .imagefloat, #skipmenu { display: none; }

#menu ul {
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
	line-height: 165%;
	}

#contents p { line-height: 165%; }
.blogentry { border-bottom: 1px solid #999; }

.blogentry ul {
	list-style-type: none;
	text-align: right;
	margin: 1em 0;
	padding: 0;
	font-size: 95%;
	}

.blogentry li {
	display: inline;
	padding: 0 0 0 7px;
	}

#footer {
	clear: both;
	color: #000;
	text-align: right;
	padding: 5px;
	font-size: 90%;
	border-top: 1px solid #999;
	margin-top: 2em;
	}

Acresente mais um link para folha de estilo na seção head do documento como mostrado a seguir.

<link rel="stylesheet" href="print.css" media="print">

Fim do layout passo a passo

Terminamos com um documento HTML que:

  • renderiza corretamente em navegadores modernos;
  • renderiza razoavelmente em navegadores recentes (pequeno bug no IE5 para Windows);
  • renderiza de maneira aceitável em navegadores antigos (a estilização é parcial e o conteúdo é acessível);
  • renderiza diferenciadamente para impressão.

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo