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.

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.

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

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

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.

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.

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.

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.

Actualizar código HTML de Fireworks exportado a Dreamweaver

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.

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.

Editar una imagen de Fireworks colocada en Dreamweaver

Editar una tabla de Fireworks colocada en Dreamweaver

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.

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
  

Optimizar imágenes y animaciones de Fireworks insertadas en Dreamweaver

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

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.

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.

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.

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.

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

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

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

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

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