Frames
Índice da página:
O "Frame Document" é um arquivo onde se define a estrutura das janelas
para seu hiperdocumento em HTML. Quantas serão e qual sua distribuição em tela. Neste documento as marcações
<body></body> são substituídas por <frameset></frameset>.
Tal arquivo pode ser, por exemplo, o arquivo index.html de qualquer nível na estrutura do seu serviço de informações
baseado em WWW.
Pronto, agora é preciso definir cada frame/janela internamente à(s) área(s) de frameset. Ou seja, as características de cada janela e seus "conteúdos" - URL incial. Cada janela/frame é antecedido da marcação <frame>, como numa lista cada item é antecedido por <li>. Usualmente, uma URL virá associada a cada frame.
Os Atributos mais comuns são:
Pronto, agora é preciso definir cada frame/janela internamente à(s) área(s) de frameset. Ou seja, as características de cada janela e seus "conteúdos" - URL incial. Cada janela/frame é antecedido da marcação <frame>, como numa lista cada item é antecedido por <li>. Usualmente, uma URL virá associada a cada frame.
Os Atributos mais comuns são:
• frame
A marcação frame define cada janela contida em uma área "frameset". Esta marcação não necessita de uma tag de finalização (</frame>) e aceita 6 atributos possíveis:
1- src="url"
O atributo src define a URL que será exibida em cada frame.
2- name="nome_da_janela"
Este atributo é utilizado para associar um nome a uma janela. Deve ser usado quando uma janela frame fôr o destino de um link em outro documento (normalmente é no mesmo documento. Um frame apontando para outro. Tipo um índice abrindo várias urls em outras janelas).
3- marginwidth="valor"
Este atributo controla as margens esquerda e direita de cada frame, ou seja, a distância entre o conteúdo da página e as margens da janela. O valor associado será um valor absoluto em pixels. O menor valor aceite será 1.
Este atributo é opcional, caso não venha definido, o browser usará o seu padrão para definir as margens no frame/janela.
4- marginheight="valor"
Também é um atributo opcional. Funciona exatamente como o anterior, só que determina as margens superior/inferior em cada frame.
5- scrolling="yes/no/auto"
Novamente, é um atributo opcional, que define se uma janela deve possuir barra de rolagem ou não. Caso seja definido como yes, a janela sempre possuirá uma barra de rolagem visível. Caso seja definido como no, nunca haverá barra de rolagem. E, finalmente, se vier como auto, o browser aplicará a barra quando necessário.
6- noresize
Este atributo não possui valor associado. Quando ele não aparece, o usuário poderá alterar o tamanho da janela, "arrastando" com o cursor a borda da mesma. O padrão é que todas as janelas possam ter seu tamanho alterado. noresize é opcional.
• noframes
Esta marcação possibilita que se crie uma opção de navegação na página para quem não possui um browser que entenda frames. Esta marcação aparece no documento de estrutura "Frame document", e sempre é usada em pares (<noframes></noframes>).
Quando o acesso for feito através de um browser que entenda frames, o que estiver entre as marcações "noframes" será simplesmente ignorado.
Internamente a uma área "noframes" deverá ser usada a estrutura padrão de documentos html.
• target
Permite que se controle em qual janela um link específico será exibido quando o usuário clicar sobre ele. Por exemplo, pode-se ter uma janela lateral com uma espécie de indíce do serviço de informação e outra janela em que a navegação própriamente dita vai ocorrer. Desta forma, o índice está permanentemente disponível durante toda a consulta.
Para utilizar este recurso você deverá:
1. Atribuir um "name" a cada frame em seu "frame document" (name="valor").
2. No documento onde será criado um link, que vai aparecer em outra janela, ao criar o link, acrescentar a marcação target="valor" à âncora, da seguinte forma:
<a href="URL" target="valor">. Onde este valor é idêntico áquele associado à marcação name no frame document.
A marcação frame define cada janela contida em uma área "frameset". Esta marcação não necessita de uma tag de finalização (</frame>) e aceita 6 atributos possíveis:
1- src="url"
O atributo src define a URL que será exibida em cada frame.
2- name="nome_da_janela"
Este atributo é utilizado para associar um nome a uma janela. Deve ser usado quando uma janela frame fôr o destino de um link em outro documento (normalmente é no mesmo documento. Um frame apontando para outro. Tipo um índice abrindo várias urls em outras janelas).
3- marginwidth="valor"
Este atributo controla as margens esquerda e direita de cada frame, ou seja, a distância entre o conteúdo da página e as margens da janela. O valor associado será um valor absoluto em pixels. O menor valor aceite será 1.
Este atributo é opcional, caso não venha definido, o browser usará o seu padrão para definir as margens no frame/janela.
4- marginheight="valor"
Também é um atributo opcional. Funciona exatamente como o anterior, só que determina as margens superior/inferior em cada frame.
5- scrolling="yes/no/auto"
Novamente, é um atributo opcional, que define se uma janela deve possuir barra de rolagem ou não. Caso seja definido como yes, a janela sempre possuirá uma barra de rolagem visível. Caso seja definido como no, nunca haverá barra de rolagem. E, finalmente, se vier como auto, o browser aplicará a barra quando necessário.
6- noresize
Este atributo não possui valor associado. Quando ele não aparece, o usuário poderá alterar o tamanho da janela, "arrastando" com o cursor a borda da mesma. O padrão é que todas as janelas possam ter seu tamanho alterado. noresize é opcional.
• noframes
Esta marcação possibilita que se crie uma opção de navegação na página para quem não possui um browser que entenda frames. Esta marcação aparece no documento de estrutura "Frame document", e sempre é usada em pares (<noframes></noframes>).
Quando o acesso for feito através de um browser que entenda frames, o que estiver entre as marcações "noframes" será simplesmente ignorado.
Internamente a uma área "noframes" deverá ser usada a estrutura padrão de documentos html.
• target
Permite que se controle em qual janela um link específico será exibido quando o usuário clicar sobre ele. Por exemplo, pode-se ter uma janela lateral com uma espécie de indíce do serviço de informação e outra janela em que a navegação própriamente dita vai ocorrer. Desta forma, o índice está permanentemente disponível durante toda a consulta.
Para utilizar este recurso você deverá:
1. Atribuir um "name" a cada frame em seu "frame document" (name="valor").
2. No documento onde será criado um link, que vai aparecer em outra janela, ao criar o link, acrescentar a marcação target="valor" à âncora, da seguinte forma:
<a href="URL" target="valor">. Onde este valor é idêntico áquele associado à marcação name no frame document.
Define divisões horizontais entre janelas. Vem sempre acompanhado de valores associado, que definem
quanto da tela cada janela vai ocupar. Dessa forma, para cada janela a ser criada deverá haver um valor associado.
Estes valores devem vir separados por vírgulas. (<frameset rows="valor, valor, valor...">).
Este valor poderá ser:
Este valor poderá ser:
• Numérico: pixels = (rows="30, 50"),
Refere-se a quantos pixels cada frame (ou janela) deve ocupar. A desvantagem desta notação é que não é possível ter
controlo do valor total de pixels que o cliente do usuário compreende.
• Percentual: percentagem = ( rows="25%, 25%, 50%"), sempre somando um valor de 100%. É o método mais simples.
• Relativo: relativo = ( rows="2*,*"). Desta forma, define-se um valor relativo. No exemplo, o primeiro frame vai ocupar dois terços da tela, e o segundo um terço.
• Percentual: percentagem = ( rows="25%, 25%, 50%"), sempre somando um valor de 100%. É o método mais simples.
• Relativo: relativo = ( rows="2*,*"). Desta forma, define-se um valor relativo. No exemplo, o primeiro frame vai ocupar dois terços da tela, e o segundo um terço.
Nota: Pode fazer a permuta dos três modos em conjunto:
<frameset rows="100,75%,*">.
Exemplo:
Exemplo:
<html> <head> <title>Linhas</title> </head> <frameset rows="20%, 60%, 20%"> <frame name="top" src="exe001.htm" noresize> <frame name="center" src="exe002.htm" noresize > <frame name="bottom" src="exe003.htm" noresize> <noframes> <body> <p>Esta página usa frames, mas o seu browser não pode lê-las.</p> </body> </noframes> </frameset> </html>
 Ver |
 Índice |
Funciona exatamente como a marcação anterior, no entanto, divide a tela em frames ou janelas verticais.
Aplicação de Construção de Frames em Colunas.
Exemplo:
Aplicação de Construção de Frames em Colunas.
Exemplo:
<html> <head> <title>Colunas</title> </head> <frameset cols="20%, 60%, 20%"> <frame name="top" src="exe001.htm" noresize> <frame name="center" src="exe002.htm" noresize > <frame name="bottom" src="exe003.htm" noresize> <noframes> <body> <p>Esta página usa frames, mas o seu browser não pode lê-las.</p> </body> </noframes> </frameset> </html>
| Ver |
Índice |
Aplicação de Construção de Frames com Linhas e Colunas
Exemplo:
Exemplo:
<html>
<head>
<title>Linhas e Colunas</title>
</head>
<frameset rows="25%,*">
<frame name="top" src="exe002.htm" noresize>
<frameset cols="20%,*">
<frame name="bottomleft" src="exe005.htm" noresize>
<frame name="bottomright" src="exe003.htm" noresize>
</frameset>
<noframes>
<body>
<p>Esta página usa frames, mas o seu browser não pode lê-las.</p>
</body>
</noframes>
</frameset>
</html>
| Ver |
Índice |
iframe são frames que se podem inserir em qualquer altura
e local no seu documento. São muito práticas para apontar documentos ou páginas para esse local. Basta
dar um nome a essa frame e apontar o target do URL para esse nome.
Exemplo:
Exemplo:
<html>
<head>
<title>I Frames</title>
<style type="text/css">
.bot{font-family:Verdana,Arial; color:#ffff99; font-size:11px;
background:#184A4A; border:thin solid #875535; cursor:hand; text-decoration:none}
a:hover{font-family:Verdana,Arial; color:#FF9900; font-size:11px;text-decoration:none}
.1 {font-family:Verdana,Arial; color:#FFFF99; font-size:11px; text-decoration:none}
</style>
</head>
<body leftmargin="0" topmargin="0" bgcolor="#333333" text="#FFFF99">
<br>
<a href="exe101.htm" target="teste" class="bot">Inserir Teste</a><br><br>
<iframe name="teste" height="120" noresize width="240"></iframe>
<div align="center"><br>
<input type="button" value="Fechar Janela" class="bot" onclick="window.close()">
</div>
</body>
</html>
| Ver |
Índice |
