1. Layout Introdução
(Tableless) 2 e 3 colunas
CSS - Style Sheet
Professor: Jolvani
Aula 28,29,30 e 31

2. Layout Introdução (Tableless)
Parte I
CSS - Style Sheet
Professor: Jolvani
Aula 28

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

9. Layout Introdução (Tableless)
Parte II
CSS - Style Sheet
Professor: Jolvani
Aula 29

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

13. Layout com 2 colunas
CSS - Style Sheet
Professor: Jolvani
Aula 30

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:

16. Layout com 2 colunas - CSS
 Adicionando textos nas divs: id=contente
 Cabeçalho
 Coluna 01
 Coluna 02
 Rodapé

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

21. Layout com 3 colunas
CSS - Style Sheet
Professor: Jolvani
Aula 31

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;

33. Próxima Aula: Menu só com CSS