ii oficina de webdesign - lecom
TRANSCRIPT
![Page 1: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/1.jpg)
Um Projeto de e-marketing:Metodologia e Colaboração de Áreas
![Page 2: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/2.jpg)
“ Oficina de Webdesign – Lecom”
![Page 3: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/3.jpg)
BannerFlutuante
Cartõesvirtuais
Hotsite
E-mailmarketing
Campanhason-line
Mídiasalternativas Teaser
Wallpaper
Website
Produtos de WebdesignIntrodução
![Page 4: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/4.jpg)
O que é Web?
• Rede de pesquisadores – troca de textos e imagens
Introdução
Introdução do Maujor
• HTML – tags de marcação
Oficina de Webdesign - Firefox
pagina.htm
Oficina de Webdesign
Parágrafo único da página
<HTML><HEAD><TITLE>Oficina de Webdesign</TITLE></HEAD><BODY><P>Parágrafo único da página</P></BODY></HTML>
![Page 5: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/5.jpg)
Linguagem Web
ConteúdoHTML, PHP, ASP...
Introdução
<BODY><P>Parágrafo único da página</P></BODY>
Oficina de Webdesign - Firefox
pagina.htm
Oficina de Webdesign
Parágrafo único da página
Elementos.swf, .jpg, .gif, .png
<BODY><IMG SRC=“foto.jpg”/></BODY>
Oficina de Webdesign - Firefox
pagina.htm
Oficina de Webdesign
EstiloJavascript e CSS
<BODY style=“background:red”><IMG SRC=“foto.jpg”/></BODY>
Oficina de Webdesign - Firefox
pagina.htm
Oficina de Webdesign
![Page 6: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/6.jpg)
“ A Lingugagem do Webdesigner ”
![Page 7: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/7.jpg)
O que é CSS?A Linguagem
• HTML X Conteúdo X Estilo
<ul><li>A Copacol<ul><li>HISTÓRIA E LINHA DO TEMPO</li><li>ATUAÇÃO</li><li>UNIDADES<ul><li>VENDAS</li><li>RECEBIMENTO e PRODUÇÃO</li>
</ul></li><li>PRÊMIOS E CERTIFICAÇÕES</li><li>RELAÇÕES INTERNACIONAIS</li><li>CORPO DIRETIVO</li><li>RESULTADOS</li><li>IDENTIDADE VISUAL</li>
</ul></li><li>Produtos<ul><li>Frango</li><li>Peixe</li>
</ul></li><li>Imprensa</li><li>Dicas</li>
</ul>
![Page 8: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/8.jpg)
O que é CSS?A Linguagem
• HTML X Conteúdo X Estilo
• A Copacolo HISTÓRIA E LINHA DO TEMPOo ATUAÇÃO o UNIDADES
VENDAS RECEBIMENTO e PRODUÇÃO
o PRÊMIOS E CERTIFICAÇÕESo RELAÇÕES INTERNACIONAISo CORPO DIRETIVOo RESULTADOSo IDENTIDADE VISUAL
• Produtoso Frangoo Peixe
• Imprensa• Dicas
![Page 9: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/9.jpg)
O que é CSS?A Linguagem
• HTML X Conteúdo X Estilo
![Page 10: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/10.jpg)
O que é CSS?A Linguagem
• HTML X Conteúdo X Estilo
• Efeito Cascata
Copacol & Zengraden
![Page 11: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/11.jpg)
O que é CSS?A Linguagem
• HTML X Conteúdo X Estilo
• Efeito Cascata
Copacol & Zengraden
![Page 12: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/12.jpg)
O que é CSS?A Linguagem
• HTML X Conteúdo X Estilo
• Efeito Cascata
• Tableless
![Page 13: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/13.jpg)
O que é CSS?A Linguagem
• HTML X Conteúdo X Estilo
• Efeito Cascata
• Tableless
![Page 14: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/14.jpg)
O que é CSS?A Linguagem
• HTML X Conteúdo X Estilo
• Efeito Cascata
• Tableless
![Page 15: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/15.jpg)
Informações básicas
• importação
A Linguagem
: importadas
Oficina de Webdesign - Firefox
pagina2.htm
Oficina de Webdesign
Parágrafos da página
Parágrafos da página
Parágrafos da página
P { background:red; }
Estilo.css
Oficina de Webdesign - Firefox
pagina.htm
Oficina de Webdesign
Parágrafos da página
Parágrafos da página
Parágrafos da página
![Page 16: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/16.jpg)
Informações básicas
• importação
A Linguagem
: importadas, incorporadas
Oficina de Webdesign - Firefox
pagina2.htm
Oficina de Webdesign
Parágrafos da página
Parágrafos da página
Parágrafos da página
P { background:red; }
Estilo.css
Oficina de Webdesign - Firefox
pagina.htm
Oficina de Webdesign
Parágrafos da página
Parágrafos da página
Parágrafos da página
<head><link href=“css/Estilo.css” /><style>P { background:green; }</style></head>
![Page 17: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/17.jpg)
Informações básicas
• importação
A Linguagem
: importadas, incorporadas ou inline
Oficina de Webdesign - Firefox
pagina2.htm
Oficina de Webdesign
Parágrafos da página
Parágrafos da página
Parágrafos da página
<head><link href=“css/Estilo.css” /><style>P { background:green; }</style></head>
Oficina de Webdesign - Firefox
pagina.htm
Oficina de Webdesign
Parágrafos da página
Parágrafos da página
Parágrafos da página
<body><p> Parágrafos da página </p><p> Parágrafos da página </p><p style=“background:blue”> Parágrafos da página</p></body>
![Page 18: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/18.jpg)
Informações básicas
• importação: importadas, incorporadas ou inline
• sintaxe: seletor { propriedade:valor; }
A Linguagem
<head><style>P { background:green; }</style></head>
Oficina de Webdesign - Firefox
pagina2.htm
Oficina de Webdesign
Parágrafos da página
Parágrafos da página
Parágrafos da página
Oficina de Webdesign - Firefox
pagina.htm
Oficina de Webdesign
Parágrafos da página
Parágrafos da página
Parágrafos da página
<body><p> Parágrafos da página </p><p> Parágrafos da página </p><p style=“background:blue”> Parágrafos da página</p></body>
![Page 19: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/19.jpg)
Informações básicas
• importação: importadas, incorporadas ou inline
• sintaxe: seletor { propriedade:valor; }
• IDs X Classes: .classe / #ID
A Linguagem
<head><style>P.cor { background:green;}P.risco { text-decoration:underline }P#outra { background:blue; }</style></head><body><p class=“cor risco”>teste</p><p class=“cor” id=“outra”>teste</p></body>
Oficina de Webdesign - Firefox
pagina.htm
Oficina de Webdesign
teste
teste
<head><style>P { background:green; }</style></head>
![Page 20: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/20.jpg)
Informações básicas
• importação: importadas, incorporadas ou inline
• sintaxe: seletor { propriedade:valor; }
• IDs X Classes: .classe / #ID
• agrupamento de seletores – p, img, body { ... }
A Linguagem
<head><style>P, img, body { border:2px red }</style></head><body><p>teste <img src=“teste.jpg”/></p></body>
Oficina de Webdesign - Firefox
pagina.htm
Oficina de Webdesign
teste
<head><style>P.cor { background:green;}P.risco { text-decoration:underline }P#outra { background:blue; }</style></head><body><p class=“cor risco”>teste</p><p class=“cor” id=“outra”>teste</p></body>
Oficina de Webdesign - Firefox
pagina.htm
Oficina de Webdesign
teste
teste
![Page 21: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/21.jpg)
“ Desenhando com os códigos”
![Page 22: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/22.jpg)
Noção espacial
•display – block e inline
Posicionamento é tudo
Oficina de Webdesign - Firefox
pagina.htm
Oficina de Webdesign
<HEAD><STYLE>BODY { text-align=center; }A { display:block; background:red;width:50px;height:25px;}</STYLE></HEAD>
home
produtos
contato
![Page 23: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/23.jpg)
Noção espacial
•display – block e inline
Posicionamento é tudo
Oficina de Webdesign - Firefox
pagina.htm
Oficina de Webdesign
<HEAD><STYLE>BODY { text-align=center; }A { display:inline; background:red;width:50px;height:25px;}</STYLE></HEAD>
home produtos contato
![Page 24: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/24.jpg)
Noção espacial
•display – block e inline
• float – left e right
Posicionamento é tudo
<HEAD><STYLE>BODY { text-align=center; }A { display:inline; background:red;width:50px;height:25px;}</STYLE></HEAD>
Oficina de Webdesign - Firefox
pagina.htm
Oficina de Webdesign
home produtos contato
![Page 25: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/25.jpg)
Noção espacial
•display – block e inline
• float – left e right
• position – absolute e relative
Posicionamento é tudo
![Page 26: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/26.jpg)
Noção espacial
•display – block e inline
• float – left e right
• position – absolute e relative
Posicionamento é tudo
![Page 27: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/27.jpg)
Noção espacial
•display – block e inline
• float – left e right
• position – absolute e relative
Posicionamento é tudo
![Page 28: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/28.jpg)
Noção espacial
•display – block e inline
• float – left e right
• position – absolute e relative
Posicionamento é tudo
![Page 29: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/29.jpg)
Noção espacial
•display – block e inline
• float – left e right
• position – absolute e relative
Posicionamento é tudo
![Page 30: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/30.jpg)
Noção espacial
•display – block e inline
• float – left e right
• position – absolute e relative
• margin, padding, border, top...
Posicionamento é tudo
top
bottom
rightleft
0h
3h
6h
9h
margin: 1px, 2px, 3px, 4px
![Page 31: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/31.jpg)
Noção espacial
•display – block e inline
• float – left e right
• position – absolute e relative
• margin, padding, border, top...
Posicionamento é tudo
top
bottom
rightleft
![Page 32: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/32.jpg)
Noção espacial
•display – block e inline
• float – left e right
• position – absolute e relative
• margin, padding, border, top...
Posicionamento é tudo
top
bottom
rightleft
![Page 33: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/33.jpg)
Noção espacial
•display – block e inline
• float – left e right
• position – absolute e relative
• margin, padding, border, top...
Posicionamento é tudo
top
bottom
rightleft
![Page 34: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/34.jpg)
Noção espacial
•display – block e inline
• float – left e right
• position – absolute e relative
• margin, padding, border, top...
Posicionamento é tudo
top
bottom
rightleft
![Page 35: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/35.jpg)
Revisão Geral
• Conteúdo X Formatação
• Folhas de Estilo Dinâmicas
• Display: inline e block
• Testes e mais testes
Concluindo
![Page 36: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/36.jpg)
GuiaConcluindo
![Page 37: II Oficina de Webdesign - Lecom](https://reader034.vdocuments.pub/reader034/viewer/2022052304/55a08b741a28ab8b228b4614/html5/thumbnails/37.jpg)
Obrigado...Concluindo