Aula 05
Data de publicação: Oct 23, 2012 10:58:0 PM
3. Utilização de frames e iframes
É possível dividir a nossa página em várias páginas distintas, isto é, muitas páginas a serem mostradas ao utilizador em simultâneo, sem que este se aperceba disso. Com a ajuda das frames é possível dividir a página, como se de uma tabela com células independentes se tratasse.
A tag responsável pela inserção de frames é a <frameset> e deve ser inserida após a tag </head> e antes da tag <body> (ver exemplo seguinte).
Nesta tag define-se o número de frames que serão adicionados à página.
Cada um deles será então precedido da tag <frame>. Após a declaração dos frames, a tag <frameset> tem de ser fechada </frameset>
Antes de passarmos a um exemplo, vejamos os atributos aceites pelas tags <frameset> e <frame>.
TAG <frameset>
rows - atributo da tag frameset que define frames em forma de linha;
cols - atributo da tag frameset que define frames em forma de coluna.
TAG <frame>
name - atribuir um nome ao frame;
scrolling - permite visualizar, ou não, a barra de movimento horizontal/vertical (scrolling);
noresize - permite ao utilizador alterar ou não o tamanho dos frames;
frameborder - permite mostrar ou omitir a borda;
bordercolor - permite alterar a cor da borda;
marginwidth - permite definir o valor em pixéis (px) da margem lateral;
marginheight - permite definir o valor em pixéis (px) da margem superior.
Exemplo 1 (index.html)
(...)
</head>
<frameset cols="15%, 85%">
<frame src="frame1.html" name="esquerda">
<frame src="frame2.html" name="direita">
</frameset>
<body>
(...)
Resultado
No exemplo anterior foram definidos dois frames em forma de coluna na tag <frameset>, ocupando o primeiro, 15% da largura do ecrã e o segundo 85%. A soma das frames deve sempre totalizar os 100%.
Para este exemplo, foi necessária a criação de três páginas distintas. Duas para os frames e uma principal (index.html) para chamar as restantes. Para esse efeito, as páginas frame1.html e frame2.html encontravam-se no mesmo directório da index.html (página onde se encontra o código do exemplo1)
Exemplo 2 (index.html)
(...)
</head>
<frameset rows="40%,*, 25%">
<frame src="frame1.html" name="cima" scrolling="No">
<frame src="frame2.html" name="meio" scrolling="Yes">
<frame src="frame3.html" name="baixo" noresize scrolling="No">
</frameset>
<body>
(...)
Resultado
Neste caso, foram definidas três frames em linha que são chamados pela página index.html. A introdução de um asterisco em vez de um valor em percentagem para a segunda frame, indica que este terá o tamanho que faltar para atingir os 100%, isto é, somando os outros frames 40% + 25% = 65% pelo que o frame do meio ocupará 100% - 65% = 35%
Exemplo 3
(...)
</head>
<frameset cols="20%,80%" frameborder="0">
<frame src="frame1.html" name="esquerda">
<frameset rows="50%,50%">
<frame src="frame2.html" name="direita_cima">
<frame src="frame3.html" name="direita_baixo">
</frameset>
<body>
(...)
Resultado
No exemplo anterior, a página é dividida em duas colunas onde uma delas (direita) tem duas linhas. As bordas deixam de aparecer devido ao atributo frameborder="0" da tag <frameset>
Apesar de tudo o que foi referido anteriormente, a utilização de frames está gradualmente a desaparecer. Outras linguagens associadas ao HTML (como CSS que iremos ver mais à frente) permitem obter resultados que ultrapassam largamente as possibilidades dos frames em HTML.
iFrames
Os iframes distinguem-se dos frames, visto serem declarados inline, podendo ocupar apenas uma porção da nossa página principal.
A tag responsável um inline frame é a <iframe>, que tem obrigatoriamente de ser fechada.
Os atributos que esta tag aceita são os seguintes:
width - definir a largura ocupada pelo iframe;
height - definir a altura ocupada pelo iframe;
frameborder - atributo da tag frame para mostrar ou omitir a borda.
Vejamos o exemplo seguinte:
(...)
<body bgcolor="Blue">
<iframe src="frame1.html" width="150" height="300" frameborder="2">
</iframe>
</body>
(...)
Resultado