O documento introduz o CSS no webdesign, discutindo como o CSS separa conteúdo, estilo e comportamento, trazendo vantagens como carregamento mais rápido, menores custos e melhor acessibilidade. É explicado como o CSS define estilos para elementos, identificadores e classes, além de dicas de boas práticas em HTML e CSS.

1. INTRODUÇÃO DO
CSS NO WEBDESIGN
WEBDESIGN 2021 – RENATO MELO

2. Antigamente: Site
com emaranhado
de tags, estilos e
formatações

3. Se o cliente pedisse
alteração você tinha
que alterar página
por página.

5. Programação
em Três Partes
Html: Conteúdo
CSS: Estilo
Javascript:
Inteligência

6. SEM PADRÕES
✗ Extensão da Mídia Impressa
✗ Layout baseado em Tabelas
✗ Conteúdo, Apresentação e
Comportamento “aninhados”
✗ Código Incompreensível

7. 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

8. 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

9. Prazer CSS

10. nome
Define um estilo único para
um elemento: body, h1...
TÉCNICO
Parte mais
importante

11. #nome
Define um estilo único
para um identificador
#TIME
Seguem as
ordens do técnico

12. .nome
Define um estilo único para
uma classe, que pode ser
utilizada qualquer hora.
.jogador
Joga para o
#time

13. 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;
}

14. PADRÃO
DE CORES

15. COR HEX
É a cor do #

16. As Fontes também
merecem atenção

17. Exemplos de fontes:
Arial, Calibri, Verdana
Trebuchet, Times New
Roman...

18. Pode-se colocar mais de
uma fonte + opção de
“Sans-serif” ou “Serif”

19. NA PRÁTICA:
Letras minúsculas
Errado:
<DIV><P>Aqui um texto!</P></DIV>
Correto:
<div><p>Aqui um texto!</p></div>

20. 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>

21. NA PRÁTICA:
Feche todos os comandos
Errado:
<p>Um parágrafo.
Correto:
<p>Um parágrafo.</p>

22. NO CSS E DO HTML:
Definido pelo # ou .
Exemplo:
-no CSS: #header {width:900px;}
- no HTML:
<div id=“header”>…</div>

23. ANOTE SUAS
OBSERVAÇÕES
/* Comentário */

24. WIREFRAME

25. WIREFRAME

26. WIREFRAME

27. 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.

28. 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.

29. 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.

30. DIVIDINDO
UM SITE

32. #topo

33. #bemvindo

34. #login

35. #cabecalho

36. #logo

37. #box-procura

38. #menu

39. #destaque

40. #slider

41. ACESSE O SITE DA
ESAMC E FAÇA SUA
DIVISÃO
ESTRUTURAL

42. INTRODUÇÃO DO
CSS NO WEBDESIGN
WEBDESIGN 2021 – RENATO MELO