HTML - Frames (Datagrama)

  »   HTML  »   HTML Tutorial - Usando Frames em HTML

Frames (Datagrama) são usadas para mostrar mais de um documento HTML em uma janela. Isso significa que você terá menos conteúdo, o que mostra o papel de dizer ao navegador que páginas devem ser exibidas. Desde a introdução de PHP e CSS essa tecnica tem sido cada vez menos utilizada.

HTML - Frames, página de créditos

Geralmente frames são usadas para exibir o menu em um parate e o conteúdo em outra. Quando alguém clicar em um link do menu, outra página irá abrir a parte do conteúdo.

Exemplicaremos isso com o seguinte código:

html<html>
	<head></head>

	<frameset cols="30%,*">
		<frame src="menu.html">
		<frame src="content.html">
	</frameset>

</html>
  • frameset - a tag que estabelece as caracteristicas das frames, as frames individuais serão definidas entre elas.
  • frameset cols="#%, *" - "Cols" estabelece o peso que cada frame tem. No exemplo anterior estabelecemos que a primeira frame (menu) ocuparia 30% da área usada, e nós usamos o sinal " * " para indicar ao navegador que o resto, no resto da página mostrará o conteúdo.
  • frame src="" - o endereço dos arquivos que serão mostrados como menu e conteúdo

HTML - Frame - Adicionando um banner ou título

Use o código seguinte:

html<html>
	<head></head>
	
	<frameset rows="20%,*">
		<frame src="title.html">
		<frameset cols="30%,*">
			<frame src="menu.html">
			<frame src="content.html">
		</frameset>
	</frameset>
</html>

frameset rows="#%, *" - "rows" estabeleche o peso de cada frame que será exibida. No exemplo anterior, escolhemos que a primeira frame teria 20% e o resto do espaço seria diidido entre menu.html e content.html

HTML - Frame - Marcos - Bordas e Espaços

Você deve ter percebido que entre as frames há algumas linhas cinzas, que não na maioria das vezes é indesejada. Apagá-las é possivel usando as tags frameborder e framespacing. Esses atibutos serão introduzidos sob a tag frameset.

**Nota: Frameset e frameborder são o mesmo atributo. Alguns navegadores não reconhece os dois deles, apenas um. Dizendo isso, recomendamos usar os dois, por maior segurança.

  • frameborder"#" - O valor 0 significa que não haverá bordas
  • border="#" - modifica a grossura da borda (usado por Netscape)
  • framespacing="#" - modifica a grossura da borda (usado por Internet Explorer)

Aqui um exemplo prático:

html<html>
	<head></head>

	<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
		<frame src="title.html">
		<frameset border="0" frameborder="0" framespacing="0" cols="30%,*">
			<frame src="menu.html">
			<frame src="content.html">
		</frameset>
	</frameset>
</html>

HTML - "Frame name" e "Frame target"

Para manter o menu em sua posição atual, e então quando clicarmos para abrir a página de contatos, por exemplo, ao inves da página de conteúdo, iremos nomear cada frame e especificaremos onde ela abrirá usando a tag 'base target'.

Aqui pe o nosso código para a página:

html<html>
	<head>
		<base target="content">
	</head>

	<frameset rows="20%,*">
		<frame name="title" src="title.html">
		<frameset cols="30%,*">
			<frame name="menu" src="menu.html">
			<name="content" src="content.html">	
		</frameset>
	</frameset>
</html>

Noresize e scrolling

Você pode personalizar sua frame ainda mais usando noresize e scrolling

html<html>
	<head></head>
	
	<frameset border="2" frameborder="1" framespacing="2" rows="20%,*">
		<frame src="title.html" noresize scrolling="no">
		<frameset border="4" frameborder="1" framespacing="4" cols="30%,*">
			<frame src="menu.html" scrolling="auto" noresize>
			<frame src="content.html" scrolling="yes" noresize>
		</frameset>
	</frameset>
</html>
  • no resize - não deixa a frame mudar suas diensões baseadas na tela do usuário.
  • scrolling="(yes/no)" - permite ou não usar a função rolagem.
HTML - Plano de Fundo
HTML - Layouts
HTML básico
Tags especiais
Tags de estilo
Formulários HTML
Referências
Extra
More CSS Tutorials