Post on 01-Jul-2015
Web Design na
China
Por: Smashing Magazine
O peso do Flash
Shanghai Vive (cosmetics)
Cool Bear Hi (motors)
Mian Dian Fang (breakfast)
Youguan Cookies
Shoebox (shoes brand)
Desing para entretenimento
Lipton Milk Tea (hug game)
M&M China (game)
Moliyo MFM (online videogame)
Desing para “cliques”
Yoho (online shopping for youngin)
China Visual (graphic design resources)
NetEase (news portal)
Desing Cultural
Pizza Hut China
Mc Donalds China
Tong2Studio (graphic design)
Dongpai Design (design studio)
E mais...
The GF Space (design agency)
Shaopan Film Studio
Jossy Jo (clothing brand)
Mole Lele (cartoonist)
Aula 12 – Camada de Apresentação prof. Ticianne Ribeiro
28
Introdução ao CSS
29
30
Sintaxe Básica do CSS
34
36
seletor { propriedade: valor; }
p {
font-size: 12px; /* ponto-e-vírgula é facultativo */
}
h3 {
font-family: "Comic Sans MS";
}
body {
color: #000;
background: #fff;
font-weight: bold; /*ponto-e-vírgula é facultativo */
}
h1, h2, h3, h4, h5, h6 {
color: #0f0;
}
37
elemento.minhaClasse
{ propriedade: valor; }
.minhaClasse
{ propriedade: valor; }
p.aboutMe {
font-size: 15px;
font-family: “Times New Roman“;
font-weight: bold; text-align: right;
}
<p class =“about Me">
Não presto. Irônico, sarcástico, ansioso, romântico, egoísta, excêntrico, anti social, junto com todos aqueles clichês de quem não quer se igual aos outros.. </p>
38
Não presto. Irônico, sarcástico, ansioso, romântico,
egoísta, excêntrico, anti social, junto com todos
aqueles clichês de quem não quer se igual aos outros..
39
#meuID
{ propriedade: valor; }
#topTitle{
font-size: 35px;
font-family: “Verdana“;
}
<h1 id =“topTitle">
Welcome to the jungle! </h1>
40
Welcome to the jungle!
Como vincular o CSS ao XHTML
41
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"
xml:lang="pt-br">
<head>
<title>TÍTULO DA PÁGINA</title>
<link type="text/css" href="seuarquivo.css" media="screen" />
</head>
<body>
<h1>TÍTULO DA SEÇÃO</h1>
<p>CONTEÚDO</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-bt" xml:lang="pt-br">
<head>
<title>TÍTULO DA PÁGINA</title>
<style type="text/css" media="screen">
p { text-align:center; }
</style>
</head>
<body>
<p>O texto deste parágrafo deverá ficar centralizado.</p>
<p>Este também.</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-bt" xml:lang="pt-br">
<head>
<title>TÍTULO DA PÁGINA</title>
</head>
<body>
<p style="text-align:center;">O texto deste parágrafo deverá ficar
centralizado.</p>
<p>Este não será centralizado.</p>
</body>
</html>
Prioridade das Regras CSS
49
50
51
52
seletor { propriedade: valor !important}
53
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 9px;
}
#conteudo p.destaque {
color: #0f0; /* Cor verde */
}
#conteudo p {
color: #00f; /* Cor azul */
font-size: 18px;
}
p {
color: #f00; /* Cor vermelha */
font-size: 26px;
}
<body>
<div id="conteudo">
<p class=“destaque">
Eu escrevi um parágrafo.
</p>
<p>
Eu escrevi um parágrafo.
</p>
</div>
<p>
Eu escrevi um parágrafo.
</p>
</body>
Eu escrevi um parágrafo.
Eu escrevi um parágrafo.
Eu escrevi um parágrafo.
54
55
Calcular a especificidade
1°) Conte o número (quantidade)
de atributos id no seletor;
2°) Conte o número (quantidade)
de atributos classe no seletor;
3°) Conte o número (quantidade)
de tag's HTML no seletor;
4°) Escreva os números obtidos,
da esquerda para a direita e na mesma
ordem em que foram levantados (id,classe,tag).
Exemplos:
1-) Nesta regra #conteudo p.destaque {...
temos-->uma id, uma classe e uma tag HTML
2-) Nesta regra p span.destaque {...
temos--> zero id, uma classe e duas tag's HTML
Pontuação da primeira regra = 111
Pontuação da segunda regra = 012
Havendo empate na pontuação vale o efeito cascata.
A última regra declarada prevalece.
Tipos de Mídia
56
Tipos de Mídia
Tipos de Media
• Monitores de computadores pessoais; Screen
• Impressoras Braille; Embossed
• Impressoras convencionais; Print
• Leitores de tela para deficientes visuais como DOSVOX e JAWS; Aural
• Monitores em Braille; Braile
• TV Digital; TV
• Dispositivos limitados (sem aplicação prática atualmente); TTY
• Aparelhos móveis como celulares e Palm Tops; Handheld
• Transforma o conteúdo do site em uma apresentação Powerpoint (só funciona no Opera atualmente). Projection
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-bt" xml:lang="pt-br">
<head>
<title>TÍTULO DA PÁGINA</title>
<link type="text/css" href="screen.css" media="screen" />
<link type="text/css" href="print.css" media="print" />
<link type="text/css" href="handheld.css" media="handheld" />
</head>
<body>
<h1>TÍTULO DA SEÇÃO</h1>
<p>CONTEÚDO</p>
</body>
</html>
63
64