O slideshow foi denunciado.

Aula 4 e 5 css e java script

489 visualizações

Publicada em

CSS e JavaScript

Publicada em: Educação
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Aula 4 e 5 css e java script

  1. 1. DESENVOLVIMENTO DE APLICAÇÕES PARA WEB PROF. ANDRÉ COSTA CSS e JavaScript andre.costa@pro.unifacs.br
  2. 2. CSS   •  CSS - Cascading Style Sheets •  É uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.
  3. 3. CSS   •  “Folha de estilo em cascata é um mecanismo simples para adicionar estilos (p.ex., fontes, cores, espaçamentos) aos documentos Web.” Maujor (o dinossauro da CSS) http://www.maujor.com/
  4. 4. CSS   •  Tipos de CSS •  Linkadas ou Importadas •  Incorporadas •  Inline
  5. 5. CSS   •  Linkadas ou Importadas
  6. 6. CSS   •  Linkadas ou Importadas
  7. 7. CSS   •  Incorporadas
  8. 8. CSS   •  Inline
  9. 9. CSS   •  Exemplo
  10. 10. CSS   •  Sintaxe seletor { propriedade: valor; } seletor_2 { propriedade_1: valor; propriedade_2: valor; }
  11. 11. CSS   •  Seletores (principais) tag {} •  Ex.: table { background-color: #cdcdcd; text-align: center; }
  12. 12. CSS   •  Seletores (principais) #id {} •  Ex.: #id_tabela { background-color: #cdcdcd; text-align: center; } •  <table id=“id_tabela”></table>
  13. 13. CSS   •  Seletores (principais) .classe {} •  Ex.: .classe_tabela { background-color: #cdcdcd; text-align: center; } •  <table class=“classe_tabela”></table>
  14. 14. CSS   •  Seletores (principais) tag_pai tag_filho {} •  Ex.: table tr td { color: #FF0000; } •  <table> <tr> <td>Texto modificado</td> </tr> <tr> <td>Texto modificado</td> </tr> </table>
  15. 15. CSS   •  Seletores (principais) tag_pai tag_filho.classe {} •  Ex.: table tr td.textoVermelho { color: #FF0000; } •  <table> <tr> <td>Texto</td> </tr> <tr> <td class=“textoVermelho”>Texto modificado</td> </tr> </table>
  16. 16. CSS   •  Propriedades •  Font
  17. 17. CSS   •  Propriedades •  Text
  18. 18. CSS   •  Propriedades •  Margin
  19. 19. CSS   •  Propriedades •  Border
  20. 20. CSS   •  Propriedades •  Padding
  21. 21. CSS   •  Propriedades •  Background
  22. 22. CSS   •  Propriedades •  List
  23. 23. CSS   Mão  na  massa!       Crie  uma  folha  de  es/lo  para  o  layout  criado   com  HTML.  
  24. 24. CSS   Mão  na  massa!       Pra/que!!  Agora  que  tem  o  conhecimento  de   HTML  e  CSS,  desenvola  o  seu  próprio  site.  
  25. 25. JS   •  JS - JavaScript •  É uma linguagem client-side baseada no ECMAScript para navegadores web. •  Dá mais inteligência às páginas web •  Dá suporte a Orientação a Objetos (OO) •  Sintaxe semelhante à PHP, JAVA, C/C++, etc.
  26. 26. JS   •  Como utilizar? •  Incorporado ao HTML
  27. 27. JS   •  Como utilizar? •  Importado de um arquivo JavaScript
  28. 28. JS   •  Exemplo
  29. 29. JS   •  Exemplo
  30. 30. JS   •  Exemplo
  31. 31. JS   •  Função
  32. 32. JS   •  Interagindo com HTML (DHTML)
  33. 33. JS   •  Interagindo com HTML (DHTML) •  onClick •  onChange •  onSubmit •  onBlur / onFocus •  onMouseOver / onMouseOut •  onKeyPress / onKeyDown / onKeyUp
  34. 34. JS   •  Interagindo com HTML (DHTML) •  document.getElementById(“id”).value •  document.getElementById(“id”).innerHTML •  document.getElementById(“id”).src •  document.getElementById(“id”).style.display
  35. 35. JS  
  36. 36. JS   •  jQuery •  É um framework JavaScript amplamente utilizado que fornece diversos componentes prontos para os usuários. Vale a pena estudar o jQuery!!!
  37. 37. JS   Mão  na  massa!       Pra/que!!  Agora  que  você  conhece  JavaScript,   faça  a  validação  da  página  de  cadastro  na   Agenda  desenvolvida  em  sala  de  aula.  

×