:: Tutorial de E-mails ::

Curso de Formatação Avançado- Lição 17

Dois sons e tabela com quatro células

Este código que preparei já oferece vários efeitos. É bem prático e bonitinho.

1. Você terá dois sons no e-mail (uma musiquinha e um som em formato wave, por exemplo, o som de um passarinho...) como vimos na aula anterior.

Lembre-se de que o loop do som wave poderá ser alterado para um número menor ou maior, dependendo do som que você utilizar

2. Você terá uma tabela com quatro células: duas apresentarão uma imagem (que pode ser iguais ou diferentes - fica interessante usar uma imagem e a mesma imagem com efeito "mirror") e duas apresentarão o texto, sendo que um dos textos aparecerá em marquée (subindo). As bordas das células das tabelas também são diferentes. As da imagem são no estilo "dotted" e as do texto são "double". As imagens também têm efeito de transição que você pode alterar, se quiser.

4. Este script não especifica o tamanho da imagem que aparece na tabela, portanto, escolha uma imagem de tamanho compatível na largura. Neste caso, o ideal é uma imagem de uns 250px de largura por uns 200px de altura.

Vamos ao trabalho, então.

1. Abra uma nova mensagem.

2. Clique em "Origem" e apague tudo o que aí estiver escrito.

3. Cole, então, o seguinte código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Tutorial de e-mails - Lili Russo</TITLE>
<META http-equiv=Content-Type
content="text/html; charset=windows-1252">
</*SCRIPT by Lili Russo */>

<STYLE>BODY {
BORDER-RIGHT: #fdce72 6px double; BORDER-TOP: #fdce72 6px double; SCROLLBAR-FACE-COLOR: #f9b85a; SCROLLBAR-HIGHLIGHT-COLOR: #fac366; BORDER-LEFT: #fdce72 6px double; SCROLLBAR-SHADOW-COLOR: #fac366; SCROLLBAR-3DLIGHT-COLOR: #fac366; SCROLLBAR-ARROW-COLOR: #fac366; BORDER-BOTTOM: #fdce72 6px double; SCROLLBAR-DARKSHADOW-COLOR: #fac366; SCROLLBAR-BASE-COLOR: #f9b85a
}
TABLE {
FONT-SIZE: 12pt; COLOR: #dc830a; FONT-FAMILY: BlackChancery
}
</STYLE>
<META content="MSHTML 6.00.6000.16608" name=GENERATOR></HEAD>
<BODY bgProperties=fixed bgColor=#daa520
background="endereço da imagem de fundo">
<DIV></DIV>
<DIV><FONT face="Comic Sans MS" size=2></FONT><BR></DIV>
<DIV> </DIV><BGSOUND balance=0
src="músca midi" volume=0><BGSOUND balance=0
src="som wave" volume=0 loop=3>
<TABLE
style="BORDER-RIGHT: #f7ac48 8px double; BORDER-TOP: #f7ac48 8px double; BORDER-LEFT: #f7ac48 8px double; BORDER-BOTTOM: #f7ac48 8px double"
cellSpacing=8 cellPadding=8 width=700 align=center bgColor=#fac366>
<TBODY>
<TR>
<TD
style="BORDER-RIGHT: #f7ac48 4px dotted; BORDER-TOP: #f7ac48 4px dotted; BORDER-LEFT: #f7ac48 4px dotted; BORDER-BOTTOM: #f7ac48 4px dotted"
align=left>
<DIV align=center><IMG
style="FILTER: blendTrans(duration=20); VISIBILITY: hidden"
src="endereço da imagem de 250px de largura"
onload="filters.blendTrans.Apply(); style.visibility='visible'; filters.blendTrans.Play()"></DIV></TD>
<TD
style="BORDER-RIGHT: #f7ac48 4px double; BORDER-TOP: #f7ac48 4px double; BORDER-LEFT: #f7ac48 4px double; BORDER-BOTTOM: #f7ac48 4px double"
align=left>
<DIV align=center>
<MARQUEE scrollAmount=1 scrollDelay=100 direction=up width=150 height=200>
<CENTER>Seu texto aqui....este vai subir</CENTER></MARQUEE></DIV></TD>
<TR>
<TD
style="BORDER-RIGHT: #f7ac48 4px double; BORDER-TOP: #f7ac48 4px double; BORDER-LEFT: #f7ac48 4px double; BORDER-BOTTOM: #f7ac48 4px double"
align=right>
<DIV align=center>
<DIV style="WIDTH: 150px">
<CENTER>Seu outro texto aqui....</CENTER></DIV></DIV></TD>
<TD
style="BORDER-RIGHT: #f7ac48 4px dotted; BORDER-TOP: #f7ac48 4px dotted; BORDER-LEFT: #f7ac48 4px dotted; BORDER-BOTTOM: #f7ac48 4px dotted"
align=right>
<DIV align=center><IMG
style="FILTER: blendTrans(duration=20); VISIBILITY: hidden"
src="endereço da segunda imagem"
onload="filters.blendTrans.Apply(); style.visibility='visible'; filters.blendTrans.Play()"></DIV></TD></TD></TR></TBODY></TABLE>

</BODY></HTML>

Tarefa:

Observe como fica o e-mail depois de você ter colocado o códig, clicando em 'Visualizar" e escolha, então, as cores, imagens que fiquem harmoniosa com o conjunto, lembrando-se de alterar as cores das bordas, da moldura, da barra de rolagem e demais itens. Lembre-se de inserir corretamente a música midi e o som wave; escreva com cuidado os textos nos espaços reservado e envie para o grupo.

Importante: Insira seu cartão de visitas!

Endereço do grupo: tutorial_emails@yahoogrupos.com.br

Lembre-se de indicar no campo Assunto: Nome do aluno, Nível e Número da lição. Caso a lição tenha sido refeita, inclua a palavra "refeita".

Lição elaborada por Lilian Russo


	.