Aula 04

Data de publicação: Oct 01, 2012 8:33:20 AM

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>

<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>

<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>

<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:

(...)

</iframe>

</body>

(...)

Resultado