Sie sind auf Seite 1von 13

RNP

REDE NACIONAL DE PESQUISA Centro Regional de Braslia CR/DF


janeiro 1996

___________________________________________________________________________________________________________________________________________________________________________________________________________________________________

ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia5.zip

Tutorial - Autoria em World Wide Web

Parte IV - Hypertext Markup Language (HTML) -

FRAMES (HTML 2.0 e algumas extenses do Netscape)

Copyright 1995 Rede Nacional de Pesquisa - RNP PERMITIDA A REPRODUO DO PRESENTE MATERIAL, DESDE QUE TENHA FINS EDUCACIONAIS OU DE PESQUISA, DEVENDO, NO ENTANTO, SER MENCIONADOS EXPRESSAMENTE OS DIREITOS AUTORAIS RESERVADOS RNP. VEDADA A REPRODUO PARA QUAISQUER OUTROS FINS, A MENOS QUE CONCEDIDA EXPRESSA AUTORIZAO PELA RNP.
___________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Centro Regional RNP - Braslia - CR/DF SAS Quadra 5 Lote 6 Bloco H sala 700 70070-914 - Braslia - DF Telefone: (061)226.4699 Fax: (061) 226.9328 Email: apoio@cr-df.rnp.br URL: http://www.cr-df.rnp.br/

Documentos com mltiplas Janelas - Frames Este tutorial uma traduo e adaptao do documento Frames Syntax: http://home.mcom.com/assist/net_sites/frame_syntax.html

NDICE
I. Sobre este Tutorial II . Estrutura Bsica - Frame document III. Sintaxe a. frameset b. frame c. noframes
IV. Intercalando Frameset - exemplos V. Links entre frames VI. Cartela de Comandos

3 4 5 5 8 9 11 12 13

I. Sobre este Tutorial


Neste tutorial, vamos ver uma facilidade ainda no "sacramentada" para os HTMLeiros , mas que promete vir por a. a possibilidade de se dividir um hipertexto em mltiplas janelas (frames). Agora, ateno por que at esse exato momento, janeiro 1996 s conheo um browser que l essa facilidade. o Netscape, a partir da versao 2.0. Ento, muito cuidado, recomendvel que voc crie sempre uma opo de navegao para quem estiver usando um browser que no enxerga frames. Vamos ver como faz-lo. Uma ltima observao antes de partirmos para a festa. Aqui importante que voc j conhea HTML Hypertext Markup Language. Se no conhece, sem problema tambm, d uma lida cuidadosa nos nossos outros tutoriais sobre HTML, disponveis em http://www.cr-df.rnp.br/hipertextos/cr-df/cursos/ . Este tutorial faz parte de um conjunto de mdulos destinados a quem deseja publicar/prover informao na Internet, atravs de servio do tipo WWW (World Wide Web). Atualmente - janeiro de 1996 - este conjunto compreende 7 mdulos: 1. 2. 3. 4. 5. 6. 7. Introduo Geral a Internet HTML Bsico Tabelas em HTML Formulrios em HTML Mltiplas Janelas - Frames Manipulao de Imagens Guia de Estilo

Informaes adicionais podem ser solicitadas a webmaster@cr-df.rnp.br

II. Estrutura Bsica - Frame Document


O "Frame Document" um arquivo onde se define a estrutura das janelas para seu hiperdocumento em HTML. Quantas sero e qual sua distribuio em tela. Neste documento as marcaes <body> e seu par </body> so substitudas por <frameset> e </frameset>. Tal arquivo pode ser, por exemplo, o arquivo index.html de qualquer nvel na estrutura do seu servio de informaes baseado em WWW. Pronto, agora preciso definir cada frame/janela internamente (s) rea(s) de frameset. Ou seja, as caractersticas de cada janela e seus "contedos" - URL incial. Cada janela/frame antecedido da marcao <frame>, como numa lista cada item antecedido por <li>. Usualmente, uma URL vir associada a cada frame. A estrutura mnima do frame document ser ento:

<html> <head> <title></title> </head> <frameset ...> <frame src="URL"> <frame src="URL"> </frameset> </html>

Ateno: Note que com apenas essas marcaes o documento da estrutura Frame Document - no funciona. necessrio que esteja definido algum atributo para as reas de frameset, assim como associadas urls a cada frame, como veremos mais adiante.
Ateno

II: Voc poder ter - e provavelmente ter - vrios <frameset> intercalados. Da mesma foma como possvel intercalar listas, ou tabelas em HTML.

Cada uma destas marcaes - <frameset> e <frame> - aceita extenses, valores e atributos, como veremos a seguir.

III. Sintaxe a. Frameset b. Frame c. Noframes a. Frameset Frameset aceita os atributos ROWS e COLS, referentes divises horizontais(como linhas em uma tabela) e verticais (como colunas) entre janelas na tela. Internamente a marcaes FRAMESET s podero aparecer outras FRAMESET, FRAME ou NOFRAMES. Importante: No podem ser utilizadas as marcaes vlidas entre marcaes <BODY></BODY> nem internamente a marcaes FRAMESET, nem antes dela, seno FRAMESET ser ignorada. ATRIBUTOS 1. ROWS (<frameset rows=valor, valor, valor...>) Define divises 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 vrgulas. Este valor poder ser: Numrico - pixels=> (ROWS="30, 50") Refere-se a quantos pixels cada frame (ou janela) deve ocupar. A desvantagem desta notao que no possvel ter controle do valor total de pixels que o cliente do usurio compreende. Percentual=> (ROWS="25%, 25%, 50%") Pode ainda ser um valor percentual, sempre somando um valor de 100%. o mtodo mais simples. Relativo=> (ROWS="2*,*") Desta forma, define-se um valor relativo. No exemplo, o primeiro frame vai ocupar dois teros da tela, e o segundo um tero. Exemplos : 1. Para dividir a tela do browser em trs janelas horizontais, sendo que a do meio mais larga que as de cima e de baixo:
<html> <head> <title></title> </head> <frameset rows="20%, 60%, 20%"> <frame src="cell1.html"> <frame src="cell2.html"> <frame src="cell3.html"> </frameset> </html>

2.Trs janelas horizontais, sendo que a primeira e a segunda tem uma altura fixa, e o frame central dever ocupar o restante do espao:
5

<html> <head> <title></title> </head> <frameset rows="30, *, 50"> <frame src="cell1.html"> <frame src="cell2.html"> <frame src="cell3.html"> </frameset> </html>

2. COLS (<frameset cols=valor, valor, valor.. >) Funciona exatamente como a marcao anterior, no entanto, divide a tela em frames ou janelas verticais. Exemplos Para dividir a tela do browser em trs janelas verticais 1.Trs colunas, sendo que a do meio mais larga que as de cima e de baixo:
<html> <head> <title></title> </head> <frameset cols="20%, 60% ,20%"> <frame src="cell1.html"> <frame src="cell2.html"> <frame src="cell3.html"> </frameset> </html>

2.Trs janelas verticais, sendo que a primeira e a segunda tem uma altura fixa, e o frame central dever ocupar o restante do espao:
<html> <head> <title></title> </head> <frameset cols="200, *, 100"> <frame src="cell1.html"> <frame src="cell2.html"> <frame src="cell3.html"> </frameset> </html>

Ateno, para intercalar janelas verticais e horizontais, ser necessrio definir vrias reas "FRAMESET". Para cada rea delimitida como "FRAMESET" voc poder definir nmero de linhas OU colunas. Veremos como faz-lo mais adiante. No possvel definir COLS e ROWS para uma mesma rea FRAMESET.

b. Frame A marcao FRAME define cada janela contida em uma rea frameset. Esta marcao no necessita de uma tag de finalizao (</frame>) e aceita 6 atributos possveis: 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 - for o destino de um link em outro documento (normalmente no mesmo documento. Um frame apontando para outro. Tipo um ndice abrindo vrias urls em outras janelas). Este atributo opcional. Por padro, os frames no tem nome. Importante, o nome_da_janela deve comear por caracter alfanumrico. 3. MARGINWIDTH="valor" Esse atributo controla as margens esquerda e direita de cada frame, ou seja, a distncia entre o contedo da pgina e as margens da janela. O valor associado ser um valor absoluto em pixels. O menor valor aceito ser 1. Este atributo opcional, caso no venha definido, o browser usar o seu padro para definir as margens no frame/janela. 4. MARGINHEIGHT="valor" Tambm 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 no. Caso seja definido como YES, a janela sempre possuir uma barra de rolagem visvel. Caso seja definido como NO, nunca haver barra de rolagem. E, finalmente, se vier como AUTO, o browser aplicar a barra quando necessrio. O padro AUTO, portanto, se o atributo scrolling no vier definido, o browser aplicar a barra de rolagem, sempre que necessrio. 6. NORESIZE Este atributo no possui valor associado. Quando ele no aparece, o usurio poder alterar o tamanho da janela, "arrastando" com o cursor a borda da mesma. O padro que todas as janelas possam ter seu tamanho alterado. NORESIZE opcional Um frame, com todos os atributos definidos seria escrito assim, por exemplo: <frame src=http://www.cr-df.rnp.br name=home marginwidth=5 marginheight=5 scrolling=auto noresize>

c. Noframes Esta marcao possibilita que se crie uma opo de navegao na pgina para quem no possui um browser que entende frames. Esta marcao aparece no documento de estrutura "Frame document", e sempre usada em pares (<noframes>.. contedo... </noframes>). Quando o acesso for feito atravs de um browser que entenda frames, o que estiver entre as marcaes "noframes" ser simplesmente ignorado. Internamente a uma rea "noframes" dever ser usada a estrutura padro de documentos html (<head> </head>, <title> </title> <body> </body>, etc...). Um exemplo:
<html> <head> <title>Teste, uso de frames</title> </head> <FRAMESET ROWS="15%, 85%"> <NOFRAMES> <body bgcolor="#000000" text="#ffff00" link="#ff0000" > Bem-vindo a uma pgina de teste.<p> Para acess-la, voc deve utilizar a verso 2.0 ou acima do href="http://home.netscape.com/comprod/mirror/index.html"> Netscape Navigator!</a> </p> <hr> </body> </NOFRAMES> <FRAMESET COLS="25%, 75%"> <FRAME NAME="1" SRC="teste1.htm" NORESIZE> <FRAME NAME="2" SRC="teste2.htm" NORESIZE> </FRAMESET> <FRAMESET COLS="30%, 70%"> <FRAME NAME="3" MARGINWIDTH="50" SRC="teste3.htm"> <FRAMESET ROWS="65%, 35%"> <FRAME NAME="4" SRC="teste4.htm" NAME="chat"> <FRAME NAME="5" SRC="teste5.htm"> </FRAMESET> </FRAMESET> </FRAMESET> </html>

<i>browser</i><a

Veja como ela exibida, por exemplo, com o MOSAIC (no l frame) e com o NETSCAPE (l frame).

MOSAIC - no l frame

NETSCAPE - l frame

10

IV. Intercalando Frameset - exemplos Para tornar mais claro como se constrem mltiplas e intercaladas janelas - divises horizontais e verticais - utilizando das marcaes de frames, seguem abaixo dois exemplos de construo de documentos com mltiplas janelas. Exemplo 1
<html> <head> <title>Ttulo</title> </head> <frameset rows="30%, 70%"> <frameset cols="33%, 33%, 33%"> <frame src=""> <frame src=""> <frame src=""> </frameset> <frameset cols="50%, 50%"> <frame src=""> <frame src=""> </frameset> </frameset> </html>

Exemplo 2:
<html> <head> <title></title> </head> <frameset rows="15%, 85%"> <frame src="teste5.htm"> <frameset cols="25%, 75%"> <frame src="teste4.htm"> <frameset rows="85%, 15%"> <frame src="teste3.htm"> <frame src="teste2.htm"> </frameset> </frameset> </frameset> </html>

11

V. Links entre frames A marcao TARGET, permite que se controle em qual janela um link especfico ser exibido quando o usurio clicar sobre ele. Por exemplo, pode-se ter uma janela lateral com uma espcie de indce do servio de informao e outra janela em que a navegao propriamente dita vai ocorrer. Desta forma, o ndice est permanentemente disponvel 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 marcao target="valor"" ncora, da seguinte forma: <a href="URL" target="valor"> Onde este valor idntico quele associado marcao name no frame document. Exemplo:

O frame document dever ser escrito assim:


<html> <head> <title>Ttulo</title></head> <frameset rows="80%, 20%"> <frame name="navega"" src="teste3.htm"> <frame src="barra.htm"> </frameset> </html>

o documento que contm o ndice navegao (barra.htm), ser assim:


<html>

de

<head><title>Ttulo</title> </head> <body> <a href="http://www.cr-df.rnp.br/" target="navega"> [link para o cr-df]</a> <a href="http://www.cr-df.rnp.br/" target="navega"> [link para o cr-sp]</a> <a href="http://www.cr-df.rnp.br/" target="navega"> [link para o cr-pe]</a> </body> </html>

12

VI. Cartela de Comandos

Marcao
<html> e </html> <head></head> <frameset></frameset> <frame src="URL">

Funo / caractersticas
Estrutura Bsica Delimita o "frame document", como em qualquer arquivo html normal. Define cabea do documento, novamente, como em qualquer arquivo html. delimita as janelas a serem usadas no documento. Podem haver vrios frameset intercalados. Controla o comportamente das janelas atravs de seus atributos. Define cada janela/frame. Normalmente possui uma URL associada. Aceita atributos e valores. Sintaxe Para Frameset define quantas linhas - janelas horizontais - e sua ocupao na tela, para cada rea frameset. Aparecero tantos valores quantas forem as janelas. Os valores relativos a cada janela devero ser separados por vrgulas . Cada valor associado poder ser: Numrico - em pixels = <frameset rows="30, 50"> Percentual = <frameset rows="25%, 25%, 50%"> Relativo = <"2*,*">; define quantas colunas - janelas verticais - e sua ocupao da tela. Funciona exatamente como a marcao interior (associao de valores, com as mesmas opes). Para Frame associa uma url a uma janela associa um nome a uma janela determina margem direita/esquerda em cada frame determina margem superior/inferior em cada frame define presena, ausncia, ou atribuio automtica (pelo browser) de barras de rolagem mantm fixo o tamanho de cada janela/frame Para Noframes delimita rea para navegao opcional, destinada a quem usa browser que no entenda 'frame'.Internamente, recebe a marcao <body></body> delimitando o documento, e todas as demais marcaes HTML. Target Define a janela em que ser exibido um link ao ser ativado. O name associado dever ser idntico ao name atribudo a janela de destino no frame document.
1. 2.

<frameset rows="valor, valor, valor">

<frameset cols="valor, valor, valor"> <frame SRC="URL"> <frame NAME="valor"> <frame MARGINWIDTH="valor"> <frame MARGINHEIGHT="valor"> <frame SCROLLING="yes/no/auto"> <frame NORESIZE > <noframe></noframe>

<a href="URL" target="name">

13

Das könnte Ihnen auch gefallen