Curso de Formatação Super3
Desenhando vetores com scripts
Nas lições anteriores, vimos como escrever nossas
próprias tabelas.
Foi uma atividade bastante trabalhosa.
Para amenizar um pouco, vamos usar hoje um script pronto que já
faz desenhos na formatação.
Abaixo está um script pronto.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<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>v\:* {
BEHAVIOR: url(#default#VML)
}
BODY {
BORDER-RIGHT: #381404 1px double; BORDER-TOP: #381404 1px double;
BORDER-LEFT: #381404 1px double; SCROLLBAR-ARROW-COLOR: #381404;
SCROLLBAR-TRACK-COLOR: #702909; BORDER-BOTTOM: #381404 1px double;
SCROLLBAR-BASE-COLOR: #702909; BACKGROUND-COLOR: #c18d54
}
.tab1 {
VISIBILITY: hidden; BACKGROUND-COLOR: #c18d54
}
.tab2 {
BORDER-RIGHT: #381404 2px double; BORDER-TOP: #381404 2px double;
BORDER-LEFT: #381404 2px double; BORDER-BOTTOM: #381404 2px double
}
.text {
BORDER-RIGHT: #381404 2px double; PADDING-RIGHT: 10px; BORDER-TOP:
#381404 2px double; PADDING-LEFT: 10px; FONT-WEIGHT: normal; FONT-SIZE:
15pt; PADDING-BOTTOM: 10px; OVERFLOW: auto; BORDER-LEFT: #381404
2px double; COLOR: #381404; PADDING-TOP: 10px; BORDER-BOTTOM: #381404
2px double; FONT-FAMILY: Comic Sans MS; HEIGHT: 200px; BACKGROUND-COLOR:
#c18d54; TEXT-ALIGN: center
}
A:link {
FONT-SIZE: 10pt; COLOR: #381404; FONT-FAMILY: Comic Sans MS
}
A:visited {
FONT-SIZE: 10pt; COLOR: #381404; FONT-FAMILY: Comic Sans MS
}
A:active {
FONT-SIZE: 10pt; COLOR: #381404; FONT-FAMILY: Comic Sans MS
}
</STYLE>
<!--background-->
<META content="MSHTML 6.00.6000.16640" name=GENERATOR></HEAD>
<BODY bgColor=#a06d31 background="endereço do back">
<DIV></DIV><!--música--><BGSOUND balance=0
src="endereço da música" volume=0 loop=99>
<!--tabela com desenhos na formatação- Lili Russo-->
<TABLE class=tab1 id=tab cellSpacing=0 cellPadding=0 align=center>
<TBODY>
<TR>
<TD align=middle>
<DIV style="LEFT: 0px; WIDTH: 100%; POSITION: relative;
TOP: 0px"><!--bij fillcolor en strokecolor (8x) de kleuren
aanpassen-->
<TABLE id=h1 style="Z-INDEX: 4; VISIBILITY: hidden; POSITION:
absolute">
<TBODY>
<TR>
<TD><v:oval style="WIDTH: 25px; HEIGHT: 25px; antialias:
true"
coordsize = "21600,21600" fillcolor = "#702909"
strokecolor =
"#381404" strokeweight = "1pt"></v:oval></TD></TR></TBODY></TABLE>
<TABLE id=h2 style="Z-INDEX: 4; VISIBILITY: hidden; POSITION:
absolute">
<TBODY>
<TR>
<TD><v:oval style="WIDTH: 25px; HEIGHT: 25px; antialias:
true"
coordsize = "21600,21600" fillcolor = "#702909"
strokecolor =
"#381404" strokeweight = "1pt"></v:oval></TD></TR></TBODY></TABLE>
<TABLE id=h3 style="Z-INDEX: 4; VISIBILITY: hidden; POSITION:
absolute">
<TBODY>
<TR>
<TD><v:oval style="WIDTH: 25px; HEIGHT: 25px; antialias:
true"
coordsize = "21600,21600" fillcolor = "#702909"
strokecolor =
"#381404" strokeweight = "1pt"></v:oval></TD></TR></TBODY></TABLE>
<TABLE id=h4 style="Z-INDEX: 4; VISIBILITY: hidden; POSITION:
absolute">
<TBODY>
<TR>
<TD><v:oval style="WIDTH: 25px;
HEIGHT: 25px; antialias: true"
coordsize = "21600,21600" fillcolor = "#702909"
strokecolor =
"#381404" strokeweight = "1pt"></v:oval></TD></TR></TBODY></TABLE>
<TABLE id=h5 style="Z-INDEX: 4; VISIBILITY: hidden; POSITION:
absolute">
<TBODY>
<TR>
<TD><v:oval style="WIDTH: 20px;
HEIGHT: 20px; antialias: true"
coordsize = "21600,21600" fillcolor = "#702909"
strokecolor =
"#381404" strokeweight = "1pt"></v:oval></TD></TR></TBODY></TABLE>
<TABLE id=h6 style="Z-INDEX: 4; VISIBILITY: hidden; POSITION:
absolute">
<TBODY>
<TR>
<TD><v:oval style="WIDTH: 20px;
HEIGHT: 20px; antialias: true"
coordsize = "21600,21600" fillcolor = "#702909"
strokecolor =
"#381404" strokeweight = "1pt"></v:oval></TD></TR></TBODY></TABLE>
<TABLE id=h7 style="Z-INDEX: 4; VISIBILITY: hidden; POSITION:
absolute">
<TBODY>
<TR>
<TD><v:oval style="WIDTH: 20px;
HEIGHT: 20px; antialias: true"
coordsize = "21600,21600" fillcolor = "#702909"
strokecolor =
"#381404" strokeweight = "1pt"></v:oval></TD></TR></TBODY></TABLE>
<TABLE id=h8 style="Z-INDEX: 4; VISIBILITY: hidden; POSITION:
absolute">
<TBODY>
<TR>
<TD><v:oval style="WIDTH: 20px;
HEIGHT: 20px; antialias: true"
coordsize = "21600,21600" fillcolor = "#702909"
strokecolor =
"#381404" strokeweight = "1pt"></v:oval></TD></TR></TBODY></TABLE>
<TABLE class=tab2 id=lijn style="VISIBILITY: hidden"
cellSpacing=30
cellPadding=0 align=center>
<TBODY>
<TR>
<TD align=center>
<TABLE class=tab2 cellSpacing=30 cellPadding=0 align=center>
<TBODY>
<TR>
<TD align=center>
<TABLE class=tab2 cellSpacing=30 cellPadding=0 align=center>
<TBODY>
<TR>
<TD id=p1 style="VISIBILITY: hidden" align=center><!--imagem--><IMG
id=pic style="WIDTH: 700px; HEIGHT: 520px"
src="endereço de uma imagem central"></TD></TR>
<TR>
<TD align=center><!--texto-->
<DIV class=text id=mess
style="VISIBILITY: hidden; WIDTH: 700px">
<DIV><FONT size=3><FONT size=2></FONT>
<DIV><FONT size=2>Texto</FONT></DIV>
<DIV><FONT size=2><A
href="http://www.ilove.terra.com.br/lili">Link</A></FONT></DIV></FONT><BR></DIV></DIV>
<DIV></DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE>
<SCRIPT language=vbscript>
'---------------------------
'Script written by Annem@rie
'http://www.annemaries.nl/
'adapted by Lili Russo
'http://www.ilove.terra.com.br/lili
'april 2008
'please leave these lines in
'---------------------------
SetLocale("en-gb")
'--mensagem de rodape--
window.status="Tutorial de E-mails - Por Lili Russo"
Dim scw,sch
tab.style.filter="progid:DXImageTransform.Microsoft.Barn(motion=out,
orientation=vertical, enabled=1)"
p1.style.filter="progid:DXImageTransform.Microsoft.Barn(motion=out,
orientation=vertical, enabled=1)"
mess.style.filter="progid:DXImageTransform.Microsoft.Barn(motion=out,
orientation=vertical, enabled=1)"
lijn.style.filter="progid:DXImageTransform.Microsoft.Barn(motion=in,
orientation=vertical, enabled=1)"
picw=pic.offsetwidth
pich=pic.offsetheight
messw=mess.offsetwidth
messh=mess.offsetheight
sub window_onload()
scw=document.body.clientwidth
sch=document.body.clientheight
h1.style.postop=14
h1.style.posleft=14
h2.style.postop=14
h2.style.posleft=picw+134
h3.style.postop=pich+messh+165
h3.style.posleft=14
h4.style.postop=pich+messh+165
h4.style.posleft=picw+134
h5.style.postop=50
h5.style.posleft=50
h6.style.postop=50
h6.style.posleft=picw+110
h7.style.postop=pich+messh+138
h7.style.posleft=50
h8.style.postop=pich+messh+138
h8.style.posleft=picw+110
window.setTimeout "show", 500
end sub
sub show()
tab.filters(0).Apply()
tab.style.visibility="visible"
tab.filters(0).Play(4)
window.setTimeout "rest", 4000
end sub
sub rest()
lijn.filters(0).Apply()
lijn.style.visibility="visible"
lijn.filters(0).Play(4)
window.setTimeout "showpic", 4000
end sub
sub showpic()
p1.filters(0).Apply()
p1.style.visibility="visible"
p1.filters(0).Play(4)
mess.filters(0).Apply()
mess.style.visibility="visible"
mess.filters(0).Play(4)
window.setTimeout "showbol", 4000
end sub
sub showbol()
h1.style.visibility="visible"
h2.style.visibility="visible"
h3.style.visibility="visible"
h4.style.visibility="visible"
h5.style.visibility="visible"
h6.style.visibility="visible"
h7.style.visibility="visible"
h8.style.visibility="visible"
end sub
</SCRIPT>
</BODY></HTML>
Vamos entender como os vetores são descritos e como podemos
alterá-los.
Deixei em vermelho a parte do script responsável pelo desenho
do vetor:
<v:oval style="WIDTH: 20px; HEIGHT:
20px; antialias: true"
coordsize = "21600,21600" fillcolor = "#702909"
strokecolor =
"#381404" strokeweight = "1pt"></v:oval>
Primeiro observe que sempre abrimos e fechamos um código,
neste caso começa com <v:oval
e termina com </v:oval
Na primeira linha está indicado que o vetor é em forma
oval (<v:oval) com 20px de largura
e de altura. Convém sempre indicar o antialias como true
para que não fiquem "rebarbas".
Na segunda e na terceira linhas temos as coordenadas e a cor de
dentro fillcolor = "#702909"
e a cor da borda strokecolor =
"#381404", sendo que esta borda tem apenas um pixel
strokeweight = "1pt">
O que podemos mudar?
As cores, a largura e a altura, a espessura da borda do desenho
e o formato do vetor. Para mudar os primeiros itens que mencionei,
procedemos da forma habitual, mudando os códigos das cores
ou o tamanho.
Vamos ver agora, os tipos de vetores que são aplicáveis.
Vetor arco
<v:arc style='position:absolute; top:-9; left:1; width:58; height:58'
filled='f' startangle='225' endangle='315' strokeweight='2'/>
<v:line style='position:absolute; top:0; left:10' from='0,40'
to='40,40' strokeweight='2'/>
<v:line style='position:absolute; top:0; left:10' from='0,0'
to='40,0' strokeweight='2'/>
<v:arc style='position:absolute; top:-9; left:0; width:58; height:58'
filled='f' startangle='45' endangle='135' strokeweight='2'/>
</div><div style='width:100px; position:relative; left:15px;
top:45px; float:left;'>
</div><div style='position:relative; left:15px; top:0px;'>
Vetor Lip (uma bolinha com um semi triângulo
em cima)
<v:arc style='position:absolute; top:10; left:0; width:20; height:20'
filled='f' startangle='0' endangle='360' strokeweight='2'/>
<v:line style='position:absolute; top:6; left:10' from='-8,-8'
to='0,0' strokeweight='2'/>
<v:line style='position:absolute; top:6; left:10' from='0,0'
to='8,-8' strokeweight='2'/>
</div><div style='width:60px; position:relative; left:15px;
top:45px; float:left;'>
</div><div style='position:relative; left:15px; top:0px;'>
Vetor bone um ponto; um traço e outro ponto
no sentido vertical)
<v:oval style='position:absolute; top:-2.7; left:-2.7; width:2.6pt;
height:2.6pt' fillcolor='black'></v:oval>
<v:oval style='position:absolute; top:38.7; left:-2.7; width:2.6pt;
height:2.6pt' fillcolor='black'></v:oval>
<v:line style='position:absolute; top:0; left:0' from='0,10'
to='0,30' strokeweight='2'/>
</div><div style='width:40px; position:relative; left:15px;
top:45px; float:left;'>
</div><div style='position:relative; left:15px; top:0px;'>
Vetor "L"
<v:line style='position:absolute; top:0; left:0' from='0,0'
to='0,20' strokeweight='2'/>
<v:line style='position:absolute; top:0; left:0' from='0,20'
to='20,20' strokeweight='2'/>
</div><div style='width:60px; position:relative; left:15px;
top:45px; float:left;'>
</div><div style='position:relative; left:15px; top:0px;'>
Vetor triângulo com perninha
<v:line style='position:absolute; top:0; left:0' from='20,0'
to='0,40' strokeweight='2'/>
<v:line style='position:absolute; top:0; left:0' from='20,0'
to='40,40' strokeweight='2'/>
<v:line style='position:absolute; top:0; left:0' from='0,40'
to='20,40' strokeweight='2'/>
<v:line style='position:absolute; top:0; left:40' from='0,40'
to='20,40' strokeweight='2'/>
</div><div style='width:100px; position:relative; left:15px;
top:45px; float:left;'>
</div><div style='position:relative; left:15px; top:0px;'>
Vetor semitriângulos invertidos
<v:line style='position:absolute; top:20; left:10' from='-8,-8'
to='0,0' strokeweight='2'/>
<v:line style='position:absolute; top:20; left:10' from='0,0'
to='-8,8' strokeweight='2'/>
<v:line style='position:absolute; top:0; left:15' from='0,0'
to='0,20' strokeweight='2'/>
<v:line style='position:absolute; top:0; left:15' from='0,20'
to='20,20' strokeweight='2'/>
</div><div style='width:75px; position:relative; left:15px;
top:45px; float:left;'>
</div><div style='position:relative; left:15px; top:0px;'>
Indicações simples de vetores (para você
montar seus scripts)
Vetor reto
<v:rect style="width:150pt;height:50pt" fillcolor="#9e6b31"></v:rect>
Vetor arredondado
Roundrect: <v:roundrect style="width:150pt;height:50pt"></v:roundrect>
Vetor curva
Curve: <v:curve from="10pt,10pt" to="100pt,10pt"
control1="40pt,30pt" control2="70pt,30pt"></v:curve>
Tarefa
Crie um e-mail usando o script pronto (ou, se preferir, crie o
seu com base no modelo), alterando as cores, o tamanho da imagem
(vetor)
e acrescentando os demais itens: uma imagem, back, moldura, barra
de rolagem colorida, música, mensagem de rodapé.
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
Lilian Russo - Todos os Direitos Reservados - ©2002/2008
|
