Aula 5

Data de publicação: Jan 06, 2013 7:48:23 PM

3. Utilização de frames e iframes

3.1 Frames

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

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

(...)

<h2> Fotografia </h2>

<h7> Tema: Natureza </h7>

<br>

</iframe>

</center>

</body>

(...)

Resultado

EXERCÍCIOS PRÁTICOS

1. Deverá realizar cada um dos 3 exemplos das Frames:

1.1 Exemplo 1

1.2 Exemplo 2

1.3 Exemplo 3

2. Criar uma página html com a utilização de iFrames, tal como mostra no exemplo do ponto 3.2

2.1 Título com <h1>

2.2 Subtítulo com <h7>

2.3 iFrame com tamanho 800x600 e respectiva imagem.