Aula 7 – linguagem HTML - Frames

Linguagem HTML:
Frames
Prof. André Constantino da Silva
Prof. Rodolfo Francisco de Oliveira
IAM
1 semestre de 2012

15 de maio de 2012

Aula de Hoje

• Divisão da janela em partes para exibir várias
páginas HTML

• Copiar a pasta p:iam para o seu computador
– Não alterar os arquivos no p: !!

Cada “retângulo” é um arquivo .HTML
diferente, unidos por um arquivo .HTML

<html>
<head>
<title>IAM - Introdução a Multimídia</title>
</head>
<body style="background:black">
<h1 align="center" style="color:white">IAM
- Introdução a Multimídia</h1>
</body>
</html>
Vamos chamar de
iamtitulo.html

<html>
<head>
</head>
<body style="background:#AAFFAA">
<h2 align="center">1 semestre 2012</h2>

<h3>Professores:</h3>
<a href="andreconstantino/index.html">Prof. André
Constantino da Silva</a>
<br>Prof. Rodolfo Oliveira

<h3>Alunos:</h3>
Athos Fernando
<br>Carolina Hoffman
<br>Eduardo Henrique Gomes de Lima
...
<br>Wesley da Silva Santos
</body>
</html> Vamos chamar de
pessoas.html

<html>
<head>
</head>
<body>
<h1 align="center">IAM - Introdução a
Multimídia</h1>
Esta é a página da disciplina de IAM do curso de
Informática do IFSP Campus Hortolândia.
<p>A esquerda você encontra uma lista com o
nome dos professores e dos alunos, com links para suas
páginas pessoais.
</body> Vamos chamar de
</html> principal.html

Mas como eu junto?

Através das tags
<frameset> e <frame>

A Tag <frameset>
• Define um conjunto de molduras, ou seja,
como dividir a janela em molduras

• Você deve definir um conjunto de linhas ou
colunas
– Usar atributo rows ou cols, cujos valores indicam
a percentagem da área da tela que será utilizada

A Tag <frame>
• Define qual página html deverá aparecer em cada
parte (moldura)

• Deve conter uma tag para cada moldura criada

• Atributos:
– name: identificador da moldura
– src: link da página que deve ser exibida naquela
moldura

Exemplo 1
<html>
<head>
<title>Aprendendo a Usar Frames</title>
</head>

<frameset cols="15%,85%">
<frame name =“moldura1” src=""/>
</frameset>

</html>

Exemplo 1
<html>
<head>
</head> O arquivo .html que
cria os frames não
<frameset cols="15%,85%"> contém a tag
<body>!
</frameset>

</html>

Exemplo 1

Cada retângulo é
um frame

O conjunto é um
Exemplo 1 frameset

Exemplo 2
<html>
<head>
</head>

</frameset>
</html>

Exemplo 3
<html>
<head>
</head>

<frameset cols=“33%,33%,33%">
</frameset>
</html>

Exemplo 4
<html>
<head>
</head>

<frameset rows="50%,50%">
<frame name=“moldura1” src=""/>
</frameset>
</html>

Exemplo 5
<html>
<head>
</head>

</frameset>
</html>

E para nossa página inicial, como
podemos fazer?

moldura1 15%

30% 70%

moldura2 moldura3 85%

• Salvar como
index.html

Resposta
Dois conjuntos de
<html>
frameset
<head>
</head>


</frameset>
</frameset>
</html>

Precisamos preencher...

iamtitulo.html

pessoas.html

principal.html


iamtitulo.html


pessoas.html


principal.html

<html>
<head>
</head>
<body style="background:#AAFFAA">
<h2 align="center">1 semestre 2012</h2>

<h3>Professores:</h3>
<a href="andreconstantino/index.html“ target=“moldura3”>Prof. André Constantino
da Silva</a>
<br>Prof. Rodolfo Oliveira

<h3>Alunos:</h3>
Athos Fernando Informamos na tag <a>
<br>Carolina Hoffman
referente ao link o
<br>Eduardo Henrique Gomes de Lima
... nome do frame que a
<br>Wesley da Silva Santos página deve ser
</body> visualizada
</html>

E se eu quiser que o
link apareça em uma
nova página, e não
dentro do frame?

<html>
<head>
</head>
<body>
<h1 align="center">IAM - Introdução a Multimídia</h1>

Esta é a página da disciplina de IAM do curso de Informática do <a
href="http://www.ifsp.edu.br" target="_blank">IFSP</a> Campus
Hortolândia.

<p>A esquerda você encontra uma lista com o nome dos professores
e dos alunos, com links para suas páginas pessoais.
</body>
</html>

Atributos da tag <frameset>
• cols:
– Função?
– Valores?

• rows:
– Função?
– Valores?

• frameborder:
– Define se o navegador deve ou não apresentar borda do
frame
– Valores possíveis: yes , no

Atributos da tag <frame>
• src:
– Função?
– Valores?

• scrolling:
– Define se o navegador deve ou não apresentar a
barra de rolagem para visualizar toda a página
dentro do frame
– Valores possíveis: yes , no, auto

Atributos da tag <frame>
• src:
– Função?
– Valores?

• scrolling: Vamos testar!
– Define se o navegador deve ou não apresentar a
barra de rolagem para visualizar toda a página
dentro do frame
– Valores possíveis: yes , no, auto

Navegador sem suporte a frames
• Navegadores antigos ou de alguns dispositivos
como celulares não suportam frames

• O que fazer?
– Podemos deixar uma mensagem ou página HTML
sem frame através da tag <noframe>

<html>
<head>
</head>
<frameset rows="15%,85%" frameborder="no">
<frame name="moldura1" src="iamtitulo.html"/>
<frameset cols="30%,70%" >
<frame name="moldura2" src="pessoas.html" />
<frame name="moldura3" src="principal.html"/>
</frameset>
<noframe>
<body>
<h2>Bem-vindo à página de IAM!</h2>
<p> Caso deseje ver a lista de professores e
alunos, clique <a href=“pessoas.html”>aqui .</a>
</body>
</noframe>
</frameset>
</html>

A tag <noframe>
• Exibe conteúdo nos navegadores que não
suportam frames

• Possui a tag <body> e pode ter qualquer tag
HTML que já apredemos, inclusive a tag <a>

Considerações
• Frames são úteis para apresentar várias
páginas htmls de uma vez
• Cuidado! Nem sempre a navegação é fácil,
além de problemas para a impressão e a
marcação dos documentos interiores aos
frames nos bookmarks
• Alternativa para os frames são as tabelas

Aula 7 – linguagem HTML - Frames

Mais conteúdo relacionado

Mais procurados

Semelhante a Aula 7 – linguagem HTML - Frames

Mais de André Constantino da Silva

Aula 7 – linguagem HTML - Frames