Frames são quadros, que facilitam a navegação do visitante. São divisões físicas na página.
Quando você vê uma página que se vale do recurso de frames, na verdade está vendo duas ou mais páginas HTML, carregadas uma em cada quadro.
Um exemplo de frame, é esta página, você pode perceber que ela é composta por três frames, o do "menu" a esquerda, o do "título" acima e o do "corpo", no centro.
Quando você clica no menu ao lado, ele não muda, permanece fixo, só muda esta outra parte, que chamo de corpo, essa é uma das finalidades do frame. A página que cria esta organização na verdade tem só um comando, que é o que cria os frames.
Como isso é feito?
Substituímos <BODY> pelo tag <FRAMESET> e metade do caminho está feito.
Sintaxe:
Primeiramente devemos fazer um documento HTML para ele ser especificado pela sintaxe de frames, no caso chamado de Frame1.htm.
<HTML>
<HEAD>
<TITLE>
Frame 1
</TITLE>
</HEAD>
<BODY>
<FONT SIZE=+1><B>Frame n1</B></FONT>
</BODY>
Construa outro documento HTML e salve como Frame2.htm, para a construção do segundo frame.
Construa agora o documento que será a sua página principal, desta forma:
<HTML>
<HEAD>
<TITLE>MINHA HOME PAGE</TITLE>
</HEAD>
<FRAMESET ROWS="20%,80%">
<FRAME SRC="FRAME1.HTM">
<FRAME SRC="FRAME2.HTM">
</FRAMESET>
</HTML>
A primeira especificação é o FRAMESET, que é acompanhado pelas definições ROWS e COLS.
ROWS:
Especifica o número de frames e a altura de cada um.
Ex:
<FRAMESET ROWS="20%,80%">
<FRAME SRC="FRAME1.HTM">
<FRAME SRC="FRAME2.HTM">
</FRAMESET>
Neste exemplo acima, ele chama 2 frames, o 1º com 20% da tela e o 2º com 80% da tela (ambos em altura).
COLS:
Especifica o numero de frames e a largura de cada um.
Ex:
<FRAMESET COLS="20%,80%>
<FRAME SRC="FRAME1.HTM">
<FRAME SRC="FRAME2.HTM">
</FRAMESET>
Neste exemplo acima, ele chama 2 frames, o 1º com 20% da tela e o 2º com 80% da tela (ambos em largura).
Agora veremos um exemplo de página com ROWS e COLS.
Ex:
<FRAMESET COLS="20%,80%>
<FRAME SRC="FRAME1.HTM">
<FRAMESET ROWS="20%,*">
<FRAME SRC="FRAME2.HTM">
<FRAME SRC="FRAME3.HTM">
</FRAMESET>
</FRAMESET>
Neste exemplo acima, ele chama 3 frames, o 1º (Cols) com 20% da tela e o restante com 80%, o 2º (Rows) com 20% da tela e o 3º (Rows) com o que sobrar ("*").
As especificações de COLS e ROWS, podem ser em porcentagem (%), pixel ou o que sobrar, que é representado pelo sinal "*".
A segunda especificação é o FRAME, que é acompanhado pelas definições SRC, NAME, SCROLLING, NORESIZE, TARGET.
NAME:
Especifica o nome do documento de formato HTML chamado para o frame.
É extremamente necessário para o uso do TARGET, que será visto a seguir.
Ex:
<FRAMESET COLS="20%,30%,50%">
<FRAME SRC="FRAME1.HTM" NAME="Principal">
<FRAME SRC="FRAME2.HTM">
<FRAME SRC="FRAME3.HTM">
</FRAMESET>
SCROLLING:
Define se o Frame terá barra de rolagem, o default, ou seja, o padrão do navegador é Auto (automático).
Fornece as opções: Yes, No, Auto.
Yes - Exibe a barra de rolagem independente do tamanho do documento.
No - Não exibe a barra de rolagem, mesmo que o documento seja maior que o tamanho especificado.
Auto - Só exibe a barra de rolagem se o documento for maior que a área especificada.
Ex:
<FRAMESET COLS="20%,30%,50%">>
<FRAME SRC="FRAME1.HTM" SCROLLING="no">
<FRAME SRC="FRAME2.HTM" SCROLLING="yes">
<FRAME SRC="FRAME3.HTM" SCROLLING="auto">
</FRAMESET>
NORESIZE:
Impossibilita o usuário de mudar o tamanho da área especificada do Frame.
Por default o usuário pode mudar esta área.
Ex:
<FRAMESET COLS="20%,30%,50%">
<FRAME SRC="FRAME1.HTM" NORESIZE>
<FRAME SRC="FRAME2.HTM">
<FRAME SRC="FRAME3.HTM">
</FRAMESET>
TARGET:
Define qual a área (Frame) que aparecerá o documento especificado pelo link.
Mais útil na utilizaçãode Menus e índices. Necessita do NAME.
Ex:
<FRAMESET COLS="20%,30%,50%">
<FRAME SRC="FRAME1.HTM" NAME="Principal">
<FRAME SRC="FRAME2.HTM">
<FRAME SRC="FRAME3.HTM">
</FRAMESET>
O Link que será colocado no FRAME1:
<A HREF="http://www.algumacoisa.com" TARGET="Principal">Alguma Coisa</A>
Se você quiser criar um link que chama uma nova tela do browser basta colocar TARGET="um nome que não existe".
BORDER:
Define qual a borda que o frame terá e a cor da borda. Mais útil na utilizaçãode de backgrounds iguais.
Ex:
<FRAMESET COLS="20%,80%" FRAMEBORDER="NO" BORDER="0">
<FRAME SRC="FRAME1.HTM" FRAMEBORDER="NO" BORDER="0">
<FRAME SRC="FRAME2.HTM" BORDERCOLOR="#8080FF">
</FRAMESET>
Quando você vê uma página que se vale do recurso de frames, na verdade está vendo duas ou mais páginas HTML, carregadas uma em cada quadro.
Um exemplo de frame, é esta página, você pode perceber que ela é composta por três frames, o do "menu" a esquerda, o do "título" acima e o do "corpo", no centro.
Quando você clica no menu ao lado, ele não muda, permanece fixo, só muda esta outra parte, que chamo de corpo, essa é uma das finalidades do frame. A página que cria esta organização na verdade tem só um comando, que é o que cria os frames.
Como isso é feito?
Substituímos <BODY> pelo tag <FRAMESET> e metade do caminho está feito.
Sintaxe:
Primeiramente devemos fazer um documento HTML para ele ser especificado pela sintaxe de frames, no caso chamado de Frame1.htm.
Construa agora o documento que será a sua página principal, desta forma:
<HTML>
<HEAD>
<TITLE>MINHA HOME PAGE</TITLE>
</HEAD>
<FRAMESET ROWS="20%,80%">
<FRAME SRC="FRAME1.HTM">
<FRAME SRC="FRAME2.HTM">
</FRAMESET>
</HTML>
A primeira especificação é o FRAMESET, que é acompanhado pelas definições ROWS e COLS.
ROWS:
Especifica o número de frames e a altura de cada um.
Ex:
<FRAMESET ROWS="20%,80%"><FRAME SRC="FRAME1.HTM">
<FRAME SRC="FRAME2.HTM">
</FRAMESET>
Neste exemplo acima, ele chama 2 frames, o 1º com 20% da tela e o 2º com 80% da tela (ambos em altura).
COLS:
Especifica o numero de frames e a largura de cada um.
Ex:
<FRAMESET COLS="20%,80%><FRAME SRC="FRAME1.HTM">
<FRAME SRC="FRAME2.HTM">
</FRAMESET>
Neste exemplo acima, ele chama 2 frames, o 1º com 20% da tela e o 2º com 80% da tela (ambos em largura).
Agora veremos um exemplo de página com ROWS e COLS.
Ex:
<FRAMESET COLS="20%,80%><FRAME SRC="FRAME1.HTM">
<FRAMESET ROWS="20%,*">
<FRAME SRC="FRAME2.HTM">
<FRAME SRC="FRAME3.HTM">
</FRAMESET>
</FRAMESET>
Neste exemplo acima, ele chama 3 frames, o 1º (Cols) com 20% da tela e o restante com 80%, o 2º (Rows) com 20% da tela e o 3º (Rows) com o que sobrar ("*").
As especificações de COLS e ROWS, podem ser em porcentagem (%), pixel ou o que sobrar, que é representado pelo sinal "*".
A segunda especificação é o FRAME, que é acompanhado pelas definições SRC, NAME, SCROLLING, NORESIZE, TARGET.
NAME:
Especifica o nome do documento de formato HTML chamado para o frame.
É extremamente necessário para o uso do TARGET, que será visto a seguir.
Ex:
<FRAMESET COLS="20%,30%,50%">
<FRAME SRC="FRAME1.HTM" NAME="Principal">
<FRAME SRC="FRAME2.HTM">
<FRAME SRC="FRAME3.HTM">
</FRAMESET>
SCROLLING:
Define se o Frame terá barra de rolagem, o default, ou seja, o padrão do navegador é Auto (automático).
Fornece as opções: Yes, No, Auto.
Yes - Exibe a barra de rolagem independente do tamanho do documento.
No - Não exibe a barra de rolagem, mesmo que o documento seja maior que o tamanho especificado.
Auto - Só exibe a barra de rolagem se o documento for maior que a área especificada.
Ex:
<FRAMESET COLS="20%,30%,50%">>
<FRAME SRC="FRAME1.HTM" SCROLLING="no">
<FRAME SRC="FRAME2.HTM" SCROLLING="yes">
<FRAME SRC="FRAME3.HTM" SCROLLING="auto">
</FRAMESET>
NORESIZE:
Impossibilita o usuário de mudar o tamanho da área especificada do Frame.
Por default o usuário pode mudar esta área.
Ex:
<FRAMESET COLS="20%,30%,50%">
<FRAME SRC="FRAME1.HTM" NORESIZE>
<FRAME SRC="FRAME2.HTM">
<FRAME SRC="FRAME3.HTM">
</FRAMESET>
TARGET:
Define qual a área (Frame) que aparecerá o documento especificado pelo link.
Mais útil na utilizaçãode Menus e índices. Necessita do NAME.
Ex:
<FRAMESET COLS="20%,30%,50%">
<FRAME SRC="FRAME1.HTM" NAME="Principal">
<FRAME SRC="FRAME2.HTM">
<FRAME SRC="FRAME3.HTM">
</FRAMESET>
O Link que será colocado no FRAME1:
<A HREF="http://www.algumacoisa.com" TARGET="Principal">Alguma Coisa</A>
Se você quiser criar um link que chama uma nova tela do browser basta colocar TARGET="um nome que não existe".
BORDER:
Define qual a borda que o frame terá e a cor da borda. Mais útil na utilizaçãode de backgrounds iguais.
Ex:
<FRAMESET COLS="20%,80%" FRAMEBORDER="NO" BORDER="0">
<FRAME SRC="FRAME1.HTM" FRAMEBORDER="NO" BORDER="0">
<FRAME SRC="FRAME2.HTM" BORDERCOLOR="#8080FF">
</FRAMESET>
