Aula 7 – linguagem HTML - Frames

6,581 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,581
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
181
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Aula 7 – linguagem HTML - Frames

  1. 1. Linguagem HTML: Frames Prof. André Constantino da SilvaProf. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de maio de 2012
  2. 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: !!
  3. 3. O que vocês já sabem fazer?
  4. 4. Cada “retângulo” é um arquivo .HTMLdiferente, unidos por um arquivo .HTML
  5. 5. <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
  6. 6. <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
  7. 7. <html> <head> <title>IAM - Introdução a Multimídia</title> </head> <body> <h1 align="center">IAM - Introdução aMultimídia</h1> Esta é a página da disciplina de IAM do curso deInformática do IFSP Campus Hortolândia. <p>A esquerda você encontra uma lista com onome dos professores e dos alunos, com links para suaspáginas pessoais. </body> Vamos chamar de</html> principal.html
  8. 8. Mas como eu junto?
  9. 9. Mas como eu junto? Através das tags <frameset> e <frame>
  10. 10. 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
  11. 11. 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
  12. 12. Exemplo 1
  13. 13. 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>
  14. 14. 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>
  15. 15. Exemplo 1 Cada retângulo é um frame
  16. 16. O conjunto é umExemplo 1 frameset
  17. 17. Exemplo 2
  18. 18. 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>
  19. 19. Exemplo 3
  20. 20. 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>
  21. 21. Exemplo 4
  22. 22. 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>
  23. 23. Exemplo 5
  24. 24. 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>
  25. 25. <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>
  26. 26. E para nossa página inicial, como podemos fazer? moldura1 15% 30% 70%moldura2 moldura3 85% • Salvar como index.html
  27. 27. 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>
  28. 28. Precisamos preencher...iamtitulo.htmlpessoas.html principal.html
  29. 29. Precisamos preencher...iamtitulo.html
  30. 30. <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>
  31. 31. Precisamos preencher...pessoas.html
  32. 32. <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>
  33. 33. Precisamos preencher... principal.html
  34. 34. <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>
  35. 35. Preenchido!
  36. 36. Mas e seeu clicar aqui?
  37. 37. moldura2 moldura3
  38. 38. <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é Constantinoda 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>
  39. 39. E se eu clicar aqui?
  40. 40. E se eu quiser que olink apareça em uma nova página, e não dentro do frame?
  41. 41. <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 <ahref="http://www.ifsp.edu.br" target="_blank">IFSP</a> CampusHortolândia. <p>A esquerda você encontra uma lista com o nome dos professorese dos alunos, com links para suas páginas pessoais.</body></html>
  42. 42. 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
  43. 43. <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>
  44. 44. 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
  45. 45. 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
  46. 46. yes
  47. 47. no
  48. 48. auto
  49. 49. 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>
  50. 50. <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 ealunos, clique <a href=“pessoas.html”>aqui .</a> </body> </noframe> </frameset></html>
  51. 51. 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>
  52. 52. 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

×