Comportamientos avanzados

En el tema anterior vimos algunos de los comportamientos básicos, en este tema veremos otros comportamientos y veremos cómo utilizarlos y aprovecharnos de esta característica de Dreamweaver para crear diversas funcionalidades automáticamente.

16.1. Mensajes emergentes

Este comportamiento te permitirá crear avisos emergentes como en el siguiente ejemplo.

Haz clic aquí.

Este comportamiento es útil para poder enviar mensajes al usuario. Ten en cuenta que no deberás abusar de ellos, pues a la larga pueden resultar un poco incómodos, utilízalos con un objetivo concreto y no porque quieras atraer la atención del usuario. Mientras se muestre el mensaje, la ventana del navegador quedará bloqueada.

Para crear un mensaje emergente deberás seleccionar el elemento al cual irá asociado el mensaje, en el ejemplo es un enlace de texto.

Una vez seleccionado ves al panel Comportamientos (Mayus + F4) pulsa el botón y selecciona la opción Mensaje emergente.

Se abrirá el siguiente cuadro de diálogo:

Aquí deberás introducir el Mensaje que quieras que se muestre. Pulsa Aceptar cuando hayas acabado y estará listo.

El mensaje se mostrará con un aspecto similar al siguiente (dependiendo del navegador utilizado):

Es aconsejable que asocies este comportamiento al evento onClick (cuando el usuario hace clic). Es más intuitivo para el usuario que si, por ejemplo, asocias el mensaje a un evento onMouseOver (cuando se pase el ratón por encima) el usuario no sabrá muy bien porque se ha generado el mensaje de aviso. Y resultaría muy molesto tener que ir "esquivando" los enlaces por si aparecen mensajes emergentes.

En realidad no habrá hecho ningún movimiento voluntario para recibir ese tipo de respuesta. Debido a esto (el estimulo-respuesta que espera el usuario), el evento onClick es el más indicado para este caso.

Texto de la Barra de Estado

El Texto de la Barra de Estado es un elemento muy utilizado a la hora de personalizar una página web. Aunque no funciona en algunos navegadores.

Si observas esta barra cuando navegas verás que va cambiando su texto según te encuentres sobre un enlace o no. Normalmente, las páginas que no tratan la Barra de Estado (por ejemplo, esta) no muestran ninguna información. Únicamente cuando posicionas el puntero sobre un enlace, el texto de la Barra cambia para mostrar la dirección a la que éste se dirige.

Observa este ejemplo, si haces clic sobre él te llevará a la página principal de aulaClic.

Cambiar el Texto de la Barra de Estado significaría modificar el texto que aparece en ese momento cuando realizamos un evento sobre un elemento en particular. Por ejemplo:

aulaClic.es

Este comportamiento es a veces útil para personalizar más la página y mostrar información que de otra forma no sería posible. Pero si ocultamos la dirección real a la que apuntan los enlaces puede resultar molesto para muchos usuarios. De hecho, como esto nos permite "engañar" al usuario, ya que podemos indicar una URL falsa cuando en realidad le enviamos a otra, muchos navegadores impiden como medida de seguridad cambiar el texto de la barra de estado, a no ser que el usuario lo habilite expresamente.

Para crear este comportamiento selecciona el elemento al cual quieres asociar este comportamiento. Abre el panel Comportamientos (Mayus + F4) y pulsa el botón .

Luego selecciona la opción Definir texto y haz clic en Establecer texto de la barra de estado.

Aquí deberás escribir el texto que quieres que aparezca en el cuadro Mensaje, luego pulsa Aceptar y listos.

¿Dónde y cómo asociar el texto en una página? es sencillo. Una de las opciones que te da este comportamiento es poder asociar un texto en concreto a la página en sí.

Es decir, que cuando abras una página se muestre inmediatamente (y permanentemente) un texto en la barra de estado. Eso es posible creando el mensaje asociado al body de la página (para ello tendrás que insertar el comportamiento sin seleccionar ningún elemento para que se asocie con toda la página) y lanzándolo en el evento onLoad (en la carga del documento). De esta forma cuando se abra la página se mostrará el mensaje en la barra de estado y permanecerá allí hasta que se produzca un cambio (por ejemplo, que se posicione el cursor sobre un enlace).

Ahora veamos cómo debemos actuar al establecer texto para los enlaces. En este caso será necesario que introduzcamos dos comportamientos.

El primero, asociado al evento onMouseOver (cuando el ratón se encuentra encima) que mostrará el mensaje que queramos.

El segundo deberá ir asociado al evento onMouseOut (cuando el ratón deja de estar encima) que deberá limpiar la barra de estado para que recupere su estado anterior.

En el caso de que hubiésemos establecido un mensaje para el body de la página, al salir de un enlace (en el onMouseOut) deberemos volver a escribir ese mensaje para que siga mostrándose.

En el caso de que la página no tuviese un mensaje personalizado, deja el cuadro Mensaje en blanco para que la barra de estado recupere su estado natural.

Observa que si no estableces el segundo comportamiento, cuando posiciones el ratón sobre el enlace (o imagen, párrafo..., da igual) el texto de la barra de estado cambiará. Pero cuando el ratón deje de estar sobre el elemento no habrá ninguna orden para que el texto vuelva a cambiar y se mantendrá fijo con el mensaje del anterior comportamiento.

Carga Previa de Imágenes

Este comportamiento te será muy útil para mejorar la visualización de tus páginas web en determinados casos.

Al cargar previamente las imágenes contenidas en la página obligamos al navegador a descargar las imágenes con prioridad sobre el resto del documento.

Así cuando la página finalmente se visualiza (porque ha terminado la carga) el usuario verá la estructura completa de la página con las imágenes incluidas ya cargadas y mostrándose.

Este método se diferencia del tradicional en que si no establecemos este comportamiento, la página se carga (sólo texto) y se visualiza antes de que las imágenes estén cargadas por completo, aunque respetando su hueco. Ten en cuenta que ésta es la opción más aconsejada en la mayoría de los casos.

Una vez terminada esta carga, el navegador empieza la descarga de las imágenes. Por lo que hay unos momentos en los que la página no se muestra tal y como fue concebida, e incluso su estructura puede verse afectada si no se introdujeron los valores de altura y anchura de las imágenes contenidas (el texto se dispondría sin tenerlas en cuenta hasta que se descargasen).

Para evitar esto utilizaremos la Carga Previa de Imágenes.

Para ello deberemos abrir el panel Comportamientos (Mayus + F4) y hacer clic sobre el botón , selecciona, entonces, la opción Carga previa de imágenes.

Se abrirá el siguiente cuadro de diálogo:

Aquí deberás incluir las imágenes que quieras que se carguen utilizando los botones , podrás indicar su ubicación pulsando el botón Examinar.

¿Qué imágenes debemos de cargar? Aquellas que son imprescindibles en el diseño de la página o pueden producir efectos no deseados. Por ejemplo, imaginemos que tenemos un enlace como una imagen de fondo. Y mediante estilo CSS hemos hecho que cuando el cursor esté encima esa imagen cambie. Hemos de entender que las imágenes se cargan cuando se necesitan. Por tanto, la imagen de fondo nos e cargará hasta que no pasemos el cursor sobre el enlace la primera vez. Esto puede provocar que durante un instante, al poner el cursor la imagen desaparezca pero la de sustitución aún no se haya cargado. En este caso, es conveniente precargar esa imagen.

La imagen de sustitución que ya explicamos incluye la carga previa de imágenes.

Por su puesto, resulta contraproducente cargar imágenes que no vayamos a emplear.

Si cargas previamente imágenes muy pesadas, o demasiadas como para que el navegador se detenga durante unos segundos mientras realiza la carga, es posible que el usuario al ver que tu página tarda demasiado en cargarse la abandone.

Abrir Ventana del Navegador

Este comportamiento, aunque a primera vista creas que no sirva para mucho, te ayudará a crear enlaces mucho más personalizados.

Asociaremos este comportamiento normalmente a un enlace, o como mucho a una imagen o un botón. Pero siempre lo haremos asociado al evento onClick de estos elementos.

Otra opción es asociarlo al evento onLoad del body para que cuando se cargue el documento abra al mismo tiempo una nueva ventana que dirigiremos a la URL que queramos.

En esencia este comportamiento es un creador de pop-ups o ventanas emergentes, así que si el usuario dispone de un bloqueador es posible que no se pueda llevar a cabo la apertura de la nueva ventana. De todas formas, no es nada recomendable llenar nuestro sitio de estos elementos, salvo si realmente aportan información importante.

Pero veamos qué debemos hacer para poder abrir una ventana de este modo.

Primero seleccionaremos elemento asociado al comportamiento, si lo que queremos es que se asocie al body de la página haremos clic en una área vacía del documento.

Luego abre el panel Comportamientos (Mayus + F4) y pulsa el botón para desplegar la lista.

Selecciona la opción Abrir ventana del navegador y verás el siguiente cuadro de diálogo:

Veamos las opciones que podemos seleccionar aquí.

En Mostrar URL: escribiremos la URL de la página que queremos abrir.

En los cuadros de texto de Ancho de la ventana: y Alto de la ventana: podremos especificar su tamaño en píxeles.

El cuadro Nombre de la ventana: te permitirá darle un nombre a la nueva ventana. Así, más tarde, utilizando JavaScript, podríamos referenciarnos a ella utilizando este nombre.

En Atributos: marca las casillas para que los elementos como la barra de estado o la barra de menús aparezcan en la nueva ventana.

Si dejas todos desmarcados, la ventana se abrirá sin ningún elemento y aparecerá únicamente rodeada de un marco de página.

Cambiar propiedades CSS

Este comportamiento nos resultará muy útil, ya que nos permite cambiar las propiedades CSS de un elemento al producirse un evento.

Las siguientes capas cambiarán su color si hacemos clic sobre ellas:

Para poder identificar al elemento al que cambiaremos sus propiedades, hemos de asignarle un ID.

Luego seleccionamos el elemento asociado, sobre el que se producirá el evento. Abrimos el panel Comportamientos (Mayus + F4) y pulsamos el botón para desplegar la lista.

En este caso seleccionamos el comportamiento Cambiar propiedad. Aparecerá un diálogo como el siguiente:

Lo primero es identificar al elemento. Seleccionamos un Tipo de elemento del desplegable. En ID de elemento se cargaran todos los IDs del tipo seleccionado. Seleccionamos el que nos interese.

A continuación, seleccionamos una propiedad del desplegable Seleccionar o la escribimos en el campo Introducir. E indicamos el valor que tomará en el campo Nuevo valor:.

La pega de este sistema es que nos permite cambiar sólo una propiedad.

Recuerda que comentamos la existencia de pseudoclases CSS. Empleando el selector selector:hover, podemos definir un estilo completo que se mostrará cuando el elemento tenga el cursor encima. Veremos esto en la siguiente unidad.

16.6. Comprobar Plug-ins

Un comportamiento que tiene que ver con la comprobación de las características del navegador del usuario es la opción Comprobar Plug-ins.

Si haces clic sobre ella verás el siguiente cuadro de diálogo:

Este comportamiento nos dará la posibilidad de comprobar si el navegador tiene instalados los plug-ins (o añadidos) necesarios para que pueda ver archivos de tipo Flash, Quicktime, Shockwave, RealPlayer, etc...

Para ello deberemos seleccionar el tipo de plug-in que requerimos para que nuestra página se visualice correctamente, en el caso de que no se encuentre en el desplegable Seleccionar: deberemos escribir su nombre en el cuadro de texto Introducir: (aunque esto ocurrirá en contadas ocasiones).

Rellena los campos de URL siguientes. El primero indicará la ruta de la página que quieres que se muestre si el plug-in existe en el navegador del usuario. Déjalo en blanco si quieres que se quede en la página en la que está.

Y en el campo De lo contrario, ir a URL: escribe la ruta a la que debe redirigirse el navegador en caso de que no tuviese el plug-in instalado. Aquí tienes dos opciones, o bien redirigir al usuario a la página donde descargarse el plug-in para poder visualizar la tuya correctamente, o redirigirlo a una página que hayas creado para aquellos que no cumplan los requisitos mínimos del sitio.

Este comportamiento también deberá ir asociado al evento onLoad del body para que pueda ejecutarse en la carga de la página.

Ése comportamiento está cayendo en desuso, ya que los navegadores actuales detectan automáticamente los plugins faltantes y nos ofrecen la posibilidad de instalarlos.

Menús de Salto

Aunque este comportamiento se encuentra en el listado del panel Comportamientos vamos a aprender a insertarlo desde otro lugar ya que te será más fácil.

Sección 1 Sección 2 Sección 3 Sección 4

Un menú de salto no es más que un menú desplegable desde el que puedes saltar de una página a otra con sólo seleccionar la opción correspondiente en el menú. Encima de este apartado tienes un ejemplo (no es funcional pero puedes desplegarlo para hacerte una idea) que ilustra el aspecto que tendría este tipo de menús.

Insertarlo es muy sencillo, sólo tienes que hacer clic en Insertar, seleccionar la opción FormularioMenú de salto. y en el desplegable elegir

Se abrirá este cuadro de diálogo:

Para crear el menú deberás introducir los elementos (opciones) que lo forman. Para ello escribe en Texto el título de la página y en Al seleccionarse, ir a URL la ruta de la página que se tiene que abrir si el usuario selecciona esta opción del menú.

Una vez rellenados estos campos, haz clic en el botón .

Luego repite el proceso tantas veces como elementos en el menú quieras insertar.

Cuando hayas acabado decide en qué ventana quieres abrir los enlaces en Abrir URL en: y dale un nombre al menú (para reconocerlo mejor más tarde) en Nombre del menú.

Luego puedes marcar la opción Seleccionar primer elemento tras el cambio de URL para que cuando se abra la ventana el elemento del menú que se muestre sea el primero.

Déjalo desmarcado si quieres que se muestre el de la página que se está visualizando.

Luego marca la opción Insertar botón Ir tras el menú para que se añada un botón al formulario.

Sección 1 Sección 2 Sección 3 Sección 4

Si escoges esta opción verás que se crea un menú como el que tienes justo sobre este párrafo.

El funcionamiento de este menú de salto es muy parecido al anterior, sólo que una vez seleccionada la página que mostrar hay que pulsar el botón para que se efectúe el salto.

Comportamientos

En este tema vamos a ver las características básicas de los comportamientos, así como un par de ejemplos de entre sus posibles aplicaciones.

15.1. Introducción

Los comportamientos son acciones que suceden cuando los usuarios realizan algún evento sobre un objeto, como puede ser mover el ratón sobre una imagen, pulsar sobre un texto, hacer doble clic sobre un mapa de imagen, etc.

Los comportamientos no existen como código HTML, se programan en JavaScript. Dreamweaver permite insertarlos a través del panel Comportamientos, por lo que no es necesario escribir ninguna línea de código JavaScript para programarlos.

La imagen que aparece a continuación tiene asociado un comportamiento. Sitúa el puntero sobre ella para ver qué es lo que ocurre.

Estás visualizando una capa que estaba oculta.

Si dejas de situar el puntero sobre la imagen, la capa volverá a ocultarse.

La imagen tiene asociados dos comportamientos para mostrar y ocultar la capa. Este tipo de comportamiento lo veremos más adelante.

Otros comportamientos que ya has visto son los que se aplican sobre las imágenes de sustitución y las barras de navegación, que ya están predefinidos, por lo que no es necesario introducir este conjunto de comportamientos a través del panel Comportamientos.

Para validar formularios ya viste algunas características del panel Comportamientos. Vamos a recordar las que necesitamos para poder insertar comportamientos más tarde.

El panel Comportamientos se puede abrir a través del menú Ventana, opción Comportamientos. También pulsando Mayús+F4.

En este panel hay que desplegar el botón pulsando sobre él, y en Mostrar eventos elegir HTML 4.1. Es la opción por defecto. Esta opción se debe a que en el pasado, los comportamientos solían ser diferentes dependiendo del navegador.

En la actualidad, los navegadores tienden a seguir el estándar, lo que hace que ya no tengamos problemas de compatibilidad. Sólo habremos de cambiarlo si hacemos páginas específicas para navegadores más viejos, ya en desuso.

Insertar un comportamiento

Lo primero que hay que hacer es asignar un ID al que afectará el comportamiento. Esto lo podemos hacer desde el inspector de propiedades.

Después seleccionamos el objeto que activa el comportamiento, como puede ser una imagen, un fragmento de texto, etc.

El elemento al que afecta y el que activa el comportamiento puede ser el mismo o no.

Al desplegar el botón del panel Comportamientos aparece la lista de todas las acciones posibles.

Según el elemento sobre el que se desee aplicar el comportamiento, se podrán elegir unas acciones, mientras que otras no.

En este caso la acción Validar formulario no puede seleccionarse porque no existe ningún formulario en la página.

Después de elegir alguna acción, el comportamiento correspondiente aparece en el panel Comportamientos. En este caso se han insertado dos comportamientos.

Como puedes ver, cada comportamiento tiene asociados un evento y una acción.

Las acciones son las que se han elegido en la lista anterior y el evento indica cuándo se debe de realizar la acción.

Para eliminar un comportamiento, hay que seleccionarlo en el panel Comportamientos y pulsar sobre el botón . También es posible cambiar el orden de los comportamientos aplicados a un objeto, seleccionándolos y ordenándolos mediante los botones .

Mostrar-Ocultar elementos

Uno de los comportamientos más habitual e interesante es el de Mostrar-Ocultar elementos. Lo más común es emplearlo con capas, que han de haber sido creadas antes, ero podemos hacerlo con cualquier elemento que tenga un ID asignado. Lo que hace este comportamiento es alternar entre las propiedades de visibilidad visible y hidden.

Al principio del tema teníamos un ejemplo de este tipo. Vamos a ver qué eventos y acciones hay que establecer para que se produzca dicho comportamiento.

Después de seleccionar la e elemento que producirá el evento (en ése ejemplo, la imagen del gatito) hay que seleccionar una acción de la lista, pulsando sobre el botón . En este caso la acción tiene que ser la de Mostrar-Ocultar elementos.

Tras elegir la acción, se mostrará un cuadro de diálogo en el que aparecen listados todos los elementos de la página que podemos ocultar o mostrar:

Hay que especificar qué elementos han de mostrarse u ocultarse para el evento. Para ello hay que pulsar dos veces sobre la acción, en el panel Comportamientos.

Entonces aparece una nueva ventana, con la lista de todas las capas que hay en la página, en la que puede indicarse la variación que se va a producir sobre la visibilidad

Puede indicarse si se van a Mostrar, si se van a Ocultar, o si van a adquirir la visibilidad inicial (Predeterminada).

Para determinar la visibilidad de cada una de las capas es necesario seleccionarlas una por una, indicando su visibilidad a través de los botones inferiores de la ventana.

No es necesario aplicar una visibilidad diferente a todas las capas de la página, solamente a las que se desea que cambien al producirse el evento. Por ejemplo, en este caso a la capa gatomes no se le ha aplicado ninguna visibilidad diferente, ya que no se desea que varíe al producirse el evento.

Si se desea eliminar una visibilidad establecida para alguna de las capas, simplemente hay que volver a pulsar sobre el botón correspondiente a la visibilidad que ya tiene aplicada. Por ejemplo, para eliminar la visibilidad aplicada a la capa gatosemana habría que volver a pulsar sobre el botón Mostrar.

Hay que tener en cuenta en este caso que lo que se desea es que al situar el puntero sobre la imagen, se muestre la capa, y que cuando el puntero deje de estar sobre la imagen, la capa se vuelva a ocultar. Para ello es necesario insertar dos comportamientos con la acción Mostrar-Ocultar elementos. Uno de ellos mostrará la capa para el evento onMouseOver (cuando el ratón esté sobre), mientras que el otro la ocultará para el evento onMouseOut (cuando el ratón esté fuera).

Llamar JavaScript

Otro de los comportamientos que puede aplicarse sobre algún objeto es el de Llamar Javascript. Este comportamiento permite insertar código JavaScript dentro del código del documento.

Por ejemplo, es posible hacer que se cierre la ventana del navegador al pulsar sobre un objeto. Para ello hay que insertar la línea JavaScript "window.close();".

Al igual que para el ejemplo de las capas, lo primero que hay que hacer es seleccionar el objeto sobre el que se desea aplicar el comportamiento. Seguidamente hay que seleccionar la acción Llamar Javascript a través del botón .

Entonces aparece una nueva ventana en la que hay que introducir la línea JavaScript.

Una vez insertado el comportamiento, en el panel Comportamientos hay que establecer el evento onclick (al hacer clic) para que la llamada a JavaScript se produzca al pulsar una vez sobre el objeto.

Pulsando dos veces sobre la acción vuelve a abrirse la ventana anterior, y es posible modificar la línea de código.

Las plantillas (I)

En este tema vamos a ver qué son las plantillas, cómo crearlas y cómo basar documentos en ellas.

11.1. Introducción

Cada vez que deseamos crear un sitio web, tenemos que tener muy en cuenta que las páginas deben seguir un formato uniforme.

Además del formato, es frecuente tener elementos que se repiten en cada página, como el logo o el menú.

La mayoría de nosotros solemos hacer copias de los documentos ya creados, y trabajar sobre estas copias, modificando simplemente su contenido. Esta es la forma más sencilla de tener páginas con una estructura basada en la estructura de otras ya creadas previamente.

Las plantillas son una especie de copia de la página en la que van a estar basadas el resto de páginas del sitio web, pero que incluyen la posibilidad de establecer unas zonas editables y otrasfijas, que no podrán ser modificadas. zonas que serán

No es posible modificar las propiedades de una página que está basada en una plantilla, a excepción del título. Cuando se desea que existan páginas con, por ejemplo, diferente color de fondo, es necesario crear plantillas diferentes con los distintos colores, y basar las páginas en una u otra plantilla, según el color de fondo que se desee para cada una.

Cuando se modifica el diseño de una plantilla, se pueden actualizar todas las páginas basadas en ella. Esto nos puede ahorrar mucho trabajo.

Las plantillas son archivos con la extensión DWT que se guardan en el sitio web, dentro de una carpeta llamada Templates.

11.2. Crear plantillas

Las plantillas pueden crearse desde cero, o a partir de una página ya existente.

Una forma de crear una plantilla desde cero es a través del panel Archivos, pestaña Activos.

La pestaña Activos se puede abrir a través del menú Ventana, opción Activos.

Una vez abierto el panel hay que seleccionar el botón , para poder trabajar con las plantillas.

Los botones inferiores del panel Activos son similares a los del panel Estilos CSS.

El único botón diferente es el primero, que en este caso sirve para actualizar la lista, el resto permiten crear una nueva plantilla, editar una plantilla seleccionada en la lista, o eliminarla.

Para crear una nueva plantilla hay que pulsar sobre el botón . Si el botón está desactivado, pulsa con el botón derecho del ratón sobre el área de plantilla y elige Nueva Plantilla).

Cuando se pulsa ese botón aparece un nuevo documento en la lista de plantillas, al que es posible cambiarle el Nombre pulsando previamente sobre él.

Para modificar una plantilla la seleccionamos de la lista y pulsamos el botón .

Para eliminar una plantilla la seleccionamos de la lista y pulsamos el botón .

Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que se crea automáticamente.

Para crear una plantilla a partir de un archivo existente es necesario abrir dicho archivo, y después guardarlo como plantilla a través del menú Archivo, opción Guardar como plantilla.

Cuando se pulsa dicha opción, aparece una ventana como la de la imagen.

En ella es necesario especificar el nombre con el que va a ser guardada la plantilla, a través del campo Guardar como, y elegir, de entre la lista de sitios, el Sitio: en el que se va a guardar.

Al guardar la plantilla la página cambia de carpeta, a Templates, como ya hemos dicho. Si contenía enlaces o imágenes se nos ofrecerá la opción de Actualizar vínculos. Si lo hacemos, la plantilla se verá con normalidad y podremos emplearla para crear páginas en cualquier carpeta. Si no lo hacemos, la plantilla se mostrar sin las imágenes u hojas de estilo, ya que la ruta no será la correcta, y sólo nos servirá para crear páginas en la misma carpeta que el archivo desde el que creamos la plantilla.

Establecer regiones editables en una plantilla

Todos los elementos de una plantilla están bloqueados por defecto, no se pueden modificar.

Es necesario establecer las zonas para que puedan ser editadas en las páginas que se basen en dicha plantilla.

Para editar una plantilla hay que abrirla en Dreamweaver. Una forma de abrirla es a través del panel Activos, pulsando dos veces sobre ella, o estando seleccionada pulsando sobre el botón como ya hemos visto.

Una vez abierta la plantilla es posible establecer sus propiedades a través de la ventana Propiedades de la página.

Como recordarás, para abrir esta ventana puedes:

Pulsar la combinación de teclas Ctrl + J.

Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.

Pulsar con el botón derecho sobre el documento abierto en Dreamweaver, y en el menú contextual que aparece seleccionar la opción Propiedades de la página.

Para insertar una región editable hay que situar el puntero en el lugar en el que se desea insertar, y después dirigirse al menú Insertar, Objetos de plantilla, opción Región editable, o pulsar la combinación de teclas Ctrl + Alt + V.

En la nueva ventana hay que establecer un Nombre para la región editable.

Dentro de la plantilla no pueden existir dos regiones editables con el mismo nombre.

Posteriormente puede modificarse el nombre a través del inspector de propiedades de la región editable.

Las zonas editables aparecen representadas en Dreamweaver como un recuadro con una etiqueta de color turquesa. En la etiqueta aparece el nombre de la zona editable.

Dentro del recuadro es posible insertar objetos, que aparecerán por defecto en aquellos documentos que se basen en la plantilla. Estos objetos, al estar dentro de la zona editable, podrán ser modificados en las páginas.

La región editable se ajustará al tamaño del contenido. Por lo que aunque parezca pequeña cuando aún no tiene nada no limitará lo que queramos introducir.

Todos los objetos que se encuentren fuera de estas zonas editables aparecerán también en las páginas, pero no podrán ser modificados.

En este caso, la imagen con el logotipo de aulaClic aparecería en todas las páginas que se basaran en esta plantilla, mientras que todo lo que insertáramos dentro de la zona editable FormularioCorreoElectronico podría ser modificado.

Basar páginas en una plantilla

La opción más simple, consiste en elegir una Página de plantilla al crear un Nuevo documento.

Como vemos en la imagen anterior, al seleccionar la categoría Página de plantilla, aparece un listado con los sitios. Seleccionando el que queramos, aparecerá otro listado con las plantillas del sitio, y una vista previa de la seleccionada a la derecha.

Bastaría con seleccionar la que queramos utilizar y pulsar en Crear. El nuevo documento estará basado en la plantilla, y solo tendremos que modificar las regiones editables.

El uso de las plantillas puede resultar un poco más complicado si queremos aplicar la plantilla sobre un documento existente. Vamos a ver cómo basar una página vacía en una plantilla, ya que por el hecho de estar vacía resulta más sencillo.

Una vez abierto el documento, hay que dirigirse al menú Modificar, Plantillas, opción Aplicar plantilla a página.

Es preferible que antes de hacer esto nos aseguremos de que el sitio que se encuentra abierto en Dreamweaver es el mismo en el que vamos a guardar el documento, y el mismo en el que se encuentra la plantilla en la que queremos basarlo.

Después de pulsar sobre la opción Aplicar plantilla a página aparece una ventana como la siguiente, en la que hay que seleccionar una de las plantillas de la lista Plantillas: del sitio.

Es recomendable activar la casilla Actualizar página cuando cambie la plantilla, para que la página se actualice automáticamente en el caso de modificar la plantilla en la que se basa.

A pesar de estar trabajando sobre un documento vacío, es posible que al aplicar la plantilla aparezcan nombres de regiones no coincidentes entre el documento en blanco y la plantilla. En ese caso se muestra una ventana como la siguiente.

En ella hay que establecer una correspondencia entre el nombre de la región del documento vacío con el nombre de alguna región de la plantilla.

En este ejemplo, la región del documento vacío que no coincidía con el nombre de ninguna región de la plantilla era la región Document body.

A través de Mover contenido a la nueva región: se puede seleccionar una región de la plantilla, para establecer así la correspondencia que se necesitaba.

Después de establecer las correspondencias necesarias, se carga la plantilla en el documento vacío.

Observa que la página aparece enmarcada en amarillo, y en la esquina superior derecha nos informa de que se emplea la plantilla ejemplo.

En este caso no es posible cambiar el color de fondo, que está definido en la plantilla, pero sí es posible cambiar todos los elementos de texto y el formulario, ya que se encuentran dentro de una zona definida en la plantilla como editable.

Sí se podría cambiar el estilo del texto, insertar más elementos de formulario, tablas, etc.

Para que una página deje de estar basada en una plantilla hay que dirigirse al menú Modificar, Plantillas, opción Separar de plantilla.

Cuando se separa una página de una plantilla, el contenido de la página sigue siendo el mismo que el que tenía cuando aún estaba basada en la plantilla, pero sin las restricciones establecidas por la plantilla, ni las ventajas al editar la plantilla original.