Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
6.0.Frames
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
1 Aula 6: Frames Você certamente já visitou páginas organizadas em áreas diferenciadas que podiam ser usadas, redimensionadas movidas para cima ou para baixo independentemente. Pois essa possibilidade de organização em diversas seções, de maneira criativa, é devido aos frames, que é o assunto desta nossa aula! Objetivos: Nesta aula você: − Aprenderá os conceitos de frames. − Compreenderá as formas de dividir uma janela. − Conhecerá os atributos de frameset e frames. − Saberá como abrir documentos em um frame. − Aprenderá o significado dos nomes especiais: _blank, _self, _parent, e _top. − Conhecerá os frames inline. Pré-requisitos: Os temas das aulas 2 e 5, e a forma como se define cores apresentada na aula 4, serão muito importantes para frames. 1. Aspectos Gerais dos Frames Uma forma de posicionar os elementos e dividir o espaço de uma janela é através dos frames. Este recurso permite dividir a janela do navegador em várias áreas independentes (chamadas frames) e em cada uma destas áreas pode ser carregado e visualizado um arquivo HTML diferente. Cada frame é totalmente independente dos demais, o que permite que o conteúdo de um possa ser rolado ou trocado sem afetar os outros. Esta independência torna este recurso ideal para a criação de menus. A construção de uma página dividida em frames envolve, além dos arquivos que serão exibidos em cada frame, a criação de um arquivo extra para definir a disposição e o tamanho ocupado por cada área da janela. Este arquivo extra é chamado de arquivo de layout. Um arquivo de layout é um documento HTML, onde a tag <BODY> é substituída pela tag <FRAMESET>. Este arquivo tem o seguinte formato: <HTML> <HEAD><TITLE>Frames Horizontais</TITLE></HEAD> <FRAMESET ROWS=”50%, 50%”> <FRAME SRC=... NAME=...> <FRAME SRC=... NAME=...> <NOFRAMES> </NOFRAMES> </FRAMESET> </HTML> A tradução usual de layout é de: desenho, plano, ou esquema. O termo também é usado para designar a disposição de alguma coisa em determinado lugar. Ambos os significados não definem completamente todo seu sentido, neste contexto mais específico de HTML em Informática. Layout (que se lê: leiaute) aqui significa mais precisamente: um arquivo que estará mostrando a distribuição física e o tamanho dos elementos independentes de determinada página. 2 O arquivo de layout do exemplo fará com que a janela seja dividida horizontalmente ao meio, como mostrado na figura 6.1 a seguir: Figura 6.1- Janela horizontalmente dividida em dois frames 2. Atributos de <FRAMESET> A tabela que segue resume os atributos de definição do conjunto de frames (a tag FRAMESET). Tabela 6.1 - Descrição dos atributos de <frameset> Atributo Descrição ROWS Número e altura de cada linha dos frames COLS Número e largura de cada coluna dos frames BORDER Largura da borda do frame BORDERCOLOR Cor da borda do frame Os frames são dispostos na janela do navegador na forma de linhas e colunas, como em uma tabela. Os atributos ROWS e COLS servem para definir desta forma (ROWS para linhas e COLS para colunas) o número de frames e o tamanho (altura para ROWS e largura para COLS) ocupado por cada um dos frames. O formato deste atributo é ROWS=”v,v,...” ou COLS=”v,v,...”, onde v indica o valor, que pode ser descrito de 3 formas: • o tamanho exato em pixels, • um percentual do tamanho da janela, e • uma porção do espaço ainda não ocupado da janela. No primeiro caso, v é um número indicando a altura ou a largura em pixels de cada frame. Por exemplo: ROWS=“100,50,200” define 3 frames que aparecem dividindo a tela em três áreas dispostas lado a lado (como linhas de uma tabela): o primeiro com a altura de 100 pontos, o segundo de 50 e o terceiro de 200 pontos. No segundo caso, v é descrito como um percentual, indicando a altura ou largura dos frames em função do tamanho da janela do navegador. Ex.: COLS=“30%,20%, 50%” define 3 frames dividindo a janela do navegador em colunas, onde o primeiro ocupa 30% da largura total, o segundo 20% e o terceiro 50%. Nas formas relativas, o caracter * tem função especial. Assume um valor em função da área ainda não usada da janela. Pode aparecer sozinho ou precedido de um número. Se * aparece sem número na frente está indicando a altura ou largura relativa aos demais valores definidos em função do restante da tela. Por 3 exemplo: COLS=“30%,20%,*,*” define 4 frames dispostos em colunas: o primeiro ocupa 30% da largura da janela, o segundo 20%, o terceiro e o quarto dividem os 50% restantes, ficando cada um com 25%. Um número n seguido do caracter *, indica que um frame ocupará n vezes o espaço ocupado pelos demais frames definidos relativamente. Ex.: ROWS=“40%,2*,*”define 3 frames (como linhas da tela do navegador), o primeiro ocupa 40% da altura da tela, o restante da tela (isto é: 60%) será dividido por 3 (já que há 2*+ 1*=3*), isto é, em partes de 20% da tela. Desta parte restante, o segundo frame ocupará 40% (2* da altura restante) e o terceiro 20% (1* da altura restante). O atributo BORDER permite atribuir um valor para a largura da borda e o atributo BORDERCOLOR permite mudar a sua cor. Os valores destes dois atributos são definidos da mesma forma que os atributos semelhantes de tabelas (vistos na aula passada). 3. Frames dentro de Frames Neste ponto da aula, você pode estar imaginando que dividir a janela apenas em linhas ou colunas não permite grande liberdade de criação. Além disso, possivelmente, você já encontrou páginas com divisões mais complexas que puramente linhas ou colunas. É possível criar layouts mais sofisticados, pois a tag <frameset> aceita em seu interior, além das tags <frame>, outras tags <frameset>. Este recurso é chamado de framesets aninhados. No exemplo a seguir, inicialmente, dividimos a janela em duas colunas para posteriormente dividir a coluna da direita em duas linhas: <HTML> <HEAD><TITLE> Framesets Aninhados </TITLE></HEAD> <FRAMESET COLS=”50%, 50%”> <FRAME> <FRAMESET ROWS=”50%, 50%”> <FRAME> <FRAME> </FRAMESET> </FRAMESET> </HTML> O arquivo de layout que acabamos de ver produziria o efeito na janela mostrado na figura 6.2. 4 Figura 6.2 - Divisão em 2 colunas e posterior divisão da coluna direita em duas linhas Outro layout bem comum envolvendo framesets aninhados, seria dividir a janela em duas linhas, para em seguida dividir a linha de baixo em duas colunas. O código HTML a seguir mostra como isso pode ser feito: <HTML> <HEAD><TITLE> Framesets Aninhados </TITLE></HEAD> <FRAMESET ROWS=”60,*”> <FRAME> <FRAMESET COLS=”150,*”> <FRAME> <FRAME> </FRAMESET> </FRAMESET> </HTML> O arquivo de layout que acabamos de ver produziria o efeito na janela, que é mostrado na figura 6.3. Figura 6.3 - Exemplo de uso de "*" 4. Atributos de FRAME A tag frame pode aceitar os vários atributos que são mostrados na tabela 6.2. 5 Tabela 6.2 - Descrição dos atributos de <frame> Atributos Descrição SRC Arquivo inicialmente mostrado no frame NAME Nome associado ao frame SCROLLING Indica se o frame será rolável (yes ou no) NORESIZE Indica que o usuário não pode mudar de tamanho do frame MARGINHEIGHT Altura da margem do frame MARGINWIDTH Largura da margem do frame O atributo SRC indica qual documento HTML será exibido no frame após o carregamento do arquivo de layout. Para exibir posteriormente um novo documento num frame é necessário que isso seja resultado da seleção de um link. É possível indicar que a URL referenciada num link seja exibida em um determinado frame. Isto é feito através dadefinição do atributo TARGET da tag <A>...</A> vista anteriormente. No exemplo a seguir, vemos o código do arquivo menu.html onde foram definidos dois links. A seleção de "primeiro link" faz com que o documento f1.html seja exibido no frame "esq". Já a seleção do “segundo link” faz com que o documento f2.html seja exibido no frame "dir": <HTML> <HEAD><TITLE> f1 a esquerda e f2 a direita… </TITLE></HEAD> <BODY> <DIV ALIGN=center> <A HREF="f1.html" TARGET="esq"> primeiro link</A> <A HREF="f2.html" TARGET="dir"> segundo link</A> </DIV> </BODY> </HTML> Para que o navegador saiba quais são os frames "dir" e "esq" é necessário atribuir nomes a eles. Isso é feito através da inclusão do atributo NAME da tag <FRAME>. A seguir é mostrado o arquivo de layout que divide a janela em 3 áreas: uma linha onde foi carregado o arquivo menu.html e duas colunas chamadas de "dir" e "esq": <HTML> <HEAD><TITLE> Links para 2 frames </TITLE></HEAD> <FRAMESET ROWS=”60,*”> <FRAME SRC=”menu.html”> <FRAMESET COLS=”*,*”> <FRAME NAME=”esq”> O codifico: define um espaçamento no texto, estes e outros códigos especiais de HTML podem ser encontrados na lista do final desta aula. 6 <FRAME NAME=”dir”> </FRAMESET> </FRAMESET> </HTML> A combinação de arquivos que acabamos de ver produziria o efeito mostrado na figura 6.4, na janela *. Figura 6.4 - Janela * gerada pelo código anterior Como nas células de uma tabela, há atributos para definir uma margem dentro da qual o documento vai ser exibido. O atributo MARGINHEIGHT serve para definir a altura da margem. O atributo MARGINWIDTH serve para definir a largura da margem. O atributo SCROLLING permite controlar a exibição da barra de rolagem vertical do frame: o valor yes faz com que a barra de rolagem esteja sempre visível, o valor no faz com que ela nunca seja exibida e o valor auto (default) faz com que ela seja exibida apenas se necessário. O usuário pode, a qualquer momento, modificar o tamanho inicial do frame, a menos que o atributo NORESIZE seja definido. Como todo recurso novo que é incorporado à linguagem HTML, é necessário manter a compatibilidade do documento com os navegadores antigos, que ainda não implementam o recurso. Isso se tornou especialmente problemático quando surgiram os frames, pois, carregar um arquivo de layout num navegador antigo poderia mostrar ao usuário uma página completamente vazia. Para dar uma satisfação aos utilizadores de navegadores que não suportam frames, existe a tag <NOFRAMES> ... </NOFRAMES>. Os navegadores mais antigos só vão interpretar o que há dentro desta tag e os mais novos vão ignorá-la. Ela deve ser incluída no fim do arquivo de layout com um código HTML alternativo ao código contendo frames, como no exemplo a seguir: <HTML> <HEAD><TITLE> Arquivo com HTML alternativo </TITLE></HEAD> <FRAMESET> <FRAME NAME=”esquerdo”> <FRAME NAME=”direito”> </FRAMESET> <NOFRAMES> Utilize um browser que suporte Frames para ver bem esta página. 7 </NOFRAMES> </HTML> 5. Nomes Especiais no TARGET Existem alguns nomes especiais que podem ser utilizados no atributo TARGET. Estes são: • _blank, • _self, • _parent,e • _top. O nome _blank faz com que o documento HTML seja carregado numa nova janela do navegador. Isto é particularmente desejável quando se faz referências a um documento de um outro site. Desta forma, a página anterior continua sendo visível. O nome _self indica que o novo documento será carregado no mesmo frame onde está a página com o link que causou sua exibição. Na maior parte das vezes, este nome é desnecessário, pois este é o comportamento padrão. Para compreender os nomes _parent e _top é necessário imaginar uma organização mais complicada do que a que temos visto até agora. O arquivo de layout a seguir divide a janela em 3 frames: <HTML> <HEAD><TITLE> Janela dividida em 3 </TITLE></HEAD> <FRAMESET ROWS=”60,*”> <FRAME NAME=”sup”> <FRAMESET COLS=”*,*”> <FRAME SRC=”lay.htm” NAME=esq> <FRAME NAME=dir> </FRAMESET> </FRAMESET> </HTML> Apesar do arquivo de layout anterior ter apenas 3 tags frames é possível dividir mais ainda a janela se o arquivo lay.htm for também um arquivo de layout, cujo código poderia ser por exemplo: <HTML> <HEAD><TITLE>Arquivo lay.htm </TITLE></HEAD> <FRAMESET ROWS=”*,*”> <FRAME SRC=”menulay.htm” NAME=esqsup> <FRAME NAME=esqinf> </FRAMESET> </HTML> Se o arquivo menulay.htm tivesse o seguinte código: <HTML> 8 <HEAD><TITLE>Arquivo menulay.htm </TITLE></HEAD> <BODY> <A HREF=”f.htm” TARGET=_top> No Topo</A><BR> <A HREF=”f.htm” TARGET=_parent> No Pai</A> </BODY> </HTML> A combinação de arquivos que acabamos de ver produziria o efeito na janela vista na figura 6.5. Figura 6.5- Resultado da janela obtida pelos arquivos lay.htm e menulay.htm Como podemos observar neste exemplo, temos 2 arquivos de layout na janela: o principal que ocupa a janela toda e aquele que está em lay.htm que ocupa o frame chamado esq. A página que contém os links foi aberta a partir do segundo arquivo de layout. A seleção do link cujo TARGET é _top vai fazer com que o arquivo f.htm seja aberto no lugar onde foi aberto o arquivo de layout principal (o topo da hierarquia), ou seja, ocupando a janela toda. Já a seleção do link cujo TARGET é _parent vai fazer com que o arquivo f.htm seja aberto no lugar onde foi aberto o arquivo de layout. Este causou a abertura do arquivo que contém o link (o arquivo de layout mais próximo da hierarquia), ou seja, ocupando o frame de nome esq. 9 6. Frames inline A linguagem HTML comporta uma outra forma de criar um frame que apenas na versão 6.0 passou a também ser implementada pela Netscape: frames inline. Estes frames são incluídos num arquivo HTML através da tag <IFRAME> e não necessitam de arquivo de layout, ou seja, ficam misturados às tags de um arquivo comum. Salvo por esta particularidade, seu comportamento em relação à página é idêntico ao comportamento de um frame comum, aceitando os mesmos tipos de atributos. As linha de código abaixo exemplificam isso. Elas permitem que a imagem do animal selecionado pelo usuário seja mostrado em uma janela. As imagens de cada animal estão nos arquivos elefante.jpg, girafa.jpg, crocodilo.jpg e hipopotamo.jpg no diretório imagens. Repare que <iframe> introduz uma simplicidade maior ao possibilitar que um único arquivo controle tudo. <HTML> <head> <title>Frames Inline</title> </head> <body bgcolor=lightgreen> <table align=center cellspacing=10> <tr> <td><h2>Frames Inline</h2></td> </tr> <tr> <th height=40 bgcolor=white> <a href="imagens/elefante.jpg" target=imagem>Elefante</a> </th> <iframe src="" name=imagem></iframe> <tr> <th height=40 bgcolor=white> <a href="imagens/girafa.jpg" target=imagem>Girafa</a> </th> </tr> <tr> <th height=40 bgcolor=white> <a href="imagens/crocodilo.jpg" target=imagem>Crocodilo</a> </th> </tr> <tr> <th height=40 bgcolor=white> <a href="imagens/hipopotamo.jpg" target=imagem>Hipopotamo</a> </th> </tr> </table> </body> 10 </HTML> Figura 6.6 - Resultado da implementação das linhas de código anteriores Exercícios: 1. Utilize frames, no exercício 3 da aula 2, de modo que o exercício tenha 2 frames: um à esquerda ocupando 30% e outro à direita ocupando 70% da página. Faça o frame da esquerda funcionar como menu e o da direita mostrar ositens selecionados pelo usuário. 2. Modifique agora o exercício anterior para que ao invés de mostrar um arquivo no frame da direita, a seleção de um item produza a abertura deste arquivo em uma nova página. Resumo: Nesta aula, você aprendeu a estrutura básica dos frames na linguagem HTML, como estruturar a forma como eles aparecem em um documento, o seu layout, o seu conteúdo e a tratar formas alternativas de representação no caso do navegador não tratá-los. Fez uso deste recurso em uma página com “menu” e testou seus novos conhecimentos nos exercícios. Auto-avaliação: Você concluiu com sucesso os exercícios? Então está pronto para utilizar esse recurso em qualquer página, mas nunca exagere, uma página cheia de frames fica muito pesada! Se não está bem seguro, já sabe o que deve fazer, não? Isso mesmo! Leia o texto novamente e refaça os exercícios e 11 aí sim estará pronto para os formulários, que é o assunto da próxima aula.
Materiais relacionados
104 pág.
232 pág.
Perguntas relacionadas
Compartilhar