Portal
[Autor: Gleison]
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.
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">
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">
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">
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.
ser usado scroll.
Para isso usamos os atributos border, frameborder, noresize, scrolling.
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">
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”).
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 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.
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.
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.
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.
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.
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.
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 poderser 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.
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.
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