CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN

1,411 views

Published on

Aula prática de CSS para alunos de Webdesign.

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,411
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
218
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN

  1. 1. CSS NA PRÁTICA - WEBDESIGN RENATO MELO - 2014
  2. 2. Programação em Três Partes Html: Conteúdo CSS: Estilo Javascript: Inteligência
  3. 3. nome Define um estilo único para um elemento: body, h1...
  4. 4. #nome Define um estilo único para um identificador
  5. 5. .nome Define um estilo único para uma classe, que pode ser utilizada qualquer hora.
  6. 6. Textos Links Estilo: Fonte Cores Alinhamhento Etc... PRINCIPAL DIFERENÇA DO HTML E DO CSS
  7. 7. #TRABALHO INDV. 04.04 EXERCÍCIO PREPARATÓRIO
  8. 8. INFORMAÇÕES ÚTEIS
  9. 9. 3. ABRA O HTML E O CSS NO BLOCO DE NOTAS 1. DESCOMPACTE SEMPRE TUDO NA MESMA PASTA 2. ABRA O HTML NO NAVEGADOR
  10. 10. 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
  11. 11. SALVE O HTML OU CSS NO BLOCO DE NOTAS QUER VER COMO ESTÁ INDO AS ALTERAÇÕES? PRESSIONE A TECLA F5 NO NAVEGADOR
  12. 12. QUER ACHAR ALGO NO SEU CÓDIGO? Editar - Localizar
  13. 13. ATENÇÃO: Na Direção, cuidado com Acima e Abaixo
  14. 14. DIV: O nome da DIV sempre será o correspondente no css
  15. 15. renatomelomkt.com.br/esamc/bombril.zip
  16. 16. #ALTERAR 1. NO MENU: ALTERAR HOME PARA BOMBRIL
  17. 17. #ALTERAR 2. NA CHAMADA, ALTERAR PROMOÇÃO PARA CONCURSO
  18. 18. #ALTERAR 3. ALTERAR A COR DOS TEXTOS ABAIXO DOS ITENS: FACEBOOK, E-MAIL E SMS DE CINZA PARA BRANCO #FFF
  19. 19. #ALTERAR 4. TROCAR O LINK DO FACEBOOK DA BOMBRIL! DE /BOMBRIL PARA /BOMBRILOFICIAL
  20. 20. #ALTERAR 5. ALTERAR A COR DO RODAPÉ DE VERMELHO PARA PRETO: #000
  21. 21. FANTA: renatomelomkt.com.br/esamc/fanta.zip
  22. 22. 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
  23. 23. 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”;
  24. 24. renatomelomkt.com.br/esamc/lacta.zip LACTA:
  25. 25. 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
  26. 26. 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
  27. 27. #ENTREGA ENVIE PARA: renatomelo85@gmail.com
  28. 28. #PRÉVIA 03 O HTML5 NA WEB Leia o artigo e faça uma análise daLeia o artigo e faça uma análise da importância da programação em HTML5importâ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/
  29. 29. #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
  30. 30. FACEBOOK.COM/ RENATOMELOMKT renato@iskadigital.com.br

×