Curso de Formatação Avançado- Lição
10
Cor de hiperlink (ou link), tabelas, transparência,
imagem em movimento, vários efeitos em um e-mail
Vamos trabalhar também hoje vários scripts simultaneamente.
Vamos ao código "limpinho".
Antes disto, quero ressaltar que acrescentei no script, um código
para que os links que você insira fiquem em outra cor que
não aquele azul tradicional.
O código é este;
A {
TEXT-DECORATION: underline
}
A:link {
FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Comic Sans
}
A:visited {
FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Comic Sans
}
A:active {
FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Comic Sans
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns:o = "urn:schemas-microsoft-com:office:office"><HEAD><TITLE>Tutorial
de E-mails - 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: #000000 10px ridge; BORDER-TOP: #000000 10px ridge;
SCROLLBAR-FACE-COLOR: #ddaadd; SCROLLBAR-HIGHLIGHT-COLOR: #000000;
BORDER-LEFT: #774137 10px ridge; SCROLLBAR-SHADOW-COLOR: #aaddee;
SCROLLBAR-3DLIGHT-COLOR: #eddeb5; SCROLLBAR-ARROW-COLOR: #eddeb5;
SCROLLBAR-TRACK-COLOR: #000000; BORDER-BOTTOM: #77ccee 10px ridge;
SCROLLBAR-DARKSHADOW-COLOR: #eddeb5; SCROLLBAR-BASE-COLOR: #ffffff
}
.tab1 {
BORDER-RIGHT: #000000 5px ridge; BORDER-TOP: #000000 5px ridge;
BORDER-LEFT: #000000 5px ridge; BORDER-BOTTOM: #000000 5px ridge;
BACKGROUND-COLOR: #cc0000
}
.tab2 {
BORDER-RIGHT: #000000 5px ridge; BORDER-TOP: #000000 5px ridge;
BORDER-LEFT: #000000 5px ridge; BORDER-BOTTOM: #000000 5px ridge
}
.tab3 {
BORDER-RIGHT: #000000 5px ridge; BORDER-TOP: #000000 5px ridge;
BORDER-LEFT: #000000 5px ridge; WIDTH: 50px; BORDER-BOTTOM: #000000
5px ridge; HEIGHT: 305px
}
.tab4 {
BORDER-RIGHT: #000000 5px ridge; BORDER-TOP: #000000 5px ridge;
BORDER-LEFT: #000000 5px ridge; WIDTH: 400px; BORDER-BOTTOM: #000000
5px ridge; HEIGHT: 305px
}
.txt {
BORDER-RIGHT: #000000 5px ridge; PADDING-RIGHT: 10px; BORDER-TOP:
#000000 5px ridge; PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE:
14pt; PADDING-BOTTOM: 10px; OVERFLOW: auto; BORDER-LEFT: #000000
5px ridge; WIDTH: 630px; COLOR: #ffffff; PADDING-TOP: 10px; BORDER-BOTTOM:
#000000 5px ridge; FONT-STYLE: normal; FONT-FAMILY: Arial; HEIGHT:
150px; BACKGROUND-COLOR: #000000; TEXT-ALIGN: center
}
A {
TEXT-DECORATION: underline
}
A:link {
FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Comic Sans
}
A:visited {
FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Comic Sans
}
A:active {
FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Comic Sans
}
</STYLE>
</HEAD>
<BODY bgColor=#aaeeff background="endereço de seu
back">
<DIV><BR></DIV><IMG id=ldpic2
style="LEFT: -1800px; WIDTH: 409px; POSITION: absolute; TOP:
-1800px; HEIGHT: 305px"
src="endereço de sua imagem que irá se movimentar
na primeira tabela">
<TABLE cellSpacing=10 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE class=tab3 id=ldtab1 cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TD>
<TABLE class=tab3 id=ldtab2 cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TD>
<TABLE class=tab4 id=ldtab3 cellPadding=0 border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TD>
<TABLE class=tab3 id=ldtab4 cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TD>
<TABLE class=tab3 id=ldtab5 cellPadding=0 border=0 scellSpacing="0">
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TABLE></TD></TR></TABLE><TR><TD>
<TABLE class=tab1 id=ldtab6 style="FILTER: Alpha(opacity=80)"
cellSpacing=2
cellPadding=1 align=center>
<TBODY>
<TR>
<TD align=middle>
<DIV class=txt style="WIDTH: 630px; HEIGHT: 500px">
<DIV align=center>
<P class=MsoNormal style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN:
center"
align=center>
<P class=MsoNormal style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN:
center"
align=center><B style="mso-bidi-font-weight: normal"><SPAN
style="FONT-SIZE: 10pt; COLOR: #663300; FONT-FAMILY: 'Comic
Sans MS'"></FONT></P></DIV>
<DIV align=center><FONT face="Comic Sans MS"
color=#000000 size=3><IMG
alt="" hspace=0
src="endereço de uma imagem para a tabela"
align=baseline border=0></DIV>
<DIV>Dê um duplo clique e </FONT></DIV>
<DIV><FONT color=#000000 size=3>escreva seu texto</FONT></DIV>
<DIV><FONT color=#000000 size=3></FONT> </DIV>
<DIV><FONT color=#000000 size=3></FONT> </DIV>
<DIV><FONT color=#000000 size=3></FONT> </DIV>
<DIV><FONT color=#000000 size=3></FONT> </DIV>
<DIV><FONT color=#000000 size=3></FONT> </DIV>
<DIV><FONT color=#000000 size=3></FONT> </DIV>
<DIV><FONT color=#000000 size=3></FONT> </DIV>
<DIV><FONT color=#000000 size=3></FONT> </DIV>
<DIV><FONT color=#000000 size=3></FONT> </DIV>
<DIV><FONT color=#000000 size=3></FONT> </DIV>
<DIV><FONT color=#000000 size=3></FONT> </DIV>
<DIV><FONT color=#000000 size=1><A
href="www.ilove.terra.com.br/lili">Tutorial de
e-mails</A></FONT></DIV></DIV></SPAN></B></TD></TR></TBODY></TABLE>
<SCRIPT language=vbscript>
'Script by Lady Di
'june 2007
'please leave my name in the script
'Tutorial de E-mail - Lili Russo
DIM ld
x=0
y=0
b=0
Sub Window_onLoad()
window.status="Mensagem de rodapé - Tutorial de E-mails
- Lili Russo"
ldtab1.style.backgroundimage="url("&ldpic2.src&")"
ldtab2.style.backgroundimage="url("&ldpic2.src&")"
ldtab3.style.backgroundimage="url("&ldpic2.src&")"
ldtab4.style.backgroundimage="url("&ldpic2.src&")"
ldtab5.style.backgroundimage="url("&ldpic2.src&")"
ClearInterval(ld)
ld1=SetInterval ("Scrollback", 64)
End Sub
Sub Scrollback()
x=x+1
y=y-1
b=b
ldtab1.style.backgroundposition=x&" "&b
ldtab2.style.backgroundposition=x&" "&b
ldtab3.style.backgroundposition=x&" "&b
ldtab4.style.backgroundposition=x&" "&b
ldtab5.style.backgroundposition=x&" "&b
End Sub
Sub Window_OnResize()
Window_OnLoad
End sub
</SCRIPT>
<DIV> </DIV><IMG id=bubble style="DISPLAY:
none"
src="endereço de uma imagem bem pequena que irá
se movimentar para cima">
<SCRIPT language=JavaScript>
<!-- Original: Kurt Grigg (kurt.grigg@virgin.net) -->
<!-- Web Site: http://website.lineone.net/~kurt.grigg/javascript
-->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Tutorial de E-mail Lili Russo -->
<!-- Formatação de Lili Russo -->
<!-- Begin
Image0 = new Image();
Image0.src = bubble.src;
Amount = 25;
Ymouse = -50;
Xmouse = -50;
Ypos = new Array();
Xpos = new Array();
Speed = new Array();
rate = new Array();
grow = new Array();
Step = new Array();
Cstep = new Array();
nsSize = new Array();
ns = (document.layers)?1:0;
(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt) {
Ymouse=(document.layers)?evnt.pageY-20:event.y-20;
Xmouse=(document.layers)?evnt.pageX:event.x;
}
(document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
for (i = 0; i < Amount; i++) {
Ypos[i] = Ymouse;
Xpos[i] = Xmouse;
Speed[i] = Math.random()*4+1;
Cstep[i] = 0;
Step[i] = Math.random()*0.1+0.05;
grow[i] = 8;
nsSize[i] = Math.random()*15+5;
rate[i] = Math.random()*0.5+0.1;
}
if (ns) {
for (i = 0; i < Amount; i++) {
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img
src="+Image0.src+" name='N' width="+nsSize[i]+"
height="+nsSize[i]+"></LAYER>");
}
}
else {
document.write('<div style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i = 0; i < Amount; i++) {
document.write('<img id="si" src="'+Image0.src+'"
style="position:absolute;top:0px;left:0px;filter:alpha(opacity=90)">');
}
document.write('</div></div>');
}
function MouseBubbles() {
var hscrll = (document.layers)?window.pageYOffset:document.body.scrollTop;
var wscrll = (document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i = 0; i < Amount; i++){
sy = Speed[i] * Math.sin(270 * Math.PI / 180);
sx = Speed[i] * Math.cos(Cstep[i] * 4);
Ypos[i] += sy;
Xpos[i] += sx;
if (Ypos[i] < -40) {
Ypos[i] = Ymouse;
Xpos[i] = Xmouse;
Speed[i] = Math.random() * 6 + 4;
grow[i] = 8;
nsSize[i] = Math.random() * 15 + 5;
}
if (ns) {
document.layers['sn'+i].left = Xpos[i] + wscrll;
document.layers['sn'+i].top = Ypos[i] + hscrll;
}
else {
si[i].style.pixelLeft = Xpos[i] + wscrll;
si[i].style.pixelTop = Ypos[i] + hscrll;
si[i].style.width = grow[i];
si[i].style.height = grow[i];
}
grow[i] += rate[i];
Cstep[i] += Step[i];
if (grow[i] > 24) grow[i] = 30;
}
setTimeout('MouseBubbles()', 30);
}
MouseBubbles();
// End -->
</SCRIPT>
</BODY></HTML>
Tarefa:
Cole este código na "Origem" de sua mensagem de
e-mail. Transforme esse e-mail em um e-mail com cores harmoniosas,
use imagens que combinem, escolha outra fonte para o texto, altere
a opacidade, mude o estilo das bordas das tabelas...enfim...hoje
é dia de reforma!!!!!
Ah! Como falamos em cor de link, escreva um endereço (pode
ser de e-mail ou de site, de blog...) e insira um hiperlink, deixando
na mesma cor do texto de sua mensagem.
Insira também uma música e escreva um texto antes
de enviar o e-mail ao grupo. Insira também o script que você
salvou em seu bloco de notas.
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
Lilian Russo - Todos os Direitos Reservados - ©2002/2008
|
