Post on 13-Jun-2015
description
INTRODUÇÃO DO CSS NO WEBDESIGNRENATO MELO - 2014
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!
FAÇA A DIVISÃO DO SITES: FARMRIO.COM.BR OU APPLE.COM/IPHONE
FACEBOOK.COM/RENATOMELOMKT
renato@iskadigital.com.br