CREACIÓN DE PÁGINAS WEB CON KOMPOzER

6. Marcos o frames

Los objetivos de la sexta lección son:

6.1. Conocer el funcionamiento de los marcos
6.2. Conocer cómo se han creado los marcos de esta página web
6.3. Actividad 6: Diseñar la página del Monstruo con marcos

6.1. Funcionamiento de los marcos

Los marcos son las distintas ventanas en que se puede dividir la pantalla cuando estamos viendo una página de Internet. Cada una de esas ventanas es independiente, y una de ellas, generalmente la más grande, suele ser la principal. Lo normal es que haya dos o tres ventanas cuando se utilizan marcos, pero puede haber más. Un ejemplo de marcos, sin ir más lejos, es esta página del curso de Kompozer. Tenemos una ventana a la izquierda, que es el sumario o índice del curso, y otra ventana que ocupa el resto de la pantalla, que es la principal. Las dos ventanas son documentos distintos que se elaboran por separado, pero hay que conectarlos para que funcionen a la vez en la pantalla.

Los marcos suelen ser criticados por muchos usuarios de Internet, quizá porque a veces complican el funcionamiento de una página, y hoy día no se utilizan mucho en grandes sitios de la Red, pero siguen siendo útiles en páginas como la nuestra, pequeñas y centradas en un cometido muy específico. Al elaborar esta página se ha considerado que el lector debía tener el índice muy a mano para moverse con rapidez entre los contenidos, por eso se ha optado por utilizar el diseño con marcos. Los marcos son también recomendables cuando se trata de una página web con contenidos informativos que se supone que el usuario puede querer imprimir, porque de esta manera podrá imprimir el marco principal, donde se encuentra el texto informativo, sin estorbarle el menú adicional que generalmente lo acompaña.

6.2. Los marcos de esta página web

Para crear marcos hay que utilizar un archivo de base que contenga la información de la estructura de la página. Otro archivo incluirá el contenido de la ventana izquierda, la del índice. Por último, en la ventana principal se irán viendo los distintos archivos que se van llamando desde la ventana izquierda. Ésa es la estructura de esta página y la de casi todas las páginas que utilizan marcos. Naturalmente, el autor puede complicar más la estructura, pero aquí vamos a analizar lo que es más corriente. Veamos, por tanto, el código fuente del archivo que sirve de base a esta página:

<html>
<head>
<title>Creación de páginas web con Kompozer</title>
</head>
<frameset cols="22%,*">
<frame name="indice" src="sumario.html" frameborder="0">
<frame name="principal" src="presentacion.html" frameborder="0">
<noframes>
<p>Esta página está configurada con marcos</p>
</noframes>
</frameset>
</html>

Se puede observar que en esta estructura no se encuentra el cuerpo de la página (<body>) y que la etiqueta <frameset> es la que vertebra toda la organización de los marcos. Su único atributo en este caso es cols, que indica el número y la amplitud de las columnas (ventanas verticales) de que se compone la página. Aquí son dos ventanas: la izquierda ocupa el 22% de la pantalla, y la derecha ocupa el resto de la pantalla (lo que se expresa con un asterisco), aunque la anchura también se puede indicar en píxeles o en otras medidas. Además, podría haber filas (rows), y en ese caso las ventanas serían horizontales. Las otras etiquetas son las <frame>, que tienen como atributos el nombre de los marcos y el de los archivos que se abrirán al inicio en cada marco. La etiqueta <no frames> se incluye por si el navegador del usuario no incluye marcos (lo que no es normal) o por si el usuario ha deshabilitado los marcos en el navegador. Dentro de esta etiqueta se puede incluir el texto que queramos.

Otros atributos de <frame> podrían ser:

En nuestra página, la ventana de la izquierda va a tener siempre el mismo archivo (sumario.html), pero la ventana derecha, llamada "principal", va a abrirse con el archivo presentacion.html, y luego cambiará de archivo conforme el usuario vaya haciendo clic en los hipervínculos de la ventana del índice. Por tanto, estos hipervínculos tendrán que dirigirse a la ventana principal utilizando el nombre de esta ventana. Observemos, por ejemplo, el primer hipervínculo de la ventana de la izquierda:

<a href="presenta.htm" target="principal">Presentación</a>

La palabra "Presentación" abre el archivo presentacion.html en la ventana llamada "principal", que es el objetivo o target. Si no especificáramos target, el archivo se abriría en la ventana de la izquierda, donde se encuentra el hipervínculo. Y así se crean todos los demás hipervínculos.

Las opciones preestablecidas para el atributo target son las siguientes:

Actividad 6.3. Actividad 6: Diseñar la página del Monstruo con marcos

Vamos a realizar ahora una actividad para nota. Se trata de diseñar nuestra página del monstruo con dos marcos, igual que la versión web de esta página del curso.

Como Kompozer no tiene capacidad para editar marcos, habrá que crear un archivo base que llamaremos index2.html. Para elaborar este archivo podemos utilizar Kompozer: abrimos un archivo nuevo, vamos al código fuente (en el menú Ver y la opción HTML...), borramos todo el código que hay en él y escribimos el código de los marcos. También se puede utilizar cualquier editor de texto plano como, por ejemplo, el Bloc de notas o el Editor de textos, y escribir lo siguiente:

<html>
<head> <title>La web del Monstruo</title></head>
<frameset border=0 cols="20%,80%" >
<frame name="indice" src="sumario.html">
<frame name="principal" src="monstruo.html">
</frameset>
</html>

Como se ve, vamos a crear además dos archivos nuevos: uno que incluya el índice (sumario.html) y otro que incluya la página principal del Monstruo, ahora llamada monstruo.html, que es la misma página que index2.html, pero a la que le hemos quitado el primer formulario y le hemos añadido la encuesta creada en la lección anterior, realizando los ajustes necesarios en los marcadores o enlaces internos. También tendremos que cambiar el nombre del archivo coleccion.html, de la colección de objetos, que ahora llamaremos coleccion2.html; hay que cambiar en él los dos hipervínculos de este archivo que lo enlazan con la página principal (ahora index2.html) y además tendrán que indicar: target="parent", para que aparezcan en el conjunto de marcos padre del enlace.

Otra novedad importante es que los marcos no van a tener borde. Para ello tenemos que incluir la expresión border=0 en la etiqueta <frameset>, para que no haya espacio entre los marcos. Estos cambios pueden verse en el código mostrado arriba.

Tendremos que crear los dos archivos por separado, ya que Kompozer no tiene capacidad para editar los marcos, así que hay que ver el resultado final en el navegador. Si abrimos el archivo index2.html en Kompozer, no veremos nada; sólo podremos ver el código fuente y modificarlo si es preciso. En el archivo sumario.html, que internamente se llamará "indice", vamos a introducir cinco hipervínculos: cuatro de ellos van dirigidos al archivo index2.htm (marco "principal") pero a distintos marcadores y el quinto va a abrir el archivo coleccion2.html en la ventana principal. Para comprenderlo mejor, veamos el siguiente esquema, que explica el nuevo diseño creado para la página con marcos:

Marco izquierdo de la página
(indice ··> sumario.html)
Texto de los hipervínculos:

Profesión ··>
Aficiones ··>
Mi colección ··>
Enlaces ··>
Encuesta ··>
Marco derecho de la página
(principal ··> index2.html)
Marcadores de los hipervínculos:

profesion
aficiones
(Se dirige al archivo coleccion2.html)
enlaces
encuesta

Los cuatro enlaces que se dirigen al archivo index2.html lo hacen a distintos marcadores que están dentro del mismo archivo; por tanto, cuando pulsemos en ellos se abrirá ese archivo en el marco principal, pero lo hará colocando en la parte superior de la pantalla la sección correspondiente. En lenguaje HTML, el primero de ellos habría que escribirlo así:

<a href="monstruo.html#profesion" target="principal"> <strong>Profesión</strong></a>

El atributo href incluye el nombre del marcador inmediatamente después del nombre del archivo: monstruo.html#profesion. Y el hipervínculo va dirigido al marco llamado "principal". Obsérvese que hemos puesto en negrita el texto de los enlaces (<strong>).

Con el fin de realizar este enlace desde Kompozer tenemos que tener abiertos los dos archivos: monstruo.html y sumario.html para que el programa pueda leer los marcadores realizados en el primero de ellos. Después, vamos al archivo del sumario y destacamos la palabra "Profesión". A continuación, pulsamos el botón de creación de enlaces y aparecerá una ventana de diálogo:

Modificar hipervínculo

Lo primero que hay que hacer es ir a la sección de Páginas abiertas de la ventana y destacar el nombre del título de la página principal, monstruo.html, que nosotros hemos llamado "Web del monstruo". Después, hay que abrir el menú desplegable denominado Marcador, donde se encuentran todos los marcadores existentes en la página principal, y tenemos que elegir el marcador "profesion". Sólo falta escribir en el campo de texto llamado Marco de destino (target) la palabra "principal", que es el marco al que se dirige ese enlace. A continuación, pulsamos en la pestaña "World Wide Web" para abrir esa sección, y vemos que automáticamente aparece el enlace en el cuadro de Dirección URL. Y de esta forma crearemos los demás enlaces de marcadores.

Hipervínculo con marcador

Sólo nos queda crear el enlace de "Mi colección" de la misma manera en que lo hemos creado anteriormente, pero esta vez hay que añadirle el marco de destino, que va ser la ventana "principal". Quedará así:

<a href="colec2.htm" target="principal"><strong>Mi colección</strong></a>

Por último, todavía queda por cambiar el color de los enlaces en el marco izquierdo. Como el color de fondo es azul oscuro, hemos elegido el blanco para los enlaces y para los enlaces visitados, y un color azul claro para los enlaces activos.

Ahora, manos a la obra. La nueva página con marcos puede quedar de forma parecida a la que se ve al pulsar el siguiente botón. Obsérvese que también se han realizado algunos cambios en los enlaces del marco izquierdo utilizando hojas de estilo, que analizaremos en la siguiente lección y que será objeto de otra actividad. Para ver en el navegador la página final con los dos marcos hay que abrir el archivo index3.htm, que es el que tiene el archivo base con la composición de los marcos.

Página con marcos


Anterior Arriba Siguiente


Páginas dispersas de Alejandro Valero - http://fresno.pntic.mec.es/avaler3