Autoração web aula 12 - camada de apresentação - ticianne ribeiro

387 views
304 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
387
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Autoração web aula 12 - camada de apresentação - ticianne ribeiro

  1. 1. Web Design naChina Por: Smashing Magazine
  2. 2. O peso do Flash
  3. 3. Shanghai Vive (cosmetics)
  4. 4. Cool Bear Hi (motors)
  5. 5. Mian Dian Fang (breakfast)
  6. 6. Youguan Cookies
  7. 7. Shoebox (shoes brand)
  8. 8. Desing para entretenimento
  9. 9. Lipton Milk Tea (hug game)
  10. 10. M&M China (game)
  11. 11. Moliyo MFM (online videogame)
  12. 12. Desing para “cliques”
  13. 13. Yoho (online shopping for youngin)
  14. 14. China Visual (graphic design resources)
  15. 15. NetEase (news portal)
  16. 16. Desing Cultural
  17. 17. Pizza Hut China
  18. 18. Mc Donalds China
  19. 19. Tong2Studio (graphic design)
  20. 20. Dongpai Design (design studio)
  21. 21. E mais...
  22. 22. The GF Space (design agency)
  23. 23. Shaopan Film Studio
  24. 24. Jossy Jo (clothing brand)
  25. 25. Mole Lele (cartoonist)
  26. 26. Aula 12 – Camada de Apresentação prof. Ticianne Ribeiro 28
  27. 27. 29Introdução ao CSS
  28. 28. 30
  29. 29. 34Sintaxe Básica do CSS
  30. 30. seletor { propriedade: valor; } p{ font-size: 12px; /* ponto-e-vírgula é facultativo */ }body { color: #000; background: #fff; font-weight: bold; /*ponto-e-vírgula é facultativo */}h3 { font-family: "Comic Sans MS";}h1, h2, h3, h4, h5, h6 { color: #0f0;} 36
  31. 31. elemento.minhaClasse{ propriedade: valor; }.minhaClasse{ propriedade: valor; }p.aboutMe { font-size: 15px; font-family: “Times New Roman“; font-weight: bold; text-align: right; }<p class =“about Me"> Não presto. Irônico, sarcástico, ansioso, romântico, egoísta, excêntrico, anti social, junto com todos aqueles clichês de quem não quer se igual aos outros..</p> 37
  32. 32. Não presto. Irônico, sarcástico, ansioso, romântico, egoísta, excêntrico, anti social, junto com todosaqueles clichês de quem não quer se igual aos outros.. 38
  33. 33. #meuID{ propriedade: valor; } #topTitle{ font-size: 35px; font-family: “Verdana“; }<h1 id =“topTitle"> Welcome to the jungle!</h1> 39
  34. 34. Welcome to the jungle! 40
  35. 35. 41Como vincular o CSS ao XHTML
  36. 36. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"xml:lang="pt-br"><head> <title>TÍTULO DA PÁGINA</title> <link type="text/css" href="seuarquivo.css" media="screen" /></head><body> <h1>TÍTULO DA SEÇÃO</h1> <p>CONTEÚDO</p></body></html>
  37. 37. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="pt-bt" xml:lang="pt-br"><head> <title>TÍTULO DA PÁGINA</title> <style type="text/css" media="screen"> p { text-align:center; } </style></head><body> <p>O texto deste parágrafo deverá ficar centralizado.</p> <p>Este também.</p></body></html>
  38. 38. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="pt-bt" xml:lang="pt-br"><head> <title>TÍTULO DA PÁGINA</title></head><body> <p style="text-align:center;">O texto deste parágrafo deverá ficarcentralizado.</p> <p>Este não será centralizado.</p></body></html>
  39. 39. 49Prioridade das Regras CSS
  40. 40. 50
  41. 41. 51
  42. 42. seletor { propriedade: valor !important} 52
  43. 43. Eu escrevi um parágrafo. Eu escrevi um parágrafo. Eu escrevi um parágrafo.body { <body> font-family: verdana, arial, helvetica, sans-serif; <div id="conteudo"> font-size: 9px; <p class=“destaque">} Eu escrevi um parágrafo.#conteudo p.destaque { </p> color: #0f0; /* Cor verde */} <p>#conteudo p { Eu escrevi um parágrafo. color: #00f; /* Cor azul */ </p> font-size: 18px; </div>}p{ <p> color: #f00; /* Cor vermelha */ Eu escrevi um parágrafo. font-size: 26px; </p>} </body> 53
  44. 44. 54
  45. 45. Calcular a especificidade1°) Conte o número (quantidade)de atributos id no seletor;2°) Conte o número (quantidade)de atributos classe no seletor;3°) Conte o número (quantidade)de tags HTML no seletor;4°) Escreva os números obtidos,da esquerda para a direita e na mesmaordem em que foram levantados (id,classe,tag).Exemplos:1-) Nesta regra #conteudo p.destaque {...temos-->uma id, uma classe e uma tag HTML2-) Nesta regra p span.destaque {...temos--> zero id, uma classe e duas tags HTMLPontuação da primeira regra = 111Pontuação da segunda regra = 012Havendo empate na pontuação vale o efeito cascata.A última regra declarada prevalece. 55
  46. 46. 56Tipos de Mídia
  47. 47. Tipos de Mídia
  48. 48. Tipos de Media Screen • Monitores de computadores pessoais;Embossed • Impressoras Braille; Print • Impressoras convencionais; • Leitores de tela para deficientes visuais como DOSVOX e Aural JAWS; Braile • Monitores em Braille; TV • TV Digital; TTY • Dispositivos limitados (sem aplicação prática atualmente);Handheld • Aparelhos móveis como celulares e Palm Tops; • Transforma o conteúdo do site em uma apresentaçãoProjection Powerpoint (só funciona no Opera atualmente).
  49. 49. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="pt-bt" xml:lang="pt-br"><head> <title>TÍTULO DA PÁGINA</title> <link type="text/css" href="screen.css" media="screen" /> <link type="text/css" href="print.css" media="print" /> <link type="text/css" href="handheld.css" media="handheld" /></head><body> <h1>TÍTULO DA SEÇÃO</h1> <p>CONTEÚDO</p></body></html>
  50. 50. 63
  51. 51. 64

×