31-Letreiro digital - formatação inter

    

31-Letreiro digital

Criando uma formatação completa + Letreiro Digital
Tema: Bom Dia
Tabela para estudo:

                          

Bom Dia Amigos

Primeiramente vamos preparar o material que vamos usar para formatar esse e-mail:

Iremos precisar de um back com barra lateral à esquerda
Uma Tabela
Um título com Letreiro Digital
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 barra de rolagem
Script para mensagem no rodapé.
Script para barra de rolagem automática


A - Criando o Background

Back com dings

Material aqui e aqui

1-Abra uma imagem de 300X300 pxls
2-Preencha com a cor que quer para o fundo
3-Add new layer

4 -Vá na pallete de cores e escolha um gradiente no Background

5 -Configure sua Ferramenta de texto assim :

    

6-Com ele ainda selecionado vá em em Effects>3D Effects>Inner Bevel

  

7-Agora vá em em Effects>3D Effects>Drop Shadow (mantenha ainda a Ding selecionada)

Tire a seleção Crtl+D
8- Add new layer , arraste para baixo da moldura e carimbe seu tube com 60% do tamanho , ou use o RESIZE , que está em Images>Resize em 60%

  

Se quiser pode aplicar o passo 7 no tube
Para fazer um papel de  carta, abra uma imagem de 1024X300, aplique uma das cores do tube e cole a imagem trabalhada em cima do lado esquerdo, veja o exemplo aqui :

Assine e Salve em JPG

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, inserira 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:2
Colunas:1
Alinhamento =  centralizado
Flutuar: Direito
Enchimento da célula = 5
Especificar a largura =  60%
Espaçamento da célula  =  10
Bordas -  Tamanho =  70
Cor da Borda: Um tom mais escuro usado no back
Borda clara = Um tom mais escuro usado no back
Borda escura = Um tom mais escuro usado no back
Plano de fundo =  Automático

Para o Front Page 2003

Veja como ficará:

Veja como ficará:

Propriedade da Célula:

Cursor dentro da tabela - botão direito do  mouse/ Propriedade da célula.
Coloque um tom de rosa bem clarinho na primeira  e na segunda linha.

Para o Front Page 2003
Veja como ficará:

7 -Reserve.

C - Criando um título com letreiro digital no Front Page 2003
8 -  Adicionar um letreiro digital:
Clique onde deseja adicionar o letreiro digital, digite e selecione o texto.
No menu Inserir, clique em Componente da Web.

Em Tipo de componente, clique em Efeitos Dinâmicos.

Em Escolher um efeito, clique duas vezes em Letreiro Digital.
1 - Em Texto: Coloque o cursor dentro da área do texto e  digite o texto que aparecerá no letreiro
2 - Ajuste os valores em  Direção ,Velocidade, Comportamento e Tamanho.

Direção: Escolhe para qual lado o texto se movimentará

Velocidade: Intervalo: Determina o tempo que o texto do letreiro digital aguardará para se mover (em milisegundos)
                    Quantidade: Determina a quantidade de velocidade do texto.

Comportamento: Define como o texto será animado
                   Rolar: O texto passa na frente da tela na direção marcada antes.
                   Deslizar: O texto passa na frente da tela apenas uma vez , quando chega a borda oposta...pára.
                   Alternar: Alterna o texto entre rolagem e deslizamento.

Tamanho: Definimos a altura e a largura do Letreiro Digital( pixels).


3  - Em Repetir: Define como você  deseja que o letreiro funcione continuamente ou o número de vezes que ele funcionará.
4 - Em Cor do pano de fundo: Aqui você poderá escolher como quer o plano de fundo onde o letreiro se deslocará. Automático define a cor do plano de fundo como transparente.
5- Clicando em Estilo você pode alterar as configurações de fonte, parágrafo e borda do seu letreiro.
6 - Clique em "OK". Quando tudo estiver ao seu agrado. Se desejar alterar algo basta colocar o cursor sobre o letreiro / botão direito do mouse / Propriedades do Letreiro Digital  ou simplesmente dê dois cliques sobre o letreiro digital.

Veja como deixei o meu:

  Salve sua página e clique na "aba" Visualização do FrontPage ou no botão Visualizar no Navegador na Barra de Ferramenta Padrão, para ver o letreiro funcionando.

Bom Dia Amigos

C- Mensagem:

Eu escolhi essa:

DEUS É

Deus é a brisa da manhã
que toca suavemente o seu rosto,
é a força do mar que vai e vem em doce balanço.

Deus
é o primeiro raio de sol que aquece seu corpo,
é também o último, que traz a noite para o teu descanso.

Deus
é a gota de chuva que renova a vida,
é o cheiro da terra molhada que se espalha pelo vento.

Deus
é a calma do crepúsculo,
é o mar sem revolta,
é o infinito do céu azul
que te cobre a cabeça.

Deus
 é misericordiosa planta,
que cede seus elementos
 para a cura das tuas feridas.

Deus
 é a bendita fruta que te alimenta.

Deus
 é a sabedoria
dos que se dedicam a ensinar,
curar,
ouvir,
diagnosticar,
 consolar,
dividir.

Deus
não subtrai, soma, multiplica,
e por amor a todos nós,
 dividiu seu Filho mais amado
 com quem não soube reconhecer
 a sua Luz.

Deus
 é amor, é vida e justiça,
 e por tantas coisas que nos oferece,
nós agradecemos
e pedimos humildemente,
 que nossa casa,
seja digna de receber
ao menos uma réstia de sua Luz,
 através do seu filho,
nosso querido e amado, Jesus.

Que Ele esteja em sua casa
 ainda hoje e te dê
a vida com abundância,
 afinal de contas,
 você é uma das pessoas
mais importantes
na lista de Deus!

Amém.

Retirado do Site: http://www.cantinhodeluz.cjb.net/ 

E - Gifs:

      

Segunda parte do tutorial

Criando uma formatação completa + Letreiro Digital
Tema: Bom Dia

Segunda Parte

10 - Abra o Outlook
11 - Crie um novo e-mail
12 - Clique em 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 você salvou o background treliça. Encontrado o local dê OK na janela. Vai voltar a mesma janela.

Nessa mesma janela configure os outros itens:
Posição: Superior / Esquerda
Lado a lado: Verticalmente

16 - Clique em Avançar.
17 - Na próxima janela você irá configurar a fonte, seu tamanho e estilo. Se a quer em negrito ou itálica Use sempre fontes que já vieram com o Windows.
Pois 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 porque ela é responsável pela margem.
Aqui no nosso caso, essa margem esquerda será responsável para que a a nossa tabela não fique sobre a imagem.. Portando vou colocar um valor na margem esquerda para que a escrita fique totalmente fora da imagem.
20 - Clique em Avançar.
21 - Na próxima janela, batize seu papel de carta.
22 - Clique em Concluir.
23 - Voltará para primeira janela porque agora o Outlook vai dar um nome para seu papel de carta em htlm. Basta nessa janela você clicar em OK. E tudo vai estar certinho, exceto se você já tivesse esse nome em outro papel de carta salvo. Neste caso o próprio programa irá pedir para você substituir o nome.
24 - Tudo prontinho agora você já tem seu background devidamente formatadinho esperando  a tabela.

25 - Para inserir a tabela  basta copiá-la no FrontPage e colá-la no Outlook:

Bom Dia Amigos

26 - Insira o filtro na tabela: style="filter: Alpha(Opacity=70)"

 Valor da opacity=  coloque um valor de acordo com seu gosto pessoal

27 - Insira o texto, selecione-o todo e altere a sua cor:

Bom Dia Amigos DEUS É Deus  é a brisa da manhã  que toca suavemente o seu rosto, é a força do mar que vai e vem em doce balanço. Deus é o primeiro raio de sol que aquece seu corpo,  é também o último, que traz a noite para o teu descanso. Deus é a gota de chuva  que renova a vida, é o cheiro da terra molhada  que se espalha pelo vento. Deus é a calma do crepúsculo, é o mar sem revolta, é o infinito do céu azul que te cobre a cabeça. Deus  é misericordiosa planta, que cede seus elementos  para a cura das tuas feridas. Deus  é a bendita fruta que te alimenta. Deus  é a sabedoria dos que se dedicam a ensinar, curar, ouvir, diagnosticar,  consolar, dividir. Deus não subtrai, soma, multiplica, e por amor a todos nós,  dividiu seu Filho mais amado  com quem não soube reconhecer  a sua Luz. Deus  é amor, é vida e justiça,  e por tantas coisas que nos oferece, nós agradecemos e pedimos humildemente,  que nossa casa, seja digna de receber ao menos uma réstia de sua Luz,  através do seu filho, nosso querido e amado, Jesus. Que Ele esteja em sua casa  ainda hoje e te dê a vida com abundância,  afinal de contas,  você é uma das pessoas mais importantes na lista de Deus! Amém.

28- Enfeito com algumas gifs:

Bom Dia Amigos

DEUS É Deus  é a brisa da manhã  que toca suavemente o seu rosto, é a força do mar que vai e vem em doce balanço. Deus é o primeiro raio de sol que aquece seu corpo,  é também o último, que traz a noite para o teu descanso. Deus é a gota de chuva  que renova a vida, é o cheiro da terra molhada  que se espalha pelo vento. Deus é a calma do crepúsculo, é o mar sem revolta, é o infinito do céu azul que te cobre a cabeça. Deus  é misericordiosa planta, que cede seus elementos  para a cura das tuas feridas. Deus  é a bendita fruta que te alimenta. Deus  é a sabedoria dos que se dedicam a ensinar, curar, ouvir, diagnosticar,  consolar, dividir. Deus não subtrai, soma, multiplica, e por amor a todos nós,  dividiu seu Filho mais amado  com quem não soube reconhecer  a sua Luz. Deus  é amor, é vida e justiça,  e por tantas coisas que nos oferece, nós agradecemos e pedimos humildemente,  que nossa casa, seja digna de receber ao menos uma réstia de sua Luz,  através do seu filho, nosso querido e amado, Jesus. Que Ele esteja em sua casa  ainda hoje e te dê a vida com abundância,  afinal de contas,  você é uma das pessoas mais importantes na lista de Deus! Amém.

29 - Inserimos o script que vai colorir a barra de rolagem.

Umas das linhas de código responsável pela alteração de cor da barra de rolagem é essa abaixo:

Script para Colorir Barra de Rolagem

<STYLE type=text/css>BODY {
SCROLLBAR-BASE-COLOR:código da cor
}
</STYLE>

Selecione todo esse código e copie (Ctrl+C)

No Outlook coloque na abinha "Origem" e cole ( Ctrl+ V) esse código logo abaixo dessa linha: <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:

30 - Prontinho.. Para visualizar o efeito coloque na abinha Visualizar.
31 - Depois de checado o efeito volte para a abinha  Editar.
32 - Insira a Música.
33 - Complemente com o script do rodapé,  já com o script da barra de rolagem automática:

Script para Mensagem de Rodapé com Barra de Rolagem Automática

 <SCRIPT language=JavaScript>
<!--
ScrollSpeed = 250; // milliseconds between scrolls
ScrollChars = 4; // chars scrolled per time period
function SetupTicker(){
// add space to the left of the message
msg = " **** GRUPO PSPBRASIL - FORMATAÇÃO**** ";

RunTicker();}

function RunTicker() {
window.setTimeout('RunTicker()',ScrollSpeed);
window.status = msg;
msg = msg.substring(ScrollChars) + msg.substring(0,ScrollChars);}
SetupTicker();
<!-- end -->
</SCRIPT>

<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV><BGSOUND balance=0 src="" volume=0 loop=infinite>
<DIV align=center>&nbsp;</DIV>
<SCRIPT language=JavaScript1.2>
// change 1 to another integer to alter the scroll speed. Greater is faster
var speed=1
var currentpos=0,alt=1,curpos1=0,curpos2=-1

function initialize(){
startit()
}

function scrollwindow(){
if (document.all)
temp=document.body.scrollTop
else
temp=window.pageYOffset
if (alt==0)
alt=1
else
alt=0
if (alt==0)
curpos1=temp
else
curpos2=temp
if (curpos1!=curpos2){
if (document.all)
currentpos=document.body.scrollTop+speed
else
currentpos=window.pageYOffset+speed
window.scroll(0,currentpos)
}
else{
currentpos=0
window.scroll(0,currentpos)
}
}

function startit(){
setInterval("scrollwindow()",80)
}
window.onload=initialize
</SCRIPT>

Dê uma espiadinha no seu e-mail na abinha "Visualizar"
Depois volte a abinha  "Origem" para complementar o dados de envio e "Enviar"
Se tiver dúvidas não deixe de perguntar, pois teremos muito prazer em ajudá-los

O exemplo do E-mail Formatado está anexado no zip do material.





TI31 -   Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial.
Ele deverá conter:
Um back com barra lateral à esquerda
Uma Tabela
Um título com Letreiro Digital
Uma mensagem
Algumas gifs para enfeitar o e-mail ( opcional)
Uma assinatura (opcional)
Música
Para complementar :
Um filtro para a tabela
Script para barra de rolagem
Script para mensagem no rodapé.
Script para barra de rolagem automática
Não esqueça de colocar o anti-banner.
Não é necessário usar o material fornecido nesse tutorial, você pode usar o tube, o musica , 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 - TI31 - Exercitando Tabelas - Tema: Bom Dia
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  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/1998.