HTML Molduras Quadros Frame

Programação
Na Web
Molduras HTML
1 António Gonçalves
Agenda
• Vantagens e desvantagens do uso de
molduras
• Modelo de uma FRAME
• Definição de linhas e colunas num
FRAMESET
• Atributos mais utilizados numa FRAME e
FRAMESET
• Molduras encadeadas
• Direccionando um documento para uma
Moldura
http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
2 Molduras
1
Benefícios
• Permite a visibilidade permanente de partes do interface
(por exemplo o índice)
• Evita a necessidade de voltar a mostrar secções comuns a

várias páginas Web
• Permite uma apresentação consistente ao longo de um

portal, o que pode simplificar a sua navegação
• É um meio que facilita a mistura de páginas HTML e applets

Java
• A exposição de mapas de imagens torna-se mais

conveniente se o mapa permanecer no ecran e somente
forem alteradas algumas das suas secções
3 Molduras
Inconvenientes
• A funcionalidade dos botões “para a frente” e “para trás” pode
conduzir a uma certa confusão
• O desenho mal concebido das molduras pode levar a que o

utilizador fique perdido
• É difícil encontrar o URL de uma página

– Podem surgir problemas com a impressão !
• É difícil a marcação de uma página
• Alguns browsers antigos não suportam molduras
• Problemas de segurança
4 Molduras
2
Template
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD><TITLE>Document Title</TITLE></HEAD>
Abertura de
<FRAMESET ...> umaMoldura

<frame src="frame_a.htm">
<frame src="frame_b.htm"> Uma Entrada
por ficheiro
<NOFRAMES> Para Browser que

<BODY> não suportam molduras

</BODY>
</NOFRAMES> DOCTYPE PRÓPRIO
</FRAMESET>
</HTML>
5 Molduras
Define o conteúdo de uma

célula de uma moldura
• SRC
– URL do documento a ser posto na célula da moldura
• NAME
– Indica um ID que pode ser utilizado como destino nas ligações de
hiper texto.
• FRAMEBORDER, BORDERCOLOR
• MARGINWIDTH, MARGINHEIGHT
• SCROLLING
– Indica a existência de elevadores nas células
• NORESIZE
– Indica que as células não podem ser redimensionadas
6 Molduras
3
Molduras
• A Marca <frameset> define como uma janela deve
ser dividida em Molduras.
• Cada frameset define um conjunto de linhas ou

colunas.
• Os atributos de “rows/columns” indicam a quantidade

da janela que cada parte vai ocupar.
7 Molduras
Atributos do FRAMESET
• COLS, ROWS
– Composto por uma lista valores separados por “,”. Os
valores podem ser pixel, percentagens e “*”.
– FRAMESET deve definir pelo menos duas linhas ou
colunas !
– Exemplos:
<FRAMESET ROWS="50,10%,*,2*">
...
</FRAMESET>
<FRAMESET COLS="25%,*,*">
...
</FRAMESET>
8 Molduras
4
Exemplos de linhas em
FRAMESET
<FRAMESET ROWS="50,10%,*,2*">
...
</FRAMESET>
9 Molduras
Atributos do FRAMESET
(Continuação)
• FRAMEBORDER
– Indica se um bordo é ou não visível entre as células das molduras
– YES ou 1; o bordo é visível; NO ou 0; bordo não é visível
– Regra geral é utilizado em conjunto com BORDER=0 e
FRAMESPACING=0
• BORDER (Netscape), FRAMESPACING (IE)

– Indica o espaçamento do bordo entre células
– Só pode ser aplicado a FRAMESET exterior
• BORDERCOLOR
– Atribui a cor ao bordo entre células. Pode ser usado hex RGB ou
nome de cores
10 Molduras
5
Elevadores e Bordos
• Por defeito cada moldura é uma página

independente, que pode possuir um elevador
– O tamanho relativo de uma moldura pode alterado pelo arrastamento

entre bordas
frameborder=1 (default)
<html> frameborder=0 no border

<frameset rows="35%,*" frameborder=0>

<frame src="html23.html"> Permite definir o estado do
<frame src="html24.html">
</frameset> elevador
</html> scrolling="auto" (default)
scrolling="yes" always
scrolling="no" never
11 Molduras
Exemplos de com e sem Bordo
frameborder=1 frameborder=0
12 Molduras
6
Exemplos Do uso de Cores
<html>
<frameset rows="50%,50%
FRAMEBORDER="yes" BORDERCOLOR="yellow">
<frame noresize="true" src="tryhtml_frame_a.htm">
<frameset cols="25%,75%">
<frame noresize="true" src="tryhtml_frame_b.htm">
<frame noresize="true" src="tryhtml_frame_c.htm">
</frameset>
</frameset>
</html>
13 Molduras
Molduras Encadeadas
<HTML>
<HEAD><TITLE>Frame Example 1</TITLE></HEAD> Abertura de
<FRAMESET ROWS="55%,45%"> umaMoldura
<FRAMESET COLS="*,*,*">
<FRAME SRC="Frame-Cell.html">
Abertura de
<FRAME SRC="Frame-Cell.html"> umaMoldura
</FRAMESET>
Abertura de
<FRAMESET COLS="*,*">
umaMoldura
</FRAMESET>
Molduras encadeadas
<NOFRAMES>
<BODY>
Dispostas em Linhas
Your browser does not support frames. Please see
<A HREF="Frame-Cell.html">non-frames version</A>.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML> http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
14 Molduras
7
Molduras Encadeadas (resultado)
15 Molduras
Molduras Encadeadas
<HTML>
<HEAD><TITLE>Frame Example 2</TITLE></HEAD>
<FRAMESET COLS="55%,45%">
<FRAMESET ROWS="*,*,*">
</FRAMESET>
<FRAMESET ROWS="*,*">
</FRAMESET> Molduras encadeadas
<NOFRAMES>
<BODY>
Dispostas em Colunas
Your browser does not support frames. Please see
<A HREF="Frame-Cell.html">nonframes version</A>.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML> http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
16 Molduras
8
Molduras Encadeadas, Resultado
17 Molduras
Navegação numa Moldura

• Indica o lugar que deve ser carregado uma página
referenciada pelo link
• Usar o atributo NAME do FRAME

<FRAME SRC="..." NAME="cellName” ID=“cellName”>
• Usar o atributo TARGET do A HREF

<A HREF="..." TARGET="cellName">
18 Molduras
9
Navegação numa Molduras
<html>

<head>
<title>Menu of Demos</title>
</head>
<html>
 <body>
Links to demo pages
<head>
<title>Demo Browser</title> <p>
</head> <a href="html01.html"
target="main">html 1</a><br>
<frameset cols="30%,*"> <a href="html02.html"
<frame src="menu28.html" name="menu” target ="main">html 2</a><br>
id=“menu”> <a href="html03.html"
<frame src="html01.html" name="main” target ="main">html 3</a><br>
id=“main”> <a href="html04.html"
</frameset> target ="main">html 4</a><br>
</html> <a href="html05.html"
target ="main">html 5</a><br>
<a href="html06.html"
target ="main">html 6</a>
</p>
view page in browser </body>
</html> http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
19 Molduras
Navegação em Molduras
Frame
TOC.HTML
Frame
INTRODUCTION.HTML
20 Molduras
10
Cold-Fusion.html
<HTML>
<HEAD>
<TITLE>Investing in Cold Fusion</TITLE>
</HEAD>
<FRAMESET ROWS="75,*">
<FRAME SRC="TOC.html" NAME="TOC">
<FRAME SRC="Introduction.html" NAME="Main">
<NOFRAMES>
<BODY>
This page requires Frames. For a non-Frames version,
<A HREF="Introduction.html">the introduction</A>.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
21 Molduras
TOC.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Table of Contents</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="100%">
<TR><TH><A HREF="Introduction.html" TARGET="Main">
Introduction</A></TH>
<TH><A HREF="Potential.html" TARGET="Main">
Potential</A></TH>
<TH><A HREF="Investing.html" TARGET="Main">
Investing</A></TH>
<TH><A HREF="References.html" TARGET="Main">
References</A></TH></TR>
</TABLE>
</BODY>
</HTML>
22 Molduras
11
Exemplo, Resultados
23 Molduras
Nomes de Molduras predefinidas

• _blank
– Carrega documento numa nova janela do browser
• _top
– Carrega documento na janela do browser
– O documento não fica armazenado na célula
• _parent
– Carrega documento no FRAMESET pai
– O mesmo efeito que _top se não existir molduras
encadeadas
• _self
– Carrega documento na célula corrente
24 Molduras
12
Sair das Molduras
•Existem situações que é <html>
necessário sair de uma moldura 
<head>
<title>Menu of Demos</title>
– Para indicar ”_top" como </head>
TARGET <body>
Links to demo pages <p>
<a href="html01.html”
target="main">html 1</a><br>
<html> <a href="html02.html"
 target="main">html 2</a><br>
<head> target="main">html 3</a><br>
<title>Demo Browser</title> <a href="html04.html"
</head> target="main">html 4</a><br>
<frameset cols="30%,*"> target="main">html 5</a><br>
<frame src="menu29.html" <a href="html06.html#C7 "
name="menu"> target="main">html 6</a><br>
<frame src="html01.html" <br>
name="main"> <a href="http://www.creighton.edu"
</frameset> target="_top">Creighton</a>
</p>
</html> </body>
</html>
25 Molduras
Exemplo: html06.html
<html>
<body>
<a name="C1"><h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>





</body>
</html> http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
26 Molduras
13
Uso de IFRAME
<html>
<body>
<iframe
src ="default.asp" SCROLLING="yes">
</iframe>
<p>Some older browsers don't support iframes.</p>

<p>If they don't, the iframe will not be visible.</p>
</body>
</html>
27 Molduras
Sumário
• As Molduras exigem o uso de um DOCTYPE especial para ser

possível a sua validação
• Uma FRAMESET pode ser dividida em colunas ou linhas

– Para poder-se utilizar em simultâneo colunas e linhas é necessário usar
FRAMESET encadeadas
• Ao ser associado um nome a uma FRAME é possível carregar um

documento numa celula
– <FRAME … NAME="…">
– <A HREF="…" TARGET="…">
• Existe quatro nomes de molduras predefinidas

– _blank, _top, _parent, and _self
28 Molduras
14

HTML Molduras Quadros Frame

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Molduras Quadros Frame

Uploaded by

Copyright:

Available Formats

Programação

• Evita a necessidade de voltar a mostrar secções comuns a

• Permite uma apresentação consistente ao longo de um

• É um meio que facilita a mistura de páginas HTML e applets

• A exposição de mapas de imagens torna-se mais

• O desenho mal concebido das molduras pode levar a que o

• É difícil encontrar o URL de uma página

• É difícil a marcação de uma página

• Alguns browsers antigos não suportam molduras

<NOFRAMES> Para Browser que

Define o conteúdo de uma

• Cada frameset define um conjunto de linhas ou

• Os atributos de “rows/columns” indicam a quantidade

• BORDER (Netscape), FRAMESPACING (IE)

• Por defeito cada moldura é uma página

– O tamanho relativo de uma moldura pode alterado pelo arrastamento

<frameset rows="35%,*" frameborder=0>

Exemplos de com e sem Bordo

<frame noresize="true" src="tryhtml_frame_a.htm">

<frame noresize="true" src="tryhtml_frame_b.htm">

<frame noresize="true" src="tryhtml_frame_c.htm">

Navegação numa Moldura

• Usar o atributo NAME do FRAME

• Usar o atributo TARGET do A HREF

Nomes de Molduras predefinidas

<a name="C2"><h2>Chapter 2</h2>

<a name="C3"><h2>Chapter 3</h2>

<a name="C4"><h2>Chapter 4</h2>

<a name="C5"><h2>Chapter 5</h2>

<a name="C6"><h2>Chapter 6</h2>

<p>Some older browsers don't support iframes.</p>

• As Molduras exigem o uso de um DOCTYPE especial para ser

• Uma FRAMESET pode ser dividida em colunas ou linhas

• Ao ser associado um nome a uma FRAME é possível carregar um

• Existe quatro nomes de molduras predefinidas

You might also like