CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
-
Upload
renato-melo -
Category
Design
-
view
460 -
download
4
description
Transcript of CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
![Page 1: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/1.jpg)
CSS NA PRÁTICA - WEBDESIGNRENATO MELO - 2014
![Page 2: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/2.jpg)
Programação em Três Partes
Html: Conteúdo
CSS: Estilo
Javascript: Inteligência
![Page 3: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/3.jpg)
nomeDefine um estilo único para um elemento: body, h1...
![Page 4: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/4.jpg)
#nomeDefine um estilo único para um identificador
![Page 5: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/5.jpg)
.nomeDefine um estilo único para uma classe, que pode ser utilizada qualquer hora.
![Page 6: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/6.jpg)
TextosLinks
Estilo:FonteCoresAlinhamhentoEtc...
PRINCIPAL DIFERENÇA DO HTML E DO CSS
![Page 7: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/7.jpg)
#TRABALHOINDV. 04.04
EXERCÍCIO PREPARATÓRIO
![Page 8: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/8.jpg)
INFORMAÇÕESÚTEIS
![Page 9: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/9.jpg)
3. ABRA O HTML E O CSS NO BLOCO DE NOTAS
1. DESCOMPACTE SEMPRE TUDO NA MESMA PASTA
2. ABRA O HTML NO NAVEGADOR
![Page 10: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/10.jpg)
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
![Page 11: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/11.jpg)
SALVE O HTML OU CSS NO BLOCO DE NOTAS
QUER VER COMO ESTÁ INDO AS ALTERAÇÕES?
PRESSIONE A TECLA F5 NO NAVEGADOR
![Page 12: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/12.jpg)
QUER ACHAR ALGO NO SEU CÓDIGO? Editar - Localizar
![Page 13: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/13.jpg)
ATENÇÃO:Na Direção, cuidado com Acima e Abaixo
![Page 14: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/14.jpg)
DIV:O nome da DIV sempre será o correspondente no css
![Page 15: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/15.jpg)
renatomelomkt.com.br/esamc/bombril.zip
![Page 16: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/16.jpg)
#ALTERAR
1. NO MENU: ALTERAR HOME PARA BOMBRIL
![Page 17: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/17.jpg)
#ALTERAR
2. NA CHAMADA, ALTERAR PROMOÇÃO PARA CONCURSO
![Page 18: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/18.jpg)
#ALTERAR3. ALTERAR A COR DOS TEXTOS ABAIXO DOS ITENS: FACEBOOK, E-MAIL E SMS DE CINZA PARA BRANCO #FFF
![Page 19: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/19.jpg)
#ALTERAR4. TROCAR O LINK DO FACEBOOK DA BOMBRIL! DE /BOMBRIL PARA /BOMBRILOFICIAL
![Page 20: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/20.jpg)
#ALTERAR
5. ALTERAR A COR DO RODAPÉ DE VERMELHO PARA PRETO: #000
![Page 21: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/21.jpg)
FANTA:renatomelomkt.com.br/esamc/
fanta.zip
![Page 22: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/22.jpg)
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
![Page 23: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/23.jpg)
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”;
![Page 24: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/24.jpg)
renatomelomkt.com.br/esamc/lacta.zip
LACTA:
![Page 25: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/25.jpg)
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
![Page 26: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/26.jpg)
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
![Page 28: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/28.jpg)
#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/
![Page 29: CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN](https://reader031.fdocumentos.tips/reader031/viewer/2022013108/558c8e1cd8b42a0b268b45ac/html5/thumbnails/29.jpg)
#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