ii oficina de webdesign - lecom

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>

http://maujor.com/tutorial/intrtut.php

http://maujor.com/tutorial/intrtut.php

Linguagem Web

ConteúdoHTML, PHP, ASP...

Introdução

<BODY><P>Parágrafo único da página</P></BODY>


pagina.htm


Parágrafo único da página

Elementos.swf, .jpg, .gif, .png

<BODY><IMG SRC=“foto.jpg”/></BODY>


pagina.htm


EstiloJavascript e CSS

<BODY style=“background:red”><IMG SRC=“foto.jpg”/></BODY>


pagina.htm


“ 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>



• 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



• Efeito Cascata

Copacol & Zengraden

http://siten.copacol.com.br/copacol/Portugues/lisProdutoLinha.php?codsegmento=1&class=frango

http://www.csszengarden.com/tr/portuguese/



• Efeito Cascata

• Tableless

Informações básicas

• importação

A Linguagem

: importadas


pagina2.htm


Parágrafos da página



P { background:red; }

Estilo.css


pagina.htm






• importação

A Linguagem

: importadas, incorporadas


pagina2.htm





P { background:red; }

Estilo.css


pagina.htm





<head><link href=“css/Estilo.css” /><style>P { background:green; }</style></head>


• importação

A Linguagem

: importadas, incorporadas ou inline


pagina2.htm





<head><link href=“css/Estilo.css” /><style>P { background:green; }</style></head>


pagina.htm





<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>


• importação: importadas, incorporadas ou inline

• sintaxe: seletor { propriedade:valor; }

A Linguagem

<head><style>P { background:green; }</style></head>


pagina2.htm






pagina.htm





<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>




• 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>


pagina.htm


teste

teste

<head><style>P { background:green; }</style></head>




• 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>


pagina.htm


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>


pagina.htm


teste

teste

“ Desenhando com os códigos”

Noção espacial

•display – block e inline

Posicionamento é tudo


pagina.htm


<HEAD><STYLE>BODY { text-align=center; }A { display:block; background:red;width:50px;height:25px;}</STYLE></HEAD>

home

produtos

contato

Noção espacial




pagina.htm


<HEAD><STYLE>BODY { text-align=center; }A { display:inline; background:red;width:50px;height:25px;}</STYLE></HEAD>

home produtos contato

Noção espacial


• float – left e right


<HEAD><STYLE>BODY { text-align=center; }A { display:inline; background:red;width:50px;height:25px;}</STYLE></HEAD>


pagina.htm


home produtos contato

Noção espacial



• position – absolute e relative


Noção espacial




• margin, padding, border, top...


top

bottom

rightleft

0h

3h

6h

9h

margin: 1px, 2px, 3px, 4px

Noção espacial




• margin, padding, border, top...


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

ii oficina de webdesign - lecom

Design