INTRODUÇÃO DO CSS NO WEBDESIGN

RENATO MELO - 2015

Antigamente: Site com emaranhado de tags, estilos e

formatações

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

por página.

Programação em Três Partes

Html: Conteúdo

CSS: Estilo

Javascript: Inteligência

SEM PADRÕES

✗ Extensão da Mídia Impressa

✗ Layout baseado em Tabelas

✗ Conteúdo, Apresentação e Comportamento “aninhados”

✗ Código Incompreensível

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

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

Prazer CSS

nomeDefine um estilo único para um elemento: body, h1...

TÉCNICOParte mais importante

#nomeDefine um estilo único para um identificador

#TIMESeguem as ordens do técnico

.nomeDefine um estilo único para uma classe, que pode ser utilizada qualquer hora.

.jogadorJoga para o #time

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;

}

PADRÃO DE CORES

COR HEXÉ a cor do #

As Fontes também merecem atenção

Exemplos de fontes:Arial, Calibri, VerdanaTrebuchet, Times New Roman...

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

NA PRÁTICA:

Letras minúsculas

Errado:<DIV><P>Aqui um texto!</P></DIV>

Correto:<div><p>Aqui um texto!</p></div>

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>

NA PRÁTICA:

Feche todos os comandos

Errado:<p>Um parágrafo.

Correto:<p>Um parágrafo.</p>

NO CSS E DO HTML:Definido pelo # ou .

Exemplo:

-no CSS: #header {width:900px;}

- no HTML:<div id=“header”>…</div>

ANOTE SUAS OBSERVAÇÕES

/* Comentário */

DIVIDINDO UM SITE

#topo

#bemvindo

#login

#cabecalho

#logo

#box-procura

#menu

#destaque

#slider

AGORA FAÇA VOCÊ MESMO!

AULA QUE VEM!COMEÇAR A

PRODUÇÃO DO SITE! TRAZER SUA

IMAGINAÇÃO + MATERIAL: Exemplo: cartolina + tintas +

canetinhas + água + giz de cera.

ESTA AULA ESTÁDISPONÍVEL EM:renatomelo.com.br/slides

ou no grupo do Facebook:bit.ly/gruporenato