Diseño de páginas web con FrontPage

III Elementos de diseño avanzado

1) Los marcos

Los marcos dividen la pantalla del navegador en ventanas individuales, cada una de ellas puede albergar una página individual. Una página que aparece dentro de un marco puede incluir cualquier elemento que se pueda incluir en una página web estándar.

Cada marco de una página con marcos es un archivo HTML independiente, por lo que una forma de crear las páginas basadas en marcos es crear alguna de las páginas de contenido antes de crear el conjunto de marcos.  Posteriormente, las colocaremos en el conjunto de marcos para comprobar que la apariencia es correcta.

¿Para que se usan habitualmente los marcos?:

Motores de búsqueda: Un formulario de búsqueda aparece en un marco y los resultados en otro.
Indice: Es habitual que en la parte izquierda de la página exista un índice de los contenidos de la web.  Con una página de marcos podemos hacer que al hacer clic en un enlace se abra en el marco contiguo sin dejar de verse el índice.
Barra de botones: Funcionamiento similar al índice.
Notas al pie
Libros de visitas
Anuncios publicitarios

El uso más frecuente de los marcos será incluyendo un marco de navegación que permanece inalterado a lo largo de la visita del usuario.  El usuario hace clic en los enlaces o botones para visitar otra parte de la web.  Estos enlaces tienen como destino abrise en otro marco de la página, normalmente el marco más grande.

Ejemplos de páginas con marcos:
Lecciones de Ciberconta Radio Huesca Antena3 TV Altoragon.org

Planificación de la página con marcos

En todo trabajo de diseño web es importante la planificación y todavía lo es más si queremos trabajar con marcos. Es necesario seguir una serie de pasos:

  1. Realizar un boceto en papel sobre la apariencia de la página de marcos
  2. Planificar un esquema de colores
  3. Crear las páginas que llenarán los marcos
  4. Establecer el destino de los enlaces, definir que ocurrirá cuando hagamos clic en todos y cada uno de los enlaces de la página.

Creación de páginas de marcos

FrontPage nos ofrece una forma muy sencilla de crear una página con marcos y es a través de las plantillas que incorpora. Seguiremos estos pasos:

Seleccionamos Archivo, Nuevo, Página y seleccionar la opción "Más plantillas de páginas", tras lo cual nos aparecerá el siguiente cuadro de diálogo:

Podemos elegir cualquiera de los diseños predefinidos en FrontPage que luego podremos modificar en cuanto altura y anchura de los marcos.

Suponemos que creamos una estructura con jerarquía anidada, que se compone de tres marcos, de la siguiente forma:

Podemos reestructurar las plantillas que nos ofrece FrontPage para adecuarlas a nuestras necesidades.  Podemos cambiar los tamaños de los marcos (haciendo clic en los bordes y arrastrando), dividir los marcos (Marcos, Dividir Marco) en filas o columnas y eliminar los marcos (haciendo clic en el que queramos borrar o en la barra de menús seleccionar Marcos, Eliminar marco).

Asociar una página inicial a un marco

Cuando se carga la página de marcos completa en la ventana de un navegador, cada marco necesita rellenarse inicialmente con algo, que es la página inicial.  Para asociar una página inicial a un marco, seguiremos los siguientes pasos:

  1. Hacer clic en el marco con el que deseamos trabajar
  2. Hacer clic en el botón Establecer página inicial, apareciendo el cuadro Crear Hipervínculo, explicado en un apartado anterior.
  3. Podemos asociar una página que tengamos grabada en el disco duro o seleccionar una dirección URL.
  4. Igualmente podemos asociar a un marco una nueva página que posteriormente editaremos y guardaremos.

Guardar un conjunto de marcos

Un conjunto de marcos está constituido por varias páginas: la página de marcos, que mantiene las instrucciones sobre cómo debe aparecer y actuar el conjunto de marcos, y las páginas iniciales para cada marco del conjunto de marcos.  Cuando guardamos un conjunto de marcos debemos guardar todas estas páginas.  Nos aparecerá un cuadro de diálogo con una vista en la cual se verá claramente qué marco es el que estamos guardando.

Hay que tener mucho cuidado a la hora de guardar los archivos, ya que es fundamental para que aparezcan con la misma estructura que deseamos.  

Modificación de las propiedades de los marcos

Además de las propiedades que tiene cada página web, los marcos de un conjunto de marcos tienen propiedades por sí mismos, que se guardan en la página principal, la cual almacena la información acerca de la estructura y funciones de cada marco del conjunto de marcos.  Haciendo clic con el botón derecho en un marco se abre el siguiente cuadro de diálogo:

 A través de este cuadro de diálogo modificaremos todas las propiedades del marco que deseemos de una forma muy sencilla. Podemos cambiar el título, el vínculo a la página inicial, el tamaño del marco, si queremos que aparezca la barra de desplazamiento,...

Si queremos seguir modificando la página de marcos por ejemplo, desactivando los bordes de marcos, lo podemos hacer haciendo clic en Página de marcos del anterior cuadro y después en la solapa Marcos hasta llegar a esta ventana:

A través de esta opción podemos cambiar el espaciado del marco, que es la cantidad de espacio en blanco entre los marcos, y los bordes del marco.

Ya hemos visto como se crea y edita una página con marcos, pero ¿qué ocurre con los hipervínculos?, ¿en qué marco se abrirán?  Esto hay que definirlo en la opción Crear hipervínculo cuando nos pide el marco de destino del enlace, en la ventana siguiente:

Elegiremos el destino del enlace eligiendo la opción más adecuada a nuestra página web.  Por ejemplo en las lecciones de Ciberconta, cada vez que pulsamos un enlace en los dos marcos, se abre la página en el marco principal.

Así pues, los marcos es una forma muy sencilla de organizar de forma estructurada las páginas web manteniendo a la vista varias páginas, como por ejemplo un índice.  La edición de cada página dentro de una web de marcos se hace de forma idéntica a una página que no tenga esta estructura.

 

Ir a CiberConta Retroceder   Inicio leccion  Avanzar