Linguagem HTML: Frames

Tamanho: px

Começar a partir da página:

Download "Linguagem HTML: Frames"

Igor de Sintra Almeida
6 Há anos
Visualizações:

1 Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 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:!!

3 O que vocês já sabem fazer?

4 Cada retângulo é um arquivo.html diferente, unidos por um arquivo.html

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

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 </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

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> </html> Vamos chamar de principal.html

11 Mas como eu junto?

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 rowsou 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

15 Exemplo 1

16 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>

17 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>

18 Exemplo 1 Cada retângulo é um frame

19 Exemplo 1 O conjunto é um frameset

20 Exemplo 2

21 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>

22 Exemplo 3

23 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>

24 Exemplo 4

25 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>

26 Exemplo 5

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>

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 <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>

32 Precisamos preencher... iamtitulo.html pessoas.html principal.html

33 iamtitulo.html Precisamos preencher...

34 <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>

35 pessoas.html Precisamos preencher...

36 <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>

37 Precisamos preencher... principal.html

38 <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>

39 Preenchido!

40 Mas e se eu clicar aqui?

42 moldura2 moldura3

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 </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

44 E se eu clicar aqui?

46 E se eu quiser que o link apareça em uma nova página, e não dentro do frame?

47 <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=" 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

49 <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>

51 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

52 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

53 yes

54 no

55 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

Documentos relacionados

HTML Página 23. Índice

HTML Página 23. Índice PARTE - 4 HTML Página 23 Índice HTML - Frames... 24 Exemplo:... 24 Parâmetros utilizados para a marcação ... 25 Composições com Frames... 25 Exemplo 1.... 26 Exemplo 4.... 26 Parâmetros que Completam