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

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

Inserción de 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 racionalizado 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 desea y haga clic en Aceptar (Windows) o Abrir (Macintosh).

    Nota:

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

Edición de una imagen o una tabla de Fireworks desde Dreamweaver

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

Nota:

Esto supone que Fireworks está definido como el editor principal de imágenes externo de los 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 exportó desde 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 presionada 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 presionada 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 actualizada (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.

Optimización de una imagen de Fireworks desde Dreamweaver

Puede utilizar Dreamweaver para realizar cambios rápidos en imágenes y animaciones de Fireworks. Desde dentro de 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 ficha Opciones.

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

  3. Cuando haya terminado, haga clic en Aceptar.

Uso de 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 definido Fireworks como el editor de imágenes para los 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.

    • Presione 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 presionada 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 Fireworks no muestra 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 la siguiente configuración 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 definido como la carpeta del sitio local de Dreamweaver.

    Si ha nombrado el marcador de posición de imagen al insertarlo en el documento de Dreamweaver, Fireworks completa 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.

    El cuadro Nombre muestra 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 desea exportar; por ejemplo Sólo 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 al 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 de menú se pueden indexar con motores de búsqueda.

  • Los elementos de menú pueden ser leídos por 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.

Edición de 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 desde el cuadro de diálogo Mostrar menú emergente, disponible en el panel Comportamientos.

Edición de 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.

Especificación de 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 desde 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 establecer las preferencias en Fireworks para que Dreamweaver abra la imagen insertada, o 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 contenga 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 ficha Ejecutar y editar (Windows) o seleccione Ejecutar y editar en el menú emergente (Macintosh).
  2. Especifique las opciones de preferencia que se utilizarán al editar u optimizar imágenes de Fireworks colocadas en una aplicación externa:

    Utilizar siempre origen PNG

    Abre automáticamente el archivo PNG de Fireworks definido en la Design Note como origen de la imagen colocada. Las actualizaciones se realizan en el archivo PNG origen y en su correspondiente imagen colocada.

    No utilizar nunca PNG origen

    Abre automáticamente la imagen de Fireworks colocada, con independencia de si existe o no un archivo PNG origen. Las actualizaciones sólo se realizan en la imagen colocada.

    Preguntar al ejecutar

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

Inserción de código HTML de Fireworks en un documento de Dreamweaver

Desde 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. A continuación 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 desea 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. La selección de esta opción no afecta al archivo PNG origen asociado con el archivo HTML.

    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 Aceptar 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.

Copia y pegado de 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ía en el proceso de configuración de la exportación del código HTML y las imágenes. Cuando el sistema lo solicite, especifique 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 con los archivos de Fireworks exportados se copia en el documento de Dreamweaver y todos los vínculos a imágenes se actualizan.

Exportación y pegado de código HTML de Fireworks en Dreamweaver

  1. En Fireworks, elija Archivo > Exportar.
  2. Especifique 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 con los archivos de Fireworks exportados se copia en el documento de Dreamweaver y todos los vínculos a imágenes se actualizan.

Actualización de 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 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 incluso si Dreamweaver no se está ejecutando.

  1. En Fireworks, abra el archivo PNG 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 que contiene el código HTML que desea actualizar, y haga clic en Abrir.
  5. Desplácese 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 con el código HTML y coloca las imágenes en la carpeta de destino especificada.

    Si Fireworks no encuentra el código HTML correspondiente, ofrece 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.

Creación de un álbum de fotos Web

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

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

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