Aula 7 – linguagem HTML - Frames
Upcoming SlideShare
Loading in...5
×
 

Aula 7 – linguagem HTML - Frames

on

  • 5,327 views

 

Statistics

Views

Total Views
5,327
Views on SlideShare
5,327
Embed Views
0

Actions

Likes
0
Downloads
88
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Aula 7 – linguagem HTML - Frames Aula 7 – linguagem HTML - Frames Presentation Transcript

  • Linguagem HTML: Frames Prof. André Constantino da SilvaProf. 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 .HTMLdiferente, 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 <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 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
  • 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 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
  • 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> 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>
  • Exemplo 1 Cada retângulo é um frame
  • O conjunto é umExemplo 1 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
  • 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>
  • Precisamos preencher...iamtitulo.htmlpessoas.html principal.html
  • Precisamos preencher...iamtitulo.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=""/> <frame name=“moldura3” src=""/> </frameset> </frameset></html>
  • Precisamos preencher...pessoas.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>
  • Precisamos preencher... principal.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>
  • Preenchido!
  • Mas e seeu 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é 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>
  • E se eu clicar aqui?
  • E se eu quiser que olink apareça em uma nova página, e não dentro do frame?
  • <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>
  • 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: 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 ealunos, 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