:: Tutorial de E-mails ::

Curso de Formatação Super -4

Mais um pouco de vetores

Na lição anterior vimos uma forma de desenhar vetores com scripts.

Hoje veremos outra, bastante interessante porque iremos criar shapes que "rodeiam" a imagem central e também um vetor para uma tabela de texto.

Cole o código abaixo na aba "origem"

<HTML xmlns:v = "urn:schemas-microsoft-com:vml"><HEAD><TITLE>::Tutorial de E-mails - Lili Russo::</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css>BODY {
BORDER-RIGHT: #292f37 2px solid; BORDER-TOP: #292f37 2px solid; SCROLLBAR-HIGHLIGHT-COLOR: #292f37; BORDER-LEFT: #292f37 2px solid; SCROLLBAR-SHADOW-COLOR: #292f37; SCROLLBAR-ARROW-COLOR: #292f37; SCROLLBAR-TRACK-COLOR: #8896a8; BORDER-BOTTOM: #292f37 2px solid; SCROLLBAR-BASE-COLOR: #8896a8; BACKGROUND-COLOR: #8896a8
}
.lili {
BORDER-RIGHT: #292f37 1px solid; BORDER-TOP: #292f37 1px solid; LEFT: -1800px; VISIBILITY: hidden; BORDER-LEFT: #292f37 1px solid; BORDER-BOTTOM: #292f37 1px solid; POSITION: absolute; TOP: -1800px
}
v\:* {
BEHAVIOR: url(#default#VML)
}
.st {
FILTER: alpha(opacity=60); VISIBILITY: hidden; POSITION: absolute
}
.off {
LEFT: -1800px; POSITION: absolute; TOP: -1800px
}
.box {
FILTER: alpha(opacity=60); POSITION: absolute
}
.texto {
PADDING-RIGHT: 15px; PADDING-LEFT: 15px; FONT-SIZE: 14pt; LEFT: 10%; VISIBILITY: hidden; PADDING-BOTTOM: 15px; OVERFLOW: auto; WIDTH: 80%; COLOR: #292f37; PADDING-TOP: 15px; FONT-FAMILY: Arial; POSITION: absolute; TOP: 10%; HEIGHT: 80%; BACKGROUND-COLOR: #8896a8; TEXT-ALIGN: center
}
A:link {
FONT-SIZE: 10pt; COLOR: #292f37
}
A:visited {
FONT-SIZE: 10pt; COLOR: #292f37
}
A:active {
FONT-SIZE: 10pt; COLOR: #292f37
}
</STYLE>

<META content="MSHTML 6.00.6000.16640" name=GENERATOR></HEAD>
<BODY bgColor=#292f37 background="endereço do back" scroll=auto><IMG class=lili
id=pic
src="endereço de uma imagem central - anote a largura e a altura da imagem">
<v:shape class=st id=st1 coordsize = "21600,21600" o:spt = "4" strokeweight =
"1pt"></v:shape><v:shape class=st id=st2 coordsize = "21600,21600" o:spt = "4"
strokeweight = "1pt"></v:shape><v:shape class=st id=st3 coordsize =
"21600,21600" o:spt = "4" strokeweight = "1pt"></v:shape><v:shape class=st
id=st4 coordsize = "21600,21600" o:spt = "4" strokeweight =
"1pt"></v:shape><v:shape class=st id=st5 coordsize = "21600,21600" o:spt = "4"
strokeweight = "1pt"></v:shape><v:shape class=st id=st6 coordsize =
"21600,21600" o:spt = "4" strokeweight = "1pt"></v:shape><v:shape class=box
id=cont coordsize = "21600,21600" o:spt = "65" strokeweight = "1pt"></v:shape>
<DIV class=texto id=mess>
<DIV>Texto aqui</DIV>
<DIV class=off id=faux style="WIDTH: 100%; HEIGHT: 100%"></DIV>
<SCRIPT language=VBScript>
'---------------------------
'Script written by Lili Russo
'http://www.ilove.terra.com.br/lili
'For Course Writting Scripts - april 2008
'please leave these lines in
'---------------------------

option explicit
setLocale("en-gb")

dim scw,sch,contw,conth,picw,pich,messw,messh,sp,stw,sth,fl1,stroke,col,sn

'----------------------- alterações que podem ser feitas------------------------------------------

'inserir sua mensagem entre aspas
window.status="::Tutorial de E-mails - Lili Russo::"

'tamanho da imagem central largura e altura
picw=704
pich=484

'medidas dos vetores largura e altura
stw=50
sth=50

'rem - cor do vetor
'cor da borda do vetor
stroke="#292f37"

'cor de dentro do vetor
col="#8896a8"

'velocidade
sn=400

'espaço entre top e bottom
sp=30

'altura da área do texto
conth=200

'------------------------- fim das alterações ---------------------------

pic.style.filter="progid:DXImageTransform.Microsoft.Barn(duration=5, motion=out, orientation=vertical)"
mess.style.filter="progid:DXImageTransform.Microsoft.Barn(duration=5, motion=out, orientation=vertical)"

contw=picw+sp*3
messw=picw-sp*3-4
messh=conth-conth/3

sub window_onLoad()
clearTimeOut
scw=document.body.clientWidth
sch=document.body.clientHeight
pic.style.top=sp
pic.style.left=(scw-picw)/2
pic.style.height=pich
pic.style.width=picw
st1.strokecolor=stroke
st1.fillcolor=col
st1.style.top=sp
st1.style.left=(scw-picw)/2-stw-25
st1.style.width=stw
st1.style.height=sth
st2.strokecolor=stroke
st2.fillcolor=col
st2.style.top=sp
st2.style.left=(scw+picw)/2+25
st2.style.width=stw
st2.style.height=sth
st3.strokecolor=stroke
st3.fillcolor=col
st3.style.top=sp+pich-sth
st3.style.left=(scw-picw)/2-stw-25
st3.style.width=stw
st3.style.height=sth
st4.strokecolor=stroke
st4.fillcolor=col
st4.style.top=sp+pich-sth
st4.style.left=(scw+picw)/2+25
st4.style.width=stw
st4.style.height=sth
st5.strokecolor=stroke
st5.fillcolor=col
st5.style.top=sp+pich/2-sth/2
st5.style.left=(scw-picw)/2-stw-25
st5.style.width=stw
st5.style.height=sth
st6.strokecolor=stroke
st6.fillcolor=col
st6.style.top=sp+pich/2-stw/2
st6.style.left=(scw+picw)/2+25
st6.style.width=stw
st6.style.height=sth
cont.strokecolor=stroke
cont.fillcolor=col
cont.style.top=sp*2+pich
cont.style.left=(scw-contw)/2
cont.style.width=contw
cont.style.height=conth
mess.style.top=sp*2+pich+conth/6+1
mess.style.left=(scw-messw)/2+1
mess.style.width=messw
mess.style.height=messh
mess.style.visibility="hidden"
faux.style.top=sp*3+pich+conth/6+messh
faux.style.height=sp
faux.style.left=0
go
window.setTimeOut "show", sn
end sub
sub go()
end sub
sub show()
pic.filters(0).Apply()
pic.filters(0).Play()
pic.style.visibility="visible"
mess.filters(0).Apply()
mess.filters(0).Play()
mess.style.visibility="visible"
window.setTimeOut "show1", 5500
end sub
sub show1()
st1.style.visibility="visible"
st2.style.visibility="visible"
window.setTimeOut "show2", sn
end sub
sub show2()
st5.style.visibility="visible"
st6.style.visibility="visible"
window.setTimeOut "show3", sn
end sub
sub show3()
st3.style.visibility="visible"
st4.style.visibility="visible"
window.setTimeOut "show1", sn
end sub

Sub window_onresize()
window.location.reload()
End Sub

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

Para este script, estamos usando: um back, uma imagem em transição, filtros de opacidade e seis vetores e mais um vetor para a caixa de texto.

Os itens que podem ser mudados, deixei indicados no próprio código. (Evidentemente você pode alterar à vontade as molduras, a barra de rolagem cores, fonte para texto...)

Vou falar agora especificamente sobre os vetores.

O vetor está descrito nesta parte do código: <v:shape class=st id=st1 coordsize = "21600,21600" o:spt = "4" strokeweight =
"1pt">

Você pode alterar o número que deixei em vermelho (de 1 a 99). Vá fazendo as alterações, sempre pela aba "Origem" e veja quantas variações são possíveis!)

O vetor da caixa de texto está nesta linha: </v:shape><v:shape class=box
id=cont coordsize = "21600,21600" o:spt = "65" strokeweight = "1pt"></v:shape>

Você pode alterar o valor da mesma forma que expliquei acima e encontrar caixas de texto de formas variadas.

Tarefas:

1. Crie um e-mail usando o script pronto (ou, se preferir, crie o seu com base no modelo), alterando as cores, o tipo de vetor, o vetor para a caixa de texto e acrescentando uma música.

Escreva um texto e envie ao grupo.

2.Crie um outro e-mail usando o script pronto (ou, se preferir, crie o seu com base no modelo), altere as cores, o tipo de vetor (diferente do exemplo 1), use um outro vetor para a caixa de texto e acrescente uma música.

Escreva um texto e envie ao grupo.

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


	.