Crear plantillas con Adobe Dreamweaver CS4

Las plantillas son muy útiles para no tener que repetir el diseño en todas las páginas de una web. Dreamweaver permite la creación de plantillas con regiones bloqueadas y regiones editables.

Las plantillas son un tipo de documento especial, que solo permite la edición en las regiones específicamente indicadas para ello (lo que se hace durante el proceso de creación de la plantilla), mientras que el resto de la plantilla permanece fija y bloqueada. Esto permite que se puedan realizar una serie de páginas empleando el mismo diseño básico.

Pero además, luego de creado un nuevo documento basado en una plantilla, este documento permanece conectado a ella, de forma tal que cuando se realicen modificaciones a la plantilla, los documentos creados con ella pueden ser modificados mediante la actualización de los documentos.

Esto también representa una gran ventaja, ya que es posible realizar cambios profundos en el diseño de una página web realizando cambios únicamente en la plantilla, y luego solo deberá actualizarse el diseño de la página, con lo que los cambios realizados en la plantilla pasarán en forma automática a todas las páginas de la web creadas con ella.

Regiones de la plantilla

Las plantillas cuentan con cuatro tipos de región diferentes:

1. Regiones editables: Son aquellas regiones que el diseñador deja sin bloquear y en las que se podrán introducir modificaciones durante el proceso de creación de páginas web con plantillas. Generalmente estas regiones editables están relacionadas con la introducción de los contenidos de la página.
2. Regiones repetidas: Una región repetida es una sección del documento que puede encontrarse parcialmente bloqueada (como si se tratara de una plantilla dentro de una plantilla), de forma que puedan introducirse copias de este tipo de regiones dentro del documento creado con la plantilla. Por ejemplo, puede crearse una región repetida para los menús, en los que el diseño general está bloqueado, pero pueden introducirse ítems.
3. Regiones opcionales: Son regiones bloqueadas o parcialmente bloqueadas, en las que el usuario puede determinar si el elemento será mostrado o no. Esto es útil en aquellos casos en los que un diseño puede introducir algunos elementos en algunas páginas, pero no necesariamente en todas.
4. Regiones con atributos editables: Algunas regiones de la plantillas, pueden estar parcialmente bloqueadas, pero no en porciones visibles, sino en sus atributos. Por ejemplo, es posible hacer que al introducirse una imagen por parte del usuario de la plantilla, éste solo tenga la opción de determinar la alineación, mientras que el resto de los atributos permanece fijo.

Al momento de guardarse una plantilla y ésta no contiene regiones editables, Dreamweaver envía una alerta para que en caso de que se haya tratado de un olvido, se hagan las modificaciones necesarias.

Creación de una plantilla

Existen dos formas para crear una plantilla con Adobe Dreamweaver CS4. La primera, es la creación de una plantilla desde cero, o sea, a partir de una plantilla en blanco. La segunda, es la creación de una plantilla a partir de un documento existente. En esta última opción, permite que luego de la creación del diseño de una página web, establezcamos el mismo como plantilla para la creación del resto de las páginas de la web, con lo que se puede repetir el diseño de la página en el resto de la web con extrema facilidad.

Crear una plantilla a partir de un documento existente

El procedimiento para la creación de una plantilla a partir de un documento existente es muy sencillo, ya que solo basta con abrir el documento y guardarlo como plantilla en “Archivo / Guardar como plantilla”, tras lo cual se deberá establecer un sitio en cuya raíz se guardará la plantilla.

Crear plantillas en blanco

La forma de crear una plantilla en blanco es a través de “Archivo / Nuevo”. En el cuadro, se debe seleccionar “Plantilla en blanco” y luego se debe seguir el mismo procedimiento que se emplea en la creación de un documento nuevo, pudiendo seleccionar el tipo de lenguaje que se empleará, alguno de los diseños predeterminados, si se empleará CSS en la propia página o externo y el tipo de documento.

Establecimiento de las regiones editables

Luego de que se ha realizado un diseño para una plantilla en blanco o se ha abierto un documento para establecerlo como plantilla, se debe definir cuales serán las regiones editables del documento, a fin de proteger mediante el bloqueo a aquellas regiones que no se modificarán, pero que permita a la vez la introducción de los elementos necesarios para la creación de nuevas páginas basadas en la plantilla.

Cada elemento del diseño de una página web puede establecerse como una región editable. Sin embargo, no es posible establecer a varios elementos en conjunto como región editable. Para definir como región editable a un elemento, basta con seleccionarlo en vista de diseño, hacer clic con el botón derecho del ratón e ir a “Plantillas / Nueva región editable”.

También es posible crear una nueva región editable a través de “Insertar / Objetos de plantilla / Región editable” del menú principal.

En cualquiera de los dos casos, aparecerá un pequeño cuadro en el cual deberemos introducir el nombre de la región editable. Debemos tener en cuenta que cada región editable debe tener un nombre que será único en la plantilla. Una vez finalizado el procedimiento, la región editable aparecerá en la vista de diseño enmarcada por un rectángulo de color azul, que en la esquina superior izquierda tendrá una etiqueta con el nombre de la región editable.

Para eliminar una región como editable, se debe hacer clic con el botón derecho sobre la etiqueta con el nombre de la región editable, y hacer clic nuevamente en “Quitar formato de plantilla”. También es posible hacerlo seleccionando el elemento e ir a “Modificar / Plantillas / Quitar formato de plantilla” del menú principal.

Para cambiar el nombre de la región editable, se debe seleccionar el elemento e ir al cuadro Propiedades (si no aparece en la ventana el cuadro se abre desde “Ventana / Propiedades” o con Ctrl + F3), donde se muestra el nombre en un campo, en el cual introduciremos el nuevo nombre, siempre recordando que no deben repetirse los nombres de las regiones editables dentro de una plantilla.

Regiones repetidas

Las regiones repetidas son aquellas que pueden ser utilizadas en forma reiterada dentro de una plantilla. Esto quiere decir que, si tenemos una región que utilizaremos en otras partes de la plantilla, podremos definirla como región repetida y duplicarla en el lugar que la necesitemos, ahorrando un tiempo considerable en la creación de regiones que ya fueron diseñadas.

Este tipo de elementos fue pensado (como casi todo Dreamweaver) para su utilización en maquetación  con tablas, aunque también admite otros tipos de elementos. Hay dos tipos de regiones repetidas: las regiones repetidas propiamente dichas y las tablas repetidas.

Otra característica importante de las regiones repetidas es que no necesariamente tienen por que ser editables. Sin embargo, lo más frecuente es que necesitemos que algunas partes de las regiones repetidas sean editables mientras que otras permanezcan bloqueadas. Esto es posible, ya que dentro de las regiones repetidas es posible establecer regiones editables.

Teniendo en cuenta sus características (posibilidad de duplicarse y de inserción de regiones editables), podría decirse que se trata de plantillas dentro de la plantilla.

Creación de regiones repetidas

Al igual que en el caso de las regiones editables, la selección de la región a convertir debe realizarse en la vista de diseño, por lo que todos los pasos que daremos en adelante se harán en esta vista.

En primer lugar, se debe señalar la región que utilizaremos como región repetida dentro del diseño que ya se encuentre desarrollado. Puede tratarse de un texto, una lista, títulos, imágenes o una combinación de elementos.

Luego podremos optar, al igual que en el caso de las regiones editables, por hacer clic con el botón derecho del ratón sobre la región señalada y hacer clic sobre “Plantillas / Nueva región repetida”, con lo que se abrirá un pequeño cuadro en el que deberemos introducir el nombre que le daremos a esta región para luego poder identificarla.

En la vista de diseño aparecerán las regiones repetidas rodeadas de un borde celeste con una etiqueta en la que puede leerse el nombre de la región. Es importante aclarar que solo se pueden introducir letras (mayúsculas o minúsculas) y números en la formación de un nombre de región.

Tablas repetidas

Dentro de las posibilidades de establecer regiones repetidas, se encuentra la opción de crear tablas con filas repetidas. Al igual que en el caso de las regiones repetidas propiamente dichas, se puede optar por hacer que algunas celdas sean editables, mientras que el resto permanece bloqueado.

Para crear una tabla repetida, se pueden utilizar los mismos procedimientos que se emplean en la creación de regiones repetidas, seleccionando la opción correspondiente a las tablas. En el cuadro que se abre, deberemos definir el número de filas y columnas que tendrá la tabla, además de las características de las mismas (ancho, altura, bordes, colores, etc.), además de definir el nombre de la tabla repetida.

La tabla creada de esta forma, puede ser parcialmente repetida, ya que la región repetida puede establecerse en este mismo cuadro, estableciéndose las filas inicial y final de la parte repetida de la tabla.
El color de fondo de las celdas y filas puede editarse para que se muestre con colores diferentes cuando la tabla repetida se inserta en un punto cualquiera del diseño. Para ello, bastará con editar el código en la vista de código, para lo cual se deben tener algunos conocimientos de HTML.

Regiones opcionales

La utilización de regiones opcionales es bastante más compleja, ya que incluye opciones de programación. Las regiones opcionales se establecen cuando se desea que las mismas se muestren u oculten ante determinadas circunstancias, por lo que se deben establecer algunos elementos condicionales (if, else), típicos de los lenguajes de programación.

Esto quiere decir que cuando nos encontramos diseñando, podremos definir algunos parámetros que harán que la región se muestre o permanezca oculta. Cuando más de una región opcional se vincula a un determinado parámetro, la modificación de éste puede hacer que el conjunto de regiones se muestren o se oculten.

Las regiones opcionales pueden ser de dos tipos: editables y no editables. Cuando se establece una región opcional no editables, se permite a los usuarios de la plantilla modificar los parámetros que hacen que ésta permanezca oculta o sea visible, pero sin poder editar su contenido. En las regiones opcionales editables, el usuario puede, adicionalmente, editar el contenido de dicha región.

Establecer regiones opcionales

El procedimiento para crear regiones opcionales es igual a los casos anteriores. En este caso, el cuadro que se abre cuenta con dos pestañas, que vemos en la imagen siguiente:

Como puede verse en la parte inferior de la imagen, en la pestaña correspondiente a las opciones avanzadas pueden introducirse las variables según las cuales se visualizará  o no la región establecida.

Tanto cuando se emplea el menú desplegable del botón derecho del ratón como yendo a través del menú Insertar, pueden verse las dos opciones posibles para el establecimiento de una región opcional. Si se establece simplemente “Región opcional”, ésta no será editable, ya que para ello puede verse más abajo el ítem correspondiente a las regiones opcionales editables.

Plantillas anidadas

En ciertas ocasiones, es posible que la utilización de plantillas no sea suficiente para colaborar en el diseño de una página web, como en el caso de páginas dentro de un mismo diseño, que requieren ciertos cambios respecto de la plantilla para que su visualización sea correcta.

Para ello, Dreamweaver CS4 presenta la opción de crear una nueva plantilla basada en la plantilla original, por lo que ambas plantillas se encontrarán vinculadas entre si, aunque su utilización en el diseño de una página web sea independiente.

Las regiones editables de la plantilla original se pasarán como tales a la plantilla anidada. Todos los cambios que se realicen en la plantilla original, se actualizan automáticamente en las plantillas anidadas.

Luego de creada la plantilla anidada, la misma puede ser modificada en todo aquello que se crea conveniente. Todo aquello que permanezca sin modificaciones, será actualizado desde la plantilla original cuando se edite la misma.

Creación de una plantilla anidada

Para crear una plantilla anidada, se debe crear un documento a partir de la plantilla que será base del diseño. Para ello, se debe ir a “Nuevo” del menú principal. Cuando se abre el cuadro correspondiente, se debe seleccionar “Página de plantilla”, tras lo cual se debe seleccionar la plantilla que será base.

Luego de realizadas las modificaciones que se entiendan necesarias, se utiliza “Guardar como plantilla”. Una vez guardado el documento, se actualizan los vínculos con el diseño original, del mismo modo que lo hace cuando se abre.