Layout Introdução (Tableless) 2 e 3

colunas CSS - Style Sheet

Professor: Jolvani

Aula 28,29,30 e 31

Layout Introdução (Tableless) Parte ICSS - Style Sheet

Professor: Jolvani

Aula 28

Layout (tableless) Parte I - CSS Nesta etapa final iremos trabalhar com layout, e é fundamental

entender o conteúdo sobre posicionamento. Precisamos ter em mente a estruturação do html, os elementos

em bloco, em linha, spans e divs, que servem para estruturar as páginas.

Quando acessamos uma pagina web notamos que ela esta dividia em top, menus, conteúdos, área de destaque, rodapé... todos posicionados em locais específicos da página.

Então devemos definir nossa pagina em áreas, e atribuir nomes para elas...

http://maujor.com/tutorial/lay2col-faux-colunm.php

Áreas X nomes

Rodapé, blog

Layout (tableless) Parte I - CSS

Áreas X nomes

Layout (tableless) Parte I - CSS

Exemplo de uma estrutura completa

Layout (tableless) Parte I - CSS

Os layout podem ser classificados seguindo dois critérios: Número de colunas Largura da página: fixa (alterar tamanho do navegador o site não altera,

ex: w3scools), líquidas (usa-se %), elásticas(de acordo com o tamanho da fonte por ex);

Layout de Uma Coluna e largura fixa Para começar, criamos o layout de acordo com o código anterior....

Criamos o arquivo layout.html. No css. “estilo25.css” definimos uma borda de 1px cor preta E uma propriedade que define um estilo fixo, ou seja um layout fixo

Desvantagem: mal aproveitamento do espaço E da barra de rolagem

Layout (tableless) Parte I - CSS

Nesse Momento ele esta elástico (padrão normal do browser) (se eu encolher muito o tamanho da pagina fica difícil a leitura)

Definir largura (width) para o container (isso é definir um layout fixo para o seu site) Uma largura mínima – 500px.

Agora temos o controle sobre as dimensões do componente e a desvantagem é o mau aproveitamento do espaço horizontal quando aumentamos a resolução do browser.

Layout (tableless) Parte I - CSS

Layout Introdução (Tableless) Parte IICSS - Style Sheet

Professor: Jolvani

Aula 29

Layout de Uma Coluna e largura líquida Largura líquida: width: 80%; Independente do tamanho do browser o

elemento vai se ajustar aos 80% da pagina Aproveita melhor o espaço horizontal Layout de Uma Coluna e largura Elástico Largura ou layout elástico: definido em relação ao tamanho da

fonte: Altere tamanho da fonte para 14px e width para 40em e 30em...

Layout (tableless) Parte II - CSS

Centralizando o layout: usando margens automáticas

Independente de usar largura fixa ou elástica (variável)

Layout (tableless) Parte II - CSS

Independente de usar largura fixa ou elástica (variável)

Layout (tableless) Parte II - CSS

Layout com 2 colunasCSS - Style Sheet

Professor: Jolvani

Aula 30

Layout com 2 colunas - CSS Vamos construir container principal e layout com duas colunas veja

o código:

http://maujor.com/tutorial/

lay2col-faux-colunm.php

Layout com 2 colunas - CSS Adicionando textos nas divs:

Layout com 2 colunas - CSS Adicionando textos nas divs: id=contente

Cabeçalho

Coluna 01

Coluna 02

Rodapé

Layout com 2 colunas - CSS Criando o CSS: layout2.css

Colocar borda em todas as divs.... div {

border: 1px solid black;

}

http://maujor.com/tutorial/lay2col-faux-colunm.php Centralizar layout

Layout com 2 colunas - CSS Definir altura do cabeçalho e cor de fundo: layout2.css

Dividindo em colunas: left e contente

Vejam o Problema (rodapé)

Layout com 2 colunas - CSS Definimos o rodapé com a propriedade clear, para limpar o

float:

O rodapé está ok, mas as colunas estão... Isso não aconteceu pq a dimensão dos elementos left e contente ocupam todo o espaço da tela. O contente, mais precisamente, então devemos Definir um tamanho para esses componentes

Layout com 2 colunas - CSS Ok Código final Layout de 2 colunas

Layout com 3 colunasCSS - Style Sheet

Professor: Jolvani

Aula 31

Layout com 3 colunas – CSS Reestruturando seu html. Na parte principal = “contente”

colocamos duas divs principal e aquela que ficará a direita.

Layout com 3 colunas – CSS Cabeçalho e rodapé.

Layout com 3 colunas – CSS Left ou menu da página.

Layout com 3 colunas – CSS Centro – principal, mesmo texto da aula passada.

Na div do lado direito um novo texto

Layout com 3 colunas – CSS A estrutura sem layout, aplicação do css

Layout com 3 colunas – CSS Definimos a borda em todas as nossas divs

Usar layout estático, porém poderíamos usar layout elástico ou largura líquida.

Layout com 3 colunas – CSS Menu

Elemento Central: “content” - Rodapé, limpar layout

Layout com 3 colunas – CSS Mostrando o resultado – Por enquanto o layout de duas

colunas....

Layout com 3 colunas – CSS Para criar nosso layout em 3 colunas vamos alterar os

componentes da div content - principal e right.

Não é necessário usar, porém só para melhor ilustrar que div principal está dentro de content.

Layout com 3 colunas – CSS Mostrando o resultado

Layout com 3 colunas – CSS Pra finalizar adicione o seguinte código:

header{

heght: 80px;

bakground: #DDDDDD;

}

Left ou menu adicione:

bakground: #666666;

Rodapé também adicione:

bakground: #DDDDDD;

Próxima Aula: Menu só com CSS