Layout Introdução
(Tableless) 2 e 3 colunas
CSS - Style Sheet
Professor: Jolvani
Aula 28,29,30 e 31
Layout Introdução (Tableless)
Parte I
CSS - Style Sheet
Professor: Jolvani
Aula 28
Layout (tableless) Parte I - CSS
 Nesta etapa final iremos trabalhar com layout, e é fundamental
entender o conteúdo sobr...
 Á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 tamanh...
 Nesse Momento ele esta elástico (padrão normal do browser)
 (se eu encolher muito o tamanho da pagina fica difícil a le...
Layout Introdução (Tableless)
Parte II
CSS - 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 va...
 Centralizando o layout: usando margens automáticas
 Independente de usar largura fixa ou elástica (variável)
Layout (ta...
 Independente de usar largura fixa ou elástica (variável)
Layout (tableless) Parte II - CSS
Layout com 2 colunas
CSS - 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....
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 bla...
Layout com 2 colunas - CSS
 Definir altura do cabeçalho e cor de fundo: layout2.css
 Dividindo em colunas: left e conten...
Layout com 2 colunas - CSS
 Definimos o rodapé com a propriedade clear, para limpar o float:
 O rodapé está ok, mas as c...
Layout com 2 colunas - CSS
 Ok
 Código final
 Layout de 2 colunas
Layout com 3 colunas
CSS - Style Sheet
Professor: Jolvani
Aula 31
Layout com 3 colunas – CSS
 Reestruturando seu html. Na parte principal = “contente” colocamos
duas divs principal e aque...
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 layou...
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 ...
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 o...
Próxima Aula: Menu só com CSS
Próximos SlideShares
Carregando em…5
×

Aula 28,29,30 e 31. layout (tableless)

376 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
376
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
32
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 28,29,30 e 31. layout (tableless)

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

×