AulaFrameRevisao

(1)

Frames

Prof. Larissa Natália V. Carneiro carneiroln@gmail.com

(2)

Frame

Importante para organização.

Melhor estruturação da página. Aspecto mais profissional.

(3)

Frame

Definição: é um arquivo onde se define a estrutura das janelas para o seu

hiperdocumento em HTML.

Quantos serão e distribuição em tela.

Permite colocar mais de uma página Web em uma mesma janela do navegador.

(4)

funcionamento

Requer um planejamento prévio. Criação da estrutura dos frames:

especifica a quantidade; a disposição em tela;

largura e altura; conteúdo.

(5)

Funcionamento

É dividido em duas etapas:

primeira - cria o layout dos frames; segunda - define o conteúdo.

(6)

funcionamento

Exige a criação de um documento HTML especial.

Documento mestre com todas as definições dos frames.

Não utiliza os comandos <BODY> e </ BODY>.

(7)

Comando

Entre os comando são especificados todos os atributos.

Defini as características gerais dos frames

(quantidade; disposição horizontal; disposição vertical)

(8)

Comando

<FRAME> </FRAME> Especifica cada frame.

(9)

Estrutura mínima do

frame document

(10)

Atributos Frameset

ROWS:

<frameset rows = “valor, valor, valor...”> defini divisões horizontais;

acompanhado de valores que definem quanto da janela irá ocupar.

(11)

tipos de valores

Numérico - pixels => (ROWS = “30, 50”): refere-se a quantidade de pixels de cada frame;

desvantagem - falta de controle do valor total de pixels que o cliente do usuário compreende.

(12)

Tipos de valores

Percentual => (ROWS=”25%, 25%, 50%”): mais simples;

porcentagem da tela que irá ocupar; somatório igual a 100%.

(13)

Tipos de valores

Relativo => (ROWS = “2*,*”):

defini um valor relativo entre-se;

ex. o primeiro ocupa dois terços e o segundo um terço.

(14)

Exemplo 1

(15)

Exemplo 1: três janelas

horizontais, sendo a do meio

mais larga

(16)

Exemplo 2

(17)

Exemplo 2: três janelas

horizontais,primeira e última

com tamanho fixo.

(18)

Atributos Frameset

COLS:

<frameset cols = “valor, valor, valor...”> defini divisões verticais;

acompanhado de valores que definem quanto da janela irá ocupar;

(19)

Exemplo 3

(20)

Exemplo 3: três janelas

verticais.

(21)

Exemplo 4

(22)

Exemplo 4: três janelas

verticais, sendo a primeira e a

segunda de tamanho fixo.

(23)

Frame

Define cada janela contida no frameset. Não necessita de finalização </frame>. Possui 6 atributos possíveis.

(24)

Atributos Frame

SCR = “URL”:

define a URL que será exibida. NAME = “nome_da_janela”

associa um nome a uma janela;

deve ser usado quando o link for direcionado para outra janela;

opcional;

(25)

Atributos Frame

MARGINWIDTH = “valor”:

controla as margens esquerda e direita; valor associado é absoluto (pixel);

menor valor aceito é 1;

(26)

Atributos Frame

SCROLLING = “yes/no/auto”: defini a barra de rolagem;

yes - sempre haverá barra de rolagem; no - nunca haverá barra de roalgem;

auto - haverá barra de rolagem quando necessário;

(27)

Atributos Frame

NORESIZE:

não possui valor associado;

permiti o usuário alterar o tamanho da tabela; arrasta a borda da janela com o cursor;

opcional;

(28)

Exemplo 5

(29)

Noframes

Possibilita criar uma opção de navegação na página.

É utilizada para browser que não entende frames.

(30)

Noframes

É utilizadas em pares:

<noframe> ...conteúdo... </noframes> . Dentro da área “noframe” é utilizado a

estrutura padrão de HTML:

<head> </head>, <title> </title>, <body> </body>, etc...

(31)

Noframes

O que acontece com quando o browser entende o que é frames??

(32)

Noframes

O que acontece com quando o browser entende o que é frames??

será ignorada como acontece com comentários nos códigos.

(33)

Exemplo 6

<html>

<head> <title>Teste, uso de frames</title> </head> <FRAMESET ROWS="15%, 85%">

<body bgcolor="#000000" text="#ffff00" link="#ff0000" > Bem-vindo a uma

página de teste.<p> Para acessá-la, você deve utilizar a versão 2.0 ou acima do <i>browser</i><a href="http://home.netscape.com/comprod/mirror/

index.html"> Netscape Navigator!</a> </p> <hr> </body> </NOFRAMES> <FRAMESET COLS="25%, 75%">

(34)

Exemplo 6: para o browser

que não lê frames

(35)

Exemplo 6: para o

(36)

Intercalar frames

É possível utilizar a divisão da página em linhas e colunas ao mesmo tempo.

(37)

Exemplo 7

<html>

<head> <title>Título</title> </head> <frameset rows="30%, 70%"> <frameset cols="33%, 33%, 33%"> <frame src=""> <frame src=""> <frame src=""> </frameset> <frameset cols="50%, 50%"> <frame src=""> <frame src=""> </frameset>

(38)

Exemplo 7: múltiplas

janelas.

(39)

Exemplo 8

<html>

(40)

Exemplo 8: múltiplas

janelas.

(41)

Links entre frames

TARGET:

permite controlar em qual janela o link será exibido;

deve-se atribuir um “name” a cada “frame document” (name=”valor”);

onde será criado o link adicionar a marcação target = “valor”

(42)

Exemplo 9: links entre

frames.

(43)

Exemplo 9 - frame document

<html>

<head> <title>Título</title></head> <frameset rows="80%, 20%">

</frameset> </html>

(44)

Exemplo 9 - barra.html

<html>

<head><title>Título</title> </head> <body>

(45)

Iframe

Consiste na inserção de páginas Web dentro de páginas Web.

Não confundir com frames (divisões da mesma página em seções).

(46)

Atributos IFrame

SCROLLING = “yes/no/auto”: defini a barra de rolagem;

yes - sempre haverá barra de rolagem; no - nunca haverá barra de roalgem;

auto - haverá barra de rolagem quando necessário;

(47)

Atributos iframe

SCR = “URL”:

define a URL que será exibida. WIDTH = “valor”:

defini a largura em que será exibida a URL. HEIGTH = “valor””

(48)

Atributos Frame

MARGINWIDTH = “valor”:

controla as margens esquerda e direita; valor associado é absoluto (pixel);

(49)

Atributos Frame

MARGINHEIGHT = “valor”:

controla as margens a cima e a baixo; valor associado é absoluto (pixel);

(50)

Iframe

(51)

exercício 1

Neste exercício tem dois frames. O frame verde possui 3 links. Quando clicar em um dos links, a página .html correspondente, deverá ser

(52)

Exercício 2

(53)

Exercício 3

Criar uma página chamada Exercicio3.html e crie frames com o seguinte layout:

(54)

exercício 3

Executar os seguintes passos:

criar 3 páginas com os seguintes nomes: menu.html, rodapé.html e principal.html;

Na página onde será montado os frames (Exercicio3.html) monte o frame a seguir:

-menu: frame com tamanho de 90% que deverá chamar a página menu.html

-rodape: frame com tamanho de 10% que deverá chamar a página rodape.html

-principal: frame com tamanho de 80% que deverá chamar a página principal.html

(55)

exercício 3

no menu coloque 4 links para os exercícios que fizemos até agora. Olhe o exemplo acima;

no rodapé coloque um link que chame a tela principal.