Rafael Paulino Desenvolvedor web e mobile

portfolio de Rafael Paulino desenvolvedor web e mobile

Blog - Frames e Iframes

Postado por Rafael Paulino - sábado, 30 de março de 2013

Frames:

Os frames são como recipientes,dentro de cada frame você pode colocar uma parte do site, e depois juntá-las. Ex: Menu,topo,rodapé,conteúdo,etc…

Veja abaixo o código para a criação de um Frame:

<html><head><title>Exemplo1</title></head>

<frameset rows="103,*" frameborder="0" framespacing="0" border="0">

<frame src="topo.html" scrolling="no">

<frameset cols="150,*">

<frame src="menu.html">
<frame name="principal" src="conteudo.html">
</frameset>
</frameset>
</html>

Explicação do código acima:

<frameset></frameset> – Define o conjunto de regiões da tela.
cols=”x,y,…” – Número de regiões verticais (linhas).
rows=”x,y,…” – Número de regiões Horizontais (Colunas).
frameborder=”valor” – Define se borda terá um efeito 3d.
framespacing=”valor” – Define as margens entre os quadros.
border=”valor” – Espessura da linha divisória.
bordercolor=”cor” – Cor da linha divisória.
<frame src=”pagina.html”> – Carrega uma página na região da tela.
name=”nome da página”
scrolling=”yes|no|auto” – Exibe ou oculta a barra de rolagem
noresize – Fixa a linha divisória.

 

E para você mudar o conteúdo da página principal você precisa do comando

<base target="nome da página">

Veja o exemplo da página menu.html

<html><head><base target="principal"></head><body>......

 

<noframes>site sem frames</noframes>

Carrega um site sem frames, quando o navegador não suportar o comando Frame.

Exemplo:

<html><head><title>Exemplo1</title></head>

<frameset rows="103,*" frameborder="0" framespacing="0" border="0">

<frame src="topo.html" scrolling="no">

<frameset cols="150,*">

<frame src="menu.html">
<frame name="principal" src="conteudo.html">
</frameset>
</frameset>

<noframes>

<body>

<p>Esta página usa quadros eo seu navegador não aceita quadros.</p>

</body>

</noframes>
</html>

 

Iframes:

 

Iframes são páginas dentro de páginas,veja abaixo o código para se criar um Iframe:

Lembrando que os Iframes são colocados entre as tags <body>…</body>.

<iframe id="exemplo2" name="exe2" src="http://www.google.com.br" width="300" height="300" scrolling="auto" marginwidth="0" marginheight="0" ></iframe>

Explicação do código acima:

id – Identificação da iframe.
name – Nome da iframe.
src=”” – Carrega uma página dentro do Iframe.
width=”” e height=”” – Largura e altura do Iframe.
scrolling=”no|yes|auto” – Exibe ou oculta a barra de rolagem.
marginwidth=”0″ marginheight=”0″ – Margens horizontal e vertical.
Para abrir um outro site dentro desse Iframe ao clicar em algum link você deve colocar o código abaixo no seu link (Ou seja o nome do iframe dentro do atributo target do link).

<a href="http://www.rafapaulino.com" target="exe2">Clique aqui e veja o link em ação</a>


Rafael Paulino

Rafael Paulino: Desenvolvedor web e mobile, atua na área desde 2008, apaixonado por esportes principalmente por corrida, musculação, natação e artes marciais. PHP - jQuery - Java Script - Ajax - XHTML5 - CSS - iOS

Veja também:



Recomende 

Entre em contato