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
RodrigoRamos
Ter, 2015-07-07 21:01
Ligação permanente
AULA 13: Páginas com frames
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?
aminharadio
Ter, 2015-07-07 22:37
Ligação permanente
Iframes
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