Layout CSS

Um layout CSS especifica a estrutura geral da aparência de um site. Nele define-se o posicionamento dos conteúdos, tais como slogan, menus, conteúdo principal, conteúdo secundário, dentre outros.

Para entender melhor, veja a Figura 1. Ela ilustra um exemplo de layout onde a página é dividida em cinco partes (ou containers): a primeira é nomeada de header; a segunda, mainnav; a terceira, contents; a quarta, menu; e a quinta, footer.

Antes de colocar a mão na massa, deve-se conhecer os tipos de layouts. Os layouts são classificados segundo dois critérios (SILVA, 2008):

1. Quantidade de colunas – pode ser uma, duas, três ou até mesmo mais colunas.
2. Largura da página – pode ser de largura fixa, líquido, elástico ou híbrido. Veja a seguir como cada um deles é definido:
   • Largura fixa – a página e suas colunas possuem uma largura fixa, não importando o tamanho da janela do browser nem a resolução do monitor. Normalmente essa largura é definida pela propriedade width definida em pixel. Esse tipo de layout tem a vantagem de que todos os elementos estarão dispostos de uma forma previsível. Porém, se o usuário estiver usando uma janela menor (ou monitor com resolução menor) do que o necessário para ver todo o conteúdo, ele terá que ficar rolando a barra de navegação para direita e esquerda, ou se ele estiver usando uma janela muito grande (ou monitor com resolução maior do que o planejado) verá muito espaço em branco, como se não tivesse havido um bom planejamento no uso dos espaços. Por exemplo, o site da W3Schools <http://www.w3schools.com/> tem largura fixa.
   • Líquido (ou fluido) – as larguras são definidas em porcentagem. Assim, o conteúdo se acomoda à largura da janela do browser (ou resolução do monitor), otimizando o aproveitamento do espaço. Um exemplo é o site da W3C <http://www.w3.org/> (porém, ele muda a forma de visualização a partir de uma certa largura da janela. Faça o teste!). Entretanto, a desvantagem desse tipo de layout é que se deve ter mais cuidado no posicionamento dos elementos para que quando estreitado um não sobreponha o outro.Além disso, para o usuário, o comprimento das linhas de texto pode ficar tão pequeno ou tão grande que a leitura se torna desagradável. Para resolver esses problemas, é possível estipular uma largura máxima e mínima para esses elementos, de forma a garantir certo conforto para o usuário. Dessa forma, o layout se torna líquido até um certo limite.
   • Elástico – as larguras são definidas com base no tamanho das fontes, usando a unidade “em”. Isso fará com que a largura da página se comporte da mesma forma que o tamanho do texto, aumentando quando a letra aumenta e diminuindo quando a letra diminui. Esse tipo de layout é particularmente útil por questões de acessibilidade, para pessoas com necessidades especiais de visão. A desvantagem desse tipo de layout é que nem sempre se tem um bom aproveitamento do espaço horizontal ou a possibilidade do aparecimento da barra de rolagem horizontal quando o tamanho das fontes cresce muito.
   • Híbrido – a largura da página, colunas e demais elementos são definidos em “ems” e adicionalmente uma largura máxima é definida para eles em porcentagem. Ou definem-se as larguras em porcentagem e as larguras máximas e mínimas em “em”.

A seguir, são listados alguns passos básicos para você conseguir definir o layout de um site (Max Design e Layout CSS, 2012, extraído da internet):

1. Escolher e nomear os containers do layout.
2. Criar a marcação para esses containers.
3. Escolher o método de posicionamento para os containers.
4. Inserir e estilizar conteúdos.
5. Ligar o CSS.
6. CSS para impressão.

A seguir, é explicado como realizar cada um dos passos citados anteriormente.