




T08 Tabela com Efeito Gliter
Neste tutorial veremos como utilizar um script com efeito glitter nas bordas da tabela, imagem e caixa de texto.
Materiais necessários:
1 Imagem Principal
2 patterns
1 pattern glitter
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:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252"><BASE
href=file://E:\Stats\Tables\Tables-Dash&Dot\NiceDashTable\><!-------------------------------------------
Nice Dash Table
Script written by DorothyIrene
MATERIALS REQUIRED
==================
A seamless background tile
A midi or wav
A seamless table background tile
A seamless messagebox background tile
A seamless glitter tile
Main image
--------------------------------------------->
<STYLE type=text/css>BODY {
BORDER-RIGHT: #000000 8px inset; BACKGROUND-POSITION: left top; BORDER-TOP: #000000 8px outset; BACKGROUND-ATTACHMENT: scroll; BORDER-LEFT: #000000 8px outset; SCROLLBAR-ARROW-COLOR: #FFFFFF; BORDER-BOTTOM: #000000 8px inset; BACKGROUND-REPEAT: repeat; SCROLLBAR-BASE-COLOR: #000000; BACKGROUND-COLOR: #FFFFFF; TEXT-ALIGN: center
}
IMG.pn1 {
LEFT: -1800px; POSITION: absolute; TOP: -1800px
}
TABLE.pn2 {
BORDER-RIGHT: #000000 10px dashed; BORDER-TOP: #000000 10px dashed; BORDER-LEFT: #000000 10px dashed; BORDER-BOTTOM: #000000 10px dashed
}
DIV.bz1 {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 14pt; PADDING-BOTTOM: 10px; OVERFLOW: auto; WIDTH: 600px; COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #000000; PADDING-TOP: 10px; FONT-FAMILY: "Times New Roman"; SCROLLBAR-BASE-COLOR: #000000; HEIGHT: 250px; BACKGROUND-COLOR: #C0C0C0; TEXT-ALIGN: center
}
</STYLE>
<!--seamless background tile-->
<META content="MSHTML 6.00.6000.16481" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff background=BACKGROUND_AQUI scroll=auto>
<DIV><FONT face="Trebuchet MS" color=#000080></FONT> </DIV>
<DIV> </DIV><!--midi or wav--><BGSOUND balance=0 src="CAMINHO DA MÚSICA"
volume=0 loop=infinite><!--glitter image--><IMG class=pn1 id=tabback1 height=50
src="CAMINHO DO GLITTER" width=50> <!--table background image--><IMG class=pn1 id=tabback2 height=256
src="CAMINHO DO BACKGROUND DA TABELA" width=600> <!--messagebox background--><IMG class=pn1 id=tabback3 height=256
src="CAMINHO DO BACKGROUND DA ÁREA DE MENSAGEM" width=600> <!--tables-->
<TABLE id=tb1 cellSpacing=1 cellPadding=1 align=center>
<TBODY><TR><TD>
<TABLE id=tb2 cellSpacing=2 cellPadding=5 align=center>
<TBODY><TR><TD>
<TABLE id=tb3 cellSpacing=0 cellPadding=0 align=center>
<TBODY><TR><TD>
<TABLE class=pn2 id=tb4 cellSpacing=2 cellPadding=5
align=center><TBODY><TR><TD>
<TABLE id=tb5 cellSpacing=1 cellPadding=1
align=center><TBODY><TR><TD>
<TABLE id=tb6 cellSpacing=2 cellPadding=10
align=center><TBODY><TR><TD>
<TABLE id=tb7 cellSpacing=1 cellPadding=1
align=center><TBODY><TR><TD>
<TABLE id=tb8 cellSpacing=35 cellPadding=2
align=center><TBODY><TR>
<TD id=ddd1><!--main image-->
<CENTER>
<DIV id=ddd3><IMG id=zic1 height=600
src="CAMINHO DA IMAGEM PRINCIPAL"
width=600 border=0></CENTER></DIV></TD></TR>
<DIV></DIV><!--messagebox--><!--change bz1 in style section above to match image width-->
<TR>
<TD id=ddd2>
<DIV class=bz1 id=mz1>TEXTO AQUI</DIV></TD></TR></TBODY></TABLE>
<SCRIPT language=VBScript>
option explicit
setLocale("en-au")
dim dz, ez, c
dz=""
ez=" "
c=0
'------------------------------------------
'<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
'------------------------------------------
'Script written by DorothyIrene
'© DorothyIrene Designs December 2006
'You are welcome to use this script but
'please do not remove these credits
'this script is encoded and can be traced
'------------------------------------------
'<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
'------------------------------------------
'========================================================================
'=============== changes and user settings section ======================
'place your ticker message between the quotes
window.status=dz&ez&"MENSAGEM DE RODAPÉ"
'============== end of changes and user settings section ================
'========================================================================
sub window_onLoad()
tb1.style.backgroundImage="URL("&tabback1.src&")"
tb2.style.backgroundImage="URL("&tabback2.src&")"
tb3.style.backgroundImage="URL("&tabback1.src&")"
tb4.style.backgroundImage="URL("&tabback2.src&")"
tb5.style.backgroundImage="URL("&tabback1.src&")"
tb6.style.backgroundImage="URL("&tabback2.src&")"
tb7.style.backgroundImage="URL("&tabback1.src&")"
tb8.style.backgroundImage="URL("&tabback2.src&")"
ddd1.style.backgroundImage="URL("&tabback1.src&")"
ddd2.style.backgroundImage="URL("&tabback1.src&")"
ddd3.style.backgroundImage="URL("&tabback3.src&")"
mz1.style.backgroundImage="URL("&tabback3.src&")"
end sub
window.setInterval "scrollIt",64
sub scrollIt()
c=c+1
tb1.style.backgroundPosition=-c&" "&-c
tb3.style.backgroundPosition=-c&" "&-c
tb5.style.backgroundPosition=-c&" "&-c
tb7.style.backgroundPosition=-c&" "&-c
ddd1.style.backgroundPosition=-c&" "&-c
ddd2.style.backgroundPosition=-c&" "&-c
end sub
sub z15()
'important do not remove this
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 seguida insira os backgrounds da tabela, caixa de texto e glitter e a também 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.) Digite também sua mensagem de rodapé no local indicado.
6 - Vamos ver agora os códigos destacados, lembrando que ao trocá-los, você deverá escolher uma cor que combine com seu background 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 tracejadas que circulam a tabela.
Os códigos que estão destacados em verde, alteram os itens da Caixa de texto: as cores da barra de rolagem; tipo, tamanho e cor da fonte; cor do background e nas partes destacadas (três) em laranja, você pode alterar a largura da caixa de mensagem.
7 - Feitas todas as alterações que achar necessárias vá em Editar e verifique se estão ao seu gosto. Estando tudo certinho dê um duplo clique na caixa de texto. Digite aí sua mensagem. Se for copiar e colar, não esqueça de colá-lo antes no bloco de notas.
8 - Não esqueça de colocar uma música.


T08 - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial.
Ele deverá conter:
Script com o Efeito Glitter na Tabela.
background
Imagem
Texto
Música
Assinatura (opcional)
Não esqueça, por favor:
Colocar no assunto: seu nome ou nick - T08 - Efeito Glitter na Tabela.
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-bannerCopyright© 2002/2007 Dama Da Noite * Todos os direitos reservados*
Esse tutorial foi criado por Esmê, em agosto 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.







Nenhum comentário:
Postar um comentário
Para se inscrever nas listas clique nos títulos de cada grupo na página inicial. Comece com as aulas de PSP, depois continue com o PSP + AS, e se quiser siga com o Xara e a Formatação para criar belos e-mails.
Deixe aqui suas opiniões e seja sempre bem-vindo(a).