T06 Tabelas com Fundos Múltiplos - formatação adian

    
T06 Tabelas com Fundos Múltiplos

Neste tutorial veremos um script com efeito muito interessante sobre os fundos de uma tabela. Aqui usaremos além da pattern para o fundo do email, mais 6 outras diferentes que se alternam.

Materiais:

7 Patterns 200x200
1 Imagem principal (550x420)
Texto
Música

Vamos usar aqui o processo de substituição do código e sua 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:

Tabela com Fundos Múltiplos

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Shavannah's Design</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE>BODY {
BORDER-RIGHT: #000000 5px ridge; BORDER-TOP: #000000 5px ridge;
SCROLLBAR-FACE-COLOR: #000000; SCROLLBAR-HIGHLIGHT-COLOR: #d3b787;
BORDER-LEFT: #000000 5px ridge; SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #48563d; SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #000000; BORDER-BOTTOM: #000000 5px ridge;
SCROLLBAR-DARKSHADOW-COLOR: #000000; SCROLLBAR-BASE-COLOR: #ffffff
}
.dh1 {
BORDER-RIGHT: #000000 6px ridge; PADDING-RIGHT: 20px;
BORDER-TOP: #000000 6px ridge; PADDING-LEFT: 20px; FONT-SIZE: 12pt;
PADDING-BOTTOM: 20px; BORDER-LEFT: #000000 6px ridge; COLOR: #000000;
PADDING-TOP: 20px; BORDER-BOTTOM: #000000 6px ridge;
FONT-FAMILY: Trebuchet MS
}
</STYLE>

<META content="MSHTML 6.00.6000.16481" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff background=CAMINHO DO BACKGROUND><BGSOUND
balance=0 src="CAMINHO DA MÚSICA" volume=0
loop=99><!--achtergrondjes voor de tabellen--><IMG id=diana6
style="LEFT: -1800px; WIDTH: 100px; POSITION: absolute; TOP: -1800px"
src="CAMINHO DO FUNDO DA TABELA 01"> <IMG id=diana5
style="LEFT: -1800px; WIDTH: 100px; POSITION: absolute; TOP: -1800px"
src="CAMINHO DO FUNDO DA TABELA 02"> <IMG id=diana4
style="LEFT: -1800px; WIDTH: 100px; POSITION: absolute; TOP: -1800px"
src="CAMINHO DO FUNDO DA TABELA 03"> <IMG id=diana3
style="LEFT: -1800px; WIDTH: 100px; POSITION: absolute; TOP: -1800px"
src="CAMINHO DO FUNDO DA TABELA 04"> <IMG id=diana2
style="LEFT: -1800px; WIDTH: 100px; POSITION: absolute; TOP: -1800px"
src="CAMINHO DO FUNDO DA TABELA 05"> <IMG id=diana1
style="LEFT: -1800px; WIDTH: 100px; POSITION: absolute; TOP: -1800px"
src="CAMINHO DO FUNDO DA TABELA 06">
<TABLE class=dh1 id=tab3 cellSpacing=15 cellPadding=15 width="60%"
align=center><TBODY>
<TR>
<TD>
<TABLE class=dh1 id=tab1 borderColor=#ffffff cellSpacing=35 cellPadding=35
width="100%" align=center border=3>
<TBODY>
<TR>
<TD class=dh1 align=middle bgColor=#ffffff><IMG
src="CAMINHO DA IMAGEM PRINCIPAL"></TD></TR>
<TR>
<TD class=dh1 align=middle bgColor=#ffffff>
<DIV style="OVERFLOW: auto; WIDTH: 375px; HEIGHT: 175px">
<DIV>TEXTO AQUI</DIV>
</DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<SCRIPT language=vbscript>
'--------------------------------------
'Diana Haveman
'10-10-2004
'dont remove this lines
'Romantic
'---------------------------------------

tab1.background=diana1.src
tab3.background=diana3.src

window.status=" MENSAGEM DE RODAPÉ "

Sub Window_Onload()
Settimeout"start",750
Settimeout"start1",1500
End sub

Sub start()
Cleartimeout
tab1.background=diana1.src
Settimeout"change",1500
End sub

Sub change()
Cleartimeout
tab1.background=diana2.src
Settimeout"change1",1500
End sub

Sub change1()
Cleartimeout
tab1.background=diana3.src
Settimeout"start",1500
End sub

Sub start1()
ClearTimeout
tab3.background=diana4.src
Settimeout"change2",1500
End sub

Sub change2()
ClearTimeout
tab3.background=diana5.src
Settimeout"change3",1500
End sub

Sub change3()
ClearTimeout
tab3.background=diana6.src
Settimeout"start1",1500
End sub

</SCRIPT>
</BODY></HTML>

4 - Após colado o script na Origem, volte à abinha "Editar" e insira o Background através de: Formatar/Plano de fundo/Imagem.
5 - Em seguida insira os demais fundos e a imagem principal  colando os endereços capturados nos lugares indicados. (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 azul, são os responsáveis pelas cores da bordas do email e da barra de rolagem.
Os códigos em rosa são referentes às bordas das tabelas: (cores, estilo e largura), tipo, tamanho e cor da fonte.
Coloque aqui "BODY bgColor=#ffffff background" uma cor que combine com seu background.
Nos trechos "middle bgColor=#ffffff>" você troca a cor do fundo das células que contem a imagem e a caixa de texto; coloque uma cor que combine com sua formatação.
Os valores nas frases Settimeout"start1",1500 alteram a velocidade com que os fundos se alternam. Quanto menor o valor, mais rápido é o efeito e vice-versa.
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 um texto e uma bela música.  Dê preferência às músicas online, pois diminuem muito o peso final de seu trabalho.






T06 - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial.
Ele deverá conter:
Script com o efeito tabelas com fundos múltiplos
Background, mais 6 patterns.
Imagem principal.
Texto
Música
Assinatura (opcional)




Não esqueça, por favor:
Colocar no assunto: seu nome ou nick - T06 - Tabela com Fundos Múltiplos.
Colocar no corpo do e-mail 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 julho/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.