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)

[singlepic id=2014 w= h= float=center]

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.

1 – 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.

Neste artigo escolhemos a Opção 2

2 – 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.

[singlepic id=2015 w= h= float=center]

3 – 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

[singlepic id=2016 w= h= float=center]

4 – 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"          
"http://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>

5 – 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>

6 – 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;  
	}  

[singlepic id=2017 w= h= float=center]

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

[singlepic id=2018 w= h= float=center]

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>  

8- 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;
	}

9- 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;
	}

[singlepic id=2023 w= h= float=center]

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.

É um tipo de coqueiro, cujos frutos, em forma co “coquinhos” nascem de uma bolsa que, ao final do processo de maturação, involui, tornando-se um material lenhoso, pesado e pontiagudo. Um verdadeiro perigo, pois como fica dependurado na árvore com a parte mais pontuda para baixo até se soltar, se cair sobre uma pessoa pode perfurar-lhe o corpo ou a cabeça. Leia mais…

A prisão no Copacabana Palace de Raymond Whelan, diretor da Match, o braço da Fifa para venda de ingressos, é mais um dos gols que a polícia brasileira faz nesta velha prática da transnacional do futebol e um legado inestimável nesta Copa brasileira. Leia mais…

Escrever

“Coma ISSO e chega de dietas: milagroso Fitoterápico Que Reduz Até 15 kg em 4 Semanas Chega ao Brasil. Perder 7 kg de gordura por semana enquanto ganha músculos comendo ISTO. Os médicos dizem que é o “Santo Graal” da perda de peso… “ Essa é a chamada mais ridícula, burra e acintosa que li em meus quase trinta anos de profissinal de saúde. Se ISTO, como eles mesmos escrevem (em maiúsculo para chamar a atenção e valorizar), prestasse para alguma coisa, a esperta, interesseira e oportunista INDÚSTRIA FARMACÊUTICA já teria patenteado o milagre e o colocado à venda nas prateleiras das farmácias, faturando bilhões com ele. Leia mais…

“Decifra-me ou devoro-te!” O eco do desafio mitológico da esfinge de Tebas acompanha a divulgação das sondagens eleitorais. Leia mais…

• A Copa da Corrupção

Sinopse

Copa do Mundo, Mensalão, cartéis… este livro reúne crônicas publicadas pelo autor na imprensa que tratam dos denominadores comuns a estes episódios: a corrupção e a impunidade.

Na mesma linha, as crônicas tratam do “sonho brasileiro”, que em contraste com o “sonho americano” (trabalho duro em troca de plenitude material) é concebido como “viver à custa dos outros, ser servido, segregação e impunidade”.

O “sonho brasileiro”, contudo, não é para todos, pois só será vivido plenamente pelos ricos, os únicos que têm acesso à essência deste sonho (ou seria pesadelo?): a impunidade. Com disposição para enfrentar polêmicas, o autor aborda ainda temas como pirâmides financeiras, a ascensão e queda de Eike Batista, os embargos do mensalão, Joaquim Barbosa, crucifixos, a “cura gay”, cotas raciais, dentre outros.

[vsw id=”MeYmEDrh3SE” source=”youtube” width=”425″ height=”344″ autoplay=”no”]

Decisão do Tribunal de Justiça de São Paulo inocenta um fazendeiro de Pindorama (SP), preso em flagrante por estuprar uma menina de 13 anos, em 2011. Leia mais…

Ingredientes

• 1 colher de chá de curry em pó
• 1 colher de chá de maizena
• ½ colher de café de sal
• 1 colher de sopa de margarina
• 1 lata de creme de leite sem soro

Como fazer
Bata no liqüidificador o leite, o curry, a maizena e o sal.
Em uma panela, esquente a margarina em fogo brando e acrescente aos poucos a mistura.
Acrescente o creme de leite e mexa delicadamente sem deixar ferver.

ATENÇÃO
Esse molho serve para acompanhar peixes ou frango.

[Voltar]

• Página inicial
• Artigos
• Bioquímica
• Diversos
• Embriologia
• Farmacologia
• Hematologia
• História
• Pediatria

Testando reconhecimento de voz em um aplicativo de eventos

[vsw id=”0ZtoyLU05_c” source=”youtube” width=”425″ height=”344″ autoplay=”no”]

[Voltar]

Fizeram um tremendo barulho, se apareceram até não querer mais às custas dos trouxas que acham que esse tipo de coisa só começou com a internet e não resolveram nada. A internet continua do mesmo jeito. Coloque na busca do google alguns termos específicos e veja o que retornará. O resultado será chocante, com certeza.

A CPI da Pedofilia do Senado vai acompanhar os casos relatados em Catanduva, a 385 km de São Paulo, onde uma suposta rede de criminosos teria abusado de pelo menos 47 crianças de 5 a 10 anos de idade. Segundo a juíza Sueli Juarez Alonso, da Vara da Infância e da Juventude de Catanduva, integrantes da comissão devem chegar na cidade entre os dias 2 e 3 de março para ouvir testemunhas do caso.

[singlepic id=2011 w=320 h=120 float=left]”O senador Magno Malta (PR-ES) me telefonou informando que a comissão técnica da CPI vai acompanhar o caso”, declarou a juíza. A decisão foi tomada pelo próprio Malta, após receber as denúncias sobre o caso de uma organização não-governamental (ONG) de Catanduva. Ontem, Malta disse que os acusados serão chamados a depor sobre o caso, possivelmente no Congresso.

[singlepic id=2012 w=160h=120 float=right]A comissão da CPI que fará os trabalhos em Catanduva será comandada pelo promotor Carlos José Fortes, de Minas Gerais. A CPI deverá receber hoje as cópias dos dois inquéritos e do processo sobre o assunto que tramitam na Justiça e na Polícia Civil de Catanduva. Os documentos servirão para a CPI a acompanhar as investigações.

[singlepic id=2002 w=160h=120 float=left]A situação em Catanduva é “estarrecedora”, na opinião da juíza. Ela contou que as famílias e crianças que foram vítimas de pedófilos são ameaçadas. Além disso, vítimas relataram que usaram drogas quando levadas para serem filmadas e molestadas em uma mansão da cidade.

[singlepic id=2010 w=160h=120 float=right]Por conta da fragilidade psicológica, a Justiça decidiu que 23 crianças que foram arroladas no primeiro inquérito sobre o caso, vão passar por tratamento com psicólogos e assistentes sociais, assim como os pais e responsáveis. O objetivo, segundo a juíza, é amenizar os impactos psicológicos pelos quais as famílias passam.

[singlepic id=2009 w=160h=120 float=left]Um inquérito apura a existência de uma rede de pedofilia, por meio da qual crianças pobres nos bairros Vila Alpino e Cidade Jardim seriam levadas a uma mansão para ser fotografadas, filmadas e molestadas. As imagens seriam distribuídas pela internet.

Na noite de ontem, a Polícia Civil lacrou uma lan house próxima aos dois bairros, onde adolescentes viam filmes pornôs e imagens de outras crianças nuas. Mais de 5 mil CDs foram apreendidos e passarão pela perícia.

Por que somos tão criativos, inovadores, cheios de idéias e tão ruins em execução? Por que a rotina de cuidar dos detalhes, fazer a manutenção do que já existe, dar continuidade às coisas começadas, nos deixa tão entediados? Leia mais…

[singlepic id=1989 w=320 h=240 float=center]

[singlepic id=1990 w=320 h=240 float=center]

Comprar aqui

Em entrevista exclusiva, apresentador fala sobre venda de horários da CNT para a Igreja Universal: “Lastimável” Leia mais…