pcdicasHTML

Frames

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

É importante notar 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%, *"). 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 esse bem maior que o primeiro.

Supondo 2 arquivos denominados coluna1.html, coluna2.html.

<html>
<head>
<title>Muitas Dicas </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>Muitas Dicas </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>Muitas Dicas </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>Muitas Dicas </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>

Exercícios

8. Criar páginas em A. Em cada uma deve existir texto e pelo menos uma figura, além do fundo.

8.1. com dois frames verticais, de mesmo tamanho. Salvar em A:\htm8-1.html.

8.2. com  três frames verticais, de tamanho diferente. Salvar em A:\htm8-2.html.

8.3. com dois frames horizontais, de mesmo tamanho. Salvar em A:\htm8-3.html.

8.4. com três frames horizontais, de tamanho diferente. Salvar em A:\htm8-4.html.

8.5. com três frames, sendo só 1 coluna, com os tamanhos que desejar. Salvar em A:\htm8-5.html.

8.6. com  três frames, sendo só 1 linha, com os tamanhos que desejar. Salvar em A:\htm8-6.html.



Este "site", destinado prioritariamente aos alunos de Fátima Conti,
disponível sob FDL (Free Documentation Licence),
pretende auxiliar quem esteja começando a se interessar por internet,
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

Última alteração: 5 fev 2006