Raphael Simas Segunda-feira, 30 de setembro de 2002
Camadas vs. Tabelas - Parte 3
Olá pessoal!
Hoje vamos terminar nossa série Camadas vs. Tabelas.
Nosso exemplo é um site inteiro onde usaremos aplicações
de tabelas na estruturação e divisão
do conteúdo e camadas para uma animação.
Aplicaremos também o uso de iFrames dentro das tabelas
para o conteúdo. Então, vejam o exemplo, porque
a coluna ainda tem muito o que mostrar! Vamos lá!
---------------------------------------------------------------
01 - Veja AQUI
o Exemplo.
02 - Baixe AQUI
o Exemplo.
---------------------------------------------------------------
Montando as Imagens:
Vamos analisar o layout criado para o site do exemplo.
Veja a figura abaixo:
Essa foi a divisão feita em nosso projeto. Após
ter criado o visual do site no Fireworks, fiz fatias e as
exportei separadamente. As divisões, como na figura,
foram feitas da seguinte forma:
---------------------------------------------------------------
1
(Azul escuro) - Fatia com a pequena parte do topo.
2 (Azul claro) - Fatia com a pequena parte
da esquerda.
3 (Verde) - Fatia com a figura do menu...
esta será a única parte da composição
das figuras que será exportada em .jpg.
4 (Vermelho) - Fatia Título da Pousada.
5 (Amarelo) - Fatia com o endereço
da pousada.
6 (Laranja) - Fatia com o Copyright.
7 (Branco) - Fatia para o meio do site....
apenas para figurar pois será montada com figuras separadas
e textos html...
---------------------------------------------------------------
Com as figuras todas exportadas, vamos criar a solução
em tabelas para a estrutura do site.
Crie uma tabela com 3 colunas e 3 linhas e 680px X 364px (medidas
do nosso exemplo). Usaremos a opção "Merge
Selected Cells" (mostrada na coluna anterior) para estruturar
adequadamente. Veja no esquema abaixo a progressão:
Com essas divisórias feitas, vamos inserir as imagens. Veja abaixo:
---------------------------------------------------------------
01 - Lembre-se
de alinhar verticalmente as células para "Top"
e colar nas figura as bordas da tabela... A tabela não
poderá ter qualquer tipo de espaço entre suas
células, senão, aparecerão pequenas linhas
entre as figuras, prejudicando o resultado final.
02 - Certifique-se também de que
CellPad e CellSpace estão com valor "0" (Zero).
03 - Na seunda coluna você inserirá
as duas figuras (menu e endereço).
Dica: Recebo vários emails com esta dúvida:
Como eliminar aquele espaço entre o corpo do site e
a borda do navegador!.... É fácil... basta acessar
as Propriedades da página (Ctrl + J) e zerar as opções
Left Margin, Top Margin, Margin Width e Magin Height... Assim,
não haverá nenhum espaço entre o site
e a borda do navegador.
---------------------------------------------------------------
Agora, criaremos uma nova tabela para o Copyright!
Insira uma nova tabela com medida 680px horizontal e dentro,
a imagem da barra copyright. Ajuste os tamanhos.
Assim, terminamos a estruturação principal.
Faremos agora as páginas para os links. Poderíamos
seguir duas variáveis: a primeira seria fazer um novo
topo, reto e com os links na horizontal.. A segunda seria
continuar com o layout principal e abrir os links no espaço
demarcado para o conteúdo. Optei pela segunda variável.
Então, vamos usar iFrames, desempenhando a função
de um frame mesmo. Os links abrirão dentro do iFrame
e as outras partes do layout ficarão fixas sempre.
Então, vamos criar todas as páginas para os
links. Elas serão páginas separadas,
sem o layout, pois apenas abrirão dentro do iFrame.
- Criando o conteúdo da capa do site
Crie uma nova tabela com 415px horizontais,
2 colunas. Ela será nossas divisórias.
Dentro da primeira célula, colocaremos uma gif animada
simulando uma publicidade dentro do site..
Agora, dentro da segunda célula, criaremos as 3 chamadas.
Crie uma tabela com 1 coluna e 5 linhas (263px Horizontais).
Dentro da primeira célula, crie uma outra tabela com
2 colunas e 2 linhas, mesclando ("Merge selected Cells")
na primeira. Ficará assim:
Agora, você colocará na tabela os conteúdos:
 |
 |
| Faça já sua reserva e garanta um lugar no Paraíso! |
Agora, na próxima linha da tabela, insira
a linha tracejada... agora, repita o processo para os outros
2 destaques... Assim você fecha a capa do site!.
Criando o conteúdo de cada Link
No menu, utilizaremos animação
em camada para um submenu, puxando do ítem "Reservas"
com algumas opções. Mas vamos concluir todas
as páginas antes..
Faça um .htm para o link mapa. Mantenha a tabela usada
para estruturar a capa, eliminando apenas uma das colunas.
Insira as imagens do mapa e do título. Baixe o exemplo
para ver os alinhamentos aplicados à cada célula.
Agora salve.
Repita o processo para os Links "Diárias"
e "Contato".
Para o link "Reservas", teremos 2 subitens: Pessoa
Física e Pessoa Jurídica. Então, faremos
duas páginas para este link....
Com todos os links feitos, vamos linkar no menu... Porém,
vamos supor que o site não pudesse ser recarregado
em todo link... apenas o conteúdo deveria ser chamado.
Então, usaremos iFrames, fazendo com que apenas o conteúdo
seja chamado...
Crie então um iFrame dentro da área do conteúdo
(área 7) com os seguintes dados:
<iframe name="main" leftmargin=0
topmargin=0 marginWidth=0 marginHeight=0 src="exemplo_capa.htm"
frameBorder=0 width=415 height=240 scrolling=no></iframe>
---------------------------------------------------------------
IMPORTANTE
01 - Este iFrame deverá ter um nome... veja
que colocamos como "main"... sem o nome, o navegador
não terá como interpretar o caminho onde abrirão
os links..
02 - Este iFrame puxará a capa do
site... capa tal que fizemos com a gif animada + os 3 destaques.
---------------------------------------------------------------
Vamos agora, linkar o menu. Note que existem links na diagonal...
como mapeá-los assim? Simples...basta usar o tipo de
Mapa "Poligon Hotspot Tool". Você vai clicando
nos pontos até formar a geometria desejada, que no
nosso caso será um retângulo na diagonal...
Como os quatro mapas prontos, vamos indicar a página
a ser chamada e o local (dentro do iFrame).
Selecione o primeiro link (Mapa).. Indique o caminho o .htm
e em Target escreva o nome do iFrame (main). Não deve
ter o grifo na frente (_main) senão, não funcionará).
Assim feito, o link abrirá dentro do iFrame...
Repita este proceso para os Links "Diárias"
e "Contato".
Veja no exemplo que no link "Reservas" existe uma
aplicação de Camadas. Não vou me alongar
muito nesta aplicação porque é igual
a criação dos menus pop-ups...
O que é importante dizer é que a ação
do mapa é PlayTimeline com evento OnClick. Para animar,
usamos uma camada como máscara e outra com a imagem
do menu (imagem que deverá ser mapeada com a indicação
da Target "main"). A camada que adicionamos à
Timeline é a camada da Máscara... veja que ela
vai se movendo e descobrindo a camada com o submenu..
Para desaparecer, coloquei o evento OnClick Hide Layer Mask
nos links do submenu...
Pronto... está quase....
Já temos toda a estrutura do site, tabelada, linkada
nos iFrames e animada com a camada. Vamos dar um último
acabamento, fazendo o site ficar centralizado na tela independente
da resolução do visitante e do redimensionamento
do navegador.
Crie uma página nova. Nela, crie uma tabela com medidas
100% (percent) horizontais e 100% (percent) Verticais (atente-se
para as medidas Percent. Não deixe em Pixels senão,
a tabela não vai se redimensionar).
Dentro desta tabela Percent, crie uma nova tabela com a medida
exata do site: 680px X 380px. Dentro desta tabela, faça
um iFrame com os seguintes dados:
<iframe name="load" leftmargin=0 topmargin=0
marginWidth=0 marginHeight=0 src="exemplo_principal.htm"
frameBorder=0 width=680 height=380 scrolling=no></iframe>
Assim, finalizamos nossa série de colunas sobre o Tema
Camadas vs. Tabelas. Foram 3 artigos onde mostramos algumas
situações reais de manuseamento de tabelas e
aplicações, igualmente reais de camadas.
Continuem mandando pedidos, sugestões, críticas
etc..... raphael@cafeazul.com.br
É isso pessoal. Essa foi a 30º coluna. Até
a próxima semana com mais assuntos interessantes.
Dica de Áudio:
Álbum: G3 Live In Concert
Ano: 1997
Comentários: Este é
um encontro dos três melhores guitarristas da época:
Joe Satriani, Eric Johnson e Steve Vai.. Cada guitarrista
toca 3 músicas próprias com suas bandas. Ao
fim, os 3 guitarristas se juntam e tocam 3 covers... nem precisa
dizer o que acontece nessas três músicas hehe...
só ouvindo mesmo...