Programação Na Web 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 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 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 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
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 <NOFRAMES> <BODY> Para Browser que não suportam molduras <!-- Stuff for non-frames browsers --> </BODY> </NOFRAMES> DOCTYPE PRÓPRIO 5 </HTML> 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
A Marca <frameset> define como uma janela deve ser dividida em. 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 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 COLS="25%,*,*">... 8
Exemplos de linhas em FRAMESET <FRAMESET ROWS="50,10%,*,2*">... 9 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
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 <!-- SEM MOLDURA --> frameborder=1 frameborder=0 (default) no border <frameset rows="35%,*" frameborder=0> <frame src="html23.html"> <frame src="html24.html"> </frameset> Permite definir o estado do elevador scrolling="auto" scrolling="yes" (default) always scrolling="no" never 11 Exemplos de com e sem Bordo frameborder=1 frameborder=0 12
Exemplos Do uso de Cores <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> 13 Encadeadas 14 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD><TITLE>Frame Example 1</TITLE></HEAD> <FRAMESET ROWS="55%,45%"> <FRAMESET COLS="*,*,*"> <FRAMESET COLS="*,*"> <NOFRAMES> <BODY> Your browser does not support frames. Please see <A HREF="Frame-Cell.html">non-frames version</a>. </BODY> </NOFRAMES> </HTML> Abertura de umamoldura Abertura de umamoldura Abertura de umamoldura encadeadas Dispostas em Linhas
Encadeadas (resultado) 15 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="*,*,*"> 16 <FRAMESET ROWS="*,*"> <NOFRAMES> <BODY> Your browser does not support frames. Please see <A HREF="Frame-Cell.html">nonframes version</a>. </BODY> </NOFRAMES> </HTML> encadeadas Dispostas em Colunas
Encadeadas, Resultado 17 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
Navegação numa <!-- menu28.html --> 19 <!-- Dave Reed html28.html 1/22/02 --> <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> view page in browser <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 3</a><br> <a href="html04.html" target ="main">html 4</a><br> <a href="html05.html" target ="main">html 5</a><br> <a href="html06.html" target ="main">html 6</a> </p> </body> Navegação em Frame TOC.HTML Frame INTRODUCTION.HTML 20
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> </HTML> 21 TOC.html 22 <!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>
Exemplo, Resultados 23 Nomes de 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
Sair das 25 Existem situações que é necessário sair de uma moldura Para indicar _top" como TARGET <!-- html29.html --> <head> <title>demo Browser</title> </head> <frameset cols="30%,*"> <frame src="menu29.html" name="menu"> <frame src="html01.html" name="main"> </frameset> <!-- menu29.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 3</a><br> <a href="html04.html" target="main">html 4</a><br> <a href="html05.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> Exemplo: html06.html 26 <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> <a name="c3"><h2>chapter 3</h2> <p>this chapter explains ba bla bla</p> <a name="c4"><h2>chapter 4</h2> <p>this chapter explains ba bla bla</p> <a name="c5"><h2>chapter 5</h2> <p>this chapter explains ba bla bla</p> <a name="c6"><h2>chapter 6</h2> <p>this chapter explains ba bla bla</p> </body>
Uso de IFRAME <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> 27 Sumário As 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