AULA 13: Pàginas com frames

Separadores primários

Read time: 6 mins

AULA 13: Páginas com frames


Vamos aprender o que são frames e como as utilizar numa página Web.


As Frames


O que são frames?

Decerto que já navegou por páginas que se subdividem em duas ou mais partes. Geralmente tem uma zona mais pequena com um menu e depois o conteúdo encontra-se numa zona distinta da página. Quando faz scroll apenas parte da página se mexe, isto são frames. Uma página com frames é um html normal que é sobreposto por dois ou mais htmls arrumados 'por cima' deste.


Fazer uma página com frames


A utilização de frames é muito polémica, as frames podem dar problemas nalguns computadores ou até impossibilitar a visualização do seu site nalguns browsers mais antigos. De qualquer maneira vamos ensinar básicamente como funcionam e como se constrói uma página com frames. Mas fica o aviso: as frames são mal vistas e podem ser muito desagradáveis se forem mal aplicadas. Vamos a isto.

Vamos criar uma página com duas frames, uma mais estreita à esquerda para conter um menu de links e outra grande à direita onde irá aparecer o conteúdo de cada link. Para isto temos que criar um html que vai conter as frames e indicar o tamanho e características destas. Cada frame será um html à parte. Ou seja, uma página com 2 frames tem no mínimo 3 htmls. Um html base que as contém e mais dois que aparecerão nas ditas frames.

Comece por criar 2 htmls limpos em que a única coisa que terão diferente será a cor de fundo. Isto servirá apenas para poder visualizar o seu trabalho.
Chame ao primeiro ''lista.html'' e ao segundo ''conteudo.html''

o nosso lista.html:

<HTML>
<BODY bgcolor="#00FFFF">
</BODY>
</HTML>

E o conteudo.html:

<HTML>
<BODY bgcolor="#00FF00">
</BODY>
</HTML>


Grave-os na mesma pasta. Estas páginas apenas têm um fundo colorido e só servem para exemplificar.

Vamos começar então o html geral, aquele que vai definir as frames:


<html>


<frameset cols="130,*">

<frame name="lista" src="lista.html" scrolling="Auto" frameborder="no">

<frame name="conteudo" src="conteudo.html" scrolling="Auto" frameborder="no">

</frameset>


</html>

E explicá-lo:

ATENÇÃO: Este html não tem o tag <body>, apenas o <frameset>. Se inserir um <body>, esta página passará a ser um html normal e ignorará as frames.

Este html contém duas frames que chamam o lista.html e o conteudo.html


O frameset: indica-nos a largura que têm as frames. Ao escolher 130 indicámos que a frame da esquerda, a mais estreita, que contém a lista; tem 130 pixeis de largura.
Dentro do <frameset></frameset> temos então a descrição detalhada de cada frame com o tag <frame>. Este tag necessita de vários atributos como pode ver no exemplo.

cols="" : este parâmetro do frameset define que as dimensões são aplicadas a colunas, no caso da página estar dividida na horizontal o parâmetro a usar seria o rows=""

name="" : Dá um nome à frame. Quando clica num link, a página de destino abre substituindo aquela onde está, certo? Aqui acontece o mesmo, se clicar num link existente na frame mais estreitinha, o html de destino vai abrir na mesma frame. O que nós queremos é que ele abra sempre na frame de conteúdo (a da direita). Assim demos um nome a cada uma das frames, nos links (<a href>) iremos acrescentar um parâmetro que indica em que frame este deve abrir.

scr="" : Indica que html deve aparecer inicialmente naquela frame, na primeira indicámos o lista.html e na segunda o conteudo.html

scrolling="" : Indica se queremos que aquela frame tem o elevadorzinho de scroll à direita. este pode ter os valores: "Yes", "No" ou "Auto".
O "Yes" insere elevador, mesmo que não seja necessário.
O "No" Faz com que a frame nunca tenha elevador mesmo que seja necessário.
O "Auto" apenas insere o elevador se este for necessário para fazer scroll.

frameborder="" : Pode ser "Yes" ou "No". Este insere uma separação entre as frames. Esta separação será da mesma côr das suas janelas se usa o windows. Geralmente a côr por defeito é cinzenta. No nosso caso indicámos que não queremos border. Aparece portanto um pequeno espaço cinzento. Podemos tornar a border invisível acrescentando ao <frameset> o parâmetro border="0".

Resumindo:

Faça 2 htmls (lista e conteúdo)
Faça um html que defina as duas frames para os conter.Este html não terá o tag <body>, apenas terá o <frameset> com as suas duas frames lá dentro.


Os tais links que se clicam aqui e abrem ali.


Como dissemos anteriormente, quando se clica num link, este abre na mesma frame. Nós não queremos isso; queremos que, ao clicar num link à esquerda, este abra à direita mantendo a lista de links intacta. Aqui aprendemos mais um parâmetro para o tag: o target="".

Target significa alvo e nós com este parâmetro indicamos o alvo do link a abrir. Vamos usá-lo no nosso html lista.html:

<HTML>
<BODY bgcolor="#00FFFF">
<font face="Arial, Helvetica">
<b>
<a href="http://www.aminharadio.com" target="conteudo">aminharadio</a><br><br>
<a href="http://www.infordesporto.pt" target="conteudo">Infordesporto</a><br><br>
<a href="http://www.sapo.pt" target="conteudo">Sapo</a><br><br>
<a href="http://www.wired.com" target="conteudo">Wired</a>
</b>
</font>
</BODY>
</HTML>


Repare no target, indica a frame 'conteudo'. Faça o teste, agora que já tem o html de frames, o lista.html e o conteudo.html feitos e todos na mesma pasta, abra a página de frames e repare que quando clica no link para a aminharadio, aparece-lhe o conteúdo desta na frame da direita sem se sobrepor ao menu que definiu.

E se eu quiser que o link me abra na janela inteira? Nada mais fácil, diga que o target="_top" assim ele abre na janela toda e sobrepõe qualquer frame. (não se esqueça do tracinho antes do 'top').

Agora substitua o lista.html por este código

<HTML>
<BODY bgcolor="#00FFFF">
<a href="http://www.aminharadio.com" target="conteudo">aminharadio</a>
<a href="http://www.aminharadio.com" target="_top">aminharadio</a>
</BODY>
</HTML>

Clique no primeiro link, e depois no outro; a diferença é obvia.

No exemplo dado, as páginas que foram abertas (na direita) utilizando os links da esquerda foram páginas externas, no entanto esta ''técnica'' pode ser utilizada para abrir as suas páginas localmente.

Mais uma vez aconselhamos muita cautela no uso de frames, elas podem ser muito uteis, mas podem também dificultar a navegação, para além disso o dominio do uso de frames leva algum tempo e bastante prática.


Comentários

Eu tenho uma intra feita neste mesmo esquema, mas uma coisa não estou conseguindo fazer e gostaria de saber se é possível:
eu queria abrir mais de uma aba dentro do frame, exemplo:
eu tenho o menu, quando eu clico em qualquer opção abre esta opção no iframe, mas gostaria de quando clicar em outra opção, abrir no lugar da que já está aberta, abrir um nova aba dentro do frame, ou seja, sempre usando a mesma aba do browser, mas abrindo novas abas dentro do frame, é possível?

Array
Retrato de aminharadio

Sim, se entendi a sua questão, é possível.
Crie as duas iframes com as dimensões pretendidas, por exemplo, uma mais pequena com os links de menu e outra maior onde surgirá o conteúdo.
Dê um nome a cada iframe, como exemplo abaixo.

António Silva - aminharadio.com