Post on 11-Jul-2015
Um Projeto de e-marketing:Metodologia e Colaboração de Áreas
“ Oficina de Webdesign – Lecom”
BannerFlutuante
Cartõesvirtuais
Hotsite
E-mailmarketing
Campanhason-line
Mídiasalternativas Teaser
Wallpaper
Website
Produtos de WebdesignIntrodução
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>
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
“ A Lingugagem do Webdesigner ”
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>
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
O que é CSS?A Linguagem
• HTML X Conteúdo X Estilo
O que é CSS?A Linguagem
• HTML X Conteúdo X Estilo
• Efeito Cascata
Copacol & Zengraden
O que é CSS?A Linguagem
• HTML X Conteúdo X Estilo
• Efeito Cascata
Copacol & Zengraden
O que é CSS?A Linguagem
• HTML X Conteúdo X Estilo
• Efeito Cascata
• Tableless
O que é CSS?A Linguagem
• HTML X Conteúdo X Estilo
• Efeito Cascata
• Tableless
O que é CSS?A Linguagem
• HTML X Conteúdo X Estilo
• Efeito Cascata
• Tableless
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
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>
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>
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>
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>
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
“ Desenhando com os códigos”
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
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
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
Noção espacial
•display – block e inline
• float – left e right
• position – absolute e relative
Posicionamento é tudo
Noção espacial
•display – block e inline
• float – left e right
• position – absolute e relative
Posicionamento é tudo
Noção espacial
•display – block e inline
• float – left e right
• position – absolute e relative
Posicionamento é tudo
Noção espacial
•display – block e inline
• float – left e right
• position – absolute e relative
Posicionamento é tudo
Noção espacial
•display – block e inline
• float – left e right
• position – absolute e relative
Posicionamento é tudo
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
Noção espacial
•display – block e inline
• float – left e right
• position – absolute e relative
• margin, padding, border, top...
Posicionamento é tudo
top
bottom
rightleft
Noção espacial
•display – block e inline
• float – left e right
• position – absolute e relative
• margin, padding, border, top...
Posicionamento é tudo
top
bottom
rightleft
Noção espacial
•display – block e inline
• float – left e right
• position – absolute e relative
• margin, padding, border, top...
Posicionamento é tudo
top
bottom
rightleft
Noção espacial
•display – block e inline
• float – left e right
• position – absolute e relative
• margin, padding, border, top...
Posicionamento é tudo
top
bottom
rightleft
Revisão Geral
• Conteúdo X Formatação
• Folhas de Estilo Dinâmicas
• Display: inline e block
• Testes e mais testes
Concluindo
GuiaConcluindo
Obrigado...Concluindo