css básico para webdesign
TRANSCRIPT
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