Scribd Logo
Upload

Welcome to Scribd!

  • Actividades VI - Criação de Frames Numa Página Web

    Uploaded by

    João Carlos Sousa
    115 views7 pages

    Original Title

    Actividades VI - Criação de frames numa página web

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    115 views7 pages

    Actividades VI - Criação de Frames Numa Página Web

    Uploaded by

    João Carlos Sousa

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 7

    Actividades

    VI
    Desenvolvimento de
    Projectos Educativos
    em H.T.M.L.

    Criar quadros (Frames) numa página da


    Web.

    RECOMENDAÇÕES:

    Use as frames de forma moderada e com bom senso, nunca se esqueça de


    que o importante é fazer passar a mensagem e não mostrar ao outros que
    você domina toda a tecnologia de construção de páginas da Web. Desta
    forma, não é conveniente usar mais do que 3 a 4 frames na sua página da
    Web.

    Os Quadros podem condicionar ou favorecer a visibilidade e a informação


    por isso, quando se opta pela construção de quadros nas páginas Web
    devemos ter em atenção as dimensões dos quadros e as dimensões das
    páginas e gráficos a eles ligados.

    A etiqueta de formatação <frameset> usada num documento HTML tem um


    único objectivo: definir os quadros que vão ser visualizados em simultâneo e
    definir os seus atributos. Um documento com <frameset> não tem a etiqueta
    de formatação <body>

    EXEMPLO:
    <html>
    <HTML
    <frameset rows="82,*">
    <HEAD
    </HEAD <frame src="titulo.htm">
    <FRAMESET <frameset cols="29%,70%">
    <FRAME SRC="url" <frame src="indice.htm">
    <frame name="Frame_3" src="vazio.htm">
    <NOFRAMES ... </NOFRAMES </frameset>
    </frameset>
    </FRAMESET </html>
    </HTML>

    1
    Desenvolvimento de
    Projectos Educativos
    em H.T.M.L.

    Vamos criar um novo documento HTML de nome: hobbies.htm ao qual


    estará associado um conjunto de FRAMES. A aparência do conjunto será a
    seguinte:

    Página Pessoal Frame_1

    Música
    …(URL …)
    Frame_2 Desporto
    o nome (Name) desta frame
    Selos funciona como Target do Link
    Viagens

    Links Frame_3
    Favoritos

    [Home]

     Devemos utilizar nomes de frames que se iniciem por caracteres


    alfanuméricos.
     Quando fazemos as ligações (links) e estas têm como destino uma frame
    devemos escrever nos links a target exactamente igual ao name que
    indicámos para a frame.

    O programa Frame-It permite a construção de quadros (frames) nas páginas


    Web.

    1. Inicie uma sessão de trabalho com o programa Frame-It e escolha a


    opção - 2 ROWS pressionando de seguida o botão NEXT. Aparece de
    seguida um quadro dividido por uma linha: cada um destes rectângulos é
    uma frame.

    2
    Desenvolvimento de
    Projectos Educativos
    em H.T.M.L.

    2. Seleccione o rectângulo superior fazendo um click com o apontador do


    rato dentro dele e ajuste-o até ao tamanho pretendido (quando passa com o
    cursor na borda inferior de um quadro seleccionado aparece o ícone de
    redimensionamento, pressione o botão do lado esquerdo do rato e arraste -
    como alternativa pode também escrever directamente nas caixas de texto).
    As dimensões relativas podem ser observadas no quadro FRAME
    DIMENSIONS e devem aproximar-se de: Height=20% Width=100%

    3. Seleccione o rectângulo inferior e divida-o em duas colunas pressionando


    o botão SPLIT FRAME

    4. Seleccione o rectângulo do lado esquerdo e redimensione-o até aos


    valores: Height=80% e Widht=20%

    3
    Desenvolvimento de
    Projectos Educativos
    em H.T.M.L.

    5. A cada uma das frames devemos associar os ficheiros HTML respectivos


    QUE SERÃO POSTERIORMENTE CRIADOS (e especificar alguns atributos
    de formatação). No nosso caso será necessária indicar a seguinte
    informação:

    NAME OF FRAME - Frame_1


    FILENAME - titulo.htm
    Opção de scrolling - no

    NAME OF FRAME - Frame_2


    FILENAME - indice.htm
    Opção de scrolling - yes

    NAME OF FRAME - Frame_3


    FILENAME - vazio.htm
    Opção de scrolling - yes

    6. Pressione duas vezes o botão NEXT e guarde o ficheiro de definição do


    frameset na sua disquete como hobbies.htm escolhendo a opção SAVE TO
    A FILE e pressionando o botão STORE

    4
    Desenvolvimento de
    Projectos Educativos
    em H.T.M.L.
    7. Abandone a operação com o FRAMEIT, pressionando o botão de QUIT e
    inicie uma sessão de trabalho com o NETSCAPE COMPOSER

    8. Crie o documento titulo.htm que contém o texto Página Pessoal


    formatado como (H2)

    9. Crie no NETSCAPE COMPOSER três documentos HTML contendo


    unicamente um titulo identificativo relacionado com o nome do ficheiro.

    Documentos a criar:
     Musica.htm
     Desporto.htm
     Selos.htm

    10. Crie no NETSCAPE COMPOSER o documento indice.htm e construa


    nele uma tabela com 6 linhas, BORDER=0, TABLE WIDTH=20% TABLE
    ALIGNMENT=CENTER e com os seguintes conteúdos:

    Música

    Desporto

    Selos

    Viagens

    Links
    Favoritos

    [Home]

    Crie links para as três primeiras opções, associadas ao nome do ficheiro html
    correspondente, procedendo da seguinte forma:

     - Seleccione o texto que vai constituir o link (basta fazer duplo-click


    sobre ele)
     - Pressione o botão

     - Na caixa de diálogo que surge, pressione o botão CHOOSE FILE


    e indique o ficheiro html de destino

    5
    Desenvolvimento de
    Projectos Educativos
    em H.T.M.L.

     - Pressione o botão EXTRA HTML e escreva na caixa que surge o


    seguinte texto:
     Nos três primeiros casos:
    Target="Frame_3"
    (com este comando indica-se ao browser que deve mostrar o conteúdo
    de cada página indicada no espaço correspondente ao quadro nº 3)

     No último caso (Home):


    Target="_Top"
    (com este comando indica-se ao browser que deve mostrar o conteúdo
    da página indicada na totalidade do écran)

    11. No PAINT SHOP PRO desenhe um imagem de 256 cores, com um


    desenho à sua escolha e com as dimensões de 1x1 (pixel). Guarde-a em
    formato GIF com fundo transparente e com o nome branco.gif

    12. Crie um agora o documento vazio.htm e insira nele o gráfico criado


    anteriormente - branco.gif

    13. Verifique o funcionamento dos quadros que criou nas actividades


    anteriores.

    You might also like