AULA 24- Bolinhas Douradas

Exemplo da aula

Hoje vamos aprender um efeito muito lindo em fundos escuros e o efeito já vem com script de rodapé.

Como sempre vamos começar no FrontPage.

1- Escolha uma pattern bem escura e vamos trabalhar com ela, eu escolhi essa, pode pegar se quiser:

2- No FrontPage vá na aba Formatar/Plano de fundo e vamos configurar o fundo, assim:

3- Clique no meio e vá em Tabela/Inserir/Tabela, com a configuração:

4- Agora vamos configurar o estilo da tabela, vá em propriedades da tabela e configure como no print:

5- Vá na aba Tabela\Inserir\Tabela e configure assim:

6- Agora vá em Propiedades da tabela e clique dentro da tabela com o lado direito do mouse e vá em Mesclar células, assim:

7- Dê alguns Enter para dar forma à tabela e vá novamente em Propriedades da tabela e vamos configurar o estilo, assim:

8- Clique em Visualizar para ver como está ficando seu trabalho.

9- Agora pode colocar o texto, gifs e assinaturas, que fica a seu critério.

10- Feito isso vamos colorir as bordinhas como já fou ensinado.

11- Agora vamos colocar nosso script que é esse:

 

Script Bolinhas Douradas (aqui)

<SCRIPT language=JavaScript>

P=new Image();
P.src="http://cantinhodesaudades.zip.net/images/456.gif"; //Pre-load your image here!
Pic="http://cantinhodesaudades.zip.net/images/456.gif"; //Type your image name here!
amount=22; //Amount of images, not less than 2!
BY=-20; //Your image height!
BX=-20; //Your image width!
S=2; //speed!

/************************ Nothing needs altering below ************************/
ns=(document.layers)?1:0;
if (ns){
for (i=0; i < amount; i++)
document.write("<LAYER NAME='netscape"+i+"' LEFT=0 TOP=0><img src="+Pic+"></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='explorer' src='"+Pic+"' style='position:absolute;top:0px;left:0px'>")}
document.write("</div></div>")
}
R=new Array(),PB=new Array(),RD=new Array(),Y=new Array(),X=new Array(),D=new Array(),VB=0,HB=0,SP=new Array();;
for (i=0; i < amount; i++){Y[i]=10;X[i]=10;D[i]=Math.floor(Math.random()*80+10);SP[i]=Math.floor(Math.random()*S+3)}
function Curve(){
plusMinus=new Array(1,-1,2,-2,3,-3,0,1,-1)
for (i=0; i < amount; i++){
R[i]=Math.floor(Math.random()*plusMinus.length);
RD[i]=plusMinus[R[i]];
}
setTimeout('Curve()',1800);
}
function MoveRandom(){
T=setTimeout('MoveRandom()',10);
var H=(document.layers)?window.innerHeight:document.body.clientHeight;
var W=(document.layers)?window.innerWidth:document.body.clientWidth;
var YS=(document.layers)?window.pageYOffset:document.body.scrollTop;
var XS=(document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < amount; i++){
PB[i]=D[i]+=RD[i];
y = SP[i]*Math.sin(PB[i]*Math.PI/180);
x = SP[i]*Math.cos(PB[i]*Math.PI/180);
if (D[i] < 0) D[i]+=360;
Y[i]+=y;
X[i]+=x;
VB=180-D[i];
HB=0-D[i];
//Corner rebounds! not necessary but looks nice.
if ((Y[i] < 1) && (X[i] < 1)) {Y[i]=1;X[i]=1;D[i]=45;}
if ((Y[i] < 1) && (X[i] > W+BX)) {Y[i]=1;X[i]=W+BX;D[i]=135;}
if ((Y[i] > H+BY) && (X[i] < 1)) {Y[i]=H+BY;X[i]=1;D[i]=315;}
if ((Y[i] > H+BY) && (X[i] > W+BX)) {Y[i]=H+BY;X[i]=W+BX;D[i]=225;}
//Edge rebounds!
if (Y[i] < 1) {Y[i]=1;D[i]=HB;}
if (Y[i] > H+BY) {Y[i]=H+BY;D[i]=HB;}
if (X[i] < 1) {X[i]=1;D[i]=VB;}
if (X[i] > W+BX) {X[i]=W+BX;D[i]=VB;}
var layer=(document.layers)?document.layers['netscape'+i]:explorer[i].style;
layer.top=Y[i]+YS;
layer.left=X[i]+XS;
}
}
function sTaRt(){Curve();MoveRandom()}
if (document.all||document.layers){sTaRt()}
//-->
</SCRIPT>

<SCRIPT language=vbscript>
'-------------------
'Write your tickertext here
'-------------------
window.status="*****Lindo Final de Semana Meninas.*****"</SCRIPT>

<SCRIPT language=JavaScript1.2>

/*
Advanced window scroller script-
By Neli
Over 200+ free JavaScripts here!
*/

var currentpos=0,alt=1,curpos1=0,curpos2=-1
function initialize(){
startit()
}
function scrollwindow(){
if (document.all)
temp=document.body.scrollTop
else
temp=window.pageYOffset
if (alt==0)
alt=1
else
alt=0 /*esta parte faz com que volte para o topo.*/
if (alt==0)
curpos1=temp
else
curpos2=temp
if (curpos1!=curpos2){
if (document.all)
currentpos=document.body.scrollTop+1
else
currentpos=window.pageYOffset+1
window.scroll(0,currentpos)
}
else{
currentpos=0
window.scroll(0,currentpos)
}
}
function startit(){
setInterval("scrollwindow()",30)
}
window.onload=initialize
</SCRIPT>

12- Mas onde colocá-lo?? Veja:

13- Agora clique em Visualisar para ver como ficou seu trabalho. Depois clique na aba Código para fazermos as modificações necessárias.

14- Procure pelo texto "Lindo final de semana, meninas", veja:

15- Nesse pedacinho coloque seu texto, para mensagem de rodapé.
Novamente vá na aba Visualisar para ver o efeito e agora é só salvar.

16- Arquivo/Salvar como/ dê um título ao seu trabalho e vá em
Meu computador/Arquivos de Programas/Arquivos Comuns/Microsoft Shared/Papel de Carta/Salvar.

No Outlook

1- Vá em Mensagem/Nova mensagem usando/Selecionar Papel de Carta e procure pelo seu trabalho e abra sua mensagem.

2- Clique na abinha Visualisar e confira se está tudo certo. Depois volte para abinha Editar

3- Vamos preencher o compo Assunto

4- Agora vamos colocar nossa música, que poderá ser ON LINE ou não.

Envie para correção.

Exercício

***Envie para grupo uma mensagem como foi ensinada no tutorial.

Observe todos detalhes

Ótimo trabalho

Peketita's Designer