BO04 Efeito Tiras - formatação adian

    


BO04 Efeito Tiras

Esse tutorial oferece o script categoria background . Ele gera um efeito onde o background é criado através de tirar horizontais.

Para esse script é necessário um papel de carta com  pattern ou textura.

1 - Minha sugestão  de papel de carta para esse tutorial é o seguinte:

3 - Insira no Outlook o fundo:  Formatar/ Plano de fundo/ Imagem
4 - Aplicando o Script:
5.a - Inserido o background.
5.b - Em seguida vamos colocar o script:  clique na Abinha Origem, coloque o cursor após o trecho
 <BODY bgColor=#ffffff
background="C:\Documents and Settings\toshiba\Meus documentos\Image12.jpg">
e dê Enter
5.c - Coloque o cursor no espaço criado.
5.d - Selecione o script background em tira, copie (CTRL + C) e cole (CTRL + V)
No script já está inserido a tabela:

<DIV><STRONG><FONT face="Bell MT" color=#000080 size=4>
<DIV align=center>
<TABLE borderColor=#000000 borderColorDark=#000000 width="50%" bgColor=#ffffff
border=6>
<TBODY>
<TR>
<TD>
<DIV></DIV>
<STYLE>.intro {
BORDER-RIGHT: #000000 0px solid; BORDER-TOP: #000000 0px solid; LEFT: 0px; BORDER-LEFT: #000000 0px solid; BORDER-BOTTOM: #000000 0px solid; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #815a8e; layer-background-color: #D96481
}
</STYLE>

<DIV class=intro id=i1></DIV>
<DIV align=center>&nbsp;</DIV>
<DIV align=center>&nbsp;</DIV>
<DIV align=center>&nbsp;</DIV>
<DIV align=center>&nbsp;</DIV>
<DIV align=center>&nbsp;</DIV>
<DIV align=center>&nbsp;</DIV>
<DIV class=intro id=i2>
<DIV align=center><FONT face=Arial color=#d96481
size=4><STRONG></STRONG></FONT>&nbsp;</DIV></DIV>
<DIV class=intro id=i3><FONT face=Arial color=#d96481
size=4><STRONG></STRONG></FONT></DIV>
<DIV class=intro id=i4><FONT face=Arial color=#d96481
size=4><STRONG></STRONG></FONT></DIV>
<DIV class=intro id=i5><FONT face=Arial color=#d96481
size=4><STRONG></STRONG></FONT></DIV>
<DIV class=intro id=i6><FONT face=Arial color=#d96481
size=4><STRONG></STRONG></FONT></DIV>
<DIV class=intro id=i7><FONT face=Arial color=#d96481
size=4><STRONG></STRONG></FONT></DIV>
<DIV class=intro id=i8><FONT face=Arial color=#d96481
size=4><STRONG></STRONG></FONT></DIV>
<SCRIPT language=JavaScript1.2>
var velocidade=20
var tempo=new Array()
var tempo2=new Array()
if (document.layers){
for (i=1;i<=8;i++){
tempo[i]=eval("document.i"+i+".clip")
tempo2[i]=eval("document.i"+i)
tempo[i].width=window.innerWidth
tempo[i].height=window.innerHeight/8
tempo2[i].top=(i-1)*tempo[i].height}}
else if (document.all){
var clipright=document.body.clientWidth,clipleft=0
for (i=1;i<=8;i++){
tempo[i]=eval("document.all.i"+i+".style")
tempo[i].width=document.body.clientWidth
tempo[i].height=document.body.offsetHeight/8
tempo[i].top=(i-1)*parseInt(tempo[i].height)}}
function openit(){
window.scrollTo(0,0)
if (document.layers){
for (i=1;i<=8;i=i+2)
tempo[i].right-=velocidade
for (i=2;i<=8;i=i+2)
tempo[i].left+=velocidade
if (tempo[2].left>window.innerWidth)
clearInterval(stopit)}
else if (document.all){
clipright-=velocidade
for (i=1;i<=8;i=i+2){
tempo[i].clip="rect(0 "+clipright+" auto 0)"}
clipleft+=velocidade
for (i=2;i<=8;i=i+2){
tempo[i].clip="rect(0 auto auto "+clipleft+")"}
if (clipright<=0)
clearInterval(stopit)}}
function gogo(){
stopit=setInterval("openit()",100)}
gogo()
</SCRIPT>
</TD></TR></TBODY>
<DIV></DIV>
<DIV></DIV>
<DIV></DIV>
<DIV></DIV>
<DIV></DIV>
<DIV></DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV></TABLE></DIV></FONT></STRONG>

Para alterar a cor das tiras:

Substitua o código  da cor que está destacada em vermelho

 <TD>
<DIV></DIV>
<STYLE>.intro {
BORDER-RIGHT: #000000 0px solid; BORDER-TOP: #000000 0px solid; LEFT: 0px; BORDER-LEFT: #000000 0px solid; BORDER-BOTTOM: #000000 0px solid; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #000000; layer-background-color: #ffffff
}
</STYLE>

6 -  Visualize o efeito colocando na abinha " Visualizar".

Variação:

Se você quiser colocar uma bordinha em volta das tirinhas tbm é possível



<TD>
<DIV></DIV>
<STYLE>.intro {
BORDER-RIGHT: #000000 0px solid; BORDER-TOP: #000000 0px solid; LEFT: 0px; BORDER-LEFT: #000000 0px solid; BORDER-BOTTOM: #000000 0px solid; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #000000; layer-background-color: #ffffff
}
</STYLE>

O que está em  verde é o código da cor vc altera pela cor de sua preferência.

Em Azul está o valor numérico da borda, quando o valor está igual a 0, ela não parecerá.

Coloquei  o valor pra bordinha 2, e a cor preta (#000000).

7  - Volte a abinha "Editar" e complete a formatação.


Sugestão de Script para Bordas e Barra de Rolagem Colorida

<STYLE>BODY {
BORDER-RIGHT: #a3af89 10px ridge;
BORDER-TOP: #a3af89 10px ridge;
BORDER-LEFT: #a3af89 10px ridge;
SCROLLBAR-ARROW-COLOR: #a3af89 ;
BORDER-BOTTOM: #a3af89 10px ridge;
SCROLLBAR-BASE-COLOR: #a3af89
}
</STYLE>

Sugestão de Script para Mensagem de Rodapé

<SCRIPT language=JavaScript><!--
ScrollSpeed = 100; // milliseconds between scrolls
ScrollChars = 0; // chars scrolled per time period
function SetupTicker() {
// Thanks to who ever created this Java script!
msg=" ESCREVA SEU TEXTO AQUI ";
RunTicker();}
function RunTicker() {
window.setTimeout('RunTicker()',ScrollSpeed);
window.status = msg;
msg = msg.substring(ScrollChars) + msg.substring(0,ScrollChars);}
SetupTicker();
<!-- end
// -->
</SCRIPT>

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

Ele deverá conter:
Script Efeito Background tiras  - com as tiras sem borda.
background
Imagem ( opcional)
Texto
Borda Colorida
Barra de Rolagem Colorida
Script para Mensagem no Rodapé (opcional)
Música
Assinatura (opcional)

BO04b - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial.
Ele deverá conter:
Script  Background Efeito tiras: com tiras com borda nas configurações de sua preferência.
background
Imagem ( opcional)
Texto
Borda Colorida
Barra de Rolagem Colorida
Script para Mensagem no Rodapé (opcional)
Música
Assinatura (opcional)




Não esqueça, por favor:
colocar no assunto: seu nome ou nick - BO04 - Background com  Efeito tiras
Crie seu próprio material para a formatar a aula
No corpo do e-mail coloque o link correspondente a esse tutorial.
Não esqueça do anti-banner
Verificar o Peso da Mensagem antes de enviar

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

Esse  tutorial foi criado por brisa® em março 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.