CURSO DE WEBDESIGN - 4ª AULA
Os frames
Frames

Os frames são divisões da tela do browser em diversas telas (ou "quadros", por isso o nome de frame, moldura em inglês). 

Com isso, torna-se possível apresentar mais de uma página por vez: por exemplo, um índice principal em uma parte da tela e os textos relacionados ao índice em outra parte.

É muito fácil colocar frames em páginas; porém, nem todos os usuários gostam deles. 

Uma página com frames tem um texto fonte semelhante a: 

<HTML>
<HEAD><TITLE>Exercício - Aula 5</TITLE></HEAD 
<FRAMESET COLS="20%, 80%">
<FRAME SRC="indice1.html">
<FRAME SRC="apresenta.html" NAME=PRINCIPAL>
<NOFRAME> 
<BODY> 
<P>Aqui vc escreve o texto que quiser, e este texto será lido por quem não estiver usando um browser que suporte frames. 
</BODY>
</NOFRAME>
</FRAMESET>
</HTML>

A parte FRAMESET define a divisão da página em "quadros". Neste exemplo, a página será dividida em duas colunas, sendo a primeira, da esquerda, com 20% do tamanho da tela, e a segunda coluna, da direita, com os restantes 80% da tela.

Dentro da formatação de FRAMESET, temos os FRAME SRC, que são referências às páginas que serão mostradas nos frames definidos

Assim, aqui vemos que a página indice1.html será mostrada na primeira coluna (que ocupará 20% da tela), e apresenta.html será mostrada na segunda (ocupando 80% da tela). 

[Veja o exemplo frame1.html na pasta da aula 5]

A formatação de frames inclui também uma parte NOFRAME, que é mostrada normalmente pelos browsers que não suportam a apresentação de frames.

Links com Frames

Sempre que se aciona um link dentro de uma página, o default (isto é, o comportamento padrão) é que a página referente a esse link seja carregada na mesma janela da página anterior. No exemplo visto com frames, seguir um link dentro da janela à direita faz com que a página apontada seja mostrada ocupando a janela da direita (coluna de 80%): 

<HTML>
<HEAD><TITLE>Exercício da aula 4</TITLE></HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="indice1.html">
<FRAME SRC="apresenta.html" NAME=principal>
<NOFRAME>
<BODY>
<P> Aqui vc escreve o texto que quiser, isso é um teste, e o que v/c escrever aqui NÃO vai aparecer para quem tem navegador que leia frames. 
</BODY> 
</NOFRAME>
</FRAMESET>
</HTML>

Veja no código fonte acima que o frame associado a apresenta.html tem um atributo NAME

Isso faz com que se possa "direcionar" o frame em que queremos mostrar determinada página ao acionarmos um link. 

No exemplo visto, o arquivo indice1.html tem um link da seguinte forma: 

<a href="apresenta2.html" target=principal>Exemplo nº.2</a> 

Quando se acionar esse link, a página apresenta2.html será mostrada no frame que denominamos principal, ou seja: em vez de carregar apresenta2.html na mesma coluna em que está indice1.html, ela será mostrada na coluna em que está apresenta.html. 
 

Composições com Frames

Como já foi possível observar, FRAMESET tem atributos que definem a divisão da janela do browser em colunas; essa divisão também pode ser feita em linhas, e utilizando uma combinação de "framesets" para variadas apresentações:

Lembre-se de que os frames fixos não precisam ter nomes, mas os frames que receberão textos, sim! 

O exemplo simples visto até agora segue o modelo da primeira composição (em colunas). 

As composições com mais de um frameset precisam ser bem planejadas para funcionarem bem.

Atributos de Frames

Até este ponto, vimos os atributos COLS e ROWS (para FRAMESET), SRC e NAME (para FRAME). 

Outros atributos permitem um maior controle sobre a apresentação: 

Eliminação das bordas dos frames: 

FRAMESET FRAMEBORDER="NO" BORDER="0"

[Exemplo] - Nome do arquivo = Frame 2

Frame sem barra de rolagem 

FRAME SCROLLING="NO" 

[Exemplo] - Nome do arquivo = Frame 3

É bom lembrar que a barra de rolagem de um frame fica sempre à direita; não é possível, atualmente, mudar essa característica.

Aplicações de Frames e Cuidados

Frames são interessantes para apresentar conjuntos de páginas com um índice fixo para a navegação. Além disso, torna-se possível mostrar diversas páginas e/ou mídias em uma única janela do browser. 

Um cuidado é procurar controlar bem a navegação, evitando que o acionamento de links não leve o leitor a ver seu browser criar frames dentro de frames, gerando uma grande confusão (veja item seguinte, sobre "limpar" a tela). 

Limpando a Tela

Há basicamente dois efeitos possíveis para limpar a apresentação de frames, e isso é feito com "targets" especiais (lembre-se como usar o atributo TARGET no item Links com frames): 

TARGET="_top" limpa os frames, apresentando a próxima página em tela inteira 

TARGET="_blank" abre uma nova janela do browser, sem frames, para apresentar a próxima página 
 
 

Exemplos de como eles ficam na página podem ser vistos em:

arquivo 3.gif
arquivo 9.gif
arquivo 25.gif
arquivo 013.jpg
arquivo 017.jpg
arquivo 060.jpg
arquivo 10.jpg
arquivo 14.jpg
arquivo 22.jpg
arquivo 23.jpg
arquivo 27.jpg
arquivo 39.jpg
arquivo A9fls.gif
arquivo 1oo.gif
arquivo 2973936[1].gif

Exemplos de frames VERTICAL e HORIZONTAL

Exercício:

A primeira imagem para ser usada como ilustração chama-se fortaleza1.jpg.

A segunda imagem chama-se parati4.jpg.

Os textos estão nos arquivos chamados desejo.txt e diferenca.txt.

Há vários arquivos pequenos, que podem ser usados no fundo dos frames.