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:
Última actualización el
25 abr. 2024
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.
Seleccione Insertar > Imagen.
En la categoría Común del panel Insertar, haga clic en el botón Imagen o arrástrelo al documento.
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 toda la tabla de Fireworks para editarla, siempre que el comentario <!--fw table--> esté 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.
En Dreamweaver, abra el inspector de propiedades (Ventana > Propiedades) si aún no está abierto.
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.
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 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.
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.
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.
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.
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.
Compruebe que ya ha configurado Fireworks como el editor de imágenes para archivos PNG.
En la ventana de documento, haga clic en el marcador de posición de imagen para seleccionarlo.
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.
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.
Cuando termine, haga clic en Listo para que aparezca el cuadro de diálogo para guardar.
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.
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.
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.
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.
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 de 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.
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.
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
En Dreamweaver, seleccione la zona interactiva o la imagen que activa el menú emergente.
En el panel Comportamientos (Mayús+F3), haga doble clic en Mostrar menú emergente en la lista Acciones.
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.
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).
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.
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.
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.
Haga clic en Examinar para seleccionar un archivo HTML de Fireworks.
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.
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
En Fireworks, seleccione Edición > Copiar código HTML.
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.
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
En Fireworks, elija Archivo > Exportar.
Indique la carpeta del sitio de Dreamweaver como destino de las imágenes exportadas.
En el menú emergente Exportar, seleccione HTML e imágenes.
En el menú emergente HTML, seleccione Copiar al Portapapeles y, a continuación, haga clic en Exportar.
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.
En Fireworks, abra el archivo PNG de origen y realice los cambios que desee.
Seleccione Archivo > Guardar.
En Fireworks, seleccione Archivo > Actualizar HTML.
Desplácese al archivo de Dreamweaver con el código HTML que desee actualizar y haga clic en Abrir.
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.
Crear sitios web atractivos en Dreamweaver
Diseña, codifica y gestiona sitios web dinámicos en una potente herramienta todo en uno.
