Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de HTML

HTML: lenguaje básico para crear páginas web


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 1326

Visitas el mes pasado: 2054

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de HTML
Desarrollo Web, por Rubén Álvarez
Cómo crear tu Web: curso de HTML
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a XHTML
Libros web, por Javier Eguíluz Pérez
Curso de HTML: AulaFácil
www.aulafacil.com
Curso de html: Programación Web
www.programacionweb.net
WebEstilo: manual de html
www.webestilo.com
W3 schools; HTML Tutorial
www.w3schools.com
Tutorial html
Juan José López García
Universidad de Murcia
Introducción al lenguaje html
wikilearning

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




9. Frames (I)

9.1 Diseño con frames.

html

Definición

El diseño con frames es otra forma de diseñar la página en la cual utilizamos varios frames o marcos, (frame: en español significa "marco") de manera que en cada uno de los frames consiste en un archivo html distinto. La página queda dividida en diferentes areas, cada una de esas áreas o frames es independiente del resto, y es en sí una página distinta, con un archivo html distinto; aunque las veamos todas en la misma ventana del navegador.

El diseño con frames está poco recomendado hoy en día, prefiriendo usar otros tipos de diseño de página. No obstante podemos encontrar páginas que tienen este tipo de diseño, y también podemos seguir construyendo páginas con diseño de frames.

También se requiere utilizar las etiquetas "Doctype específicas para frames, vistas en la página 8.1. Etiqueta Doctype. El nuevo HTML5 no admite el diseño con frames.


composición y etiquetas.

Una página compuesta con frames se compone de un archivo principal, con la definición de los frames o marcos que va a tener, y tantas páginas o archivos HTML como marcos vaya a tener.

La página principal es una página en HTML, en la que la etiqueta <body> ... </body> es sustituida por la etiqueta <frameset> ... </frameset>.

Dentro de la etiqueta frameset se insertan las etiquetas <frame src="ruta_de_la_página"/>. Cada etiqueta frame debe coincidir con una partición de la página, y el atributo src tiene la ruta al archivo html que irá en esa parte de la página. Los archivos html pueden ser tanto internos (del propio sitio web), como externos (de otros sitios web).

Para hacer la partición de la página, la etiqueta frameset debe llevar el atributo cols (columnas) o rows (filas), para partir la página en varias columnas o en varias filas. La etiqueta frameset solo admite uno de estos dos atributos, por lo que debemos decidir cómo hacer la partición principal de la página, si en filas o columnas. Si queremos poner filas y columnas a la vez lo haremos anidando etiquetas frameset

El numero de filas (o de columnas) y el espacio que van a ocupar, lo indicaremos en el valor del atributo rows (o cols), indicando el espacio ocupado por cada una de ellas, separados por comas, ejemplo:

<frameset rows="20%,65%,15%">

Esta sería una página partida horizontalmente en tres partes, la primera con un 20% de la pantalla, la segunda con un 65%, y la tercera con un 15%. Ademas de en tantos por ciento las medidas de los frames pueden expresarse en píxeles, para ello sólo hay que escribir el número de píxeles (sin "px" detrás). También podemos dejar una columna o fila sin definir el tamaño, para que ocupe todo el resto de la pantalla que no ocupan las demás, en ese caso, en lugar de porcentaje o número escribimos un asterisco ( * ). Ejemplo:

<frameset cols="200,*,200">

Este ejemplo indica una partición con dos columnas a derecha e izquierda de 200px cada una, y una columna central que ocupa el resto de la página.


Ejemplo de página con frames

Vamos a hacer un ejemplo clásico de página con cabecera, pie de página y diseño central a tres columnas (menú izquierdo, contenido, y lateral derecho). En principio partiremos la página en horizontal en tres partes (la cabecera, el cuerpo principal, y el pie de página).

El código HTML de la página principal será el siguiente:

<html>
<head>
<title>Diseño con frames 1</title>
</head>
<frameset rows="100,*,100">
   <frame src="pagina1.html" />
   <frame src="pagina2.html" />
   <frame src="pagina3.html" />
</frameset>
</html>

Observa como en esta página no está la etiqueta body la cual ha sido sustituida por la etiqueta frameset. El número de etiquetas frame dentro de la etiqueta frameset debe ser igual al número de filas especificadas en el atributo rows

Cada etiqueta frame apunta hacia un archivo html mediante el atributo src este archivo es el que se verá en el espacio que ocupa cada fila.

Ahora tenemos que crear los archivos "pagina1.html", "pagina2.html" y "pagina3.html", y colocarlos en la misma carpeta que el archivo principal. estos son sus códigos HTML:

página 1: Cabecera

<html>
<head>
<title>pagina1</title>
</head>
<body bgcolor="aqua">
Página 1: esta va a ser la cabecera.
</body>
</html>

página 2: Principal

<html>
<head>
<title>pagina2</title>
</head>
<body bgcolor="silver">
Página 2: esta va a ser el contenido.
</body>
</html>

página 3: Pie

<html>
<head>
<title>pagina3</title>
</head>
<body bgcolor="yellow">
Página 3: esta va a ser el pie de página.
</body>
</html>	

Dentro de cada frame hemos dado un color de fondo diferente y hemos insertado un poco de texto para distinguirlos. El título que demos a cada frame es indiferente, ya que en el navegador sólo se verá el título de la página principal.

El resultado de la página será el siguiente:

diseño con frames 1.


Para hacer un diseño a tres columnas debemos partir el segundo frame en tres columnas, para ello, sustituiremos la etiqueta del segundo frame por una etiqueta frameset con un atributo cols que indique tres columnas, y dentro de esta etiqueta colocaremos las tres etiquetas frame de cada una de las columnas.

el código HTML de la página principal quedará así:

<html>
<head>
<title>Diseño con frames 2</title>
</head>
<frameset rows="100,*,100">
   <frame src="pagina1.html" />
   <frameset cols="15%,*,15%">
      <frame src="pagina4.html" />	 
      <frame src="pagina2.html" />
      <frame src="pagina5.html" />			
   </frameset>
   <frame src="pagina3.html" />
</frameset>
</html>

Hemos añadido una etiqueta frameset anidada. Ésta es la segunda fila de la primera etiqueta. dentro de esta etiqueta, conservamos la página 2 como contenido principal, y hemos añadido las páginas 4 y 5 que hacen de columnas laterales.

Observa que el orden en que aparecen las disintas etiquetas frame en el código es el mismo en el que aparecen en la página (viendo esta de izquierda a derecha y de arriba a abajo); debemos tener en cuenta el orden en que ponemos las páginas para que en cada una de ellas aparezca su archivo. Para completar la página debemos crear los archivos "pagina4.html" y "pagina5.html", los cuales tendrán el siguiente código:

página 4: menú lateral

<html>
<head>
<title>pagina4</title>
</head>
<body bgcolor="lime">
Página 4: esta va a ser el menú lateral izquierdo.
</body>
</html>

página 5: columna lateral derecha

<html>
<head>
<title>pagina5</title>
</head>
<body bgcolor="fuchsia">
Página 5: esta va a ser la columna lateral derecha.
</body>
</html>

Completamos así el diseño de la página mediante frames. ahora la pagina tiene el siguiente aspecto:

diseño con frames 2.




En la siguiente página veremos diferentes atributos para las etiquetas de frames que nos ayudarán a mejorar su aspecto.

Atributos para frames



manual de HTML

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com