| Versão do documento original: Frames | Traduzido por De Sena Viegas |
Conteúdos
As molduras em HTML permitem aos autores apresentar documentos em múltiplas visualizações, em janelas independentes ou em sub-janelas. As visualizações múltiplas oferecem aos desenhadores uma forma de manter determinada informação visível, ao mesmo tempo que outras vizualizações são substituídas ou “roladas”. Por exemplo, no interior duma mesma janela, a moldura poderá exibir um “banner” estático, uma segunda moldura poderá exibir um menu de navegação e uma terceira o documento que poderá ser rolado e/ou substituído pela navegação contida na segunda moldura.
Eis aqui um exemplo de um documento constituído por molduras simples:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Um documento constituído por um conjunto de molduras simples</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
</FRAMESET>
<FRAME src="contents_of_frame3.html">
<NOFRAMES>
<P>Este documento constituído por um conjunto de molduras contém:
<UL>
<LI><A href="contents_of_frame1.html">Conteúdos diversos</A>
<LI><IMG src="contents_of_frame2.gif" alt="Uma imagem porreira">
<LI><A href="contents_of_frame3.html">Outros conteúdos interessantes</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>
as quais poderão dar origem a um layout parecido com este:
---------------------------------------
| | |
| | |
|Moldura 1| |
| | |
| | |
|---------| |
| | Moldura 3 |
| | |
| | |
| | |
|Moldura 2| |
| | |
| | |
| | |
| | |
---------------------------------------
Se o agente não puder exibir as molduras ou estiver configurado para as não exibir, ele exibirá os conteúdos do elemento NOFRAMES.
Um documento HTML que descreva a representação gráfica da moldura (designado por documento do conjunto de molduras) tem uma aparência diferente de um documento HTML sem molduras. Um documento standard tem uma secção HEAD e um BODY. O documento do conjunto de molduras tem um HEAD e um FRAMESET em vez de BODY.
A secção FRAMESET de um documento especifica o layout das visualizações na janela principal do agente. Paralelamente, a secção FRAMESET pode conter um elemento NOFRAMES, a fim de fornecer um conteúdo alternativo aos agentes não suportem molduras ou que estejam configurados para as não exibirem.
Os elementos que possam ser normalmente posicionados no elemento BODY não podem aparecer antes do elemento FRAMESET, ou o FRAMESETserá ignorado.
<![ %HTML.Frameset; [
<!ELEMENT FRAMESET - - ((FRAMESET|FRAME)+ & NOFRAMES?) -- sub-divisão da janela-->
<!ATTLIST FRAMESET
%coreattrs; -- id, class, style, title --
rows %MultiLengths; #IMPLIED -- lista de longitudes,
valor por defeito: 100% (1 fila) --
cols %MultiLengths; #IMPLIED -- lista de longitudes,
valor por defeito: 100% (1 coluna) --
onload %Script; #IMPLIED -- todas as molduras foram carregadas --
onunload %Script; #IMPLIED -- todas as molduras foram removidas --
>
]]>
Definições do atributo
Atributos definidos noutros lugares:
O elemento FRAMESET especifica o layout da janela principal do agente, em termos de sub-espaços rectangulares.
Ao se aplicar o atributo rows, define-se o número de sub-espaços horizontais a conter num conjunto de molduras. Aplicando-se o atributo cols define-se o número de sub-espaços verticais a conter num conjunto de molduras. Ambos os atributos poderão ser simultaneamente usados, com vista a criar uma grelha.
Se o atributo rows não for aplicado, cada uma das colunas extender-se-à ao comprimento total da página. Se o atributo cols não for aplicado, cada uma das filas extender-se-à à largura total da página. Se nenhum dos atributos for usado, a moldura terá exactamente o tamanho da página.
As molduras são criadas da esquerda para a direita em relação às colunas e de cima para baixo, em relação às filas. Se ambos os atributos forem especificados, as visualizações são criadas da esquerda para a direita no topo da fila, da esquerda para a direita na segunda fila, e por aí adiante.
O primeiro exemplo divide o ecrã verticalmente em duas partes (ou seja, cria uma metade superior e uma metade inferior).
<FRAMESET rows="50%, 50%">
...o resto da definição... </FRAMESET>
O próximo exemplo cria três colunas: a segunda tem uma largura fixa de 250 pixeis (útil por exemplo, para conter uma imagem com um tamanho preciso). A primeira recebe 25% e a terceira coluna 75% do espaço restante.
<FRAMESET cols="1*,250,3*">
...o resto da definição... </FRAMESET>
O próximo exemplo cria uma grelha de sub-espaços 2x3.
<FRAMESET rows="30%,70%" cols="33%,34%,33%">
...o resto da definição... </FRAMESET>
Para o próximo exemplo, suponha-se que a janela do navegador tem actualmente 1000 pixeis de altura. A primeira visualização tem 30% da altura total (300 pixeis). A segunda é especificada para ter exactamente 400 pixeis de altura. Restam assim 300 pixeis para serem divididos entre as outras duas molduras. A altura da quarta moldura é especificada como "2*", ou seja, duas vezes mais alta que a terceira moldura, cuja altura é apenas "*" (equivalente a 1*). Para isso, a terceira moldura terá 100 pixeis de altura e a quarta moldura 200 pixeis.
<FRAMESET rows="30%,400,*,2*">
...o resto da definição... </FRAMESET>
As longitudes absolutas que não perfaçam 100% do espaço real dsponível deverão ser ajustadas pelo agente usado pelo utente. Se não se especificar, o espaço restante deverá ser loteado proporcionalmente por cada visualização. Quando especificado, cada visualização deveria ser reduzida de acordo com a proporção determinada em relação ao espaço total.
Os conjuntos de molduras podem ser encaixados em qualquer nível.
No exemplo que se segue, o FRAMESET exterior divide o espaço disponível em três colunas iguais. O FRAMESET interior divide a segund área em duas filas com uma altura desigual.
<FRAMESET cols="33%, 33%, 34%">
...conteúdo da primeira moldura... <FRAMESET rows="40%, 50%"> ...conteúdo da segunda moldura, primeira fila... ...conteúdo da segunda moldura, segunda fila... </FRAMESET> ...conteúdo da terceira moldura... </FRAMESET>
Os autores poderão compartilhar dados ao longo de várias molduras, incluindo esses dados por intermédio do elemento OBJECT. Os autores deveriam incluir o elemento OBJECT no HEAD do documento constituído pelo conjunto de molduras e nomeá-lo através do atributo id. Qualquer documento que seja o conteúdo de uma moldura contida no conjunto de molduras poderá fazer referência a este identificador.
O exemplo que se segue ilustra-nos a forma como um script pode fazer referência a um elemento OBJECT, definido para um conjunto de molduras no seu total:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Este é o conjunto de molduras contendo OBJECT em HEAD</TITLE>
<!-- Este OBJECT não é exibido! -->
<OBJECT id="myobject" data="data.bar"></OBJECT>
</HEAD>
<FRAMESET>
<FRAME src="bianca.html" name="bianca">
</FRAMESET>
</HTML>
<!-- Em bianca.html -->
<HTML>
<HEAD>
<TITLE>Página da Bianca</TITLE>
</HEAD>
<BODY>
... princípio do documento... <P> <SCRIPT type="text/javascript"> parent.myobject.myproperty </SCRIPT> ...o resto do documento... </BODY> </HTML>
<![ %HTML.Frameset; [
<!-- os nomes reservados das molduras começam por "_", senão começam por uma letra -->
<!ELEMENT FRAME - O EMPTY -- sub-janela -->
<!ATTLIST FRAME
%coreattrs; -- id, class, style, title --
longdesc %URI; #IMPLIED -- link destinado a uma descrição mais extensa
(complementa o título) --
name CDATA #IMPLIED -- nome da moldura para efeitos de destino --
src %URI; #IMPLIED -- fonte do conteúdo da moldura --
frameborder (1|0) 1 -- requerir margens das molduras? --
marginwidth %Pixels; #IMPLIED -- larguras da margem em píxeis --
marginheight %Pixels; #IMPLIED -- altura da margem em píxeis --
noresize (noresize) #IMPLIED -- permitir aos utentes redimensionar as molduras? --
scrolling (yes|no|auto) auto -- barra de rolagem/paginação ou nenhuma --
>
]]>
Definições do atributo
Atributos definidos noutros lugares:
O elemento FRAME define os conteúdos e a aparição de uma única moldura.
O atributo src especifica o documento inicial que a moldura irá conter.
O seguinte exemplo de um documento HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Documento do conjunto de molduras</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
<FRAMESET rows="*,200">
<FRAME src="conteúdos_da_moldura1.html">
<FRAME src="conteúdos_da_moldura2.gif">
</FRAMESET>
<FRAME src="conteúdos_da_moldura3.html">
<FRAME src="conteúdos_da_moldura4.html">
</FRAMESET>
</HTML>
deveria dar origem a um layout parecido com este:
------------------------------------------
|Moldura 1 |Moldura 3 |Moldura 4 |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
-------------| | |
|Moldura 2 | | |
| | | |
| | | |
------------------------------------------
e fazer com que o agente carregue cada um dos ficheiros numa visualização em separado.
Os conteúdos de uma moldura não terão obrigatoriamente de estar contidos no mesmo documento que a definição da moldura.
EXEMPLO ILEGAL:
A seguinte definição do conjunto de molduras não
é permitida em HTML, uma vez que os conteúdos da segunda
moldura estão contidos no mesmo documento que o conjunto de
molduras.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Documento do conjunto de molduras</TITLE>
</HEAD>
<FRAMESET cols="50%,50%">
<FRAME src="conteúdos_da_moldura1.html">
<FRAME src="#âncora_no_mesmo_documento">
<NOFRAMES>
...texto... <H2><A name="âncora_no_mesmo_documento">Secção importante</A></H2> ...texto... </NOFRAMES> </FRAMESET> </HTML>
O exemplo que se segue ilustra o uso de atributos FRAME decorativos. Nós especificámos que a moldura 1 não permite nenhuma barra de scroll. A moldura 2 deixará espaço em branco à volta do seu conteúdo (inicialmente um ficheiro de imagem) e além disso a moldura não é redimensionável. Não se representará nenhuma margem entre as molduras 3 e 4. Por defeito, as margens serão representadas apenas entre as molduras 1, 2, e 3.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Documento do conjunto de molduras</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
<FRAMESET rows="*,200">
<FRAME src="conteúdos_da_moldura1.html" scrolling="no">
<FRAME src="conteúdos_da_moldura2.gif"
marginwidth="10" marginheight="15"
noresize>
</FRAMESET>
<FRAME src="conteúdos_da_moldura3.html" frameborder="0">
<FRAME src="conteúdos_da_moldura4.html" frameborder="0">
</FRAMESET>
</HTML>
Nota: para mais informações acerca da corrente prática, na determinação do destino de uma moldura, consulte por favor as notas referentes às molduras.
Definições do atributo
Consulte a secção referente aos nomes das molduras de destino a fim de obter informação mais detalhada acerca dos nomes que são reconhecidos para as molduras.
Este exemplo ilustra-nos a forma como os destinos permitem a modificação dinâmica dos conteúdos de uma moldura. Primeiramente, nós definimos o conjunto de molduras no documento frameset.html, o qual nos é aqui exibido:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Documento do conjunto de molduras</TITLE>
</HEAD>
<FRAMESET rows="50%,50%">
<FRAME name="fixed" src="init_fixed.html">
<FRAME name="dynamic" src="init_dynamic.html">
</FRAMESET>
</HTML>
De seguida, em init_dynamic.html, nós ligamos à moldura denominada de "dynamic".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Documento contendo âncoras com destinos específicos</TITLE>
</HEAD>
<BODY>
... princípio do documento... <P>Agora você poderá avançar para <A href="slide2.html" target="dynamic">slide 2.</A> ...mais documento... <P>Magnífico! Agora vamos para <A href="slide3.html" target="dynamic">slide 3.</A> </BODY> </HTML>
Ao se activar qualquer uma das ligações, abre-se um novo documento na moldura intitulada de “dinâmica”, ao passo que a outra moldura, “fixed”, mantém o seu conteúdo inicial.
Actualmente não existe maneira de codificar por completo o estado de um conjunto de molduras num URI. Por isso, muitos agentes não permitem que os utentes atribuam um indicador a um conjunto de molduras.
Sempre que várias ligações contidas num mesmo documento designem o mesmo destino, é possível especificar o destino apenas uma vez e dispensar o atributo target pertencente a cada elemento. Isto é-se conseguido através do uso do atributo target contido no elemento BASE.
Voltemos ao exemplo anterior, desta vez factorizando a informação do destino através da sua definição no elemento BASE e removendo-a dos elementos A.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Documento com BASE contendo um destino específico</TITLE>
<BASE href="http://www.mycom.com/Slides" target="dynamic">
</HEAD>
<BODY>
... princípio do documento... <P>Agora você poderá avançar para <A href="slide2.html">slide 2.</A> ...mais documento... <P>Magnífico! Agora vamos para <A href="slide3.html">slide 3.</A> </BODY> </HTML>
Os agentes deveriam definir a moldura de destino onde se vai carregar um recurso ligado, de acordo com as seguintes precedências (da maior para a menor prioridade):
Eles poderão fornecer um mecanismo que permita aos utentes anular target.
Os autores deveriam fornecer conteúdos alternativos para os agentes que não suportem molduras ou que estejam configurados para as não exibirem.
<![ %HTML.Frameset; [
<!ENTITY % noframes.content "(BODY) -(NOFRAMES)">
]]>
<!ENTITY % noframes.content "(%flow;)*">
<!ELEMENT NOFRAMES - - %noframes.content; -- contentor de conteúdos alternativos para exibições que não se baseiem nas molduras --> <!ATTLIST NOFRAMES %attrs; -- %coreattrs, %i18n, %events --
>
Atributos definidos noutros lugares:
O elemento NOFRAMES especifica um conteúdo que deverá ser exibido apenas pelos agentes que não suportem molduras ou que estejam configurados para as não exibir. Os agentes que suportem molduras deverão apenas exibir os conteúdos de uma declaração NOFRAMES sempre que estiverem configurados para não exibirem molduras. Os agentes que não suportem molduras deverão exibir os conteúdos de NOFRAMES qualquer dos casos.
O elemento NOFRAMES faz parte de DTDs do conjunto de molduras e DTDs transitivas. Num documento onde se use a DTD do conjunto de molduras, o elemento NOFRAMES pode ser usado no final da secção FRAMESET do documento.
Por exemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Documento do conjunto de molduras contendo NOFRAMES</TITLE>
</HEAD>
<FRAMESET cols="50%, 50%">
<FRAME src="main.html">
<FRAME src="tabela_dos_conteudos.html">
<NOFRAMES>
<P>Eis aqui a <A href="main-noframes.html">
versão do documento baseada em NONFRAME.</A>
</NOFRAMES>
</FRAMESET>
</HTML>
NOFRAMES poderá ser usado por exemplo, num documento que seja a fonte da moldura e que use a DTD transitiva. Isto permite aos autores explicar o propósito do documento nos casos em que ele seja visualizado fora do conjunto de molduras ou através de um agente que não suporte molduras.
O atributo longdesc permite aos autores tornar os documentos das molduras mais acessíveis para as pessoas que usem agentes não-visuais. Este atributo especifica um recurso que fornece uma descrição mais extensa da moldura. Os autores devem ter em conta que as descrições mais extensas associadas às molduras são anexadas à moldura e não aos seus conteúdos. Dado que os conteúdos poderão variar ao longo do tempo, a descrição extensa inicial é tida como inapropriada para os posteriores conteúdos da moldura. Em particular, os autores não deveriam incluir apenas uma imagem como conteúdo único da moldura.
O documento do conjunto de molduras que se segue descreve duas molduras. A moldura esquerda contém uma tabela de conteúdos (índice) e a moldura direita contém inicialmente a imagem de uma avestruz:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Documento do conjunto de molduras fracamente concebido</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAME src="tabela_dos_conteudos.html">
<FRAME src="avestruz.gif" longdesc="avestruz-desc.html">
</FRAMESET>
</HTML>
Note-se que a imagem foi incluída na moldura independentemente de qualquer elemento HTML, de forma que o autor não possui outros meios para especificar texto alternativo a não ser o atributo longdesc. Se os conteúdos da moldura direita forem alterados (ex: o utente selecciona uma cobra no índice), os utentes não terão qualquer accesso textual ao conteúdo da nova moldura.
Assim, os autores não deveriam inserir a imagem directamente na moldura. Em vez disso, a imagem deveria ser especificada num documento HTML em separado e anotada com o texto alternativo apropriado:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Documento do conjunto de molduras bem concebido</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAME src="tabela_dos_conteudos.html">
<FRAME src="avestruz-contentor.html">
</FRAMESET>
</HTML>
<!-- Em avestruz-contentor.html --> -->
<HTML>
<HEAD>
<TITLE>A rápida e potente avestruz</TITLE>
</HEAD>
<P>
<OBJECT data="avestruz.gif" type="image/gif">
Esta avestruz deve ser deliciosa!
</OBJECT>
</HTML>
<!ELEMENT IFRAME - - (%flow;)* -- sub-janela em linha -->
<!ATTLIST IFRAME
%coreattrs; -- id, class, style, title --
longdesc %URI; #IMPLIED -- link destinado a uma descrição mais extensa
(complementa o título) --
name CDATA #IMPLIED -- nome da moldura para efeitos de destino --
src %URI; #IMPLIED -- fonte do conteúdo da moldura --
frameborder (1|0) 1 -- requerir margens das molduras? --
marginwidth %Pixels; #IMPLIED -- larguras da margem em píxeis --
marginheight %Pixels; #IMPLIED -- altura da margem em píxeis --
scrolling (yes|no|auto) auto -- barra de scroll ou nenhuma --
align %IAlign; #IMPLIED -- alinhamento vertical ou horizontal --
height %Length; #IMPLIED -- altura da moldura --
width %Length; #IMPLIED -- largura da moldura --
>
Definições do atributo
Atributos definidos noutros lugares:
A informação a ser inserida inline é definida pelo atributo src deste elemento. Por outro lado, os conteúdos do elemento IFRAME deveriam ser apenas exibidos pelos agentes que não suportem molduras ou que estejam configurados para as não exibir.
No caso dos agentes que suportem molduras, o exemplo que se segue posiciona uma moldura inline no meio de um texto, dilimitada por uma margem.
<IFRAME src="foo.html" width="400" height="500"
scrolling="auto" frameborder="1">
[O seu agente não suporta molduras ou está correntemente configurado
para as não exibir. Você poderá no entanto visitar
<A href="foo.html">o documento a ela relacionado.</A>]
</IFRAME>
As molduras inline não podem ser redimensionadas (não podendo assim assumir o atributo noresize).
Nota: os documentos HTML também podem ser encaixados noutros documentos através do elemento OBJECT. Consulte a secção referente aos documentos integrados (ou encaixados), se quiser obter mais informações.