Curso de Formatação Intermediário- Lição 17

Imagem que vai aparecendo



 

Existe um efeito bonitinho para que dá um charme especial às mensagens de e-mail quando inserimos uma imagem. Com um simples script, podemos fazer com que a imagem vá aparecendo aos poucos.

Se você quiser incluir o efeito de uma imagem que vai aparecendo aos poucos, como neste exemplo, faça o seguinte:

Abra uma nova mensagem e delete tudo o que aparece na aba" Origem".

Cole o seguinte código:


----------------------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1"><LINK
href="../estilo.css" rel=stylesheet>
<SCRIPT language=javascript>
ie4 = ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4 ));
function ie4over(){
if (ie4){
event.srcElement.style.color="#FFFF00";
event.srcElement.style.cursor = "hand";
}
}
function ie4out(){
if (ie4){
event.srcElement.style.color="#80FFFF";
event.srcElement.style.cursor = "auto";
}
}
</SCRIPT>

<META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
<BODY text=#000000 vLink=#ff6600 aLink=#ff9900 link=#ff6600 bgColor=#ffffff
topMargin=0 marginheight="0">

<TABLE cellSpacing=0 cellPadding=0 width=430 border=0>
<TBODY>
<TR>
<TD>
<DIV><IMG id=imagem style="FILTER: revealtrans(duration=2.8 ,transition=12); VISIBILITY: hidden"
height=200 src="endereço da imagem algo do tipo C:\Meus documentos\Minhas figuras\1.gif" width=250 border=0>
<SCRIPT language=VBScript>
Sub Window_onLoad()
imagem.filters.revealtrans.Apply()
imagem.style.visibility = ""
imagem.filters.revealtrans.Play()
end Sub
</SCRIPT>
</DIV>
</TD></TR></TBODY></TABLE></BODY></HTML>


----------------------------------------------------------------------------------------------------------------------------------------------------------------

Os itens que aparecem aqui no código em vermelho devem ser alterados. Em src="endereço da imagem" é que você vai indicar o endereço de sua imagem, isto é, em qual arquivo está guardada a imagem que você quer usar aqui. (Observe que há uma especificação para o tamanho desta imagem: height=200 e width=250, isto é, altura de 200 px e largura de 250 px. Você pode alterar esses tamanhos de acordo com o tamanho da imagem que pretende colocar.)

Veja aqui como localizar o "endereço da imagem".

Depois é só voltar em "Editar" e fazer as formatações de papel de carta, música e texto.

O efeito só pode ser visto, depois que você clicar em "Visualizar".

 

Tarefa:

Preste atenção porque são vários itens para uma única tarefa!

1. Escolher um fundo ou papel de carta para seu e-mail.
2. Escolher uma imagem que combine e aplicar o efeito da lição.
3.Usar barra de rolagem colorida e moldura no e-mail (não na imagem)
4. Inserir uma música
5.Escolher uma fonte e uma cor para ela.
6. Escrever uma mensagem.

Formate uma mensagem de e-mail, usando um back (ou papel de carta que seja proporcional ao tamanho de sua imagem, isto é, que não tenha uma lateral muito larga para que a imagem não fique "perdida"). Aplique o efeito "imagem que vai aparecendo", insira uma música, coloque uma moldura no e-mail e use uma barra de rolagem colorida. Escreva algo com uma cor de fonte que fique bem com o restante do e-mail, insira seu cartão de visitas e envie ao grupo.

Endereço do grupo: tutorial_emails@yahoogrupos.com.br

Lembre-se de indicar no campo Assunto: Nome do aluno, Nível e Número da lição. Caso a lição tenha sido refeita, inclua a palavra "refeita".

Lição elaborada por Lilian Russo

Lilian Russo - Todos os Direitos Reservados - ©2002/2008




.