T01 Tabela (surgindo nas laterais) - formatação adian

    

T01 Tabela (surgindo nas laterais)

Esse tutorial trabalha com o script de uma tabela com imagem que surge das laterais e se posiciona no centro do background. Tem ainda o efeito de rolagem do background.

1 - Abra uma nova mensagem.
2 - Clique na abinha "Origem"
3  - Cole o script do efeito, antes do  código responsável pelo fechamento do e-mail. </BODY></HTML>
4 - Cole o seguinte código:

Script: Tabela surgido das laterais

<STYLE type=text/css>BODY {
BORDER-RIGHT: #FFFFFF 8px ridge; BORDER-TOP: #FFFFFF 8px ridge;
BACKGROUND-ATTACHMENT: fixed; SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF; BORDER-LEFT: #FFFFFF 8px ridge; SCROLLBAR-SHADOW-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #FFFFFF; BORDER-BOTTOM: #FFFFFF 8px ridge; SCROLLBAR-BASE-COLOR: #FFFFFF; BACKGROUND-COLOR: #FFFFFF
}
.mess {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: normal; FONT-SIZE: 14pt;
PADDING-BOTTOM: 5px; OVERFLOW: auto; WIDTH: 605px; COLOR: #000000;
PADDING-TOP: 5px; FONT-FAMILY: "Comic Sans MS"; HEIGHT: 150px; TEXT-ALIGN: center
}
.randje1 {
BORDER-RIGHT: #000000 3px double; BORDER-TOP: #000000 3px double;
BORDER-LEFT: #000000 3px double; BORDER-BOTTOM: #000000 3px double
}
.randje2 {
BORDER-TOP: #FFFFFF 1px solid; BORDER-LEFT: #FFFFFF 1px solid;
BORDER-BOTTOM: #FFFFFF 1px solid
}
A {
COLOR: #e3d2c3; TEXT-DECORATION: none
}
A:hover {
CURSOR: crosshair; COLOR: #e3d2c3; BORDER-BOTTOM: thin dotted
}
</STYLE>
<DIV><FONT face="Trebuchet MS" color=#000080></FONT>&nbsp;</DIV>
<TABLE class=randje1 id=tab1
style="FILTER: progid:DXImageTransform.Microsoft.Slide(bands=2,
slideStyle=Push, enabled=1); VISIBILITY: hidden"
cellSpacing=0 cellPadding=0 align=center bgColor=#FFFFFF <TBODY>
<TBODY>
<TR>
<TD class=randje2 align=middle>
<TABLE class=randje1 cellSpacing=15 cellPadding=10 align=center>
<TBODY>
<TR>
<TD class=randje1 align=middle>
<TABLE cellSpacing=25 cellPadding=5 align=center>
<TBODY>
<TR>
<TD align=middle>
<TABLE cellSpacing=2 cellPadding=4 align=center>
<TBODY>
<TR>
<TD align=middle><IMG alt="" hspace=0
src="CAMINHO DA IMAGEM"
align=baseline border=0></TD></TR>
<TR>
<TD align=middle>
<DIV><!-- tekstbox - lattertype, grootte enz. aanpassen in .mess{style boven in script --></DIV>
<DIV>
<DIV><FONT size=4></FONT></DIV><BR>TEXTO AQUI</DIV>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<DIV>&nbsp;</DIV>
<DIV align=center>
<SCRIPT language=VBScript>
'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
'---------------------------------------------
'please leave all these lines in
'script (253) gemaakt door JettyM
'www.molehofje.com
'tekst tussen deze lijnen aub laten staan
'---------------------------------------------
'/////////////////////////////////////////////
Option Explicit
SetLocale("en-gb")
window.status=" ESCREVA AQUI SUA MENSAGEM DE RODAPÉ "
Dim j, m
j=0
m=0
sub window_onload()
start
end sub
sub start()
tab1.filters(0).Apply()
tab1.style.visibility="visible"
tab1.filters(0).Play(5)
window.setTimeout "blabla", 5000
end sub
sub blabla()
window.setInterval "scrollit", 64
end sub
sub scrollit()
j=j+1
document.body.style.backgroundPosition=m&" "&-j
end sub
</SCRIPT>

5 - Vá na abinha Editar e insira o Background utilizando Formatar/Plano de fundo/ Imagem.
6 - Vamos inserir a imagem. Clique na abinha "Origem" e procure o CAMINHO DA IMAGEM
7 - Clique na "Abinha Editar" e depois em Inserir Imagem  e vá buscar o caminho da sua imagem. Navegue até a pastinha onde está salva, clique em abrir.  Aparecerá o caminho:

8 - Copie esse caminho: coloque o cursor dentro do local onde está o endereço dê Ctrl+A para selecionar todo o endereço. Dê Ctrl + C para copiar.
9 - Nessa janelinha clique em cancelar.
10 - Clique na abinha "Origem" e procure no script a frase: "CAMINHO DA IMAGEM".  Selecione-o, apague e cole (CTRL + V)  o endereço.
11 - Clique na aba  "Visualizar"  para checar o resultado.
12 - Agora vamos colorir a tabela, as bordas da tabela, as bordas do email e barra de rolagem, pois todos esses códigos já constam do script.

- Primeiramente vamos colorir o fundo da tabela. Localize no script o trecho abaixo. Selecione uma cor do seu background copie o código e cole no lugar do que está em vermelho:

<TABLE class=randje1 id=tab1
style="FILTER: progid:DXImageTransform.Microsoft.Slide(bands=2,
slideStyle=Push, enabled=1); VISIBILITY: hidden" cellSpacing=0 cellPadding=0
align=center bgColor=#ffffff <TBODY>

- Localize o código das bordas do email e da barra de rolagem; Os códigos que estão em vermelho correspondem à borda do email e os que estão em verde são os da barra de rolagem. Substitua-os pelos códigos das cores que preferir, mas tomando o cuidado de escolher cores que combinem com seu background.

BORDER-RIGHT: #FFFFFF 8px ridge; BORDER-TOP: #FFFFFF 8px ridge;
BACKGROUND-ATTACHMENT: fixed; SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF; BORDER-LEFT: #FFFFFF 8px ridge; SCROLLBAR-SHADOW-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #FFFFFF; BORDER-BOTTOM: #FFFFFF 8px ridge; SCROLLBAR-BASE-COLOR: #FFFFFF; BACKGROUND-COLOR: #EBC3C3

- Agora vamos colorir as bordas da Tabela; Localize o trecho abaixo e troque os códigos das cores.
Sugiro que troque os que estão em vermelho pelo mesmo que usou para a borda do email e os que estão em verde, pelo código da cor que usou para o fundo da tabela.

PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-WEIGHT: normal; FONT-SIZE: 14pt;
PADDING-BOTTOM: 5px; OVERFLOW: auto; WIDTH: 605px; COLOR: #000000;
PADDING-TOP: 5px; FONT-FAMILY: "Comic Sans MS"; HEIGHT: 150px; TEXT-ALIGN: center
}
.randje1 {
BORDER-RIGHT: #000000 3px double; BORDER-TOP: #000000 3px double;
BORDER-LEFT: #000000 3px double; BORDER-BOTTOM: #000000 3px double
}
.randje2 {
BORDER-TOP: #FFFFFF 1px solid; BORDER-LEFT: #FFFFFF 1px solid;
BORDER-BOTTOM: #FFFFFF 1px solid
}

13 - A seguir vamos ver quais as variáveis que podem ser alteradas e quais as mudanças que ocasionam na nossa formatação.

sub start()
tab1.filters(0).Apply()
tab1.style.visibility="visible"
tab1.filters(0).Play(5)
window.setTimeout "blabla", 5000
end sub

sub blabla()
window.setInterval "scrollit", 64
end sub

Localize no código as linhas:

tab1.filters(0).Play(5)
Ela é a responsável pela velocidade em que a tabela surge das laterais. Quanto menor o número que está em vermelho mais rapidamente elas aparecem

window.setInterval "scrollit", 64
Já esta linha controla a velocidade com que o background se movimenta verticalmente. Quanto maior o valor mais lento será o movimento.

14 - Procure na origem a frase: "ESCREVA AQUI SUA MENSAGEM DE RODAPÉ" apague e digite no lugar a sua mensagem.
15 - Novamente clique na aba  "Visualizar"  para checar o resultado.
16 - Visualizado o efeito. Volte a abinha "Editar" e complete a formatação  com :
Texto
Música
Assinatura ( opcional)





T01 - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial.
Ele deverá conter:
Script com o efeito de tabela surgindo das laterais
Background
Imagem
Texto
Música
Assinatura (opcional)




Não esqueça, por favor:
Colocar no assunto: seu nome ou nick - T01 - Efeito de tabela surgindo das laterais.
No corpo do e-mail coloque o link correspondente a esse tutorial.
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 abril 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.