HTML Sessão 9 HTML Quem já navegou um pouco pela Internet com certeza já encontrou páginas em que, por exemplo, existe um menu estático no lado esquerdo do ecrã e o conteúdo do lado direito é que vai mudando. Para tal é utilizado um processo mais complexo no qual visualizamos ao mesmo tempo no ecrã mais que uma página HTML. Para isso usa-se aquilo que iremos chamar de sistema de frames. Formador: Cosmin Constantinescu 1
O princípio é simples. Temos uma página que nos indica a posição na qual as outras páginas serão colocadas. No exemplo referido de um menu do lado esquerdo, ateríamos, por exemplo uma página principal.htm que nos diz para exibir a página menu.html no lado esquerdo e a página conteudo.htm no lado direito. Vamos agora ver como criar uma página com três frames, uma do lado esquerdo, e do lado direito um cabeçalho e o corpo, como no seguinte esquema: Para definir frames, utiliza-se o tag <FRAMESET>. Formador: Cosmin Constantinescu 2
<TITLE>Página com 26</TITLE> <FRAMESET COLS ="160,*" BORDER="0" FRAMESPACING="0"> <FRAME SRC="esquerda.htm" NAME="esquerda" NORSIZE FRAMEBORDER="NO"> <FRAMESET ROWS ="90,*"> <FRAME SRC="cima.htm" NAME="cima" NORESIZE SCROLLING="NO" FRAMEBORDER="NO"> </FRAMESET> <NOFRAMES> </NOFRAMES> <FRAME SRC="conteudo.htm" NAME="conteudo" FRAMEBORDER="NO"> </FRAMESET> <BODY BGCOLOR="#FFFFFF"> Esta página usa frames, mas o seu browser não as consegue visualizar. Guardar o ficheiro com o nome exemp26.html e testar no IE Formador: Cosmin Constantinescu 3
<TITLE>Página com </TITLE> <BODY BGCOLOR="FFD2A6"> Guardar o ficheiro com o nome conteudo.html e testar no IE <TITLE>Página com </TITLE> <BODY BGCOLOR="B05800"> Guardar o ficheiro com o nome cima.html e testar no IE Formador: Cosmin Constantinescu 4
<TITLE>Página com </TITLE> <BODY BGCOLOR="0080FF"> Guardar o ficheiro com o nome esquerda.html e testar no IE Atributos avançados Lista de atributos das tags frameset e frame com as quais podemos configurar a aparência e características das janelas. A parte da criação das janelas propriamente dita, existem muitos atributos com os quais podemos configurar sua aparência. Para isso, tanto a Tag <frameset> como <frame> admitem diversos atributos que permitem especificar a forma de elementos como as bordas dos frames, a margem, a existência ou não de barras de deslocamento, etc. Atributos para a Tag <frameset> Já conhecemos o atributo cols e rows, que servem para indicar se a distribuição em janelas se fará horizontalmente ou verticalmente. Somente se pode utilizar um deles e se for igual às dimensões de cada uma das divisões, separadas por vírgulas. border="número de pixels" Permite especificar de maneira global para todo o frameset o número de pixeis que há de ter a borda dos frames. Formador: Cosmin Constantinescu 5
bordercolor="#rrggbb" Com este atributo podemos modificar a cor da borda dos frames, também de maneira global todo o frameset. frameborder="yes no 0" Serve para mostrar ou não a borda do frame. Os seus possíveis valores são "yes" (para que se vejam as bordas) e "não" ou "0" (para que não se vejam). Na prática elimina a borda, mas permanece uma linha de separação dos frames. framespacing="número de pixels" Para determinar a largura da linha de separação dos frames. Pode-se utilizar no Internet Explorer e junto com o atributo frameborder="0" serve para eliminar a borda das janelas. Atributos para a etiqueta <frame> Para esta Tag, assinalamos o atributo src, que servem para indicar o arquivo que contém a janela e name, para dar um nome à janela e logo direccionar os links para ele. marginwidth="número de pixels" Define o número de pixeis que tem a margem do frame. Esta margem aplica-se à página que pretendemos ver nessa janela, de modo que se colocamos 0, os conteúdos da página nessa janela estarão completamente unidos à borda da margem e se indicamos um valor de 10, os conteúdos da página estariam separados da borda 10 pixeis. marginheight="número de pixels" O mesmo que o atributo anterior, mas para a margem vertical. scrolling="yes no auto" Serve para indicar se queremos que hajam barras de deslocamento nas diferentes janelas. Se indicamos "yes" existem sempre as barras, se indicamos "no" não são visualizadas e se colocamos "auto" são visualizadas somente se forem necessárias. Auto é o valor por padrão. Formador: Cosmin Constantinescu 6
noresize Este atributo não tem valores, simplesmente coloca-se ou não se coloca. No caso de que esteja presente indica que o frame não pode ser redimensionada. Como podemos ver, ao colocar o mouse sobre a borda das janelas sai um cursor que nos assinala que podemos mover e redimensionar assim os frames. Por padrão, se não colocamos nada, as janelas podem ser redimensionadas. frameborder="yes no 0" Este atributo permite controlar a aparição das bordas dos frames. Com este atributo igualado a "0" ou "não" não são visíveis bordas. bordercolor="#rrggbb" Permite especificar a cor da borda da janela. Definir o Nome de cada Frame: <FRAME SRC= URL original" NAME= nome_da_janela > Como enviar Novas páginas a Nomeados: <A HREF= novo_url" TARGET= nome_da_janela > textp </A> Formador: Cosmin Constantinescu 7
<FRAMESET ROWS="10%,90%" > </FRAMESET> <NOFRAMES> </NOFRAMES> <TITLE>Página Principal 27</TITLE> <FRAME SRC="Topo24.html" NORESIZE> <FRAMESET Cols="30%,70%"> </FRAMESET> <BODY BGCOLOR="#FFFFFF"> <FRAME SRC="toc24.html" NAME="janela_toc" MARGINWIDTH="3" MARGINHEIGHT="3"> <FRAME SRC="indice24.html" NAME="janela_principal" FRAMEBORDER="NO"> Esta página usa frames, mas o seu browser não as consegue visualizar. Guardar o ficheiro com o nome exemplo27.html e testar no IE <BODY > <TITLE>Indice 27</TITLE> <h3 align="center"> Página Principal <h3> Guardar o ficheiro com o nome indice27.html e testar no IE Formador: Cosmin Constantinescu 8
<BODY > Exemplos 1 </a> Exemplos 2 </a> Exemplos 3 </a> Exemplos 19 </a> </ul> <TITLE>Conteúdo 27</TITLE> <h3> Meus Exemplos <h3> <ul> <li><a href="indice24.html" target="janela_principal"> Pag. Principal </a> Guardar o ficheiro com o nome toc24.html e testar no IE <ul> </ul> <li><a href="exemplo01.html" target="janela_principal"> <li><a href="exemplo02.html" target="janela_principal"> <li><a href="exemplo03.html" target="janela_principal"> <li> <li><a href="exemplo19.html" target="janela_principal"> <BODY > <TITLE>topo 27</TITLE> <h3 align="center"> Topo <h3> Guardar o ficheiro com o nome topo27.html e testar no IE Formador: Cosmin Constantinescu 9
HTML Sessão 9 HTML Formador: Cosmin Constantinescu 10