Iframe
October 27, 2008
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).
Iframe define-se quando você coloca uma página HTML dentro de outra página HTML, ou seja, você precisa ter no mínimo duas páginas HTML, confira o código:
<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.
Exemplo:
Você tem uma página que se chama principal.html com o código:
<html>
<head>
<title>Teste</title>
</head>
<body>
<table width=”800″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td>Textossss1</td>
</tr>
<tr>
<td>Textossss2</td>
</tr>
<tr>
<td>Textossss3</td>
</tr>
</table><table width=”600 border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td>Aqui eu quero que entre o IFRAME depois, ou seja, eu retiro o código inteiro dessa tabela daqui e coloco o código do Iframe com o src com o nome da página</td>
</tr>
<tr>
<td>Textossss2</td>
</tr>
<tr>
<td>Textossss3</td>
</tr>
</table>
</body>
</html>
E quer jogar o conteúdo dela (no caso, as tabelas), dentro de um Iframe, você deve criar uma nova página html com o nome, exemplo conteudo.html, e jogar o que tinha na outra página dentro dele, entao seu arquivo conteudo.html ficará assim:
<html>
<head>
<title>Teste</title>
</head>
<body>
<table width=”600 border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td>Aqui eu quero que entre o IFRAME depois, ou seja, eu retiro o código inteiro dessa tabela daqui e coloco o código do Iframe com o src com o nome da página</td>
</tr>
<tr>
<td>Textossss2</td>
</tr>
<tr>
<td>Textossss3</td>
</tr>
</table>
</body>
</html>
E aqui será a sua página chamada principal.html já alterada com o código do iframe indicando a nova página chamada conteudo.html:
<html>
<head>
<title>Teste</title>
</head>
<body>
<table width=”800″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td>Textossss1</td>
</tr>
<tr>
<td>Textossss2</td>
</tr>
<tr>
<td>Textossss3</td>
</tr>
</table><iframe src=”conteudo.html” heigth=”400″ width=”600″ frameborder=”1″ name=”conteudo”></iframe>
</body>
</html>
E a cada vez que quiser direcionar um link ( <a> ) para ele basta colocar assim <a href=”link_que_deseja.html” target=”conteudo”>Menu</a>
Entry Filed under: web design. Tags: tutorial iframe.
Trackback this post | Subscribe to the comments via RSS Feed