Uso de Fireworks con Dreamweaver

Adobe Dreamweaver® y Fireworks reconocen y comparten muchas de las ediciones realizadas en los archivos como cambios de vínculos, mapas de imágenes y divisiones de tablas. Dreamweaver y Fireworks ofrecen un flujo de trabajo racionalizado para editar, optimizar y colocar archivos de gráficos Web en páginas HTML.

Colocar imágenes de Fireworks en archivos de Dreamweaver

Cuando se insertan archivos JPEG de Fireworks en Dreamweaver, la calidad del archivo se calcula automáticamente. El valor puede ser 79 para algunos archivos.

Nota:

Antes de seguir cualquiera de los siguientes procedimientos, asegúrese de haber seleccionado Dreamweaver como el tipo de HTML en el cuadro de diálogo Configuración de HTML.

Insertar imágenes de Fireworks en Dreamweaver mediante el panel Archivos

  1. Exporte la imagen de Fireworks a la carpeta de sitio local tal y como se indica en Dreamweaver.

  2. Abra el documento de Dreamweaver y asegúrese de estar en una vista de diseño.

  3. Arrastre la imagen desde el panel Archivos hasta el documento de Dreamweaver.

Insertar imágenes de Fireworks en Dreamweaver mediante el menú Insertar

  1. Coloque el punto de inserción donde desee que aparezca la imagen en la ventana del documento de Dreamweaver.

  2. Siga uno de estos procedimientos:

    • Seleccione Insertar > Imagen.

    • Haga clic en el botón Imágenes: Imagen en la categoría Común de la barra Insertar.

  3. Desplácese a la imagen que ha exportado desde Fireworks y haga clic en Aceptar.

Crear nuevos archivos de Fireworks a partir de marcadores de posición de Dreamweaver

Los marcadores de posición de la imagen le permiten experimentar con varios diseños de páginas Web antes de crear el material gráfico final de su página. Utilice los marcadores de imagen para especificar el tamaño y la posición de las imágenes de Fireworks que se van a colocar en Dreamweaver en el futuro.

Cuando se crea una imagen de Fireworks a partir de un marcador de imagen de Dreamweaver, se genera un documento nuevo en Fireworks con un lienzo de las mismas dimensiones que el marcador seleccionado.

Nota:

Todos los comportamientos aplicados dentro de Fireworks se mantienen al exportar a Dreamweaver. De forma similar, muchos de los comportamientos de Dreamweaver aplicados a los marcadores de imagen también se mantienen al ejecutar y editar con Fireworks. Sin embargo, hay una excepción: los rollovers desunidos que se aplican a los marcadores de imagen en Dreamweaver no se mantienen cuando se abren y editan en Fireworks.

Cuando se termine la sesión de Fireworks y se regrese a Dreamweaver, el nuevo gráfico creado en Fireworks sustituye al marcador de posición seleccionado originalmente.

  1. En Dreamweaver, guarde el documento HTML en un lugar dentro de la carpeta del sitio de Dreamweaver.

  2. Sitúe el punto de inserción en el lugar pertinente del documento y siga uno de estos procedimientos:

    • Seleccione Insertar > Objetos de imagen > Marcador de posición de imagen.

    • Haga clic en las imágenes: menú emergente Imagen de la categoría Común de la barra Insertar y elija Marcador de posición de imagen.

  3. Introduzca el nombre, las dimensiones, el color y el texto alternativo para el marcador de posición de imagen.

    En el documento de Dreamweaver se inserta un marcador de posición de imagen.

    Marcador de posición de imagen
    Marcador de posición de imagen

  4. Siga uno de estos procedimientos:

    • Seleccione el marcador de la posición de la imagen y haga clic en Crear en el Inspector de propiedades.

    • Mantenga presionada la tecla Control (Windows) o Comando (Mac OS) y haga doble clic en el marcador de la imagen.

    • Haga clic con el botón derecho del ratón (Windows) o presione la tecla Control (Mac OS) y seleccione Crear imagen en Fireworks.

      Fireworks se abre con un lienzo vacío del mismo tamaño que la imagen del marcador de posición. La parte superior de la ventana del documento indica que se está editando una imagen de Dreamweaver.

  5. Cree una imagen en Fireworks y haga clic en Listo.

  6. Especifique el nombre y la ubicación del archivo PNG de origen.

  7. Especifique el nombre de los archivos de imagen exportados.

    Estos son los archivos de imagen que se muestran en Dreamweaver.

  8. Especifique la ubicación en la carpeta de sitios de Dreamweaver para el archivo o archivos de imagen exportados y haga clic en Guardar.

    Cuando regrese a Dreamweaver, el marcador de posición de la imagen que había seleccionado originalmente se habrá sustituido por la nueva tabla o imagen de Fireworks.

    Marcador de posición de imagen sustituido por la nueva imagen de Fireworks
    Marcador de posición de imagen sustituido por la nueva imagen de Fireworks

Utilizar código HTML de Fireworks en Dreamweaver

La exportación de archivos de Fireworks a Dreamweaver es un proceso de dos fases. En Fireworks, exporte los archivos directamente a una carpeta de sitio de Dreamweaver. Esta operación genera un archivo HTML y los archivos de imagen asociados en el lugar especificado. A continuación, inserte el código HTML en Dreamweaver usando la función Insertar HTML de Fireworks.

  1. Exporte el documento HTML de Fireworks al formato HTML.

  2. En Dreamweaver, guarde el documento en un sitio definido.

  3. Coloque el punto de inserción en el lugar del documento en que desee que comience el código HTML insertado.

  4. Siga uno de estos procedimientos:

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

    • Haga clic en las imágenes: menú emergente Imagen de la categoría Común de la barra Insertar y elija HTML de Fireworks.

  5. En el cuadro de diálogo que aparece a continuación, haga clic en Examinar para seleccionar el archivo HTML de Fireworks que desee.

  6. (Opcional) Seleccione Eliminar archivo después de insertar para desplazar el archivo HTML a la Papelera de reciclaje (Windows) o para eliminarlo de forma permanente (Mac OS) al finalizar la operación.

    Esta opción no afecta al archivo PNG origen asociado con el archivo HTML.

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

Copiar código HTML de Fireworks para utilizarlo en Dreamweaver

Al copiar código HTML de Fireworks en el portapapeles, todo el código HTML y JavaScript asociado con el documento de Fireworks se copia en el documento de Dreamweaver, las imágenes se exportan a una ubicación especificada y Dreamweaver actualiza el código HTML con vínculos a esas imágenes en el documento.

Nota:

Este método sólo funciona con Dreamweaver. No funciona con otros editores de HTML.

  1. Copie el código HTML al portapapeles en Fireworks y péguelo en un documento de Dreamweaver.

Nota:

También es posible abrir en Dreamweaver un archivo HTML de Fireworks exportado y copiar y pegar las secciones seleccionadas de código en otro documento de Dreamweaver.

Actualizar código HTML de Fireworks exportado a Dreamweaver

Nota:

El código HTML de ida y vuelta tiene muchas ventajas cuando se trabaja con código HTML exportado a Dreamweaver. (Consulte Acerca de HTML de ida y vuelta).

  1. En Fireworks realice modificaciones en el documento PNG.

  2. Seleccione Archivo > Actualizar HTML.

  3. Desplácese al archivo de Dreamweaver que contiene el código HTML que desea actualizar, y haga clic en Abrir.

  4. Desplácese a la carpeta donde desee colocar los archivos de imágenes actualizados y haga clic en Abrir.

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

    Nota:

    Si Fireworks no encuentra el código HTML correspondiente que deba actualizar, tiene la opción de insertar nuevo código HTML en el documento de Dreamweaver. Fireworks coloca la sección JavaScript del nuevo código al principio del documento y la tabla HTML o el vínculo con la imagen al final.

Exportar archivos de Fireworks a bibliotecas de Dreamweaver

Un elemento de biblioteca es una porción de un archivo HTML ubicado en una carpeta denominada Library en la carpeta raíz del sitio. Los elementos de biblioteca aparecen como una categoría en el panel Activos de Dreamweaver. En Dreamweaver, los elementos de biblioteca simplifican la modificación y la actualización de los componentes de sitios Web utilizados frecuentemente. Puede arrastrar un elemento de biblioteca (un archivo con la extensión .lbi) desde el panel Activos hasta cualquier página de su sitio web.

Un elemento de biblioteca no se puede editar directamente en el documento de Dreamweaver; sólo es posible editar el elemento de biblioteca maestro. Después, se puede indicar a Dreamweaver que actualice todas las copias de dicho elemento colocadas en el sitio web. Los elementos de biblioteca de Dreamweaver equivalen en gran parte a los símbolos de Fireworks; los cambios realizados en el documento de biblioteca maestra (LBI) se reflejan en todas las copias de la biblioteca presentes en el sitio.

Nota:

los elementos de biblioteca de Dreamweaver no admiten menús emergentes.

  1. Seleccione Archivo > Exportar.

  2. Seleccione Biblioteca de Dreamweaver en el menú emergente Exportar.

    Seleccione o cree una carpeta llamada Library (Biblioteca) en su sitio de Dreamweaver para guardar los archivos. El nombre distingue entre mayúsculas y minúsculas.

    Nota:

    Dreamweaver no reconoce el archivo exportado como elemento de biblioteca salvo que se haya guardado en la carpeta Library.

  3. Escriba un nombre de archivo.

  4. (Opcional) Si la imagen contiene divisiones, elija opciones de división.

  5. Seleccione Colocar imágenes en subcarpeta para definir una carpeta independiente para guardar las imágenes.

  6. Haga clic en Guardar.

Editar archivos de Fireworks en Dreamweaver

La función código HTML de ida y vuelta integra a la perfección Fireworks y Dreamweaver. Esta técnica permite realizar cambios en una de las aplicaciones y verlos reflejados sin problemas en la otra.

Acerca de HTML de ida y vuelta

Fireworks reconoce y conserva la mayoría de los cambios realizados en un documento en Dreamweaver, lo que incluye modificación de vínculos, edición de mapas de imágenes, modificación de texto y código HTML en divisiones HTML y comportamientos compartidos entre Fireworks y Dreamweaver. El Inspector de propiedades de Dreamweaver ayuda a identificar las imágenes, divisiones de tabla y tablas generadas por Fireworks en un documento.

Fireworks admite casi todos los tipos de ediciones de Dreamweaver. Sin embargo, cambios importantes en una estructura de tabla de Dreamweaver pueden crear diferencias incompatibles entre ambas aplicaciones. Cuando se modifica el diseño de una tabla considerablemente, es conveniente utilizar la función de ejecución y edición de Dreamweaver para editar la tabla en Fireworks.

Nota:

Al utilizar la tecnología de Fireworks, Dreamweaver ofrece funciones básicas de edición gráfica para poder modificar imágenes sin utilizar una aplicación de edición externa. Las funciones de edición de imágenes de Dreamweaver sólo se pueden aplicar a los formatos de archivo de imagen JPEG y GIF.

Editar una imagen de Fireworks colocada en Dreamweaver

Nota:

Antes de editar gráficos de Fireworks desde Dreamweaver, realice algunas tareas preliminares. Para obtener más información, consulte Definir opciones de ejecución y edición.

  1. En Dreamweaver, seleccione Ventana > Propiedades para abrir el Inspector de propiedades.

  2. Siga uno de estos procedimientos:

    • Seleccione la imagen que desee. (El Inspector de propiedades identifica la selección como una imagen de Fireworks y muestra el nombre del archivo PNG origen conocido de la imagen). A continuación, haga clic en Editar en el Inspector.

    • Mantenga presionada la tecla Control (Windows) o Comando (Mac OS) y haga doble clic en la imagen que desea editar.

    • Haga clic con el botón derecho del ratón (Windows) o presione la tecla Control (Mac OS) y haga clic en la imagen deseada. A continuación, seleccione Editar con Fireworks en el menú contextual.

  3. Si el sistema le pregunta, especifique si desea buscar un archivo de Fireworks como origen para la imagen colocada.

  4. En Fireworks, edite la imagen.

    Las ediciones realizadas se conservan en Dreamweaver.

  5. Haga clic en Listo para exportar la imagen utilizando las configuraciones de optimización actuales, actualice el archivo GIF o JPEG utilizado por Dreamweaver y guarde el archivo PNG de origen si se seleccionó un archivo de origen.

    Nota:

    Al abrir una imagen desde el panel de sitio de Dreamweaver, el editor predeterminado para esa imagen, que está definido en las preferencias de Dreamweaver, abre el archivo. Al abrir una imagen desde esta ubicación, Fireworks no abre el archivo PNG original. Para utilizar las funciones de integración con Fireworks, hay que abrir las imágenes desde la ventana del documento de Dreamweaver.

Editar una tabla de Fireworks colocada en Dreamweaver

Nota:

Antes de editar tablas de Fireworks desde Dreamweaver, realice algunas tareas preliminares de ejecución y edición. Para obtener más información, consulte Definir opciones de ejecución y edición.

  1. En Dreamweaver, seleccione Ventana > Propiedades para abrir el Inspector de propiedades.

  2. Realice uno de los siguientes procedimientos para abrir el archivo PNG de origen en la ventana del documento:

    • Haga clic dentro de la tabla, y haga clic en la etiqueta TABLE en la barra de estado para seleccionar toda la tabla. (El Inspector de propiedades identifica la selección como una tabla de Fireworks y muestra el nombre del archivo PNG origen conocido de la tabla). A continuación, haga clic en Editar en el Inspector de propiedades.

    • Seleccione una imagen en la tabla y haga clic en Editar en el Inspector de propiedades.

    • Haga clic con el botón derecho del ratón (Windows) o presione la tecla Control (Mac OS) y haga clic en la imagen. A continuación, seleccione Editar con Fireworks en el menú contextual.

  3. En Fireworks, realice las modificaciones.

    Dreamweaver reconoce y conserva todas las modificaciones aplicadas a la tabla en Fireworks.

  4. Cuando haya terminado de editar la tabla, haga clic en Listo en la ventana de documento.

    Los archivos HTML y de divisiones de la imagen se exportan con la configuración de optimización actual, la tabla colocada en Dreamweaver se actualiza y el archivo PNG origen se guarda.

    Nota:

    Puede aparecer un error en Dreamweaver si anida otra tabla dentro de la tabla original generada por Fireworks. En tal caso, intente editar la tabla en Dreamweaver mediante edición de ida y vuelta. Para más información, consulte la nota técnica 19231 en el sitio web de Adobe.

Acerca de los comportamientos admitidos y no admitidos de Dreamweaver

Si un solo gráfico no dividido de Fireworks se inserta en un documento de Dreamweaver y se aplica un comportamiento de Dreamweaver, ese gráfico tendrá una división encima cuando se abra y edite en Fireworks. La división no estará visible inicialmente porque las divisiones se desactivan de forma automática al abrir y editar gráficos individuales no divididos a los que se han aplicado comportamientos de Dreamweaver. Para ver la división, hay que activar su visibilidad en la capa de Web del panel Capas.

Cuando en Fireworks se ven las propiedades de una división que tiene asignado un comportamiento de Dreamweaver, el cuadro de texto Vínculo del Inspector de propiedades puede mostrar javascript:;. La eliminación de este texto es inocua. Es posible sobrescribirlo para introducir una dirección URL, si así se desea, y el comportamiento seguirá intacto cuando se vuelva a Dreamweaver.

Cuando se trabaja con HTML de ida y vuelta de Dreamweaver, Fireworks admite formatos de archivo del servidor tales como CFM y PHP.

Dreamweaver admite todos los comportamientos que se apliquen en Fireworks, incluso los necesarios para los rollovers y los botones.

Nota:

Los elementos de biblioteca de Dreamweaver no admiten menús emergentes.

Fireworks admite los siguientes comportamientos de Dreamweaver durante una sesión de ejecución y edición:

  • Rollover simple

  • Intercambiar imagen

  • Restaurar imagen intercambiada

  • Definir texto de barra de estado

  • Definir Imagen de barra de navegación

  • Menú emergente

Nota:

Fireworks no admite los comportamientos no nativos, incluidos los comportamientos de servidor.

Optimizar imágenes y animaciones de Fireworks insertadas en Dreamweaver

Cambiar las configuraciones de optimización de una imagen de Fireworks colocada en Dreamweaver

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

    • Elija Comandos > Optimizar imagen.

    • Haga clic en el botón Optimizar del Inspector de propiedades.

    • Haga clic con el botón derecho del ratón (Windows) o presione la tecla Control y haga clic (Mac OS), y seleccione Optimizar en Fireworks en el menú emergente.

  2. Si el sistema le pregunta, especifique si desea abrir un archivo de Fireworks como origen para la imagen insertada.

  3. Realice las modificaciones en el cuadro de diálogo Presentación preliminar de la exportación:

    • Para modificar las configuraciones 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. Si modifica las dimensiones de la imagen en Fireworks, también deberá restablecerlas en el Inspector de propiedades cuando vuelva a Dreamweaver.

    • Para editar los ajustes de animación de la imagen, haga clic en la ficha Animación.

  4. Cuando haya terminado de editar la imagen, haga clic en Aceptar para exportar la imagen, actualice la imagen en Dreamweaver y guarde el archivo PNG.

    Si ha cambiado el formato de la imagen, el verificador de vínculos de Dreamweaver solicita actualizar las referencias a la imagen.

Cambiar ajustes de animación

Si abre y optimiza un archivo GIF animado, también es posible editar su configuración. Las opciones de animación del cuadro de diálogo Presentación preliminar de la exportación son similares a las disponibles en el panel Estados de Fireworks.

Nota:

Para editar los elementos gráficos individuales de una animación de Fireworks, debe abrir y editar la animación de Fireworks.

Definir opciones de ejecución y edición

Para utilizar con eficacia HTML de ida y vuelta, es conveniente llevar a cabo algunas tareas preliminares, como convertir Fireworks en el editor de imágenes principal en Dreamweaver, especificar las preferencias de ejecución y edición en Fireworks y definir un sitio local en Dreamweaver.

Designar a Fireworks como editor externo principal de Dreamweaver

Dreamweaver ofrece preferencias para iniciar automáticamente determinadas aplicaciones con el fin de editar tipos de archivos específicos. Para utilizar las funciones de ejecución y edición de Fireworks, asegúrese de establecer Fireworks como editor principal de archivos GIF, JPEG y PNG en Dreamweaver.

Nota:

Únicamente es necesario definir esta preferencia si se presentan problemas a la hora de iniciar Fireworks desde Dreamweaver.

  1. En Dreamweaver, elija Edición > Preferencias y seleccione Tipos de archivo/editores.

  2. En la lista de extensiones, seleccione una extensión de nombre de archivo de imagen Web (.gif, .jpg o .png).

  3. Seleccione Fireworks en la lista de editores. Si Fireworks no está en la lista, haga clic en el botón más (+), localice la aplicación Fireworks en el disco duro y haga clic en Abrir.

    Preferencias de Dreamweaver
    Preferencias de Dreamweaver

  4. Haga clic en Convertir en principal.

  5. Repita los pasos del 2 al 4 para definir Fireworks como editor principal para otras extensiones de archivos de imagen Web.

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

Las preferencias de ejecución y edición de Fireworks permiten especificar cómo se manejan los archivos PNG origen al abrir archivos de Fireworks desde otra aplicación.

Dreamweaver reconoce las preferencias de ejecución y edición de Fireworks únicamente cuando se abre y se optimiza una imagen que no forma parte de una tabla de Fireworks y que no contiene ninguna ruta de Design Note correcta hacia un archivo PNG origen. En los demás casos, incluidos todos los casos de ejecución y edición de imágenes de Fireworks, Dreamweaver abre automáticamente el archivo PNG origen y le solicita que localice dicho archivo en caso de no poder encontrarlo.

  1. En Fireworks, seleccione Edición > Preferencias (Windows) o Fireworks > Preferencias (Mac OS).

  2. Haga clic en la categoría Ejecutar y editar y defina las opciones como desee.

    Para obtener más información, consulte Preferencias Ejecutar y editar.

Acerca de Design Notes y los archivos de origen

Siempre que se exporta un archivo de Fireworks a un sitio de Dreamweaver desde un archivo de origen PNG guardado, Fireworks escribe una Design Note (nota de diseño) con información sobre el archivo PNG. Si se abre y edita un archivo de imagen de Fireworks desde Dreamweaver, éste utilizará la Design Note para localizar el PNG origen de dicho archivo. Para obtener el mejor resultado, es conveniente guardar siempre el archivo PNG origen y los archivos exportados de Fireworks en un sitio de Dreamweaver. De esta forma, cualquier usuario que comparta el sitio podrá localizar el archivo PNG origen cuando inicie Fireworks desde Dreamweaver.

Transferir archivos del sitio mediante el botón Administración de archivos

El botón Administración de archivos , situado en la parte superior de la ventana del documento, ofrece un fácil acceso a los comandos de transferencia de archivos. Utilice este botón si el documento se encuentra en una carpeta de sitio de Dreamweaver y si el sitio tiene acceso a un servidor remoto. Para que Fireworks reconozca la carpeta como un sitio, utilice el cuadro de diálogo Administrar sitios de Dreamweaver para definir la carpeta de destino (o una carpeta contenedora) como carpeta local raíz del sitio.

Nota:

Antes de utilizar las opciones de protección y desprotección de Fireworks, seleccione la opción Permitir desproteger y proteger archivo para el sitio de Dreamweaver en el que se encuentra el documento.

Obtener

Copia la versión remota del archivo en el sitio local (el archivo local se sobrescribe).

Proteger

Protege el archivo y se sobrescribe el archivo local con la copia remota.

Colocar

Copia la versión local del archivo en el sitio remoto (el archivo remoto se sobrescribe).

Desproteger

Desprotege el archivo local y se sobrescribe el archivo remoto con la copia local.

Deshacer proteger

Deshace la protección del archivo local y lo desprotege (se sobrescribe el archivo local con la copia remota).

Nota:

Para que los comandos de administración de archivos estén activos en Fireworks, el documento tendrá que estar en una carpeta de sitio de Dreamweaver y deberá haber un servidor remoto definido. Estos comandos se pueden utilizar sólo para archivos ubicados en sitios que utilicen los métodos de transporte Local/red y FTP. Los archivos que estén en sitios con protocolos SFTP o con métodos de transporte de otros sistemas como SourceSafe, WebDAV y RDS no pueden enviarse o recibirse desde un servidor remoto si trabaja en Fireworks.

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