HTML Molduras Quadros Frame

1

1 António Gonçalves

ProgramaçãoNa Web

Molduras HTML

Molduras2http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm

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

2


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 appletsJava

• 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


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

3


Template<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"><HTML><HEAD><TITLE>Document Title</TITLE></HEAD>

<FRAMESET ...><frame src="frame_a.htm"> <frame src="frame_b.htm">

<NOFRAMES><BODY>

</BODY>

</NOFRAMES>

</FRAMESET></HTML>

DOCTYPE PRÓPRIO

Para Browser que não suportam molduras

Abertura deumaMoldura

Uma Entrada por ficheiro


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

4


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.


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>

5


Exemplos de linhas em FRAMESET <FRAMESET ROWS="50,10%,*,2*">

...</FRAMESET>


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

6


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)

frameborder=0 no border

Permite definir o estado do elevadorscrolling="auto" (default)

scrolling="yes" always

scrolling="no" never

<html>

<frameset rows="35%,*" frameborder=0><frame src="html23.html"><frame src="html24.html">

</frameset>

</html>


Exemplos de com e sem Bordo

frameborder=0frameborder=1

7


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>


Molduras Encadeadas<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"><HTML><HEAD><TITLE>Frame Example 1</TITLE></HEAD><FRAMESET ROWS="55%,45%"><FRAMESET COLS="*,*,*"><FRAME SRC="Frame-Cell.html"><FRAME SRC="Frame-Cell.html"><FRAME SRC="Frame-Cell.html">

</FRAMESET>

<FRAMESET COLS="*,*"><FRAME SRC="Frame-Cell.html"><FRAME SRC="Frame-Cell.html">

</FRAMESET>

<NOFRAMES><BODY>Your browser does not support frames. Please see<A HREF="Frame-Cell.html">non-frames version</A>.

</BODY></NOFRAMES>

</FRAMESET></HTML>




Molduras encadeadas

Dispostas em Linhas

8


Molduras Encadeadas (resultado)


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><NOFRAMES><BODY>Your browser does not support frames. Please see<A HREF="Frame-Cell.html">nonframes version</A>.

</BODY></NOFRAMES>

</FRAMESET></HTML>

Molduras encadeadas

Dispostas em Colunas

9


Molduras Encadeadas, Resultado


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

10


Navegação numa Molduras

<html>

<head><title>Demo Browser</title>

</head>

<frameset cols="30%,*"><frame src="menu28.html" name="menu”

id=“menu”><frame src="html01.html" name="main”

id=“main”></frameset></html>

<html>

<head><title>Menu of Demos</title>

</head>

<body>Links to demo pages

<p><a href="html01.html"

target="main">html 1</a><br><a href="html02.html"

target ="main">html 2</a><br><a href="html03.html"




target ="main">html 6</a></p></body></html>

view page in browser


Navegação em Molduras

Frame TOC.HTML

Frame INTRODUCTION.HTML

11


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>


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>

12


Exemplo, Resultados


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

13


Sair das Molduras

•Existem situações que é necessário sair de uma moldura

– Para indicar ”_top" comoTARGET

<html>

<head><title>Demo Browser</title>

</head>

<frameset cols="30%,*"><frame src="menu29.html"

name="menu"><frame src="html01.html"

name="main"></frameset>

</html>

<html><head>

<title>Menu of Demos</title></head><body>Links to demo pages <p><a href="html01.html”





target="main">html 5</a><br><a href="html06.html#C7 "

target="main">html 6</a><br><br><a href="http://www.creighton.edu"

target="_top">Creighton</a></p></body></html>


Exemplo: html06.html

<html> <body><a name="C1"><h2>Chapter 1</h2><p>This chapter explains ba bla bla</p>

<a name="C2"><h2>Chapter 2</h2><p>This chapter explains ba bla bla</p>





</body> </html>

14


Uso de IFRAME<html><body>

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


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

HTML Molduras Quadros Frame

Documents

Transcript of HTML Molduras Quadros Frame