Scribd Logo
Upload

Welcome to Scribd!

  • Ames PDF

    Uploaded by

    João Ferreira
    12 views11 pages

    Original Title

    6.0.Frames.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    12 views11 pages

    Ames PDF

    Uploaded by

    João Ferreira

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 11

    Aula 6: Frames

    Voc certamente j visitou pginas organizadas em reas diferenciadas


    que podiam ser usadas, redimensionadas movidas para cima ou para
    baixo independentemente. Pois essa possibilidade de organizao em
    diversas sees, 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, sero muito importantes para frames.
    A traduo usual de
    layout de: desenho,
    plano, ou esquema.
    O termo tambm
    usado para designar a
    disposio de alguma
    coisa em determinado
    lugar. Ambos os
    significados no
    definem completamente
    todo seu sentido, neste
    contexto mais
    especfico de HTML em
    Informtica. Layout
    (que se l: leiaute) aqui
    significa mais
    precisamente: um
    arquivo que estar
    mostrando a
    distribuio fsica e o
    tamanho dos elementos
    independentes de
    determinada pgina.

    1. Aspectos Gerais dos Frames


    Uma forma de posicionar os elementos e dividir o espao de uma janela
    atravs dos frames. Este recurso permite dividir a janela do navegador
    em vrias 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
    contedo de um possa ser rolado ou trocado sem afetar os outros. Esta
    independncia torna este recurso ideal para a criao de menus.
    A construo de uma pgina dividida em frames envolve, alm dos
    arquivos que sero exibidos em cada frame, a criao de um arquivo
    extra para definir a disposio 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>
    substituda 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>
    1

    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
    atributos
    de
    frames (a tag

    segue
    resume
    os
    definio do conjunto de
    FRAMESET).

    Tabela 6.1 de

    Descrio dos atributos


    <frameset>

    Atributo
    ROWS
    COLS
    BORDER
    BORDERCOLOR

    Descrio
    Nmero e altura de cada linha dos frames
    Nmero e largura de cada coluna dos frames
    Largura da borda do frame
    Cor da borda do frame

    Os frames so 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 nmero
    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 poro do espao ainda no ocupado da janela.
    No primeiro caso, v um nmero 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 trs 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 funo 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 funo especial. Assume um valor
    em funo da rea ainda no usada da janela. Pode aparecer sozinho ou
    precedido de um nmero.
    Se * aparece sem nmero na frente est indicando a altura ou largura
    relativa aos demais valores definidos em funo do restante da tela. Por
    2

    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 nmero n seguido do caracter *, indica que um frame ocupar n
    vezes o espao 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 so 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 no permite grande liberdade de criao.
    Alm disso, possivelmente, voc j encontrou pginas com divises mais
    complexas que puramente linhas ou colunas.
    possvel criar layouts mais sofisticados, pois a tag <frameset>
    aceita em seu interior, alm 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.

    Figura 6.2 - Diviso em 2 colunas e


    posterior diviso da coluna direita em duas linhas
    Outro layout bem
    envolvendo
    aninhados, seria
    em duas linhas,
    dividir a linha de
    colunas. O cdigo
    mostra como isso
    <HTML>

    comum
    framesets
    dividir a janela
    para em seguida
    baixo em duas
    HTML a seguir
    pode ser feito:

    <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
    A tag frame
    atributos
    que
    6.2.

    FRAME
    pode
    so

    aceitar os vrios
    mostrados na tabela

    Tabela 6.2 - Descrio dos atributos de <frame>


    Atributos
    Descrio
    SRC
    Arquivo inicialmente mostrado no frame
    NAME
    Nome associado ao frame
    SCROLLING
    Indica se o frame ser rolvel (yes ou no)
    NORESIZE
    Indica que o usurio no 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
    aps o carregamento do arquivo de layout. Para exibir posteriormente um
    novo documento num frame necessrio que isso seja resultado da
    seleo de um link.
    possvel indicar que a URL referenciada num link seja exibida em um
    determinado frame. Isto feito atravs da definio do atributo TARGET
    da tag <A>...</A> vista anteriormente.
    No exemplo a seguir, vemos o cdigo do arquivo menu.html onde
    foram definidos dois links. A seleo de "primeiro link" faz com
    que o documento f1.html seja exibido no frame "esq". J a seleo
    do segundo link faz com que o documento f2.html seja exibido no
    frame "dir":
    O codifico:
    &nbsp; define um
    espaamento no
    texto, estes e outros
    cdigos especiais de
    HTML podem ser
    encontrados na lista
    do final desta aula.

    <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>&nbsp;&nbsp;
    <A HREF="f2.html" TARGET="dir">
    segundo link</A>
    </DIV>
    </BODY>
    </HTML>
    Para que o navegador saiba quais so os frames "dir" e "esq"
    necessrio atribuir nomes a eles. Isso feito atravs da incluso 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>
    5

    <FRAME NAME=dir>
    </FRAMESET>
    </FRAMESET>
    </HTML>
    A combinao de arquivos que acabamos de ver produziria o efeito
    mostrado na figura 6.4, na janela *.

    Figura 6.4 - Janela * gerada pelo cdigo anterior


    Como nas clulas
    atributos
    para
    dentro da qual o
    exibido. O atributo
    serve para definir a
    atributo
    serve para definir a

    de uma tabela, h
    definir uma margem
    documento vai ser
    MARGINHEIGHT
    altura da margem. O
    MARGINWIDTH
    largura da margem.

    O
    atributo
    SCROLLING permite
    controlar a exibio
    da barra de rolagem
    vertical do frame: o valor yes faz com que a barra de rolagem esteja
    sempre visvel, o valor no faz com que ela nunca seja exibida e o valor
    auto (default) faz com que ela seja exibida apenas se necessrio.
    O usurio 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,
    necessrio manter a compatibilidade do documento com os navegadores
    antigos, que ainda no implementam o recurso. Isso se tornou
    especialmente problemtico quando surgiram os frames, pois, carregar
    um arquivo de layout num navegador antigo poderia mostrar ao usurio
    uma pgina completamente vazia. Para dar uma satisfao aos
    utilizadores de navegadores que no suportam frames, existe a tag
    <NOFRAMES> ... </NOFRAMES>.
    Os navegadores mais antigos s vo interpretar o que h dentro desta tag
    e os mais novos vo ignor-la. Ela deve ser includa no fim do arquivo de
    layout com um cdigo HTML alternativo ao cdigo 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 pgina.
    6

    </NOFRAMES>
    </HTML>
    5. Nomes Especiais no TARGET
    Existem alguns nomes especiais que podem ser utilizados no atributo
    TARGET. Estes so:
    _blank,
    _self,
    _parent,e
    _top.
    O nome _blank faz com que o documento HTML seja carregado numa
    nova janela do navegador. Isto particularmente desejvel quando se faz
    referncias a um documento de um outro site. Desta forma, a pgina
    anterior continua sendo visvel.
    O nome _self indica que o novo documento ser carregado no mesmo
    frame onde est a pgina com o link que causou sua exibio. Na maior
    parte das vezes, este nome desnecessrio, pois este o comportamento
    padro.
    Para compreender os nomes _parent e _top necessrio imaginar
    uma organizao 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 possvel
    dividir mais ainda a janela se o arquivo lay.htm for tambm um
    arquivo de layout, cujo cdigo 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 cdigo:
    <HTML>
    7

    <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 combinao 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
    exemplo, temos 2
    layout na janela: o
    ocupa a janela toda e
    em lay.htm que
    chamado esq. A
    contm os links foi
    do segundo arquivo

    observar neste
    arquivos
    de
    principal
    que
    aquele que est
    ocupa o frame
    pgina
    que
    aberta a partir
    de layout.

    A seleo 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 seleo 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 contm o link (o arquivo de layout
    mais prximo da hierarquia), ou seja, ocupando o frame de nome esq.

    6. Frames inline
    A linguagem HTML comporta uma outra forma de criar um frame que
    apenas na verso 6.0 passou a tambm ser implementada pela Netscape:
    frames inline.
    Estes frames so includos num arquivo HTML atravs da tag
    <IFRAME> e no necessitam de arquivo de layout, ou seja, ficam
    misturados s tags de um arquivo comum. Salvo por esta
    particularidade, seu comportamento em relao pgina idntico ao
    comportamento de um frame comum, aceitando os mesmos tipos de
    atributos.
    As linha de cdigo abaixo exemplificam isso. Elas permitem que a
    imagem do animal selecionado pelo usurio seja mostrado em uma
    janela. As imagens de cada animal esto nos arquivos
    elefante.jpg,
    girafa.jpg,
    crocodilo.jpg
    e
    hipopotamo.jpg no diretrio 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>
    9

    </HTML>

    Figura 6.6 - Resultado da implementao


    das linhas de cdigo anteriores
    Exerccios:
    1. Utilize frames, no exerccio 3 da aula 2, de modo que o exerccio
    tenha 2 frames: um esquerda ocupando 30% e outro direita ocupando
    70% da pgina. Faa o frame da esquerda funcionar como menu e o da
    direita mostrar os itens selecionados pelo usurio.
    2. Modifique agora o exerccio anterior para que ao invs de mostrar um
    arquivo no frame da direita, a seleo de um item produza a abertura
    deste arquivo em uma nova pgina.
    Resumo:
    Nesta aula, voc aprendeu a estrutura bsica dos frames na linguagem
    HTML, como estruturar a forma como eles aparecem em um documento,
    o seu layout, o seu contedo e a tratar formas alternativas de
    representao no caso do navegador no trat-los. Fez uso deste recurso
    em uma pgina com menu e testou seus novos conhecimentos nos
    exerccios.
    Auto-avaliao:
    Voc concluiu com sucesso os exerccios? Ento est pronto para utilizar
    esse recurso em qualquer pgina, mas nunca exagere, uma pgina cheia
    de frames fica muito pesada! Se no est bem seguro, j sabe o que deve
    fazer, no? Isso mesmo! Leia o texto novamente e refaa os exerccios e
    10

    a sim estar pronto para os formulrios, que o assunto da prxima


    aula.

    11

    You might also like