Transferir como PDF, PPTX
Aula 4 e 5 css e java script
- 1. DESENVOLVIMENTO DE APLICAÇÕESPARA WEB PROF. ANDRÉ COSTA CSS e JavaScript andre.costa@pro.unifacs.br
- 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. CSS • “Folhade 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. CSS • Tiposde CSS • Linkadas ou Importadas • Incorporadas • Inline
- 5. CSS • Linkadasou Importadas
- 6. CSS • Linkadasou Importadas
- 7.
- 8.
- 9.
- 10. CSS • Sintaxe seletor{ propriedade: valor; } seletor_2 { propriedade_1: valor; propriedade_2: valor; }
- 11. CSS • Seletores(principais) tag {} • Ex.: table { background-color: #cdcdcd; text-align: center; }
- 12. CSS • Seletores(principais) #id {} • Ex.: #id_tabela { background-color: #cdcdcd; text-align: center; } • <table id=“id_tabela”></table>
- 13. CSS • Seletores(principais) .classe {} • Ex.: .classe_tabela { background-color: #cdcdcd; text-align: center; } • <table class=“classe_tabela”></table>
- 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. 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. CSS • Propriedades • Font
- 17. CSS • Propriedades • Text
- 18. CSS • Propriedades • Margin
- 19. CSS • Propriedades • Border
- 20. CSS • Propriedades • Padding
- 21. CSS • Propriedades • Background
- 22. CSS • Propriedades • List
- 23. CSS Mão na massa! Crie uma folha de es/lo para o layout criado com HTML.
- 24. CSS Mão na massa! Pra/que!! Agora que tem o conhecimento de HTML e CSS, desenvola o seu próprio site.
- 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. JS • Comoutilizar? • Incorporado ao HTML
- 27. JS • Comoutilizar? • Importado de um arquivo JavaScript
- 28.
- 29.
- 30.
- 31.
- 32. JS • Interagindocom HTML (DHTML)
- 33. JS • Interagindocom HTML (DHTML) • onClick • onChange • onSubmit • onBlur / onFocus • onMouseOver / onMouseOut • onKeyPress / onKeyDown / onKeyUp
- 34. JS • Interagindocom HTML (DHTML) • document.getElementById(“id”).value • document.getElementById(“id”).innerHTML • document.getElementById(“id”).src • document.getElementById(“id”).style.display
- 35.
- 36. JS • jQuery • É um framework JavaScript amplamente utilizado que fornece diversos componentes prontos para os usuários. Vale a pena estudar o jQuery!!!
- 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.