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

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.
Curso de HTML online grátis
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:
Apostila de HTML completa para download

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:

Tutorial de HTML completo

3 comentários:

Senhor Soberano disse...

será que vc pode colocar o código completo...

Izabela Lins 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.

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.