|
Nesta lição usaremos
um comando de HTML que é muito simples, mas muito importante.
Sua função é fixar o background. Com isso, ao movimentarmos a barra
de rolagem, o texto (ou a tabela que contém o texto) deslocar-se-á
"rolando" sobre o background, exatamente como a tabela da página
desta lição.
Continuaremos testando os atributos de uma tabela simples. Veja os
modelos
Material: 01 background, uma imagem com moldura (ou uma tag)
opcional, 01 texto, 01 arquivo de som.
Pegue AQUI o modelo de
tabela que usaremos na lição. Salve o arquivo, descompacte-o e abra
o arquivo .eml
O código da tabela é esse:
<TABLE cellSpacing=8
borderColorDark=#904717 cellPadding=15 width="70%"
borderColorLight=#904717 border=30>
<TBODY>
<TR>
<TD bgColor=#904717>
<DIV>
<DIV>Seu texto aqui</DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV></DIV></TD></TR></TBODY></TABLE> |
A tabela tem uma moldura (BORDER) de 30px e um espaço (cellSpacing)
de 8px entre a parte central da tabela e a borda.
PARTE 1 - TESTANDO ATRIBUTOS, CENTRALIZANDO TABELA e TEXTO
1.1 - Com o modelo .eml aberto, clique em Encaminhar (como se fosse
enviá-lo), vá na Origem e delete meus dados de envio.
1.2 - Vamos testar seus atributos, sempre um de cada vez e
conferindo na aba Visualizar (ou EDITAR) que alteração ocorreu
- Diminua o valor da espessura da borda de 30 para 10 (border=10).
Volte ao valor de 30.
- Vamos atribuir duas cores diferentes para a borda. Mude
borderColorDark para a cor preta (#000000) e borderColorLight para a
cor branca (#ffffff). Fica bem aparente onde esses atributos se
aplicam, não é?
- Aumente o valor do cellSpacing=8 para 20. Confira o que mudou.
Depois mude o valor para zero (não tem mais o espaço entre a moldura
e o centro, certo?). Volte ao valor 8.
- Mude agora o bgColor para a cor cinza (#c0c0c0).
- Finalmente mude o valor de cellPadding para ZERO. A frase "seu
texto aqui" ficou grudada no topo esquerdo, isso é, não tem mais
espaços entre o limite da tabela (parte central) e o início do
texto. Certo?
Agora aumente novamente o valor para 15. A frase deslocou-se mais
para baixo e mais para o centro.
Se já compreendeu a função dos atributos da tabela, volte aos
valores iniciais do código e vamos prosseguir.
1.3 - CENTRALIZANDO A TABELA PELO TAG STYLE
No tag STYLE, delete <STYLE></STYLE> cole o código abaixo:
<STYLE>BODY {
BORDER-RIGHT: #904717 3px inset; BORDER-TOP: #904717 2px outset;
MARGIN-TOP: 40px; SCROLLBAR-FACE-COLOR: #ad7a4f; FONT-SIZE: 10pt;
SCROLLBAR-HIGHLIGHT-COLOR: #904717; MARGIN-LEFT: 20px; BORDER-LEFT:
#904717 3px outset; SCROLLBAR-SHADOW-COLOR: #904717; COLOR: #dad09a;
SCROLLBAR-3DLIGHT-COLOR: #ad7a4f; MARGIN-RIGHT: 20px;
SCROLLBAR-ARROW-COLOR: #904717; SCROLLBAR-TRACK-COLOR: #ad7a4f;
BORDER-BOTTOM: #904717 3px inset; FONT-FAMILY: Georgia;
SCROLLBAR-DARKSHADOW-COLOR: #ad7a4f;
TEXT-ALIGN: center
}
</STYLE>
Veja na aba EDITAR que a tabela ficou centralizada (por causa do
comando TEXT-ALIGN: center).
Repare também a mudança no tipo e na cor da fonte.
1.4 - Centralizando o texto sem usar o botão de atalho de
alinhamento.
Acrescente o comando align=center no
tag DIV logo acima da frase "Seu texto aqui". Deve ter ficado assim:
<TABLE cellSpacing=8 borderColorDark=#904717 cellPadding=15 width="70%"
borderColorLight=#904717 border=30>
<TBODY>
<TR>
<TD bgColor=#904717>
<DIV align=center>
<DIV>Seu texto aqui</DIV>
<DIV> </DIV>
<DIV> </DIV></DIV></TD></TR></TBODY></TABLE>
E veja pela aba EDITAR que o texto ficou centralizado. Confere?
PARTE 2 - COMPLETANDO A FORMATAÇÃO
Você pode continuar trabalhando no modelo de tabela ou fechar a
mensagem sem salvar, abrir uma nova e formatá-la usando o código da
tabela simples 02.
2.1 - Na aba Editar vá no menu Formatar/ Plano de Fundo/Imagem e
aplique o seu background.
2.2 - Digite ou cole o seu texto e insira a imagem com moldura (ou
uma tag) na tabela.
Caso sobrem muitos espaços, ao final do texto, faça assim: na aba
EDITAR coloque o cursor do mouse na tabela, após o final do texto, e
vá deletando os espaços a mais.
2.3 - No tag STYLE, faça as alterações (cores, estilo de moldura,
margens, acrescente outros códigos necessários, etc.) adequando ao
seu background (top, background com imagem na lateral esquerda,
tile, etc.) e às cores da sua formatação.
2.4 - FIXANDO O BACKGROUND
O comando para fixar o background é esse:
bgProperties=fixed
Copie e cole-o na Origem, nesta parte: <BODY
bgProperties=fixed bgColor=#ffffff>
Na aba Editar movimente a barra de rolagem para cima e para baixo. O
background está fixo e a tabela com o texto está deslocando-se?
Ótimo!! Então deu tudo certo.
2.5 - Complemente a sua formatação com som, mensagem de rodapé, etc.
e envie à lista.
Nota. Outra forma de FIXAR O BACKGROUND é acrescentar no tag STYLE o
comando BACKGROUND-ATTACHMENT: fixed
O modelo 02 desta lição ilustra a aplicação do comando acima no tag
STYLE.
 |
