{"id":22330,"date":"2014-07-08T01:35:40","date_gmt":"2014-07-08T01:35:40","guid":{"rendered":"http:\/\/antonini.med.br\/blog\/?p=22330"},"modified":"2021-04-02T05:03:44","modified_gmt":"2021-04-02T05:03:44","slug":"layout-css-passo-a-passo","status":"publish","type":"post","link":"https:\/\/antonini.ddns.net\/?p=22330","title":{"rendered":"Layout CSS passo a passo"},"content":{"rendered":"

Objetivo<\/strong><\/p>\n

Voc\u00ea sabe construir um layout CSS completo? Existe um m\u00e9todo que possa ser utilizado para constru\u00e7\u00e3o de qualquer layout CSS?<\/p>\n

Este artigo explica como construir um layout CSS a partir do zero. O m\u00e9todo de constru\u00e7\u00e3o descrito se baseia no posicionamento de containers coloridos, foi testado em uma variedade consider\u00e1vel de navegadores e pode ser adaptado para construir layouts CSS em geral.<\/p>\n

Introdu\u00e7\u00e3o<\/strong><\/p>\n

Vamos come\u00e7ar com uma imagem do layout e ao longo do artigo iremos transform\u00e1-la em uma p\u00e1gina (X)HTML<\/abbr>. A finalidade principal desse tutorial n\u00e3o \u00e9 ensinar a constru\u00e7\u00e3o de um layout id\u00eantico ao apresentado mas sim aprender as t\u00e9cnicas para constru\u00e7\u00e3o de layout CSS em geral.<\/p>\n

Imagem do layout (NT: usarei as imagens do artigo original \u2014 em ingl\u00eas)<\/p>\n

[singlepic id=2014 w= h= float=center]<\/p>\n

Vejamos algumas diretrizes importantes antes de iniciar.<\/p>\n

Construa cada passo por etapas bem definidas e ao concluir a etapa teste em diferentes navegadores<\/strong><\/p>\n

N\u00e3o caia na armadilha de construir todo o layout e depois testar, pois voc\u00ea poder\u00e1 constatar uma quebra de layout dif\u00edcil de detectar devido a grande quantidade de c\u00f3digo. Construa em passos pequenos e teste cada passo em diferentes navegadores. Assim fazendo voc\u00ea ir\u00e1 detectar eventuais problemas com o layout t\u00e3o logo eles apare\u00e7am, tornando a corre\u00e7\u00e3o mais f\u00e1cil.<\/p>\n

Desenvolva para os navegadores modernos e depois adapte para os antigos<\/strong><\/p>\n

\u00c9 mais produtivo desenvolver para os navegadores complacentes com os Padr\u00f5es Web e depois usar artif\u00edcios, tal como esconder CSS (via @import), para servir os navegadores antigos.<\/p>\n

Na fase de desenvolvimento e testes coloque a folha de estilos na se\u00e7\u00e3o HEAD da p\u00e1gina<\/strong><\/p>\n

\u00c9 muito mais f\u00e1cil construir seu layout com a folha de estilos incorporada na p\u00e1gina em constru\u00e7\u00e3o \u2014 \u00e9 mais r\u00e1pido e evita que a folha de estilos fique no cache da m\u00e1quina. Ao terminar a constru\u00e7\u00e3o do layout retire a folha de estilos da p\u00e1gina e coloque-a em um arquivo externo linkando-a.<\/p>\n

Valide seu c\u00f3digo HTML<\/abbr> e CSS<\/strong><\/p>\n

Valide com freq\u00fc\u00eancia seu HTML e CSS. Muitos problemas com layouts podem ser corrigidos com aux\u00edlio dos relat\u00f3rios do validador.<\/p>\n

1 – Decidir a qual n\u00edvel de navegadores o layout ser\u00e1 servido<\/strong><\/p>\n

Antes de come\u00e7ar seu layout voc\u00ea dever\u00e1 decidir a quais navegadores ele dever\u00e1 ser servido. Para ajud\u00e1-lo nesta decis\u00e3o \u00e9 importante saber quais os usu\u00e1rios do site (p\u00fablico-alvo) e se poss\u00edvel examinar os relat\u00f3rios e logs indicativos de navegadores mais usados.<\/p>\n

Existem 3 n\u00edveis de suporte \u00e0s CSS pelos navegadores, que devem ser considerados:<\/p>\n

Nota do tradutor: Os n\u00edveis de suporte \u00e0s CSS pelos navegadores, mostrado no artigo, data do ano de 2004. Para os padr\u00f5es atuais considere adapta\u00e7\u00f5es e atualiza\u00e7\u00e3o.<\/p>\n

Navegadores antigos<\/strong><\/p>\n

Win\/Netscape4.x, Win\/InternetExplore4.x, Mac\/Netscape4.x, Mac\/InternetExplorer4.x, etc<\/p>\n

Navegadores recentes<\/strong><\/p>\n

Win\/InternetExplore 5, Win\/InternetExplore 5.5, Win\/Netscape 6, Win\/Mozilla1.x, Win\/Opera6, Mac\/Netscape6, Mac\/Mozilla1.x, Mac\/Opera5 etc<\/p>\n

Navegadores modernos<\/strong><\/p>\n

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<\/p>\n

N\u00edveis de suporte<\/strong><\/p>\n

Suporte total \u00e0s CSS – O navegador suporta todas as regras CSS e renderiza o layout de maneira totalmente consistente. Se voc\u00ea pretende suporte total para navegadores antigos dever\u00e1 usar somente regras CSS b\u00e1sicas e evitar posicionamentos CSS complexos.<\/p>\n

Suporte parcial \u00e0s CSS – Algumas regras CSS devem ser escondidas para determinado navegador. Isto implica em que aquele navegador n\u00e3o renderiza o layout de forma totalmente consistente, contudo razo\u00e1vel grau de apresenta\u00e7\u00e3o \u00e9 obtido. Por exemplo: fontes e cores s\u00e3o renderizadas corretamente, mas certos aspectos do posicionamento n\u00e3o s\u00e3o.<\/p>\n

Conte\u00fados n\u00e3o estilizados – Todas as regras de estilos s\u00e3o escondidas para um determinado navegador.<\/em><\/p>\n

\"\"<\/p>\n

Neste artigo escolhemos a Op\u00e7\u00e3o 2<\/p>\n

2 – Escolher os containers do layout<\/strong><\/p>\n

Para posicionar os elementos na p\u00e1gina devemos criar os containers principais. Analise o design da p\u00e1gina (que pode ser uma figura, um esbo\u00e7o em folha de papel ou um template existente) e defina os containers principais.<\/p>\n

Imagem do layout com containers definidos.<\/p>\n

[singlepic id=2015 w= h= float=center]<\/p>\n

3 – Nomear os containers<\/strong><\/p>\n

Estes containers ser\u00e3o os elementos DIV principais nas quais ser\u00e3o inseridos os conte\u00fados e eles dever\u00e3o ser designados com nomes ligados semanticamente \u00e0s suas finalidades evitando-se nome\u00e1-las de acordo com sua apresenta\u00e7\u00e3o ou apar\u00eancia. No nosso exemplo adotaremos os seguintes nomes para as DIVs principais do layout:<\/p>\n