32-Back rotate colors - formatação inter

    

32-Back rotate colors

Primeiramente vamos preparar o material que vamos usar para formatar esse e-mail:
Uma tabela
Um título
Uma mensagem
Algumas gifs para enfeitar o e-mail
Uma assinatura. (Opcional)
Uma Música
Para complementar :
Um filtro para a tabela
Script para o background

Script para  colorir barra de rolagem
Script para mensagem no rodapé.

Criando a Tabela
1 - Abra o Front Page e crie um nova página em branco.
2 - Coloque o cursor na posição onde você deseja que a tabela seja inserida.
  De preferência, no centro da página.
3  - No menu do Front Page  clique em "Tabela/Inserir/Tabela".
4 - Clique com o Botão direito do mouse dentro da tabela e a seguir em "Propriedades da tabela" no Front Page 2000, já no 2003  você pode preencher os campos já quando vai inserir a Tabela.

Primeira tabela:
5 - A primeira tabela será transparente.
Sempre, antes de começar um site ou um papel de carta, insira uma tabela toda transparente, porque assim teremos a certeza que nada sairá do lugar.

Configuração da tabela transparente:
Linhas:1
Colunas:1
Alinhamento =  centralizado
Flutuar: Padrão
Enchimento da célula = 0
Especificar a largura =  100%
Espaçamento da célula  =  0
Bordas -  Tamanho =  0
Borda clara =  automático
Borda escura = automático
Plano de fundo =  automático

Para o Front Page 2000

Lembrando que o Front Page 2000 primeiramente faz as tabelas. Depois tem que clicar dentro dela com o Botão direito do mouse / Propriedades da Tabela para fazer as alterações.

Para o Front Page 2003

Ao colocar na abinha "Visualização" perceberá que ela vai desaparecer.  Essa tabela como já foi mencionada anteriormente somente nos servirá para que mantenha tudo em sua posição.  Pois estamos delimitando a área. Como colocamos 100% em sua largura, tudo que está inserido dentro dessa área se adaptará a qualquer configuração de vídeo.  Por isso prefiro usar porcentagem em vez de tamanho em pixels.

Segunda Tabela:
Clique dentro da tabela transparente, que ficará delimitada por linhas pontilhadas. Coloque o cursor centralizado e insira a segunda tabela.

6 - Configurações:
Linhas:1
Colunas:1
Alinhamento =  centralizado
Flutuar: padrão
Enchimento da célula = 5
Especificar a largura =  60%
Espaçamento da célula  =  30
Bordas -  Tamanho =  30
Cor da Borda: Uma cor de sua preferência
Borda clara = Uma cor de sua preferência
Borda escura = Uma cor de sua preferência
Plano de fundo =  Automático

Para o Front Page 2003

Veja como ficará:

7 - Propriedade da Célula:

Cursor dentro da tabela - botão direito do  mouse / Propriedade da célula.
Coloque a mesma cor que você usou na borda ou uma outra cor da sua preferência:

Para o Front Page 2003

Veja como ficará:

8 -  Inserindo o Filtro Sombra:

Vamos aprender a colocar o filtro sombra, já aqui no FrontPage?  É muito fácil..vamos lá??
O Código Fonte do efeito sombra é:

<SPAN
style="FILTER: shadow(color=cor da sombra); HEIGHT: 1px

Procuro pela linha que corresponde ao código fonte da tabela

<table

coloco o cursor logo após  <table id="table (numero da tabela)" dou um espaço e colo o código do filtro

Coloco na abinha visualização para checar o efeito:

Efeito perfeitinho!!!!

Volte para a abinha "Design"

9 - Outlook ou OE ou Win Mail:
10 - Abra o outlook.
11 - Abra uma nova mensagem.
12 - Volta para o FrontPage. Seleciono tudo (Crtl+T) . Copio (Crtl+C) e colo (Crtl+V) no Outlook.
Veja como ficou, agora no Outlook.

13 - Inserindo o Script: Background Rotate Colors:

O Script responsável para o efeito é esse:

Script para Alternar as Cores do Background

<SCRIPT>
<!---
function initArray() {
this.length = initArray.arguments.length
for (var i = 0; i < this.length; i++)
this[i+1] = initArray.arguments[i]
}
var hexChars = "0123456789ABCDEF";
function Dec2Hex (Dec) {
var a = Dec % 16;
var b = (Dec - a)/16;
hex = "" + hexChars.charAt(b) + hexChars.charAt(a);
return hex;
}
function bgChanger (begin, end, steps) {
steps = steps -1 ;
redA = begin.charAt(0) + begin.charAt(1);
red_valA = parseInt(redA,'16');
redB = end.charAt(0) + end.charAt(1);
red_valB = parseInt(redB,'16');
red_int = ((red_valB - red_valA) / steps) * -1;
grnA = begin.charAt(2) + begin.charAt(3);
grn_valA = parseInt(grnA,'16');
grnB = end.charAt(2) + end.charAt(3);
grn_valB = parseInt(grnB,'16');
grn_int = ((grn_valB - grn_valA) / steps) * -1;
bluA = begin.charAt(4) + begin.charAt(5);
blu_valA = parseInt(bluA,'16');
bluB = end.charAt(4) + end.charAt(5);
blu_valB = parseInt(bluB,'16');
blu_int = ((blu_valB - blu_valA) / steps) * -1;
step = 2;
red = red_valA;
grn = grn_valA;
blu = blu_valA;
document.bgColor = begin;
while ( steps >= step ) {
red -= red_int;
red_round = Math.round(red);
red_hex = Dec2Hex(red);
grn -= grn_int;
grn_round = Math.round(grn);
grn_hex = Dec2Hex(grn);
blu -= blu_int;
blu_round = Math.round(blu);
blu_hex = Dec2Hex(blu);
document.bgColor = red_hex + grn_hex + blu_hex;
step++;
}
document.bgColor = end;
}
bgChanger("000000","000000",70);
bgChanger("000000","FF0000",70);
bgChanger("FF0000","000000",70);
bgChanger("000000","AA00EE",70);
bgChanger("AA00EE","000000",70);
bgChanger("000000","0000FF",70);
bgChanger("0000FF","000000",70);
bgChanger("000000","FFFFFF",70);
bgChanger("0000FF","000000",70);

// -->
</SCRIPT>

Mas onde vou inserí-lo?
14 - Clique na abinha origem e procure pela linha  que é responsável pelo fechamento da mensagem: </BODY></HTML>
Encontrando-a, coloque o cursor após </html>  clique em Enter e cole o Script Background Colors Rotate.
15 - Coloque na abinha visualizar e observe o resultado:

Clique aqui ou aqui  para ver o efeito obtido no modelo de e-mail.

Maravilhoso, não??

Alterando as cores desse Script
A parte do script responsável pela cor é a que destaquei em vermelho, veja:

 <SCRIPT>
<!---
function initArray() {
this.length = initArray.arguments.length
for (var i = 0; i < this.length; i++)
this[i+1] = initArray.arguments[i]
}
var hexChars = "0123456789ABCDEF";
function Dec2Hex (Dec) {
var a = Dec % 16;
var b = (Dec - a)/16;
hex = "" + hexChars.charAt(b) + hexChars.charAt(a);
return hex;
}
function bgChanger (begin, end, steps) {
steps = steps -1 ;
redA = begin.charAt(0) + begin.charAt(1);
red_valA = parseInt(redA,'16');
redB = end.charAt(0) + end.charAt(1);
red_valB = parseInt(redB,'16');
red_int = ((red_valB - red_valA) / steps) * -1;
grnA = begin.charAt(2) + begin.charAt(3);
grn_valA = parseInt(grnA,'16');
grnB = end.charAt(2) + end.charAt(3);
grn_valB = parseInt(grnB,'16');
grn_int = ((grn_valB - grn_valA) / steps) * -1;
bluA = begin.charAt(4) + begin.charAt(5);
blu_valA = parseInt(bluA,'16');
bluB = end.charAt(4) + end.charAt(5);
blu_valB = parseInt(bluB,'16');
blu_int = ((blu_valB - blu_valA) / steps) * -1;
step = 2;
red = red_valA;
grn = grn_valA;
blu = blu_valA;
document.bgColor = begin;
while ( steps >= step ) {
red -= red_int;
red_round = Math.round(red);
red_hex = Dec2Hex(red);
grn -= grn_int;
grn_round = Math.round(grn);
grn_hex = Dec2Hex(grn);
blu -= blu_int;
blu_round = Math.round(blu);
blu_hex = Dec2Hex(blu);
document.bgColor = red_hex + grn_hex + blu_hex;
step++;
}
document.bgColor = end;
}
bgChanger("000000","000000",70);
bgChanger("000000","FF0000",70);
bgChanger("FF0000","000000",70);
bgChanger("000000","AA00EE",70);
bgChanger("AA00EE","000000",70);
bgChanger("000000","0000FF",70);
bgChanger("0000FF","000000",70);
bgChanger("000000","FFFFFF",70);
bgChanger("0000FF","000000",70);

// -->
</SCRIPT>

Para alterar a cor basta alterar o código da cor dentro de cada linha:

"000000" = código da cor preta 
"FF0000" = código da cor vermelha 
"AA00EE" =código da cor lilás
"0000FF"  = código da cor azul
"FFFFFF" = código da cor branca

Alterando a velocidade desse Script
Está destacado em vermelho a parte responsável pela velocidade desse script:

<SCRIPT>
<!---
function initArray() {
this.length = initArray.arguments.length
for (var i = 0; i < this.length; i++)
this[i+1] = initArray.arguments[i]
}
var hexChars = "0123456789ABCDEF";
function Dec2Hex (Dec) {
var a = Dec % 16;
var b = (Dec - a)/16;
hex = "" + hexChars.charAt(b) + hexChars.charAt(a);
return hex;
}
function bgChanger (begin, end, steps) {
steps = steps -1 ;
redA = begin.charAt(0) + begin.charAt(1);
red_valA = parseInt(redA,'16');
redB = end.charAt(0) + end.charAt(1);
red_valB = parseInt(redB,'16');
red_int = ((red_valB - red_valA) / steps) * -1;
grnA = begin.charAt(2) + begin.charAt(3);
grn_valA = parseInt(grnA,'16');
grnB = end.charAt(2) + end.charAt(3);
grn_valB = parseInt(grnB,'16');
grn_int = ((grn_valB - grn_valA) / steps) * -1;
bluA = begin.charAt(4) + begin.charAt(5);
blu_valA = parseInt(bluA,'16');
bluB = end.charAt(4) + end.charAt(5);
blu_valB = parseInt(bluB,'16');
blu_int = ((blu_valB - blu_valA) / steps) * -1;
step = 2;
red = red_valA;
grn = grn_valA;
blu = blu_valA;
document.bgColor = begin;
while ( steps >= step ) {
red -= red_int;
red_round = Math.round(red);
red_hex = Dec2Hex(red);
grn -= grn_int;
grn_round = Math.round(grn);
grn_hex = Dec2Hex(grn);
blu -= blu_int;
blu_round = Math.round(blu);
blu_hex = Dec2Hex(blu);
document.bgColor = red_hex + grn_hex + blu_hex;
step++;
}
document.bgColor = end;
}
bgChanger("000000","000000",70);
bgChanger("000000","FF0000",70);
bgChanger("FF0000","000000",70);
bgChanger("000000","AA00EE",70);
bgChanger("AA00EE","000000",70);
bgChanger("000000","0000FF",70);
bgChanger("0000FF","000000",70);
bgChanger("000000","FFFFFF",70);
bgChanger("0000FF","000000",70);

// -->
</SCRIPT>

Mexendo nesse valor que está destacado em vermelho você deixa a velocidade do script mais rápido ou mais lento.
Experimente, você vai conseguir resultados bárbaros!!
16 - Volte a abinha "Editar" para complementarmos a nossa formatação.

17 - Escolha uma mensagem, poesia, piada, ou um texto de sua preferência...
Eu escolhi essa poesia:

Soneto da Fidelidade
Vinicius de Moraes

 De tudo, ao meu amor serei atento
Antes, e com tal zelo, e sempre, e tanto
Que mesmo em face do maior encanto
Dele se encante mais meu pensamento.

Quero vivê-lo em cada vão momento
E em seu louvor hei de espalhar meu canto
E rir meu riso e derramar meu pranto
Ao seu pesar ou seu contentamento.

E assim, quando mais tarde me procure
Quem sabe a morte, angústia de quem vive
Quem sabe a solidão, fim de quem ama

Eu possa me dizer do amor (que tive):
Que não seja imortal, posto que e chama
Mas que seja infinito enquanto dure.

18 - Pra ficar em destaque fiz o título no PSP.
18a - Abri uma nova imagem de 400x150 pixels, transparente.
18b - Escolhi uma fonte, coloquei o tamanho de 72, stroke=1,0

18c - Aplique Drop Shadow V/H=1 - opacity=100  - blur=0
18d - Tirei a seleção. Copiei ( Crtl+C) e colei no Animation como nova animação ( Crtl+V) e salvei como gif.
Salvar no Animation Shop como .gif ou no PSP como .png.

Veja como ficou:

19  - Para dar um colorido vamos complementar com algumas gifs. Eu usei essas:

        

          

PS: Se você achar as gifs muito grandes, diminua-as no PSP dando resize.

20 - Insira o script para colorir a barra de rolagem.

Script para colorir a Barra de Rolagem

 <STYLE type=text/css>BODY {

SCROLLBAR-BASE-COLOR:código da cor

}

</STYLE>

21 - E um script para o rodapé:

Script para Mensagem de Rodapé

 <SCRIPT>
 var text1="       Escreva aqui             "
 comeback=0
 cometo=0
 function dis(){
 window.status=text1.substring(0,cometo)
 if(comeback==1){
 cometo--;
 if(cometo==0){comeback=0}
 } else {cometo++;if(cometo==text1.length){comeback=1}}
 window.status=text1.substring(0,cometo)+" Escreva Aqui "
 if(cometo==text1.length){window.setTimeout("dis()",500);} else {window.setTimeout("dis()",50);}
 }
 dis()
 </SCRIPT>
 

22 - Insira ainda uma mensagem sua, uma assinatura ( opcional)
23 - Não esqueça também de inserir uma linda música.





TI32 - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial.
Ele deverá conter:
Uma tabela
Um título
Uma mensagem
Algumas gifs para enfeitar o e-mail (opcional)
Uma assinatura. (Opcional)
Uma Música
Para complementar:
Um filtro para a tabela
Script para o background
Script para colorir barra de rolagem
Script para mensagem no rodapé.
Não esqueça de colocar o anti-banner.

Não é necessário usar o material fornecido nesse tutorial, você pode usar o tube, musica e as gifs de sua preferência, mas a formatação deverá ser a mesma desse tutorial.




Não esqueça, por favor:
Colocar no assunto: seu nome ou nick - TI32 - Background Rotate Colors
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 Vera Pilsei  e brisa® em 22/05/2006, formatado por Esmê, 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.