DWUG

La extensi?Create Web Photo Album’ incluye una serie de plantillas
predise?s. En este art?lo iremos un poco m?lejos
y crearemos un album de fotos que se adapte a una de nuestras plantillas de Dreamweaver.
Y m?a?Las modificaciones posteriores en la plantilla afectar?a los documentos generados por la extensi?!–more–>

Las versiones 2.X de la extensi?Create Web Photo Album’ incluyen
una serie de plantillas predise?s. Sin embargo, presentan 2 carencias:

• Puede que ninguno de los dise?sea parecido al que estamos usando
  en nuestro sitio
• Los retoques posteriores exigen la modificaci?e todos los documentos
  uno a uno

Nuestro objetivo por tanto ser?

• Crear una plantilla personalizada, para que la extensi?enere una
  galer?con id?ico dise?l que estamos utilizando.
• Posibilidad
  de que, al editar la plantilla (*.dwt) que tenemos, toda la galer? reciba la modificaci?n cascada.

Comencemos:

El primer paso ser?rear una plantilla de Dreamweaver. Para simplificar
utilizaremos una sencilla, pero podemos crear una tan compleja como queramos
(plantillas anidadas, regiones condicionales…). El c?o de ejemplo
(b?co) de la plantilla es ?e:

aqui va la imagen

aqui van los datos de la imagen

aqui van los botones de navegacion

(Nota: Cuando uses plantillas, utilizar rutas relativas a la raiz del sitio
en lugar de relativas al documento evita muchos errores a la hora de vincular
archivos en los documentos basados en las mismas)

Analiz?olo, veremos 3 zonas editables (aparte de las habituales ‘doctitle’
y ‘head’): Hemos llamado a estas 3 zonas ‘imagen’, ‘datosImagen’ y
‘navegacion’:

Guardamos la plantilla como ‘galeria.dwt’ y abrimos un nuevo documento basado
en ella. Debemos modificar el contenido de las areas editables y reemplazar
el texto por defecto por unas etiquetas especiales:
‘doctitle’: : imagen

‘imagen’: “>
‘datosImagen’: alto:
ancho:
peso:

‘navegacion’:

El c?o resultante es ?e:

Estas etiquetas pueden parecer extra? pero tienen su explicaci?br />

Tras ser llamado, Fireworks devuelve, adem?de las modificaciones de
la imagen, diferentes datos sobre la misma (medidas, peso, nombre, metadata…);
a ellos debemos a?r otros gestionados por Dreamweaver (n?o
de im?nes, imagen actual y titulo de la galer? por ejemplo).

¿
C?maneja Dreamweaver estos datos? Utiliza expresiones regulares (Regexps)
para sustituir en su plantilla determinadas etiquetas por los valores obtenidos
al ejecutar la extensi?Por ello, cada etiqueta tiene un significado:

LISTADO DE ETIQUETAS UTILIZABLES:
reemplazada por una tabla de thumbnails de
la galeria.

reemplazada por el titulo de la galeria.
reemplazada por el nombre de la imagen.

reemplazada por los enlaces para navegar de una imagen
a otra.
reemplazada por el n?o de orden
de la imagen

reemplazada por metadata obtenida de la imagen
reemplazada por la altura de la imagen
reemplazada por el ancho de la imagen

reemplazada por el peso de la imagen
reemplazada por la fecha de creaci?e la imagen

Resumiendo: Escribiremos cada etiqueta donde queramos que Dreamweaver
incluya su valor resultante.

Una vez a?do el nuevo contenido guardamos el documento como ‘template.html’ (importante: debe ser este nombre y no otro.)

Para crear el documento que muestre los thumbnails los pasos son casi id?icos:

1. Crear un documento basado en la plantilla.
2. Las areas editables quedar?asi:
   ‘doctitle’:
   ‘imagen’:

   ‘datosImagen’: (vac?
   ‘navegaci? (vac?

3. Guardar como ‘template-thumbnail.html’

Para terminar, si queremos utilizar botones en vez de texto para la navegaci? crearemos 4 im?nes:

• first.gif
• previous.gif
• next.jpg
• last.jpg

Ya tenemos todo lo b?co:

• 2 archivos html:
  template.html y
  template-thumbnail.html (opcional)
• 4 im?nes (opcionales):
  first.gif,
  previous.gif,
  next.gif,
  last.gif

Es decir: S?el archivo ‘template.html’ es obligatorio, todo lo dem? es opcional.

En el siguiente cap?lo, veremos d? debemos instalar estos archivos para
poder
ser utilizados.