:: Tutorial de E-mails ::

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

Dois filtros na caixinha de texto, back em movimento e outras coisnhas mais...

Hoje iremos aplicar dois filtros na caixa de texto: um filtro de transição e um de opacidade na caixinha de texto. O background irá se movimentar também. Adaptei um script de Larry Leonard para esta aula.
Não colocarei um exemplo, porque esta tarefa é, praticamente, um reforço das lições já aprendidas. Meu maior objetivo aqui é mostrar como podemos combinar vários scripts e/ou códigos em um mesmo e-mail, criando coisinhas diferentes e novas.

1 - Abra uma nova mensagem, clique na aba "Origem", apague todo o código e cole este aqui abaixo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Tutorial de e-mail - Lili Russo</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.6000.16608" name=GENERATOR>
<STYLE>BODY {
BORDER-RIGHT: #a48846 5px inset; BORDER-TOP: #a48846 5px outset; MARGIN-TOP: 30px; SCROLLBAR-FACE-COLOR: #f2e4c4; SCROLLBAR-HIGHLIGHT-COLOR: #a48846; MARGIN-LEFT: 20px; BORDER-LEFT: #a48846 5px outset; SCROLLBAR-SHADOW-COLOR: #a48846; SCROLLBAR-3DLIGHT-COLOR: #a48846; MARGIN-RIGHT: 20px; SCROLLBAR-ARROW-COLOR: #a48846; SCROLLBAR-TRACK-COLOR: #f2e4c4; BORDER-BOTTOM: #a48846 5px inset; SCROLLBAR-DARKSHADOW-COLOR: #f2e4c4; SCROLLBAR-BASE-COLOR: #f2e4c4; TEXT-ALIGN: center
}
.tx {
BORDER-RIGHT: #a48846 3px outset; PADDING-RIGHT: 20px; BORDER-TOP: #a48846 3px outset; PADDING-LEFT: 20px; SCROLLBAR-FACE-COLOR: #f2e4c4; FONT-WEIGHT: regular; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Alpha(Style=0, opacity=75)progid: RevealTrans; VISIBILITY: hidden; PADDING-BOTTOM: 20px; SCROLLBAR-HIGHLIGHT-COLOR: #fcc052; OVERFLOW: auto; BORDER-LEFT: #a48846 3px outset; WIDTH: 400px; SCROLLBAR-SHADOW-COLOR: #fcc052; COLOR: #423a26; SCROLLBAR-3DLIGHT-COLOR: #fcc052; SCROLLBAR-ARROW-COLOR: #a48846; PADDING-TOP: 50px; SCROLLBAR-TRACK-COLOR: #f2e4c4; BORDER-BOTTOM: #a48846 3px outset; FONT-FAMILY: Comic Sans MS; SCROLLBAR-DARKSHADOW-COLOR: #a48846; SCROLLBAR-BASE-COLOR: #fcc052; HEIGHT: 300px; BACKGROUND-COLOR: #f2e4c4; TEXT-ALIGN: center
}
</STYLE>
</HEAD>
<BODY bgColor=#f2e4c4
background="endereço de seu background sempre entre aspas - escolha um tile ou um papel com uma borda lateral que não ultrapasse 300px de largura para o efeito ficar mais bonito">
<DIV><IMG alt="" hspace=0
src="endereço de sua imagem que irá aparecer acima da caixinha de texto (jpg ou gif)"
align=baseline border=0></DIV>
<DIV> </DIV>
<DIV class=tx id=text>
<DIV><FONT size=3>Seu texto irá aparecer aqui</FONT></DIV>
<DIV><FONT size=3>Dê um duplo clique para escrever sua mensagem.</FONT></DIV>
<DIV><FONT size=3></FONT> </DIV>
<DIV><IMG alt="" hspace=0
src="endereço de uma imagem pequenininha para dar um acabamento bonitinho ao texto (jpg ou gif)"
align=baseline border=0></DIV>
<DIV> </DIV>
<DIV> </DIV></DIV>
<SCRIPT language=VBScript>
'----------------------------------------------
'written by Larry Leonard
'Script made Oct, 10 2004
'Please do not remove these lines
'Tutorial de E-mails - Lili Russo
'Formatado por...
'----------------------------------------------
DIM th1, th2

ticker=" ~ Escreva aqui sua mensagem de rodapé ~ Por Lili Russo ~"

x=0
y=0

Sub Window_Onload()
window.status=ticker
ClearInterval
th2=SetInterval ("scroll", 64)
th1=SetTimeOut ("trans1", 0)
End Sub
Sub scroll()
x=x
y=y-1
document.body.style.backgroundPosition=x&" "&y
End Sub
sub trans1()
ClearTimeOut(th1)
text.filters(1).Apply()
text.filters(1).Transition=17
text.style.Visibility="visible"
text.filters(1).Play(5.000)
end sub
sub window_onresize()
Window.location.reLoad()
end sub

</SCRIPT>

2. Veja agora, em um e-mail, como ficou. Você irá encontrar alguns daqueles X chatinhos indicando que a imagem não apareceu. Aqui é entra seu trabalho. Indique o caminho para o background e para as imagens, pela aba "Origem". Observe o tamanho da imagem acima da caixa de texto que você pretende usar e altere a largura da caixa (WIDTH: 400px;) para o mesmo valor da largura da sua imagem. (Esta é apenas uma sugestão). Escolha uma imagem pequenininha para ser colocada dentro da caixa de texto, depois da mensagem;

3. Ainda na "Origem", faça todas as alterações que desejar no STYLE (margens, moldura e barra de rolagem colorida, alinhamento...);

4 - Tudo o que irá aparecer na Caixa de Texto , isto é, a aparência dela, está definido nesta parte do código:

.tx {
BORDER-RIGHT: #a48846 3px outset; PADDING-RIGHT: 20px; BORDER-TOP: #a48846 3px outset; PADDING-LEFT: 20px; SCROLLBAR-FACE-COLOR: #f2e4c4; FONT-WEIGHT: regular; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Alpha(Style=0, opacity=75)progid: RevealTrans; VISIBILITY: hidden; PADDING-BOTTOM: 20px; SCROLLBAR-HIGHLIGHT-COLOR: #fcc052; OVERFLOW: auto; BORDER-LEFT: #a48846 3px outset; WIDTH: 400px; SCROLLBAR-SHADOW-COLOR: #fcc052; COLOR: #423a26; SCROLLBAR-3DLIGHT-COLOR: #fcc052; SCROLLBAR-ARROW-COLOR: #a48846; PADDING-TOP: 50px; SCROLLBAR-TRACK-COLOR: #f2e4c4; BORDER-BOTTOM: #a48846 3px outset; FONT-FAMILY: Comic Sans MS; SCROLLBAR-DARKSHADOW-COLOR: #a48846; SCROLLBAR-BASE-COLOR: #fcc052; HEIGHT: 300px; BACKGROUND-COLOR: #f2e4c4; TEXT-ALIGN: center
}

Se quiser alterar a cor do plano de fundo da caixa de texto, mude aqui: BACKGROUND-COLOR: #fcc052. Já, para alterar o grau de opacidade mude o valor 75 nesta parte: Alpha(Style=0, opacity=75). Faça algumas alterações nesse valor (use valores altos, tipo: 90 e, depois, valores baixos, tipo: 35) para verificar o resultado que se consegue. Escolha uma transparência adequada a seu trabalho. Lembre-se de analisar os atributos da barra de rolagem colorida que são também definidos nesta parte do código. (Temos a barra de rolagem que aparece no corpo do e-mail propriamente dito e a barra de rolagem que acompanha a caixinha de texto.)

5 - Ainda na caixinha de texto, temos o efeito de transição que está definido nesta parte do script:

ClearTimeOut(th1)
text.filters(1).Apply()
text.filters(1).Transition=17

Aqui você encontra os efeitos de transição e poderá escolher um efeito de que goste.

6 - Lembre-se de digitar sua própria mensagem de rodapé, pela aba "Origem".

7 - Escreva um pequeno texto - Você poderá escrevê-lo pela aba "Editar", dando um duplo clique no local indicado.

8 - Insira uma música.

9. Clique em "Visualizar! para ver se está tudo bonitinho e a seu gosto.

Muito bem, esta é a tua tarefa. Grandinha, né? Mas vale a pena porque aprendemos muitas coisinhas importantes aqui e, a partir desta aula, você poderá fazer muitas variações em seus e-mails, personalizando-os cada vez mais.

Sucesso pra você!!!!!

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


	.