css exerccio

Prévia do material em texto

CSS NA 
PRÁTICA - 
WEBDESIGN
RENATO MELO - 2014
Programação 
em Três Partes
Html: Conteúdo
CSS: Estilo
Javascript: 
Inteligência
nome
Define um estilo único para 
um elemento: body, h1...
#nome
Define um estilo único 
para um identificador
.nome
Define um estilo único para 
uma classe, que pode ser 
utilizada qualquer hora.
Textos
Links
Estilo:
Fonte
Cores
Alinhamhento
Etc...
PRINCIPAL DIFERENÇA DO HTML E DO CSS
#TRABALHO
INDV. 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
#ALTERAR
3. ALTERAR A COR DOS 
TEXTOS ABAIXO DOS ITENS: 
FACEBOOK, E-MAIL E SMS 
DE CINZA PARA BRANCO 
#FFF
#ALTERAR
4. 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
ALUNOS
AMANDHA FRANÇA BELO RIBEIRO
ANGELICA ULITZKA RODRIGUES
ARIÉCIA ASSUNÇÃO
BRUNA PEREIRA
BRUNO FERNANDES NASCIMENTO
ELIS DOS SANTOS TAVARES
FERNANDO RODOLFO DE OLIVEIRA JUNIOR
GUILHERME MARZANO
HUGO VICENTE FERREIRA
INGRID ELOY GASPAR
JEFFERSON ALLAN BORGES
JULIANA DE OLIVEIRA ANDRADE
KELLY CRISTINA ROCHA DE MOURA
LEONARDO TOSHIRO NAKAI
LINDSEY SOREN DOS SANTOS REGO 
LUANA MAGALHÃES FIGUEIREDO 
LUCIANA CÂMARA MEDEIROS
ARRUMAR:
1)No menu, alterar “Romi” para Home
2)Na chamada, corrigir “Promossão”
3)Alterar a cor do texto “Aqui você encontra...” para 
branco: #fff
4)Alterar a fonte do mesmo texto para 18px
5)Alterar o link do facebook para a fanpage da Fanta
6)Alterar a cor do texto dos itens (facebook, sms, etc) de 
branco para #56585b
7)Alterar a fonte do texto dos itens de Comic Sans para 
Trebuchet, ficando: “Trebuchet, Arial, Verdana”;
renatomelomkt.com.br/esamc/lacta.zip
LACTA:
ALUNOS
LUIZ RICARDO DOS SANTOS
MARCELO HENRIQUE DA SILVA
MARIANA DIAS DA SILVA NOVAES
MARINA BUCHED
PATRÍCIA PRETEL
PEDRO HENRIQUE
RAONY VIANA
RAQUEL DE ALMEIDA CHAIM
RENAN SIMÕES NASCIMENTO
RENATO JUNQUEIRA
TAMMY GABRIELE OLIVEIRA
THAIS GANDRA DE AMORIM
VANESSA BASTOS NUNES
VINÍCIUS GARCIA BELA
WAGNER DE ABREU FERNANDO
WILLIAN MENDES 
ARRUMAR:
1)No menu, alterar “Promu” para Promo
2)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 Lacta
6)Alterar a cor do texto dos itens (facebook, sms, etc) de 
branco para #56585b
7)Alterar a cor de fundo do rodapé de laranja para # 27509c
#ENTREGA
ENVIE PARA:
renatomelo85@gmail.com
#PRÉVIA 03
O 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 HTML5 importância da programação em HTML5 
para as vendas online: para as vendas online: 
http://www.e-smart.com.br/blog/evolucao-http://www.e-smart.com.br/blog/evolucao-
html5-participacao-commerce/html5-participacao-commerce/
#PRÉVIA 03
REGRINHAS BÁSICAS
Enviar para o e-mail: Enviar para o e-mail: 
renatomelo85@gmail.comrenatomelo85@gmail.com
1- Até 21.03 às 18h30 – 100% VALOR1- Até 21.03 às 18h30 – 100% VALOR
2- Até 28.03 às 18h30 – 50% VALOR2- Até 28.03 às 18h30 – 50% VALOR
3- APÓS ÀS 18H30 DO DIA 28.03 = 0% VALOR3- APÓS ÀS 18H30 DO DIA 28.03 = 0% VALOR
FACEBOOK.COM/
RENATOMELOMKT
renato@iskadigital.com.br