:: Tutorial de E-mails ::

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

Bordas em movimento de ondas com brilho

Este código que preparei é muito bonitinho. Fica melhor quando visto aberto.

1. Escolha ou crie uma imagem para o fundo de 200px de largura por 200px de altura. Este será seu bg1.

2.Escolha uma outra imagem douradinha ou prateada ou ainda com efeito gliter de 20px de largura por 225 px de altura (aproximadamente) - Não convém usar uma imagem animada aqui, não. Este será seu bg2

3. Escolha um gif (animado ou não) ou uma imagem jpg que tenha o mesmo fundo de seu bg1. (255px de largura por 350px de altura). Será a imagem 3

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></*SCRIPT * Russo
Lili by />
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE>BODY {
BORDER-RIGHT: #5474a5 5px inset; BORDER-TOP: #5474a5 5px outset; SCROLLBAR-FACE-COLOR: #95b2d4; BORDER-LEFT: #5474a5 5px outset; SCROLLBAR-SHADOW-COLOR: #95b2d4; SCROLLBAR-3DLIGHT-COLOR: #5474a5; SCROLLBAR-ARROW-COLOR: #5474a5; SCROLLBAR-TRACK-COLOR: #95b2d4; BORDER-BOTTOM: #5474a5 5px inset; SCROLLBAR-BASE-COLOR: #95b2d4
}
IMG.img1 {
LEFT: -1800px; WIDTH: 200px; POSITION: absolute; TOP: -1800px; HEIGHT: 200px
}
IMG.img2 {
Z-INDEX: 4; LEFT: -1800px; WIDTH: 255px; POSITION: absolute; TOP: -1800px; HEIGHT: 350px
}
DIV.line1 {
Z-INDEX: 5; FILTER: progid:DXImageTransform.Microsoft.Wave(Add='true',
LightStrength=10, Phase=50, Strength=10, Freq=12, enabled=1); LEFT: -1800px; WIDTH: 2px; POSITION: absolute; TOP: -1800px
}
DIV.line2 {
Z-INDEX: 5; FILTER: progid:DXImageTransform.Microsoft.Wave(Add='true',
LightStrength=10, Phase=50, Strength=10, Freq=22, enabled=1)progid:DXImageTransform.Microsoft.BasicImage(grayscale=0, xray=0, mirror=0, invert=0, opacity=1, rotation=1); LEFT: -1800px; WIDTH: 2px; POSITION: absolute; TOP: -1800px
}
DIV.box {
BORDER-RIGHT: #5474a5 4px double; PADDING-RIGHT: 10px; BORDER-TOP: #5474a5 4px double; PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 12pt; Z-INDEX: 3; FILTER: alpha(opacity=60); PADDING-BOTTOM: 10px; OVERFLOW: auto; BORDER-LEFT: #5474a5 4px double; WIDTH: 350px; COLOR: #b67e90; PADDING-TOP: 10px; BORDER-BOTTOM: #5474a5 4px double; FONT-FAMILY: Papyrus, Comic Sans MS; POSITION: absolute; HEIGHT: 350px; BACKGROUND-COLOR: #c1d2e5; TEXT-ALIGN: center
}
</STYLE>

<META content="MSHTML 6.00.6000.16608" name=GENERATOR></HEAD>
<BODY bgColor=#efefef
background="endereço da imagem de fundo o bg1">
<DIV><FONT face="Comic Sans MS" size=2></FONT></DIV>
<DIV><FONT face="Comic Sans MS" size=2></FONT><FONT face="Comic Sans MS"
size=2></FONT><BR></DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV>
<DIV> </DIV>
<DIV><FONT face=Arial size=2></FONT> </DIV><IMG class=img1 id=bg1
src="endereço de seu bg2.jpg"> <IMG class=img2 id=pic1
src="endereço da imagem 3">
<DIV class=line1 id=li1></DIV>
<DIV class=line1 id=li2></DIV>
<DIV class=line2 id=li3></DIV>
<DIV class=line2 id=li4></DIV>
<DIV class=box id=box>
<DIV><FONT color=#8c5266><FONT face="Comic Sans MS"
color=#043673></FONT></FONT> </DIV>
<DIV><FONT color=#8c5266><FONT face="Comic Sans MS"
color=#043673></FONT></FONT> </DIV>
<DIV><FONT color=#8c5266><FONT face="Comic Sans MS" color=#043673>Escrever aqui
seu texto</FONT></FONT></DIV>
<DIV><FONT color=#8c5266><FONT face="Comic Sans MS" color=#043673>(dê um duplo
clique)</FONT></DIV></DIV>
<SCRIPT language=vbscript>
'*************************************
'Script by Lili Russo
'Give me the credit please,
'and do not remove these lines!
'*************************************

'The Dim variables
Dim scw,sch,picw,pich,boxw,boxh,gapw,x,y,z

SetLocale("en-gb")

scw=document.body.clientWidth
sch=document.body.clientheight

picw=255
pich=350
boxw=330
boxh=350

x=0
y=0
z=0

gapw=(scw-(picw+boxw))/3

li1.style.backgroundImage="URL("&bg1.src&")"
li2.style.backgroundImage="URL("&bg1.src&")"
li3.style.backgroundImage="URL("&bg1.src&")"
li4.style.backgroundImage="URL("&bg1.src&")"

Sub Window_OnLoad()
window.status=" Tutorial de e-mails - Lili Russo "
'This positions the lines and the textbox
li1.style.height=sch
li2.style.height=sch
li3.style.height=scw
li4.style.height=scw
li1.style.left=scw-30
li1.style.top=0
li2.style.left=10
li2.style.top=0
li3.style.left=0
li3.style.top=10
li4.style.left=0
li4.style.top=sch-30
pic1.style.left=gapw
pic1.style.top=(sch-pich)/2
box.style.left=(2*gapw+picw)
box.style.top=(sch-boxh)/2
SetInterval"scroll1",64
End Sub

Sub scroll1()
ClearTimeOut
x=x+1
y=y-1
z=z
li1.style.backgroundposition=x&" "&y
li2.style.backgroundposition=x&" "&y
li3.style.backgroundposition=x&" "&y
li4.style.backgroundposition=x&" "&y
End sub

Sub Window_OnResize()
window.location.reload
End Sub

</SCRIPT>
</FONT></BODY></HTML>

Tarefa:

Observe como fica o e-mail depois de você ter colocado o código, clicando em 'Visualizar" e escolha, então, as cores que combinem com o conjunto para alterar as cores das bordas, da moldura, da barra de rolagem e demais itens. Lembre-se de inserir corretamente a música midi ; escreva seu texto no espaço indicado 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


	.