Tutorial

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. 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 otras zonas que serán fijas, que no podrán ser modificadas. No es posible modificar las propiedades de una página que esta 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 actualizan todas las páginas basadas en ella. Las plantillas son archivos con la extensión DWT que se guardan en el sitio web, dentro de una carpeta llamada Templates.

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.

El panel Activos se puede abrir a través del menú Ventana, opción Activos.También pulsando F11 o sobre el botón del lanzador. 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 que tiene un + (si este botón no está activado, pulsa con el botón derecho del ratón 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. 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 derecha. 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.

Establecer regiones editables en una plantilla

Todos los elementos de una plantilla están bloqueados por defecto. Es necesario establecer las zonas que sí podrán 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 que tiene un lápiz.

Una vez abierta la plantilla es posible establecer sus propiedades a través de 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 útltima opción, que es 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.

región editable

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.

La 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 modifcarlos en las páginas.

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, si usaramos una imagen con unlogotipo 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 EditRegion1 de nuestro ejemplo podría ser modificado.

25 diciembre, 2014
dreamweaver

Crear plantillas en DreamWeaver

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. La mayoría de […]
25 diciembre, 2014
dreamweaver

Comportamientos en DreamWeaver

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 […]
25 diciembre, 2014
dreamweaver

Crear barra de navegación en DreamWeaver

Antes de comenzar con la creación de la Barra de navegación usted deberá tener preparadas ciertas imágenes. Para el desarrollo de esta lección se han creado […]
25 diciembre, 2014
dreamweaver

Crear un album de fotos con DreamWeaver

En esta lección usted aprenderá a Crear un Album de Fotos Web, para tal efecto, en primera instancia usted necesitará tener una carpeta que contenga las […]
25 diciembre, 2014
dreamweaver

Crear un sitio local nuevo básico

La creación de un sitio Web con Dreamweaver MX implica dos pasos fundamentales: 1º) crear las carpetas en el disco local: disco duro (C) con el […]
25 diciembre, 2014
dreamweaver

Editar Textos con DreamWeaver

A.- CREAR Y CONFIGURAR LA PÁGINA O DOCUMENTO 1.- Crear Página: Archivo – Nuevo (figura 2-1)- Aparece el cuadro de diálogo «Nuevo documento» – En la […]
25 diciembre, 2014
dreamweaver

Crear enlaces con DreamWeaver

A.- CREAR VÍNCULOS (=ENLACES) EN UNA PÁGINA 1.- Seleccionar texto o imagen que servirá de vínculo 2.- Modificar – Crear vínculo 3.- Buscar y seleccionar el […]
25 diciembre, 2014
dreamweaver

Entorno de trabajo de DreamWeaver MX

A.- INICIAR EL PROGRAMA DREAMWEAVER MX.- Para abrir Dreamweaver MX, llevar a cabo una de estas operaciones: 1.- Inicio – Programas – Macromedia – Hacer clic […]
25 diciembre, 2014
dreamweaver

El Panel de Objetos

El panel Objetos contiene botones para la creación e inserción de diversos tipos de objetos, como tablas, capas e imágenes. Para mostrar u ocultar el panel […]
25 diciembre, 2014
dreamweaver

Crear y editar marcos con DreamWeaver

A.- Planificar los marcos B.- Insertar marcos predefinidos a) Situar el punto de inserción en el documento previamente abierto b) A continuación, llevar a cabo una […]
25 diciembre, 2014
dreamweaver

Insertar imágenes, peliculas flash y videos en DreamWeaver

– En los documentos creados con Dreamweaver se pueden insertar: Imágenes con formato de archivo GIF, JPEG y PNG Películas Flash con formato de archivo SWF […]
25 diciembre, 2014
dreamweaver

Crear y Editar Tablas con DreamWeaver

  I.- EDITAR TABLAS EN VISTA ESTÁNDAR (Por defecto la página se abre en vista estándar) A.- CREAR UNA TABLA 1.- Para insertar una tabla en […]
25 diciembre, 2014
dreamweaver

Expresiones Regulares con DreamWeaver

De hecho lo que vamos a mostrar aquí sobre expresiones regulares se puede aplicar en muchos otros entornos (lenguajes de programación, programas, shells, etc) pero vamos […]
25 diciembre, 2014
dreamweaver

Editar código con DreamWeaver

Tarde o temprano tendremos que editar el código de nuestra web para insertar un contador, script, o algún otro código que nos hayan dado. Podemos hacerlo […]
25 diciembre, 2014
dreamweaver

Las Capas en DreamWeaver

Uno de los comportamientos más habitual e interesante es el de Mostrar-Ocultar capas. Resulta obvio que para poder aplicar este comportamiento han de existir capas en […]
25 diciembre, 2014
dreamweaver

Marquesinas en DreamWeaver

Las marquesinas son texto, imágenes, o una mezcla entre texto e imágenes, que pueden desplazarse de un lado a otro de la ventana en forma de […]