:: Tutorial de E-mails ::

Curso de Formatação Super 6

Script para efeito na imagem e fundo em movimento com tabelas para imagem e texto

Nesta lição iremos trabalhar com um outro script que desenvolvi e que pode ser alterado, de acordo com o tipo de imagem e cores que forem usadas.

Todos os itens, tais como: moldura, barra de rolagem, cores da tabela, cor do filtro, também poderão ser alterados.

Vou separar as partes do código para que fique mais fácil entender e saber o que pode ser alterado:

Nesta parte, que determina o estilo das bordas, fonte, cores de fundo de tabelas e filtros, podemos alterar todos os itens, desde que a indicação de cada estilo se mantenha:

Aqui abaixo, como já sabemos, alteramos a cor, a largura e o estilo da borda e a barra de rolagem

<STYLE>BODY {
BORDER-RIGHT: #3b6292 3px solid; BORDER-TOP: #3b6292 3px solid; MARGIN-TOP: 0px; SCROLLBAR-FACE-COLOR: #3b6292; MARGIN-BOTTOM: 0px; SCROLLBAR-HIGHLIGHT-COLOR: #3b6292; BORDER-LEFT: #3b6292 3px solid; SCROLLBAR-SHADOW-COLOR: #e0f0f4; SCROLLBAR-3DLIGHT-COLOR: #e0f0f4; SCROLLBAR-ARROW-COLOR: #e0f0f4; SCROLLBAR-TRACK-COLOR: #3b6292; BORDER-BOTTOM: #3b6292 3px solid; SCROLLBAR-DARKSHADOW-COLOR: #e0f0f4; SCROLLBAR-BASE-COLOR: #c19d73; TEXT-ALIGN: center
}

Aqui abaixo alteramos as bordas da tabela e usei um filtro para efeito na imagem

.lilitable1 {
BORDER-RIGHT: #e0f0f4 4px dotted; FILTER: progid:DXImageTransform.Microsoft.Checkerboard()
progid:DXImageTransform.Microsoft.Alpha(Style=0, opacity=99); VISIBILITY: hidden; BORDER-LEFT: #e0f0f4 4px dotted; WIDTH: 800px; BACKGROUND-COLOR: #e0f0f4; TEXT-ALIGN: center
}
.lilibildstyle {
FILTER: progID:DXImageTransform.Microsoft.GradientWipe(enabled=1, gradientSize=0.5, WipeStyle=1, Motion=forward); VISIBILITY: hidden; WIDTH: 740px; HEIGHT: 550px; BACKGROUND-COLOR: #e0f0f4; TEXT-ALIGN: center
}

Aqui alteramos a tabela com seus itens e filtro para o texto
.lilitext {
BORDER-RIGHT: #3b6292 3px dotted; PADDING-RIGHT: 20px; BORDER-TOP: #3b6292 3px dotted; PADDING-LEFT: 20px; SCROLLBAR-FACE-COLOR: #e0f0f4; FONT-SIZE: 13px; FILTER: progid:DXImageTransform.Microsoft.Alpha(Style=0, opacity=95)
progID: DXImageTransform.Microsoft.GradientWipe(enabled=1, gradientSize=0.5, WipeStyle=1, Motion=forward); VISIBILITY: hidden; PADDING-BOTTOM: 20px; SCROLLBAR-HIGHLIGHT-COLOR: #3b6292; OVERFLOW: auto; BORDER-LEFT: #3b6292 3px dotted; WIDTH: 740px; SCROLLBAR-SHADOW-COLOR: #855733; COLOR: #3b6292; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #3b6292; PADDING-TOP: 20px; SCROLLBAR-TRACK-COLOR: #e0f0f4; BORDER-BOTTOM: #3b6292 3px dotted; FONT-FAMILY: VERDANA; SCROLLBAR-DARKSHADOW-COLOR: #3b6292; SCROLLBAR-BASE-COLOR: #e0f0f4; HEIGHT: 250px; BACKGROUND-COLOR: #e0f0f4; TEXT-ALIGN: center
}

Aqui deixamos a fonte, a cor, o tamanho da fonte e o estilo do link

A {
FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #3b6292; TEXT-DECORATION: none
}
A:hover {
FONT-SIZE: 11px; COLOR: #3b6292; TEXT-DECORATION: underline
}
</STYLE>

Os demais itens do código, que constam na parte do <Body> são nossos velhos conhecidos.

Usei mini gifs e linha horizontal para separar algumas indicações de texto.

O uso de linhas horizontais para separar elementos do texto, muitas vezes é bastante útil e dá um aspecto do organização e graça;

Veja que podemos variar o tamanho da linha, mudando o width, além de podemos mudar a largura (size=1) e a cor.

Abaixo está um script pronto.

<!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=iso-8859-1">
<STYLE>BODY {
BORDER-RIGHT: #3b6292 3px solid; BORDER-TOP: #3b6292 3px solid; MARGIN-TOP: 0px; SCROLLBAR-FACE-COLOR: #3b6292; MARGIN-BOTTOM: 0px; SCROLLBAR-HIGHLIGHT-COLOR: #3b6292; BORDER-LEFT: #3b6292 3px solid; SCROLLBAR-SHADOW-COLOR: #e0f0f4; SCROLLBAR-3DLIGHT-COLOR: #e0f0f4; SCROLLBAR-ARROW-COLOR: #e0f0f4; SCROLLBAR-TRACK-COLOR: #3b6292; BORDER-BOTTOM: #3b6292 3px solid; SCROLLBAR-DARKSHADOW-COLOR: #e0f0f4; SCROLLBAR-BASE-COLOR: #c19d73; TEXT-ALIGN: center
}
.lilitable1 {
BORDER-RIGHT: #e0f0f4 4px dotted; FILTER: progid:DXImageTransform.Microsoft.Checkerboard()
progid:DXImageTransform.Microsoft.Alpha(Style=0, opacity=99); VISIBILITY: hidden; BORDER-LEFT: #e0f0f4 4px dotted; WIDTH: 800px; BACKGROUND-COLOR: #e0f0f4; TEXT-ALIGN: center
}
.lilibildstyle {
FILTER: progID:DXImageTransform.Microsoft.GradientWipe(enabled=1, gradientSize=0.5, WipeStyle=1, Motion=forward); VISIBILITY: hidden; WIDTH: 740px; HEIGHT: 550px; BACKGROUND-COLOR: #e0f0f4; TEXT-ALIGN: center
}
.lilitext {
BORDER-RIGHT: #3b6292 3px dotted; PADDING-RIGHT: 20px; BORDER-TOP: #3b6292 3px dotted; PADDING-LEFT: 20px; SCROLLBAR-FACE-COLOR: #e0f0f4; FONT-SIZE: 13px; FILTER: progid:DXImageTransform.Microsoft.Alpha(Style=0, opacity=95)
progID: DXImageTransform.Microsoft.GradientWipe(enabled=1, gradientSize=0.5, WipeStyle=1, Motion=forward); VISIBILITY: hidden; PADDING-BOTTOM: 20px; SCROLLBAR-HIGHLIGHT-COLOR: #3b6292; OVERFLOW: auto; BORDER-LEFT: #3b6292 3px dotted; WIDTH: 740px; SCROLLBAR-SHADOW-COLOR: #855733; COLOR: #3b6292; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #3b6292; PADDING-TOP: 20px; SCROLLBAR-TRACK-COLOR: #e0f0f4; BORDER-BOTTOM: #3b6292 3px dotted; FONT-FAMILY: VERDANA; SCROLLBAR-DARKSHADOW-COLOR: #3b6292; SCROLLBAR-BASE-COLOR: #e0f0f4; HEIGHT: 250px; BACKGROUND-COLOR: #e0f0f4; TEXT-ALIGN: center
}
A {
FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #3b6292; TEXT-DECORATION: none
}
A:hover {
FONT-SIZE: 11px; COLOR: #3b6292; TEXT-DECORATION: underline
}
</STYLE>

<META http-equiv=imagetoolbar content=no>
<META content="MSHTML 6.00.6000.16674" name=GENERATOR></HEAD>
<BODY bgColor=#e0f0f4 background="endereço do back">
<DIV><BR></DIV><BGSOUND balance=0 src="endereço da música"
volume=-200 loop=infinite>
<DIV></DIV>
<TABLE class=lilitable1 id=tab1 cellSpacing=10 cellPadding=0>
<TBODY>
<TR>
<TD>
<DIV class=lilibildstyle id=lilibild><IMG
src="endereço da imagem"></DIV></TD></TR>
<TR>
<TD>
<DIV class=lilitext id=lilitext>
<DIV><IMG alt="" hspace=0 src=" endereço do mini gif"
align=baseline border=0></DIV>Texto<BR>
<DIV></DIV><BR>
<HR align=center width="50%" color=#3b6292 SIZE=1>

<DIV><FONT face="Comic Sans MS" color=#810081><FONT color=#3b6292
size=1>Créditos</FONT></FONT></DIV>
<DIV><FONT face="Comic Sans MS" size=2><A
href="http://ilove.terra.com.br/lili/">Script: Lili Russo</A></FONT></DIV>
<DIV><FONT face="Comic Sans MS" size=2><A
href="http://ilove.terra.com.br/lili/palavrasesentimentos/">Formatação e
arte: Lili Russo</A></FONT></DIV>
<DIV><FONT face="Comic Sans MS" size=2></FONT> </DIV><FONT
face="Comic Sans MS" size=2>
<DIV>
<HR align=center width="50%" color=#3b6292 SIZE=1>
</DIV>
<DIV><IMG alt="" hspace=0 src="endereço mini gif"
align=baseline border=0></DIV><FONT
face=Verdana></FONT></FONT></DIV></TD></TR></TBODY></TABLE>
<SCRIPT language=VBScript>
'----------------------------------------------
'Script by Lili Russo
'April 2007
'Script created by Lili Russo - html course
'Please Do Not Remove These Lines
'----------------------------------------------

' xy
x=0
y=0

sub Window_Onload()
window.status=" :: Sua mensagem de rodapé::"
SetTimeOut "wechsel1", 500
SetTimeOut "pause", 6000
end sub
Sub wechsel1()
ClearTimeOut
tab1.filters(0).Apply()
tab1.filters(0).SquaresX=5
tab1.filters(0).SquaresY=3
tab1.filters(0).Direction="right"
tab1.filters(0).Duration=6.000
tab1.filters(0).Play()
tab1.style.visibility="visible"
lilibild.filters(0).Apply()
lilibild.filters(0).Duration=6.000
lilibild.filters(0).Play()
lilibild.style.visibility="visible"
lilitext.filters(0).Apply()
lilitext.filters(0).Duration=6.000
lilitext.filters(0).Play()
lilitext.style.visibility="visible"
End Sub
Sub pause()
ClearInterval(th)
SetInterval "scroll", 80
End Sub
Sub scroll()
x=x+1
y=y-1
document.body.style.backgroundPosition=x&" "&y
End Sub
</SCRIPT>
</BODY></HTML>

Tarefa

Crie um e-mail usando o script pronto (ou, se preferir, crie o seu com base no modelo), alterando as cores, o tamanho da imagem, a linha horizontal,

as tabelas e o tipo de filtro.

Escreva um texto e envie ao grupo.

Bom trabalho!

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


	.