Curso de Formatação Super 6

Imagem com filtro em vetores



Este script considero muito interessante e que dá resultados muito bonitos. Ele também pode ser alterado de acordo com o tipo de imagem e cores que forem usadas. Copie o código inteiro que aparecerá mais abaixo e veja os efeitos antes de escolher cores e imagens porque isto facilita o trabalho.

Todos os itens, tais como: moldura, barra de rolagem, cores da tabela, cor do filtro, também poderão ser alterados.

Vou separar as partes do código para que fique mais fácil entender e saber o que pode ser alterado:

Nesta parte, que determina o estilo das bordas, fonte, cores de fundo de tabelas e filtros, podemos alterar todos os itens, desde que a indicação de cada estilo se mantenha:
<STYLE type=text/css>BODY {
BORDER-RIGHT: #caa2aa 3px ridge; BORDER-TOP: #caa2aa 3px ridge; SCROLLBAR-FACE-COLOR: #caa2aa; BORDER-LEFT: #caa2aa 3px ridge; SCROLLBAR-SHADOW-COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: #f2d2d0; SCROLLBAR-TRACK-COLOR: #caa2aa; BORDER-BOTTOM: #caa2aa 3px ridge; SCROLLBAR-DARKSHADOW-COLOR: #e9e9f1; SCROLLBAR-BASE-COLOR: #caa2aa; BACKGROUND-COLOR: #e9e9f1; TEXT-ALIGN: center; scrollbar-hightlight-color: #e9e9f1
}
v\:* {
BEHAVIOR: url(#default#VML)
}
.lilir {
LEFT: -1800px; VISIBILITY: hidden; POSITION: absolute; TOP: -1800px; BACKGROUND-COLOR: #774546
}
.offs {
LEFT: -1800px; POSITION: absolute; TOP: -1800px
}
.offscr {
LEFT: -1800px; POSITION: absolute; TOP: -1800px
}
.but {
BORDER-RIGHT: #563d40 2px solid; BORDER-TOP: #563d40 2px solid; FONT-SIZE: 13pt; FILTER: alpha(opacity=60); LEFT: -1800px; VISIBILITY: hidden; BORDER-LEFT: #563d40 2px solid; CURSOR: hand; COLOR: #563d40; BORDER-BOTTOM: #563d40 2px solid; FONT-FAMILY: Comic Sans MS; POSITION: absolute; TOP: -1800px; BACKGROUND-COLOR: #f2d2d0; TEXT-ALIGN: center
}
.texto {
BORDER-RIGHT: #563d40 2px solid; PADDING-RIGHT: 75px; BORDER-TOP: #563d40 2px solid; PADDING-LEFT: 75px; FONT-WEIGHT: bold; FONT-SIZE: 11pt; LEFT: 5%; VISIBILITY: hidden; PADDING-BOTTOM: 75px; OVERFLOW: auto; BORDER-LEFT: #563d40 2px solid; WIDTH: 90%; PADDING-TOP: 75px; BORDER-BOTTOM: #563d40 2px solid; FONT-FAMILY: "Comic Sans MS"; POSITION: absolute; TOP: 5%; HEIGHT: 90%; BACKGROUND-COLOR: #f2d2d0; TEXT-ALIGN: center
}
A:link {
FONT-SIZE: 11pt; COLOR: #000000
}
A:visited {
FONT-SIZE: 11pt; COLOR: #000000
}
A:active {
FONT-SIZE: 11pt; COLOR: #000000
}
</STYLE>

Aqui abaixo temos as indicações para todos os efeitos de estilo tais como: a cor, a largura e o estilo da borda e a barra de rolagem. O item .but refere-se às caracetrísticas dos botões nos quais devemos clicar para ler o texto ou ver as imagens. Este código já traz as indicações para as cores dos links na parte final:
A:link {FONT-SIZE: 11pt; COLOR: #000000}A:visited {
FONT-SIZE: 11pt; COLOR: #000000}A:active {FONT-SIZE: 11pt; COLOR: #000000

Depois da música temos a parte do código que se refere à imagem central e aos vetores:
<v:shape class=lilir id=box coordsize = "21600,21600"
o:spt = "21" fillcolor = "#935d5e" (cor interna) strokecolor = "#f2d2d0" (cor de contorno) strokeweight =
"1pt"></v:shape><IMG class=offscr id=pic height=400 (altura da imagem central)
src="endereço da imagem central" width=600> (largura da imagem central)
<DIV class=texto id=text>
<DIV><FONT size=3>Seu texto aqui</FONT></DIV>

Obs.: A cor do fundo (quadrada) do vetor fica determinada na parte anterior do código (a primeira parte que vimos), na linha:

.lilir {
LEFT: -1800px; VISIBILITY: hidden; POSITION: absolute; TOP: -1800px; BACKGROUND-COLOR: #774546

Aqui controlamos as características dos botões (imagem e texto) cor, largura e espessura das bordas e cor de fundo:

<BUTTON class=but id=but2 hideFocus height="35"
width="125">Imagem</BUTTON><BUTTON class=but id=but1 hideFocus height="35"
width="125">Texto</BUTTON>
<DIV class=offs id=faux style="WIDTH: 100%; HEIGHT: 35px"></DIV>

Os demais itens do código, que constam na parte do <Body> são nossos velhos conhecidos.

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=windows-1252">
<STYLE type=text/css>BODY {
BORDER-RIGHT: #caa2aa 3px ridge; BORDER-TOP: #caa2aa 3px ridge; SCROLLBAR-FACE-COLOR: #caa2aa; BORDER-LEFT: #caa2aa 3px ridge; SCROLLBAR-SHADOW-COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: #f2d2d0; SCROLLBAR-TRACK-COLOR: #caa2aa; BORDER-BOTTOM: #caa2aa 3px ridge; SCROLLBAR-DARKSHADOW-COLOR: #e9e9f1; SCROLLBAR-BASE-COLOR: #caa2aa; BACKGROUND-COLOR: #e9e9f1; TEXT-ALIGN: center; scrollbar-hightlight-color: #e9e9f1
}
v\:* {
BEHAVIOR: url(#default#VML)
}
.lilir {
LEFT: -1800px; VISIBILITY: hidden; POSITION: absolute; TOP: -1800px; BACKGROUND-COLOR: #774546
}
.offs {
LEFT: -1800px; POSITION: absolute; TOP: -1800px
}
.offscr {
LEFT: -1800px; POSITION: absolute; TOP: -1800px
}
.but {
BORDER-RIGHT: #563d40 2px solid; BORDER-TOP: #563d40 2px solid; FONT-SIZE: 13pt; FILTER: alpha(opacity=60); LEFT: -1800px; VISIBILITY: hidden; BORDER-LEFT: #563d40 2px solid; CURSOR: hand; COLOR: #563d40; BORDER-BOTTOM: #563d40 2px solid; FONT-FAMILY: Comic Sans MS; POSITION: absolute; TOP: -1800px; BACKGROUND-COLOR: #f2d2d0; TEXT-ALIGN: center
}
.texto {
BORDER-RIGHT: #563d40 2px solid; PADDING-RIGHT: 75px; BORDER-TOP: #563d40 2px solid; PADDING-LEFT: 75px; FONT-WEIGHT: bold; FONT-SIZE: 11pt; LEFT: 5%; VISIBILITY: hidden; PADDING-BOTTOM: 75px; OVERFLOW: auto; BORDER-LEFT: #563d40 2px solid; WIDTH: 90%; PADDING-TOP: 75px; BORDER-BOTTOM: #563d40 2px solid; FONT-FAMILY: "Comic Sans MS"; POSITION: absolute; TOP: 5%; HEIGHT: 90%; BACKGROUND-COLOR: #f2d2d0; TEXT-ALIGN: center
}
A:link {
FONT-SIZE: 11pt; COLOR: #000000
}
A:visited {
FONT-SIZE: 11pt; COLOR: #000000
}
A:active {
FONT-SIZE: 11pt; COLOR: #000000
}
</STYLE>

<META content="MSHTML 6.00.6000.16674" name=GENERATOR></HEAD>
<BODY bgColor=#f2d2d0 background=cid:026001c8f329$1d2ce7b0$6500a8c0@Lire>
<DIV><BR></DIV><BGSOUND balance=0 src="endereço da música mid ou wav"
volume=0 loop=infinite>
<v:shape class=lilir id=box coordsize = "21600,21600"
o:spt = "21" fillcolor = "#935d5e" strokecolor = "#f2d2d0" strokeweight =
"1pt"></v:shape><IMG class=offscr id=pic height=400
src="endereço da imagem central" width=600>
<DIV class=texto id=text>
<DIV><FONT size=3>Seu texto aqui</FONT></DIV>

<DIV>&nbsp;</DIV></DIV><BUTTON class=but id=but2 hideFocus height="35"
width="125">Imagem</BUTTON><BUTTON class=but id=but1 hideFocus height="35"
width="125">Texto</BUTTON>
<DIV class=offs id=faux style="WIDTH: 100%; HEIGHT: 50px"></DIV>
<SCRIPT language=VBScript>

'-------------------------------
'Script by Lili Russo
'http://www.ilove.com.br/lili
'abril 2008 - curso html
'please leave these lines in
'-------------------------------

Option Explicit
SetLocale("en-gb")

dim docw,doch,picw,pich,textw,texth,kw,kh,sp,th1,th2,th3,th4,rr,gg,bb,rr1,gg1,bb1,rr2,gg2,bb2,musicpath,musicvol,loopno

window.status="Script by Lili Russo"
'start
'red/color RGB red value 0 - 255
rr=255
'green/color RGB green value 0 - 255
gg=255
'blue/color RGB blue value 0 - 255
bb=255

'lilir/change 1
'red/color RGB red value 0 - 255
rr1=98
'green/color RGB green value 0 - 255
gg1=162
'blue/color RGB blue value 0 - 255
bb1=232

'lilir/change 2
'red/color RGB red value 0 - 255
rr2=55
'green/color RGB green value 0 - 255
gg2=55
'blue/color RGB blue value 0 - 255
bb2=3

pic.style.filter="revealTrans"
box.style.filter="revealTrans alpha(opacity=70)"
text.style.filter="revealTrans alpha(opacity=80)"
pic.style.visibility="hidden"
picw=pic.offsetwidth
pich=pic.offsetheight
kw=but1.width
kh=but1.height
sp=50

sub window_onLoad()
go
size_and_position
start
SetTimeOut"Color1",4000
SetTimeOut"Color2",5500
SetTimeOut"Color3",5000
SetTimeOut"Color4",4500
end sub

sub size_and_position()
docw=document.body.clientWidth
doch=document.body.clientHeight
if document.body.clientHeight>(pic.height+sp*4) then doch=document.body.clientHeight else doch=(pic.height+sp*4)
pic.style.top=doch/2-pich/2
pic.style.left=docw/2-picw/2
pic.style.width=picw
pic.style.height=pich
text.style.top=doch/2-pich/2
text.style.left=docw/2-picw/2
text.style.width=picw
text.style.height=pich
box.style.top=doch/2-pich/2-sp
box.style.left=docw/2-picw/2-sp
box.style.height=pich+sp*2
box.style.width=picw+sp*2
faux.style.top=pich+sp*3
faux.style.height=sp
faux.style.left=0
but1.style.top=sp+pich+kh*1.6
but1.style.left=docw/2-kw/2
but1.style.width=kw
but1.style.height=kh
but2.style.top=sp+pich+kh*1.6
but2.style.left=docw/2-kw/2
but2.style.width=kw
but2.style.height=kh
end sub

sub start()
pic.filters(0).apply()
pic.filters(0).transition=1
pic.style.visibility="visible"
pic.filters(0).play(4.000)
box.filters(0).apply()
box.filters(0).transition=11
box.style.visibility="visible"
box.filters(0).play(4.000)
but1.style.visibility="visible"
end sub
sub go()
end sub

Sub color1()
Cleartimeout(th1)
th1=settimeout ("change12", 700)
End Sub
sub change12()
clearTimeOut(th1)
th1=settimeout ("change13", 700)
End Sub
sub change13()
clearTimeOut(th1)
th1=settimeout ("color1", 700)
End Sub

Sub color2()
Cleartimeout(th2)

th2=settimeout ("change22", 700)
End Sub
sub change22()
clearTimeOut(th2)
th2=settimeout ("change23", 700)
End Sub
sub change23()
clearTimeOut(th2)
th2=settimeout ("color2", 700)
End Sub

Sub color3()
Cleartimeout(th3)
th3=settimeout ("change32", 700)
End Sub
sub change32()
clearTimeOut(th3)
th3=settimeout ("change33", 700)
End Sub
sub change33()
clearTimeOut(th3)

th3=settimeout ("color3", 700)
End Sub

Sub color4()
Cleartimeout(th4)
th4=settimeout ("change42", 700)
End Sub
sub change42()
clearTimeOut(th4)
th4=settimeout ("change43", 700)
End Sub
sub change43()
clearTimeOut(th4)

th4=settimeout ("color4", 700)
End Sub
sub but1_onclick()
text.filters(0).apply()
text.filters(0).transition=4
text.style.visibility="visible"
text.filters(0).play(3.000)
but2.style.visibility="visible"
but1.style.visibility="hidden"
end sub
sub but2_onclick()
text.filters(0).apply()
text.filters(0).transition=5
text.style.visibility="hidden"
text.filters(0).play(3.000)
but1.style.visibility="visible"
but2.style.visibility="hidden"
end sub
sub window_onResize()
size_and_position
Window.location.reLoad()
end sub
</SCRIPT>
</BODY></HTML>

 

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 e o tamanho e cores das caixinhas dos botões.

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



.