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.

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>

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

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.

31. DIVIDINDO
UM SITE

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