pcdicasHTML

Frames

O uso de frames permite que diferentes arquivos HTML componham a mesma página, permitindo dividir o espaço da janela do navegador em colunas e/ou linhas e controlar o seu tamanho, determinando quantas serão as subdivisões e qual será sua distribuição na tela.

É importante ressaltar que cada uma destas "partes da tela" é ocupada por arquivos diferentes, totalmente independentes.

Portanto, o uso dos frames possibilita apresentar mais de uma página em cada tela. Por exemplo, um índice em uma parte pequena dela e os textos relacionados ao índice em outra parte. (Ex: Muitas Dicas, repare que há uma coluna à esquerda, independente do conteúdo à direita).

Exemplos de frames

Com 2 arquivos
 Com 3 arquivos
2 colunas


 		2 linhas

 		2 colunas
a 2a. com 2 linhas

 		2 linhas
a 2a. com 2 colunas

Geralmente uma página com frames é constituída de dois ou três elementos básicos:

- a página cujo nome é frameset. Ela contém os tags que especificam como as diferentes páginas aparecerão dentro da janela do navegador; ou seja,tem atributos que definem a divisão do espaço da janela do browser em colunas ou linhas.

- as páginas internas normais, denominadas frames, que aparecerão de acordo com as instruções contidas no código do frameset.

Cada uma destas marcações - <frameset> e <frame> - aceita extensões, valores e atributos.

Observação: É bom lembrar que a barra de rolagem de um frame fica sempre à direita.

Características do frameset

A página frameset é um arquivo HTML que, ao invés de conter os tags <BODY> e </BODY> os quais indicam o conteúdo do documento, possui os tags <FRAMESET> e </FRAMESET>.

Códigos do frameset

No tag frameset são importantes os atributos "Rows" e "Cols" (Linhas e colunas) que determinam a orientação dos frames.

COLS: determina a divisão da tela em colunas.

ROWS: determina a divisão da tela em linhas.

Tanto depois de COLS, como após ROWS aparecem, separados por vírgulas, o tamanho de cada linha ou coluna da página.

Os valores poderão ser:

- Numérico - pixels - Exemplo: (ROWS="30, 50"). Refere-se a quantos pixels cada frame (ou janela) deve ocupar.

- Relativo - * Exemplo: (ROWS="2*,*"). O valor é relativo. Nesse caso o primeiro frame ocupará dois terços da tela e o segundo um terço.

- Percentual - % Exemplo: (ROWS="25%, 25%, 50%"). O total deve somar 100%. Também poderia ser (ROWS="25%, 25%, *"), pois onde está o asterisco ( * ) o navegador colocará o valor que falta para que a soma dos valores resulte em 100%.

Três atributos muito usados no frameset são:

- FRAMESPACING: determina o espaçamento entre os frames (em pixels).

- FRAMEBORDER: define se haverá ou não bordas entre as frames (admite os valores 1, para inserir bordas ou 0, para retirá-las).

- BORDERCOLOR - especifica a cor da borda entre os frames.

Cercadas pelas tags <FRAMESET> e </FRAMESET>, você deve inserir as tags <FRAME> de acordo com o número de colunas ou linhas inserido nos atributos COLS e ROWS.

Os tags <FRAME> são responsáveis por definir qual página HTML será carregada dentro de cada uma das divisões do frameset. Também podem ter algumas outras configurações particulares.

Além dos atributos FRAMESPACING e FRAMEBORDER, há outros:

- SRC - especifica o arquivo a ser carregado no frame.

- MARGINHEIGHT e/ou TOPMARGIN: especificam a altura das margens superior e inferior do frame em pixels;

- MARGINWIDTH e/ou LEFTMARGIN: especificam a altura das margens direita e esquerda do frame em pixels;

- NAME: indica o nome deste frame, de modo a que possa ser identificado e localizado para carregar documentos, especialmente se forem utilizadas rotinas em JavaScript para comandar as páginas do frameset;

- NORESIZE: insira este atributo dentro da tag <FRAME> para que esta não possa ser redimensionada pelo usuário;

- SCROLLING: define se o frame terá ou não barra de rolagem (admite YES para que o frame possua barras de rolagem e NO, em caso contrário. Note-se que atribuindo YES, o frame só apresentará barra de rolagemse realmente for necessário, ou seja, se o tamanho do arquivo o exigir).

- SRC: define o caminho/nome da página HTML que será exibida dentro do frame

Exemplos de código fonte

Para criar uma das seguintes páginas (ou semelhantes) clicar em "Código Fonte " na barra Modos de edição e inserir o código, fazendo as modificações que desejar.

a. 2 colunas


Abaixo está o código fonte de um arquivo index.htm, que pode exemplificar o frameset do tipo 2 colunas. Ou seja, orientar que um dos arquivos fique na coluna da esquerda e o outro na da direita, sendo o último bem maior que o primeiro.

Supondo dois arquivos denominados coluna1.html (o menor) e coluna2.html (o maior), copiar ocódigo abaixo

- no NVU, com a aba Source ativada. Na aba normal nada aparecerá. Ou

 - no Metapad (ou Notepad), substituindo xxxxxxxxx pelo título do aquivo e salvar como html.

<html>
<head>
<title>xxxxxxxxxx</title>
</head>
<frameset border="1" borderCOLOR="#3A72BC" cols="15%,*">
<frame NAME="esquerda" src="coluna1.html" NORESIZE borderCOLOR="#3F85B8" target="main">
<frame NAME="direita" src="coluna2.html" NORESIZE borderCOLOR="#4086C6" target="direita">
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>

Notar que a referência "cols=" que aparece logo após o elemento "frameset" determina que o documento será dividido por colunas.

b. 3 linhas


Abaixo está o código fonte de um arquivo index.htm, que pode exemplificar o frameset do tipo 3 linhas. Ou seja, orientar que três arquivos ocupem 3 linhas de diferentes tamanhos (o superior é o maior e o central é o menor).

Supondo 3 arquivos denominados linha1.html, linha2.htm e linha3.html.

<html>
<head>
<title>xxxxxxxxxx</title>
</head>
<FRAMESET ROWS="40%,*,25%" FRAMEBORDER="1" FRAMESPACING="2">
<FRAME SRC="linha1.html" NAME="superior" NORESIZE SCROLLING="NO">
<FRAME SRC="linha2.html" NAME="central" MARGINWIDTH="2" MARGINHEIGHT="3" NORESIZE SCROLLING="YES">
<FRAME SRC="linha3.html" NAME="inferior" NORESIZE SCROLLING="NO">
</FRAMESET>
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>

Notar que a referência "rows=" que aparece logo após o elemento "frameset" determina que o documento será dividido por linhas.

Como está definido <FRAMESET ROWS="40%,*,25%" ... notar que

- o frame superior ocupará 40% da altura da janela do navegador e seu conteúdo será o arquivo linha1.html.
o frame central ocupará o restante do espaço, 100 - (40+25) = 35% e conterá o arquivo linha2.html.
- o frame inferior mostrará o arquivo linha3.html, ocupando 25% da altura da janela do navegador.

pois, <frameset rows="valor, valor, valor"> Notar que sempre há valores associados, que definem quanto da tela cada janela vai ocupar. Assim, para cada janela a ser criada há um tamanho associado. Estes valores devem vir separados por vírgulas.

c. 1 coluna e 2 linhas



Nesse caso, deve-se criar primeiro dois frames em coluna e compor a segunda coluna com dois frames em linha. Portanto, é necessário definir 2 áreas "frameset".
Supondo 3 arquivos denominados coluna1.html, linha1.html e linha2.html, sendo a 2a. coluna bem maior que a 1a.

<html>
<head>
<title>xxxxxxxxxx</title>
</head>
<FRAMESET COLS="30%, 70%">
<FRAME SRC="coluna1.html" NORESIZE SCROLLING="YES">
<frameset ROWS="20%, 80%">
<FRAME SRC="linha1.html" NORESIZE SCROLLING="NO">
<FRAME SRC="linha2.html" NORESIZE SCROLLING="NO">
</frameset>
<noframes>
<body>
</body>
</noframes>
</FRAMESET>
</html>

d. 1 linha e 2 colunas

Nesse caso, deve-se criar primeiro dois frames em linha e compor a segunda linha com dois frames em coluna. Portanto, é necessário definir 2 áreas "frameset".

<html>
<head>
<title>xxxxxxxxxx</title>
</head>
<FRAMESET ROWS="20%, 80%">
<FRAME SRC="linha1.html">
<frameset COLS="30%, 70%>
<FRAME SRC="coluna1.html">
<FRAME SRC="coluna2.html">
</frameset>
<noframes>
<body>
</body>
</noframes>
</FRAMESET>
</html>

Este "site", destinado prioritariamente aos alunos de Fátima Conti,
pretende auxiliar quem esteja começando a se interessar por internet,
segue as regras da FDL (Free Documentation Licence),
computadores e programas, estando em permanente construção.
Sugestões e comentários são bem vindos.
Se desejar colaborar, clique aqui.
Agradeço antecipadamente.

Deseja enviar essa página?


Se você usa um programa de correio eletrônico devidamente configurado e tem
um e-mail pop3, clique em "Enviar página" (abaixo) para abrir o programa.
Preencha o endereço do destinatário da mensagem.
E pode acrescentar o que quiser.
(Se não der certo, clique aqui para saber mais).

Enviar página

Se você usa webmail copie o endereço abaixo

http://www.cultura.ufpa.br/dicas/htm/htm-fra.htm


Acesse a página do seu provedor. Abra uma nova mensagem.
Cole o endereço no campo de texto.
Preencha o endereço do destinatário.
E também pode acrescentar o que quiser.

Última alteração: 26 mai 2008