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:!!
O que vocês já sabem fazer?
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> <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 </html> <h3>alunos:</h3> Athos Fernando <br>carolina Hoffman <br>eduardo Henrique Gomes de Lima... <br>wesley da Silva Santos </body> 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
Mas como eu junto?
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 rowsou 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
Exemplo 1 <html> <head> <title>aprendendo a Usar Frames</title> </head> </html> <frameset cols="15%,85%"> <frame name = moldura1 src=""/> <frame name = moldura2 src=""/> </frameset>
Exemplo 1 <html> <head> </html> <title>aprendendo a Usar Frames</title> </head> O arquivo.html que cria os frames não <frameset cols="15%,85%"> contém a tag <frame name = moldura1 src=""/> <body>! <frame name = moldura2 src=""/> </frameset>
Exemplo 1 Cada retângulo é um frame
Exemplo 1 O conjunto é um frameset
Exemplo 2
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
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
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
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? moldura1 15% 30% 70% moldura2 moldura3 85% Salvar como index.html
<html> Resposta <head> <title>aprendendo a Usar Frames</title> </head> Dois conjuntos de frameset <frameset rows="15%,85%"> <frame name = moldura1 src=""/> </html> <frameset cols="30%,70%"> <frame name = moldura2 src=""/> <frame name = moldura3 src=""/> </frameset> </frameset>
Precisamos preencher... iamtitulo.html pessoas.html principal.html
iamtitulo.html Precisamos preencher...
<html> <head> <title>aprendendo a Usar Frames</title> </head> <frameset rows="15%,85%"> <frame name= moldura1 src="iamtitulo.html"/> </html> <frameset cols="30%,70%"> <frame name= moldura2 src=""/> <frame name= moldura3 src=""/> </frameset> </frameset>
pessoas.html Precisamos preencher...
<html> <head> </head> <title>aprendendo a Usar Frames</title> <frameset rows="15%,85%"> <frame name= moldura1 src="iamtitulo.html"/> </html> <frameset cols="30%,70%"> <frame name= moldura2 src= pessoas.html"/> <frame name= moldura3 src=""/> </frameset> </frameset>
Precisamos preencher... principal.html
<html> <head> </head> <title>aprendendo a Usar Frames</title> <frameset rows="15%,85%"> <frame name= moldura1 src="iamtitulo.html"/> </html> <frameset cols="30%,70%"> <frame name= moldura2 src= pessoas.html"/> <frame name= moldura3 src="principal.html /> </frameset> </frameset>
Preenchido!
Mas e se eu clicar aqui?
moldura2 moldura3
<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 </html> <h3>alunos:</h3> Athos Fernando <br>carolina Hoffman <br>eduardo Henrique Gomes de Lima... <br>wesley da Silva Santos </body> Informamos na tag <a> referente ao link o nome do frame que a página deve ser visualizada
E se eu clicar aqui?
E se eu quiser que o link apareça em uma nova página, e não dentro do frame?
<html> <head> </head> <body> <title>iam - Introdução a Multimídia</title> <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> </head> <title>aprendendo a Usar Frames</title> <frameset rows="15%,85%"> <frame name= moldura1 src="iamtitulo.html frameborder= no /> </html> <frameset cols="30%,70%"> <frame name= moldura2 src= pessoas.html"/> <frame name= moldura3 src="principal.html /> </frameset> </frameset>
src: Função? Valores? Atributos da tag <frame> 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
src: Função? Valores? scrolling: Atributos da tag <frame> 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
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> <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>
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