IFRN

Diretoria Acadêmica de Gestão e Tecnologia da Informação

Disciplina de Design Web e Arquitetura da Informação

Layout CSS - parte 1: layout de uma coluna

Nesta aula serão apresentadas algumas orientações sobre a construção de páginas com uma única coluna tanto baseadas em layout fixo ou layout flexível.

Layout Fixo

Layouts fixos utilizam dimensões em pixels ou em unidades absolutas. As vantagens deste tipo de layout são a facilidade de construção e o controle absoluto sobre as dimensões finais dos elementos da página. Este tipo de layout é adequado para situações em que o desenvolvedor tem pleno conhecimento das características e dimensões da mídia de apresentação a ser utilizada para visualização da página, como por exemplo uma versão para impressão.

O código CSS abaixo foi aplicado ao exemplo 1 e define um layout com largura fixa de 700px. Ao redimensionar a janela do navegador, observe que o texto mantém a sua largura. Caso a janela fique muito estreita, uma barra de rolagem horizontal é exibida. A propriedade margin: auto indica que as margens laterais do elemento serão iguais e calculadas a partir da diferença entre a largura da página e a largura do elemento. A consequência natural de valores iguais para as margens laterais é a centralização do elemento como pode ser visto no exemplo. 

        
  body{
    width: 700px;
    text-align: justify;
    margin: auto;
  }

Layout flexível

Para páginas destinadas a um público amplo e diverso, o layout fixo geralmente não se apresenta como uma boa opção devido à sua falta de capacidade de adaptação às diferentes resoluções de tela empregadas nos dispositivos de acesso à web (e.g, computadores, smartphones, TVs, etc). Felizmente a CSS dispõe de recursos que nos permite a criação de layouts flexíveis, ou seja, layouts capazes de se adequar a diferentes resoluções de tela e diferentes configurações do usuário, proporcionando um melhor aproveitamento da área de visualização disponível e uma melhor experiência de leitura de página.

Uma página com largura em porcentagem irá adaptar-se de acordo com a largura total disponível, ou seja, a largura da janela do navegador. No entanto, apenas a largura de página em porcentagem pode não ser suficiente para a criação de um bom layout. Dependendo da resolução de tela em uso, a largura resultante pode ser muito larga ou muito estreita, tornando a leitura de texto desagradável. Para evitar estes problemas, podemos utilizar as propriedades min-width e max-width com valores em px ou em.

A vantagem em utilizar em é que as larguras máxima e mínima irão ser baseadas no tamanho de fonte utilizado, propriedade muitas vezes alterada pelo usuário para facilitar a leitura do conteúdo presente na página. Estudos tipográficos afirmam que, em textos longos, devemos utilizar linhas de texto contendo cerca de 100 caracteres para otimizar a leitura.

O código CSS a seguir foi aplicado ao exemplo 2. Ao visualizar o exemplo, redimensione a janela do navegador e observe que a largura do texto acompanha a janela, mas também evita linhas muito longas ou muito estreitas. Quando a largura da janela é menor do que a largura mínima indicada, a barra de rolagem horizontal é exibida. Verifique o comportamento da largura após comentar as propriedades min-width e max-width. 

        
  body{
    width: 85%;
    min-width: 30em;
    max-width: 45em;
    text-align: justify;
    margin: auto;
  }

Exercícios

1) Escreva uma página HTML de única coluna contendo imagens e um texto longo. Também elabore uma folha de estilo para gerar uma versão de impressão para a página. Utilize um layout fixo destinado a uma página de papel A4 (largura de 210mm) e margens superior, direita, inferior e esquerda respectivamente iguais a 6mm, 7mm, 6mm e 17mm.

2) Escreva o código HTML para a página ilustrada na figura 1 e na figura 2. Utilize um layout flexível com largura de página igual a 95% e cujas linhas de texto possuam, respectivamente, 55 e 100 como quantidades mínima e máxima de caracteres. Note que a área de conteúdo não encosta na borda da janela, mesmo quando a barra de rolagem horizontal é exibida.

Referências