css na prÁtica para alunos de webdesign
DESCRIPTION
Aula prática de CSS para alunos de Webdesign.TRANSCRIPT
CSS NA PRÁTICA - WEBDESIGNRENATO MELO - 2014
Programação em Três Partes
Html: Conteúdo
CSS: Estilo
Javascript: Inteligência
nomeDefine um estilo único para um elemento: body, h1...
#nomeDefine um estilo único para um identificador
.nomeDefine um estilo único para uma classe, que pode ser utilizada qualquer hora.
TextosLinks
Estilo:FonteCoresAlinhamhentoEtc...
PRINCIPAL DIFERENÇA DO HTML E DO CSS
#TRABALHOINDV. 04.04
EXERCÍCIO PREPARATÓRIO
INFORMAÇÕESÚTEIS
3. ABRA O HTML E O CSS NO BLOCO DE NOTAS
1. DESCOMPACTE SEMPRE TUDO NA MESMA PASTA
2. ABRA O HTML NO NAVEGADOR
1. ABRA O BLOCO DE NOTAS
2. VÁ EM ABRIR
3. VÁ NA PASTA DOS SEUS ARQUIVOS
4. SELECIONE PARA ABRIR TODOS OS ARQUIVOS PARA APARECER O HTML E CSS
PARA ABRIR OS ARQUIVOS NO BLOCO DE NOTAS
SALVE O HTML OU CSS NO BLOCO DE NOTAS
QUER VER COMO ESTÁ INDO AS ALTERAÇÕES?
PRESSIONE A TECLA F5 NO NAVEGADOR
QUER ACHAR ALGO NO SEU CÓDIGO? Editar - Localizar
ATENÇÃO:Na Direção, cuidado com Acima e Abaixo
DIV:O nome da DIV sempre será o correspondente no css
renatomelomkt.com.br/esamc/bombril.zip
#ALTERAR
1. NO MENU: ALTERAR HOME PARA BOMBRIL
#ALTERAR
2. NA CHAMADA, ALTERAR PROMOÇÃO PARA CONCURSO
#ALTERAR3. ALTERAR A COR DOS TEXTOS ABAIXO DOS ITENS: FACEBOOK, E-MAIL E SMS DE CINZA PARA BRANCO #FFF
#ALTERAR4. TROCAR O LINK DO FACEBOOK DA BOMBRIL! DE /BOMBRIL PARA /BOMBRILOFICIAL
#ALTERAR
5. ALTERAR A COR DO RODAPÉ DE VERMELHO PARA PRETO: #000
FANTA:renatomelomkt.com.br/esamc/
fanta.zip
ALUNOSAMANDHA FRANÇA BELO RIBEIROANGELICA ULITZKA RODRIGUESARIÉCIA ASSUNÇÃOBRUNA PEREIRABRUNO FERNANDES NASCIMENTOELIS DOS SANTOS TAVARESFERNANDO RODOLFO DE OLIVEIRA JUNIORGUILHERME MARZANOHUGO VICENTE FERREIRAINGRID ELOY GASPARJEFFERSON ALLAN BORGESJULIANA DE OLIVEIRA ANDRADEKELLY CRISTINA ROCHA DE MOURALEONARDO TOSHIRO NAKAILINDSEY SOREN DOS SANTOS REGO LUANA MAGALHÃES FIGUEIREDO LUCIANA CÂMARA MEDEIROS
ARRUMAR:1)No menu, alterar “Romi” para Home2)Na chamada, corrigir “Promossão”3)Alterar a cor do texto “Aqui você encontra...” para branco: #fff4)Alterar a fonte do mesmo texto para 18px5)Alterar o link do facebook para a fanpage da Fanta6)Alterar a cor do texto dos itens (facebook, sms, etc) de branco para #56585b7)Alterar a fonte do texto dos itens de Comic Sans para Trebuchet, ficando: “Trebuchet, Arial, Verdana”;
renatomelomkt.com.br/esamc/lacta.zip
LACTA:
ALUNOSLUIZ RICARDO DOS SANTOSMARCELO HENRIQUE DA SILVAMARIANA DIAS DA SILVA NOVAESMARINA BUCHEDPATRÍCIA PRETELPEDRO HENRIQUERAONY VIANARAQUEL DE ALMEIDA CHAIMRENAN SIMÕES NASCIMENTORENATO JUNQUEIRATAMMY GABRIELE OLIVEIRATHAIS GANDRA DE AMORIMVANESSA BASTOS NUNESVINÍCIUS GARCIA BELAWAGNER DE ABREU FERNANDOWILLIAN MENDES
ARRUMAR:1)No menu, alterar “Promu” para Promo2)Na chamada, colocar “Promoção Lacta e Você”3)Alterar a cor do texto da Promoção Lacta de verde para # 27509c;4)Arrumar o texto “Aki você...” para o português correto.5)Alterar o link do facebook para a fanpage da Lacta6)Alterar a cor do texto dos itens (facebook, sms, etc) de branco para #56585b7)Alterar a cor de fundo do rodapé de laranja para # 27509c
#PRÉVIA 03O HTML5 NA WEB
Leia o artigo e faça uma análise da Leia o artigo e faça uma análise da importância da programação em importância da programação em HTML5 para as vendas online: HTML5 para as vendas online: http://www.e-smart.com.br/blog/http://www.e-smart.com.br/blog/
evolucao-html5-participacao-commerce/evolucao-html5-participacao-commerce/
#PRÉVIA 03REGRINHAS BÁSICAS
Enviar para o e-mail: Enviar para o e-mail: [email protected]@gmail.com
1- Até 21.03 às 18h30 – 100% VALOR1- Até 21.03 às 18h30 – 100% VALOR2- Até 28.03 às 18h30 – 50% VALOR2- Até 28.03 às 18h30 – 50% VALOR
3- APÓS ÀS 18H30 DO DIA 28.03 = 0% 3- APÓS ÀS 18H30 DO DIA 28.03 = 0% VALORVALOR
