Criando frames

Alguns web designers usam frames (molduras) em suas páginas, por uma questão de design e para fazer o site ficar mais amigável para o usuário. Frames não deixam você perder a referência durante a navegação, digamos assim. Você sabe que um site foi feito com base em frames quando uma parte da página fica parada e outra parte da mesma página muda quando você clica em um link. Para ver uma página com frames, visite The Birch Aquarium (em inglês).

A grande lista
Confira a Grande lista de tags de HTML. É um guia de referência em uma única página para impressão com todas as tags de HTML apresentadas neste artigo - de fácil acesso e em formato PDF para impressão mais fácil!
Na página do The Birch Aquarium, o topo e a base da página permanecem os mesmos, enquanto a parte do meio muda de acordo com o link escolhido. Esta página é separada em três frames, o que significa que três documentos HTML estão sendo exibidos ao mesmo tempo. Você pode escolher em quantas seções vai dividir sua página, de que maneira elas serão divididas e quais documentos HTML você quer colocar em cada frame.

Primeiro, é importante planejar bem sua página. Pense no layout em termos de linhas e colunas. Quantas seções horizontais, ou linhas, você quer exibir? Quantas seções verticais, ou colunas? De quanto espaço, em pixels ou porcentagem, você acha que cada seção vai precisar?

O documento frameset
O documento frameset é um HTML que instrui o navegador sobre como arrumar o conteúdo na página. No documento frameset, a tag "frameset" substitui a tag "body".

Você vai iniciar seu documento frameset no formato HTML normal:

<html><head><title>Título</title></head>

Em seguida, insira a tag "frameset":

Exemplo: <frameset rows="20%, 80%">

Esta tag indica que a página será dividida em duas seções, uma no topo e uma na base, conforme os dois valores indicados dentro da tag. Se fossem três seções, você colocaria três valores:

Exemplo: <frameset rows="10%, 50%, 40%">

Os números dizem ao navegador a quantidade de espaço, na janela do browser, que cada seção vai ocupar. Você pode usar valores percentuais ou em pixels. Um "*" também pode ser usado no lugar de um valor, indicando que uma seção em particular pode usar o espaço que estiver disponível na janela do navegador:

Exemplo: <frameset rows="100, *, 50">

Esta tag diz que a página será dividida em três seções. O primeiro frame (topo) ocupará 100 pixels de espaço, o frame da base ocupará 50 pixels, e o frame do meio vai ocupar o espaço que sobrar na janela do navegador.

Se sua página será dividida em colunas, use a tag frameset para colunas, junto com os números:

Exemplo: <frameset cols="200, *">

Esta tag diz ao browser para ele dividir a página em duas colunas. A coluna da esquerda vai ocupar 200 pixels de espaço. A coluna da direita vai ocupar o espaço que sobrar na janela do navegador.

Você também pode combinar framesets de linhas e colunas para criar layouts mais complexos. O "encadeamento" dos documentos frameset será discutido mais adiante neste artigo.

Adicionando a origem do frame
Se você ainda não criou os documentos HTML que vão ocupar cada frame na sua página, crie agora. Você pode usar os documentos HTML que criou nos capítulos anteriores.

Agora você vai adicionar ao seu documento frameset as tags "frame src", que dirão ao browser quais documentos HTML ele deve colocar em cada frame:

Exemplo: 

    Frameset Test

Este exemplo mostra um documento frameset que vai dividir a página em duas colunas, ou frames. No frame da esquerda, 200 pixels de espaço vão exibir o documento "links.htm". O resto da página, a coluna da direita, vai exibir o documento "information.htm". Você também viu ali as tags usadas para fechar um documento frameset:

</frameset>
</html>

Dando nomes aos frames
Geralmente, uma página tem frames para mostrar ou oferecer links para informações adicionais localizadas dentro do mesmo site. O site The Birch Aquarium é um exemplo de frames usados para exibir links para informações dentro do mesmo site. A barra do menu de links puxa informações para o frame do meio da página quando um link é clicado, sem atrapalhar os frames externos da página.

Para que o navegador saiba em qual frame colocar a informação linkada, você precisa dar "nomes" para os seus frames. Se você não especificar qual frame vai receber determinada informação, o frame do menu de links será substituído pela própria informação dos links, destruindo o visual e o propósito da sua página feita em frames.

Para dar nome a um frame, basta colocar a tag "name" (nome) dentro da tag "frame src" (origem do frame) no seu documento frameset. Você pode dar o nome que quiser para cada frame.

Exemplo:

<frame src="links.htm" name="menu">
<frame src="information.htm" name="info">

Depois de nomear o frame, você pode especificar em qual frame você quer que a informação do link seja colocada; para isto, adicione a tag "target" (destino), seguida do nome do frame.

Exemplo: <a href="http://www.hsw.com.br/company.htm" target="info"> Sobre a Empresa </a>

O browser agora sabe que precisa exibir a informação do link no frame chamado "info".

Salvando e visualizando seu documento
Como os documentos HTML comuns, os documentos frameset são salvos com extensões .htm ou .html. Não esqueça de colocar o arquivo frameset na mesma pasta dos documentos HTML que vão aparecer nos frames.

Quando você abre o documento frameset no navegador, tem que enxergar a tela dividida, com um documento HTML dentro de cada frame.

Removendo barras de rolagem e bordas
Se você prefere dar um visual "clean" para a sua página, sem barras de rolagem e bordas, você pode especificar em tags dentro da tag "frame src".

Remova as barras de rolagem com a tag "scrolling=no".

Exemplo: <frame src="links.htm" scrolling=no>

Remova as bordas com a tag "frameborder=0".

Exemplo: <frame src="links.htm" frameborder=0>

Você também pode especificar a largura e altura da margem de cada frame, adicionando as tags "marginwidth=valor" e "marginheight=valor". As margens podem ter quantos pixels você quiser. Estas tags devem ser inseridas dentro da tag "frame src".

Frames múltiplos
Pode-se combinar várias linhas e colunas de frames, criando documentos frameset dentro de outros documentos frameset. O conjunto de tags necessárias para criar este efeito pode ser bem complexo. Exemplo de uma página com frames "encadeados":

O documento frameset criado para este layout é: 

  Frame Test                                               

  Frame Test

Separado por partes, o que cada linha de tags "frame" indica é:

<frameset rows="20%, 80%">
Há duas linhas dentro deste documento. A linha de cima ocupa 20% do espaço vertical disponível. A de baixo, os outros 80%. De fato, estes valores especificam a altura de cada linha.

<frameset cols="70%, 30%">
Há colunas dentro da primeira linha. A coluna da esquerda ocupa 70% do espaço horizontal disponível e a coluna da direita, os 30% remanescentes. De fato, estes valores especificam a largura de cada coluna.

<frame src="logo.htm">
O documento HTM "logo" vai aparecer na primeira coluna da primeira linha.

<frame src="endereco.htm">
O documento HTM "endereco" vai aparecer na segunda coluna da primeira linha.

</frameset>
O frameset da primeira coluna está completo.

<frameset cols="85%, 15%>
Há duas colunas dentro da segunda linha. A coluna da esquerda ocupa 85% do espaço horizontal disponível. A da direita, os outros 15%.

<frame src="info.htm">
O documento HTM "info" vai aparecer na primeira coluna da segunda linha.

<frame src="links.htm">
O documento HTM "links" vai aparecer na segunda coluna da segunda linha.

</frameset>
O frameset da segunda coluna está completo.

</frameset>
O frameset inteiro está completo.

Frames são uma boa ferramenta para tornar a página mais atraente e dinâmica. Eles permitem que determinados aspectos da página permaneçam inalterados mesmo quando o usuário clica em um link para outra parte do site, ou para outro site totalmente diferente. Para continuar construindo a página dos seus sonhos, confira a próxima seção sobre imagens.