|
Esta Lição é muito
simples e muito importante didaticamente, pois com ela iniciamos o
estudo das margens. O objetivo é compor um plano de fundo com uma
cor e uma imagem que repete-se ou na borda superior (top), ou em
uma das laterais (left ou right).
O resultado você pode verificar
no modelo
1
- Abra uma nova mensagem e clique na aba "Origem". A Origem deve
estar assim:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<HTML><HEAD>
<META
http-equiv=Content-Type content="text/html;
charset=windows-1252">
<META content="MSHTML
6.00.6000.16587" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY
bgColor=#ffffff>
<DIV> </DIV></BODY></HTML>
2
- Onde está <STYLE></STYLE>
delete e cole o código abaixo:
<STYLE>BODY {
BACKGROUND-POSITION: left top; MARGIN-LEFT: 100px;
MARGIN-TOP: 30px; BACKGROUND-REPEAT:
repeat-y
}
</STYLE> |
Vamos compreender
o código:
BACKGROUND-POSITION: left top - estamos dizendo ao
programa que o nosso background deve posicionar-se à esquerda (left)
e no alto (top)
MARGIN-LEFT: 100px - estamos criando uma
margem na lateral esquerda de 100px de largura a partir da qual irá
iniciar o nosso texto.
Esse valor 100 é exemplificativo. Você
deve colocar um valor um pouco maior do que a largura da sua
imagem.
MARGIN-TOP: 30px - é a margem superior para o início
do nosso texto, para que não fique grudado no
alto.
BACKGROUND-REPEAT: repeat-y - significa que queremos
que a nossa imagem repita-se no sentido vertical.
3 - Ainda na aba "Origem"
determine a cor do fundo em <BODY bgColor=#ffffff> escolhendo uma cor que combine, ou
que contraste com as cores da imagem que escolheu.
4 - Agora
vamos aplicar a imagem como faríamos com um background (perceba que
estamos formatando um plano de fundo e não inserindo uma
imagem).
Vá na abinha "Editar", no menu Formatar/Plano de Fundo/Imagem e navegue pelo
seu micro até a pasta que contém a imagem que você
escolheu.
Se tudo deu certinho você tem agora o seu Plano de
fundo com cor e uma imagem que se repete na lateral
esquerda.
Importante!! Na aba EDITAR confira se o cursor do mouse está
posicionado um pouco além da largura da imagem ou se está recaindo
sobre a mesma. Se estiver sobre a imagem você deve voltar à Origem e
aumentar o valor da margem esquerda
(MARGIN-LEFT).
Colocando a
imagem na lateral direita
Se
você quiser que a imagem fique repetida na lateral direita, o código
ficaria assim:
<STYLE>BODY {
BACKGROUND-POSITION: right top; MARGIN-LEFT: 15px;
MARGIN-TOP: 30px; MARGIN-RIGHT: 100px; BACKGROUND-REPEAT:
repeat-y
}
</STYLE>
|
Repare que aqui
definimos o background posicionado à direita e ao alto
(BACKGROUND-POSITION: right top)
O importante neste caso é a
MARGIN-RIGHT para que o texto não recaia sobre a imagem que está
agora na lateral direita. O valor 100 da margem direita também é
exemplificativo. Use um valor pouco maior do que a largura da sua
imagem.
Colocando a imagem no
topo
Se você quer a figura
na parte superior da mensagem (top), basta alterar "repeat-y" por
"repeat-x", e o código fica assim:
<STYLE>BODY
{
BACKGROUND-POSITION: left top; MARGIN-LEFT: 20px; MARGIN-TOP: 100px; BACKGROUND-REPEAT:
repeat-x
}
</STYLE> |
O importante, neste caso, é a MARGIN-TOP para que o texto não recaia sobre a imagem que está agora
na parte superior.
O valor 100 para a margem superior é
exemplificativo. Use um valor pouco maior do que a altura da sua
imagem.
Guarde esse
quadrinho:
BACKGROUND-REPEAT: repeat - o back repete-se
horizontalmente e verticalmente
BACKGROUND-REPEAT: repeat-x
- o back repete-se horizontalmente
somente
BACKGROUND-REPEAT: repeat-y - o back repete-se
verticalmente somente
BACKGROUND-REPEAT: no-repeat - o back
não se repete |
Seu Exercício: Envie pelo menos duas formatações à lista (por exemplo, uma
com a imagem à esquerda e outra com a imagem no topo).
Apresente
as duas formatações com texto (para verificarmos as margens), com
moldura e barra de rolagem colorida, com atributos de fonte, som, etc.
Sugestão:
leia o
Anexo 03
para compreender os atributos de fonte.
Já sei que alguém vai
perguntar: "Ah, tia... como vou colocar o código da moldura e da
barra de rolagem colorida se o tag STYLE já tem os códigos
desta lição ?".
Resposta: Copie o código do
anexo 03 e cole-o logo abaixo do tag STYLE que contém as
margens. Depois altere as cores, os atributos de fonte, etc. para
harmonizar com a sua formatação.
Perguntas:
1) Em qualquer dos três casos, o que
aconteceria se você retirasse as letras "x" ou "y" após o comando
BACKGROUND-REPEAT: repeat-x ou BACKGROUND-REPEAT: repeat-y
?
2) Poderíamos preparar essa mesma lição usando o Assistente
do Outlook para formatar um Papel de Carta?
Tente
responder... e confira as respostas às duas perguntas
aqui | 
