|
O objetivo principal
desta lição é testarmos a tabela. O código possibilita uma
formatação simples e interessante. Veja o
modelo ilustrativo.
Material: um background, uma imagem principal, um texto e um arquivo
de som. Anote as dimensões da sua imagem pois terá de indicá-las no
código.
1 - O código completo que você deverá colar na Origem é esse:
2 - Antes de preparar a sua formatação vamos compreender o código e
fazer alguns testes. Abra o modelo da lição, dê Encaminhar e delete
os meus dados de envio.
Clique na aba Editar e observe: temos uma única tabela com duas
células. Na primeira célula foi aplicada a imagem e na segunda a
caixa de texto.
A moldura da tabela tem 15px de espessura e está definida no tag
STYLE nesta parte:
.Tabrd1 {
BORDER-RIGHT: #5b372b 15px outset; BORDER-TOP: #5b372b 15px ridge;
BORDER-LEFT: #5b372b 15px ridge; BORDER-BOTTOM: #5b372b 15px outset
Cada célula também tem uma moldura, com 10px de espessura e essa
moldura está definida no tag STYLE nesta outra parte:
.Messrd1 {
BORDER-RIGHT: #5b372b 10px outset; BORDER-TOP: #5b372b 10px ridge;
FONT-WEIGHT: bold; FONT-SIZE: 14pt; BORDER-LEFT: #5b372b 10px ridge;
COLOR: #b9a87c; BORDER-BOTTOM: #5b372b 10px outset; FONT-FAMILY: "Monotype
Corsiva"
Entre a moldura da tabela e as suas células - e mesmo entre as duas
células - há um espaço de 35 px que está definido nesta parte:
<TABLE class=tabrd1 cellSpacing=35
cellPadding=0 width="50%">
Vamos confirmar fazendo os seguintes testes:
2.1 - altere as cores da moldura no tag STYLE, em .Tabrd1, para a
cor azul (#0000c0) e veja na aba EDITAR onde ela se aplica. Volte à
cor #5b372b
2.2 - altere, no tag STYLE, as cores de .Messrd1 para cor azul
(#0000c0) e veja na aba EDITAR que a nova cor aplicou-se tanto à
moldura da célula que contém a imagem, quanto à moldura da caixa de
texto. Volte à cor #5b372b
2.3 - altere o valor de cellSpacing=35
para 5 e confirme que diminui o espaço entre as células, e também
entre elas e a moldura da tabela. Volte ao valor 35.
Compreendido até aqui? Então vamos continuar testando.
3 - Dimensões da imagem, caixa de texto e das células.
A imagem usada no modelo tem dimensões: WIDTH: 428px e HEIGHT: 472px
<TD class=messrd1 align=middle bgColor=#ddc8b5 height=550>
<DIV><IMG id=pic style="WIDTH: 428px;
POSITION: relative; HEIGHT: 472px"
src="caminho da imagem principal"></DIV></TD></TR>
Experimente mudar, onde está height=550 para o valor da altura da
imagem (472) e você verá que não tem mais o espaço acima e abaixo da
imagem.
Ficou feio, não é mesmo? Então volte ao valor de 550 (ou seja, um
valor maior que a altura da imagem).
Vamos agora testar a LARGURA.
A imagem aplicada no modelo tem largura WIDTH: 428px e foi definida
um largura para a caixa de texto 500px.
<DIV class=messrd1 style="OVERFLOW: auto; WIDTH:
500px; HEIGHT: 300px">
Como a largura da caixa de texto é bem maior do que a largura da
imagem, a tabela adequou-se à largura definida para a caixa de texto
e, por isso, sobram espaços nas duas laterais da imagem.
Agora faça outro teste: altere a largura da caixa de texto (WIDTH:
500px) para 400 (um valor menor que a largura da imagem).
A célula que contém a imagem "encolheu", ajustando-se à largura da
imagem, mas a caixa de texto também "encolheu".
RESUMINDO:
se você quer que a caixa de texto fique certinha na célula que a
contém e com um espaço nas laterais da imagem (como no modelo), use
um valor para a largura da caixa de texto MAIOR do que a largura da
sua imagem.
Se está compreendido até aqui, feche o modelo sem salvar e prepare a
sua formatação para o envio à lista.
Observações:
1 - Se quiser que a barra de rolagem da caixa de texto tenha cores
diferentes da barra de rolagem da mensagem, acrescente o código da
barra de rolagem colorida no style da caixa de texto (na parte
compreendida entre as aspas), nesta parte:
<DIV class=messrd1 style="OVERFLOW:
auto; WIDTH: 500px; HEIGHT: 300px">
2 - Caso queira alterar a direção do movimento do background altere
os sinais das equações do script conforme explicado na lição 05.
SEU EXERCÍCIO:
Apresente uma formatação completa (moldura e barra de rolagem
colorida, texto, som, etc.) usando a tabela vazada e o script desta
lição. Use os recursos antibanner e confira o tamanho (em kb) da
formatação final.
 |
