Aqui você irá aprender a criar uma página usando iframes. Mas afinal, o que são iframes?
Iframes são quadros que permitem que páginas sejam abertas dentro deles. Por exemplo, aqui no site do Cute Things, quando alguém clica em algum link a página abre dentro da parte de posts e não em uma nova janela.
<iframe name="menu" width="x" height="x" src="endereço_da_pagina_principal.htm" scrolling="no" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</iframe>
Name: Nome do iframe
Width: Largura do iFrame
Height: Altura do iFrame
Src: Link da primeira página que abrirá no iframe
Scrolling: Permite que apareça barra de rolagem se o tamanho da página ultrapassar o tamanho do iframe. Você pode habilitar colocando um "yes" no lugar do "no" ou colocar um "auto" se quiser que apareça apenas se a página interna ultrapassar o tamanho do iframe.
Frameborder: É a borda do iframe. Se você colocar "0" a borda não irá aparecer (fica muito melhor assim)
marginwidth: Margem da Largura (geralmente usa-se "0")
marginheight: Margem da Altura (geralmente usa-se "0")
Width: Largura do iFrame
Height: Altura do iFrame
Src: Link da primeira página que abrirá no iframe
Scrolling: Permite que apareça barra de rolagem se o tamanho da página ultrapassar o tamanho do iframe. Você pode habilitar colocando um "yes" no lugar do "no" ou colocar um "auto" se quiser que apareça apenas se a página interna ultrapassar o tamanho do iframe.
Frameborder: É a borda do iframe. Se você colocar "0" a borda não irá aparecer (fica muito melhor assim)
marginwidth: Margem da Largura (geralmente usa-se "0")
marginheight: Margem da Altura (geralmente usa-se "0")
O nome do iframe é muito importante pois quando queremos que uma página abra em um iframe, precisamos colocar, no link que irá abrir essa página, o alvo do link (nome do iframe). Por exemplo:
<a href="extras.htm" target="menu">Link da página</a>
Sendo MENU o nome do iframe. Então a página extras.htm abrirá no iframe.
Para criar uma página com iframe, precisamos de, no mínimo duas páginas, a principal e a página que abrirá no iframe. A principal será a página inicial do site, onde ficarão os links das páginas que abrirão no iframe.
Exemplo:
O html simples da página acima ficaria mais ou menos assim:
<html>
<head>
<title>Extras</title>
</head>
<head>
<title>Extras</title>
</head>
<body>
<a href="extras.htm" target="menu">Extras</a>
<iframe name="menu" width="300" height="400" src="extras.htm" scrolling="no" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</iframe>
</body>
</html>
</html>
Onde:
<html> – É a tag que inicia uma página em html
<head> – É a a tag que inicia o cabeçalho de uma página
<title> – É a tag que dá o título da página
<body> – É a tag onde ficará todo o conteúdo que aparecerá na página
</body> – É a tag que fecha o corpo da página
</head> – É a tag que fecha o cabeçalho da página
</html> – É a tag que fecha a página de html
<head> – É a a tag que inicia o cabeçalho de uma página
<title> – É a tag que dá o título da página
<body> – É a tag onde ficará todo o conteúdo que aparecerá na página
</body> – É a tag que fecha o corpo da página
</head> – É a tag que fecha o cabeçalho da página
</html> – É a tag que fecha a página de html
A outra página será a página do iframe. Exemplo: A página extras.htm
O html simples da página extras.htm ficaria assim:
<html>
<head>
<title>Extras</title>
</head>
<head>
<title>Extras</title>
</head>
<body>
Extras
Esta será a página de extras…
</body>
</html>
</html>
OBS: Lembrando que, a página que irá aparecer no iframe (no caso a extras.htm) Não
precisa colocar o código de iframe no html.
Criando um iframe transparente
Para deixar um iframe transparente você precisa fazer duas coisas:
1. Adicione o texto allowtransparency="true" dentro do código do iframe. O código do iframe ficará assim:
<iframe name="menu" width="x" height="x" src="extras.htm" scrolling="no"
frameborder="0" marginwidth="0" marginheight="0" allowtransparency="true">
</iframe>
frameborder="0" marginwidth="0" marginheight="0" allowtransparency="true">
</iframe>
2. Adicione texto bgcolor="transparent" na tag <body> da página que abrirá no iframe. Neste caso na página extras.htm. O código ficará assim:
<html>
<head>
<title>Extras</title>
</head>
<head>
<title>Extras</title>
</head>
<body bgcolor="transparent">
Extras
Esta será a página de extras…
</body>
</html>
</html>
Pronto! Agora você já sabe criar uma página com iframes! Agora é só ajustar o tamanho e a largura do seu iframe de acordo com o tamanho de seu site/blog.
Lembrando que:
Você deve ter mais de uma página:
- A página principal
- E as páginas que abrirão no iframe.
É muito importante que leia este tutorial com muita atenção, pois um erro mínimo poderá fazer com que todo seu trabalho não funcione. Faça seu iframe com este tutorial aberto, para que você possa ler enquanto cria sua página, assim fica muito mais fácil- E as páginas que abrirão no iframe.
Fonte: http://www.cute-things.com
0 comentários:
Postar um comentário
Deixe seu comentário aqui
Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.