Creacion de Plantillas

Las plantillas (I)

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

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 zonas fijas que, por tanto, no podrán ser modificadas.

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.

Por supuesto, las plantillas las podremos usar siempre que sigamos trabajando con Dreamweaver.

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 Activos, que 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 nos sirven trabajar con las plantillas.

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.

Ahora solo nos quedaría cambiar los elementos variables por regiones editables.

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, 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 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 Formulario 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 Plantillas de sitio, 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.

 

Plantillas HTML5 de Dreamweaver CC

La versión CC de Dreamweaver incluye 5 plantillas muy especiales que pueden ser usadas en proyectos propios. No tienen las características de los archivos .dwt que hemos estudiado en este capítulo. Es decir, no contienen zonas fijas y zonas editables, ni es necesario usar con ellas las herramientas del menú Modificar, Plantillas como hemos visto hasta ahora.

Simplemente, al momento de seleccionar alguna de ellas, Dreamweaver crea una copia de la plantilla y nos pide que la grabemos con un nombre específico. Lo que obtenemos es un archivo .html que podemos editar libremente para adaptarlo a nuestras necesidades.

¿Qué tienen de especial estas plantillas? Bueno, se trata en todos los casos de diseños llamados Responsive o diseños multipantalla. Los cuales están basados en consultas de medios de modo que se adaptan automáticamente a los diversos dispositivos que puede utilizar un usuario para consultar nuestro sitio: equipos de escritorio, móviles y tabletas. Esto implica que las distintas plantillas ya incluyen hojas de estilo CSS con el código necesario para su funcionamiento y en algunos casos algunas librerías javascript.

Para disponer de alguna de estas plantillas utilizamos el menú Archivo, opción Nuevo. Del cuadro de diálogo resultante, que ya hemos visto antes, seleccionamos la categoría Plantillas de inicio. Veremos una carpeta llamada Responsive Starters y en la sección Página de muestra, cinco plantillas: Acerca de la página, Cartera, Comercio electrónico, Correo electrónico y Entrada de blog.

Como ya mencionamos, al seleccionar una de las plantillas, Dreamweaver abre inmediatamente el cuadro de diálogo con el que debemos definir un nombre y una carpeta para la nueva página. Como ya hemos visto, es importante definir dicha página y crear una estructura adecuada de carpetas para configurar correctamente nuestro sitio, independientemente que lo hagamos a partir de estas plantillas.

Una vez que hemos grabado nuestro archivo con algún nombre, Dreamweaver nos advierte que es necesario adjuntar diversos archivos dependientes que le darán la funcionalidad multipantalla.

Después podremos editar la plantilla en el área de documento, ya sea en la vista Diseño o la vista En vivo, como en la siguiente imagen.

Una manera simple de hacerlo es sustituyendo las imágenes por otras personalizadas para nuestro sitio utilizando las medidas sugeridas en las imágenes en gris de la plantilla y lo mismo podemos hacer con el texto, los enlaces, etcétera. Obviamente, también podríamos añadir nuevos elementos: capas HTML (que estudiaremos más adelante), imágenes, texto, etcétera.

Podemos probar el modo en que la página se adapta a las distintas pantallas utilizando la vista En vivo y luego pulsando en alguno de los iconos de la barra de estado .

Obviamente, podríamos a su vez crear a partir de un diseño de este tipo un archivo de plantilla .dwt, por lo que, de nueva cuentra, tendríamos que definir sus zonas editables, etcétera.

Lo importane a resaltar aquí es la facilidad con la que podemos crear una página web multipantalla gracias a las plantillas incorporadas en esta versión del programa.