PDF de programación - USO DE DREAMWEAVER CS5 - Creación y administración de plantillas

Última modificación 27/4/2010

USO DE DREAMWEAVER CS5
Creación y administración de plantillas

428

Sintaxis de plantilla

Reglas generales de sintaxis
Dreamweaver utiliza etiquetas de comentario HTML para especificar regiones de plantillas y documentos basados en
plantillas de manera que los documentos basados en plantillas continúen siendo archivos HTML válidos. Al insertar
un objeto de plantilla, las etiquetas de plantilla se insertan en el código.
Las reglas generales de sintaxis son las siguientes:
Cada vez que aparece un espacio puede sustituir los espacios en blanco que desee (espacios, tabulaciones, saltos de

línea). El espacio en blanco es obligatorio, salvo al principio o al final de un documento.

Los atributos se pueden proporcionar en cualquier orden. Por ejemplo, en un TemplateParam, puede especificar

el tipo delante del nombre.

Los nombres de comentarios y atributos tienen en cuenta el uso de mayúsculas y minúsculas.
Todos los atributos deben estar entre comillas. Se pueden utilizar comillas dobles o simples.

Etiquetas de plantilla
Dreamweaver utiliza las etiquetas de plantilla siguientes:

<!-- TemplateBeginEditable name="..." -->
<!-- TemplateEndEditable -->
<!-- TemplateParam name="..." type="..." value="..." -->
<!-- TemplateBeginRepeat name="..." -->
<!-- TemplateEndRepeat -->
<!-- TemplateBeginIf cond="..." -->
<!-- TemplateEndIf -->
<!-- TemplateBeginPassthroughIf cond="..." -->
<!-- TemplateEndPassthroughIf -->
<!-- TemplateBeginMultipleIf -->
<!-- TemplateEndMultipleIf -->
<!-- TemplateBeginPassthroughMultipleIf -->
<!-- TemplateEndPassthroughMultipleIf -->
<!-- TemplateBeginIfClause cond="..." -->
<!-- TemplateEndIfClause -->
<!-- TemplateBeginPassthroughIfClause cond="..." -->
<!-- TemplateEndPassthroughIfClause -->
<!-- TemplateExpr expr="..." --> (equivalent to @@...@@)
<!-- TemplatePassthroughExpr expr="..." -->
<!-- TemplateInfo codeOutsideHTMLIsLocked="..." -->

Etiquetas de instancia
Dreamweaver utiliza las etiquetas de instancia siguientes:

Última modificación 27/4/2010

USO DE DREAMWEAVER CS5
Creación y administración de plantillas

429

<!-- InstanceBegin template="..." codeOutsideHTMLIsLocked="..." -->
<!-- InstanceEnd -->
<!-- InstanceBeginEditable name="..." -->
<!-- InstanceEndEditable -->
<!-- InstanceParam name="..." type="..." value="..." passthrough="..." -->
<!-- InstanceBeginRepeat name="..." -->
<!-- InstanceEndRepeat -->
<!-- InstanceBeginRepeatEntry -->
<!-- InstanceEndRepeatEntry -->

Comprobación de la sintaxis de la plantilla
Dreamweaver comprueba la sintaxis de las plantillas al guardarlas, pero también puede comprobarla manualmente
antes de guardar las plantillas. Por ejemplo, si añade un parámetro o una expresión de plantilla en la vista Código,
puede comprobar si el código tiene la sintaxis correcta.
1 Abra el documento que desea comprobar en la ventana de documento.
2 Elija Modificar > Plantillas > Comprobar sintaxis de plantilla.
Si la sintaxis es incorrecta, aparece un mensaje de error. El mensaje describe el error e indica la línea de código donde
se encuentra.

Más temas de ayuda
“Reconocimiento de plantillas y documentos basados en plantillas” en la página 402
“Expresiones de plantilla” en la página 400

Configuración de preferencias de edición para plantillas

Personalización de las preferencias de colores de código para una plantilla
Las preferencias de colores de código sirven para controlar el texto, el color de fondo y los atributos de estilo del texto
que se muestra en la vista Código. Puede definir su propia combinación de colores con el fin de distinguir fácilmente
las regiones de plantilla al ver un documento en la vista Código.
1 Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh).
2 Seleccione Colores de código en la lista de categorías de la izquierda.
3 Seleccione HTML en la lista Tipo de documento y, a continuación, haga clic en el botón Editar combinación de

colores.

4 En la lista Estilos para, seleccione Etiquetas de plantilla.
5 Defina el color, el color de fondo y los atributos de estilo para el texto de la vista Código siguiendo este

procedimiento:

Si desea cambiar el color del texto, escriba en el cuadro de texto Color de texto el valor hexadecimal del color que
desea aplicar al texto seleccionado o utilice el selector de color. Repita la operación en el campo Fondo para añadir
o cambiar un color de fondo existente para el texto seleccionado.

Si desea añadir un atributo de estilo al código seleccionado, haga clic en los botones B (negrita), I (cursiva) o U

(subrayado) para establecer el formato deseado.

6 Haga clic en Aceptar.

Última modificación 27/4/2010

USO DE DREAMWEAVER CS5
Creación y administración de plantillas

430

Nota: Si desea realizar cambios globales, puede editar el archivo de origen que almacena sus preferencias. En Windows
XP, éste se encuentra en C:\Documents and Settings\%nombredeusuario%\Application Data\Adobe\Dreamweaver
9\Configuration\CodeColoring\Colors.xml. En Windows Vista, éste se encuentra en
C:\Users\%nombreusuario%\Application Data\Adobe\Dreamweaver 9\Configuration\CodeColoring\Colors.xml.

Configuración de preferencias de resaltado en regiones de plantillas
Puede utilizar las preferencias de resaltado de Dreamweaver para personalizar el color de resaltado del contorno de las
regiones editables y bloqueadas de una plantilla en vista Diseño. El color de las regiones editables aparece en la plantilla
y en los documentos basados en ella.

Más temas de ayuda
“Reconocimiento de documentos basados en plantilla en la vista Diseño” en la página 404
“Reconocimiento de plantillas en la vista Diseño” en la página 402

Cambio de los colores de resaltado de la plantilla
1 Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Macintosh).
2 Seleccione Resaltando en la lista de categorías de la izquierda.
3 Haga clic en el cuadro de color de Regiones editables, Regiones anidadas o Regiones bloqueadas y seleccione un
color de resaltado utilizando el selector de color (o introduzca el valor hexadecimal correspondiente al color de
resaltado en el cuadro).

Para información sobre cómo utilizar el selector de color, consulte “Utilización del selector de colores” en la
página 219.
4 (Opcional) Repita el proceso con otros tipos de región de plantilla, según convenga.
5 Haga clic en la opción Mostrar para activar o desactivar la visualización de colores en la ventana de documento.
Nota: Región anidada no tiene una opción Mostrar. Su visualización depende de la opción Región editable.
6 Haga clic en Aceptar.

Visualización de los colores de resaltado en la ventana de documento
❖ Seleccione Ver > Ayudas visuales > Elementos invisibles.
Los colores de resaltado aparecen en la ventana de documento sólo cuando Ver > Ayudas visuales > Elementos
invisibles está activado y las opciones adecuadas están activadas en las preferencias de Resaltando.
Nota: Si se muestran elementos invisibles pero los colores de resaltado no lo son, seleccione Edición > Preferencias
(Windows) o Dreamweaver > Preferencias (Macintosh) y, a continuación, seleccione la categoría Resaltado. Asegúrese
de que la opción Mostrar que hay junto al color de resaltado en cuestión está seleccionada. Verifique también que el color
elegido sea claramente visible sobre el color de fondo de la página.

Última modificación 27/4/2010

431

Capítulo 15: Creación visual de páginas de
Spry

El framework de Spry es una biblioteca JavaScript que proporciona a los diseñadores Web la capacidad de crear
páginas Web que ofrezcan una experiencia más completa a los visitantes. Con Spry, puede utilizar HTML, CSS y una
cantidad mínima de código JavaScript para incorporar datos XML a los documentos HTML, crear widgets, como
acordeones y barras de menú, y añadir tipos distintos de efectos para varios elementos de la página. El framework de
Spry está diseñado para hacer el lenguaje de formato simple y fácil de utilizar para usuarios con un conocimiento
básico de HTML, CSS y JavaScript.
Está destinado principalmente a profesionales del diseño Web o a diseñadores Web no profesionales con un nivel
avanzado. No va destinado a entornos de trabajo de desarrollo Web empresarial (aunque puede utilizarse en
conjunción con otras páginas de nivel empresarial).

Acerca del framework de Spry
El framework de Spry es una biblioteca JavaScript que proporciona a los diseñadores Web la capacidad de crear
páginas Web que ofrezcan una experiencia más completa a los visitantes. Con Spry, puede utilizar HTML, CSS y una
cantidad mínima de código JavaScript para incorporar datos XML a los documentos HTML, crear widgets, como
acordeones y barras de menú, y añadir tipos distintos de efectos para varios elementos de la página. El framework de
Spry está diseñado para hacer el lenguaje de formato simple y fácil de utilizar para usuarios con un conocimiento
básico de HTML, CSS y JavaScript.
Está destinado principalmente a profesionales del diseño Web o a diseñadores Web no profesionales con un nivel
avanzado. No va destinado a entornos de trabajo de desarrollo Web empresarial (aunque puede utilizarse en
conjunción con otras páginas de nivel empresarial).
Para más información sobre el framework de Spry, consulte www.adobe.com/go/learn_dw_spryframework_es.

Más temas de ayuda
Guía de desarrolladores de Spry

Trabajo con los widgets de Spry (instrucciones
generales)

Acerca de los widgets de Spry
Un widget de Spry es un elemento de página que permite la interacción del usuario y, por tanto, ofrece una experiencia
más completa. Un widget de Spry consta de las siguientes partes:
Estructura de widget Bloque de código HTML que define la composición estructural del widget.
Comportamiento del widget JavaScript que controla la respuesta del widget a los eventos iniciados por el usuario.
Estilo del widg