T03 Tabela Abrindo no Centro - formatação adian

    
T03 Tabela Abrindo no Centro

Neste tutorial veremos um script com efeito  sobre uma tabela que surge no centro da mensagem. Note os enfeites muito suaves na parte interna das bordas da tabela. Muito delicados.
Para usar esse script o mais prático é o processo de substituição do código e posterior complementação.

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 Tabela Surgindo ao Centro

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.6000.16441" name=GENERATOR>
<STYLE></STYLE>
<STYLE type=text/css>BODY {
BORDER-RIGHT: #000000 2px double; BORDER-TOP: #000000 2px double; SCROLLBAR-FACE-COLOR: #000000; BORDER-LEFT: #000000 2px double; SCROLLBAR-SHADOW-COLOR: #000000; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #000000; BORDER-BOTTOM: #000000 2px double; SCROLLBAR-BASE-COLOR: #000000
}
.tab1 {
BORDER-RIGHT: #000000 4px ridge; BORDER-TOP: #000000 4px ridge; FILTER: revealtrans; VISIBILITY: hidden; BORDER-LEFT: #000000 4px ridge; BORDER-BOTTOM: #000000 4px ridge
}
.tab1a {
FILTER: alpha(opacity=50); BACKGROUND-COLOR: #ffffff
}
.tab2 {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FILTER: alpha(opacity=50); BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid
}
.tab3 {
BORDER-RIGHT: #000000 3px dotted; BORDER-TOP: #000000 3px dotted; BORDER-LEFT: #000000 3px dotted; BORDER-BOTTOM: #000000 3px dotted
}
.tab4 {
BORDER-RIGHT: #000000 1px dashed; BORDER-TOP: #000000 1px dashed; BORDER-LEFT: #000000 1px dashed; BORDER-BOTTOM: #000000 1px dashed
}
.tekst {
PADDING-RIGHT: 15px; PADDING-LEFT: 15px; FONT-SIZE: 12pt; VISIBILITY: hidden; PADDING-BOTTOM: 15px; OVERFLOW: auto; WIDTH: 654px; COLOR: #541627; PADDING-TOP: 15px; FONT-FAMILY: Century Gothic; POSITION: relative; HEIGHT: 200px; TEXT-ALIGN: center
}

</STYLE>
<!--achtergrond invoegen-->
<META content="MSHTML 6.00.6000.16441" name=GENERATOR></HEAD>
<BODY bgProperties=fixed bgColor=#ffffff
background=BACKGROUND>
<DIV><FONT face=Arial size=2></FONT><FONT face=Arial size=2></FONT><BR></DIV><!--muziek midi invoegen-->
<TABLE class=tab1 id=tab cellSpacing=0 cellPadding=0 align=center>
<TBODY>
<TR>
<TD align=middle>
<TABLE class=tab1a cellSpacing=15 cellPadding=0 align=center>
<TBODY>
<TR>
<TD align=middle>
<TABLE class=tab2 cellSpacing=0 cellPadding=0 align=center>
<TBODY>
<TR>
<TD align=middle>
<TABLE class=tab3 cellSpacing=0 cellPadding=0 align=center>
<TBODY>
<TR>
<TD align=middle>
<TABLE class=tab4 cellSpacing=10 cellPadding=0
align=center>
<TBODY>
<TR>
<TD align=middle>
<TABLE class=tab4 cellSpacing=0 cellPadding=0
align=center>
<TBODY>
<TR>
<TD align=middle>
<TABLE class=tab3 cellSpacing=0 cellPadding=0
align=center>
<TBODY>
<TR>
<TD align=middle>
<TABLE class=tab2 cellSpacing=15 cellPadding=0
align=center>
<TBODY>
<TR>
<TD
align=middle><!--hoofdplaatje invoegen--><IMG
id=pic
style="FILTER: revealtrans; VISIBILITY: hidden; POSITION: relative"
height=480 src="CAMINHO DA IMAGEM"
width=600></TD></TR>
<TR>
<TD align=middle><BR>
<DIV class=tekst id=txt>
<DIV><FONT face="Times New Roman" color=#000000
size=6><STRONG><EM><FONT
size=5></FONT></EM></STRONG>
<P><STRONG><EM><FONT size=5>TEXTO
AQUI</FONT></EM></STRONG></P></FONT></DIV></DIV><BR>
<DIV></DIV>
<DIV></DIV></TD></TR></TBODY></TABLE>
<SCRIPT language=vbscript>
'-------------------------------
'Script written by Annem@rie
'http://www.annemaries.nl/
'juli 2006
'Please don't remove these lines
'-------------------------------

Option Explicit
SetLocale("en-gb")

Dim scw,sch,a,n,direct,tm,maxtm

'hier onder eigen tekst vermelden
window.status=" ... MENSAGEM DE RODAPÉ AQUI ... "

REM hoeveel tijd voordat de scroll van richting verandert
maxtm=100

Const dirDownR=0
Const dirUpR=1

a=0
n=0
tm=0
direct=dirDownR

Sub Window_onload()
sch=document.body.clientheight
scw=document.body.clientwidth
settimeout "kom", 500
End Sub

Sub kom()
cleartimeout
tab.filters(0).Apply()
tab.filters(0).transition=13
tab.style.visibility="visible"
tab.filters(0).Play(6.000)
pic.filters(0).Apply()
pic.filters(0).transition=14
pic.style.visibility="visible"
pic.filters(0).Play(6.000)
settimeout "scroll", 7000
End Sub

Sub scroll()
txt.style.visibility="visible"
window.setInterval "scrollIt", 64
End Sub

sub scrollIt()
select case direct
case dirDownR
a=a+1
n=n+1
tm=tm+1
if tm>=maxtm then
tm=0
direct=dirUpR
end if
case dirUpR
a=a+1
n=n-1
tm=tm+1
if tm>=maxtm then
tm=0
direct=dirDownR
end if
case else
window.status="unexpected case value"
end select
document.body.style.backgroundPosition=a&" "&n
end sub
</SCRIPT>
</BODY></HTML>

4 - Após colado o script na Origem, volte à abainha "Editar" e insira o Background através de: Formatar/Plano de fundo/Imagem.
5 - Em seguinda insira a imagem principal   colando o endereço capturado no lugar indicado. (Se necessário, veja no item 6 do tutorial CI02 como capturar o caminho da imagem.)

6 - 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 da bordas do email e da barra de rolagem.
Os códigos em rosa são referentes à borda da tabela.
Em laranja o valor e o código da cor que podem ser mudados no filtro aplicado à tabela.

 Agora reparem que existem três grupos de códigos: .tab2, .tab3 e .tab4. Eles são os responsáveis pelo "Enfeite"  que fica na parte interna da tabela. Troque as cores e a visibilidade desse "enfeite" no valor e códigos que estão em marrom.

<DIV><FONT face="Times New Roman" color=#ff0000
size=6><STRONG><EM><FONT
Aqui você troca a fonte, seu tamanho e cor.
Este script já contem a mensagem para o rodapé, basta digitar a sua no local indicado.

7 - Após todas as alterações terem sido feitas, cheque o resultado clicando na abinha "Visualizar".
8 - Estando tudo certinho e a seu gosto, clique novamente em "Editar" e complemente a formatação com uma mensagem de rodapé, um texto e uma bela música.  Dê preferência às músicas online, pois diminuem muito o peso final de seu trabalho.




T03 - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial.
Ele deverá conter:
Script com o efeito Tabela Surgindo no Centro
Texto
Música
Assinatura (opcional)




Não esqueça, por favor:
Colocar no assunto: seu nome ou nick - T03 - Tabela surgindo no centro.
No corpo do e-mail coloque o link correspondente a esse tutorial inserido como hiperlink numa 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.