Molduras (Frames) HTML

Com as molduras, você pode exibir mais de uma página Web na mesma janela do navegador.

Exemplos

Conjunto de Molduras Verticais
Este exemplo demonstra como fazer um conjunto de molduras verticais com três documentos diferentes.

Conjunto de Molduras Horizontais
Este exemplo demonstra como fazer um conjunto de molduras horizontais com três documentos diferentes.

Como usar a tag <noframes>
Este exemplo demonstra como usar a tag <noframes>.

(Você pode encontrar mais exemplos no final desta página.)

Molduras (Frames)

Com molduras, você pode exibir mais de um documento HTML na mesma janela do navegador. Cada documento HTML é chamado de moldura, e cada moldura é independente das outras.

As desvantagens de usar molduras são:

• O desenvolvedor Web deve vigiar mais documentos HTML
• É difícil imprimir a página inteira

A Tag de Conjunto de Molduras (Frameset Tag)

• A tag <frameset> define como dividir a janela em molduras
• Cada conjunto de molduras define um conjunto de linhas ou colunas
• Os valores das linhas/colunas indicam a quantidade da área da tela que cada linha/coluna irá ocupar

A Tag Moldura (Frame)

• A tag <frame> define qual documento HTML colocar em cada moldura

No exemplo abaixo temos um conjunto de frames com duas colunas. A primeira coluna é configurada em 25% da largura da janela do navegador. A segunda coluna é configurada em 75% da largura da janela do navegador. O documento HTML "frame_a.htm" é colocado na primeira coluna, e o documento HTML "frame_b.htm" é colocado na segunda coluna:

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

Observações Básicas - Dicas Úteis

Se uma moldura tem bordas visíveis, o usuário pode redimensiona-las arrastando a borda. Para evitar que um usuário faça isso, você pode adicionar noresize="noresize" à tag <frame>.

Adicione a tag <noframes> para navegadores que não suportam molduras.

Mais Exemplos

Conjunto de Molduras Misto
Este exemplo demonstra como fazer um conjunto de molduras com três documentos, e como mistura-los em linhas e colunas.

Conjunto de molduras com noresize="noresize"
Este exemplo demonstra o atributo noresize. As molduras são são redimensionáveis. Mova o mouse sobre as bordas enter as molduras e observe que você não pode mover as bordas.

Moldura de navegação
Este exemplo demonstra como fazer uma moldura de navegação. A moldura de navegação contém uma lista de vínculos com a segunda moldura como alvo. O arquivo chamado "contents.htm" contém três vínculos. Código fonte dos vínculos:
<a href ="frame_a.htm" target ="showframe">Moldura a</a><br />
<a href ="frame_b.htm" target ="showframe">Moldura b</a><br />
<a href ="frame_c.htm" target ="showframe">Moldura c</a>
A segunda moldura irá mostrar os documentos vinculados.

Moldura em série (inline)
Este exemplo demonstra como criar uma moldura inline (uma moldura dentro de uma página HTML).

Saltar para uma seção específica dentro de uma moldura
Este exemplo demonstra duas molduras. Uma das molduras tem uma fonte para uma seção específica em um arquivo. A seção específica é identificada com <a name="C10"> no arquivo "link.htm".

Saltar para uma seção específica com moldura de navegação
Este exemplo demonstra duas molduras. A moldura de navegação (content.htm) à esquerda contém uma lista de vínculos com a segunda moldura (link.htm) como alvo A segunda moldura mostra o documento vinculado. Um dos vínculos na moldura de navegação está vinculado a uma seção específica no arquivo alvo. O código HTML no arquivo "content.htm" parece com isto: <a href ="link.htm" target ="showframe">Vínculo sem âncora</a><br /><a href ="link.htm#C10" target ="showframe">Vínculo com âncora</a>.

Tags de Molduras