Layout CSS passo a passo

Alquimista

Alquimista

Coordenador

Postagens : 76

Troféus : 0

Registrado em : 15/07/2014

Layout CSS passo a passo

Introdução

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

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.

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

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^o. 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

[th]Navegadores modernos[/th][th]Navegadores recentes[/th][th]Navegadores antigos[/th][th]Opção 1.[/th][th]Opção 2.[/th][th]Opção 3.[/th][th]Opção 4.[/th]

Suporte total às CSS	Suporte total às CSS	Suporte total às CSS
Suporte total às CSS	Suporte total às CSS	Suporte parcial às CSS
Suporte total às CSS	Suporte total às CSS	Conteúdos não estilizados
Suporte total às CSS	Suporte parcial às CSS	Conteúdos não estilizados

Neste artigo escolhemos a Opção 2

2^o. 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.

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

3^o. 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

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

4^o. passo - Criar a marcação

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

"http://www.w3.org/TR/html4/strict.dtd">

Prossiga com a seção

Código:: head

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

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

Finalmente inclua as informações para a seção

Código:: body

— crie DIVs vazias para os containers do layout. Veja o exemplo a seguir.

Código:: [center]<body>[/center] [center]<div id="container">[/center] [center] <div id="header"></div>[/center] [center] <div id="mainnav"></div>[/center] [center] <div id="menu"></div>[/center] [center] <div id="contents"></div>[/center] [center] <div id="footer"></div>[/center] [center]</div>[/center] [center]</body>[/center] [center]</html>[/center] [center][/center]

5^o. passo - Inserir conteúdo

Código:: [center]<body> [/center] [center]<div id="container"> [/center] [center] <div id="header" title="sitename"> [/center] [center] <div id="skipmenu"><a href="#content">Skip to content</a></div> [/center] [center] <h1>Sitename</h1> [/center] [center] </div> [/center] [center]<div id="mainnav"> [/center] [center] <ul> [/center] [center] <li><a href="#">Section 1</a></li> [/center] [center] <li><a href="#">Section 2</a></li> [/center] [center] <li><a href="#">Section 3</a></li> [/center] [center] <li><a href="#">Section 4</a></li> [/center] [center] </ul> [/center] [center]</div> [/center] [center]<div id="menu"> [/center] [center]<h3>Archives</h3> [/center] [center] <ul> [/center] [center] <li><a href="#">December 2003</a></li> [/center] [center] <li><a href="#">November 2003</a></li> [/center] [center] <li><a href="#">October 2003</a></li> [/center] [center] <li><a href="#">September 2003</a></li> [/center] [center] <li><a href="#">August 2003</a></li> [/center] [center] </ul> [/center] [center]<h3>Last 10 Entries</h3> [/center] [center] <ul> [/center] [center] <li><a href="#">Entry 120 (4)</a></li> [/center] [center] <li><a href="#">Entry 119 (0)</a></li> [/center] [center] <li><a href="#">Entry 118 (9)</a></li> [/center] [center] <li><a href="#">Entry 117 (3)</a></li> [/center] [center] </ul> [/center] [center]</div> [/center] [center]<div id="contents"> [/center] [center]<div class="blogentry"> [/center] [center] <h2> [/center] [center] <a href="#" title="Permanent link to this item">Heading here</a> [/center] [center] </h2> [/center] [center] <h3>Wednesday, 3 December 2003</h3> [/center] [center] <p><img class="imagefloat" src="flower.jpg" alt="" width="100" height="100" border="0"> [/center] [center] 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. [/center] [center] </p> [/center] [center] <p> [/center] [center] Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.[/center] [center] </p> [/center] [center] <ul> [/center] [center] <li><a href="#">Comments (4)</a></li> [/center] [center] <li><a href="#">Pingbacks (1)</a></li> [/center] [center] <li>Category: <a href="#" title="Category">CSS</a></li> [/center] [center] </ul> [/center] [center] </div> [/center] [center] </div> [/center] [center]<div id="footer"> [/center] [center]Copyright © Sitename 2004 [/center] [center]</div> [/center] [center]</div> [/center] [center]</body> [/center] [center]</html>[/center] [center][/center]

6^o. 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

Código:: style.css

. Depois que os containers forem posicionados voltaremos ao arquivo da folha de estilo para acresentar mais regras CSS.

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

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

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

Código:: 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

Código:: display: inline

para o container flutuado, no caso

Código:: #contents

.

Código:: [center]#contents {[/center] [center] float: left;[/center] [center] width: 440px;[/center] [center] background: #9FC;[/center] [center] margin: 0 0 0 20px;[/center] [center] display: inline;[/center] [center] }[/center] [center][/center]

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.

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

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.

Código:: [center]/* global styles */[/center] [center][/center] [center]body {[/center] [center] margin: 0;[/center] [center] padding: 0;[/center] [center] font: 85% arial, hevetica, sans-serif;[/center] [center] text-align: center;[/center] [center] color: #333;[/center] [center] background: #ddd url(img_39.gif) repeat 0 0;[/center] [center] }[/center] [center][/center] [center]a:link { color: #B52C07; }[/center] [center]a:visited { color: #b93411; }[/center] [center]a:focus { color: #000; }[/center] [center]a:hover { color: #7d8206; }[/center] [center]a:active { color: red; }[/center] [center]h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; }[/center] [center][/center] [center]h2 {[/center] [center] color: #B52C07;[/center] [center] font: 140% georgia, times, "times new roman", serif;[/center] [center] }[/center] [center][/center] [center]h2 a { text-decoration: none; }[/center] [center][/center] [center]h3 {[/center] [center] color: #7d8206;[/center] [center] font: 110% georgia, times, "times new roman", serif;[/center] [center] }[/center] [center][/center] [center]/* container styles */[/center] [center][/center] [center]#container {[/center] [center] margin: 1em auto;[/center] [center] width: 650px;[/center] [center] text-align: left;[/center] [center] background: #fff;[/center] [center] border: 1px solid #676767;[/center] [center] }[/center] [center][/center] [center]/* header styles */[/center] [center][/center] [center]#header {[/center] [center] height: 45px;[/center] [center] width: 100%;[/center] [center] position: relative;[/center] [center] background: url(header.jpg) no-repeat 0 0;[/center] [center] border-bottom: 1px solid #fff;[/center] [center] }[/center] [center][/center] [center]#header h1 {[/center] [center] position: absolute;[/center] [center] left: -500em;[/center] [center] }[/center] [center][/center] [center]#skipmenu {[/center] [center] position: absolute;[/center] [center] left: 0;[/center] [center] top: 5px;[/center] [center] width: 645px;[/center] [center] text-align: right;[/center] [center] }[/center] [center][/center] [center]#skipmenu a {[/center] [center] color: #555;[/center] [center] text-decoration: none;[/center] [center] }[/center] [center][/center] [center]/* mainnav styles */[/center] [center][/center] [center]#mainnav {[/center] [center] background: #9FA41D;[/center] [center] color: #272900;[/center] [center] padding: 2px 0;[/center] [center] margin-bottom: 22px;[/center] [center] }[/center] [center][/center] [center]#mainnav ul {[/center] [center] margin: 0 0 0 20px;[/center] [center] padding: 0;[/center] [center] list-style-type: none;[/center] [center] border-left: 1px solid #C4C769;[/center] [center] }[/center] [center][/center] [center]#mainnav li {[/center] [center] display: inline;[/center] [center] padding: 0 10px;[/center] [center] border-right: 1px solid #C4C769;[/center] [center] }[/center] [center][/center] [center]#mainnav li a {[/center] [center] text-decoration: none;[/center] [center] color: #272900;[/center] [center] }[/center] [center][/center] [center]#mainnav li a:hover {[/center] [center] text-decoration: none;[/center] [center] color: #fff;[/center] [center] background-color: #272900;[/center] [center] }[/center] [center][/center] [center]/* menu styles */[/center] [center][/center] [center]#menu {[/center] [center] float: right;[/center] [center] width: 165px;[/center] [center] border-left: 1px solid #C5C877;[/center] [center] padding-left: 15px;[/center] [center] }[/center] [center][/center] [center]#menu ul {[/center] [center] margin: 1em 0;[/center] [center] padding: 0;[/center] [center] }[/center] [center][/center] [center]#menu ul li {[/center] [center] margin: 0 0 1em;[/center] [center] padding: 0;[/center] [center] list-style-type: none;[/center] [center] }[/center] [center][/center] [center]/* contents styles */[/center] [center][/center] [center]#contents {[/center] [center] float: left;[/center] [center] width: 430px;[/center] [center] margin: 0 0 0 20px;[/center] [center] }[/center] [center][/center] [center]#contents p { line-height: 165%; }[/center] [center].blogentry { border-bottom: 1px solid #C5C877; }[/center] [center][/center] [center].blogentry ul {[/center] [center] text-align: right;[/center] [center] margin: 1em 0;[/center] [center] padding: 0;[/center] [center] font-size: 95%;[/center] [center] }[/center] [center][/center] [center].blogentry li {[/center] [center] list-style-type: none;[/center] [center] display: inline;[/center] [center] margin: 0;[/center] [center] padding: 0 0 0 7px;[/center] [center] }[/center] [center][/center] [center].imagefloat {[/center] [center] float: right;[/center] [center] padding: 2px;[/center] [center] border: 1px solid #9FA41D;[/center] [center] margin: 0 0 10px 10px;[/center] [center] }[/center] [center][/center] [center]/* footer styles */[/center] [center][/center] [center]#footer {[/center] [center] clear: both;[/center] [center] color: #272900;[/center] [center] text-align: right;[/center] [center] font-size: 90%;[/center] [center] background: #9FA41D;[/center] [center] padding: 5px;[/center] [center] }[/center] [center][/center]

9^o. 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

Código:: all

ou

Código:: print

para o atributo

Código:: media

do elemento que linka para a folha de estilo conforme mostrado a seguir.

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

ou

Código:: <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 (

Código:: styles.css

) e grave a cópia com o nome de

Código:: backup.css

. Vamos trabalhar na folha

Código:: 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

Código:: print.css

, renomear o arquivo

Código:: backup.css

para

Código:: 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

Código:

display: none;
Mude todas as cores para preto ou tons de cinza.
Retire sublinhados de links com a declaração

Código:

a { text decoration: none;}
Remova os tamanhos de fonte e deixe tudo com o tamanho padrão 100% (default).

Código:: [center]body {[/center] [center] margin: 0;[/center] [center] padding: 0;[/center] [center] font: 100% arial, hevetica, sans-serif;[/center] [center] color: #000;[/center] [center] background-color: #fff;[/center] [center] }[/center] [center][/center] [center]a {[/center] [center] color: #000;[/center] [center] text-decoration: none;[/center] [center] }[/center] [center][/center] [center]#header { border-bottom: 1px solid #999; }[/center] [center]#header h1 { color: #000; }[/center] [center]#mainnav, #menu, .imagefloat, #skipmenu { display: none; }[/center] [center][/center] [center]#menu ul {[/center] [center] margin-left: 0;[/center] [center] padding-left: 0;[/center] [center] list-style-type: none;[/center] [center] line-height: 165%;[/center] [center] }[/center] [center][/center] [center]#contents p { line-height: 165%; }[/center] [center].blogentry { border-bottom: 1px solid #999; }[/center] [center][/center] [center].blogentry ul {[/center] [center] list-style-type: none;[/center] [center] text-align: right;[/center] [center] margin: 1em 0;[/center] [center] padding: 0;[/center] [center] font-size: 95%;[/center] [center] }[/center] [center][/center] [center].blogentry li {[/center] [center] display: inline;[/center] [center] padding: 0 0 0 7px;[/center] [center] }[/center] [center][/center] [center]#footer {[/center] [center] clear: both;[/center] [center] color: #000;[/center] [center] text-align: right;[/center] [center] padding: 5px;[/center] [center] font-size: 90%;[/center] [center] border-top: 1px solid #999;[/center] [center] margin-top: 2em;[/center] [center] }[/center] [center][/center]

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Acresente mais um link para folha de estilo na seção

Código:: head

do documento como mostrado a seguir.

Código:: <link rel="stylesheet" href="print.css" media="print">

Fonte : Maujor.

#1 Layout CSS passo a passo Qua Jul 16, 2014 12:59 pm

Alquimista

Permissões de Postagem