Guía del usuario Cancelar

Cómo usar Fireworks y Dreamweaver

Buscar
Dreamweaver

Dreamweaver

Abrir aplicación
  1. Guía del usuario de Dreamweaver
  2. Introducción
    1. Conceptos básicos sobre diseño web adaptable
    2. Novedades de Dreamweaver
    3. Desarrollo web con Dreamweaver: información general
    4. Dreamweaver / Preguntas frecuentes
    5. Métodos abreviados de teclado
    6. Requisitos del sistema para Dreamweaver
    7. Resumen de funciones
  3. Dreamweaver y Creative Cloud
    1. Sincronizar la configuración de Dreamweaver con Creative Cloud
    2. Bibliotecas Creative Cloud en Dreamweaver
    3. Uso de archivos de Photoshop en Dreamweaver
    4. Trabajar con Adobe Animate y Dreamweaver
    5. Extraer archivos SVG optimizados para la Web desde bibliotecas
  4. Espacios de trabajo y vistas de Dreamweaver
    1. El espacio de trabajo de Dreamweaver
    2. Optimización del espacio de trabajo de Dreamweaver para la implementación visual
    3. Buscar archivos por nombre de archivo o contenido | Mac OS
  5. Configuración de sitios
    1. Acerca de los sitios de Dreamweaver
    2. Configuración de una versión local del sitio
    3. Conectar con servidores de publicación
    4. Configuración de un servidor de prueba
    5. Importación y exportación de la configuración de un sitio de Dreamweaver
    6. Traer sitios web existentes desde un servidor remoto a la raíz del sitio local
    7. Funciones de accesibilidad en Dreamweaver
    8. Ajustes avanzados
    9. Configuración de las preferencias de sitio para transferir archivos
    10. Especificación de la configuración del servidor proxy en Dreamweaver
    11. Sincronizar la configuración de Dreamweaver con Creative Cloud
    12. Uso de Git en Dreamweaver
  6. Administrar archivos
    1. Creación y apertura de documentos
    2. Administración de archivos y carpetas
    3. Carga de archivos al servidor y descarga desde el mismo
    4. Desprotección y protección de archivos
    5. Sincronizar archivos
    6. Comparación de archivos para detectar diferencias
    7. Ocultación de archivos y carpetas en el sitio de Dreamweaver
    8. Activación de Design Notes para sitios de Dreamweaver
    9. Prevención de la posible actuación repentina de Gatekeeper
  7. Maquetación y diseño
    1. Usar ayudas visuales al diseñar
    2. Información sobre el uso de CSS para diseñar la página
    3. Diseño de sitios web interactivos con Bootstrap
    4. Creación y uso de consultas de medios en Dreamweaver
    5. Presentación de contenido en tablas
    6. Colores
    7. Diseño interactivo mediante diseños de cuadrícula fluida
    8. Extract en Dreamweaver
  8. CSS
    1. Aspectos básicos de las hojas de estilos en cascada
    2. Diseño de páginas con el Diseñador de CSS
    3. Uso de preprocesadores de CSS en Dreamweaver
    4. Configuración de las preferencias de estilos CSS en Dreamweaver
    5. Mover reglas CSS en Dreamweaver
    6. Conversión de CSS en línea en una regla CSS en Dreamweaver
    7. Uso de etiquetas div
    8. Aplicación de degradados al fondo
    9. Creación y edición de efectos de transición de CSS3 en Dreamweaver
    10. Formatear código
  9. Contenido de página y activos
    1. Definición de las propiedades de la página
    2. Configuración de propiedades de encabezado CSS y propiedades de vínculo CSS
    3. Uso de texto
    4. Buscar y reemplazar texto, etiquetas y atributos
    5. Panel DOM
    6. Editar en la Vista en vivo
    7. Codificación de documentos en Dreamweaver
    8. Selección y visualización de elementos de la ventana de documento
    9. Configuración de las propiedades de texto en el inspector de propiedades
    10. Revisión ortográfica de una página web
    11. Uso de las reglas horizontales en Dreamweaver
    12. Añadir y modificar combinaciones de fuentes en Dreamweaver.
    13. Trabajo con activos
    14. Inserción y actualización de fechas en Dreamweaver
    15. Creación y gestión de activos favoritos en Dreamweaver
    16. Insertar y editar imágenes en Dreamweaver
    17. Adición de objetos multimedia
    18. Adición de vídeos en Dreamweaver
    19. Insertar vídeo HTML5
    20. Insertar archivos SWF
    21. Adición de efectos de sonido
    22. Insertar audio HTML5 en Dreamweaver
    23. Trabajar con elementos de bibliotecas
    24. Uso de texto árabe y hebreo en Dreamweaver
  10. Establecimiento de vínculos y navegación
    1. Acerca del establecimiento de vínculos y la navegación
    2. Vinculación
    3. Mapas de imágenes
    4. Vínculos de solución de problemas
  11. Widgets y efectos de jQuery
    1. Uso de interfaz de usuario y widgets móviles de jQuery en Dreamweaver
    2. Uso de efectos jQuery en Dreamweaver
  12. Programación de sitios web
    1. Acerca de la programación en Dreamweaver
    2. Entorno de programación en Dreamweaver
    3. Configuración de las preferencias de programación
    4. Personalización de los colores del código
    5. Escritura y edición de código
    6. Sugerencias de código y completado de código
    7. Contraer y expandir código
    8. Reutilizar código con fragmentos
    9. Depuración de código mediante linting
    10. Optimización del código
    11. Edición de código en Vista de diseño
    12. Trabajo con el contenido de Head para páginas
    13. Inserción del lado del servidor incluida en Dreamweaver
    14. Uso de bibliotecas de etiquetas en Dreamweaver
    15. Importación de etiquetas personalizadas a Dreamweaver
    16. Uso de comportamientos de JavaScript (instrucciones generales)
    17. Aplicación de comportamientos JavaScript incorporados
    18. Acerca de XML y XSLT
    19. Realización de transformaciones XSL del lado del servidor en Dreamweaver
    20. Realización de transformaciones XSL en el lado del cliente en Dreamweaver
    21. Adición de entidades de caracteres para XSLT en Dreamweaver
    22. Formatear código
  13. Flujos de trabajo de varios productos
    1. Instalación y uso de extensiones para Dreamweaver
    2. Actualizaciones integradas en Dreamweaver
    3. Insertar documentos de Microsoft Office en Dreamweaver (solo Windows)
    4. Trabajo con Fireworks y Dreamweaver
    5. Edición de contenido en sitios de Dreamweaver con Contribute
    6. Integración de Dreamweaver Business Catalyst
    7. Crear campañas de correo electrónico personalizado
  14. Plantillas
    1. Acerca de las plantillas de Dreamweaver
    2. Reconocimiento de plantillas y documentos basados en plantillas
    3. Crear una plantilla de Dreamweaver
    4. Crear regiones editables en plantillas
    5. Creación de tablas y regiones repetidas en Dreamweaver
    6. Usar regiones opcionales en plantillas
    7. Definición de atributos de etiqueta editables en Dreamweaver
    8. Creación de plantillas anidadas en Dreamweaver
    9. Edición, actualización y eliminación de plantillas
    10. Exportar e importar contenido xml en Dreamweaver
    11. Aplicación o eliminación de una plantilla de un documento existente
    12. Edición de contenido en plantillas de Dreamweaver
    13. Reglas de sintaxis de etiquetas de plantilla en Dreamweaver
    14. Configuración de preferencias de resaltado en regiones de plantillas
    15. Ventajas de usar plantillas en Dreamweaver
  15. Móvil y multipantalla
    1. Creación de consultas de medios
    2. Cambio de la orientación de página para dispositivos móviles
    3. Creación de aplicaciones web para dispositivos móviles con Dreamweaver
  16. Sitios, páginas y formularios web dinámicos
    1. Aspectos básicos de las aplicaciones web
    2. Configuración del ordenador para desarrollo de aplicaciones
    3. Solución de problemas de conexiones a bases de datos
    4. Eliminación de secuencias de comandos de conexión en Dreamweaver
    5. Diseñar páginas dinámicas
    6. Introducción a las fuentes de contenido dinámico
    7. Definir fuentes de contenido dinámico
    8. Añadir contenido dinámico a las páginas
    9. Cambio de contenido dinámico en Dreamweaver
    10. Visualización de registros de bases de datos
    11. Proporcionar datos en vivo y solucionar sus problemas en Dreamweaver
    12. Añadir comportamientos de servidor personalizados en Dreamweaver
    13. Crear formularios con Dreamweaver
    14. Uso de formularios para recopilar información de los usuarios
    15. Crear y activar formularios de ColdFusion en Dreamweaver
    16. Crear formularios web
    17. Compatibilidad mejorada con HTML5 para elementos de formulario
    18. Desarrollar un formulario con Dreamweaver
  17. Creación visual de aplicaciones
    1. Creación de las páginas maestra y de detalles en Dreamweaver
    2. Crear páginas de búsqueda y resultados
    3. Crear una página de inserción de registros
    4. Crear una página de actualización de registros en Dreamweaver
    5. Creación de páginas de eliminación de registros en Dreamweaver
    6. Usar comandos ASP para modificar una base de datos en Dreamweaver
    7. Crear una página de registro
    8. Crear una página de inicio de sesión
    9. Creación de una página para acceso exclusivo de usuarios autorizados
    10. Protección de carpetas en ColdFusion con Dreamweaver
    11. Uso de componentes de ColdFusion en Dreamweaver
  18. Prueba, vista previa y publicación de sitios web
    1. Vista previa de páginas
    2. Vista previa de páginas web de Dreamweaver en varios dispositivos
    3. Comprobación del sitio de Dreamweaver
  19. Solución de problemas
    1. Problemas resueltos
    2. Problemas conocidos

 

 

Use Fireworks y Dreamweaver para disfrutar de un flujo de trabajo ágil para editar, optimizar y colocar gráficos web en páginas HTML.

Nota:

La función no es compatible con las versiones de Adobe Dreamweaver .

Insertar una imagen de Fireworks

Dreamweaver y Fireworks reconocen y comparten muchas de las funciones de edición de archivos, como la modificación de vínculos, los mapas de imágenes y las capas de tablas, entre otras. Juntas, las dos aplicaciones le ofrecen un flujo de trabajo agilizado para editar, optimizar y colocar archivos gráficos web en páginas HTML.

Puede colocar un gráfico de Fireworks exportado directamente en un documento de Dreamweaver mediante el comando de inserción de imagen o crear un nuevo gráfico de Fireworks a partir de un marcador de posición de imagen de Dreamweaver.

  1. En el documento de Dreamweaver, coloque el punto de inserción en el lugar en el que desea que aparezca la imagen y siga uno de estos procedimientos:

    • Seleccione Insertar > Imagen.

    • En la categoría Común del panel Insertar, haga clic en el botón Imagen o arrástrelo al documento.

  2. Desplácese hasta el archivo exportado de Fireworks que desee y haga clic en Aceptar (Windows) o Abrir (Macintosh).
    Nota:

    Si el archivo de Fireworks no se encuentra en el sitio de Dreamweaver actual, aparecerá un mensaje donde se le preguntará si desea copiar el archivo en la carpeta raíz. Haga clic en Sí.

Editar una imagen o una tabla de Fireworks a través de Dreamweaver

Cuando se abre o edita una imagen o un corte de imagen que forma parte de una tabla de Fireworks, Dreamweaver inicia Fireworks y se abrirá el archivo PNG desde el que se haya exportado la imagen o la tabla.

Nota:

Esto da a entender que Fireworks está configurado como el editor principal de imágenes externo de archivos PNG. Fireworks también se configura con frecuencia como editor predeterminado de los archivos JPEG y GIF, aunque podría preferirse que fuera Photoshop el editor predeterminado para este tipo de archivos.

Cuando la imagen forma parte de una tabla de Fireworks, puede abrir la tabla completa de Fireworks para editarla, siempre que el comentario <!--fw table--> exista en el código HTML. Si el archivo PNG de origen se ha exportado de Fireworks a un sitio de Dreamweaver utilizando la configuración HTML e imágenes al estilo de Dreamweaver, el comentario de la tabla de Fireworks se inserta automáticamente en el código HTML.

  1. En Dreamweaver, abra el inspector de propiedades (Ventana > Propiedades) si aún no está abierto.
  2. Haga clic en la imagen o en el corte de imagen para seleccionarla.

    Al seleccionar una imagen exportada desde Fireworks, el inspector de propiedades identifica la selección como imagen o tabla de Fireworks y muestra el nombre del archivo PNG origen.

  3. Para iniciar Fireworks para editar, siga uno de estos procedimientos:

    • En el inspector de propiedades, haga clic en Editar.

    • Mantenga pulsada la tecla Control (Windows) o Comando (Macintosh) y haga doble clic en la imagen seleccionada.

    • Haga clic con el botón derecho del ratón (Windows) o mantenga pulsada la tecla Control y haga clic (Macintosh) en la imagen deseada, y seleccione Editar con Fireworks en el menú contextual.

    Nota:

    Si Fireworks no puede localizar el archivo origen, le solicita que indique la ubicación del archivo PNG origen. Al trabajar con el archivo origen de Fireworks, los cambios se guardan tanto en el archivo origen como en el archivo exportado. De otro modo, solo se actualiza el archivo exportado.  

  4. En Fireworks, edite el archivo PNG origen y haga clic en Listo.

    Fireworks guarda los cambios en el archivo PNG, exporta la imagen modificada (o HTML e imágenes) y devuelve el control a Dreamweaver. En Dreamweaver, aparece la tabla o la imagen actualizadas.

    Para ver un tutorial sobre la integración de Dreamweaver y Fireworks, consulte www.adobe.com/go/vid0188_es.

Optimizar una imagen de Fireworks a través de Dreamweaver

Puede utilizar Dreamweaver para realizar cambios rápidos en imágenes y animaciones de Fireworks. En el propio Dreamweaver, puede cambiar la configuración de optimización y animación, así como el tamaño y el área de la imagen exportada.

  1. En Dreamweaver, seleccione la imagen que desee y siga uno de estos procedimientos:

    • Seleccione Comando > Optimizar imagen.

    • Haga clic en el botón Editar la configuración de imagen en el inspector de propiedades.

  2. Realice los cambios en el cuadro de diálogo Presentación preliminar de la imagen:

    • Para modificar la configuración de optimización, haga clic en la pestaña Opciones.

    • Para modificar el tamaño y el área de la imagen exportada, haga clic en la pestaña Archivo.

  3. Cuando haya terminado, haga clic en Aceptar.

Usar Fireworks para modificar marcadores de posición de imagen de Dreamweaver

Puede crear un marcador de posición de imagen en un documento de Dreamweaver y, a continuación, iniciar Fireworks para diseñar una imagen gráfica o una tabla de Fireworks para sustituirlo.

Para crear una nueva imagen a partir de un marcador de posición de imagen, debe tener tanto Dreamweaver como Fireworks instalados en el sistema.

  1. Compruebe que ya ha configurado Fireworks como el editor de imágenes para archivos PNG.
  2. En la ventana de documento, haga clic en el marcador de posición de imagen para seleccionarlo.
  3. Inicie Fireworks en modo Edición desde Dreamweaver siguiendo uno de estos procedimientos:

    • En el inspector de propiedades, haga clic en Crear.

    • Pulse Control (Windows) o Comando (Macintosh) y haga doble clic en el marcador de posición de imagen.

    • Haga clic con el botón derecho del ratón (Windows) o mantenga pulsada la tecla Control y haga clic (Macintosh) en el marcador de posición de imagen y, a continuación, seleccione Crear imagen en Fireworks.

  4. Utilice las opciones de Fireworks para diseñar la imagen.

    Fireworks reconoce la siguiente configuración del marcador de posición de imagen que ha definido al trabajar con el marcador de posición de imagen en Dreamweaver: el tamaño de imagen (que guarda correlación con el tamaño de lienzo de Fireworks), el identificador de imagen (que Fireworks utiliza como nombre de documento predeterminado para el archivo origen y el archivo de exportación que crea) y la alineación del texto. Fireworks también reconoce los vínculos y determinados comportamientos (como por ejemplo la imagen intercambiada, el menú emergente y la definición de texto) que ha adjuntado al marcador de posición de imagen mientras trabajaba en Dreamweaver.

    Nota:

    Aunque en Fireworks no aparecen los vínculos añadidos a un marcador de posición de imagen, estos se mantienen. Si dibuja una zona interactiva y añade un vínculo en Fireworks, no eliminará el vínculo que ha añadido al marcador de posición de imagen en Dreamweaver. No obstante, si realiza un corte en Fireworks en la nueva imagen, Fireworks eliminará el vínculo en el documento de Dreamweaver al sustituir el marcador de posición de imagen.

    Fireworks no reconoce los siguientes ajustes del marcador de posición de imagen: Alinear, Color, Espacio V, Espacio H y Mapa. Están desactivados en el inspector de propiedades de marcadores de posición de imagen.

  5. Cuando termine, haga clic en Listo para que aparezca el cuadro de diálogo para guardar.
  6. En el cuadro de texto Guardar en, seleccione la carpeta que ha elegido como la carpeta del sitio local de Dreamweaver.

    Si le ha asignado un nombre al marcador de posición de imagen al insertarlo en el documento de Dreamweaver, en Fireworks se rellenará el cuadro Nombre de archivo con dicho nombre. Puede cambiar el nombre.

  7. Haga clic en Guardar para guardar el archivo PNG.

    Se abre el cuadro de diálogo Exportar. Utilice este cuadro de diálogo para exportar la imagen como GIF, JPEG o, si se trata de imágenes con cortes, HTML e imágenes.

  8. Para Guardar en, seleccione la carpeta del sitio local de Dreamweaver.

    En el cuadro Nombre aparece automáticamente el nombre que ha utilizado para el archivo PNG. Puede cambiar el nombre.

  9. En el campo Guardar como tipo, seleccione el tipo de archivo o archivos que desee exportar; por ejemplo, Solo imágenes o HTML e imágenes.
  10. Haga clic en Guardar para guardar el archivo exportado.

    El archivo se guarda y el usuario vuelve a Dreamweaver. En el documento de Dreamweaver, el archivo o la tabla de Fireworks exportados sustituyen el marcador de posición de imagen.

Acerca de los menús emergentes de Fireworks

Fireworks permite crear menús emergentes basados en CSS rápida y fácilmente.

Además de ser ampliables y rápidos de descargar, los menús emergentes creados con Fireworks ofrecen las siguientes ventajas:

  • Los elementos del menú se pueden indexar con motores de búsqueda.

  • Los elementos del menú los pueden leer lectores de pantalla, por lo que las páginas son más accesibles.

  • El código generado por Fireworks se ajusta a las normas y se puede validar.

    Es posible editar menús emergentes de Fireworks con Dreamweaver o con Fireworks, pero no con los dos. Los cambios realizados en Dreamweaver no se conservan en Fireworks.

Editar menús emergentes de Fireworks en Dreamweaver

Puede crear un menú emergente en Fireworks 8 o una versión posterior y, posteriormente, editarlo con Dreamweaver o con Fireworks (utilizando la edición Roundtrip), pero no con los dos. Si edita los menús en Dreamweaver y después los edita en Fireworks, perderá todas las modificaciones anteriores salvo el contenido de texto.

Si prefiere editar los menús con Dreamweaver, puede utilizar Fireworks para crear el menú emergente y, después, utilizar Dreamweaver exclusivamente para editar y personalizar el menú.

Si prefiere editar los menús en Fireworks, puede utilizar la función de edición Roundtrip en Dreamweaver, pero no debería editar los menús directamente en Dreamweaver.

  1. En Dreamweaver, seleccione la tabla de Fireworks que contiene el menú emergente y haga clic en Editar en el inspector de propiedades.

    Se abrirá el archivo PNG de origen en Fireworks.

  2. En Fireworks, edite el menú con el editor de menú emergente y, seguidamente, haga clic en Listo en la barra de herramientas de Fireworks.

    Fireworks envía el menú emergente editado de nuevo a Dreamweaver.

    Si ha creado un menú emergente en Fireworks MX 2004 o en una versión anterior, puede editarlo en Dreamweaver a través del cuadro de diálogo Mostrar menú emergente, disponible en el panel Comportamientos.

Editar un menú emergente creado en Fireworks MX 2004 o en una versión anterior

  1. En Dreamweaver, seleccione la zona interactiva o la imagen que activa el menú emergente.
  2. En el panel Comportamientos (Mayús+F3), haga doble clic en Mostrar menú emergente en la lista Acciones.
  3. Realice los cambios deseados en el cuadro de diálogo Menú emergente y haga clic en Aceptar.

Elegir las preferencias de ejecución y edición de archivos de origen de Fireworks

Al utilizar Fireworks para editar imágenes, Fireworks normalmente exporta las imágenes de las páginas web a partir de un archivo PNG de origen. Al abrir un archivo de imagen en Dreamweaver para su edición, Fireworks abre automáticamente el archivo PNG de origen y, si no lo encuentra, le solicita que lo localice. Si lo prefiere, puede elegir las preferencias en Fireworks para que Dreamweaver abra la imagen insertada, o bien puede hacer que Fireworks ofrezca la opción de utilizar el archivo de imagen insertado o el archivo Fireworks de origen cada vez que abra una imagen en Dreamweaver.

Nota:

Dreamweaver reconoce las preferencias de ejecución y edición de Fireworks únicamente en determinados casos. En concreto, debe abrir y optimizar una imagen que no sea parte de una tabla de Fireworks y que incluya una ruta de acceso correcta de Design Notes a un archivo PNG origen.

  1. En Fireworks, seleccione Edición > Preferencias (Windows) o Fireworks > Preferencias (Macintosh) y, a continuación, haga clic en la pestaña Ejecutar y editar (Windows) o seleccione Ejecutar y editar en el menú emergente (Macintosh).
  2. Indique las opciones de preferencia que se utilizarán al editar u optimizar imágenes de Fireworks colocadas en una aplicación externa:

    Utilizar siempre PNG de origen

    Se abre automáticamente el archivo PNG de Fireworks definido en la Design Note como origen de la imagen colocada. Los cambios se aplican en el archivo PNG origen y en su correspondiente imagen colocada.

    No utilizar nunca PNG de origen

    Se abre automáticamente la imagen de Fireworks colocada, con independencia de si existe o no un archivo PNG de origen. Los cambios solo se aplican en la imagen colocada.

    Preguntar al ejecutar

    Aparece un mensaje que le pregunta si debe abrirse el archivo PNG de origen. También es posible indicar las preferencias de ejecución y edición globales a partir de este mensaje.

Insertar código HTML de Fireworks en un documento de Dreamweaver

A través de Fireworks, puede utilizar el comando Exportar para exportar y guardar los archivos de imagen y de código HTML optimizados en una ubicación de la carpeta del sitio de Dreamweaver. Tras esto, puede insertar el archivo en Dreamweaver. Dreamweaver le permite insertar en un documento el código HTML generado por Fireworks junto con las imágenes asociadas, los cortes y el código JavaScript.

  1. En la ventana de documento de Dreamweaver, coloque el punto de inserción en el lugar en el que desee insertar el código HTML de Fireworks.
  2. Siga uno de estos procedimientos:

    • Seleccione Insertar > Objetos de imagen > HTML de Fireworks.

    • En la categoría Común del panel Insertar, haga clic en el botón Imágenes y seleccione Insertar HTML de Fireworks del menú emergente.

  3. Haga clic en Examinar para seleccionar un archivo HTML de Fireworks.
  4. Si no va a utilizar el archivo posteriormente, seleccione Borrar archivo después de insertar. Si se selecciona esta opción, el archivo PNG de origen asociado al archivo HTML no se verá afectado.
    Nota:

    Si el archivo HTML está en una unidad de red, se borrará de forma irreversible y no se moverá a la Papelera de reciclaje o Papelera.

  5. Haga clic en OK para insertar el código HTML, junto con sus imágenes, divisiones y código JavaScript asociados, en el documento de Dreamweaver.

Cómo pegar código HTML de Fireworks en Dreamweaver

Un método rápido para colocar imágenes y tablas generadas por Fireworks en Dreamweaver consiste en copiar y pegar el código HTML de Fireworks directamente en el documento de Dreamweaver.

Copiar y pegar código HTML de Fireworks en Dreamweaver

  1. En Fireworks, seleccione Edición > Copiar código HTML.
  2. Siga los pasos del asistente conforme le guíe en el proceso de configuración de la exportación del código HTML y las imágenes. Cuando el sistema lo solicite, indique la carpeta del sitio de Dreamweaver como destino de las imágenes exportadas.

    El asistente exporta las imágenes al destino especificado y copia el código HTML en el Portapapeles.

  3. En el documento de Dreamweaver, coloque el punto de inserción donde desee pegar el código HTML y seleccione Edición > Pegar HTML de Fireworks.

    Todo el código HTML y JavaScript asociado a los archivos de Fireworks exportados se copia en el documento de Dreamweaver y todos los vínculos a imágenes se modifican.

Exportar y pegar código HTML de Fireworks en Dreamweaver

  1. En Fireworks, elija Archivo > Exportar.
  2. Indique la carpeta del sitio de Dreamweaver como destino de las imágenes exportadas.
  3. En el menú emergente Exportar, seleccione HTML e imágenes.
  4. En el menú emergente HTML, seleccione Copiar al Portapapeles y, a continuación, haga clic en Exportar.
  5. En el documento de Dreamweaver, coloque el punto de inserción donde desee pegar el código HTML exportado y seleccione Edición > Pegar HTML de Fireworks.

    Todo el código HTML y JavaScript asociado a los archivos de Fireworks exportados se copia en el documento de Dreamweaver y todos los vínculos a imágenes se modifican.

Actualizar código HTML de Fireworks colocado en Dreamweaver

En Fireworks, el comando Archivo > Actualizar HTML ofrece una alternativa al método de ejecución y edición para actualizar archivos de Fireworks colocados en Dreamweaver. La opción Actualizar HTML permite editar una imagen PNG de origen en Fireworks y, a continuación, actualizar automáticamente cualquier archivo de código HTML y de imagen exportado que esté colocado en un documento de Dreamweaver. Este comando le permite actualizar archivos de Dreamweaver aunque Dreamweaver no se esté ejecutando.

  1. En Fireworks, abra el archivo PNG de origen y realice los cambios que desee.
  2. Seleccione Archivo > Guardar.
  3. En Fireworks, seleccione Archivo > Actualizar HTML.
  4. Desplácese al archivo de Dreamweaver con el código HTML que desee actualizar y haga clic en Abrir.
  5. Acceda a la carpeta de destino en la que desea colocar los archivos de imagen actualizados y haga clic en Seleccionar (Windows) o Elegir (Macintosh).

    Fireworks actualiza el código HTML y JavaScript del documento de Dreamweaver. Fireworks exporta también las imágenes actualizadas asociadas al código HTML y coloca las imágenes en la carpeta de destino indicada.

    Si Fireworks no encuentra el código HTML correspondiente, se le habilitará la opción de insertar el nuevo código HTML en el documento de Dreamweaver. Fireworks coloca la sección JavaScript del nuevo código al comienzo del documento y la tabla HTML o el vínculo con la imagen al final.

Crear un álbum de fotos web

La función Crear álbum de fotos web ha dejado de utilizarse a partir de Dreamweaver CS5.

Temas similares

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?

Vínculos rápidos

Ver todos los planes Administrar los planes
Ver vínculos rápidos
Ocultar vínculos rápidos

Avisos legales    |    Política de privacidad en línea