:: Tutorial de E-mails ::

Curso de Formatação Avançado- Lição 26

Escrevendo nossas próprias tabelas - parte 2

Vamos continuar a atividade com tabelas.

Vamos analisar hoje um script com várias tabelas, uma dentro da outra e, como fazer para apresentar as bordas das tabelas e das células em estilos e cores diferentes.

Aqui abaixo há um código de várias tabelas, uma dentro da outra, sem indicação das bordas. Faça um teste: copie e cole este código na "Origem" de seu e-mail, antes de </body>. Você já terá o que chamamos em algumas aulinhas de "fundo triplo", que nada mais é que uma tabela dentro de outra tabela.

<TABLE align=center width=80% Cellspacing=0 Cellpadding=50
<TR>
<TD bgcolor=#EEF7E6>


<TABLE align=center width=100% Cellspacing=0 Cellpadding=50
<TR>
<TD bgcolor=#4B1e60>


<TABLE align=center width=100% Cellspacing=0 Cellpadding=30


<TR>
<TD align=center>
<IMG src="endereço da imagem"
</TD>
</TR>


<TR>
<TD align=center>
<FONT size=4>
text here
</FONT>
</TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>

Vamos agora ao trabalho com as bordas das tabelas. Podemos usar bordas diferentes para a tabela, para as células, para a imagem, enfim....podemos fazer variações e sempre teremos resultados diferentes quanto à apresentação geral de nosso trabalho.

O importante agora é prestar bastante atenção quanto ao modo de indicarmos os estilos das bordas, porque precisarão vir separadamente.

Para indicarmos algum estilo que irá aparecer em uma tabela, precisamos dar o comando

class=

E cada estilo virá indicado separadamente, por exemplo, o estilo da borda da tabela 1, deverá ser indicado como coloquei mais abaixo; veja que há um ponto antes da descrição, assim:
.TAB1

.TAB1 {BORDER-TOP:#4D5F61 6px dotted; BORDER-BOTTOM:#4D5F61 6px dotted; BORDER-LEFT:#4D5F61 6px dotted; BORDER-RIGHT:#4D5F61 6px dotted}

Para que o Outlook entenda a que se refere a indicação é preciso fazer referência a cada um dos itens ao qual demos um comando, separadamente. Por exemplo:

<TABLE class=TAB1

Isto quer dizer que os estilos que apresentamos em .TAB1 serão aplicados à tabela à qual fizemos a indicação, como deixei acima, em vermelho.

Se quiser indicar os parâmentros para o estilo de uma célula, precisa faz~e-lo separadamente e indicar:

.TD1 {BORDER-TOP:#B4C1CA 4px dotted; BORDER-BOTTOM:#B4C1CA 4px dotted; BORDER-LEFT:#B4C1CA 4px dotted; BORDER-RIGHT:#B4C1CA 4px dotted; BACKGROUND-COLOR:#B4C1CA}

Se vc quiser, até pode dar outro nome para o estilo das bordas da tabela e das células, isto é, usar outra denominação para .TB1 ou .TD1, mas precisa manter o ponto antes da indicação. Costumo usar .TB1 e .TD1

Existe também uma indicação interessante para que o link colocado dentro das tabelas não fique com aquele tradicional tom de azul.

O código básico a ser colocado depois das indicações dos estilos das bordas é:

A:link {
FONT-SIZE: 10pt; COLOR: #434242; FONT-FAMILY: Comic Sans MS
}
A:visited {
FONT-SIZE: 10pt; COLOR: #434242; FONT-FAMILY: Comic Sans MS
}
A:active {
FONT-SIZE: 10pt; COLOR: #434242; FONT-FAMILY: Comic Sans MS
}

Podemos, também variar a forma como o link irá aparecer, deixando-o sublinhado na cor que escolhemos, colocando antes desse código o seguinte:

A {
TEXT-DECORATION: underline
}

Ficaria algo assim:

A {
TEXT-DECORATION: underline
}

Outra forma interessante de indicar o código para o link é esta:

A {
COLOR: #faebd7; TEXT-DECORATION: none
}
A:hover {
CURSOR: crosshair; COLOR: #faebd7; BORDER-BOTTOM: 1px dashed
}

Experimente e veja que bonitinho fica.

(Evidentemente, vc pode mudar as cores, a fonte, o tamanho da fonte...)

Lembre-se de que todos os sinais, todos os caracteres são importantes e merecem atenção! Se houver algum esquecimento, o código irá falhar.

Vamos a um exemplo:
<HEAD>
<TITLE>Tutorial de E-mails - Lili Russo</TITLE>

<STYLE>
BODY {BORDER-TOP:#B5C1CA 6px ridge; BORDER-BOTTOM:#B5C1CA6px ridge; BORDER-LEFT:#B5C1CA 6px ridge; BORDER-RIGHT:#B5C1CA 6px ridge;

SCROLLBAR-3DLIGHT-COLOR:#4e5F61;
SCROLLBAR-ARROW-COLOR:#4e5F61;
SCROLLBAR-BASE-COLOR:#B5C1CA;
SCROLLBAR-DARKSHADOW-COLOR:#4e5F61;
SCROLLBAR-FACE-COLOR:#B5C1CA;
SCROLLBAR-HIGHLIGHT-COLOR:#4e5F61;
SCROLLBAR-SHADOW-COLOR:#4e5F61;
SCROLLBAR-TRACK-COLOR:#B5C1CA}

FONT-FAMILY:arial; color:#EAE9E5; font-size:14px;

.TAB1 {BORDER-TOP:#4e5F61 6px dotted; BORDER-BOTTOM:#4e5F61 6px dotted; BORDER-LEFT:#4e5F61 6px dotted; BORDER-RIGHT:#4e5F61 6px dotted; BACKGROUND-COLOR:#4e5F61}

.TD1 {BORDER-TOP:#B5C1CA 4px dotted; BORDER-BOTTOM:#B5C1CA 4px dotted; BORDER-LEFT:#B5C1CA 4px dotted; BORDER-RIGHT:#B5C1CA 4px dotted; BACKGROUND-COLOR:#B5C1CA}

A {
COLOR: #02ebd7; TEXT-DECORATION: none
}
A:hover {
CURSOR: crosshair; COLOR: #02ebd7; BORDER-BOTTOM: 1px dashed
}
</STYLE>
</HEAD>

Se você quiser que a barra de rolagem colorida de dentro da tabela tenha as mesmas cores que você indicou, basta usar o commando overflow=auto

Você faz a indicação dentro da célula que deseja:

<TD align=center width=300px>
<DIV style="height:446px; overflow:auto">
<FONT size=4>
Texto aqui
</FONT>
</DIV>
</TD>

Foram muitas informações, não?

Para ajudar, vou colocar aqui um script de base.

<HTML><HEAD>
<title> Tutorial de e-mails- Lili Russo</title>

<STYLE>BODY {
BORDER-RIGHT: #687966 5px ridge; BORDER-TOP: #687966 5px ridge; SCROLLBAR-FACE-COLOR: #b1c7af; FONT-SIZE: 16pt; SCROLLBAR-HIGHLIGHT-COLOR: #687966; BORDER-LEFT: #687966 5px ridge; SCROLLBAR-SHADOW-COLOR: #687966; COLOR: #687966; SCROLLBAR-3DLIGHT-COLOR: #687966; SCROLLBAR-ARROW-COLOR: #d9e7da; SCROLLBAR-TRACK-COLOR: #b1c7af; BORDER-BOTTOM: #6879665px ridge; FONT-FAMILY: arial; SCROLLBAR-DARKSHADOW-COLOR: #687966; SCROLLBAR-BASE-COLOR: #b1c7af
}
.TAB1 {
BORDER-RIGHT: #d9e7da 6px dotted; BORDER-TOP: #d9e7da 6px dotted; BORDER-LEFT: #d9e7da 6px dotted; BORDER-BOTTOM: #d9e7da 6px dotted; BACKGROUND-COLOR: #687966
}
.TAB2 {
BORDER-RIGHT: #687966 3px dashed; BORDER-TOP: #687966 3px dashed; BORDER-LEFT: #687966 3px dashed; BORDER-BOTTOM: #687966 3px dashed; BACKGROUND-COLOR: #b1c7af
}
.TD1 {
BORDER-RIGHT: #d9e7da 3px dashed; BORDER-TOP: #d9e7da 3px dashed; BORDER-LEFT: #d9e7da 3px dashed; BORDER-BOTTOM: #d9e7da 3px dashed; BACKGROUND-COLOR: #687966
}
.TD2 {
BORDER-RIGHT: #d9e7da 3px dashed; BORDER-TOP: #d9e7da 3px dashed; BORDER-LEFT: #d9e7da 3px dashed; BORDER-BOTTOM: #d9e7da 3px dashed; BACKGROUND-COLOR: #b1c7af
}

A {
TEXT-DECORATION: underline
}

</STYLE>
</HEAD>
<BODY bgColor=#b1c7af>
<TABLE class=TAB1 cellSpacing=20 cellPadding=20 width="400px" align=center>
<TBODY>
<TR>
<TD bgColor=#b1c7af>
<TABLE class=TAB2 cellSpacing=4 cellPadding=10 width="400px" align=center>
<TBODY>
<TR>
<TD bgColor=#b1c7af>
<TR>
<TD class=TD1 align=center width="60%" Cellpadding="4"
Cellspacing="4"><IMG alt="" hspace=0
src="imagem"
border=0>
<TD>
<DIV></DIV>
<TD class=TD2 align=center>
<DIV style="OVERFLOW: auto; WIDTH: 300px; HEIGHT: 250px">
<DIV><FONT face="Comic Sans MS" size=4>Texto</FONT></DIV>
<DIV></DIV></DIV></TD></FONT>
<DIV></DIV></TD></TR></TBODY></TABLE>
<DIV></DIV></TD></TR></TBODY></TABLE>
</BODY></HTML>

Tarefa

Escreva um script (em seu bloco de notas) que tenha duas tabelas, uma dentro da outra.
A segunda tabela deve ter duas células: uma com uma imagem e a outra com um texto. Nesta tabela de texto deverá haver um link (pode ser para uma página ou para um e-mail), mas este link não poderá ser colocado em uma imagem, isto é, ele deverá ser escrito porque iremos aplicar um dos estilos de link vistos nesta aula.
As bordas de cada tabela devem estar em um estilo e com cores diferentes.
Formate a mensagem, usando um back, bordas e barra de rolagem colorida, as tabelas e demais itens apresentados ... e anexe o script que você redigiu.
Envie para o 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


	.