28-Formatação completa com filtro sombra - formatação inter

    
28-Formatação completa com filtro sombra

Materiais:
Iremos  precisar de um top
Uma mensagem
Uma barra
Uma assinatura. (opcional)
Música
Para complementar :
Filtro para a tabela
Filtro para a fonte
Script para colorir a  barra de rolagem
Script para mensagem no rodapé.


Formatação para estudo:
 

Criando o Top:

Vc poderá usar o Top Patchwork criado pela Dama da Noite ou usar um de sua preferência.

Escolher uma imagem, eu escolhi essa de Theberge

A imagem deve ter 300X300
1-Abrir a imagem na área de trabalho e Copy
2-Abrir uma imagem de 1024X300 pxl e selecionar
3-Past into selection
4-Aplicar em Effects >texture >tiles

5-Aplicar em Effects>Geometric>Wave

6-Se você quiser fazer um back recorte as beiradas deixando quadradinhos perfeito, para o top não precisa

7-Volte a imagem inicial , aplique a mask névoa ou outra que goste e copy
8-Past as new layer
9-Aplique umas duas ou tres vezes o Plugin FM Tools>Blend Emboss na configuração original
10-Faça uma borda de 20 pxl apenas em Botton
11-Selecione e aplique algum efeito eu usei o Blinds do PSP no horizontal e vertical.
Esse tutorial foi criado por Dama Da Noite, em 10/05/2004.

Escolhendo a  Mensagem

Vc pode usar uma mensagem de sua preferência ou usar a que eu escolhi:

Não sei...
se a vida é curta ou longa demais pra nós, mas sei que nada do que vivemos tem sentido, se não tocamos o coração das pessoas.

Muitas vezes basta ser:
colo que acolhe, braço que envolve, palavra que conforta, silêncio que respeita, alegria que contagia, lágrima que corre, olhar que acaricia, desejo que sacia, amor que promove. 

E isso não é coisa de outro mundo, é o que dá sentido à vida.

É o que faz com que ela não seja nem curta, nem longa demais, mas que seja intensa, verdadeira, pura... enquanto durar...
(desconheço o autor)

Barra:

Criando a Tabela

1 - Abra o Front Page e crie uma nova página em branco
2 - Cursor na posição desejada onde vc quer que a tabela seja inserida  dê preferência ao centro da página.
3 - No menu do Front Page:  Tabela/Inserir/Tabela
4 - Botão direito do mouse. 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 ( invisível).
Dê preferência sempre antes de começar um site ou um papel de carta inserindo uma tabela invisível , pq assim teremos a certeza que nada saíra do lugar.

Configuração da tabela transparente ( invisível):
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

Lembrando que para o Front Page 2000 primeiramente faz a tabela depois clica dentro dela / botão direito do mouse / Propriedades da Tabela para fazer as alterações

  Ao você 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 o á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  = 20
Bordas -  Tamanho =  3
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

Veja como ficará:

7 - Botão direito do mouse /  Propriedades da célula:

Coloco uma cor de minha preferência para o plano de fundo.

Veja como ficará:

8 -  Reserve.

Montando a Formatação

9 -  Ative o Outlook ou o Win Mail.
10 - Abra uma nova mensagem.
11 - Primeiramente vamos aprender a formatar o top: 

Outlook ou o Win Mail: Inserindo o Top

Primeiramente vamos colocar o Top. Para colocá-lo siga os passos abaixo:
12 - Formatar / Aplicar Papel de carta /Mais papéis de carta

13 - . Na janela que abrirá, clique em Criar Novo

14 - Próxima janela, clique em Avançar.
15 - Próxima janela, clique em Procurar..
Procure o local onde vc salvou o  Top Patchwork. Encontrado o local dê ok na janela para voltar a mesma janela .
Nessa mesma janela configure os outros itens:
Posição: Superior / Esquerda
Lado a lado: Não colocar lado a lado
Cor: Coloque uma cor bem contrastante com seu top

16 - Clique em Avançar.
17 - Na próxima janela vc irá configurar a fonte, o tamanho da fonte e estilo. Se a quer em negrito ou itálica. Use sempre fontes que já vieram com o Windows. Assim você não correrá o risco que a outra pessoa não tenha a fonte. Se o remetente não tiver a fonte usada o Windows a substituirá por uma que ele considere padrão. E sua formatação poderá ficar toda deformada.
18 - Uma vez configurada clique em Avançar.
19 - A próxima janela é muito importante ela é responsável pela margem.
Aqui no nosso caso a margem superior será responsável para que a a nossa tabela não fique sobre a imagem. Portando vou colocar um valor na margem superior para que a escrita fique totalmente fora da imagem. Esse valor variará de acordo com a altura do seu TOP.

20 - Clique em Avançar.
21 - Na próxima janela. Batize seu papel de carta. Eu dei o seguinte nome:

22 - Clique em Concluir.

23 - Voltará para primeira janela pq agora o outlook ou o win mail vão dar um nome para seu papel de carta em htm. Basta nessa janela vc dar OK. E tudo vai estar certinho, exceto se vc já tinha esse nome em outro papel de carta salvo, daí o próprio programa irá pedir para vc substituir o nome.
24 - Tudo prontinho, agora teremos o nosso TOP  no Outlook ou no Win Mail.

25 - O próximo passo é alterar a cor contrastante por uma cor que combine com o nosso TOP. 


  Se vamos alterar a cor contrastante por que a colocamos?

Porque o Outlook e o Win Mail somente não fornece todas as cores. E já deixando com uma cor qualquer... deixamos o código pronto no Outlook e no Win Mail para alterarmos a cor. 

26 -  Já sabemos, de tutorial anterior, que a linha de código responsável pelo back é:

<BODY bgColor=#ff00ff

background = "( endereço de seu Top)" </Body>

27 - Vamos apenas alterar o código da cor...Apagamos a que está e colocamos o código da cor que combine com nosso Top.
Veja como ficou meu papel já alterado e na abinha "Origem":

28 -  Volte no Front Page copie sua tabela e cole no Outlook ou no Win Mail
Veja como ficou:

29 - Coloco na abinha de "Origem"
30 - Localizo o código responsável pela tabela:

Depois da segunda TABLE  (a primeira TABLE é a da tabela transparente) vou colocar o código do filtro abaixo ( esse filtro vai colocar sombra em volta da tabela):

 style="FILTER: shadow(color=#202020)"

Atrás da palavra "color = " está o código da cor do efeito. Para trocar a cor, basta apagar o código da cor e colocar o código da cor que preferir.

Veja como ficará nossa tabela: ( Não esqueça de colocar na abinha de Visualizar)

Linda , não??


31 - Volte para abinha "Editar" e insira o texto:

Não sei... se a vida é curta ou longa demais pra nós,
mas sei que nada do que vivemos tem sentido, se não tocamos o coração das pessoas.

Muitas vezes basta ser: colo que acolhe, braço que envolve, palavra que conforta, silêncio que respeita, alegria que contagia, lágrima que corre, olhar que acaricia, desejo que sacia, amor que promove.

E isso não é coisa de outro mundo, é o que dá sentido à vida.
É o que faz com que ela não seja nem curta, nem longa demais, mas que seja intensa, verdadeira, pura... enquanto durar...
(desconheço o autor)

32 -  Clico na abinha origem e procuro pelo início do texto, onde irá aparecer a seguinte linha ..pela primeira vez :

< FONT

Pra mim está logo abaixo da linha <TD bg Color=#e9eef2>

Coloco o cursor logo atrás dessa linha e dou enter uma vez e insiro seguinte código:

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

Veja como ficará::

Veja que efeito lindo no texto:

  Se  vc achou que fonte ficou pequena aumente ela no próprio Outlook, selecionando todo o texto e em tamanho. Use o mesmo processo para alterar a cor da fonte. Eu alterei a cor da fonte para branca, o efeito ficou mais visível assim como o texto.

 33 - Complemente a formatação, agora de acordo com sua preferência. Pode ser com alguns gifs, título e assinatura... Eu usei uma  barra.

    ATENÇÃO

Se quando você for visualizar estiver mais ou menos como está abaixo, vá na Origem e faça o seguinte:

a) Localize o código &nbsp; Ele é o responsável por cada espaço na parte superior entre a Tabela azul e a outra mais clara... basta apagá-lo na origem que a parte superior ficará fininha... o mesmo se aplica se houver espaço na parte inferior.

b) Para tirar a margem grossa das laterais, (podem aparecer também, maiores de um lado e menores do outro) volte para a Editar e clique na área do texto... surgirão os quadradinhos que delimitam a caixa de texto.

c) Encoste o mouse no quadradinho superior direito e assim que o mouse virar uma setinha, arraste para a direita até que fique da mesma largura da parte superior. Se necessário faça o  mesmo do lado esquerdo.

Veja: Ficou certinha.

34 - Insira o script que vai colorir a barra de rolagem.
Uma das linhas de código responsável pela alteração de cor da barra de rolagem é essa abaixo:

Scritp para Colorir Barra de Rolagem

<STYLE type=text/css>BODY {

SCROLLBAR-BASE-COLOR:código da cor

}

</STYLE>

Vou selecionar todo esse código, copiar (Ctrl+C) e colar ( Ctrl+ V)
No Outlook coloco na abinha ";;Origem

<STYLE></STYLE>

Essa linha está no cabeçalho do e-mail

Veja como ficou já com o código da barra de rolagem já inserido:

35 - Prontinho.. Para visualizar o efeito coloque na abinha Visualizar
36 - Depois de checado o efeito volte para a abinha  Editar
37 - Insira a Música.

Scritp para Mensagem no Rodapé

<SCRIPT language=JavaScript>
ScrollSpeed = 600;
ScrollChars = 4;
function SetupTicker()
{
msg = " Escreva Aquii "
RunTicker();}
function RunTicker() {
window.setTimeout('RunTicker()', ScrollSpeed);
window.status = msg;
msg = msg.substring(ScrollChars) + msg.substring(0,ScrollChars); }
SetupTicker();
</SCRIPT>

TI 28  - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial.
Ele deverá conter:
Uma mensagem
Uma Música
Para complementar :
Filtro para tabela
Um script para  colorir a barra de rolagem
Um script para mensagem no rodapé.




Não esqueça, por favor:
Colocar no assunto: seu nome ou nick  TI28 - Filtros - Efeito Sombra na Tabela
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

Pronto!.. Para visualizar o efeito coloque na abinha "Visualizar".
Depois de checado o efeito volte para a abinha  "Editar" e complete a formatação de sua mensagem.

Copyrightt© 2002/2007 Dama Da Noite * Todos os direitos reservados*

Esse  tutorial foi criado por brisa®  em 14/03/2006, 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/19988.