Si solo desea crear un conjunto de datos, no tiene que preocuparse acerca del punto de inserción. Si desea crear un conjunto de datos e insertar un diseño, asegúrese de que el punto de inserción se encuentra exactamente donde desea insertar el diseño en la página.

Elija Insertar > Spry > Conjunto de datos de Spry.

En la pantalla Especificar fuente de datos, haga lo siguiente:

• Seleccione HTML en el menú emergente Seleccionar tipo de datos. (Esta opción está seleccionada de forma predeterminada).

• Indique un nombre para el conjunto de datos nuevo. El nombre predeterminado es ds1 la primera vez que crea un conjunto de datos. El nombre del conjunto de datos puede contener letras, números y guiones bajos, pero no puede empezar por un número.

• Especifique los elementos HTML de la fuente de datos que desea que Dreamweaver detecte. Por ejemplo, si ha organizado sus datos dentro de una etiqueta div y desea que Dreamweaver detecte las etiquetas div en lugar de las tablas, seleccione Divs en el menú emergente Detectar. La opción predeterminada permite escribir el nombre de la etiqueta que desea detectar.

• Especifique la ruta del archivo que contiene la fuente de datos HTML. La ruta puede ser una ruta relativa a un archivo local del sitio (por ejemplo, data/html_data.html) o una dirección URL absoluta a una página Web dinámica (mediante HTTP o HTTPS). Puede hacer clic en el botón Examinar para ir hasta el archivo local y seleccionarlo.

  Dreamweaver representa la fuente de datos HTML en la ventana Selección de datos y muestra marcadores visuales de los elementos que se pueden seleccionar como contenedores para los conjuntos de datos. El elemento que elija utilizar debe tener un ID exclusivo asignado. Si no lo tiene, Dreamweaver mostrará un mensaje de error y deberá volver al archivo de fuente de datos para asignarle un ID exclusivo. Asimismo, los elementos que se pueden seleccionar en el archivo de fuente de datos no pueden residir en regiones de Spry ni contener otras referencias de datos.

  También puede especificar una entrada de tiempo de diseño como fuente de datos. Para obtener más información, consulte Utilización de una entrada de tiempo de diseño.

• Seleccione el elemento contenedor de datos haciendo clic en una de las flechas amarillas que aparece en la ventana Selección de datos o eligiendo un ID en el menú emergente Contenedores de datos.

  
  Selección del elemento para el contenedor de datos del conjunto de datos HTML.

  Si se trata de un archivo extenso, haga clic en la flecha Expandir/Contraer en la parte inferior de la ventana Selección de datos para ver más datos.

  Después de seleccionar el elemento contenedor para el conjunto de datos, Dreamweaver muestra una vista previa del conjunto de datos en la ventana Vista previa de datos.

• (Opcional) Elija Selección de datos avanzada para especificar selectores de datos CSS para el conjunto de datos. Por ejemplo, si especifica .product en el cuadro de texto Selectores de filas y .boximage en el cuadro de texto Selectores de columna, el conjunto de datos solo incluye las filas a las que esté asignada la clase .product y las columnas a las que esté asignada la clase .boximage.

  Si desea añadir varios selectores en un cuadro de texto, separe los selectores con una coma.

  Para obtener más información, consulte Acerca de los selectores de datos de Spry.

• Cuando termine en la pantalla Especificar fuente de datos, haga clic en Listo para crear el conjunto de datos inmediatamente o en Siguiente para pasar a la pantalla Establecer opciones de datos. Si hace clic en Listo, el conjunto de datos está disponible en el panel Vinculaciones (Ventana > Vinculaciones).

En la pantalla Establecer opciones de datos, haga lo siguiente:

• (Opcional) Para configurar los tipos de columna de conjunto de datos, seleccione una columna y elija el tipo de columna en el menú emergente Tipo. Por ejemplo, si una de las columnas del conjunto de datos contiene números, seleccione la columna y elija número en el menú emergente Tipo. Esta solo es importante si desea que el usuario pueda ordenar los datos por los datos de esta columna.

  Para seleccionar una columna de conjunto de datos, haga clic en el encabezado, elíjala en el menú emergente Nombre de columna o, mediante las flechas izquierda y derecha situadas en la esquina superior izquierda de la pantalla, vaya hasta la columna pertinente.

• (Opcional) Para especificar cómo desea ordenar los datos, seleccione la columna según la cual se ordenarán los datos en el menú emergente Columna de ordenación. Después de seleccionar la columna, especifique si el orden debe ser ascendente o descendente.

• (Opcional: solo tablas) Anule la selección de Usar primera fila como encabezado si desea utilizar nombres de columna genéricos (es decir, columna 0, columna 1, columna 2, etc.) en lugar de los nombres de columna especificados en la fuente de datos HTML.

• (Opcional: solo tablas) Seleccione Usar columnas como filas para invertir la orientación horizontal y vertical de los datos del conjunto de datos. Si selecciona esta opción, las columnas se utilizarán como filas.
• (Opcional) Seleccione Filtrar filas duplicadas para excluir las filas duplicadas de datos del conjunto de datos.
• (Opcional) Seleccione Desactivar caché de datos si desea tener acceso siempre a los datos más recientes en el conjunto de datos. Si desea que los datos se actualicen automáticamente, seleccione Actualizar datos automáticamente y especifique un tiempo de actualización en milisegundos.
• Cuando termine, en la pantalla Establecer opciones de datos, haga clic en Listo para crear el conjunto de datos inmediatamente o haga clic en Siguiente para pasar a la pantalla Elegir opciones de inserción. Si hace clic en Listo, el conjunto de datos está disponible en el panel Vinculaciones (Ventana > Vinculaciones).

En la pantalla Elegir opciones de inserción, realice una de las acciones siguientes:

• Seleccione un diseño para el conjunto nuevo y especifique las opciones de configuración adecuadas. Para obtener más información, consulte Elección de un diseño de conjunto de datos.

• Seleccionar No insertar HTML. Si selecciona esta opción, Dreamweaver crea al conjunto de datos pero no añade HTML a la página. El conjunto de datos está disponible en el panel Vinculaciones (Ventana > Vinculaciones) y puede arrastrar los datos manualmente desde el conjunto de datos a la página.

Haga clic en Listo.

Dreamweaver crea el conjunto de datos y, si selecciona una opción de diseño, muestra el diseño y los marcadores de posición de datos de la página. Si accede a la vista de Código, podrá comprobar que Dreamweaver ha añadido en el encabezado referencias al archivo SpryData.js y al archivo SpryHTMLDataSet.js. Estos archivos son activos importantes de Spry que funcionan con la página. Asegúrese de no eliminar este código de la página, de lo contrario, el conjunto de datos no funcionará. Cuando carga la página en el servidor, también deberá cargar estos archivos como archivos dependientes.

Si solo desea crear un conjunto de datos, no tiene que preocuparse acerca del punto de inserción. Si desea crear un conjunto de datos e insertar un diseño, asegúrese de que el punto de inserción se encuentra exactamente donde desea insertar el diseño en la página.

Elija Insertar > Spry > Conjunto de datos de Spry.

En la pantalla Especificar fuente de datos, haga lo siguiente:

• Seleccione XML en el menú emergente Seleccionar tipo de datos.

• Indique un nombre para el conjunto de datos nuevo. El nombre predeterminado es ds1 la primera vez que crea un conjunto de datos. El nombre del conjunto de datos puede contener letras, números y guiones bajos, pero no puede empezar por un número.

• Especifique la ruta al archivo que contiene la fuente de datos XML. La ruta puede ser una ruta relativa a un archivo local del sitio (por ejemplo, datafiles/data.xml) o una dirección URL absoluta a una página web (mediante HTTP o HTTPS). Puede hacer clic en el botón Examinar para ir hasta el archivo local y seleccionarlo.

  Dreamweaver representa la fuente de datos XML en la ventana Elemento de fila y muestra el árbol XML de los elementos de datos que se pueden seleccionar. Los elementos que se repiten incluyen un signo más (+) y a los elementos secundarios se les aplica sangría.

  También puede especificar una entrada de tiempo de diseño como fuente de datos. Para obtener más información, consulte Utilización de una entrada de tiempo de diseño.

• Seleccione el elemento que contiene los datos que desea mostrar. Este elemento se suele repetir, como <menu_item>, e incluye varios elementos secundarios, como <item>, <link>, <description>, etc.

  
  Selección de un elemento repetido para el conjunto de datos XML.

  Después de seleccionar el elemento contenedor para el conjunto de datos, Dreamweaver muestra una vista previa del conjunto de datos en la ventana Vista previa de datos. El cuadro de texto XPath muestra una expresión que indica dónde está ubicado el nodo elegido en el archivo de origen XML.

• Cuando termine, en la pantalla Especificar fuente de datos, haga clic en Listo para crear el conjunto de datos inmediatamente o en Siguiente para pasar a la pantalla Establecer opciones de datos. Si hace clic en Listo, el conjunto de datos está disponible en el panel Vinculaciones (Ventana > Vinculaciones).

En la pantalla Establecer opciones de datos, haga lo siguiente:

• (Opcional) Para configurar los tipos de columna de conjunto de datos, seleccione una columna y elija el tipo de columna en el menú emergente Tipo. Por ejemplo, si una de las columnas del conjunto de datos contiene números, seleccione la columna y elija número en el menú emergente Tipo. Esta solo es importante si desea que el usuario pueda ordenar los datos por los datos de esta columna.

  Para seleccionar una columna de conjunto de datos, haga clic en el encabezado, elíjala en el menú emergente Nombre de columna o, mediante las flechas izquierda y derecha situadas en la esquina superior izquierda de la pantalla, vaya hasta la columna pertinente.

• (Opcional) Para especificar cómo desea ordenar los datos, seleccione la columna según la cual se ordenarán los datos en el menú emergente Columna de ordenación. Después de seleccionar la columna, especifique si el orden debe ser ascendente o descendente.

• (Opcional) Seleccione Filtrar filas duplicadas para excluir las filas duplicadas de datos del conjunto de datos.

• (Opcional) Seleccione Desactivar caché de datos si desea tener acceso siempre a los datos más recientes en el conjunto de datos. Si desea que actualizar los datos automáticamente, seleccione Actualizar datos automáticamente y especifique un tiempo de actualización en milisegundos.

• Cuando termine, en la pantalla Establecer opciones de datos, haga clic en Listo para crear el conjunto de datos inmediatamente o haga clic en Siguiente para pasar a la pantalla Elegir opciones de inserción. Si hace clic en Listo, el conjunto de datos está disponible en el panel Vinculaciones (Ventana > Vinculaciones).

En la pantalla Elegir opciones de inserción, realice una de las acciones siguientes:

• Seleccione un diseño para el conjunto nuevo y especifique las opciones de configuración adecuadas. Para obtener más información, consulte Elección de un diseño de conjunto de datos.

• Seleccionar No insertar HTML. Si selecciona esta opción, Dreamweaver crea al conjunto de datos pero no añade HTML a la página. El conjunto de datos está disponible en el panel Vinculaciones (Ventana > Vinculaciones) y puede arrastrar los datos manualmente desde el conjunto de datos a la página.

Haga clic en Listo.

Dreamweaver crea el conjunto de datos y, si selecciona una opción de diseño, muestra el diseño y los marcadores de posición de datos de la página. Si accede a la vista de Código, podrá comprobar que Dreamweaver ha añadido en el encabezado referencias al archivo xpath.js y al archivo SpryData.js. Estos archivos son activos importantes de Spry que funcionan con la página. Asegúrese de no eliminar este código de la página, de lo contrario, el conjunto de datos no funcionará. Cuando carga la página en el servidor, también deberá cargar estos archivos como archivos dependientes..

En el panel Columnas, ajuste las columnas para la tabla mediante el procedimiento siguiente:

• Seleccione un nombre de columna y haga clic en el signo menos (-) para suprimir la columna de la tabla. Haga clic en el signo más (+) y seleccione el nombre de una columna para añadir nuevas columnas a la tabla.

• Seleccione el nombre de una columna y haga clic en las flechas arriba o abajo para desplazar la columna. Al mover una columna hacia arriba, se desplaza hacia la izquierda en la tabla; al mover una columna hacia abajo, se desplaza hacia la derecha.

Para poder ordenar una columna, elija la columna en el panel Columnas y seleccione Ordenar columna al hacer clic en el encabezado. Todas las columnas se pueden ordenar de forma predeterminada.

Si desea que no se pueda ordenar una columna, selecciónela en el panel Columnas y anule la selección de Ordenar columna al hacer clic en el encabezado.

Si tiene estilos CSS asociados a la página como hoja de estilos adjunta o como conjunto de estilos individuales en la página HTML, puede aplicar una clase CSS para una o varias de las siguientes opciones:

Cambia el aspecto de las filas impares de la tabla dinámica según el estilo de clase seleccionado.

Cambia el aspecto de las filas pares de la tabla dinámica según el estilo de clase seleccionado.

Cambia el aspecto de una fila de la tabla cuando sitúa el cursor del ratón sobre ella según el estilo de clase seleccionado.

Cambia el aspecto de una fila de la tabla cuando hace clic sobre ella según el estilo de clase seleccionado.

Si la tabla que está creando se va a convertir en una tabla maestra de Spry dinámica, seleccione Actualizar regiones de detalle al hacer clic en la fila. Para obtener más información, consulte Acerca de las tablas maestras de Spry dinámicas y la actualización de regiones de detalle.

Haga clic en Aceptar para cerrar el cuadro de diálogo y, a continuación, haga clic en Listo en la pantalla Elegir opciones de inserción.

Si está en la vista de Diseño, podrá ver la tabla aparecer con una fila de encabezados y una fila de de referencias de datos. Las referencias de datos se muestran resaltadas y entre corchetes ({}).

En el panel Columnas maestro, ajuste el contenido de la región maestra de esta manera:

• Seleccione el nombre de una columna y haga clic en el signo menos (-) para suprimir la columna de la región maestra. Haga clic en el signo más (+) y seleccione el nombre de una columna para añadir nuevas columnas a la región maestra. Dreamweaver rellena la región maestra de manera predeterminada con datos de la primera columna del conjunto de datos.

• Seleccione el nombre de una columna y haga clic en las flechas arriba o abajo para desplazar la columna. Cuando se desplaza una columna hacia arriba o hacia abajo en el panel Columnas maestro, se define el orden de los datos en la región maestra de la página.

Repita los pasos anteriores para el panel Columnas detalle. Dreamweaver rellena la región de detalle de manera predeterminada con todos los datos que no aparecen en la región maestra (es decir, todas las columnas excepto la primera columna del conjunto de datos).

(Opcional) Defina distintos tipos de contenedores de datos en la región de detalle. Para ello, seleccione el nombre de la columna de detalle y seleccione el contenedor que desea utilizar en el menú emergente Tipo de contenedor. Puede elegir entre las etiquetas DIV, P, SPAN o H1-H6.

Haga clic en Aceptar para cerrar el cuadro de diálogo y, a continuación, haga clic en Listo en la pantalla Elegir opciones de inserción.

Si está en la vista de Diseño, podrá ver las regiones maestro/detalle aparecer con las referencias de datos seleccionadas. Las referencias de datos se muestran resaltadas y entre corchetes ({}).

En el panel Columnas, ajuste el contenido de los contenedores apilados de esta manera:

• Seleccione el nombre de una columna y haga clic en el signo menos (-) para suprimir la columna de los contenedores apilados. Haga clic en el signo más (+) y seleccione el nombre de una columna para añadir nuevas columnas a los contenedores. Dreamweaver rellena los contenedores apilados de manera predeterminada con datos de todas las columnas del conjunto de datos.

• Seleccione el nombre de una columna y haga clic en las flechas arriba o abajo para desplazar la columna. Cuando se desplaza una columna hacia arriba o hacia abajo en el panel Columnas, se define el orden de los datos en los contenedores apilados de la página.

(Opcional) Defina distintos tipos de contenedores de datos en el contenedor apilado. Para ello, seleccione el nombre de la columna del conjunto de datos y seleccione el contenedor que desea utilizar en el menú emergente Tipo de contenedor. Puede elegir entre las etiquetas DIV, P, SPAN o H1-H6.

Haga clic en Aceptar para cerrar el cuadro de diálogo y, a continuación, haga clic en Listo en la pantalla Elegir opciones de inserción.

Si está en la vista de Diseño, podrá ver el contenedor aparecer con las referencias de datos seleccionadas. Las referencias de datos se muestran resaltadas y entre corchetes ({}).

En el panel Columnas foco, ajuste el contenido del área de foco de esta manera:

• Seleccione el nombre de una columna y haga clic en el signo menos (-) para suprimir la columna del área de foco. Haga clic en el signo más (+) y seleccione el nombre de una columna para añadir nuevas columnas al área de foco. Dreamweaver rellena el área de foco de manera predeterminada con datos de la primera columna del conjunto de datos.

• Seleccione el nombre de una columna y haga clic en las flechas arriba o abajo para desplazar la columna. Cuando se desplaza una columna hacia arriba o hacia abajo en el panel Columnas foco, se define el orden de los datos en el área de foco de la página.

(Opcional) Defina distintos tipos de contenedores de datos en el área de foco. Para ello, seleccione el nombre de la columna del conjunto de datos y seleccione el contenedor que desea utilizar en el menú emergente Tipo de contenedor. Puede elegir entre las etiquetas DIV, P, SPAN o H1-H6.

Repita los pasos anteriores para el panel Columnas apiladas. Dreamweaver rellena las columnas apiladas de manera predeterminada con todos los datos que no aparecen en el área de foco (es decir, todas las columnas excepto la primera columna del conjunto de datos).

Haga clic en Aceptar para cerrar el cuadro de diálogo y, a continuación, haga clic en Listo en la pantalla Elegir opciones de inserción.

Si está en la vista de Diseño, podrá ver el área de foco con contenedores apilados junto a ella y con las referencias de datos seleccionadas. Las referencias de datos se muestran resaltadas y entre corchetes ({}).

En el panel Vinculaciones (Ventana > Vinculaciones), haga doble clic en el nombre del conjunto de datos e inserte los cambios que desee.

Empiece creando un conjunto de datos de Spry (consulte las instrucciones previas para este procedimiento).

En la pantalla Especificar fuente de datos, haga clic en el vínculo Entrada de tiempo de diseño:

Haga clic en el botón Examinar para ir hasta la entrada de tiempo de diseño y haga clic en Aceptar.

Seleccione Insertar > Spry > Región de Spry.

Para el contenedor de objeto, seleccione la opción <div> o <span>. De forma predeterminada se utiliza un contenedor <div>.

Seleccione una de las opciones siguientes:

• Para crear una región de Spry, selección Región (valor predeterminado) como tipo de región que se va a insertar.

• Para crear una región de detalle de Spry, seleccione la opción Región de detalle. La región de detalle únicamente se utilizaría si desea vincular datos dinámicos que se actualizan cuando cambian los datos de otras regiones de Spry.

Elija el conjunto de datos de Spry en el menú.

Si desea crear o cambiar la región definida para un objeto, seleccione el objeto y elija una de las siguientes opciones:

Sitúa una nueva región alrededor de un objeto.

Sustituye una región existente para un objeto.

Al hacer clic en Aceptar, Dreamweaver coloca un marcador de región en la página con el texto “El contenido de la región de Spry va aquí”. Puede sustituir este marcador por un objeto de datos de Spry, como una tabla o una lista de repetición, o por datos dinámicos desde el panel Vinculaciones (Ventana > Vinculaciones).

Para sustituir el texto del marcador de posición por un objeto de datos de Spry (por ejemplo, una tabla de Spry), haga clic en el botón del objeto de datos de Spry correspondiente en la categoría Spry del panel Insertar.

Para sustituir el texto del marcador por datos dinámicos, utilice uno de los métodos siguientes:

• Arrastre uno o varios elementos del panel Vinculaciones sobre el texto seleccionado.

• En la vista de Código, escriba directamente el código de uno o varios elementos. Utilice este formato: {dataset-name::element-name}, como en {ds1::category}. o {dsProducts::desc}. Si solo utiliza un conjunto de datos en el archivo, o si utiliza elementos de datos del mismo conjunto de datos que ha definido para la región, puede omitir el nombre del conjunto de datos y escribir simplemente {category} o {desc}.

Independientemente del método que utilice para definir el contenido de la región, se añaden las siguientes líneas al código HTML:

Seleccione Insertar > Spry > Repetición de Spry.

Para el contenedor de objeto, seleccione la opción <div> o <span> en función del tipo de etiqueta que desea. De forma predeterminada se utiliza un contenedor <div>.

Seleccione la opción Repetir (valor predeterminado) o Repetir hijo.

Elija el conjunto de datos de Spry en el menú.

Si ya ha seleccionado texto o elementos, puede distribuirlos o sustituirlos.

Haga clic en Aceptar para mostrar una región de repetición en la página.

Al hacer clic en Aceptar, Dreamweaver inserta un marcador de región en la página con el texto “El contenido de la región de Spry va aquí”. Puede sustituir este marcador por un objeto de datos de Spry, como una tabla o una lista de repetición, o por datos dinámicos desde el panel Vinculaciones (Ventana > Vinculaciones).

Para sustituir el texto del marcador de posición por un objeto de datos de Spry, haga clic en el botón del objeto de datos de Spry correspondiente del panel Insertar.

Para sustituir el texto del marcador por datos dinámicos, utilice uno de los métodos siguientes:

• Arrastre uno o varios elementos del panel Vinculaciones sobre el texto seleccionado.

• En la vista de Código, escriba directamente el código de uno o varios elementos. Utilice este formato: {dataset-name::element-name}, como en {ds1::category}. o {dsProducts::desc}. Si solo utiliza un conjunto de datos en el archivo, o si utiliza elementos de datos del mismo conjunto de datos que ha definido para la región, puede omitir el nombre del conjunto de datos y escribir simplemente {category} o {desc}.

Independientemente del método que utilice para definir el contenido de la región, se añaden las siguientes líneas al código HTML:

Seleccione Insertar > Spry > Lista de repetición de Spry.

Seleccione la etiqueta de contenedor que desea utilizar: UL, OL, DL o SELECT. El resto de las opciones varía en función del contenedor que elija. Si elige SELECT, debe definir los siguientes campos:

• Columna de etiquetas: Esto es lo que ven los usuarios cuando visualizan la página en los navegadores.

• Columna de valor: Este es el valor real que se envía al servidor en segundo plano.

Por ejemplo, puede crear una lista de estados y mostrar a los usuarios Alabama y Alaska pero enviar AL o AK al servidor. También puede seleccionar SELECT como herramienta de navegación y mostrar nombres de productos, como “Adobe Dreamweaver” y “Adobe Acrobat” a los usuarios, pero enviar URL, como “support/products/dreamweaver.html” y “support/products/acrobat.html” al servidor.

Elija el conjunto de datos de Spry en el menú.

Elija las columnas que desea mostrar.

Haga clic en Aceptar para mostrar una región de lista de repetición en la página. En la vista de Código, verá que se insertan en el archivo etiquetas de selección <ul>, <ol>, <dl> HTML o FORM.