aula 7 – linguagem html - frames
DESCRIPTION
TRANSCRIPT
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: !!
<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>
<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
<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>
</html>Vamos chamar de
principal.html
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=""/>
<frame name =“moldura2” src=""/>
</frameset>
</html>
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>
O arquivo .html que
cria os frames não
contém a tag
<body>!
Exemplo 2
<html>
<head>
<title>Aprendendo a Usar Frames</title>
</head>
<frameset cols="60%,40%">
<frame name =“moldura1” src=""/>
<frame name =“moldura2” src=""/>
</frameset>
</html>
Exemplo 3
<html>
<head>
<title>Aprendendo a Usar Frames</title>
</head>
<frameset cols=“33%,33%,33%">
<frame name =“moldura1” src=""/>
<frame name =“moldura2” src=""/>
<frame name =“moldura3” src=""/>
</frameset>
</html>
Exemplo 4
<html>
<head>
<title>Aprendendo a Usar Frames</title>
</head>
<frameset rows="50%,50%">
<frame name=“moldura1” src=""/>
<frame name=“moldura2” src=""/>
</frameset>
</html>
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>
<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>
E para nossa página inicial, como
podemos fazer?
• Salvar como index.html
15%
85%
30% 70%
moldura1
moldura3moldura2
Resposta
<html>
<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>
Dois conjuntos de
frameset
<html>
<head>
<title>Aprendendo a Usar Frames</title>
</head>
<frameset rows="15%,85%">
<frame name=“moldura1” src="iamtitulo.html"/>
<frameset cols="30%,70%">
<frame name=“moldura2” src=""/>
<frame name=“moldura3” src=""/>
</frameset>
</frameset>
</html>
<html>
<head>
<title>Aprendendo a Usar Frames</title>
</head>
<frameset rows="15%,85%">
<frame name=“moldura1” src="iamtitulo.html"/>
<frameset cols="30%,70%">
<frame name=“moldura2” src=“pessoas.html"/>
<frame name=“moldura3” src=""/>
</frameset>
</frameset>
</html>
<html>
<head>
<title>Aprendendo a Usar Frames</title>
</head>
<frameset rows="15%,85%">
<frame name=“moldura1” src="iamtitulo.html"/>
<frameset cols="30%,70%">
<frame name=“moldura2” src=“pessoas.html"/>
<frame name=“moldura3” src="principal.html” />
</frameset>
</frameset>
</html>
<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
<br>Carolina Hoffman
<br>Eduardo Henrique Gomes de Lima
...
<br>Wesley da Silva Santos
</body>
</html>
Informamos na tag <a>
referente ao link o
nome do frame que a
página deve ser
visualizada
<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>
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
<html>
<head>
<title>Aprendendo a Usar Frames</title>
</head>
<frameset rows="15%,85%">
<frame name=“moldura1” src="iamtitulo.html“ frameborder=“no”/>
<frameset cols="30%,70%">
<frame name=“moldura2” src=“pessoas.html"/>
<frame name=“moldura3” src="principal.html “/>
</frameset>
</frameset>
</html>
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:
– 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
Vamos testar!
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>
<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>
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>