Define um conjunto de quadros. Um arquivo HTML que
contenha o <frameset> não deve conter também o descritor <BODY>.
Utilizado dentro de: <HTML>,
<FRAMESET>
Pode conter: <FRAME>,
<NOFRAMES>, <FRAMESET>
Atributos:
cols="x, y, ..."
Define a largura ocupada por cada quadro. Pode ser uma porcentagem (valor seguido de
"%") em relação à largura total da página ou um valor
absoluto em pixels.
rows="x, y, ..."
Define a altura ocupada por cada quadro. Pode ser uma porcentagem (valor seguido de
"%") em relação à altura total da página ou um valor
absoluto em pixels.
frameborder=1 / 0
Estabelece a largura em pixels da borda dos quadros. Por default, todo quadro possui uma
borda. Para retirá-la use frameborder="0".
Esta é a sintaxe de um arquivo HTML simples com
frames verticais. O exemplo abaixo consiste num arquivo chamado framecols.htm, dividido
em três: frame 1, 2 e 3 com 10, 30 e 20 colunas, respectivamente. Cada frame exibirá seu arquivo
correspondente conforme mostra o comando <frame src="...">
Arquivo framecols.htm:
<HTML>
<HEAD>
<TITLE>Exemplo de um frame</TITLE>
</HEAD>
<frameset cols=10,30,20>
<frame src="frame1.htm">
<frame src="frame2.htm">
<frame src="frame3.htm">
</frameset>
</HTML>
Como você pode notar o arquivo framecols.htm foi criado apenas para estruturar a apresentação dos outros arquivos HTML, chamados frames1.htm, frame2.htm e frame3.htm. Framecols.htm é a moldura de apresentação desses três arquivos HTML. Quando a janela criada para cada arquivo não for suficiente para exibir todo o seu conteúdo, ele automaticamente cria barras de rolagem vertical e/ou horizontal, conforme a necessidade.
Outro exemplo, agora com o atributo "rows=10,25,10": e sem as bordas, frameborder="0".
Sintaxe:
<HTML>
<HEAD>
<TITLE>Exemplo de um frame</TITLE>
</HEAD>
<frameset rows=10,25,10 frameborder="0">
<frame src="frame1.htm">
<frame src="frame2.htm">
<frame src="frame3.htm">
</frameset>
</HTML>
Para dividir os frames em janelas iguais no browser usamos o "*". Assim <frameset cols=*,*,*> ou <frameset rows=*,*,*> irá criar três janelas verticais ou horizontais equivalentes.
Outra forma de distribuir os frames é usando valores percentuais. Determine quantos %
cada frame deverá ocupar na janela do monitor. As distribuições sempre deverão totalizar os
100%.
Exemplo: <frameset cols=20%,60%,20%>
Os atributos cols & rows podem ser combinados simultaneamente criando janelas verticais e horizontais.
Sintaxe:
<HTML>
<HEAD>
<TITLE>Exemplo de um frame</TITLE>
</HEAD>
<frameset cols=30%,70%>
<frameset rows=50%,50%>
<frame src="frame1.htm">
<frame src="frame2.htm">
</frameset>
<frame src="frame3.htm">
</frameset>
</HTML>
framespacing=valor
Este atributo altera a espessura das bordas deixando os frames mais separados entre si.
Sintaxe:
<HTML>
<HEAD>
<TITLE>Exemplo de um frame</TITLE>
</HEAD>
<frameset cols=30%,70% framespacing=15>
<frameset rows=50%,50%>
<frame src="frame1.htm">
<frame src="frame2.htm">
</frameset>
<frame src="frame3.htm">
</frameset>
</HTML>
Define um quadro dentro de um conjunto <frameset>.
Utilizado dentro de: <FRAMESET>
Atributos:
align=top, middle, bottom,
left, right
Ajusta o alinhamento do frame ou do texto.
frameborder=1 / 0
Ativa ou desativa a exibição de borda no frame relacionado.
src="URL"
Informa a URL do documento que será exibido dentro do quadro.
name="rótulo"
Define um nome para o quadro que pode ser referenciado pelo atributo target do elemento
<a>.
marginheight="número"
Define um espaçamento vertical em pixels entre a borda do quadro e o seu
conteúdo.
marginwidth="número"
Define um espaçamento horizontal em pixels entre a borda do quadro e o seu
conteúdo.
noresize
Impede que o quadro possa ser redimensionado pelo usuário.
scrolling="yes | no"
Decide se haverá ou não barra de rolamento para permitir a visualização
do conteúdo do quadro. Por default, as barras de rolamento aparecem sempre que o
conteúdo ultrapassa a área de visualização do browser.
Sintaxe:
<HTML>
<HEAD>
<TITLE>Exemplo de um frame</TITLE>
</HEAD>
<frameset cols=30%,70%>
<frameset rows=50%,50%>
<frame marginwidth=50 marginheight=50 src="frame1.htm">
<frame scrolling="no" src="frame2.htm">
</frameset>
<frame frameborder=0 src="frame3.htm">
</frameset>
</HTML>
Neste exemplo, no frame 1 configurei marginwidth=50 marginheight=50
observe como ficaram as margens do texto. Ele criou um espaçamento nas bordas verticais e horizontais.
No frame 2 configurei scrolling="no", ou seja, sem barras de
rolagem. Embora exista uma parte do texto que ficou oculta (no monitor de 14"), a barra de rolagem vertical não aparece.
No frame 3 configurei frameborder=0, então ele aparecerá sem bordas,
observe a diferença entre os frames 1 e 2, com borda e o frame 3, sem borda.
Caso o browser do usuário seja antigo ou não compatível
com os recursos de frames, um recurso muito utilizado é inserir uma mensagem de aviso entre
<NOFRAMES>... </NOFRAMES>, informando-o do fato.
Utilizado dentro de: <FRAMESET>
Pode conter: o mesmo que <BODY>
Sintaxe:
|
<HTML> <HEAD> <TITLE>Exemplo de um frame</TITLE> </HEAD> <frameset cols=30%,70%> <frameset rows=50%,50%> <frame marginwidth=50 marginheight=50 src="frame1.htm"> <frame scrolling="no" src="frame2.htm"> </frameset> <frame frameborder=0 src="frame3.htm"> </frameset> <noframes> <p>Você entrou numa página que usa frames, um recurso não suportado pelo browser que está usando. Sugerimos obter uma versão atualizada do Netscape Navigator 3.0 ou do Internet Explorer 3.0 através dos seguintes sites: <p>Microsoft: <a href="http://www.microsoft.com">http://www.microsoft.com</a> <p>Netscape: <a href="http://home.netscape.com">http://home.netscape.com</a> <p><center>Clique no botão [Back] do seu browser para voltar.</center> </noframes> </HTML> |
Vamos supor que o seu browser não suporta frames, então ao acessar este exemplo o quadro que apareceria em seu monitor seria mais ou menos igual a isso:
NOTA: Logicamente esse exemplo é apenas uma simulação e para isso exclui os parâmetros de frames do arquivo para que surtisse o efeito desejado de um browser sem frame.
Agora vamos aprender como montar uma estrutura com frames verticais de forma que, ao clicar no índice do frame à esquerda ele mude apenas o frame à direita mantendo o resto da página inalterada. Para montar essa estrutura vou criar mais três arquivos que me servirão como exemplos. Os arquivos chamarão matriz.htm, indice.htm e abertura.htm (dei aos arquivos nomes associados as suas funções pra ficar mais fácil o entendimento).
matriz.htm
Este e o arquivo que irá comportar os frames. É ele que irá aparecer no monitor com os dois frames verticais.indice.htm
Este é o arquivo que irá conter a lista de arquivos à esquerda. Serão os nossos já conhecidos frame1, frame2 e frame3.htm.abertura.htm
Este é o arquivo que sempre irá aparecer à direita quando entrarem na sua página juntamente com o arquivo índice à esquerda.Sintaxe do arquivo matriz.htm
<HTML>
<HEAD>
<TITLE>MATRIZ - Aprendendo a trabalhar com frames.</TITLE>
</HEAD>
<frameset cols=20%,*>
<frame name="ladoesquerdo" src=indice.htm>
<frame name="ladodireito" src="abertura.htm">
</frameset>
</HTML>
Observe que o frame da esquerda terá 20% de tamanho <frameset cols=20%,*> e o asterisco indica que o restante do espaço ficará com o arquivo da direita. O parâmetro <frame name="ladoesquerdo" src=indice.htm> define qual arquivo irá aparecer à esquerda e <frame name="ladodireito" src=abertura.htm>, qual arquivo irá aparecer a direita.
Pronto! agora vamos criar o arquivo chamado indice.htm.
Sintaxe do arquivo indice.htm
<HTML>
<HEAD>
<TITLE>INDICE - Aprendendo a trabalhar com frames.</TITLE>
<base target="ladodireito">
</HEAD>
<body bgcolor="#daa520">
<center>
<h1>Diretório</h1>
<p>Clique sobre a lista abaixo.
<p><a href="abertura.htm">abertura</a>
<p><a href="frame1.htm">Frame 1</a>
<p><a href="frame2.htm">Frame 2</a>
<p><a href="frame3.htm">Frame 3</a>
<p><a href="../a9.htm#indice" target=_top>Voltar</a>
</center>
</body>
</HTML>
O parâmetro <base target="ladodireito"> acima, irá indicar ao browser onde os arquivos vinculados pelo comando <a href> devem ser carregados. Para entender melhor vamos ao exemplo prático, ele nada mais é que os dois arquivos apresentados acima.
Note como ficou fácil o entendimento analisando as sintaxes dos arquivos acima e depois verificando o exemplo. O arquivo abertura.htm por ser um arquivo comum, que poderá ser substituído por qualquer outro, não apresentei sua sintaxe aqui.
Define um frame embutido na página (como uma janela) e permite também a inclusão de outros documentos HTML.
Atributos
src=URL
Endereço do documento que será exibido.name=texto
Nome do frame.width=número
Define a largura do frame.height=número
Define a altura do frame.align= top | middle | bottom | left | right
Alinha o frame em relação a página no topo, meio, base, esquerda e direita, respectivamente.frameborder=1 | 0
O valor 1 insere uma borda no frame, o valor 0 omite.margnwidth=pixels
Define uma largura para a margem.marginheight=pixels
Define uma altura para a margem.scrolling=yes | no | auto
yes permite a rolagem do frame, no não permite.
Exemplo: Vou criar uma janela no centro desta página utilizando o comando iframe A sintaxe de configuração é a seguinte:
<center>
<iframe width="350" height="200" scrolling="auto" frameborder="1">
</iframe>
</center>
Este frame possui o tamanho de 350 x 200 pixels, barra de rolagem automática e uma borda. Agora irei colocar um arquivo HTML dentro desta janela. O arquivo será aquele modelo de background que usei em outra ocasião.
Sintaxe:
<center>
<iframe src="background1.htm" width="350" height="200" scrolling="auto" frameborder="1">
</iframe>
</center>
No próximo exemplo coloquei um texto rolante dentro da janela. Para criar o texto rolante coloquei uma frase qualquer dentro do comando marquee que por sua vez está dentro do arquivo banner.htm, depois inseri o arquivo banner.htm dentro da janela iframe, pronto.
Sintaxe deste exemplo:
<center>
<iframe src="banner.htm" width="400" height="20"
scrolling="no" frameborder="1" marginheight="2px">
</iframe>
</center>
Arquivo banner.htm
<HTML>
<HEAD>
<TITLE>Banner</TITLE>
</HEAD>
<BODY bgcolor="#D8D8BF">
<center>
<marquee behavior=scroll width="700">
<FONT FACE="verdana" SIZE="2">
Outro exemplo de aplicação é esta mensagem estilo banner.
</font>
</marquee>
</center>
</BODY>
</HTML>