Weblivre.net - Informação em Primeiro Lugar

Assine nosso RSS
Publicado em 26/01/2005 - 24 comentários - Ler artigos relacionados - Você está em: Colunas » Html

Trabalhando com Iframe

Aprenda o que é iframe e como criar uma estrutura simples de um site utilizando-o.

Um problema muito comum com os web designers é enfrentar a atualização de menus de navegação que estejam presentes em várias páginas de um site, nesse caso, a solução seria alterar em cada página? Tenho certeza que estaria perdendo um tempo valioso por algo que podemos tornar mais rápido.

Para reduzir o tempo gasto na atualização destes menus (não só menus, podemos fazer isso com qualquer parte, conteúdo do site), muitos desenvolvedores utilizam iframe, aviso desde já que não é a forma mais correta, para isso, podemos estar utilizando alguma linguagem de programação, caso se interesse segue o link de um artigo que fiz sobre isso.

Neste artigo, minha intenção não será ensinar a criar uma estrutura completa da página, mas sim, uma introdução à utilização prática de iframes.

O que é Iframe?

Primeiramente devemos saber que iframe não é frame!

  • iframe é quando temos uma página dentro de uma outra página HTML;
  • frames são duas página distintas que dividem o site (está cada vez mais em desuso).

1) Suponhamos que seu site esteja com a seguinte estrutura:

2) O meio (iframe principal), como mostra a figura, será onde o usuário visualizará o conteúdo acessado através do menu. Sendo assim, ficaria muito mais fácil para atualizá-lo.

O código do iframe ficaria assim:

<iframe src="principal. html" heigth="100%" width="100%" frameborder="0" name="principal"></iframe>

Explicação:

  • src="principal.html" é a página que logo ao entrar no site irá ser mostrada no iframe.
  • heigth="100%" altura do iframe (colocando 100% ele automaticamente se ajudará a altura que você definiu no elemento pai);
  • width="100%" largura do iframe (colocando 100% ele automaticamente se ajudará a altura que você definiu no elemento pai);
  • frameborder="0" para não mostrar o contorno do iframe. (indica a espessura da borda do iframe, no caso de zero, ela é inexistente);
  • name="principal" aqui está a “mágica”, é a través deste nome que você irá quais os links do menu serão visualizados no iframe.

3) Já estamos terminando, agora iremos editar o menu, fazendo com que todos as páginas dos links sejam visualizadas no iframe que criamos, você deve adicionar o atributo target na tag com o valor “principal”, nome de nosso iframe, ficando desta forma: target="principal".
Exemplo: <a href="contato.html" target="principal">Contato</a>.

4) Veja como ficaria um exemplo do código:

<table width="100%">
   <tr>
      <td colspan="2">Topo</td>
   </tr>
   <tr>
      <td width="20%" heigth="400">
         <a href="contato.html" target="principal">Contato</a>
      </td>
      <td width="80%">
         <iframe src="principal.html" heigth="100%" width="100%" frameborder="0" name="principal"></iframe>
      </td>
   </tr>
</table>

Observação: Aconselho o uso de iframes por quem está começando somente, mas não é recomendável a sua utilização em páginas comerciais, pois existem alguns fatores, como por exemplo, acessibilidade, que prejudicam a qualidade final do site.

Até mais pessoal.

Artigo revisado em: 06/09/2007.

Autor: Filipe - WebLivre

Compartilhe:

Comentários

Comente este artigo!

Tiago da Conceição em 02/07/2008
Aceito receber os informativos do Weblivre.net.

Crasto em 23/04/2008
Olá, boa noite. Gostei muito de sua explicação, eu fiz e deu certo, mas eu queria aplicar o link dentro de um botão em flash que inseri a partir do próprio dreamweaver, ou seja, ao clicar no "button2.swf" ele abra a página dentro do iframe. Poderias me ajudar por favor!

lucas em 12/04/2008
Muito bem esplicado

Taiane Oliveira em 29/03/2008
Me ajudou muito para o meu trabalho!!!! Obrigada! =]

Pablo em 19/03/2008
Felipe, parabéns por ajudar a galera e pelo post. Encontrei um pequeno erro no teu código. Ao invés de heiGHT colocasse heiGTH. Como o pessoal usa ctrl+c ctrl+v como eu, não consegue controlar a altura do iframe, hehe.

www.hostsuporte.com.br em 25/02/2008
pq já existe o includ em php neh brother, iframe é passado, é somente para soluções simples

guilherme em 22/02/2008
simples e pratico o modo explicado

Diego em 21/02/2008
Porque quando usa-se o heigth="100%" o iframe não aparece em 100% da tela quando usa-se o navegador Mozilla Firefox?

adriana em 03/02/2008
Ola, sou iniciante em html. Eu fiz aqui um teste no meu...fiz tipo um menu, na primeira opçao no menu aparece td certinho no centro a iframe, mas quando eu clico na segunda opçao do menu abre outra pagina com o tal endereço q colokei. pq será? Obrigada

Luis em 04/01/2008
Estou com um probleminha estou fazendo uma pagina que esta igual o exemplo acima (topo,menu,meio) o menu possui submenu so que quando o mouse sai do submenu e fica sobre o iframe o submenu não sume. O submenu só desaparece se o mouse não estive sobre iframe , O que eu fazo???? agradeço! Ha otimo material.

Wendel em 13/12/2007
Gostaria de saber como faço para a página já abrir com conteúdo em algum ponto da rolagem, de maneira a deixar escondida a parte com menos importância. Aguardo.

Juraci Menezes em 12/11/2007
Achei muito bom o vosso artigo, desejo que nosso grande Deus vos der grande ajuda na vida.

Ranzo em 29/10/2007
olá já faz uns tempos que estou procurando umsite que me mostra-se como que eu posso fazer o tal de "iframe" no Dreamweaver, é fód... já tentei de tudo, faço o site e quando eu dou um link para ele abrir no mesmo corpo ele da tipo uma atualizada.

´Binho em 17/10/2007
Gostaria de coloca o iframe para abrir duas paginas de uma vez qual codigo e como devo proceder? Aguardo

Julio Cesar de Souza em 11/10/2007
"Observação: Aconselho o uso de iframes por quem está começando somente, mas não é recomendável a sua utilização em páginas comerciais, pois existem alguns fatores, como por exemplo, acessibilidade, que prejudicam a qualidade final do site." por que será que o google usa iframe então.... observação sem fundamento... vlw

veras em 21/09/2007
Parabens, ficou bem simples o jeito que vc explicou ... queria saber o seguinte ... por que todo mundo desaconselha o uso do iframe , alguem pode me dizer quais os principais problemas e qual a alternativa ... obrigado pessoal !

Cleiton em 03/09/2007
A altura do IFrame não está tomando toda a altura da tabela...

FMilurndo em 16/07/2007
Amigo este assunto. Mais queria saber como almentar a altura desta tabela. Pq estou tentando alterar o tamanho para q possar ser colocado fotos e o tamanho não alterar. Vc pode m ajudar? Obrigado.

Claudio em 23/07/2006
Imagine que no exemplo acima eu tivesse no lugar do MENU um atabela cheia de fotos e ao clicar em qualquer uma delas a mesma se abriaria no espaço MEIO (iframe especial) estou tentandso fazer isso mas nã ta dando certo, preciso de ajuda. Obrigado Claudio

Santos em 16/02/2006
Como faço para inserir um texto dentro de um iframe e este mesmo texto ficar transparente sobre a imagem de fundo de forma que eu consiga visualizar o texto sobre a imagem....obrigado a todos.

Ane em 14/09/2005
Eu não consigo fazer os links do menu abrirem no iframe!!! Eles abrem em uma nova janela, como se eu tivesse colocado target="new". HELPPPP

Tiago Lopes em 04/09/2005
Encontrei aqui a explicação q não encontrava em nenhum outro lugar, parabéns! Me salvou.

Laura em 07/06/2005
cola esse cod em qualquer lugar ou tem que colocar em alguma das tags ,...

Leandro em 30/05/2005
Acima o Leonardo, que escreveu a matéria, comenta que para ajustar a altura é necessário somente utilizar um comando - heigth="100%" altura do iframe (colocando 100% ele pegará a altura que você definiu na tabela). Minha pergunta é como ajusto a altura d

2004-2008 Weblivre.net Todos os direitos reservados.

Quem somos | Política de Acesso | Anuncie | Na Mídia | Seja um Colunista | Sugestão de Pauta | Fale Conosco

Idealização: Webla - Comunicação Digital