3. 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
4. Áreas X nomes
Rodapé, blog
Layout (tableless) Parte I - CSS
5. Áreas X nomes
Layout (tableless) Parte I - CSS
6. Exemplo de uma estrutura completa
Layout (tableless) Parte I - CSS
7. 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
8. 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
10. 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
11. Centralizando o layout: usando margens automáticas
Independente de usar largura fixa ou elástica (variável)
Layout (tableless) Parte II - CSS
12. Independente de usar largura fixa ou elástica (variável)
Layout (tableless) Parte II - CSS
14. 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
15. Layout com 2 colunas - CSS
Adicionando textos nas divs:
17. 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
18. 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é)
19. 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
20. Layout com 2 colunas - CSS
Ok
Código final
Layout de 2 colunas
22. Layout com 3 colunas – CSS
Reestruturando seu html. Na parte principal = “contente” colocamos
duas divs principal e aquela que ficará a direita.
23. Layout com 3 colunas – CSS
Cabeçalho e rodapé.
24. Layout com 3 colunas – CSS
Left ou menu da página.
25. Layout com 3 colunas – CSS
Centro – principal, mesmo texto da aula passada.
Na div do lado direito um novo texto
26. Layout com 3 colunas – CSS
A estrutura sem layout, aplicação do css
27. 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.
28. Layout com 3 colunas – CSS
Menu
Elemento Central: “content” - Rodapé, limpar layout
29. Layout com 3 colunas – CSS
Mostrando o resultado – Por enquanto o layout de duas colunas....
30. 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.
31. Layout com 3 colunas – CSS
Mostrando o resultado
32. 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;