Tutoriais CSS - Layout CSS Passo A Passo

24/6/2014 Tutoriais CSS - Layout CSS passo a passo
http://www.maujor.com/tutorial/layout-css-passo-a-passo.php 1/19
Maujor
O DINOSSAURO DAS CSS
Autor: Russ Weakley
URL do original:http://www.maxdesign.com.au/presentation/process/index.htm
Ttulo original: Colored boxes - one method of building full CSS layouts
Traduzido com autorizao expressa do autor.
Layout CSS passo a passo
Objetivo
Voc sabe construir um layout CSS completo? Existe um mtodo que possa ser utilizado para construo de
qualquer layout CSS?
Este artigo explica como construir um layout CSS a partir do zero. O mtodo de construo descrito se baseia
no posicionamento de containers coloridos, foi testado em uma variedade considervel de navegadores e pode
ser adaptado para construir layouts CSS em geral.
Introduo
Vamos comear com uma imagem do layout e ao longo do artigo iremos transform-la em uma pgina
(X)HTML. A finalidade principal desse tutorial no ensinar a construo de um layout idntico ao
apresentado mas sim aprender as tcnicas para construo de layout CSS em geral.
Imagem do layout (NT: usarei as imagens do artigo original em ingls)
Vejamos algumas diretrizes importantes antes de iniciar.
Construa cada passo por etapas bem definidas e ao concluir a etapa teste em
diferentes navegadores
No caia na armadilha de construir todo o layout e depois testar, pois voc poder constatar uma quebra de
layout difcil de detectar devido a grande quantidade de cdigo. Construa em passos pequenos e teste cada
passo em diferentes navegadores. Assim fazendo voc ir detectar eventuais problemas com o layout to logo
eles apaream, tornando a correo mais fcil.
Desenvolva para os navegadores modernos e depois adapte para os antigos
mais produtivo desenvolver para os navegadores complacentes com os Padres Web e depois usar artifcios,
tal como esconder CSS (via @import), para servir os navegadores antigos.
Na fase de desenvolvimento e testes coloque a folha de estilos na seo HEAD da
pgina
muito mais fcil construir seu layout com a folha de estilos incorporada na pgina em construo mais
rpido e evita que a folha de estilos fique no cache da mquina. Ao terminar a construo do layout retire a
folha de estilos da pgina e coloque-a em um arquivo externo linkando-a.
Valide seu cdigo HTML e CSS
Valide com freqncia seu HTML e CSS. Muitos problemas com layouts podem ser corrigidos com auxlio
dos relatrios do validador.
1
o
. passo - Decidir a qual nvel de navegadores o layout ser
servido
Antes de comear seu layout voc dever decidir a quais navegadores ele dever ser servido. Para ajud-lo
nesta deciso importante saber quais os usurios do site (pblico-alvo) e se possvel examinar os relatrios e
logs indicativos de navegadores mais usados.
Existem 3 nveis de suporte s CSS pelos navegadores, que devem ser considerados:
Nota do tradutor: Os nveis de suporte s CSS pelos navegadores, mostrado no artigo, data do ano de
2004. Para os padres atuais considere adaptaes e atualizao.
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
Nveis 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 bsicas
e evitar posicionamentos CSS complexos.
Suporte parcial s CSS - Algumas regras CSS devem ser escondidas para determinado navegador. Isto
implica em que aquele navegador no renderiza o layout de forma totalmente consistente, contudo razovel
grau de apresentao obtido. Por exemplo: fontes e cores so renderizadas corretamente, mas certos
aspectos do posicionamento no so.
Contedos no estilizados - Todas as regras de estilos so escondidas para um determinado navegador.
Opes para suporte s CSS
Navegadores modernos Navegadores recentes Navegadores antigos
Opo 1. Suporte total s CSS Suporte total s CSS Suporte total s CSS
Opo 2. Suporte total s CSS Suporte total s CSS Suporte parcial s CSS
Opo 3. Suporte total s CSS Suporte total s CSS Contedos no estilizados
Opo 4. Suporte total s CSS Suporte parcial s CSS Contedos no estilizados
Neste artigo escolhemos a Opo 2
2
o
. passo - Escolher os containers do layout
Para posicionar os elementos na pgina devemos criar os containers principais. Analise o design da pgina (que
pode ser uma figura, um esboo em folha de papel ou um template existente) e defina os containers principais.
Imagem do layout com containers definidos.
3
o
. passo - Nomear os containers
Estes containers sero os elementos DIV principais nas quais sero inseridos os contedos e eles devero ser
designados com nomes ligados semanticamente s suas finalidades evitando-se nome-las de acordo com sua
apresentao ou aparncia. 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 pgina use IDs no lugar de classes. Isto importante para a aplicao de estilos na
pgina. Caso ocorram regras CSS conflitantes, os seletores IDs tero prioridade sobre os seletores classes.
Imagem do layout com containers nomeados
4
o
. passo - Criar a marcao
Comece a declarao 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 seo head do documento, incluindo a codificao 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
<title>Page title</title>
<link rel="stylesheet" href="style.css" type=
</head>
Finalmente inclua as informaes para a seo 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
o
. passo - Inserir contedo
<body>
<div id="container">
<div id="header" title="sitename">
<div id="skipmenu"><a href="#content">Skip to content
<h1>Sitename</h1>
</div>
<div id="mainnav">
<ul>
<li><a href="#">Section 1</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>
</ul>
</div>
<div id="contents">
<div class="blogentry">
<h2>
<a href="#" title="Permanent link to this item
</h2>
<h3>Wednesday, 3 December 2003</h3>
<p><img class="imagefloat" src="flower.jpg" alt
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.
</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
</ul>
</div>
</div>
<div id="footer">
Copyright Sitename 2004
</div>
</div>
</body>
</html>
6
o
. passo - Posicionar os containers
Os containers do layout devem ser posicionados com uso dos mtodos 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;
}
7
o
. 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 declarao
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 declarao 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 comentrio condicional especfico
para o IE6, como mostrado a seguir.
<head>
<meta http-equiv="content-type" content="text/html; charset
<title>Page title</title>
<link rel="stylesheet" href="style.css" type=

</head>
8
o
. 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 {
color: #272900;
}
#mainnav li a:hover {
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;
}
/* 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 {
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
o
. passo - Folha de estilo para impresso
Para terminar vamos preparar o layout para impresso. 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
ou
<link rel="stylesheet" href="style.css" type="text/css
Para criar uma folha de estilos destinada a impresso personalizada (sem os elementos da tela que no
interessam, como por exemplo, logotipos, rodaps, figuras decorativas, etc) siga os seguintes passos.
Crie uma cpia da folha de estilo principal (styles.css) e grave a cpia com o nome de backup.css.
Vamos trabalhar na folha style.css que estando linkada ao documento ir refletir no layout as alteraes
feitas, permitindo que se visualize imediatamente a alterao sem necessidade de dar um "visualizar impresso"
cada vez que se faz uma alterao.
Quando terminarmos com as alteraes 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 so os contedos que sero impressos.
No nosso exemplo ns descartaremos o grfico do topo (header), a navegao principal (mainnav), o menu da
direita bem como as cores e sublinhados dos links.
remova todos os containers no necessrios com uso da declarao display: none;
Mude todas as cores para preto ou tons de cinza.
Retire sublinhados de links com a declarao a { text decoration: none;}
Remova os tamanhos de fonte e deixe tudo com o tamanho padro 100% (default).
body {
margin: 0;
padding: 0;
font: 100% arial, hevetica, sans-serif;
color: #000;
background-color: #fff;
}
a {
color: #000;
}
#header { border-bottom: 1px solid #999; }
#header h1 { color: #000; }
#mainnav, #menu, .imagefloat, #skipmenu { display
#menu ul {
margin-left: 0;
padding-left: 0;
line-height: 165%;
}
#contents p { line-height: 165%; }
.blogentry { border-bottom: 1px solid #999; }
.blogentry ul {
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 seo 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 aceitvel em navegadores antigos (a estilizao parcial e o contedo
acessvel);
renderiza diferenciadamente para impresso.
Meu nome Maurcio Samy Silva e eu sou conhecido na Web como Maujor.
Mantenho o Site do Maujor hospedado em: maujor.com e meu e-mail de contato
maujorcss[ARROBA]maujor [PT]com.
Minha residncia em:
Copacabana - Rio de Janeiro,, RJ - - Brasil

Tutoriais CSS - Layout CSS Passo A Passo

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Tutoriais CSS - Layout CSS Passo A Passo

Hochgeladen von

Copyright:

Verfügbare Formate

24/6/2014 Tutoriais CSS - Layout CSS passo a passo

Das könnte Ihnen auch gefallen