Iframe

October 27, 2008 at 6:26 pm Leave a comment

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: Uncategorized, web design. Tags: .

VII semana de Comunicaçao – Unibero Anhanguera 1º Design Show – Computer Arts 07 Novembro 2008

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Posts Recentes

Flickr Photos

And then the Fog Rolled in...

Destinations

Trillium Lake Alpine Glow

More Photos

%d bloggers like this: