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

428 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
428
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
36
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

×