Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/ :16 1 FRAMES Os Frames são divisões na tela do browser em diversas telas pequenas (quadros). Com isso é possível fixar partes da tela ou mostrar vários conteúdos (várias telas) simultaneamente. Exemplo: Exemplo de pagina com FRAME Pagina Exemplo de FRAMES TESTE TESTE TESTE

Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/ :16 2 Digite os comandos abaixo no bloco de notas e grave como EXERC26FRAME.HTM, depois carregue a home-page no browser. Exemplo de pagina com FRAME Pagina Exemplo de FRAMES TESTE TESTE TESTE

Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/ :16 3 O TAG FRAMESET define a divisão da página do browser em “quadros”. No exemplo a página foi dividida em duas colunas, onde a primeira ocupa 20% do tamanho da tela e a segunda 80% (restante). Dentro da TAG FRAMESET, temos a TAG FRAME SRC, que determina a referência das páginas que serão carregadas nos quadros (FRAME). Assim temos que a página pagframe1.htm, será exibida na primeira coluna (que ocupa 20% da tela), e pagframe2.htm será exibida na segunda coluna (que ocupará o restante – 80%). A formatação de frames inclui também uma outra TAG NOFRAME, que normalmente é mostrada pelos browsers que não suportam esta formatação, isto é, a apresentação por frame. LINKS com FRAMES Sempre que acionamos um link dentro de um browser, o comportamento padrão é que a página, seja carregada na mesma janela da página anterior. No exemplo a seguir, com Frame e Link, veremos que a página será carregada dentro da janela a direita dimensionada com 80% do tamanho da janela. Veja no código fonte que a página inicio.htm tem o atributo NAME, que nos permite direcionar o frame que desejamos mostrar no acionamento do link.

Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/ :16 4 Digite os comando abaixo no bloco de notas e grave como EXERC27FRAME.HTM e carregue a home-page no navegador. Exemplo de pagina com FRAME e Links Pagina Exemplo de FRAMES TESTE TESTE TESTE

Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/ :16 5 Digite os comando abaixo no bloco de notas e grave como CABECALHO.HTM. Cabeçalho do Frame Plantas Medicinais Tudo sobre plantas medicinais que você gostaria de saber ! ! ! Digite os comando abaixo no bloco de notas e grave como INDICE.HTM. Índice do Frame Introdução. Alecrim. Arruda. Camomila.

Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/ :16 6 Digite os comando abaixo no bloco de notas e grave como INICIO.HTM. Pagina Inicial do Frame Esta é a página Inicial do Exercício sobre Frames Informa que o assunto a ser visto é: P L A N T A S M E D I C I N A I S Digite os comando abaixo no bloco de notas e grave como ALECRIM.HTM. Pagina Sobre Plantas Medicinais - Alecrim Esta é uma planta que possui um forte cheiro. Sobre plantas medicinais, dizem ser um excelente cicatrizante.

Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/ :16 7 Retornar – Início Digite os comando abaixo no bloco de notas e grave como ARRUDA.HTM. Pagina Sobre Plantas Medicinais - Arruda Esta é uma planta que também possui um forte cheiro. Sobre plantas medicinais, dizem ser usada para aumentar a resistência dos vasos sanguíneos. Planta que adquiriu fama como protetora de mau-olhado e outras vibra- ções negativas. Retornar – Início

Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/ :16 8 Digite os comando abaixo no bloco de notas e grave como CAMOMILA.HTM. Pagina Sobre Plantas Medicinais - Camomila Esta é uma planta muito utilizada em chás, principalmente para bebês como calmante e também para cólicas... Retornar – Início COMPOSIÇÕES COM FRAMES A TAG FRAMESET possui atributos que permitem dividir a janela do browser em colunas ou também em linhas, como já foi visto nos exercícios anteriores. Utilizando o FRAMESET e os atributos COLS e/ou ROWS, podemos criar algumas composições, como ilustram os exemplos a seguir:

Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/ :16 9

Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/ :16 10 Os frames que exibirão conteúdos fixos, não necessitam do atributo NAME, mas aqueles que terão seus conteúdos trocados ou reexibidos, necessitam do NAME para ser referenciado o local de exibição. ATRIBUTOS DO FRAME O frame possui mais alguns atributos que permitem oferecer um controle sobre a apresentação de cada página. Retirar bordas do frame FRAMESET FRAMEBORDER=NO Retirar o espaço entre os frames FRAMESET FRAMEBORDER=NO BORDER=0

Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/ :16 11 ATRIBUTOS DO FRAME Retirar a barra de rolagem do frame FRAMESET SCROLLING=NO Obs.: A barra de rolagem está sempre a direita da janela. Digite os comandos abaixo no bloco de notas e grave como EXERC28FRAME.HTM e carregue no browser. Exemplo de pagina com FRAME e Links Pagina Exemplo de FRAMES (continua ....)

Prof. João Ricardo Andrêo Programação p/ INTERNET - HTML 31/5/ :16 12 TESTE TESTE TESTE Vamos construir um site utilizando FRAME, conforme a figura abaixo, contendo na coluna da esquerda um índice (links com lista numerada) de todas as atividades desenvolvidas. Grave no bloco de notas como EXERC29FRAME.HTM e o índice como EXERC29INDICE.HTM. Índice Exerc1 Exerc2 Exerc Curso Técnico em Informática 3º Ciclo Acesse os links ao lado para ver as atividades realizadas Carregar as páginas aqui