Frame dentro de Frame (aninhados) - Como criar um site com cabeçalho, menu e rodapé

Agora que já aprendemos bem o uso dos frames, bem como usar algumas de suas configurações e características, como barra de rolagem e bordas, vamos fazer um site mais complexo, com cabeçalho, menu e rodapé, todos em frames.

E como iremos usar frames em coluna e em linha, temos que usar os conceitos de frames aninhados, que nada mais são que frames dentro de outros.
Clique aqui e obtenha seu certificado do curso de HTML

Estude offline: Apostila HTML + CSS

Criando cabeçalho e rodapé do site

Nosso objetivo neste artigo é criar um site bem dividido, com cabeçalho, menu lateral, frame de conteúdo e o de rodapé.
Note que já temos o documento HTML do menu e do conteúdo, usados no artigo passado.

Vamos usar todos os conhecimentos que obtivemos nesta seção sobre frames em HTML de nosso curso.

Antes de mais nada, precisamos criar duas páginas HTML.
Uma é o cabeçalho, que vamos chamar de header.html e terá o nome de nosso site e o símbolo abaixo (salve com o nome de HTML-cabecalho.png).

Colocaremos a imagem e o nome do site em uma tabela, para ficarem sempre alinhados, e centralizaremos.

O código de nosso cabeçalho será:

<!DOCTYPE html>
 
<html>
 <head>
  <title> Cabeçalho </title>
  <meta name="description" content="Nome e símbolo do HTML Progressivo">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 </head>
 
 <body>
  <table cellspacing="10" align="left">
   <tr>
    <td align="center"><img src="HTML-cabecalho.png" width="30%" height="10%"></td>
    <td align="center"><h2>HTML Progressivo</h2></td>

   </tr>
  </table>
 </body>

</html>

E mais simples que o cabeçalho, somente o rodapé, em que simplesmente exibimos uma mensagem de direitos autorais. Vamos chamar esse documento de foot.html
O código do rodapé seria:

<!DOCTYPE html>
 
<html>
 <head>
  <title> Rodapé </title>
  <meta name="description" content="Rodapé do site com informações de direitos autorais">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 </head>
 
 <body>
  <table align="center"><tr><td>
     <br /><br /><br />
     <a href="http://www.htmlprogressivo.net/">Curso HTML Progressivo</a>, todos os direitos reservados, 2013 ©
  </td></tr></table>
 </body>

</html>

Frames aninhados - Frames dentro de Frames

Agora já temos os documentos necessários para montar nosso site!
Temos o header.html, o menu.html (fizemos no tutorial que ensina como criar um site com dois frames), o conteúdo inicial home.html (também criado naquele tutorial) e o foot.html

Agora só precisamos configurar nossa página principal index.html com as informações dos frames, como os tamanhos e disposições deles.
E é aí que vai entrar um problema.

Queremos um site com 4 frames, um no topo, outro no rodapé, e dois lado a lado no centro.
Ou seja, haverá frames que estão um abaixo do outro, e um ao lado do outro.
São frames em colunas e em linhas, mas vimos que somente podemos colocar frames em colunas OU em linhas, e não ao mesmo tempo.

Veja a figura a seguir, é como queremos dispor os frames:

O segredo para resolver esse problema é, inicialmente, criar 3 frames, e colocá-los em linha (um abaixo do outro, rows).
Esses frames são: o amarelo (cabeçalho), o azul (menu + conteúdo) e o vermelho (rodapé).

Então vamos criar um frameset com 3 frames em linha (rows), onde o primeiro e o último ocupam 10% da tela cada, e o do meio 80%.

Vamos chamar o primeiro frame de 'head' e o terceiro de 'foot'.

No frame do meio, em vez de usar a tag <frame>, vamos criar OUTRO frameset.
E dentro deste frameset nós vamos criar dois frames que estão em coluna (cols), onde a primeira coluna ocupa 20% (será o menu) e a outra ocupa o espaço restante (conteúdo).

Ou seja, o frame do meio é um frame especial, pois é um frame que contém dois outros frames dentro dele, para que possamos colocá-los lado a lado.

Veja como fica o código de nossa index.html

<!DOCTYPE html>
 
<html>
 <head>
  <title> Frames em HTML </title>
  <meta name="description" content="Framset - Como usar frames em sites HTML">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 </head>

    <frameset rows="20%,80%,20%">
        <frame name="head" src="header.html" noresize="no">
        <frameset cols="20%,*">
         <frame name="menu" src="menu.html" noresize="no"></frame>
         <frame name="conteudo" src="home.html" noresize="no"></frame>
     </frameset>
        <frame name="foot" src="foot.html" noresize="no">
    </frameset>

</html

Se rodar o código, verá como ficou nosso site:

3 comentários:

Senhor Soberano disse...: será que vc pode colocar o código completo...; 29 de abril de 2015 às 13:36
Unknown disse...: É obrigatório usar frames? Desde ontem to tentando entender exatamente pra que serve mas não to entendendo. Aquele exemplo do site da globo e UOL embaralhou tudo :( não entendi o por quê mostrar dois sites num site só. Frames seria quando por exemplo eu quiser ser redirecionada a outro site? Vamos supor que no rodapé tem o link da pessoa que fez o layout, se eu apertar lá e for redirecionada pra o site dela, por trás disso há um frame? Enfim kkkkkk não sei se deu pra entender.; 26 de novembro de 2015 às 05:47
Anônimo disse...: frame serve para vc dividir uma pagina em pedaços e abrir outras paginas dentro desses pedaços, é muito usado como pagina inicial. para vc abrir uma pagina clicando nela vc tem que relacionar uma palavra ou uma imagem a um link.; 20 de julho de 2016 às 15:58