Neste tutorial de nosso curso de HTML, iremos aprender como direcionar um link para ter seu conteúdo exibido em outro frame, bem como configurar as bordas e barra de rolagem de nossos frames.
Tire já sua certificação em HTML
Direcionando links - Atributos name e target
No tutorial passado criamos diversas páginas (home, contato, index etc) para trabalharmos com elas.Se já tiver criado, não as apague, iremos usar durante esta seção de frames de nossa apostila.
Se não tiver criado, vá no tutorial, estude e crie, é necessário para este artigo.
Como puderam ver, finalmente criamos os frames.
Mas experimentou clicar nos links?
Se clicar, vai ver que o frame vai mudar, vai pro endereço pra onde o link aponta.
Porém, o frame que muda é o frame do menu.
Isso acontece porque você não especificou que frame deve ser atualizado quando você clica em um link. Imagine que tenha vários frames em sua página.
Você quer que o clique em uma atualize a página em outra. E se clicar num terceiro frame, altera o conteúdo de um quarto frame?
Enfim, há muitas possibilidades, e basicamente o que queremos dizer é "Hey, HTML, quando eu clicar neste link deste frame não quero que atualize ele, e sim este outro frame, ok?"
Dando nome aos bois...e aos frames
Como identifico um frame? Como o HTML vai saber que frame atualizar? Aliás, como digo isso a ele?Como a nossa amada linguagem HTML faz de tudo para facilitar nossas vidas, a maneira de identificar os frames é a mais óbvia e simples possível: através de nomes.
Isso mesmo, dentro das configurações (frameset), vamos dar nome para cada frame, através do atributo name.
A sintaxe é bem simples:
name="Nome_do_seu_frame"
Por exemplo, nós usamos dois frames no tutorial passado, vamos nomeá-los de "menu" e "conteudo".
O código de nossa index.html se torna:
<!DOCTYPE html> <html> <head> <title> Frames em HTML </title> <meta name="description" content="Framset - Como usar frames em sites HTML"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <frameset cols="20%,*"> <frame name="menu" src="menu.html"></frame> <frame name="conteudo" src="home.html"></frame> </frameset> </html>
Como de costume, bem simples. Vamos ao próximo passo.
Avisando o frame de destino
Pronto, agora que cada nome tem seu nome, usaremos esse atributo para identificar e trabalhar com os frames.Agora queremos que, ao clicar em um link do menu, a página de destino desse link se abra no frame de conteúdo. Ou seja, clicamos no menu a esquerda e a página aparece no frame da direita.
Assim nosso menu nunca muda, sempre fica fixo lá.
Fazemos essa ligação entre um link e um frame através do atributo target, que em inglês significa alvo, objetivo. E é isso que vamos fazer, vamos dizer ao link qual será o alvo dele, onde ele deverá abrir.
No caso,. vamos fazer esse target apontar para o frame que desejarmos.
Vamos adicionar o atributo target aos links de nosso menu, e vamos fazer com que ao clicar nesses links do menu, seja atualizada o frame que contém a página de conteúdo.
Isso é feito adicionando a tag <a> o atributo target.
Portanto, o código HTML de nosso menu.html se torna:
<a href="home.html" target="conteudo">Home</a><br /><br /> <a href="html.html" target="conteudo">Apostila de HTML</a><br /><br /> <a href="css.html" target="conteudo">Apostila de CSS</a><br /><br /> <a href="html5.html" target="conteudo">Apostila de HTML 5</a><br /><br /> <a href="sobre.html" target="conteudo">Sobre o autor</a><br /><br /> <a href="contato.html" target="conteudo">Contato</a><br /><br />
Agora testem! Vejam que maravilha!
Você clica no menu lateral, e a página abre na direita!
Interessantes, não?
Bordas de um frame - O atributo frameborder
Vamos agora dar início ao estudo de alguns atributos dos frames, que nos permitirão manipular e estilizar mais nossos sites.A primeira coisa que notamos quando começamos a usar frames, é que eles criam uma borda, uma espécie de divisão em nosso site.
Ela pode ser útil para o leitor saber a divisão do site, como ele funciona.
Porém, você também tem a opção de não exibir essa borda, que é exibida por padrão.
Isso será definido pelo atributo frameborder, da tag frame.
Se quiser que apareça a borda, faça este atributo receber valor 1:
<frame name="menu" src="menu.html" frameborder="1"></frame>
<frame name="conteudo" src="home.html" frameborder="1"></frame>
Se não quiser que apareça, faça ele receber valor 0:
<frame name="menu" src="menu.html" frameborder="0"></frame>
<frame name="conteudo" src="home.html" frameborder="0"></frame>
Barra de rolagem (scroll bar) - O atributo scrolling
Outro elemento que pode aparecer nos frames é a barra de rolagem, que serve para o usuário rolá-la para ver mais conteúdo.Definimos se a barra de rolagem aparece ou não através do atributo scrolling.
Este atributo pode receber três diferentes valores:
"yes" - Sempre exibe a barra de rolagem
"no" - Não exibe
"auto" - Exibe caso seja necessário para ver o restante do conteúdo
Alterando o tamanho de um frame - O atributo resize
Se notar, quando criamos frames em sites HTML e posicionarmos o mouse na linha que divide as páginas, veremos que é possível alterar o tamanho de cada frame.Como tudo em HTML e em desenvolvimento Web, podemos manipular e configurar do jeito que quisermos, inclusive o tamanho dos frames.
Podemos fixar o tamanho de um frame, ou deixá-lo livre para ser modificado, através do atributo resize (redimensionar, em inglês), da tag <frame>.
Se quiser fixar, faça:
resize="no"
Se quiser deixar o frame livre para ser mudado de tamanho (que é o padrão), faça:
resize="yes"
5 comentários:
Alguns comandos não funcionaram comigo, como o scrolling e o resize.
No meu caso a tag 'frameborder' não funciona.
Pelo que eu vi, seria mais interessante inserir o atributo ' border = "1" ' na tag frameset para visível e ' border = "0" ' para não visível.
Gostaria de saber como utilizar este atributo (frameborder).
Obrigado.
Para aqueles (se alguém ainda vem kkkk) se não funcionar o resize="no", utilize o NORESIZE.
Eu sou apaixonado por página com FRAMES, acho mais dinâmicos, simples e atraentes, o DIV é chato e cheio de coisas.É uma pena que é cada vez menos usado. Mas continuarei usando enquanto os browsers ainda os reconhecerem. Sempre serei um fã dos FRAMES.
Postar um comentário