BO05 Backs em Movimento - formatação adian

    

BO05 Backs em Movimento

Esse tutorial oferece o script com efeito de movimento sobre o background principal e os dos fundos das bordas da tabela.

 Vamos usar o processo de substituição de código e depois complementá-lo.

1 - Abra uma nova mensagem.

2 - Clique na abinha "Origem"

3 - Delete todo o código existente e cole em seu lugar o código abaixo:

Script Backgrounds em Movimento

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>478-Purple beauty-(Nil)</TITLE>

<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">

<STYLE>BODY {

BORDER-RIGHT: #000000 12px ridge; BORDER-TOP: #000000 12px ridge;

SCROLLBAR-FACE-COLOR: #ffffff;

FONT-SIZE: 14pt; SCROLLBAR-HIGHLIGHT-COLOR: #000000;

BORDER-LEFT: #000000 12px ridge; SCROLLBAR-SHADOW-COLOR: #ffffff;

COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #000000;

SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #000000;

BORDER-BOTTOM: #000000 12px ridge; FONT-FAMILY: Black Chancery;

SCROLLBAR-DARKSHADOW-COLOR: #000000; SCROLLBAR-BASE-COLOR: #000000

}

.pn1 {

LEFT: -1800px; POSITION: absolute; TOP: -1800px

}

.ztb1 {

BORDER-RIGHT: #000000 3px ridge; BORDER-TOP: #000000 3px ridge;

BORDER-LEFT: #000000 3px ridge; BORDER-BOTTOM: #000000 3px ridge

}

.m1 {

PADDING-RIGHT: 5px; PADDING-LEFT: 5px;

BACKGROUND: #7a7a7a; OVERFLOW: auto; WIDTH: 500px;

PADDING-TOP: 5px; HEIGHT: 180px; TEXT-ALIGN: center

}

</STYLE>

<!--background goes here---><!--background goes here--->

<META content="MSHTML 6.00.6000.16414" name=GENERATOR></HEAD>

<BODY bgColor=#ffffff

background=>

<DIV><FONT face="Trebuchet MS" color=#000080 size=3></FONT>&nbsp;</DIV>

<DIV style="FONT: 10pt arial"><FONT face="Trebuchet MS" color=#ffffff

size=3></FONT>&nbsp;</DIV>

<DIV><BR></DIV><!--table background images--><IMG class=pn1 id=tabback1

height=200

src="CAMINHO DO BACKGROUND (GRADIENTE)"

width=75> <IMG class=pn1 id=tabback2 height=75

src="CAMINHO DO BACKGROUND (PATTERN)" width=75>

<IMG class=pn1 id=tabback3 height=75

src="CAMINHO DO BACKGROUND - USAR A MESMA PATTERN USADA

NO FUNDO DO EMAIL" width=75>

<!--tables--do not alter--->

<TABLE class=ztb1 id=ztb1 cellSpacing=10 cellPadding=2 align=center border=0>

<TBODY>

<TR>

<TD>

<TABLE class=ztb1 id=ztb2 cellSpacing=10 cellPadding=10 align=center

border=0>

<TBODY>

<TR>

<TD>

<TABLE class=ztb1 id=ztb3 cellSpacing=10 cellPadding=2 align=center

border=0>

<TBODY>

<TR>

<TD>

<TABLE class=ztb1 id=ztb4 cellSpacing=10 cellPadding=10

align=center border=0>

<TBODY>

<TR>

<TD>

<TABLE class=ztb1 id=ztb5 cellSpacing=10 cellPadding=2

align=center border=0>

<TBODY>

<TR>

<TD>

<TABLE class=ztb1 id=ztb6 cellSpacing=10

cellPadding=30 align=center border=0><!--Main Image->

<TBODY>

<TR>

<TD vAlign=center align=middle><IMG id=zp1

height=500

src="CAMINHO DA IMAGEM CENTRAL"

width=500></TD></TR><!--Text Box->

<TR>

<TD><TABLE

style="BORDER-RIGHT: #000000 5px ridge; BORDER-TOP: #000000 5px ridge;

FILTER: Alpha(Opacity=60); BORDER-LEFT: #000000 5px ridge;

BORDER-BOTTOM: #000000 5px ridge"

borderColor=#ffffff cellSpacing=10

cellPadding=10 width="95%" align=center

bgColor=#ffffff border=7>

<TBODY>

<TR>

<TD borderColor=#000000><FONT

face="Times New Roman" size=4><EM>

<DIV align=center></EM></FONT><STRONG><FONT

face=Verdana><STRONG><FONT size=4><EM><FONT

face="Times New Roman"></EM></FONT><STRONG><FONT

face=Verdana><STRONG><FONT size=4><EM><FONT

face="Times New Roman" color=#000000

size=5>TEXTO</DIV></FONT></EM></FONT></STRONG></FONT></STRONG>

</TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>

</TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR>

</TBODY></TABLE>

<SCRIPT language=vbscript>

'------------------------------------------

'<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

'------------------------------------------

'Script written by DorothyIrene

'© DorothyIrene Designs August 2003

'Please do not remove these credits

'This script is encoded and can be traced

'------------------------------------------

'<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

'------------------------------------------

x=0

y=0

a=0

b=0

sub window_onload()

ztb1.background=tabback2.src

ztb2.background=tabback1.src

ztb3.background=tabback2.src

ztb4.background=tabback1.src

ztb5.background=tabback2.src

ztb6.background=tabback3.src

window.status=" MENSAGEM DE RODAPÉ AQUI  "

setinterval "scrollbg", 120

setinterval "scrollbdrs", 120

end sub

sub scrollbg()

x=x+1

y=y-1

document.body.style.backgroundPosition=x&" "&y

end sub

sub scrollbdrs()

a=a+1

b=b-1

ztb1.style.backgroundposition=a&" "&b

ztb3.style.backgroundposition=b&" "&a

ztb5.style.backgroundposition=a&" "&b

end sub

</SCRIPT>

</BODY></HTML>

 

4) - Vamos agora inserir os backgrounds. Neste script precisaremos de 3 patterns diferentes, sendo uma delas um gradiente, e vamos inserí-las 4 vezes.

 O Background do email deverá ser inserido através de: Formatar/Plano de fundo/Imagem.

 Os demais deverão ser inseridos colando os endereços capturados nos lugares indicados. É importante que siga a ordem da colocação, ou seja: o gradiente, a pattern (no exemplo a florida) e novamente a usada para o fundo principal. (Se necessário, veja no item 6 do tutorial CI02 como capturar o caminho da imagem.)

Insira por último a Imagem Central, pelo mesmo processo utilizado nas patterns.  Capture o caminho e cole no local indicado.

Vamos ver agora os códigos destacados, lembrando que ao trocá-los, você deverá escolher uma cor que combine com seu backgound ou imagem principal.

Os códigos que estão destacados em verde, são os responsáveis pelas cores das bordas do email, das tabelas, inclusive da borda da tabela que contem a caixa de texto.

Os códigos que estão destacados em lilás, são os responsáveis pelas cores da barra de rolagem.

Os códigos que estão destacados em laranja, são os responsáveis pelas cores do background principal e também do fundo da tabela da caixa de texto.

O código que está destacado em 000000, é o responsável pela cor da fonte.

Este script já contem uma mensagem de rodapé.  Procure o local e digite sua mensagem.

 

5 - Após todas as alterações terem sido feitas, cheque o resultado clicando na abinha "Visualizar".

6 - Estando tudo certinho e a seu gosto, clique novamente em "Editar" e complemente a formatação com um texto e uma bela música.  Dê preferência às músicas online, pois diminuem muito o peso final de seu trabalho.

 

BO05 - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial..

Ele deverá conter:

Script com o efeito backs em movimento.

Texto

Música

Assinatura (opcional)

 

Não esqueça, por favor:

Colocar no assunto: seu nome ou nick - BO05- Backs em Movimento.

No final do e-mail coloque o endereço deste tutorial inserido como hiperlink em uma imagem pequena ou palavra.

Verificar o peso de sua mensagem.

Não esqueça do anti-banner

Copyright© 2002/2007 Dama Da Noite * Todos os direitos reservados*

Esse  tutorial foi criado por Esmê, em maio de 2007,  especialmente para o Grupo PSP Brasil. 

É expressamente proibida, por lei, a divulgação desta página em outro site ou qualquer outro modo de veiculação sem a autorização expressa da autora ou dos detentores de copyright do texto, da formatação e dos demais elementos que compõem a página. 

Direitos Autorais protegidos pela Lei 9.610 de 19/02/1998.