You are on page 1of 11

Frames

Profs. Marcos Henrique Fonseca Ribeiro e Tarcsio de Souza Lima Colaborao: Prof. Leandro Neumann Ciuffo

Neste captulo voc ir aprender sobre:


a anatomia de uma pgina com frames, atributos e elementos bsicos de um frame, frames aninhados e frames embutidos.

Nunca na histria da HTML qualquer outro elemento foi tomado pelos projetistas Web com tanta voracidade como os frames. O elemento BLINK, por exemplo, levantou muito alvoroo em sua poca, mas logo logo cedeu seu lugar. Quando os frames apareceram, os projetistas Web imediatamente se dividiram em dois lados. Haviam aqueles que amavam os frames, e muitos websites apareciam da noite para o dia anunciando que eles suportavam somente frames ("Frames Only"), ou seja, s podiam ser visualisados com browsers compatveis ao uso de frames. De outro lado, existiam aqueles que odiavam os frames, ao ponto de se recusarem a visitar sites que os usava. Felizmente, a intensidade desses sentimentos abaixou muito, apesar de que sempre haver algum que dir sumariamente "Eu detesto frames" quando o elemento for mencionado. Ainda, eles devem ser usados com cuidado. Esteja certo, quando voc for usar frames, que eles de fato fazem sentido. O uso de frames deve adicionar (e no subtrair) usabilidade e desempenho do seu site. A anatomia de uma pgina com frames Frame nada mais que um recurso da HTML que permite que a janela do browser seja dividida em vrias regies - os ditos frames. Cada uma dessas regies pode conter documentos totalmente distintos e independentes. Quando utilizamos frames, necessrio criar um documento HTML principal que ir definir em quantas regies ser dividida a janela do navegador, qual ser o tamanho de cada regio e quais sero os documentos carregados em cada uma delas. Para comear, vamos dar uma olhada em uma pgina extremamente bsica: iremos dividir a janela do browser em duas regies - direita e esquerda. <HTML> <HEAD> <TITLE>Exemplo de Frames</TITLE> </HEAD> <FRAMESET COLS = 200,*> <FRAME SRC = "frameesquerdo.html" NAME="esquerda">

<FRAME SRC = "framedireito.html" NAME="direita"> <FRAMESET> </HTML>

Olhando para uma pgina com frames, como a pgina acima, o importante saber que o cdigo HTML dessa pgina , na verdade, um conjunto de instrues para a exibio de alguns outros arquivos HTML, ou seja, no possui qualquer contedo como textos e imagens, apenas define as divises da janela do navegador. Ela tambm pode ser pensada como um continer com compartimentos mltiplos, cada um contendo uma nica pgina Web. Repare tambm que a tag <BODY> que geralmente aparece em todos os documentos HTML sumiu! Ela foi substituda pela nova tag <FRAMESET>, que exatamente o que distingue este tipo de documento das pginas normais. A figura abaixo ilustra uma pgina com seis janelas em frames.

O resultado a colocao de sete pginas HTML juntas, o frame e seis pginas de contedo. Cada pgina de contedo pode ser alocada separadamente chamando-a diretamente a partir de uma URL se algum assim o escolher. Perceba que as janelas do frame so preenchidas da esquerda para a direita, de cima para baixo. Perceba tambm as barras de rolagem nas janelas 3 e 5. Se um documento no cabe na janela designada do frame, as barras de rolagem iro aparecer de forma que o seu visitante possa se mover atravs do documento para cima ou para baixo.

O cdigo da figura acima mostrado logo abaixo:

Antes de seguir nossa discusso sobre elementos e atributos dos frames, leia o cdigo-fonte acima. Voc consegue ver como os elementos funcionam juntos para produzir a pgina Web? Elementos e atributos de um frame So poucos os elementos e atributos associados aos efeitos de uma pgina com uso de frames. Na verdade, h somente trs elementos, o que os torna muito fceis. 1. O elemento FRAMESET O elemento FRAMESET define uma pgina com frames. Ele pode ser pensado em alguns casos como um substitutivo do elemento BODY encontrado nos documentos HTML sem frames. Este elemento delineia o princpio e o fim de um conjunto de instrues para o browser. Os atributos que podem ser aplicados ao elemento FRAMESET so: ROWS - especifica a altura e o nmero de linhas em um frameset. A altura das linhas pode ser especificada tanto em pixels quanto em porcentagem da janela do browser. Em muitos casos, melhor dimensionar suas linhas usando porcentagem, j que o browser no ir redimensionar-se automaticamente para acomodar o nmero de pixels necessrios para exibir uma pgina com frames. Um nmero exagerado de pixels pode causar o truncamento da pgina, e um nmero muito pequeno de pixels far com que o browser preencha o espao para acomod-lo. Exemplo: ROWS="60%, 20%, 20%" ou ROWS="60%, 20%, *" O atributo especifica que o frameset ter trs linhas com larguras de 60%, 20% e 20% da janela do browser. Note que o segundo exemplo faz exatamente a mesma coisa o atributo ROWS ir computar o tamanho percentual restante para uma srie de linhas se ele no for preenchido. COLS - especifica a largura e o nmero de colunas em um frame usando pixels ou porcentagens.

Exemplo: COLS="20%, 80%" ou COLS="20%, *" Tal qual o atributo ROWS, o atributo COLS ir computar o valor percentual para o tamanho das colunas remanescentes, se necessrio. FRAMEBORDER - permite ao autor acionar ou no as bordas de um frame. O valor zero significa que nenhuma borda deve ser includa. Exemplo: FRAMEBORDER= 0 BORDER - usado para especificar a largura das bordas de um frame em um determinado nmero de pixels. Exemplo: BORDER= 20 BORDERCOLOR - usado para especificar a cor das bordas de um frame em um determinado nmero de pixels. Exemplo: BORDERCOLOR= "RED" ou BORDERCOLOR= "#FF0000" A figura abaixo demonstra como a aparncia de uma pgina com frames pode se alterar com a adio ou modificao dos atributos de FRAMESET:

A seguir, o cdigo para a pgina acima:

A figura a seguir mostra a mesma pgina com os atributos FRAMEBORDER e BORDER setados para zero:

2. O elemento FRAME O elemento FRAME contm os atributos e endereo do contedo par janelas FRAMESET individuais. Os elementos que funcionam adequadamente nos vrios browsers incluem:

SRC - especifica o URL ou nome de arquivo do documento HTML a ser carregado na janela. Exemplo: <FRAME SRC= "frame1.html"> Vale a pena mencionar novamente que um documento em frames no inclui qualquer dos contedos a serem exibidos em suas janelas. Ele meramente um leiaute para um certo nmero de outros documentos HTML. NAME - usado para dar nome a uma janela dentro de um frameset de forma que documentos possam ser carregados para ela diretamente usando o atributo TARGET em um link em outra janela. Por exemplo, referenciando de volta a primeira figura acima, se temos um link na Janela 3 que quer exibir o contedo de um documento na Janela 4, o cdigo para FRAME e HREF seria alguma coisa como: O frameset: <FRAME SRC= "frame4.html" NAME="quatro"> Janela 3: <A HREF="arquivo.html" TARGET="quatro"> O nome de uma janela frameset pode ser qualquer string de texto que voc queira! TARGET - esse atributo tem quatro padres de nomes que podem ser usados para especificar onde voc gostaria que um documento linkado fosse carregado. _blank Carrega o documento em uma nova janela aberta no browser. Cuidado com este valor, j que a abertura de muitas janelas pode causar alguma queda no computador do seu visitante. _self Carrega o documento na mesma janela que o link. Este o valor default para o TARGET. _parent Carrega o documento na janela "pai" ou no frameset. _top Carrega o documento, removendo todos os frames da janela. NORESIZE - por default, um usurio pode redimensionar as janelas de frame no browser para ver mais de um documento particular ou esconder uma outra janela completamente. O atributo NORESIZE desabilita esta capacidade, preservando a integridade da aparncia de suas pginas de frames e obtendo a certeza que um usurio final, por exemplo, no feche uma janela que possa ter publicidade de um patrocinador. Exemplo: <FRAME SRC= "frame4.html" NAME="quatro" NORESIZE>

Tenha em mente que o fato de voc setar NORESIZE para qualquer janela dentro de um frameset ir congelar igualmente o resto das janelas. SCROLLING - como colocado anteriormente, as barras de rolagem iro aparecer por default quando os documentos no couberem dentro da janela na qual eles so carregados. O SCROLLING permite ao autor dizer se as barras de rolagem devem aparecer ou no, independentemente do tamanho da janela do documento. SCROLLING=NO previne a exibio de barras de rolagem assim como a rolagem. SCROLLING=YES fora a exibio das barras de rolagem, mesmo que o documento caiba dentro da janela. A figura abaixo mostra o efeito de setar esse elemento para janelas individuais.

Perceba como a rolagem est desabilitada na Janela 1 apesar do contedo do documento claramente no cabe na janela. De outro lado, uma barra de rolagem aparece na Janela 4 mesmo ela no sendo necessria. Em muitos casos, pode ser melhor deixar este atributo default (SCROLLING=AUTO). 3. O elemento NOFRAMES O elemento NOFRAMES usado para incluir uma pequena quantidade de texto e talvez um link, a ser renderizado por browsers que no so capazes de exibir frames. Exemplos de seu uso aparece no cdigo exibido acima nesta pgina. quase impossvel hoje em dia encontrar browsers que no saibam processar frames, mas ainda existem usurios que possuem browsers antigos que no entendem frames ou que no os renderizam de forma atrativa. Cheque as suas pginas com frames com tantos browsers quanto for possvel.

Quando os frames surgiram no era incomum se ver linhas como "Seu browser no entende frames! Clique no link para fazer o download de um browser que reconhece!" Imagine a consternao, ou mesmo irritao do visitante que recebia tal mensagem. Torne o seu contedo NOFRAMES um pouco mais til. No h nada de errado em sugerir um browser que possa exibir frames, mas uma boa prtica oferecer um meio alternativo de navegar o site sem o uso de frames. Ainda, existem pessoas que no se importam em ver um site sem frames, mesmo que o browser seja capaz. Pode ser que eles no gostem de ver mais de uma pgina ao mesmo tempo, ou que seus computadores gastem muito tempo para fazer o download de mltiplos arquivos HTML para construir uma nica pgina em frames. Seja l qual for a razo deles, uma cortesia oferecer um link para uma verso sem frames do seu site. Frames Aninhados Considere a pgina em frames da figura abaixo e imagine como deve ser o cdigo para esta pgina.

At agora trabalhamos somente com um frameset de cada vez. A figura acima um exemplo de frames aninhados (ou frames mistos) - a ocorrncia de framesets dentro de framesets. Eles no so muito freqentes, mas interessante ver como eles trabalham. O cdigo para a figura acima mostrado abaixo:

A melhor maneira de ver o que est acontecendo com o cdigo fonte de um frameset aninhado coloc-lo em partes separadas. Neste exemplo estamos trabalhando com dois conjuntos de frames. O primeiro definido como duas linhas, a primeira tomando 30% da janela do browser e a segunda preenchendo o restante. O segundo um conjunto de trs colunas igualmente balanceadas. O documento frame1.html carregado na primeira linha. Depois, ao invs de carregar frame2.html na Linha 2, como feito anteriormente, carregado um segundo frameset de trs colunas. O segundo frameset ento fechado, o texto NOFRAMES includo, e o primeiro frameset fechado. Isto o aninhamento. A "dica" quebrar uma pgina em frames complicada em suas partes, pensando em termos de quais linhas ou colunas sero substitudos por framesets adicionais. Frames embutidos Alguns browsers, incluindo o MS Internet Explorer, suportam os frames embutidos uma caracterstica que permite a voc incluir um pequeno framesetframes. A figura abaixo um exemplo de um frame embutido, conforme renderizado pelo IE.

O conceito neste exemplo que o usurio pode clicar em uma das palavras na janela do lado esquerdo e uma definio ir aparecer no lado direito. O exemplo mostrou o efeito do usurio haver selecionado bananas. O exemplo mostrou tambm que o arquivo pode ser qualquer, incluindo figuras. Os frames embutidos envolvem somente um elemento e poucos atributos. O elemento IFRAME (inline frame) abre uma janela de um tamanho definido em pixelslink a partir de uma outra janela. O atributo FRAMEBORDER usado para setar a largura das bordas em pixels. pelos atributos HEIGHT e WIDTH. O atributo NAME usado exatamente da mesma forma que com o elemento FRAME. Ele nomeia uma janela particular que possa ser o alvo de um O atributo ALIGN usado para alinhar os frames embutidos com o resto de texto na pgina. Assim como com imagens e tabelas, os valores aceitos para ALIGN so TOP, MIDDLE, BOTTOM, LEFT e RIGHT, e os efeitos so os mesmos. O cdigo fonte completo para o nosso exemplo mostrado abaixo:

You might also like