compuII_FRAMES

FRAMES O MARCOS EN HTML

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 cada uno de los Frames consiste en un archivo html distinto. La página queda dividida en diferentes áreas, 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.

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 número 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%. Además 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.

Existen varios atributos para modificar la apariencia de los frames, con ellos podemos modificar la apariencia de los bordes, los márgenes, poner o no barras de desplazamiento. etc. Veamos a continuación estos atributos:

Etiqueta "frameset"

Los atributos específicos para la etiqueta frameset, aparte de los atributos cols y rows ya vistos en la página anterior, son los siguientes:

border="número de píxeles": Indica el número de píxeles que tendrá el borde de los frames. Debemos escribir simplemente el número.
bordercolor="#rrggbb": Indica el color del borde de los frames. Los colores pueden escribirse en el método RGB hexadecimal o también con sus palabras clave.
frameborder="yes|no|0":Muestra o no el borde de los frames. Sus valores posibles son yes (se ven los bordes), no ó 0 (no se ven los bordes). Elimina el borde, pero permanece una línea de separación entre los frames. Este atributo no funciona con Internet Explorer.
framespacing="número de píxeles": Determina la anchura de la línea de píxeles, se utiliza con el valor framespacing="0", para eliminar los bordes en Internet Explorer.

Etiqueta "frame"

Los atributos específicos para la etiqueta frame, son los siguientes:

marginwidth="número de píxeles": indica el número de píxeles de separación entre el borde del frame y su contenido, tanto por su margen izquierdo como derecho.
marginheight="número de píxeles": indica el número de píxeles de separación entre el borde del frame y su contenido, tanto por su margen superior como inferior.
scrolling="yes|no|auto": Indica si queremos que haya barras de desplazamiento; el valor yes indica que se verán siempre; el valor no indica que no se verán nunca, y el valor auto indica que se verán sólo si son necesarias. El valor auto es el valor por defecto.
noresize: este atributo no tiene valores. podemos ponerlo o no ponerlo, si bien en código XHTML deberemos escribir: noresize="noresize". Una característica de los frames es que se pueden redimensionar, es decir, cuando colocamos el ratón en el borde de un frame, sale un cursor con doble flecha, que señala que podemos mover dicho borde, y así cambiar el tamaño de los frames. Al poner este atributo los frames quedan fijos y no pueden redimensionarse.
frameborder="yes|no|0": funciona igual que con la etiqueta frameset pero sólo para el frame especificado.
bordercolor="#rrggbb": como el anterior, funciona igual que con la etiqueta frameset pero sólo para el frame especificado.

Eliminar los bordes

Como hemos visto hay varios atributos para eliminar los bordes de los frames, unos funcionan con unos navegadores, y otros con otros. para estar seguros de que eliminamos los bordes en los navegadores más habituales, en la etiqueta frameset principal debemos escribir el siguiente código:

<frameset border="0" frameborder="0" framespacing="0" ... >

Estos atributos debemos repetirlos también en las etiquetas frameset anidadas, para que la página se vea sin ningún borde en algunos navegadores como Safari o Google Chrome.

Al eliminar los bordes eliminamos también la posibilidad de redimensionar los frames, con lo que es como si pusiéramos también la etiqueta noresize. Si queremos que los frames se puedan redimensionar deberemos dejar algo de borde, que podemos disimularlo dándole el mismo color que al interior del frame, mediante el atributo bordercolor.

Comportamiento de los enlaces

En principio, en una página con frames, un enlace actualiza sólo el frame en el que está. Es decir si ponemos un enlace en una página con frames, la página a la que apunta se verá en el mismo frame en el que está el enlace.

Este no es en la mayoría de los casos el comportamiento que queremos, ya que normalmente, al dar clic en un enlace, lo que queremos es actualizar otro frame de la misma página, o cambiar totalmente de página para ir a otra.

Debemos pues dirigir los enlaces para que aparezcan en otra ventana, y no en la propia. A continuación explicamos como hacerlo:

Cargar un enlace en otro frame

Para dirigir un enlace hacia otro frame de la misma página principal, debemos en primer lugar darle un nombre al frame donde se va a ver el enlace, esto se hace mediante el atributo name; siguiendo el ejemplo de los apartados anteriores, modificamos en la página principal el código del frame de la columna central de contenido, dándole un nombre:

<frame src="pagina2.html" name="contenido"/>

Ahora debemos escribir el enlace dentro de la página correspondiente al frame donde queremos verlo, por ejemplo:

En la columna izquierda de menú. Este enlace, aparte del atributo href"...", debe llevar el atributo target="...". El valor de este atributo debe ser el valor que le hayamos dado a la etiqueta name en el frame que queremos actualizar.

En el ejemplo anterior, abrimos el archivo "pagina4.html", que corresponde a la barra de menú, y escribimos el siguiente enlace:

<a href="http://www.elpais.com" target="contenido">El País</a>

Este enlace estará en el frame de la barra de menús, pero nos mostrará el sitio web indicado en el frame de contenidos.

Valores del atributo "target".

Hemos visto cómo dirigir un enlace hacia otro frame de la misma página, pero si queremos que el enlace se actualice en la página principal, o que se abra en otra página, utilizaremos también el atributo target con diferentes valores. Los valores predefinidos que tiene el atributo target son los siguientes:

_blank: ya hemos visto este valor en anteriores ocasiones, hace que la página se abra en una página o pestaña aparte, a ventana completa.

_self: Es el valor por defecto, la página se abre en la propia ventana o en el propio frame.

_parent: El enlace se actualiza sobre su elemento padre o sobre la ventana que estamos trabajando, si es que no hay un elemento padre.

_top: el enlace se abre a ventana completa, se eliminan todos los frames que pueda haber y se abre en la página principal.

En resumen los Atributos más empleados en los Marcos son:

Actividades para crear archivos ejecutables con la etiqueta Frame.

1. Estructura para dividir la página en dos columnas:

<html>

<head>

<title>Ejemplo de columnas</title>

</head>

<body>

</body>

</html>

De esta forma tendremos dos columnas una al 30% del ancho de la ventana y la otra con un 70% del ancho de esta. Donde la primera columna se llamará índice y la segunda contenido, en la primera columna se mostrará la página web de nombre ejemplo 1 y en la segunda columna se mostrará la página ejemplo6.html.

Nuestra página se vería de la siguiente forma:

Construyamos ahora una página de marcos con dos filas utilizando las mismas páginas de complemento. Háganlo junto conmigo.

<html>

<head>

<title>Ejemplo de filas</title>

</head>

<body>

</body>

</html>

Tal caso se vería de la siguiente forma:

Ahora construiremos un marco que contiene un título en una fila superior, un índice en una columna a la izquierda y un contenido en la columna a la izquierda.

<html>

<head>

<title>Ejemplo de filas y columnas</title>

</head>

<body>

</body>

</html>

Lo vemos de la siguiente forma:

Ahora probaremos la utilidad de nuestros marcos, la parte del ejemplo 1 Hola mundo la convertiremos en un hipervínculo al ejemplo7 y esta página se mostrará en el marco de nombre información al dar clic en el vínculo.

<html>

<head>

<title>Ejemplo 1</title>

</head>

<body>

<a href="ejemplo7.html" target="información">Hola mundo</a>

</body>

</html>

El modificador target nos permite direccionar en donde queremos que la página sea desplegada. En este caso será en el marco de nombre información.

Note como Hola mundo es un vínculo, al activarlo se ve de la siguiente manera:

La página ejemplo7 se despliega en el marco información.

Como actividad final construya una serie de marcos con una fila y dos columnas.

En la fila superior (con 20%) despliegue la página de nombre titulo.html.

En la columna de la izquierda (con 30%) despliegue la página de nombre índice. La página índice debe contener al menos tres vínculos que serán desplegados en la columna a la derecha.

En la columna derecha (con70%) despliegue inicialmente la página información, será aquí donde al activar los vínculos de la página índice, por lo tanto, deberá construir las tres páginas correspondientes a cada vinculo.

Por lo que finalmente deberemos tener siete páginas para este sitio.

paginas de apoyo:

vídeo para generar la pagina web completa

Buscar este blog

Código HTML para crear una pagina web

compuII_FRAMES

FRAMES O MARCOS EN HTML

Comentarios

Publicar un comentario