Professional Documents
Culture Documents
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)
http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
3 Molduras
Inconvenientes
• A funcionalidade dos botões “para a frente” e “para trás” pode
conduzir a uma certa confusão
• Problemas de segurança
http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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 and Nested FRAMESET Entries -->
<frame src="frame_a.htm">
<frame src="frame_b.htm"> Uma Entrada
por ficheiro
</FRAMESET>
</HTML>
http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
5 Molduras
• SCROLLING
– Indica a existência de elevadores nas células
• NORESIZE
– Indica que as células não podem ser redimensionadas
http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
6 Molduras
3
Molduras
• A Marca <frameset> define como uma janela deve
ser dividida em Molduras.
http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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>
http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
8 Molduras
4
Exemplos de linhas em
FRAMESET
<FRAMESET ROWS="50,10%,*,2*">
...
</FRAMESET>
http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
10 Molduras
5
Elevadores e Bordos
scrolling="no" never
http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
11 Molduras
frameborder=1 frameborder=0
http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
12 Molduras
6
Exemplos Do uso de Cores
<html>
<frameset rows="50%,50%
FRAMEBORDER="yes" BORDERCOLOR="yellow">
<frameset cols="25%,75%">
</frameset>
</frameset>
</html>
http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
13 Molduras
Molduras Encadeadas
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD><TITLE>Frame Example 1</TITLE></HEAD> Abertura de
<FRAMESET ROWS="55%,45%"> umaMoldura
<FRAMESET COLS="*,*,*">
<FRAME SRC="Frame-Cell.html">
<FRAME SRC="Frame-Cell.html">
Abertura de
<FRAME SRC="Frame-Cell.html"> umaMoldura
</FRAMESET>
Abertura de
<FRAMESET COLS="*,*">
umaMoldura
<FRAME SRC="Frame-Cell.html">
<FRAME SRC="Frame-Cell.html">
</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)
http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
15 Molduras
Molduras Encadeadas
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD><TITLE>Frame Example 2</TITLE></HEAD>
<FRAMESET COLS="55%,45%">
<FRAMESET ROWS="*,*,*">
<FRAME SRC="Frame-Cell.html">
<FRAME SRC="Frame-Cell.html">
<FRAME SRC="Frame-Cell.html">
</FRAMESET>
<FRAMESET ROWS="*,*">
<FRAME SRC="Frame-Cell.html">
<FRAME SRC="Frame-Cell.html">
</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
http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
17 Molduras
http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
18 Molduras
9
Navegação numa Molduras
<html>
<!-- menu28.html -->
<head>
<title>Menu of Demos</title>
</head>
<html>
<!-- Dave Reed html28.html 1/22/02 --> <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
http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
20 Molduras
10
Cold-Fusion.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<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>
http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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>
http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
22 Molduras
11
Exemplo, Resultados
http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
23 Molduras
http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
24 Molduras
12
Sair das Molduras
•Existem situações que é <html>
necessário sair de uma moldura <!-- menu29.html -->
<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"
<!-- html29.html --> target="main">html 2</a><br>
<a href="html03.html"
<head> target="main">html 3</a><br>
<title>Demo Browser</title> <a href="html04.html"
</head> target="main">html 4</a><br>
<a href="html05.html"
<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>
http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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>
</body>
</html>
http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
27 Molduras
Sumário
http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
28 Molduras
14