Como criar páginas web em Colunas

Porque desenhos de páginas semelhantes (como um projeto de três colunas) detêm diferentes quantidades de conteúdo, quando você está projetando páginas da web, você tem que planejar para onde o conteúdo extra vai ir se ele não se encaixa dentro da coluna.

A resposta é simples: Down. O ponto: Scrolling verticalmente (Para cima e para baixo) em vez de horizontalmente (Lateralmente) em páginas da web é muito mais intuitivo e funcional. No negativo: Rolando frente e para trás, e frente e para trás, e frente e para trás (você está recebendo o ponto) com uma barra de rolagem horizontal realmente quebra o fluxo quando as pessoas estão a tentar ler uma página.

Em outras palavras, as pessoas podem muito mais facilmente se deslocar para cima e para baixo do que pode rolar para a direita e esquerda.

Embora linhas (conjuntos horizontais de conteúdo) desempenham um papel na página web design, colunas definir design da página. Uma página 960 grade pode ser tão longa ou curta como você quer que ele seja. Mas de uma forma ou de outra, o design da página deve permitir que o conteúdo para expandir para baixo.

As opções básicas são as seguintes:

  • Você pode ter colunas sem altura definida, permitindo que o conteúdo para expandir-se, na medida do necessário.

  • Você pode definir alturas de colunas, mas então você tem que invocar outras técnicas para permitir que o conteúdo para expandir para baixo, como caixas de rolagem ou flexíveis.

Se você examinar muitas páginas da web bem concebido, você verá que não só eles são esmagadoramente dispostos em 960 px recipientes, mas todos eles são essencialmente dispostos em duas ou três colunas.

Sério? Quando você pesquisar um monte de sites bem desenhados, eles não vão aparecera ser apresentado em duas ou três colunas. Eles parecem que estão dispostas em 5 colunas, ou 8, ou 11. Mas se você segurar uma régua ou uma folha de papel para a tela, você verá que os subjacentes todas as colunas em uma página é um design mais básico.

Dê uma olhada na (banco de dados do Filme Independente) página IMDb. À primeira vista, pode parecer que esta página é apresentado em cinco ou até oito colunas (se você contar as três colunas no canto inferior direito).

image0.jpg

Mas se você traçar uma linha de cerca de três quartos da página a partir da borda esquerda, você pode ver que subjacente às cinco colunas visíveis (na maioria da página) é uma estrutura mais básica de duas colunas. Essa divisão básica de duas colunas é ilustrado aqui:

image1.jpg

A conclusão é esta: Quando você cria páginas, é fácil dividir colunas - dividi-los em dois, três, quatro, cinco, e mais colunas. No entanto, é tecnicamente fácil de dividir os elementos de layout de página, mas tecnicamente difícil permitir que o conteúdo seja dividido em duas colunas definidas. Portanto, a regra por razões técnicas, é que as colunas em web design são fáceis de dividir, mas difícil de se fundir.

Então, quando chega a hora para você traduzir um projeto em uma página da web, primeiro dividir a página em duas ou três colunas, e depois ainda subdividir essas colunas conforme necessário. Por exemplo, O jornal New York Times local parece que está dividido em cinco colunas.

image2.jpg

Mas quando você diminuir o zoom e dar uma olhada na página mostrado na figura a seguir, você pode ver como debaixo daqueles cinco colunas são realmente duas colunas, cada uma das quais é subdividida em outras colunas, às vezes. Ou, como no caso do anúncio proeminente na direita; coluna de mão, o conteúdo pode expandir-se para encher uma coluna inteira.

image3.jpg

Há uma exceção à regra aqui: Os principais elementos da página estão em um layout de duas colunas, mas o cabeçalho (com a vezesmastro) eo rodapé (não visível nas imagens) são elementos de uma única coluna que se estendem por toda a 960 px; recipiente largo que enquadra a página.

Esta regra dois ou três coluna aplicam-se apenas aos jornais on-line? Não. A figura a seguir mostra que o site do Facebook é dividida em duas colunas, e YouTube é apresentado em três colunas.

image4.jpg

Note-se que a coluna do meio do YouTube é por vezes divididos ao meio, em duas colunas. Como você explorar a web e identificar os locais que você aprecia, ter tempo para desconstruir como eles estão estruturados em torno de dois ou três colunas.

menu