Background Fixo X Margem Esquerda

Nesse tutorial vamos aprender a fixar o background (plano de fundo) da nossa mensagem.
Fixando o background movimentamos a barra de rolagem e o texto sobre o fundo.
O código que comanda para que o background fique fixo é:

BACKGROUND-attachment:fixed

Vejamos, agora, onde iremos inserir esse código.

Primeiro escolha um papel de Carta de seu gosto.

Formatando pelo Assistente do Outlook:

1.a - Use os passos: "Formatar / Aplicar Papel de Carta / Mais papel de carta / Criar um novo"
(Se ainda tiver dúvida desse procedimento)
1.b - Depois do e-mail formatado pelo assistente do Outlook, clique na abinha "Origem"
para alterar o código:
Vai estar assim:

(aqui)

<STYLE>
BODY {
BACKGROUND-POSITION: left top;
FONT-SIZE: 14pt;
MARGIN-LEFT: 140px;
COLOR: #000000;
BACKGROUND-REPEAT: repeat-y;
FONT-STYLE: italic;
FONT-FAMILY: Bookman Old Style
}
</STYLE>

Vamos alterar colocando o comando de fixar o fundo:

<STYLE>
BODY {
BACKGROUND-POSITION: left top;
FONT-SIZE: 14pt;
MARGIN-LEFT: 140px;
COLOR: #000000;
BACKGROUND-attachment:fixed;
FONT-STYLE: italic;
FONT-FAMILY: Bookman Old Style
}
</STYLE>

Para não ter que repetir todo esse caminho cada vez que usar esse processo,
basta ter esse código fonte a mão:

<STYLE>BODY {
BACKGROUND-POSITION: left top;
FONT-SIZE: 14pt;
MARGIN-LEFT: 140px;
COLOR: #000000;
BACKGROUND-attachment:fixed;
FONT-STYLE: italic;
FONT-FAMILY: Bookman Old Style
}
</STYLE>

***************Vamos entender o que cada item significa. Essa informação é importante
para saber como fazer as alterações:

BACKGROUND-POSITION: left top: significa que há uma margem à esquerda.

FONT-SIZE: 14pt: Tamanho da fonte, nesse caso é de 14pt .
Você pode alterar o tamanho da fonte, basta alterar o valor.

MARGIN-LEFT: 140px: Esse item é muito importante, porque ele determina o tamanho que
deverá ter essa margem, nesse caso ele está determinando que há margem é de 140 px mas você
poderá alterar esse valor de acordo com sua necessidade.

Eu particularmente acho que fica muito feio uma formatação, onde a escrita fica
em cima da imagem lateral. Usando esse código evitamos que isso aconteça. Porque ele nos permite
a mudar os valores até que toda a escrita saia de cima da imagem.

Veja os exemplos:

 

COLOR: #000000: Cor da fonte que vai ser usado na mensagem, nesse caso a cor é preta.
Você pode alterá-la, basta mudar o código da cor.

BACKGROUND-attachment:fixed: Comando responsável pelo fundo fixo ou não,
nesse caso ele está fixo.Você pode alterar esse comando para que o fundo se mexa com a mensagem.

FONT-STYLE: italic; Responsável pelo estilo da escrita, nesse caso eu coloquei "italic" ,
quer dizer que minha fonte ao escrever ficará inclinadinha. Você também pode alterá-lo,
basta substituir pelo estilo desejado.

FONT-FAMILY: Bookman Old Style: Fonte que está sendo usada na mensagem.
Nesse caso a fonte é a "Bookman Old Style" , você pode alterar para uma fonte de
sua preferência. Mas lembrando que: use sempre fontes que são consideradas fontes
padrão do Windows

Para assinar sua mensagem, use o seguinte script (aqui):

<SCRIPT language=JavaScript>
 
<!--
 
msg = " ..:: Escreva Aqui ::..  " ;
 
timeID = 10;
stcnt = 16;
wmsg = new Array(33);
wmsg[0]=msg;
blnk = " ";
for (i=1; i<32; i++)
{
b = blnk.substring(0,i);
wmsg[i]="";
for (j=0; j<msg.length; j++) wmsg[i]=wmsg[i]+msg.charAt(j)+b;
}
 
function wiper()
{
if (stcnt > -1) str = wmsg[stcnt]; else str = wmsg[0];
if (stcnt-- < -40) stcnt=31;
status = str;
clearTimeout(timeID);
timeID = setTimeout("wiper()",100);
}
 
wiper()
// -->
 

<!-- end -->
 
</SCRIPT>

Se tiver dúvidas, pergunte. Terei muito prazer em ajudá-los.

Exemplo da aula

Exercício

Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial,
usando um papel de carta com margem lateral esquerda, com fundo fixo.

Ele deverá conter:

Mensagem
Música
Uma imagem, ou gifs,
Assinatura
Borda Colorida
Barra de Rolagem completa
Script para mensagem no rodapé
Assinatura (opcional)
Tenha um ótimo Trabalho

Peketita's Designer