Como criar um conjunto de subjanelas com três documentos dispostos na vertical

Transcrição

1 Mollduras ("frames") As molduras ("frames") são subjanelas definidas sobre a janela principal do browser. Estas subjanelas são criadas dividindo a janela em várias partes. Cada uma dessas partes pode apresentar uma página da Web diferente. As subjanelas são habitualmente designadas por molduras, ou "frames". Como criar um conjunto de subjanelas com três documentos dispostos na vertical Moldura A <p>esta é a moldura <span style="color: red; font-size: 150%">A</span></p> Moldura B <p>esta é a moldura <span style="color: blue; font-size: 150%">B</span></p> Moldura C <p>esta é a moldura <span style="color: teal; font-size: 150%">C</span></p> <frameset cols="25%,50%,25%"> <frame src="moldura_c.html">

2 Como criar um conjunto de subjanelas com três documentos dispostos na horizontal <frameset rows="25%,50%,25%"> <frame src="moldura_c.html"> Vantagens e desvantagens das molduras As molduras ("frames") permitem-nos apresentar mais do que uma página HTML numa única janela do browser. Cada página está dentro da sua própria moldura (subjanela) e é independente das restantes páginas. Apesar de oferecerem alguma liberdade ao facilitarem bastante a criação de barras de navegação em conjuntos de documentos com muitas páginas e de tornarem

3 bastante mais rápido o carregamento das páginas, as molduras também podem dar origem a algumas dificuldades, tais como: O criador de páginas vê-se obrigado a lidar com um número maior de páginas ao mesmo tempo. O carregamento do conteúdo no browser é mais difícil. Algumas vezes é preciso que um único elemento <a> faça ligação a duas ou mais páginas, o que obriga a utilizar JavaScript. O Elemento frameset O elemento <frameset> define a forma como a janela do browser se subdivide para acomodar as molduras. Este elemento divide a janela do browser em linhas e colunas. Os valores atribuídos às linhas e às colunas indicam a quantidade de área do monitor que cada linha e cada coluna devem ocupar. O Elemento <frame> O elemento <frame> define qual o documento HTML que deverá colocar numa determinada moldura. No exemplo apresentado abaixo temos um conjunto de molduras com duas colunas. A primeira coluna ocupa 25% da largura da janela do browser e a segunda coluna ocupa 75% da largura. O documento "moldura_a.html" ocupa a primeira coluna e o documento "moldura_b.html" ocupa a segunda coluna: <frameset cols="25%,75%"> <frameset> Dicas Diferente de outras páginas normais, as páginas divididas em frames não utilizam o elemento, sendo assim substituído pelo elemento <frameset>. Quando uma moldura possui linhas de contorno visíveis, o utilizador pode alterar as suas dimensões arrastando as linhas de limite com o rato. Para impedir que isso aconteça utilize o atributo noresize no elemento <frame>. Se desejarmos ocultar as bordas dos frames, utiliza-se o atributo frameborder= 0 e para definir os espaçamento entre o frames como 0 utiliza-se o framespacing="0". Estes atributos são usados sempre no elemento <frameset> Outro recurso que pode ser utilizado nos frames é o scrolling para ocultar ou não as barras de deslocamento. Usa-se como: scrolling= no no elemento <frame>. O atributo name do elemento <frame> especifica a sua identificação para que outros frames o reconheçam e chame conteúdos para serem exibidos nele mesmo.

4 <frameset rows="25%,50%,25%" frameborder="0" framespacing="0"> <frame name="a" noresize src="moldura_a.html" scrolling="no"> <frame name="b" src="moldura_b.html"> <frame name="c" src="moldura_c.html" scrolling="yes"> Usa-se o elemento <noframes> para que os browsers que não suportam molduras possam emitir um aviso aos seus utilizadores. Elementos para molduras ("frames") <frameset> <frame> Define um conjunto de molduras Define o conteúdo de uma subjanela (moldura, ou "frame") <noframes> Define uma secção "noframes" para ser usada pelos browsers que não suportam Molduras <iframe> Define uma subjanela (moldura) interior ("inline frame")

5 Como criar subjanelas com partes dispostas na vertical e outras na horizontal <frameset rows="50%,50%"> <frameset cols="25%,75%"> <frame src="moldura_c.html"> Como usar subjanelas para organizar a navegação no site Moldura de Navegação <br><b>barra de Navegação</b> <hr> <a href="moldura0.html" target="principal">home</a><br><br> <a href="moldura_a.html" target="principal">documento A</a><br> <a href="moldura_b.html" target="principal">documento B</a><br> <a href="moldura_c.html" target="principal">documento C</a><br>

6 Moldura de Conteúdo Este é o documento de entrada ("home") do conjunto de molduras.<br><br> <frameset cols="120,*"> <frame src="nav_molduras.html"> <frame name="principal" src="moldura0.html"> Como colocar uma subjanela interior dentro de uma página Moldura iframe <title>uma moldura "inline"</title> Esta parte pertence a uma moldura "inline" (iframe)<br> Ela está num documento HTML separado.<br><br> Veja que se o documento não couber todo dentro da sua janela

7 aparecem barras de deslocamento.<br><br> A diferença mais importante relativa às molduras normais está no fato de um iframe poder ser colocado dentro de uma página, misturado com os conteúdos desta e no site que quisermos.<br> <h3>uma moldura "inline" (iframe)</h3> <iframe src="iframe.html" width="400" height="150" frameborder="1" marginheight="0" marginwidth="0"></iframe> <p>alguns browsers antigos não suportam iframes.</p> Paulo Soares 2011 HTML