AULA 21 -CORAÇÕEZINHOS NO EMAIL

Para esse tipo de script o ideal é usar uma mensagem com fundo preto ou de cor mais escura.
Veja o exemplo da aula .

1- Formatar um email com fundo preto e uma imagem que combine. Veja:



2- Depois do fundo colorido de preto vamos colocar a imagem que também tenha um fundo preto,
pra ficar harmonioso nosso trabalho, eu usei essa:

3- Agora vamos escolher um texto bem bonito que combine com nossa imagem, eu escolhi esse do
exemplo que fala de Paz
4- Depois enfeite seu email com gifs e assinatura
5- Coloque as bordas e barra de rolagem coloridas e também a música.
6- Agora vamos coloca o script (aqui) que é esse:

<SCRIPT language=JavaScript1.2>

//3D Starfield - by Mikhail Ansolis, based on Flying planes - by John Ely
//Modified from: Autumn leaves script- by Kurt Grigg (kurt.grigg@virgin.net)
//Visit http://www.dynamicdrive.com for this script

//Pre-load your image below!
//CHANGE 5 to the number of images listed below
grphcs=new Array(4)

//PRELOAD the involved images (extend or contract variables according to # of images used)
Image0=new Image();
Image0.src=grphcs[0]="http://members.annexcafe.com/muscadel2/flo162.gif"
Image1=new Image();
Image1.src=grphcs[1]="http://members.annexcafe.com/muscadel2/flo162.gif"
Image2=new Image();
Image2.src=grphcs[2]="http://members.annexcafe.com/muscadel2/flo162.gif"
Image3=new Image();
Image3.src=grphcs[3]="http://members.annexcafe.com/muscadel2/flo162.gif"
Image4=new Image();
Image4.src=grphcs[4]="http://members.annexcafe.com/muscadel2/flo162.gif"

//SPECIFY number of images to randomly display concurrently from list above. Less the more efficient
Amount=10;
Ypos=new Array();
Xpos=new Array();
Zpos=new Array();
//SpeedX=new Array();
//SpeedY=new Array();
ScrXpos=new Array();
ScrYpos=new Array();
Speed=new Array();
Size=new Array();
Step=new Array();
ns=(document.layers)?1:0;
ie=document.all&&navigator.userAgent.indexOf("Opera")==-1

if (ns){
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");
} //end for
} //end if
else if (ie){ //IE
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'+i+'" src="'+grphcs[Math.round((i+1)*(grphcs.length-1)/Amount)]+'"style="position:absolute;top:0px;left:0px">');
}
document.write('</div></div>');
}

//initialize star properties
if (ie||ns){
WinHeight=(ns)?window.innerHeight-20:window.document.body.clientHeight;
WinWidth=(ns)?window.innerWidth-70:window.document.body.clientWidth;
for (i=0; i < Amount; i++){
Speed[i]=(i+1)*9/Amount+4; //speed range from 4 to 10
Xpos[i] = (Math.random()*WinWidth-WinWidth/2)*(Amount-i/3)/Amount;
Ypos[i] = (Math.random()*WinHeight-WinHeight/2)*(Amount-i/3)/Amount;
Zpos[i] = Math.random()*900*(Amount-i/3)/Amount+100;
}
}

function fly(){
var WinHeight=(ns)?window.innerHeight-20:window.document.body.clientHeight;
var WinWidth=(ns)?window.innerWidth-70:window.document.body.clientWidth;
var hscrll=(ns)?window.pageYOffset:document.body.scrollTop;

for (i=0; i < Amount; i++){
Zpos[i]-=Speed[i];
if (ScrXpos[i]>WinWidth || ScrXpos[i]<0 || ScrYpos[i]>WinHeight || ScrYpos[i]<0 || Zpos[i]<=0) { //generate new stars
Speed[i]=(i+1)*9/Amount+4; //speed range from 4 to 10
Xpos[i] = (Math.random()*WinWidth-WinWidth/2)*(Amount-i/3)/Amount;
Ypos[i] = (Math.random()*WinHeight-WinHeight/2)*(Amount-i/3)/Amount;
Zpos[i] = Math.random()*900*(Amount-i/3)/Amount+100;
}
ScrXpos[i]=Xpos[i]/Zpos[i]*100 + WinWidth/2;
ScrYpos[i]=Ypos[i]/Zpos[i]*100 + WinHeight/2;

if (ns){
document.layers['sn'+i].left=ScrXpos[i];
document.layers['sn'+i].top=ScrYpos[i]+hscrll;
}
else{ //IE
eval("document.all.si"+i).style.left=ScrXpos[i];
eval("document.all.si"+i).style.top=ScrYpos[i]+hscrll;
}
} //end for
setTimeout('fly()',20);
} //end fly

if (ie||ns)
window.onload=fly
//-->
</SCRIPT>

***Mas onde colocá-lo???? Aqui, veja:

7- Agora clique na aba Visualisar e veja o efeito se deu certo, se deu volte pra abinha Editar e vamos
colocar um script de rodapé para assinar nosso trabalho (aqui). Veja:

<SCRIPT language=JavaScript>
var hellotext="ART E FORMATAÇÃO PEKETITA'S DESIGNER"
var thetext=""
var started=false
var step=0
var times=1
function welcometext()
{
times--
if (times==0)
{
if (started==false)
{
started = true;
window.status = hellotext;
setTimeout("anim()",1);
}
thetext = hellotext;
}
}
function showstatustext(txt)
{
thetext = txt;
setTimeout("welcometext()",4000)
times++
}
function anim()
{
step++
if (step==5) {step=1}
if (step==1) {window.status=']::--::--::--::--::--::--::--::--::'+thetext+ '::--::--::--::--::--::--::--::--::['}
if (step==2) {window.status=']-::--::--::--::--::--::--::--::--:'+thetext+'-::--::--::--::--::--::--::--::--:['}
if (step==3) {window.status=']--::--::--::--::--::--::--::--::--'+thetext+'--::--::--::--::--::--::--::--::--['}
if (step==4) {window.status=']:--::--::--::--::--::--::--::--::-'+thetext+':--::--::--::--::--::--::--::--::-['}
setTimeout("anim()",50);
}
welcometext();
function MM_findObj(n, d) {
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}
function MM_swapImage() {
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() {
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() {
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</SCRIPT>

8- Clique na aba Visualisar pra ver se deu tudo certo...Dando tudo certo pode salvar e enviar seu
trabalho para correção.

Exercício

Envie para o grupo um email formatado como foi ensinado no tutorial
Ele deve conter:

=Fundo colorido
=Imagem
=Texto
=Assinatura
=Gifs
=Scritp de coraçõezinhos
=Scritp de ridapé
=Música
=Bordas e barra de rolagem coloridas

Bom Trabalho

Peketita's Designer