linguagem html: frames - wordpress.com · 2013. 9. 2. · linguagem html: frames prof. andré...

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>


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


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


</frameset>

</html>

Exemplo 1

<html>

<head>


</head>




</frameset>

</html>

O arquivo .html que

cria os frames não

contém a tag

<body>!

Exemplo 1

Cada retângulo é

um frame

Exemplo 1 O conjunto é um

frameset

Exemplo 2

Exemplo 2

<html>

<head>


</head>




</frameset>

</html>

Exemplo 3

Exemplo 3

<html>

<head>


</head>

<frameset cols=“33%,33%,33%">




</frameset>

</html>

Exemplo 4

Exemplo 4

<html>

<head>


</head>

<frameset rows="50%,50%">

<frame name=“moldura1” src=""/>


</frameset>

</html>

Exemplo 5

Exemplo 5

<html>

<head>


</head>




</frameset>

</html>

E para nossa página inicial, como

podemos fazer?

• Salvar como index.html

15%

85%

30% 70%

moldura1

moldura3moldura2

Resposta

<html>

<head>


</head>






</frameset>

</frameset>

</html>

Dois conjuntos de

frameset

Precisamos preencher...

iamtitulo.html

pessoas.html

principal.html


iamtitulo.html


pessoas.html


principal.html

Preenchido!

Mas e se

eu clicar

aqui?

moldura2 moldura3

<html>

<head>


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

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>

<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

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>


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

linguagem html: frames - wordpress.com · 2013. 9. 2. · linguagem html: frames prof. andré...

Documents