Arena RPG Maker
Olá, visitante!
Seja bem-vindo ao fórum Arena RPG Maker, caso queira aprender sobre criação de jogos, está no fórum certo. Esperamos que possa aprender tanto quanto possa nos ensinar aqui.

Atenciosamente,
Equipe Arena RPG Maker.
Arena RPG Maker

Estamos de volta o/ ... Ou não.Eu amo a -Dark
Doações para o fórum abertas, clique aqui e saiba mais.
Últimos assuntos
» Pokémon Genesis Online! (PGO)
Qua 05 Jul 2017, 17:08 por Lexar

» Tileset Converter to MV
Sex 12 Maio 2017, 13:07 por Douggi

» [Dúvida] Como tirar a porcentagem de esquiva
Ter 09 Maio 2017, 22:15 por Neil Flame Runner

» Pack Resources, Sprites e etc
Qua 23 Dez 2015, 09:30 por raydengv

» Download RPG Maker 2003 + RTP em português
Ter 22 Dez 2015, 08:14 por ::KimMax::

» Fantasy Art Online
Dom 18 Out 2015, 16:42 por daviih123

» Você vai ter medo do Nerve gear?
Sab 25 Jul 2015, 16:02 por Kirito-kun

» O Barato é louco
Sab 27 Jun 2015, 15:26 por Halt

» Download RPG Maker 2000 + RTP em português
Qui 21 Maio 2015, 19:28 por Wismael

» Divulgando meu grupo e página do Facebook
Ter 19 Maio 2015, 13:06 por Halt


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1Tutorial Curso de HTML - Aula 6 - Frames em Qui 20 Dez 2012, 17:24

Halt

avatar
Administrador
Administrador
[Autor: Gleison]




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 <frameset></frameset> logo após o tag <head>, 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.

<HTML>
<head>
<title>
Exercício 5</title>
</head>
</HTML>


Agora vamos inserir os tags de referencia para o frame, acrescente o seguinte código <frameset
cols="20,80">
<frame src=”ex4.html” name=”esquerdo”>
<frame src=”ex3.html” name=”direito”>
</frameset>

o seu codigo deve estar parecido com o abaixo.

<HTML>
<head>
<title>
Exercício 5</title>
</head>
<frameset cols="20,80">
<frame src=”ex4.html” name=”esquerdo”>
<frame src=”ex3.html” name=”direito”></frameset>
</HTML>


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.

<HTML>
<head>
<title>
Exercício 5</title>
</head>
<frameset rows="20,*">
<frame src=”ex4.html” name=”acima”>
<frame src=”ex3.html” name=”abaixo”>
</frameset>
</HTML>





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.
<HTML>
<head>
<title>
Exercício 5</title>
</head>
<frameset rows="20,*">
<frame src=”ex4.html” name=”acima”>
<frame src=”ex3.html” name=”abaixo”>
</frameset>
</HTML>


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.

<HTML>
<head>
<title>
Exercício 5</title>
</head>
<frameset rows="40%,*">
<frame src=”ex4.html” name=”acima”>
<frame src=”ex3.html” name=”abaixo”>
</frameset>
</HTML>
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.

<HTML>
<head>
<title>
Exercício 5</title>
</head>
<frameset rows="40%,60%">
<frame src=”ex4.html” name=”acima”>
<frame src=”ex3.html” name=”abaixo”>
</HTML>

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.

<HTML>
<head>
<title>
Exercício 5</title>
</head>
<frameset rows="40%,60%" frameborder=”Yes” border=”3”>
<frame src=”ex4.html” name=”acima”>
<frame src=”ex3.html” name=”abaixo”>
</frameset>
</HTML>

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.

<HTML>
<head>
<title>
Exercício 5</title>
</head>
<frameset rows="40%,60%" frameborder=”Yes” border=”3”>
<frame src=”ex4.html” name=”acima” noresize=”noresize” scrolling=”yes”>
<frame src=”ex3.html” name=”abaixo”>
</frameset>
</HTML>


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 <noframes> antes do tag <body>
Faça as modificações afim de que seu documento esteje como o abaixo.

o seu codigo deve estar parecido com o abaixo.

<HTML>
<head>
<title>
Exercício 5</title>
</head>
<frameset rows="40%,60%" frameborder=”Yes” border=”3”>
<frame src=”ex4.html” name=”acima” noresize=”noresize” scrolling=”yes”>
<frame src=”ex3.html” name=”abaixo”>
<body><noframes>
[b]Esta pagina usa o recurso de frames, porém seu navegador não suporta este recurso.<BR>
Aconselhamos que atualizasse seu navegador por uma versão mais recente.

</noframes>
</body>
</HTML>
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


__________________________________________

Ei Convidado, sim você mesmo! Ajude o fórum à crescer postando coisas úteis, dê sugestões para melhorar-mos e divulgue o fórum.

Step inside, see the devil in I.

Gifts-
Fantasy - Fantasy - Fantasy - ~Razor - Darkmel

Zerei a internet
Ver perfil do usuário http://arenarpgmaker.eclipserpg.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum