[1] O documento apresenta uma aula sobre a tag HTML <frameset> para dividir a janela do navegador em partes e exibir vários arquivos HTML simultaneamente.
[2] São mostrados exemplos de código HTML utilizando a tag <frameset> para dividir a janela em linhas, colunas ou grade, e a tag <frame> para especificar qual página HTML será exibida em cada parte.
[3] É explicado como criar um arquivo index.html com dois conjuntos de <frameset> aninhados para dividir a janela do
1. Linguagem HTML:
Frames
Prof. André Constantino da Silva
Prof. Rodolfo Francisco de Oliveira
IAM
1 semestre de 2012
15 de maio de 2012
2. 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: !!
4. Cada “retângulo” é um arquivo .HTML
diferente, unidos por um arquivo .HTML
5.
6. <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
7.
8. <html>
<head>
<title>IAM - Introdução a Multimídia</title>
</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
9.
10. <html>
<head>
<title>IAM - Introdução a Multimídia</title>
</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
12. Mas como eu junto?
Através das tags
<frameset> e <frame>
13. 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
14. 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
16. Exemplo 1
<html>
<head>
<title>Aprendendo a Usar Frames</title>
</head>
<frameset cols="15%,85%">
<frame name =“moldura1” src=""/>
<frame name =“moldura2” src=""/>
</frameset>
</html>
17. Exemplo 1
<html>
<head>
<title>Aprendendo a Usar Frames</title>
</head> O arquivo .html que
cria os frames não
<frameset cols="15%,85%"> contém a tag
<body>!
<frame name =“moldura1” src=""/>
<frame name =“moldura2” src=""/>
</frameset>
</html>
27. Exemplo 5
<html>
<head>
<title>Aprendendo a Usar Frames</title>
</head>
<frameset rows="20%,80%">
<frame name =“moldura1” src=""/>
<frame name =“moldura2” src=""/>
</frameset>
</html>
28.
29. <html>
<head>
<title>Aprendendo a Usar Frames</title>
</head>
<frameset rows="33%,33%,33%"
cols="33%,33%,33%">
<frame name ="moldura1" src=""/>
<frame name ="moldura2" src=""/>
<frame name ="moldura3" src=""/>
<frame name ="moldura4" src=""/>
<frame name ="moldura5" src=""/>
<frame name ="moldura6" src=""/>
<frame name ="moldura7" src=""/>
<frame name ="moldura8" src=""/>
<frame name ="moldura9" src=""/>
</frameset>
</html>
30. E para nossa página inicial, como
podemos fazer?
moldura1 15%
30% 70%
moldura2 moldura3 85%
• Salvar como
index.html
31. Resposta
Dois conjuntos de
<html>
frameset
<head>
<title>Aprendendo a Usar Frames</title>
</head>
<frameset rows="15%,85%">
<frame name =“moldura1” src=""/>
<frameset cols="30%,70%">
<frame name =“moldura2” src=""/>
<frame name =“moldura3” src=""/>
</frameset>
</frameset>
</html>
43. <html>
<head>
<title>IAM - Introdução a Multimídia</title>
</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>
46. E se eu quiser que o
link apareça em uma
nova página, e não
dentro do frame?
47. <html>
<head>
<title>IAM - Introdução a Multimídia</title>
</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>
48. 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
51. 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
52. 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
56. 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>
57. <html>
<head>
<title>Aprendendo a Usar Frames</title>
</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>
58. 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>
59. 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