Curso de html para Cegos

Curso de html para Cegos.

Aula 9 - Frames.

-= Curso HTML - Frames. =-
Marco Antonio de Queiroz.

Frames é um procedimento da linguagem HTML para dividir a tela em diferentes zonas, ou janelas, que podem atuar independentemente umas das outras. São páginas distintas, pois podem ter suas próprias barras de rolagem. Uma de suas características mais importantes é que, se teclando sobre um link situado em um frame, podemos carregar em outro frame uma determinada página. Isto se utiliza frequentemente para ter um frame estreito na parte lateral (ou superior) com um índice com diferentes links, que, ao clicarmos, carregam as distintas páginas dos links do frame-índice no frame conjutgado. Desta forma, facilitamos a navegação entre as páginas.

Para compreender os distintos conceitos vamos criar uma página com frames. O da esquerda vai servir de índice do que vamos ver a direita, e veremos inicialmente uma página de apresentação que será o default enquanto nenhum link do índice for acionado. Poderemos aceitar também aqui uma página pessoal criada nas aulas anteriores, quando teclamos sobre o frame da esquerda.

Documento de definição dos frames.

A primeira coisa que temos que fazer é criar uma página HTML em que definiremos quantas zonas existirão, que distribuição e tamanho, e qual vai ser o conteúdo de cada uma delas. No nosso exemplo, a página vai ter dois frames distribuídos em colunas e com respeito ao tamanho, queremos que o primeiro (esquerda) ocupe 20% e o outro os 80% restantes. Com relação ao conteúdo, o frame da esquerda vai conter a página HTML que vai servir de índice do que veremos no outro (vamos chamá-lo de indice.htm), e o da direita outro documento HTM que vai servir de página de apresentação (apresent.htm). O código HTML seria o seguinte:

<HTML>
<HEAD>
<TITLE> Minha página com frames </TITLE>
</HEAD>

Observe o seguinte:

* É uma página parecida com as que conhecemos até agora. A diferença está em que em vez de utilizar a etiqueta BODY, que serve normalmente para delimitar o que se vai ver na tela, se faz uso da etiqueta FRAMESET (defineção de frames).

* Neste caso, com a etiqueta <FRAMESET COLS="20%, 80%> se definiu que haverá dois frames em colunas (horizontal). Se quisermos linhas (vertical), colocamos ROWS. Também se define o espaço que será ocupado por cada coluna ou fileira. São definidos por percentual da tela que cada frame vai ocupar, porém poderíamos colocar um número absoluto, que representaria a quantidade de pixels.

* Já foi definido o número de frames, sua distribuição e seu tamanho, por isso só faltaria definir o conteúdo de cada frame. O código foi o seguinte:

Com isto definimos que o conteúdo do primeiro frame (esquerda) será o indice.htm e o seguinte (direita) será o apresent.htm.

* Observe que a etiqueta do segundo frame tem incluído o atributo NAME="principal", porém não tem no primeiro. O motivo é que só necessitamos dar nome ao segundo frame, pois, como veremos adiante, no documento do primeiro frame vai ter uns links que vão ser dirigidos para lá. Neste caso só temos dois frames, porém poderia haver mais, e é necessário distinguirmos uns dos outros. O primeiro não necessita de nome, pois não vai receber links do segundo frame, já que estará sempre presente à esquerda de todos os links carregados à direita.

Este documento vamos chamar de miframes.htm, porém não vamos guardá-lo, pois falta acrescentar algo que veremos mais adiante.

Páginas HTML de cada Frame.

Necessitamos agora confeccionar a página HTML de cada frame. Página do frame da esquerda: Vai ter um fundo cinza, e vai conter os links dirigidos para o frame da direita. Além disso, podemos colocar qualquer coisa em um frame, vamos incluir esta imagem animada de e-mail, a email.gif:

<HTML>
<HEAD>
<TITLE>Índice.</TITLE>
</HEAD>

<BODY BGCOLOR="#c0c0c0" text="#000088" link="#000066">
<A HREF="apresent.htm" TARGET="principal"> Apresentação</A>
<A HREF="aula1.htm" TARGET="principal">Aula 01.</A>
<A HREF="aula3.htm" TARGET="principal">Aula 03.</A>
<A HREF="aula4.htm" TARGET="principal">Aula 04.</A>
<A HREF="aula7.htm" TARGET="principal">Aula 07.</A>
<A HREF="mailto:[email protected]" TARGET="principal">
<IMG SRC="email.gif" alt="Entre em Contato." border ="0"></a>

</BODY>
</HTML>

Dentro das etiquetas dos links podemos observar algo novo, o atributo TARGET, para que o link ao ser acionado, não carregue no próprio frame e sim em outro, precisamente com o de nome no documento de definição dos frames (principal).

No nosso caso, demos o nome de "principal" ao frame da direita onde serão carregados os documentos HTML (apresent.htm). Guardamos este documento com o nome de indice.htm.

Página do Frame da Direita:

Terá as cores do indice e vai conter somente um texto. posteriormente vamos acrescentar mais coisas.

<HTML>
<HEAD>
<TITLE> Apresentação das páginas.</TITLE>
</HEAD>

<BODY BGCOLOR="#c0c0c0" text="#000088" link="#000066">
<CENTER> Esta é a versão com FRAMES da minha página.
 Aqui serão colocados os links que você clicar. no índice à sua esquerda. 
</CENTER>
</BODY>
</HTML>

Guardamos este documento com o nome de apresent.htm.

Alternativa para Navegadores que Não Suportam Frames.

Como visto anteriormente, já temos as três peças que necessitamos:
* documento de definição dos frames (miframes.htm).
* documento do conteúdo do primeiro frame (indice.htm).
* documento do conteúdo do segundo frame (apresent.htm).
Na teoria não necessitamos de mais nada. Só tem um detalhe: o que ocorreria com os navegadores que não suportam frames ? Ao desconhecer as etiquetas FRAMESET e FRAME do documento de definição, não podem executá-lo nem carregar a página. Para estes casos está prevista as etquetas <NOFRAME> e </NOFRAMES>. Coloca-se na continuação das distintas etiquetas <FRAME>, ficando a estrutura da seguinte maneira:

<NOFRAMES>
<BODY>
[Aqui vai o que queremos que vejam os usuários com navegadores que não suportam frames]
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

Observe que dentro da etiqueta <NOFRAMES> temos as etiquetas <BODY> e </BODY>, porém é somente para esta página de advertência.

No nosso exemplo, vamos colocar uma mensagem advertindo esta circunstância, e dirigindo o usuário, com um link normal, para a página indice2.htm. Esta deve ser uma réplica da indice.htm, porém sem as etiquetas frameset e com as etiquetas body, além da deleção dos atributos target.

(Poderíamos não colocar nada de frames e colocar aqui o código da página de apresentação, porém acrescentando-se um link para indice2.htm, para que se possa acessá-la).

<NOFRAMES>
<BODY>
Você está utilizando um navegador que não suporta frames.

<A HREF="indice2.htm"> Minha página </A>

</BODY>
</NOFRAMES>

Ao incluirmos esse pedaço dentro do documento de definição dos frames, que vimos anteriormente, fica desta maneira:

<HTML>
<HEAD>
<TITLE> Minha página com frames </TITLE>
</HEAD>

<NOFRAMES>
<BODY>
 Você está utilizando um navegador que não suporta frames.
 <A HREF="apresent.htm"> Minha página </A>

</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

Agora podemos guardar este documento com o nome de aula9.htm.

Atributos da Etiqueta FRAMESET.

A etiqueta FRAMESET, como vimos no nosso exemplo, é a que define a distribuição, o número e o tamanho dos frames. Tem dois atributos: COLS (colunas) e ROWS (fileiras):

* Define a distribuição dos frames em colunas ou fileiras, usamos um ou outro atributo.
* Define o número de frames que o documento vai ter:

<FRAMESET COLS="xx, yy"> (dois frames em colunas, o xx e o yy).
<FRAMESET ROWS="xx, yy, zz"> (três frames em colunas, o xx, yy e zz).

* Define o tamanho dos frames, segundo o valor que dermos a xx, yy, zz ... Este valor podemos expressar em:
1. um percentual da largura da tela (para as colunas) ou da altura da tela (para as fileiras). Por exemplo:
<FRAMESET COLS="20%, 80%"> ( a coluna da esquerda ocupará 20% da largura da tela e a da direita os 80% restantes).
<FRAMESET ROWS="10%, 70%, 20%"> ( a fileira de cima ocupará 10% da altura da tela, a do meio 70% e a inferior os 20% restantes).
*. um número absoluto que representa o número de pixels que ocupará cada frame (largura ou altura). Por exemplo:
<FRAMESET COLS="40, 600"> ( a coluna da esquerda terá 40 pixels de largura e a da direita 600). Porém é perigoso utilizar só valores absolutos, pois o tamanho da tela varia de um usuário para outro. Se for utilizar valor absoltuto para um frame, é bom mesclar com o valor relativo, como o que veremos adiante, para que se ajuste à tela do usuário. um valor relativo que se consegue colocando (*), em vez de número. Ele é interpretado como esse frame deve ter o espaço restante. Por exemplo:
<FRAMESET ROWS="100, *, 100"> ( três fileiras, as fileiras superior e inferior ocuparão 100 pixels cada e a do meio o restante do espaço).
Se existir um número antes do asterisco, esse frame obtém essa quantidade a mais de espaço relativo. Assim "2*, *" daria dois terços para o primeiro frame e um terço para o outro.

Frames sem Bordas.

Se desejarmos que não haja borda de separação entre os frames, devemos incluir o atributo FRAMEBORDER=0 dentro da etiqueta FRAMESET. Nem todos os navegadores implementam este atributo. Para que desapareçam também os vãos de separação entre os frames temos que acrescentar outros dois atributos (o primeiro para o Internet Explorer e o segundo para o Netscape): FRAMESPACING=0 e BORDER=0. A etiqueta completa seria:

Atributos da Etiqueta FRAME:

Esta etiqueta define as características de um frame concreto, no conjunto dos frames, como era o caso com a etiqueta <FRAMESET>. Podemos ter os seguintes atributos dentro da etiqueta <FRAME>:

* SRC="direção". Esta direção pode ser para um documento HTML ou URL. Com este atributo indicamos o que se carregará inicialmente dentro do frame. Se não colocarmos este atributo o frame aparecerá vazio, porém terá as dimensões definidas.
* NAME="nome do frame". Este atributo usamos para definir um nome para um frame.
* MARGINWIDTH="número". Utilizado para definir a largura das margens dentro de um frame. O número que colocarmos representa os pixels das margens. Este atributo é opcional.
* MARGINHEIGHT="número". Igual ao anterior, porém refere-se às margens em altura.
* SCROLLING="yes|no|auto|". Este atributo é utilizado para dizer se o frame terá ou não uma barra de rolagem. Se escolhermos "yes" terá sempre uma barra de rolagem. Se "não", não terá nunca e se "auto", o navegador decide se terá ou não. Este atributo é opcional. Por default, o valor é "auto".
* NORESIZE. A este atributo não se determina nenhum valor como os demais. É um indicador para que o frame não possa ser redimensionado pelo usuário. É um atributo opcional. Por default, todos os frames são redimensionáveis.
* FRAMEBORDER="no". Este atributo elimina a borda de um frame, porém se quisermos eliminarmos completamente, também temos que colocá-lo com o frame vizinho. Se quisermos eliminar as bordas de todos os frames, devemos colocar este atributo na etiqueta <FRAMESET>, como visto anteriormente.

O Atributo TARGET.

No nosso exemplo vimos que, como queríamos, os links surtem efeito em outro frame, não nele mesmo, pois foi colocado o atributo TARGET="principal", sendo "principal" o nome do segundo frame, no documento de definição dos frames. Estes nomes podem ser qualquer um, desde que o primeiro caracter seja alfanumerico (letra ou número).

Porém, existem nomes reservados (que não podem ser usados para denominar um frame), pois fazem este atributo efetuar funções especiais. Estas palavras reservadas, para que surtam efeito, devem ser escritas em minúsculas:

TARGET="_blank". Para abrir uma nova copia do navegador e o link ativo se carrega nela.
TARGET="_self". Faz o link se carregar dentro do próprio frame.
TARGET="_top". Faz com que o link se carregue por toda a tela, ignorando todos os frames. É particularmente útil, quando o link se refere a outro site da Web, que poderá conter, também, frames e a tela ficaria desorganizada.

Abaixo essa aula em formato txt:

Aula 9 - Frames em txt.