Um Projeto de e-marketing:<br />Metodologia e Colaboração de Áreas<br />
“Oficina de Webdesign – Lecom”<br />
Introdução<br />Produtos de Webdesign<br />Banner<br />Flutuante<br />Website<br />Hotsite<br />E-mail<br />marketing<br /...
Introdução<br />O que é Web?<br /><ul><li> Rede de pesquisadores – troca de textos e imagens
 HTML – tags de marcação</li></ul>    Oficina de Webdesign - Firefox        pagina.htm        Oficina de WebdesignParágraf...
Introdução<br />Linguagem Web<br />ConteúdoHTML, PHP, ASP...<br />Elementos.swf, .jpg, .gif, .png<br />EstiloJavascript e ...
“ A Lingugagem do Webdesigner ”<br />
A Linguagem<br />O que é CSS?<br /><ul><br />  <li>A Copacol<br />    <ul><br />      <li>HISTÓRIA E LINHA DO TEMPO</li><b...
 HISTÓRIA E LINHA DO TEMPO
 ATUAÇÃO
 UNIDADES
 VENDAS
 RECEBIMENTO e PRODUÇÃO
 PRÊMIOS E CERTIFICAÇÕES
 RELAÇÕES INTERNACIONAIS
 CORPO DIRETIVO
 RESULTADOS
 IDENTIDADE VISUAL
 Produtos
 Frango
 Peixe
 Imprensa
 Dicas
 HTML X Conteúdo X Estilo</li></li></ul><li>A Linguagem<br />O que é CSS?<br /><ul><li> HTML X Conteúdo X Estilo</li></li>...
 Efeito Cascata</li></ul>Copacol & Zengraden<br />
A Linguagem<br />O que é CSS?<br /><ul><li> HTML X Conteúdo X Estilo
 Efeito Cascata</li></ul>Copacol & Zengraden<br />
A Linguagem<br />O que é CSS?<br /><ul><li> HTML X Conteúdo X Estilo
 Efeito Cascata
Tableless</li></li></ul><li>A Linguagem<br />O que é CSS?<br /><ul><li> HTML X Conteúdo X Estilo
 Efeito Cascata
Tableless</li></li></ul><li>A Linguagem<br />O que é CSS?<br /><ul><li> HTML X Conteúdo X Estilo
 Efeito Cascata
Tableless</li></li></ul><li>A Linguagem<br />Informações básicas<br /><ul><li> importação</li></ul>: importadas<br />    O...
A Linguagem<br />Informações básicas<br /><ul><li> importação</li></ul>: importadas<br />, incorporadas<br />    Oficina d...
A Linguagem<br />Informações básicas<br /><ul><li> importação</li></ul>: importadas<br />, incorporadas<br />ou inline<br ...
A Linguagem<br />Informações básicas<br /><ul><li> importação: importadas, incorporadas ou inline
Upcoming SlideShare
Loading in …5
×

II Oficina de Webdesign - Lecom

475 views

Published on

Apresentação usada para a etapa de webdesign da II Oficina de Webdesign - Lecom. Expõe conceitos de CSS principalmente.

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

  • Be the first to like this

No Downloads
Views
Total views
475
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

II Oficina de Webdesign - Lecom

  1. 1. Um Projeto de e-marketing:<br />Metodologia e Colaboração de Áreas<br />
  2. 2. “Oficina de Webdesign – Lecom”<br />
  3. 3. Introdução<br />Produtos de Webdesign<br />Banner<br />Flutuante<br />Website<br />Hotsite<br />E-mail<br />marketing<br />Campanhas<br />on-line<br />Mídias<br />alternativas<br />Teaser<br />Cartões<br />virtuais<br />Wallpaper<br />
  4. 4. Introdução<br />O que é Web?<br /><ul><li> Rede de pesquisadores – troca de textos e imagens
  5. 5. HTML – tags de marcação</li></ul> Oficina de Webdesign - Firefox pagina.htm Oficina de WebdesignParágrafo único da página<br /><HTML><br /><HEAD><br /><TITLE><br />Oficina de Webdesign<br /></TITLE><br /></HEAD><br /><BODY><br /><P><br />Parágrafo único da página<br /></P><br /></BODY><br /></HTML><br />Introdução do Maujor<br />
  6. 6. Introdução<br />Linguagem Web<br />ConteúdoHTML, PHP, ASP...<br />Elementos.swf, .jpg, .gif, .png<br />EstiloJavascript e CSS<br /><BODY><br /><P><br />Parágrafo único da página<br /></P><br /></BODY><br /><BODY><br /><IMG SRC=“foto.jpg”/><br /></BODY><br /><BODY style=“background:red”><br /><IMG SRC=“foto.jpg”/><br /></BODY><br /> Oficina de Webdesign - Firefox pagina.htm Oficina de WebdesignParágrafo único da página<br /> Oficina de Webdesign - Firefox pagina.htm Oficina de Webdesign<br /> Oficina de Webdesign - Firefox pagina.htm Oficina de Webdesign<br />
  7. 7. “ A Lingugagem do Webdesigner ”<br />
  8. 8. A Linguagem<br />O que é CSS?<br /><ul><br /> <li>A Copacol<br /> <ul><br /> <li>HISTÓRIA E LINHA DO TEMPO</li><br /> <li>ATUAÇÃO</li><br /> <li>UNIDADES<br /> <ul><br /> <li>VENDAS</li><br /> <li>RECEBIMENTO e PRODUÇÃO</li><br /> </ul><br /> </li><br /> <li>PRÊMIOS E CERTIFICAÇÕES</li><br /> <li>RELAÇÕES INTERNACIONAIS</li><br /> <li>CORPO DIRETIVO</li><br /> <li>RESULTADOS</li><br /> <li>IDENTIDADE VISUAL</li><br /> </ul><br /> </li><br /> <li>Produtos<br /> <ul><br /> <li>Frango</li><br /> <li>Peixe</li><br /> </ul><br /> </li><br /> <li>Imprensa</li><br /> <li>Dicas</li><br /></ul><br /><ul><li> HTML X Conteúdo X Estilo</li></li></ul><li>A Linguagem<br />O que é CSS?<br /><ul><li> A Copacol
  9. 9. HISTÓRIA E LINHA DO TEMPO
  10. 10. ATUAÇÃO
  11. 11. UNIDADES
  12. 12. VENDAS
  13. 13. RECEBIMENTO e PRODUÇÃO
  14. 14. PRÊMIOS E CERTIFICAÇÕES
  15. 15. RELAÇÕES INTERNACIONAIS
  16. 16. CORPO DIRETIVO
  17. 17. RESULTADOS
  18. 18. IDENTIDADE VISUAL
  19. 19. Produtos
  20. 20. Frango
  21. 21. Peixe
  22. 22. Imprensa
  23. 23. Dicas
  24. 24. HTML X Conteúdo X Estilo</li></li></ul><li>A Linguagem<br />O que é CSS?<br /><ul><li> HTML X Conteúdo X Estilo</li></li></ul><li>A Linguagem<br />O que é CSS?<br /><ul><li> HTML X Conteúdo X Estilo
  25. 25. Efeito Cascata</li></ul>Copacol & Zengraden<br />
  26. 26. A Linguagem<br />O que é CSS?<br /><ul><li> HTML X Conteúdo X Estilo
  27. 27. Efeito Cascata</li></ul>Copacol & Zengraden<br />
  28. 28. A Linguagem<br />O que é CSS?<br /><ul><li> HTML X Conteúdo X Estilo
  29. 29. Efeito Cascata
  30. 30. Tableless</li></li></ul><li>A Linguagem<br />O que é CSS?<br /><ul><li> HTML X Conteúdo X Estilo
  31. 31. Efeito Cascata
  32. 32. Tableless</li></li></ul><li>A Linguagem<br />O que é CSS?<br /><ul><li> HTML X Conteúdo X Estilo
  33. 33. Efeito Cascata
  34. 34. Tableless</li></li></ul><li>A Linguagem<br />Informações básicas<br /><ul><li> importação</li></ul>: importadas<br /> Oficina de Webdesign - Firefox pagina2.htm Oficina de Webdesign<br /> Oficina de Webdesign - Firefox pagina.htm Oficina de Webdesign<br />Estilo.css<br />P { background:red; }<br />Parágrafos da página<br />Parágrafos da página<br />Parágrafos da página<br />Parágrafos da página<br />Parágrafos da página<br />Parágrafos da página<br />
  35. 35. A Linguagem<br />Informações básicas<br /><ul><li> importação</li></ul>: importadas<br />, incorporadas<br /> Oficina de Webdesign - Firefox pagina2.htm Oficina de Webdesign<br /> Oficina de Webdesign - Firefox pagina.htm Oficina de Webdesign<br />Estilo.css<br /><head><br /><link href=“css/Estilo.css” /><br /><style><br />P { background:green; }<br /></style><br /></head><br />P { background:red; }<br />Parágrafos da página<br />Parágrafos da página<br />Parágrafos da página<br />Parágrafos da página<br />Parágrafos da página<br />Parágrafos da página<br />
  36. 36. A Linguagem<br />Informações básicas<br /><ul><li> importação</li></ul>: importadas<br />, incorporadas<br />ou inline<br /> Oficina de Webdesign - Firefox pagina2.htm Oficina de Webdesign<br /> Oficina de Webdesign - Firefox pagina.htm Oficina de Webdesign<br /><head><br /><link href=“css/Estilo.css” /><br /><style><br />P { background:green; }<br /></style><br /></head><br /><body><br /><p> Parágrafos da página </p><br /><p> Parágrafos da página </p><br /><p style=“background:blue”> Parágrafos da página<br /></p><br /></body><br />Parágrafos da página<br />Parágrafos da página<br />Parágrafos da página<br />Parágrafos da página<br />Parágrafos da página<br />Parágrafos da página<br />
  37. 37. A Linguagem<br />Informações básicas<br /><ul><li> importação: importadas, incorporadas ou inline
  38. 38. sintaxe: seletor { propriedade:valor; }</li></ul> Oficina de Webdesign - Firefox pagina2.htm Oficina de Webdesign<br /> Oficina de Webdesign - Firefox pagina.htm Oficina de Webdesign<br /><head><br /><style><br />P { background:green; }<br /></style><br /></head><br /><body><br /><p> Parágrafos da página </p><br /><p> Parágrafos da página </p><br /><p style=“background:blue”> Parágrafos da página<br /></p><br /></body><br />Parágrafos da página<br />Parágrafos da página<br />Parágrafos da página<br />Parágrafos da página<br />Parágrafos da página<br />Parágrafos da página<br />
  39. 39. A Linguagem<br />Informações básicas<br /><ul><li> importação: importadas, incorporadas ou inline
  40. 40. sintaxe: seletor { propriedade:valor; }
  41. 41. IDs X Classes: .classe / #ID</li></ul> Oficina de Webdesign - Firefox pagina.htm Oficina de Webdesign<br /><head><br /><style><br />P { background:green; }<br /></style><br /></head><br /><head><br /><style><br />P.cor { background:green;}<br />P.risco { text-decoration:underline }<br />P#outra { background:blue; }<br /></style><br /></head><br /><body><br /><p class=“cor risco”>teste</p><br /><p class=“cor” id=“outra”>teste</p><br /></body><br />teste<br />teste<br />
  42. 42. A Linguagem<br />Informações básicas<br /><ul><li>importação: importadas, incorporadas ou inline
  43. 43. sintaxe: seletor { propriedade:valor; }
  44. 44. IDs X Classes: .classe / #ID
  45. 45. agrupamento de seletores – p, img, body{ ... }</li></ul> Oficina de Webdesign - Firefox pagina.htm Oficina de Webdesign<br /> Oficina de Webdesign - Firefox pagina.htm Oficina de Webdesign<br /><head><br /><style><br />P, img, body { border:2px red }<br /></style><br /></head><br /><body><br /><p>teste <imgsrc=“teste.jpg”/><br /></p><br /></body><br /><head><br /><style><br />P.cor { background:green;}<br />P.risco { text-decoration:underline }<br />P#outra { background:blue; }<br /></style><br /></head><br /><body><br /><p class=“cor risco”>teste</p><br /><p class=“cor” id=“outra”>teste</p><br /></body><br />teste<br />teste<br />teste<br />
  46. 46. “Desenhando com os códigos”<br />
  47. 47. Posicionamento é tudo<br />Noção espacial<br /><ul><li>display – block e inline</li></ul> Oficina de Webdesign - Firefox pagina.htm Oficina de Webdesign<br /><HEAD><STYLE>BODY { text-align=center; }A { <br /> display:block; background:red;width:50px;height:25px; }</STYLE><br /></HEAD><br />home<br />produtos<br />contato<br />
  48. 48. Posicionamento é tudo<br />Noção espacial<br /><ul><li>display – block e inline</li></ul> Oficina de Webdesign - Firefox pagina.htm Oficina de Webdesign<br /><HEAD><STYLE>BODY { text-align=center; }A { <br /> display:inline; background:red;width:50px;height:25px; }</STYLE><br /></HEAD><br />home produtos contato<br />
  49. 49. Posicionamento é tudo<br />Noção espacial<br /><ul><li>display – block e inline
  50. 50. float – left e right</li></ul> Oficina de Webdesign - Firefox pagina.htm Oficina de Webdesign<br /><HEAD><STYLE>BODY { text-align=center; }A { <br /> display:inline; background:red;width:50px;height:25px; }</STYLE><br /></HEAD><br />home produtos contato<br />
  51. 51. Posicionamento é tudo<br />Noção espacial<br /><ul><li>display – block e inline
  52. 52. float – left e right
  53. 53. position – absolute e relative</li></li></ul><li>Posicionamento é tudo<br />Noção espacial<br /><ul><li>display – block e inline
  54. 54. float – left e right
  55. 55. position – absolute e relative</li></li></ul><li>Posicionamento é tudo<br />Noção espacial<br /><ul><li>display – block e inline
  56. 56. float – left e right
  57. 57. position – absolute e relative</li></li></ul><li>Posicionamento é tudo<br />Noção espacial<br /><ul><li>display – block e inline
  58. 58. float – left e right
  59. 59. position – absolute e relative</li></li></ul><li>Posicionamento é tudo<br />Noção espacial<br /><ul><li>display – block e inline
  60. 60. float – left e right
  61. 61. position – absolute e relative</li></li></ul><li>Posicionamento é tudo<br />Noção espacial<br /><ul><li>display – block e inline
  62. 62. float – left e right
  63. 63. position – absolute e relative
  64. 64. margin, padding, border, top...</li></ul>top<br />0h<br />3h<br />9h<br />right<br />left<br />6h<br />bottom<br />margin: 1px, 2px, 3px, 4px<br />
  65. 65. Posicionamento é tudo<br />Noção espacial<br /><ul><li>display – block e inline
  66. 66. float – left e right
  67. 67. position – absolute e relative
  68. 68. margin, padding, border, top...</li></ul>top<br />right<br />left<br />bottom<br />
  69. 69. Posicionamento é tudo<br />Noção espacial<br /><ul><li>display – block e inline
  70. 70. float – left e right
  71. 71. position – absolute e relative
  72. 72. margin, padding, border, top...</li></ul>top<br />right<br />left<br />bottom<br />
  73. 73. Posicionamento é tudo<br />Noção espacial<br />top<br /><ul><li>display – block e inline
  74. 74. float – left e right
  75. 75. position – absolute e relative
  76. 76. margin, padding, border, top...</li></ul>right<br />left<br />bottom<br />
  77. 77. Posicionamento é tudo<br />Noção espacial<br />top<br /><ul><li>display – block e inline
  78. 78. float – left e right
  79. 79. position – absolute e relative
  80. 80. margin, padding, border, top...</li></ul>right<br />left<br />bottom<br />
  81. 81. Concluindo<br />Revisão Geral<br /><ul><li> Conteúdo X Formatação
  82. 82. Folhas de Estilo Dinâmicas
  83. 83. Display: inline e block
  84. 84. Testes e mais testes</li></li></ul><li>Concluindo<br />Guia<br />
  85. 85. Concluindo<br />Obrigado...<br /> Bauru/SP – Fone/Fax (14) 4009-8900 São Paulo/SP – Fone/Fax (11) 5087-9493 Campinas/SP – Fone/Fax (19) 3255-2824Joinville/SC – Fone/Fax (47) 3431-8534<br />Murilo Silvamurilo.silva@lecom.com.br<br />

×