Como criar páginas web em colunas

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

Video: HTML - LAYOUT 2 COLUNAS

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 longo ou curto como você quer que 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 para baixo tanto quanto necessário.

• Você pode definir alturas de colunas, mas então você tem que invocar outras técnicas para permitir 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.

Video: SITE 03 - Editando uma página: Linhas, Colunas e Espaçamento

Mesmo? Quando você examinar um monte de sites bem desenhados, eles não vão aparecer a ser definido 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 até 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).

Video: Como criar um site grátis - O mais fácil da internet - Parte 2 (Style e colunas)

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 maior parte da página) é uma estrutura mais básica de duas colunas. Essa divisão básica de duas colunas é ilustrado aqui:

Video: HTML e CSS- Colunas divs

O takeaway é esta: Quando você cria páginas, é fácil para dividir colunas - dividi-los em dois, três, quatro, cinco, e mais colunas. No entanto, é tecnicamente fácil de dividir elementos de layout de página, mas tecnicamente difícil para permitir que conteúdo para abranger entre 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 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.

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 de destaque na direita; coluna do lado, o conteúdo pode expandir para preencher uma coluna inteira.

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 vezes mastro) e o rodapé (não visível nas imagens) são elementos de uma única coluna que se estendem ao longo de toda a 960 px; vasta recipiente que enquadra a página.

Será que 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.

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