HTML

“Frames”

Já viram páginas web onde existe um menu fixo do lado esquerdo do ecrã e o conteúdo do lado direito é que vai mudando.
Para esse efeito utilizasse algo mais complicado no qual visualizamos ao mesmo tempo no ecrã mais que um ficheiro HTML.
Chama-mos a isto, sistema de ‘frames’.

O princípio é simples.

Temos uma página que nos diz a posição na qual as outras páginas serão colocadas.
No exemplo referido acima, de um menu do lado esquerdo, teríamos, por exemplo uma página principal.htm que nos diz para exibir a página menu.html no lado esquerdo e uma outra, pagina1.html no lado direito.

Vamos ver como criar uma página com três frames.

Do lado esquerdo, um frame. Do lado direito, um cabeçalho e o corpo, como na figura seguinte:


Esquerda Cima
Conteúdo


<html>
<head><title>Página com Frames</title></head>
<frameset cols ="160,*" border="0" framespacing="0">
<frame src="esquerda.html" name="esquerda" norsize frameborder="NO">
<frameset rows ="90,*">
<frame src="cima.html" name="cima" noresize scrolling="no" frameborder="no">
<frame src="conteudo.html" name="conteudo" frameborder="no">
</frameset>
</frameset>
<noframes>
<body bgcolor="#FFFFFF">
</body>
</noframes>
</html>

Vejamos:

Esta página é diferente do 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 a etiqueta <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 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 frames, uma com 160 pixels de largura e outra que ocupa o resto do espaço disponível no ecrã.
As medidas das frames podem ser em pixels, em percentagem ou por um asterisco, que significa ‘o resto’.
Estas colunas são definidas da esquerda para a direita.
Temos ainda border e framespacing, que define a borda e o espaço entre as frames.
Dentro de <frameset>, podemos definir a frame 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 pixels).
src define qual o ficheiro HTML a ser exibido nessa frame, name, muito importante, indica o nome da frame, para que as links possam lá cair (veremos isto mais à frente).
noresize indica que a frame não pode ser redimensionada com o rato. frameborder, indica a borda da frame.
Utiliza-se <frameborder> e <frameset border>, 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 não.
A segunda coluna que definimos ocupada por um novo <frameset>, este agora que divide essa área em duas linhas, utilizando rows.
rows divide a área a que diz respeito em linhas, lidas de cima para baixo.
No final temos 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 que não suportam frames.

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

Aqui entra o parâmetro name de <frame>.
Através do nome que definimos, podemos usar a seguinte linha de código, por exemplo no ficheiro ‘esquerda.htm’:

<a href="link.htm" target="esquerda">Link</a>

Através de target definimos o ‘alvo’ de uma link, que terá o nome que atribuímos à frame desejada.
Podemos ainda utilizar target="_blank", para abrir a link numa nova janela, e target="_top", para abrir 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.
frameset divide a tela em partes.
Cols indica na vertical e rows na horizontal


0|1|2|3|4|5|6|7|8|9|10|11|12|13|14