Formatação Completa + Letreiro Digital

Hoje vamos aprender a fazer uma formatação completa + Letreiro Digital!

Espero que vocês gostem, porque é muito trabalhoso.

Então vamos começar?

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

 

O Background pode usar um que vocês já tenham feito nas aulas de psp...

Se ainda não fez nenhum vai nesse site e escolhe um:

http://www.nena.com.br/

Vamos começar?

1 - Abra o Front Page e crie um nova página em branco.
Antes de fazer alguma coisa, salve essa página na sua pasta de Papéis de Carta, com o nome do back como você quiser.

2. Clique com o botão direito do mouse no meio da página, e abra Propriedades da Página:

Na janela que abrir, vá na aba formatação e procure a imagem que você vai colocar no plano de fundo e dê OK

de OK.

Ajuste a margem esquerda no código, como está no print

viu que tem <html> e depois <head>?
Em baixo, copie o código:

<style>
body {
margin-left: 350px;
}
</style>

<observação - aqui você vai precisar testar até o texto não ficar por cima da imagem. no meu deu 350px>

2 - Coloque o cursor na posição onde você deseja que a tabela seja inserida.

Dê preferência, no centro da página.

3 - No menu do Front Page clique em "Tabela/Inserir/Tabela".

5- insira a tabela.

Configurações:

Linhas = 1
Colunas = 1
Alinhamento = Centralizado
Flutuar = padrão
Enchimento da célula = 2
Especificar a largura = 60%
Espaçamento da célula = 2
Bordas - Tamanho = 8
Borda clara = Um tom mais claro usado no back (no meu deixei automatico)
Borda escura = Um tom mais escuro usado no back
Plano de fundo = Um tom mais claro usado no back
Veja no print:

mude apenas as cores de acordo com seu back

e faça as configurações: do print:

8 - Adicionar um letreiro digital:

Clique onde deseja adicionar o letreiro digital dentro da tabela, digite e selecione o texto.

No menu Inserir, clique em Componente da Web. Como no print:

9- E continue, como no print:

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á

Obs.: 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.

Veja como deixei o meu::

6-Salve seu trabalho.
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.

Veja como salvar:

7- Coloque sua mensagem (escolhida por você)

8- Enfeite com gifs bem pequenas.

9- Abra o OE e procure a mensagem que você salvou e vamos continuar.

Veja como localizar a sua mensagem:

Dica: Use sempre fontes que já vieram com o Windows.

11- Vamos colorir as barras de rolagem. Na aula de ontem mandei o script e ensinei como colocar.

Dica: Coloque todos scripts numa Pasta para ficar mais fácil quando precisar.

12- Como vou usar uma mids do meu pc não preciso de scripts para mids.

13- Agora vamos colocar um script de rodapé (aqui) e aqui também:

<SCRIPT language=JavaScript>

<!-- This script and many more are available free online at -->

<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin

var osd = " Seu texto aqui "

osd +=" ";

var timer;

var msg = "";

function scrollMaster () {

msg = customDateSpring(new Date())

clearTimeout(timer)

msg += " " + showtime() + " " + osd

for (var i= 0; i < 100; i++){

msg = " " + msg;

}

scrollMe()

}

function scrollMe(){

window.status = msg;

msg = msg.substring(1, msg.length) + msg.substring(0,1);

timer = setTimeout("scrollMe()", 200);

}

function showtime (){

var now = new Date();

var hours= now.getHours();

var minutes= now.getMinutes();

var seconds= now.getSeconds();

var months= now.getMonth();

var dates= now.getDate();

var years= now.getYear();

var timeValue = ""

timeValue += ((months >9) ? "" : " ")

timeValue += ((dates >9) ? "" : " ")

timeValue = ( months +1)

timeValue +="/"+ dates

timeValue +="/"+ years

var ap="A.M."

if (hours == 12) {

ap = "P.M."

}

if (hours == 0) {

hours = 12

}

if(hours >= 13){

hours -= 12;

ap="P.M."

}

var timeValue2 = " " + hours

timeValue2 += ((minutes < 10) ? ":0":":") + minutes + " " + ap

return timeValue2;

}

function MakeArray(n) {

this.length = n

return this

}

monthNames = new MakeArray(12)

monthNames[1] = "Janeiro"

monthNames[2] = "Fevereiro"

monthNames[3] = "Março"

monthNames[4] = "Abril"

monthNames[5] = "Maio"

monthNames[6] = "Junho"

monthNames[7] = "Julho"

monthNames[8] = "Agosto"

monthNames[9] = "Setembro"

monthNames[10] = "Outubro"

monthNames[11] = "Novembro"

monthNames[12] = "Dezembro"

daysNames = new MakeArray(7)

daysNames[1] = "Domingo"

daysNames[2] = "Segunda"

daysNames[3] = "Terça"

daysNames[4] = "Quarta"

daysNames[5] = "Quinta"

daysNames[6] = "Sexta"

daysNames[7] = "Sábado"

function customDateSpring(oneDate) {

var theDay = daysNames[oneDate.getDay() +1]

var theDate =oneDate.getDate()

var theMonth = monthNames[oneDate.getMonth() +1]

var dayth=""

if ((theDate == 1) || (theDate == 21) || (theDate == 31)) {

dayth="";

}

if ((theDate == 2) || (theDate ==22)) {

dayth="";

}

if ((theDate== 3) || (theDate == 23)) {

dayth="";

}

return theDay + ", " + theMonth + " " + theDate + dayth + ","

}

scrollMaster();

// End -->

</SCRIPT>

Viu que chique? Tem calendário e tudo.

 

Pronto, agora é salvar!

Agora vá ao OE, e procure lá

 

Exercício

Envie para o grupo uma mensagem formatada como foi ensinado nesse tutorial.

Ela deve conter tudo que foi ensinado ou falado no tutorial e não esquecer a assinatura e o anti banner.

Oberve o modelo

Bom trabalho

Peketita's Designer
Maio 2010