You are on page 1of 6

Divisiones Los elementos básicos para la creación de elementos interactivos en Macromedia Fireworks MX son las divisiones.

Las divisiones no son imágenes, son objetos Web compuestos de código HTML. Es posible ver, seleccionar y asignar otro nombre mediante la capa de Web del panel Capas. Creación y edición de divisiones La división "corta" un documento de Fireworks en porciones más pequeñas que se exportan como archivos independientes. Durante la exportación, Fireworks también crea un archivo HTML que contiene el código de la tabla que recompone el gráfico en un navegador web.

Existen tres razones por las que resulta útil realizar este paso: Optimización: Uno de los retos del diseño gráfico para la Web es el mantener las imágenes lo suficientemente pequeñas para que se descarguen rápidamente sin sacrificar la calidad. Las divisiones permiten optimizar cada división individual con el formato de archivo y los ajustes de compresión más adecuados. Interactividad: Puede hacer divisiones para crear áreas que se activen cuando el puntero del usuario pase sobre ellas o haga clic. Actualización de partes de una página web: Gracias a las divisiones resulta muy fácil actualizar partes de una página Web que se modifique con frecuencia. Creación de objetos de división Puede crear un objeto de división dibujándolo con la herramienta División o insertando una división que se base en un objeto seleccionado. Las líneas que se extienden desde el objeto de división son las guías de división, determinan los límites de los distintos archivos de imagen en los que se dividirá el documento durante la exportación. De forma predeterminada, estas guías son de color rojo.

pulse y mantenga pulsada la barra espaciadora del teclado. . Varios creará un objeto de división para cada objeto seleccionado. El objeto de división y las guías de división aparecen en la capa de Web. Una división HTML no exporta datos de imágenes en píxeles. después. incluye los bordes más externos del objeto seleccionado. Elija Editar > Insertar > División. Si selecciona más de un objeto. Para dibujar un objeto de división rectangular: 1.Para insertar una división rectangular en función de un objeto seleccionado: 1. exporta el texto HTML que aparece en la celda de la tabla definida por la división. Nota: La posición de una división puede ajustarse mientras se dibuja. Suelte la barra espaciadora para continuar el dibujo de la división. Arrastre para dibujar el objeto de división. 2. Mantenga pulsado el botón del ratón. arrastre la división hasta otro punto del lienzo. Elija la herramienta División . elija cómo desea aplicar las guías de división: Uno creará un único objeto de división que abarcará todos los objetos seleccionados. Creación de divisiones HTML Una división HTML designa el área de una imagen dividida donde se presenta texto HTML estándar en el navegador. La división es un rectángulo cuya área 2.

Haga clic en Editar. Fireworks soluciona este problema al permitir el dibujo de divisiones con cualquier forma gracias a la herramienta División poligonal. El texto y las etiquetas HTML que haya introducido aparecen en el archivo PNG de Fireworks. Escriba texto en la ventana "Editar división HTML" y asigne el formato que desee mediante etiquetas de formato de texto HTML. Nota: Las divisiones de texto HTML creadas de esta forma pueden variar de aspecto cuando se visualicen en distintos navegadores y en otros sistemas operativos. elija HTML en el menú emergente Tipo. . En el Inspector de propiedades. 5. ya que en el navegador Web es posible definir el tamaño y la fuente.Las divisiones HTML son muy útiles para actualizar texto que aparece en el sitio Web sin tener que crear otros elementos gráficos. 4. 3. Creación de divisiones no rectangulares A veces las divisiones rectangulares no son suficientes al tratar de incluir más interactividad en una imagen no rectangular. Dibuje un objeto de división y selecciónelo. Haga clic en Aceptar para aplicar los cambios y cerrar la ventana "Editar división HTML". 2. Para crear una división HTML: 1.

Elija Editar > Insertar > División. Elija Editar > Insertar > Zona interactiva. 3. División poligonal dibuja sólo segmentos en línea recta. Se genera una división según la forma del objeto de vectores Visualización de las divisiones y de las guías Puede controlar la visibilidad de las divisiones y de otros objetos Web del documento mediante el panel Capas y el panel Herramientas. Para dejar de utilizar la herramienta División poligonal. Haga clic para poner los puntos de vector del polígono. Un número elevado de divisiones poligonales puede aumentar el tiempo de proceso del navegador web. debe incluir todo el objeto para evitar la creación involuntaria de bordes duros en el elemento gráfico de la división. Elija la herramienta División poligonal. elija otra herramienta en el panel de herramientas. Seleccione un trazado vectorial. La herramienta 3. Cuando dibuje un objeto de división poligonal alrededor de objetos con bordes suaves. . 4. Gracias al Inspector de propiedades puede organizar las divisiones asignando un color diferente a cada objeto de división.También se pueden convertir los trazados vectoriales en divisiones para crear divisiones con formas irregulares. Visualización de las divisiones en el panel Capas La capa de Web muestra todos los objetos Web presentes en el documento de forma que puede seleccionar y ver cada uno de ellos. 2. Para crear una división poligonal a partir de un objeto de vectores o un trazado: 1. 2. Nota: No es conveniente abusar de las divisiones poligonales ya que requieren más código JavaScript que las divisiones rectangulares semejantes. Para dibujar un objeto de división poligonal: 1. No es necesario que haga clic de nuevo en el primer punto para cerrar el polígono.

1. . Expanda la capa de Web haciendo clic en el signo más (+) (Windows) o triángulo (Macintosh). divisiones y guías. Visualizar y ocultar divisiones Cuando se oculta una división.Para visualizar y seleccionar una división en el panel Capas: 1. El icono de "Ojo" vuelve a aparecer cuando los objetos Web son de nuevo visibles. Cuando se oculta un objeto de división no se evita que la división se exporte en el código HTML. siga uno de estos procedimientos: • • Haga clic en el botón Ocultar/Mostrar divisiones adecuado del panel Herramientas Haga clic en el icono de "Ojo" junto a la capa de web del panel Capas. Las divisiones son objetos Web y aparecen enumerados en la capa de Web y del panel Capas. Capas . en dicha capa puede activar y desactivar la visibilidad de una división seleccionada. Elija Ventana > Capas para abrir el panel Capas. 2. Haga clic en el icono de ojo junto a cada objeto web individual del panel 2. La división aparece resaltada en la capa de Web y se selecciona en el lienzo. Haga clic en un nombre de división para seleccionarla. Para ocultar o mostrar todas las zonas interactivas. Haga clic en la columna Ojo para volver a activar la visibilidad. Para ocultar y mostrar unas divisiones y zonas interactivas determinadas: 3. Para ocultar o mostrar las guías de división en todas las vistas de documento: Elija Ver > Guías de división. ésta se hace invisible en el archivo PNG de Fireworks. Es posible desactivar todos o algunos de los objetos Web. La lista completa de los objetos Web que se encuentran actualmente en su documento aparece en la capa de Web.

las divisiones no seleccionadas aparecen con una superposición de color blanco. la visualización de las divisiones en estos objetos del documento puede resultar difícil. Para cambiar el color de las guías de división: 1.Cambio del color de la división y de las guías de división Si los colores utilizados en un documento son similares al color de la división. Cada división puede tener un color exclusivo para organizarlas mejor. Para cambiar el color de un objeto de división seleccionado: En el Inspector de propiedades elija un nuevo color en el cuadro de colores. Nota: En la vista previa. . Seleccione un nuevo color en la sección Color división del cuadro de diálogo Guías y haga clic en Aceptar. El color de las guías de división también puede cambiarse. 2. Para facilitar la visualización de las divisiones puede asignar un color diferente a las divisiones seleccionadas. Elija Ver > Guías > Editar guías.