CSS No Webdesign - Aula 06 - Webdesign - 2020-01
Transferir como PPT, PDF0 gostou140 visualizações
O documento introduz os conceitos de CSS no webdesign, explicando como o CSS separa o conteúdo da apresentação e comportamento em uma página da web, trazendo vantagens como carregamento mais rápido, menores custos e melhor acessibilidade. Também apresenta os principais seletores e propriedades CSS como body, id, classe e cores hexadecimais, além de recomendar o uso de wireframes no início do desenvolvimento para estabelecer a estrutura básica de um site.
CSS No Webdesign - Aula 06 - Webdesign - 2020-01
- 1. INTRODUÇÃO DO CSS NO WEBDESIGN WEBDESIGN 2020 – RENATO MELO
- 2. Na aula passada: Site não é photoshop, é projeto!
- 3. Antigamente: Site com emaranhado de tags, estilos e formatações
- 4. Se o cliente pedisse alteração você tinha que alterar página por página.
- 6. Programação em Três Partes Html: Conteúdo CSS: Estilo Javascript: Inteligência
- 7. SEM PADRÕES ✗ Extensão da Mídia Impressa ✗ Layout baseado em Tabelas ✗ Conteúdo, Apresentação e Comportamento “aninhados” ✗ Código Incompreensível
- 8. COM PADRÕES ✔ Acessível de qualquer dispositivo ✔ Layout baseado em CSS ✔ Separação entre Conteúdo, Apresentação e Comportamento ✔ Código Acessível
- 9. VANTAGENS Carregamento mais rápido Menores custos com hospedagem Melhor Consistência Visual Redesign mais barato e eficiente Melhores resultados nos Mecanismos de Buscas Maior acessibilidade
- 10. Prazer CSS
- 11. nome Define um estilo único para um elemento: body, h1... TÉCNICO Parte mais importante
- 12. #nome Define um estilo único para um identificador #TIME Seguem as ordens do técnico
- 13. .nome Define um estilo único para uma classe, que pode ser utilizada qualquer hora. .jogador Joga para o #time
- 14. Exemplo body{ background: #ccc; font: 12pt Arial, Sans-Serif; color: #000; } #topo{ width: 780px; background: #ccc url(bgtopo.jpg) repeat-x; font-size: 20pt; color: #ff0000; } .produto{ float: right; text-align: center; font-size: 16pt; color: #ff0000; }
- 15. PADRÃO DE CORES
- 16. COR HEX É a cor do #
- 17. As Fontes também merecem atenção
- 18. Exemplos de fontes: Arial, Calibri, Verdana Trebuchet, Times New Roman...
- 19. Pode-se colocar mais de uma fonte + opção de “Sans-serif” ou “Serif”
- 20. NA PRÁTICA: Letras minúsculas Errado: <DIV><P>Aqui um texto!</P></DIV> Correto: <div><p>Aqui um texto!</p></div>
- 21. NA PRÁTICA: Abre e feche os comandos corretamente! Errado: <div><p>Aqui um <em>texto!</p></em></div> Correto: <div><p>Aqui um <em>texto! </em></p></div>
- 22. NA PRÁTICA: Feche todos os comandos Errado: <p>Um parágrafo. Correto: <p>Um parágrafo.</p>
- 23. NO CSS E DO HTML: Definido pelo # ou . Exemplo: -no CSS: #header {width:900px;} - no HTML: <div id=“header”>…</div>
- 25. WIREFRAME
- 26. WIREFRAME
- 27. WIREFRAME
- 28. Em web design, um wireframe ou diagrama de wireframe é uma representação visual em escala de cinza da estrutura e funcionalidade de uma única página web ou uma tela de aplicativo móvel.
- 29. Wireframes são usados no início do processo de desenvolvimento para estabelecer a estrutura básica de uma página antes de acrescentar o design visual e conteúdo, e podem ser criados usando papel, em HTML/CSS ou usando aplicativos de software.
- 30. Wireframes substituem o caráter abstrato do mapa do site, que normalmente é o primeiro passo para o desenvolvimento de sites, com algo mais tangível e compreensível.
- 33. #topo
- 34. #bemvindo
- 35. #login
- 36. #cabecalho
- 37. #logo
- 38. #box-procura
- 39. #menu
- 40. #destaque
- 41. #slider
- 42. ACESSE O SITE DA ESAMC E FAÇA SUA DIVISÃO ESTRUTURAL