Páginas web con FrontPage Express

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 FrontPage Express. 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>Webs con FrontPage Express</title>
</head>
<frameset cols="22%,*">
<frame name="indice" src="sumario.htm" frameborder="0">
<frame name="principal" src="presenta.htm" 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.htm), pero la ventana derecha, llamada "principal", va a abrirse con el archivo presenta.htm, 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 presenta.htm 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:

Actividad6.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 FrontPage Express no tiene una herramienta para elaborar marcos, habrá que crear un archivo base que llamaremos index3.htm. Para elaborar este archivo podemos utilizar FrontPage Express: 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. Pero como la práctica ha enseñado al monstruo que el programa puede dar problemas a este respecto, lo mejor es utilizar cualquier procesador de textos como, por ejemplo, el Bloc de notas y escribir lo siguiente:

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

Como se ve, vamos a crear además dos archivos nuevos: uno que incluya el índice (sumario.htm) y otro que incluya la página principal del Monstruo, ahora llamada monstruo.htm, que es la misma página que index2.htm, 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. También tendremos que cambiar el nombre del archivo colec.htm, de la colección de objetos, que ahora llamaremos colec2.htm;hay que cambiar en él los dos hipervínculos de este archivo que lo enlazan con la página principal (ahora index3.htm) 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 FrontPage Express no tiene capacidad para mostrar los marcos, así que hay que ver el resultado final en el navegador. Si abrimos el archivo index3.htm en FrontPage Express, no veremos nada; sólo podremos ver el código fuente y modificarlo si es preciso. En el archivo sumario.htm, que internamente se llamará "indice", vamos a introducir cinco hipervínculos: cuatro de ellos van dirigidos al archivo index3.htm (marco "principal") pero a distintos marcadores y el quinto va a abrir el archivo colec2.htm 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.htm)
Texto de los hipervínculos:

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

profesion
aficiones
(Se dirige al archivo colec2.htm)
enlaces
encuesta

Los cuatro hipervínculos que se dirigen al archivo index3.htm 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.htm#profesion" target="principal"> <strong>Profesión</strong></a>

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

Con el fin de realizar este hipervínculo desde FrontPage Express tenemos que tener abiertos los dos archivos: monstruo.htm y sumario.htm 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 hipervínculos 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.htm, 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 hipervínculo. A continuación, pulsamos en la pestaña "World Wide Web" para abrir esa sección, y vemos que automáticamente aparece el hipervínculo en el cuadro de Dirección URL. Y de esta forma crearemos los demás hipervínculos de marcadores.

Hipervínculo con marcador

Sólo nos queda crear el hipervínculo 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 hipervínculos en el marco izquierdo. Como el color de fondo es azul oscuro, hemos elegido el blanco para los hipervínculos y para los hipervínculos visitados, y un color azul claro para los hipervínculos 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 hipervínculos 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