Curso de HTML - Aula 6 - Frames Hitskin_logo Hitskin.com

Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o temaVoltar para a ficha do tema

Aldeia RPG
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

Curso de HTML - Aula 6 - Frames

Ir para baixo

Curso de HTML - Aula 6 - Frames Empty Curso de HTML - Aula 6 - Frames

Mensagem por Lief Ter Dez 25, 2012 8:16 pm

[Autor: Gleison]
Curso de HTML - Aula 6 - Frames Aulcj0




O que são paginas frames?

O conceito de paginas frames é antigo, no inicio a ideia era dar mais interatividade na página, entretanto
não havia muito suporte por parte dos navegadores, porem quando ele ganhou suporte começou a
surgir a Web 2.0 que trazia uma maior interatividade fazendo com que os frames entrassem em desuso.
Todos nós estamos acostumados com frames, entretanto muitos nem sabem. Ao alternar entre uma
anela da configuração de vídeo do seu sistema operacional, você está alternando entre frames.
Pois bem o conceito é esse uma pagina frame e apenas uma moldura que chama outras paginas, sendo
assim na pagina do frame não existe conteúdo.




Usando frames
Para criarmos uma pagina com frame usamos o tag logo após o tag , ele
deve vir acompanhado do atributo rows ou cols que este fará a identificação de qual será a posição das
divisórias.

Crie um novo documento com o nome ex5.html e digite os codigos necessários para a pagina ate o tag <
head>.
o seu codigo deve estar parecido com o abaixo.



</font>Exercício 5<font color="blue">



Agora vamos inserir os tags de referencia para o frame, acrescente o seguinte código cols="20,80">



o seu codigo deve estar parecido com o abaixo.



</font>Exercício 5<font color="blue">






Salve seu arquivo e abra-o no navegador, veja que temos uma pagina dividida em duas partes onde na
esquerda está aberta a página ex4.html e na direita a página ex3.html.
Vejamos o que acabamos de fazer, quando foi definido o atributo cols, nos definimos que seria uma
pagina com divisões verticais e os valores 20 e 80 como o tamanho para cada lado da divisão, sendo que
se quiséssemos mais uma divisão bastaria acrescentar mais um valor.
O atributo name foi colocado para a orientação de links, que será aprendido mais para a frente.
O que definiu onde cada pagina seria aberta neste caso, foi a ordem na qual foram citadas.

Agora vamos inserir os tags de referencia para o frame, modifique o código no lugar de cols coloque
rows, e no lugar de esquerdo e direito coloque acima e abaixo, e salve o documento e o atualize no
navegador.

o seu codigo deve estar parecido com o abaixo.



</font>Exercício 5<font color="blue">

rows="20,*">
acima”>
abaixo”>






Criando frames relativos.
Outro recurso que pode ser usado em frames é criar frames relativos.
Volte ao ex5.html e modifique o código: onde está 80 coloque *.
Salve o documento e atualize no navegador.
Salve o documento e atualize no navegador.
o seu codigo deve estar parecido com o abaixo.


</font>Exercício 5<font color="blue">

rows="20,*">
acima”>
abaixo”>



O que fizemos agora é dizer para o navegador que o primeiro frame deve ter 20 pixels e
ocupar o restante do espaço na pagina.

Volte ao ex5.html e modifique o código: onde está 20 coloque 40%.

Salve o documento e atualize no navegador.

o seu codigo deve estar parecido com o abaixo.



</font>Exercício 5<font color="blue">

rows="40%,*">
acima”>
abaixo”>

O que fizemos agora é dizer para o navegador que o primeiro frame deve ter 40% da pagina e o segundo

O que fizemos agora é dizer para o navegador que o primeiro frame deve ter 40% da pagina e o segundo
deve ocupar o restante do espaço na pagina.

Volte ao ex5.html e modifique o código: onde está * coloque 60%.
Salve o documento e atualize no navegador.

o seu codigo deve estar parecido com o abaixo.



</font>Exercício 5<font color="blue">





O que fizemos agora é dizer para o navegador que o primeiro frame deve ter 40% da pagina e o segundo
deve ocupar 60% do espaço na pagina.




Permitindo ou não bordas e scroll e redimensionamento.
Com frames também podemos definir se as bordas aparecerão e se serão redimensionáveis e se poder
ser usado scroll.
Para isso usamos os atributos border, frameborder, noresize, scrolling.




Inserindo bordas.
Volte ao ex5.html e adcione o seguinte código a linha frameset: frameborder=”Yes” border=”3”
Salve o documento e atualize no navegador. Veja que agora é exibido uma borda entre as duas páginas
deve ocupar o restante do espaço na pagina.

que elas tem a largura de 3 pixels.

o seu codigo deve estar parecido com o abaixo.



</font>Exercício 5<font color="blue">






O que fizemos agora é dizer para o navegador que o recurso de bordas deve estar ativado (opção
frameborder com o valor “Yes” permite bordas, já com o valor “no” elas não aparecerão)e que a borda
deve ter a espessura de 3 pixels.

bloqueando o redimensionamento e o scrolling.

Volte ao ex5.html e adcione o seguinte código na primeira linha frame src: noresize=”noresize”
scrolling=”yes”
Salve o documento e atualize no navegador. Veja que agora é exibido uma borda entre as duas páginas e
que elas tem a largura de 3 pixels.

o seu codigo deve estar parecido com o abaixo.



</font>Exercício 5<font color="blue">


noresize=”noresize” scrolling=”yes”>




O que fizemos agora é dizer para o navegador que o recurso de redimensionamento deve estar
desativado (opção noresize com o valor “noresize” permite redimensionamento, para permitir o
redimensionamento e só não adcionar o noresize )e que o recurso de scrolling deve estar ativado(opção
scrolling com o valor “yes” permite scrolling, para não permitir o scrolling e só usar o valor “no”).



Inserindo texto para navegadores sem suporte a frames.
O recurso de frames permite que sejam criadas paginas dentro da estrutura do frames afim de que sejam
exibidas caso o navegador não ofereça suporte, para isso usamos o tag </font> antes do tag <font color="green"><body></font><br />Faça as modificações afim de que seu documento esteje como o abaixo.<br /><br />o seu codigo deve estar parecido com o abaixo.<br /> <br /><font color="blue"><HTML> <br /><head> <br /><title></font>Exercício 5<font color="blue"></title> <br /></head><br /><frameset rows="40%,60%" frameborder=”Yes” border=”3”><br /><frame src=”ex4.html” name=”acima” noresize=”noresize” scrolling=”yes”><br /><frame src=”ex3.html” name=”abaixo”><br /><strong><body><noframes></font>[b]Esta pagina usa o recurso de frames, porém seu navegador não suporta este recurso.<BR><br />Aconselhamos que atualizasse seu navegador por uma versão mais recente.<br /><font color="blue"><br />

O que fizemos agora é inserir uma mensagem que será mostrada em um navegador que não ofereça o
suporte a frames, lembrando que neste ponto você pode criar uma pagina completa.




Exercício
Crie uma pagina:
Nome:exepratico3.html
Titulo:Exercicio Pratico 3
Texto Centralizado: Aulas de HTML
Pule uma linha
Texto Restante: Crie uma página usando todos os recursos até aqui apresentados.
Crie uma pagina:
Nome:exepratico4.html
Titulo:Exercicio Pratico 4
Texto Centralizado: Aulas de HTML
Pule uma linha
Texto Restante: Crie uma página usando todos os recursos até aqui apresentados.
Crie uma pagina frame:
Nome:exepratico5.html
Titulo:Exercicio Pratico 5
Divisão: 2 divisões verticais (uma com nome esquerda e a outra como direito)
Divisão esquerda: Nesta pagina deve aparecer o exepratico3.html
Divisão direito: Nesta pagina deve aparecer o exepratico4.html




Perdeu alguma aula?, Quer saber qual é a proxima? Visite o Indice
Clique aqui

Clique aqui para visitar o site oficial
Lief
Lief
Desenvolvedor
Desenvolvedor

Mensagens : 834
Créditos : 50

http://shafou.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos