The Wayback Machine - https://web.archive.org/web/20101125210415/http://maujor.com/tutorial/layout-css-passo-a-passo.php

Autor: Russ Weakley
URL do original:http://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 ::

Índice

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 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 não é a de 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.

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 em um ponto difícil de detetar. Construa em passos pequenos e teste cada passo em diferentes navegadores. Assim fazendo você irá detetar 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 as Web Standards 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 do documento e coloque-a como um arquivo externo.

Valide seu código HTML e CSS

Valide com freqüência seu HTML e CSS. Muitos problemas com layouts problems 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 totalnmente 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 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.

3o. passo - Nomear os containers

Estes containers serão os elementos DIV principais nas quais serão inseridos os conteúdos e elas deverão ser designadas 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 ocorra regras CSS conflitantes, os seletores IDs terão prioridade sobre os seletores classes.

4o. passo - Criar a marcação para os containers

Crie alguns elementos DIV vazios para representar os containers definidos para a página. Por exemplo: 

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

Nota sobre DOCTYPE

Esteja ciente de que os navegadores renderizam um layout CSS de acordo com o DOCTYPE que o desenvolvedor adota para seu documento. Você não é obrigado a adotar o modo de renderização standard (NT: link para artigo em inglês) contudo você deverá conhecer bem como isto afeta um layout.

5o. passo - Escolher o método de posicionamento dos containers

Analise seu design e decida o método a adotar para posicionamento de cada um dos containers.

  • O layout será líquido, com largura fixa, definido em unidade em ou uma combinação deles?
  • O layout será centrado na página?
  • Quais containers deverão ser flutuados?
  • Quais containers serão mantidos no fluxo normal?
  • Há necessidade de posicionamento absoluto?

Esta é provavelmente a etapa mais difícil e aqui entra a experiência do desenvolvedor. Pra o nosso exemplo o pósicionamento será como mostrado a seguir:

  • container - inline, centrado na página
  • header - inline
  • mainnav - inline
  • menu - float: right
  • contents - inline com margin-right para simular uma coluna
  • footer - inline, com clear: both para equalizar qualquer elemento anteriomente flutuado.

6o. passo - Destacando os containers

A seguir os containers deverão ser estilizados com um método de posicionamento. Para facilitar a visualização de como os containers interagem entre si a cada um deles será definida uma largura e uma altura e também uma cor de fundo. - transformando-os em um box colorido. Lembre-se que é importante, particularmente quando construindo um layout totalmente novo, que você teste em diversos navegadores cada vez que termine uma etapa. Isto evita ter que retorna a etapas já concluidas quando um problema ocorre lá na frente.

O comportamento de cada containers poderá variar na ocasião que os conteúdos neles forem inseridos. Esta técnica de colorir os boxes permite que você trate e analise as questões de posicionamento em primeiro lugar deixando as questões de conteúdos para uma etapa posterior.

Os métodos de posicionamento podem exigir ajustes, caso hajam problemas com o layout. De qualquer forma experimentar diferentes métodos de posicionamento antes da inserção dos conteúdos é uma tarefa relativamente fácil.

Esta técnica (colorir os boxes, posicionar e testar) pode ser utilizada para durante o processo de construção do layout com a finalidade de posicionar elementos na página.

7o. passo - Inserindo conteúdos

Terminada a etapa de posicionamento e verificada a correta renderização do layout em diferentes navegadores podemos remover a altura definida para as DIVs. A seguir podemos inserir algum texto dentro dos containers. Os conteúdos inseridos devem ser semanticamente marcados - assim, use h1, h2 etc. para títulos, parágrafos para textos, etc. Inseridos os textos o layout deverá ser testado novamente em diferentes navegadores.

Nota sobre tamanho de fontes

Tamanho de fontes é um assunto polêmico. Cada um tem a sua opinião a respeito do que é certo e errado neste assunto. Atualmente parece haver duas escolhas relevantes a considerar:

Não definir tamanho para fontes

Deixe que a folha de estilos do navegador renderize as fontes no tamanho padrão definido pelo navegador ou que os tamanhos de fonte sejam definidos pela folha de estilos do usuário.

Usar unidades relativas para definir tamanho de fontes

Se vamos definir tamanhos para as fontes esta é a opção a adotar. Tamanhos de fontes são defidos em porcentagem ou unidades em. Este método permite alterar o tamanho de fonte, na maioria dos navegadores, de acordo com a preferência do usuário, ajustando assim os tamanhos para as necessidades de cada um.

Tamanhos relativos para fontes são fáceis de implementar quando usamos um ou uma combinação dos 3 métodos a seguir descritos:

Método 1 para tamanhos relativos de fontes - aplicar font-size aos containers

Os tamanhos de fontes podem ser definidos de forma global para o container ou individualmente para os elementos neles contidos. Isto resulta em um alto grau de controle sobre os elementos no layout. Por exemplo: diferentes elementos <h1> podem ter diferentes tamanhos de fontes dependendo do seu container:

#navigation h1 {
  font-size: 120%;
  }
  
#content h1 {
  font-size: 140%;
  }

Método 1 para tamanhos relativos de fontes - body

Um tamanho de fonte relativo é aplicado ao elemento body fazendo com que todos os elementos usem aquele tamanho como base.

body {
  font-size: 85%;
  }

Alguns navegadores não aplicam esta regra de forma consistente - especialmente quando trata-se de conteúdos em tabelas. Isto é especialmente verdadeiro quando o DOCTYPE define renderização em modo Quirks.

Método 1 para tamanhos relativos de fontes - seletor tipo

Você pode aplicar tamanho relativo de fonte diretamente nos elementos HTML. Por exemplo: 

p {
  font-size: 85%;
  }
  
  h1 {
  font-size: 150%;
  }

Contudo pode haver problemas com este método. Por exemplo: uma regra como a mostrada a seguir pode causar problemas relacionados à herança em listas aninhadas:

ul {
  font-size: 85%;
  }

Qualquer conteúdo em uma lista não ordenada será renderizado com tamanho igual a 85% do tamanho padrão de fonte adotado pelo navegador. O problema ocorre quando existe uma lista aninhada. O conteúdo da lista aninhada herda o tamanho do primeiro nível da lista e aplica os 85% resultando em um tamanho de fonte igual a 72,25% (85% x 85% = 72.25%). Para corrigir usamos uma outra regra que fará as listas aninhadas com os 85% de tamanho de fonte:

ul ul {
  font-size: 100%;
  }

Em geral usar uma combinação dos métodos 1 e 2 é uma boa escolha. Ou seja, definir uma base em porcentagem para tamanho de fonte de body e porcentagem ou unidade em para tamanho de fonte dos elementos relevantes do layout, conforme necessário.

8o. passo - Estilizando conteúdos

Com os containers na posição correta e os conteúdos neles inseridos apresentando um comportamento aceitável podemos iniciar a estilização destes conteúdos.

Classes e IDs

Use o mínimo possível de IDs e classes. Procure estilizar os elementos contidos em um container usando seletores descendentes. Por exemplo:

  #header {} /* para estilizar o container */
  #header h1 {} /* para estilizar os <h1> dentro do container */
  #header p {} /* para estilizar os <p> dentro do container */
  #header ul {} /* para estilizar os <ul> dentro do container */
  #header ul li {} /* para estilizar os <li> dentro do container */
  #header a {} /* para estilizar os <a> dentro do container */
  #header li a:link {} /* para estilizar os <a> contidos nos <li> dentro do container */

Ambiente de estilização

É sempre uma boa idéia agrupar estas regras de estilo nas folhas de estilo, pois isto iorá permitir que você encontre rapidamente as estilizações dos containers do seu projeto. Mark Newhouse se refere a esta técnica como Ambiente de estilização. Este grupamento de regras de estilo deve ser comentado para facilitar manutenção futura.

Uma vez que o posicionamento geral de containers foi estabelecido cada da seção da página pode então ser estilizada individualmente em seus aspectos particulares.

9o. passo - Linkando a folha de estilos

Uma vez testada a estilização dos conteúdos e obtido o resultado esperado nos diversos navegadores você pode retirar a folha de estilos da seção HEAD do documento e colocá-la em um arquivo externo. Os métodos para linkar a folha de estilos externa ao documento são descritos a seguir:

Folha de estilo linkada

Para linkar uma folha de estilos geral servida a todos os navegadores que suportam as CSS. A maioria das regras de estilos para o layout devem ser colocadas nesta folha de estilos.

<link rel="stylesheet" href="stylesheet1.css" media="screen">

Folha de estilo importada - uso de @import

Esta é a chamada folha de estilo avançada. Uma vez que os navegadores antigos não entendem a diretiva "@import", podemos nos valer deste fato para esconder regras de estilo (ou mesmo uma folha de estilo inteira) dos navegadores antigos. Existem várias maneiras de escrever o código para "@import" com a finalidade de esconder de um navegador particular, como por exemplo:

  @import url("../stylesheet.css");
  @import url(../stylesheet.css);
  @import url(../stylesheet.css) screen;
  @import "../stylesheet.css";

Nós usaremos a versão mostrada a seguir para esconder a folha de estilos dos navegadores Netscape 4.x, Win IE 3, Win IE 4, Mac IE 4.01 e Mac IE 4.5. 

<style type="text/css" media="screen">@import url("stylesheet2.css");</style>

10o. passo - Escondendo estilos de navegadores antigos

Choosing a method

O método a ser usado para esconder folha de estilo de navegadores antigos depende do nível de suporte que você pretende para seu layout.

Se você pretende simplesmente ignorar os navegadores antigos use folhas de estilo linkadas. Navegadores antigos suportam umas poucas regras CSS e neste caso renderizam o documento de maneira bastante precária.

Se você pretende servir conteúdos sem estilização use duas folhas de estilo - uma linkada e outra importada. Todas as regras de estilo avançadas (posicionamnetos, padding, margins etc) devem ser inseridas com a diretiva "@import"

Neste exemplo nos pretendemos fornecer suporte parcial para navegadores antigos. Isto significa que não serviremos estilos avançados com uso da diretiva "@import". Tentaremos usar um mínimo possível de estilos avançados com a finalidade de servir corretamente nosso layout para navegadores antigos. Esta é uma tarefa muito difícil e trabalhosa uma vez que cada um dos diferentes navegadores se comporta de maneira diferente.

O método de esconder

Teste seu layout em diferentes navegadores antigos e identifique os elementos que não são renderizados corretamente. Para identificar tais elementos faça experiências inserindo comentários nas declarações de estilo com a finalidade de tornar sem efeito as regras CSS aplicadas àqueles elementos e observe o que acontece, isto deverá em algum momento fazer desaparecer o problema com o elemento permitindo assim que você identifique qual a declaração de estilo que está causando o problema. A seguir remova a declaração que causa o problema retirando-a da folha de estilo linkada e servindo-a com a diretiva @import. Regras que causam problemas em navegadores antigos normalmente incluem as declarações para borders, padding, margins e elementos float. À medida que for movendo as declarações teste o resultado tanto nos navegadores antigos como nos modernos.

Nível de tolerância

O layout pode parecer completamente diferente quando visualizado em navegadores modernos e antigos. Isto não importa contando que que todo o conteúdo esteja acessível ao usuário.

Para este exercício o foco foi na técnica de esconder estilos que afetam o Netscape 4.x uma vez que este é o navegador antigo mais usado atualmente (NT: à época em que este artigo foi escrito). Isto significa que navegadores antigos como Internet Explorer 4.x podem renderizar a página diferentemente. Mas, é possível esconder regras problemáticas para navegadores antigos. Se você pretende esconder regras CSS, esconda de todos os navegadores antigos e sobrarão apenas algumas regras simples para eles como declarações para fontes, cores e posicionamentos básicos.

11o. passo - Folha de estilos para impressão

Para finalizar nos resta servir o layout para impressão. Se você deseja que seu layout seja impresso exatamente como é visto na tela basta alterar o link para a folha de estilo externa de modo a que ela seja acessada também pelas impressoras. Existem algumas maneiras de se fazer isto tais como declarar media="all" e media="screen, print".

Caso você queira fornecer uma versão diferente para impressão poderá usar o método descrito a seguir.

1. Faça uma cópia da sua folha de estilo principal (stylesheet1.css) e salve-a no seu HD. Agora podemos alterar a folha stylehseet1.css para ser usada como folha de estilo para impressão. Como o documento está linkado àquela folha, a medida em que fazemos as alterações para impressão elas serão vistas imediatamente no navegador sem necessidade de acionar print preview a cada modificação feita.

Ao terminar, mudamos o nome da folha de estilo e criamos um novo link para ela.

2. Observe no layout o que deverá aparecer impresso.

3. No nossso exemplo removeremos as figuras do topo, a navegação, o menu direito e todas as cores e sublinhados de links.

  • Esconda containers que não devam ser impressos com a declaração display: none;
  • Altere todas as cores para a cor preta ou tons de cinza.
  • Altere links com a declaração text decoration: none;
  • Retire as declarações para tamanho de fontes deixando por conta do navegador o seu dimensionamento.
  • Defina margens para as páginas usando algo como: body { margin: 2em; }

O resultado final para a versão destinada a impressão é mostrado no link a seguir:

4. Altere o nome da folha de estilo modificada para impressão, reponha de volta a cópia feita da folha de estilo principal e linke ambas ao documento: 

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

12o. passo - Concluindo

Agora temos um HTML que:

  • renderiza corretamente em navegadores modernos;
  • renderiza razoavelmente bem em navegadores recentes (pequeno bug nop Win/IE5);
  • renderiza de modo aceitável em navegadores antigos (existe alguma estilização e todo o conteúdo é acessível);
  • renderiza uma versão para impressão.

E nos links a seguir os resultados finais:

Comente

   (abre em janela pop-up)

Última modificação: 2009/11/9 19:52:39 GMT

Traduzido em: 2008-02-13

banner clickmaujor
ir topo
Morty Proxy This is a proxified and sanitized view of the page, visit original site.