Curso de Formatação Avançado- Lição
9
Tabela com imagem de fundo, imagem dentro e se movimentando
para cima
Vamos trabalhar hoje vários scripts simultaneamente.
O que considero interessante nesta aula é que o código
é bastante útil para enviarmos mensagens
com uma tabela e um texto que se movimentam ao mesmo tempo. Chamo
este script de "moderninho e prático"
porque é muito usado nos grupos de mensagens, principalmente
com as dançantes.
Vamos ao código "limpinho".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns:o = "urn:schemas-microsoft-com:office:office"><HEAD>
<TITLE>Tutorial de e-mail - Lili Russo</TITLE>
<!----------Script adaptado por Lili Russo----------->
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.6000.16608" name=GENERATOR></HEAD>
<BODY bgProperties=fixed bgColor=#ffffff
background="endereço do back">
<DIV><BR></DIV>
<TABLE id=tab1 style="WIDTH: 600px; HEIGHT: 500px"
cellSpacing=10
borderColorDark=#fbad03 cellPadding=20 width=600 align=center bgColor=#ffffff
borderColorLight=#fbad03 border=2>
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<IMG alt="" hspace=0
src="endereço da imagem de dentro da tabela" align=baseline
border=0></FONT>
<P></P>
<P align=center><IMG alt="" hspace=0
src="endereço de uma imagem pequenininha para o final
da tabela"
align=baseline border=0></P></DIV></TD></TR></TBODY></TABLE>
<DIV style="DISPLAY: none; VISIBILITY: hidden"><IMG
id=imgtab1
src="endereço da imagem para o fundo da tabela">
</DIV>
<DIV style="DISPLAY: none; VISIBILITY: hidden"> </DIV>
<DIV style="DISPLAY: none; VISIBILITY: hidden"> </DIV>
<DIV style="DISPLAY: none; VISIBILITY: hidden"> </DIV>
<SCRIPT language=JavaScript>
function mudatabela() {
tab1.background = imgtab1.src;
}
mudatabela();
</SCRIPT>
<SCRIPT language=JavaScript>
<!--
ScrollChars = 45; // chars scrolled per time period
function SetupTicker() {
// add space to the left of the message
msg = " **** Formatação Lili Russo ** Tutorial
de E-mails ****";
window.status = msg;
msg = msg.substring(ScrollChars) + msg.substring(0,ScrollChars);}
SetupTicker();
<!-- end -->
</SCRIPT>
<P>
<P></P><!------------COMEÇA AQUI------------>
<STYLE></STYLE>
<!---------- TERMINA AQUI ----------->
<P></P>
<P style="CLEAR: both"><FONT face=Arial color=#000000></FONT></P>
<P style="CLEAR: both"><FONT face=Arial color=#000000></FONT></P>
<P style="CLEAR: both">
<P></P>
<DIV>
<SCRIPT language=JavaScript1.2>
// change 1 to another integer to alter the scroll speed. Greater
is faster
var speed=2
var currentpos=0,alt=1,curpos1=0,curpos2=-1
function initialize(){
startit()
}
function scrollwindow(){
if (document.all)
temp=document.body.scrollTop
else
temp=window.pageYOffset
if (alt==0)
alt=1
else
alt=0
if (alt==0)
curpos1=temp
else
curpos2=temp
if (curpos1!=curpos2){
if (document.all)
currentpos=document.body.scrollTop+speed
else
currentpos=window.pageYOffset+speed
window.scroll(0,currentpos)
}
else{
currentpos=0
window.scroll(0,currentpos)
}
}
function startit(){
setInterval("scrollwindow()",80)
}
window.onload=initialize
</SCRIPT>
</DIV>
<P style="CLEAR: both">
<P></P>
<P style="CLEAR: both">
<P></P>
<CENTER> </CENTER>
<P style="CLEAR: both">
<P></P>
<P style="CLEAR: both"></P>
<P style="CLEAR: both">
<P></P>
<P style="CLEAR: both">
<P></P><BR><BR>
</BODY></HTML>
Sua tarefa hoje não é das mais complicadas, mas eu
gostaria muito que você experimentasse variações
no código, alargando ou estreitando a tabela,
as bordas, o tipo de imagem (imagens animadas e imagens não
animadas, inclusive no background),
enfim.... explorasse esse script ao máximo e fizesse um modelinho
para guardar e usar em "casos de emergência"....
Para isto, o ideal é abrir seu bloco de notas, e colar o
código, salvando-o em alguma pastinha só para seus
scripts.
Crie um e-mail, a partir do script de hoje e lembre-se de colocar
música, moldura, barra de rolagem colorida, um pequeno texto
e enviá-lo ao grupo.
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
|
