- Guía del usuario de Dreamweaver
- Introducción
- Dreamweaver y Creative Cloud
- Espacios de trabajo y vistas de Dreamweaver
- Configuración de sitios
- Acerca de los sitios de Dreamweaver
- Configuración de una versión local del sitio
- Conectar con servidores de publicación
- Configuración de un servidor de prueba
- Importación y exportación de la configuración de un sitio de Dreamweaver
- Traer sitios web existentes desde un servidor remoto a la raíz del sitio local
- Funciones de accesibilidad en Dreamweaver
- Ajustes avanzados
- Configuración de las preferencias de sitio para transferir archivos
- Especificación de la configuración del servidor proxy en Dreamweaver
- Sincronizar la configuración de Dreamweaver con Creative Cloud
- Uso de Git en Dreamweaver
- Administrar archivos
- Creación y apertura de documentos
- Administración de archivos y carpetas
- Carga de archivos al servidor y descarga desde el mismo
- Desprotección y protección de archivos
- Sincronizar archivos
- Comparación de archivos para detectar diferencias
- Ocultación de archivos y carpetas en el sitio de Dreamweaver
- Activación de Design Notes para sitios de Dreamweaver
- Prevención de la posible actuación repentina de Gatekeeper
- Maquetación y diseño
- Usar ayudas visuales al diseñar
- Información sobre el uso de CSS para diseñar la página
- Diseño de sitios web interactivos con Bootstrap
- Creación y uso de consultas de medios en Dreamweaver
- Presentación de contenido en tablas
- Colores
- Diseño interactivo mediante diseños de cuadrícula fluida
- Extract en Dreamweaver
- CSS
- Aspectos básicos de las hojas de estilos en cascada
- Diseño de páginas con el Diseñador de CSS
- Uso de preprocesadores de CSS en Dreamweaver
- Configuración de las preferencias de estilos CSS en Dreamweaver
- Mover reglas CSS en Dreamweaver
- Conversión de CSS en línea en una regla CSS en Dreamweaver
- Uso de etiquetas div
- Aplicación de degradados al fondo
- Creación y edición de efectos de transición de CSS3 en Dreamweaver
- Formatear código
- Contenido de página y activos
- Definición de las propiedades de la página
- Configuración de propiedades de encabezado CSS y propiedades de vínculo CSS
- Uso de texto
- Buscar y reemplazar texto, etiquetas y atributos
- Panel DOM
- Editar en la Vista en vivo
- Codificación de documentos en Dreamweaver
- Selección y visualización de elementos de la ventana de documento
- Configuración de las propiedades de texto en el inspector de propiedades
- Revisión ortográfica de una página web
- Uso de las reglas horizontales en Dreamweaver
- Añadir y modificar combinaciones de fuentes en Dreamweaver.
- Trabajo con activos
- Inserción y actualización de fechas en Dreamweaver
- Creación y gestión de activos favoritos en Dreamweaver
- Insertar y editar imágenes en Dreamweaver
- Adición de objetos multimedia
- Adición de vídeos en Dreamweaver
- Insertar vídeo HTML5
- Insertar archivos SWF
- Adición de efectos de sonido
- Insertar audio HTML5 en Dreamweaver
- Trabajar con elementos de bibliotecas
- Uso de texto árabe y hebreo en Dreamweaver
- Establecimiento de vínculos y navegación
- Widgets y efectos de jQuery
- Programación de sitios web
- Acerca de la programación en Dreamweaver
- Entorno de programación en Dreamweaver
- Configuración de las preferencias de programación
- Personalización de los colores del código
- Escritura y edición de código
- Sugerencias de código y completado de código
- Contraer y expandir código
- Reutilizar código con fragmentos
- Depuración de código mediante linting
- Optimización del código
- Edición de código en Vista de diseño
- Trabajo con el contenido de Head para páginas
- Inserción del lado del servidor incluida en Dreamweaver
- Uso de bibliotecas de etiquetas en Dreamweaver
- Importación de etiquetas personalizadas a Dreamweaver
- Uso de comportamientos de JavaScript (instrucciones generales)
- Aplicación de comportamientos JavaScript incorporados
- Acerca de XML y XSLT
- Realización de transformaciones XSL del lado del servidor en Dreamweaver
- Realización de transformaciones XSL en el lado del cliente en Dreamweaver
- Adición de entidades de caracteres para XSLT en Dreamweaver
- Formatear código
- Flujos de trabajo de varios productos
- Instalación y uso de extensiones para Dreamweaver
- Actualizaciones integradas en Dreamweaver
- Insertar documentos de Microsoft Office en Dreamweaver (solo Windows)
- Trabajo con Fireworks y Dreamweaver
- Edición de contenido en sitios de Dreamweaver con Contribute
- Integración de Dreamweaver Business Catalyst
- Crear campañas de correo electrónico personalizado
- Plantillas
- Acerca de las plantillas de Dreamweaver
- Reconocimiento de plantillas y documentos basados en plantillas
- Crear una plantilla de Dreamweaver
- Crear regiones editables en plantillas
- Creación de tablas y regiones repetidas en Dreamweaver
- Usar regiones opcionales en plantillas
- Definición de atributos de etiqueta editables en Dreamweaver
- Creación de plantillas anidadas en Dreamweaver
- Edición, actualización y eliminación de plantillas
- Exportar e importar contenido xml en Dreamweaver
- Aplicación o eliminación de una plantilla de un documento existente
- Edición de contenido en plantillas de Dreamweaver
- Reglas de sintaxis de etiquetas de plantilla en Dreamweaver
- Configuración de preferencias de resaltado en regiones de plantillas
- Ventajas de usar plantillas en Dreamweaver
- Móvil y multipantalla
- Sitios, páginas y formularios web dinámicos
- Aspectos básicos de las aplicaciones web
- Configuración del ordenador para desarrollo de aplicaciones
- Solución de problemas de conexiones a bases de datos
- Eliminación de secuencias de comandos de conexión en Dreamweaver
- Diseñar páginas dinámicas
- Introducción a las fuentes de contenido dinámico
- Definir fuentes de contenido dinámico
- Añadir contenido dinámico a las páginas
- Cambio de contenido dinámico en Dreamweaver
- Visualización de registros de bases de datos
- Proporcionar datos en vivo y solucionar sus problemas en Dreamweaver
- Añadir comportamientos de servidor personalizados en Dreamweaver
- Crear formularios con Dreamweaver
- Uso de formularios para recopilar información de los usuarios
- Crear y activar formularios de ColdFusion en Dreamweaver
- Crear formularios web
- Compatibilidad mejorada con HTML5 para elementos de formulario
- Desarrollar un formulario con Dreamweaver
- Creación visual de aplicaciones
- Creación de las páginas maestra y de detalles en Dreamweaver
- Crear páginas de búsqueda y resultados
- Crear una página de inserción de registros
- Crear una página de actualización de registros en Dreamweaver
- Creación de páginas de eliminación de registros en Dreamweaver
- Usar comandos ASP para modificar una base de datos en Dreamweaver
- Crear una página de registro
- Crear una página de inicio de sesión
- Creación de una página para acceso exclusivo de usuarios autorizados
- Protección de carpetas en ColdFusion con Dreamweaver
- Uso de componentes de ColdFusion en Dreamweaver
- Prueba, vista previa y publicación de sitios web
- Solución de problemas
La interfaz de usuario se ha simplificado en Dreamweaver y versiones posteriores. Como resultado, es posible que no encuentre algunas de las opciones que se describen en este artículo en Dreamweaver y versiones posteriores. Para obtener más información, consulte este artículo.
Acerca de la adición de contenido dinámico
Una vez que haya definido una o varias fuentes de contenido dinámico, podrá utilizarlas para añadir contenido dinámico a la página. Las fuentes de contenido pueden incluir una columna de un juego de registros, un valor enviado por un formulario HTML o el valor contenido en un objeto de servidor, entre otros datos.
En Dreamweaver, puede colocar contenido dinámico prácticamente en cualquier lugar de la página web o de su código fuente HTML. Puede colocar contenido dinámico en el punto de inserción, sustituir una cadena de texto o insertarlo como un atributo HTML. Por ejemplo, el contenido dinámico puede definir el atributo src de una imagen o el atributo value de un campo de formulario.
Puede añadir contenido dinámico a una página seleccionando una fuente de contenido en el panel Vinculaciones. Dreamweaver inserta un script del lado del servidor en el código de la página para indicar al servidor que transfiera los datos desde la fuente de datos hasta el código HTML de la página cuando un navegador solicite la página.
Normalmente existen varias formas de convertir en dinámico un elemento determinado de una página. Por ejemplo, para hacer que una imagen sea dinámica, puede utilizar el panel Vinculaciones, el inspector de propiedades o el comando Imagen del menú Insertar.
De forma predeterminada, una página HTML solo puede mostrar registros de uno en uno. Para ver los demás registros del juego de registros, puede añadir un vínculo para desplazarse por los registros de uno en uno o crear una región repetida para mostrar más de un registro en una sola página.
Acerca del texto dinámico
El texto dinámico adopta el formato de texto aplicado al texto ya existente o al punto de inserción. Por ejemplo, si un estilo CSS (Hoja de estilos en cascada) afecta al texto seleccionado, el contenido dinámico que lo reemplace también se verá afectado por dicho estilo. También puede añadir o cambiar el formato de texto del contenido dinámico mediante cualquiera de las herramientas de formato de texto de Dreamweaver.
También puede aplicar formato de datos al texto dinámico. Por ejemplo, si los datos son fechas, puede especificar un formato de fecha determinado, como, por ejemplo, 04/17/00 para los visitantes de los Estados Unidos, o 17/04/00 para los visitantes europeos.
Convertir texto en dinámico
Puede reemplazar el texto existente por texto dinámico o colocar texto dinámico en un determinado punto de inserción en la página.
Añadir texto dinámico
-
En la vista de Diseño, seleccione texto en la página o haga clic en el lugar en el que desea añadir texto dinámico.
-
En el panel Vinculaciones (Ventana > Vinculaciones), seleccione la fuente de contenido de la lista. Si selecciona un juego de registros, especifique la columna que desea incluir en el juego de registros.
La fuente de contenido debe contener texto normal (texto ASCII). El texto normal también incluye HTML. Si no aparecen fuentes de contenido en la lista, o si las fuentes de contenido disponibles no se adaptan a sus requisitos, haga clic en el botón de signo más (+) para definir una nueva fuente de contenido.
-
(Opcional) Seleccione un formato de datos para el texto.
-
Haga clic en Insertar o arrastre la fuente de contenido hasta la página.
Aparecerá un marcador de posición de contenido dinámico. (Si ha seleccionado texto en la página, el marcador de posición reemplazará al texto seleccionado). El marcador de posición de contenido de un juego de registros utiliza la sintaxis {RecordsetName.ColumnName}, donde Recordset es el nombre del juego de registros y ColumnName, el nombre de la columna elegida del juego de registros.
En ocasiones, la longitud de los marcadores de posición de texto dinámico distorsiona el diseño de la página en la ventana de documento. Para resolver el problema, utilice llaves vacías a modo de marcadores de posición, como se describe en el siguiente tema.
Visualización de marcadores de posición para texto dinámico
-
Seleccione > Preferencias > Elementos invisibles (Windows) o Dreamweaver > Preferencias > Elementos invisibles (Macintosh).
-
En el menú emergente Mostrar texto dinámico como, elija { } y haga clic en Aceptar.
Convertir imágenes en contenido dinámico
Puede convertir las imágenes de la página en contenido dinámico. Por ejemplo, supongamos que diseña una página que muestra artículos a la venta en una subasta benéfica. Cada página incluiría un texto descriptivo y una fotografía del artículo en cuestión. El diseño general de la página sería el mismo para todos los artículos, mientras que lo único que cambiaría sería la fotografía (y el texto descriptivo).
-
Con la página abierta en la vista de diseño (Ver > Diseño), sitúe el punto de inserción en el lugar de la página en el que desea que aparezca la imagen y luego seleccione Insertar Imagen.
-
Seleccione Insertar > Imagen.
Aparecerá el cuadro de diálogo Seleccionar origen de imagen.
-
Haga clic en la opción Fuentes de datos (Windows) o en el botón Fuente de datos (Macintosh).
Aparecerá una lista de fuentes de contenido.
-
Seleccione una fuente de contenido de la lista y haga clic en Aceptar.
La fuente de datos debe ser un juego de registros que contenga las rutas de acceso a los archivos de imagen. En función de la estructura de archivos del sitio, las rutas pueden ser absolutas, relativas al documento o relativas a la raíz.
Nota:Dreamweaver no admite actualmente las imágenes binarias almacenadas en bases de datos.
Si no aparece ningún juego de registros en la lista, o si los conjuntos de registros disponibles no satisfacen sus necesidades, defina un nuevo juego de registros.
Convertir atributos HTML en contenido dinámico
Puede cambiar dinámicamente el aspecto de una página vinculando atributos HTML a los datos. Por ejemplo, puede cambiar la imagen de fondo de una tabla vinculando el atributo background de la tabla a un juego de registros.
Puede vincular atributos HTML con el panel Vinculaciones o con el inspector de propiedades.
Convertir atributos HTML en dinámicos con el panel Vinculaciones
-
Abra el panel Vinculaciones eligiendo Ventana > Vinculaciones.
-
Asegúrese de que en el panel Vinculaciones está la fuente de datos que desea utilizar.
La fuente de contenido debe contener datos adecuados para el atributo HTML que desea vincular. Si no aparecen fuentes de contenido en la lista, o si las fuentes de contenido disponibles no se adaptan a sus requisitos, haga clic en el botón de signo más (+) para definir una nueva fuente de datos.
-
En la vista de Diseño, seleccione un objeto HTML.
Por ejemplo, para seleccionar una tabla HTML, haga clic dentro de la tabla y haga clic en la etiqueta <table> en el selector de etiquetas situado en la parte inferior izquierda de la ventana Documento.
-
En el panel Vinculaciones, seleccione una fuente de contenido de la lista.
-
En el cuadro Vincular con, seleccione un atributo HTML del menú emergente.
-
Haga clic en Vincular.
La próxima vez que se ejecute la página en el servidor de aplicaciones, el valor de la fuente de datos se asignará al atributo HTML.
Convertir atributos HTML en dinámicos con el inspector de propiedades
-
En la vista de Diseño, seleccione un objeto HTML y abra el inspector de propiedades (Ventana > Propiedades).
Por ejemplo, para seleccionar una tabla HTML, haga clic dentro de la tabla y haga clic en la etiqueta <table> en el selector de etiquetas situado en la parte inferior izquierda de la ventana Documento.
-
La manera de vincular una fuente de contenido dinámico al atributo HTML depende de dónde está situada.
Si el atributo que desea vincular tiene a su lado un icono de carpeta en el Inspector de propiedades, haga clic en el icono de carpeta para abrir un cuadro de diálogo de selección de archivos; a continuación, haga clic en la opción Fuentes de datos para visualizar una lista de fuentes de datos.
Si el atributo que desea vincular no tiene un icono de carpeta a su lado en la vista Estándar, haga clic en la pestaña Lista (la pestaña situada más abajo de las dos) en la parte izquierda del inspector.
Aparecerá la vista de Lista del inspector de propiedades.
Si el atributo que desea vincular no aparece en la vista Lista, haga clic en el botón de signo más (+) y luego introduzca el nombre del atributo o haga clic en el pequeño botón de flecha y seleccione el atributo del menú emergente.
-
Para hacer que el valor del atributo sea dinámico, haga clic en el atributo y luego en el icono de rayo o icono de carpeta situado al final de la fila del atributo.
Si ha hecho clic en el icono de rayo, aparecerá una lista de fuentes de datos.
Si ha hecho clic en el icono de carpeta, aparecerá un cuadro de diálogo de selección de archivo. Seleccione la opción Fuentes de datos para ver una lista de fuentes de contenido.
-
Seleccione una fuente de contenido en la lista de fuentes de contenido y haga clic en Aceptar.
La fuente de contenido debe tener datos adecuados para el atributo HTML que desea vincular. Si no aparecen fuentes de contenido en la lista, o si las fuentes de contenido disponibles no satisfacen sus necesidades, defina una nueva fuente de contenido.
La próxima vez que se ejecute la página en el servidor de aplicaciones, el valor de la fuente de datos se asignará al atributo HTML.
Convertir parámetros de ActiveX, Flash y de otros objetos en contenido dinámico
Puede hacer dinámicos los parámetros de applets de Java y de plug-ins, así como los parámetros de los objetos ActiveX, Flash, Shockwave, Director y Generator.
Antes de comenzar, asegúrese de que los campos del juego de registros contienen datos adecuados para los parámetros del objeto que desea vincular.
-
En la vista de Diseño, seleccione un objeto en la página y abra el inspector de propiedades (Ventana > Propiedades).
-
Haga clic en el botón Parámetros.
-
Si el parámetro deseado no aparece en la lista, haga clic en el botón de signo más (+) e introduzca un nombre de parámetro en la columna Parámetro.
-
Haga clic en la columna Valor correspondiente al parámetro y luego haga clic en el icono de rayo para especificar un valor dinámico.
Aparecerá una lista de fuentes de datos.
-
Seleccione una fuente de datos de la lista y haga clic en Aceptar.
La fuente de datos debe contener datos adecuados para el parámetro de objeto que desea vincular. Si no aparecen fuentes de datos en la lista, o si las fuentes de datos disponibles no satisfacen sus necesidades, defina una nueva fuente de datos.
Páginas relacionadas
- Definición de fuentes de contenido dinámico
- Crear una barra de navegación de juego de registros
- Visualización de varios resultados de juego de registros
- Aplicación de elementos tipográficos y de diseño de página a los datos dinámicos
- Usar formatos de datos predefinidos
- Acerca de los juegos de registros
- Definir un juego de registros sin escribir SQL