CSS: Introdução no Webdesign
-
Upload
renato-melo -
Category
Documents
-
view
277 -
download
1
description
Transcript of CSS: Introdução no Webdesign
![Page 1: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/1.jpg)
INTRODUÇÃO DO CSS NO WEBDESIGNRENATO MELO - 2014
![Page 2: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/2.jpg)
Antigamente: Site com
emaranhado de tags, estilos e
formatações
![Page 3: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/3.jpg)
Se o cliente pedisse alteração
você tinha que alterar página
por página.
![Page 4: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/4.jpg)
![Page 5: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/5.jpg)
Programação em Três Partes
Html: Conteúdo
CSS: Estilo
Javascript: Inteligência
![Page 6: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/6.jpg)
SEM PADRÕES
✗ Extensão da Mídia Impressa
✗ Layout baseado em Tabelas
✗ Conteúdo, Apresentação e Comportamento “aninhados”
✗ Código Incompreensível
![Page 7: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/7.jpg)
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
![Page 8: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/8.jpg)
VANTAGENSCarregamento mais rápido
Menores custos com hospedagem
Melhor Consistência Visual
Redesign mais barato e eficiente
Melhores resultados nos Mecanismos de Buscas
Maior acessibilidade
![Page 9: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/9.jpg)
Prazer CSS
![Page 10: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/10.jpg)
nomeDefine um estilo único para um elemento: body, h1...
TÉCNICOParte mais importante
![Page 11: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/11.jpg)
#nomeDefine um estilo único para um identificador
#TIMESeguem as ordens do técnico
![Page 12: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/12.jpg)
.nomeDefine um estilo único para uma classe, que pode ser utilizada qualquer hora.
.jogadorJoga para o #time
![Page 13: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/13.jpg)
Exemplobody{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;
}
![Page 14: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/14.jpg)
PADRÃO DE
CORES
![Page 15: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/15.jpg)
COR HEXÉ a cor do #
![Page 16: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/16.jpg)
As Fontes também merecem atenção
![Page 17: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/17.jpg)
Exemplos de fontes:Arial, Calibri, VerdanaTrebuchet, Times New Roman...
![Page 18: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/18.jpg)
Pode-se colocar mais de uma fonte + opção de “Sans-serif” ou “Serif”
![Page 19: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/19.jpg)
NA PRÁTICA:
Letras minúsculas
Errado:<DIV><P>Aqui um texto!</P></DIV>
Correto:<div><p>Aqui um texto!</p></div>
![Page 20: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/20.jpg)
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>
![Page 21: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/21.jpg)
NA PRÁTICA:
Feche todos os comandos
Errado:<p>Um parágrafo.
Correto:<p>Um parágrafo.</p>
![Page 22: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/22.jpg)
NO CSS E DO HTML:
Definido pelo # ou .
Exemplo:
-no CSS: #header {width:900px;}
- no HTML:<div id=“header”>…</div>
![Page 23: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/23.jpg)
ANOTE SUAS OBSERVAÇÕES
/* Comentário */
![Page 24: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/24.jpg)
DIVIDINDO UM SITE
![Page 25: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/25.jpg)
![Page 26: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/26.jpg)
#topo
![Page 27: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/27.jpg)
#bemvindo
![Page 28: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/28.jpg)
#login
![Page 29: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/29.jpg)
#cabecalho
![Page 30: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/30.jpg)
#logo
![Page 31: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/31.jpg)
#box-procura
![Page 32: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/32.jpg)
#menu
![Page 33: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/33.jpg)
#destaque
![Page 34: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/34.jpg)
#slider
![Page 35: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/35.jpg)
AGORA FAÇA VOCÊ
MESMO!
![Page 36: CSS: Introdução no Webdesign](https://reader035.fdocuments.net/reader035/viewer/2022062419/557b4e63d8b42a13388b5302/html5/thumbnails/36.jpg)
FAÇA A DIVISÃO DO SITES: FARMRIO.COM.BR OU APPLE.COM/IPHONE