Curso de Formatação Super 10

Efeito prático para e-mails: script de Bill Scott - ajusta o tamanho do texto e da imagem




Este script é bastante interessante porque ajusta automaticamente o tamanho da imagem que inserimos e deixa o texto alinhado e adequado ao tamanho da figura. Além disso, o script cria uma "sombra" em preto e branco da imagem que inserimos, funcionando como um papel de carta. Não é aconselhável usar nenhum papel de carta neste script. Se quiser, opte por algum back ou tile.

O texto pode ser escrito pela aba "Editar", dando um duplo clique no espaço reservado ao mesmo. (Na verdade, existe uma tabela transparente onde iremos escrever o texto, por isso, precisamos dar duplo clique para conseguir escrever.) É bom deixar um espaço em branco no início e no fim do texto para que ele seja melhor visualizado.

Veja um exemplo aqui

Podemos fazer variações neste script.

Por exemplo:

A cor do fundo (back) pode ser alterada aqui:

<BODY language=VBS onmousemove=movText bgColor=#f3e2a5>
<DIV id=left1
style="FONT-SIZE: 1px; Z-INDEX: 100; LEFT: -1800px; VISIBILITY: hidden; WIDTH: 2px; LINE-HEIGHT: 1px; POSITION: absolute; TOP: 0px; HEIGHT: 0px; BACKGROUND-COLOR: #f3e2a5">

A transparência da imagem que aparece como "sombra", pode ser controlada nesta parte do código:

Image1a.style.filter="revealTrans fliph(enabled=1) alpha(opacity=30, enabled=1) gray blur(direction=315, strength=15)"

O efeito de transição da imagem, pode ser alterado aqui:

Sub expandImage1()
Image1.filters(0).Apply()
Image1.style.visibility="visible"
Image1.filters(0).Transition=10
Image1.filters(0).Play(1.200)

Image1a.filters(0).Apply()
Image1a.style.visibility="visible"
Image1a.filters(0).Transition=10
Image1a.filters(0).Play(1.200)

letter.filters(0).Apply()
letter.style.visibility="visible"
letter.filters(0).Transition=12
letter.filters(0).Play(5.000)

Deixei um script prontinho, com bordas, barra de rolagem colorida e os itens que podem ser alterados assinalados em vermelho.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns:o = "urn:schemas-microsoft-com:office:office"><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.6000.16674" name=GENERATOR></HEAD>
<BODY language=VBS onmousemove=movText bgColor=#f3e2a5>
<DIV id=left1
style="FONT-SIZE: 1px; Z-INDEX: 100; LEFT: -1800px; VISIBILITY: hidden; WIDTH: 2px; LINE-HEIGHT: 1px; POSITION: absolute; TOP: 0px; HEIGHT: 0px; BACKGROUND-COLOR: #f3e2a5"></DIV><!--Aqui vai sua imagem--><!--Não precisa especificar a largura e a altura da imagem--><IMG
id=Image1
style="FILTER: revealTrans; LEFT: -1800px; VISIBILITY: hidden; POSITION: absolute"
src="endereço da imagem" border=0>
<DIV class=letterStyle id=letter
style="FILTER: revealTrans; LEFT: 0px; VISIBILITY: hidden; OVERFLOW: hidden; WIDTH: 350px; POSITION: absolute; TOP: 0px; HEIGHT: 2000px">
<DIV id=text
style="LEFT: 5%; WIDTH: 90%; POSITION: absolute; TOP: 5%; HEIGHT: 90%">
<DIV align=justify><STRONG></FONT></STRONG></DIV>
<P class=MsoNormal style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center"
align=center><FONT face="Comic Sans MS">Texto aqui</FONT></P>
<P class=MsoNormal style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center"
align=center><FONT face="Comic Sans MS"></FONT>&nbsp;</P>
<P class=MsoNormal style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center"
align=center><FONT face="Comic Sans MS"></FONT>&nbsp;</P>
<P class=MsoNormal style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center"
align=center><FONT face="Comic Sans MS"></FONT>&nbsp;</P>
<P class=MsoNormal style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center"
align=center><FONT face="Comic Sans MS"><A
href="http://ilove.terra.com.br/lili/palavrasesentimentos/">Lili
Russo</FONT></A></FONT></P></FONT></DIV></DIV>
<DIV></DIV><!--VERMEER BOT=HTMLMarkup Alt="[<b>Ticker Script</b>]" StartSpan -->
<STYLE>BODY {
BORDER-RIGHT: #4a3c7b 3px double; BORDER-TOP: #4a3c7b 3px double; BORDER-LEFT: #4a3c7b 3px double; SCROLLBAR-ARROW-COLOR: #4a3c7b; BORDER-BOTTOM: #4a3c7b 3px double; SCROLLBAR-BASE-COLOR: #f3e2a5
}
A:link {
FONT-SIZE: 8pt; COLOR: #000000
}
A:visited {
FONT-SIZE: 8pt; COLOR: #000000
}
A:active {
FONT-SIZE: 8pt; COLOR: #000000
}</STYLE>

<SCRIPT language=VBS>

'----------------------------------------------------------------------------

' Subdued Photo, by Bill Scott

'----------------------------------------------------------------------------

' All HTML and script by Bill Scott, May, 2000

' billscott@redrivernet.com


' Subdued Photo HTML and Script follows:


Option Explicit


Dim screenx, screeny, proportion

Dim xxtemp, tt

Dim Image1aHTML

Dim startFlag

startFlag=0

Sub Window_OnLoad()

document.body.scroll="yes"


startFlag=1

screenx=document.body.clientWidth

screeny=document.body.clientHeight

proportion=Image1.offsetHeight/Image1.offsetWidth


Image1.style.posHeight=screeny

Image1.style.zIndex=1


Image1.style.posWidth=Image1.style.posHeight/proportion

if screenx-Image1.style.posWidth<300 then Image1.style.posWidth=screenx-300

Image1.style.posTop=0

Image1.style.posLeft=screenx-Image1.style.posWidth


Image1aHTML=Image1.outerHTML


Image1aHTML=Replace(Image1aHTML,"id=Image1","id=Image1a")

Image1.insertAdjacentHTML "BeforeBegin",Image1aHTML

Image1a.style.filter="revealTrans fliph(enabled=1) alpha(opacity=30, enabled=1) gray blur(direction=315, strength=15)"

Image1a.style.posLeft=0

Image1a.style.posWidth=screenx-Image1.style.posWidth

left1.style.posTop=0

left1.style.posLeft=Image1.style.posLeft

letter.style.posHeight=screeny

letter.style.posWidth=left1.style.posLeft

letter.style.posLeft=0

letter.style.posTop=0

xxtemp=0

left1.style.visibility="visible"

drawLinesLeft1

End Sub


Sub drawLinesLeft1()

xxtemp=xxtemp+10

if xxtemp>screeny then

left1.style.posHeight=screeny

expandImage1

Exit Sub

end if

left1.style.posHeight=xxtemp

SetTimeOut"drawLinesLeft1",0

End Sub


Sub expandImage1()

Image1.filters(0).Apply()

Image1.style.visibility="visible"

Image1.filters(0).Transition=10

Image1.filters(0).Play(1.200)

Image1a.filters(0).Apply()

Image1a.style.visibility="visible"

Image1a.filters(0).Transition=10

Image1a.filters(0).Play(1.200)

letter.filters(0).Apply()

letter.style.visibility="visible"

letter.filters(0).Transition=12

letter.filters(0).Play(5.000)

End Sub


Sub movText()

if startFlag=0 then Exit Sub

tt=((window.event.y-40)/letter.clientHeight)*(text.scrollHeight-letter.clientHeight)

text.style.top=-tt

End Sub

</SCRIPT>
</BODY></HTML>

Tarefa

Crie um e-mail usando o script acima e experimente variações nos tamanhos da imagem escolhida e do texto. Varie também o tamanho da fonte, a cor de fundo. Experimente usar um tile (back). Faça a adequação de cores nas bordas, barra de rolagem, fonte usada para a mensagem.

Escolha o que considerar mais bonito e envie para o grupo. Se quiser, pode enviar dois dos modelos que você "testou e aprovou".

Bom trabalho!

 



Importante: Insira seu cartão de visitas!

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



.