Estrutura avançada "frames"

@Gilson_Brener 26.janeiro.2013 Frams Avançado Visualizações

Quem já navegou um pouco pela Internet com certeza já encontrou páginas em que, por exemplo, existe um menu estático no lado esquerdo do ecrã e o conteúdo do lado direito é que vai mudando.

Para tal é utilizado um processo mais complexo no qual visualizamos ao mesmo tempo no ecrã mais que uma página HTML. Para isso usa-se aquilo que iremos chamar de sistema de ‘frames’.

O princípio é simples. Temos uma página que nos indica a posição na qual as outras páginas serão colocadas. No exemplo referido de um menu do lado esquerdo, ateríamos, por exemplo uma página principal.htm que nos diz para exibir a página menu.html no lado esquerdo e a página conteudo.htm no lado direito.

Vamos agora ver como criar uma página com três ‘frames’, uma do lado esquerdo, e do lado direito um cabeçalho e o corpo, como no seguinte esquema:
 
esquerda
cima
conteudo
 
<HTML>
<HEAD><TITLE>Página com Frames</TITLE></HEAD>
<FRAMESET COLS ="160,*" BORDER="0" FRAMESPACING="0">
<FRAME SRC="esquerda.htm" NAME="esquerda" NORSIZE FRAMEBORDER="NO">
<FRAMESET ROWS ="90,*">
<FRAME SRC="cima.htm" NAME="cima" NORESIZE SCROLLING="NO" FRAMEBORDER="NO"><FRAME SRC="conteudo.htm" NAME="conteudo" FRAMEBORDER="NO">
</FRAMESET>
</FRAMESET>

<NOFRAMES>
<BODY BGCOLOR="#FFFFFF">
Esta página usa frames, mas o seu browser não as consegue visualizar.
</BODY>
</NOFRAMES>
</HTML>

Vejamos: esta página é algo diferente daquilo que aprendemos até agora. Isto porque aquilo que vemos no ecrã não é esta página, mas sim aquelas que esta refere.

Para definir frames, utiliza-se o ‘tag’ <FRAMESET>. Como não se trata propriamente do corpo da página, este ‘tag’ define uma área após a área <HEAD>, mas não contido dentro do ‘tag’ <BODY>. Ao utilizar o parâmetro COLS, divide a página em colunas, neste caso definidas por "160,*". Isto significa que são criadas duas, uma com 160 pixeis de largura e outra que ocupa o resto do espaço disponível no ecrã. As medidas das frames podem ser fornecidas em pixeis, em percentagem do espaço disponível ou por um asterisco, que significa ‘o resto’. Estas colunas são definidas da esquerda para a direita. Temos também BORDER e FRAMESPACING, que definem a borda e o espaçamento entre frames.

Dentro de <FRAMESET>, podemos então definir a frame propriamente dita ou subdividi-la pela ordem em que foram criadas as colunas. Temos então inserido o ‘tag’ <FRAME>, que se refere à primeira coluna (de 160 pixeis). SRC define qual o ficheiro HTML a ser exibido nessa frame, NAME, muito importante, indica qual o nome da frame, para que as links possam lá recair (veremos isto mais à frente). NORESIZE indica que a frame não pode ser redimensionada com o rato, e FRAMEBORDER, mais uma vez, a borda da frame. Utiliza-se <FRAME FRAMEBORDER> e <FRAMESET BORDER> mais uma vez por uma questão de compatibilidade entre o Internet Explorer e o Netscape Navigator. SCROLLING pode ser definido com "YES" ou "NO" para obrigar a barra de scroll a estar sempre visível ou escondida.
 
 
A segunda coluna que definimos é então ocupada por um novo <FRAMESET>, este agora que divide essa área em duas linhas, utilizando ROWS. De forma semelhante a COLS, ROWS divide a área a que diz respeito em linhas, lidas de cima para baixo.
No final temos ainda uma estranha área<NOFRAMES>. Esta, que dentro de si contém uma área<BODY>, destina-se a alojar o conteúdo do corpo da página visível nos browsers antigos (anteriores ao Netscape 2.0), que não suportam frames.

Como é que fazemos com que as links ‘caiam’ sobre uma das frames que criamos?

Aí entra o parâmetro NAME de <FRAME>. Através do nome que definimos, podemos usar o seguinte código, por exemplo no ficheiro ‘esquerda.htm’:

<A HREF="link.htm" TARGET="conteudo">Link</A>
Através de TARGET podemos definir o ‘alvo’ de uma link, que terá o nome que atribuímos à frame desejada. Podemos ainda utilizar TARGET="_blank", que abre a link numa nova janela, e TARGET="_ top", que abre a link no topo de toda a hierarquia de frames no ecrã, apagando as frames existentes. Quando não é atribuído um TARGET, as links abrem por defeito na própria frame onde existem.

Postar um comentário