HTML vol.07 Frame
()
Frames
Os frames são divisões da tela do browser em diversas telas (ou “quadros”). Com isso, torna-se possível apresentar mais de uma página por vez: por exemplo, um índice principal em uma parte pequena 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, pois nem sempre a navegação é fácil, além de problemas para a impressão e a marcação dos documentos interiores aos frames nos bookmarks. A alternativa natural para os frames são as tabelas.
Uma página com frames tem um texto fonte semelhante a:
<HTML>
<HEAD><TITLE>Assunto X</TITLE></HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="indice1.html">
<FRAME SRC="apresenta.html" NAME="principal">
<NOFRAME>
<BODY>
<H2>Bem-vindo à página do assunto X!</h2>
<P>
Blá blá blá blá blá
blá blá blá blá blá
</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 com 20% do tamanho da tela, e a segunda coluna 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, no código acima vemos que a página indice1.html será mostrada na primeira coluna (que ocupará 20% da tela), e a página apresenta.html será mostrada na segunda (ocupando 80% da tela).
[Veja o exemplo]
A formatação de frames inclui também uma parte NOFRAME, que é mostrada normalmente pelos browsers que não suportam sua apresentação.
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>Assunto X</TITLE></HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="indice1.html">
<FRAME SRC="apresenta.html" NAME=principal>
<NOFRAME>
<BODY>
<H2>Bem-vindo à página do assunto X!</h2>
<P>
Blá blá blá blá blá
blá blá blá blá blá
</BODY>
</NOFRAME>
</FRAMESET>
</HTML>
Veja no código fonte acima que o frame associado a apresenta.html tem um atributo NAME. Nomear um frame permite que direcionemos o frame em que será apresentado o documento de destino de 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>.Isto indica que se está definindo (pelo atributo target) o frame em que a página de destino do link (apresenta2.html) será mostrada. Se você não entendeu como funciona esse mecanismo de direcionamento, veja o exemplo e teste todos os links para verificar o que foi dito neste item, pois a descrição desse mecanismo pode ficar muito confusa!! %-/ Composição com FramesComo já foi possível observar, a formatação FRAMESET tem atributos que definem a divisão do espaço da janela do browser em colunas ou linhas. Podemos utilizar uma combinação de "framesets" para criar diversos modos de apresentação do conteúdo de um site. Antes de ver algumas composições, lembre-se de que os pontos-chave para o mecanismo dos frames são estes, mostrados no item anterior:a nomeação dos frames e a declaração dos targets dos links, que definem o frame no qual as páginas de destino serão mostradas. Embora quase todos os editores WYSIWYG de HTML dêem suporte à criação de frames, é necessário que o autor se preocupe com os detalhes de nomeação de frames e direcionamento de links.Como montar dois frames em coluna:<FRAMESET COLS="x, y"> <FRAME SRC="col1.html"> <FRAME SRC="col2.html"> </FRAMESET> Dois frames em linha:<FRAMESET ROWS="x, y"> <FRAME SRC="lin1.html"> <FRAME SRC="lin2.html"> </FRAMESET> Para montar esta estrutura abaixo, deve-se criar primeiro dois frames em coluna e compor a segunda coluna com dois frames em linha:<FRAMESET COLS="x, y"> <FRAME SRC="col1.html"> <FRAMESET ROWS="x, y"> <FRAME SRC="lin1.html"> <FRAME SRC="lin2.html"> </FRAMESET> </FRAMESET> Para montar esta estrutura abaixo, deve-se criar primeiro dois frames em linha e compor a segunda linha com dois frames em coluna:<FRAMESET ROWS="x, y"> <FRAME SRC="lin1.html"> <FRAMESET COLS="x, y"> <FRAME SRC="col1.html"> <FRAME SRC="col2.html"> </FRAMESET> </FRAMESET> 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 de maneira adequada. Atributos de FramesAté 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 COLS="20%, 80%" FRAMEBORDER="no"> <FRAME SRC="indice4.html"> <FRAME SRC="apresenta4.html" NAME="principal"> </FRAMESET> Frame sem barra de rolagem:<FRAMESET COLS="20%, 80%"> <FRAME SRC="indice4.html" SCROLLING="no"> <FRAME SRC="apresenta4.html" NAME="principal"> </FRAMESET> [Veja o exemplo] É 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 CuidadosFrames 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). [Exemplo de confusão com frames] Limpando a telaHá basicamente dois efeitos possíveis para limpar a apresentação de frames, e isso é feito com "targets" especiais (o atributo TARGET foi apresentado no item Links com frames): TARGET="_top" limpa os frames que estiverem ativos, apresentando a página de destino na tela inteiraTARGET="_blank" abre uma nova janela do browser para apresentar a página de destino
Resumos Relacionados
- Conceito Básico Html
- Html Básico Fundamentos
- Funções Gotoandplay() E Setlabel() (swishscript)
- Javascript: Iniciando.
- Html Básico - Tabelas
|
|