Divisiones Los elementos básicos para la creación de elementos

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.
Para insertar una división rectangular en función de un objeto
seleccionado:
1. Elija Editar > Insertar > División. La división es un rectángulo cuya área
2.
incluye los bordes más externos del objeto seleccionado.
Si selecciona más de un objeto, 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.
Varios creará un objeto de división para cada objeto seleccionado.
Para dibujar un objeto de división rectangular:
1. Elija la herramienta División
.
2. Arrastre para dibujar el objeto de división. El objeto de división y las guías
de división aparecen en la capa de Web.
Nota: La posición de una división puede ajustarse mientras se dibuja.
Mantenga pulsado el botón del ratón, pulse y mantenga pulsada la barra
espaciadora del teclado, después, arrastre la división hasta otro punto del
lienzo. Suelte la barra espaciadora para continuar el dibujo de la división.
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. Una división HTML no exporta datos de imágenes
en píxeles; exporta el texto HTML que aparece en la celda de la tabla definida por la
división.
Las divisiones HTML son muy útiles para actualizar texto que aparece en el sitio
Web sin tener que crear otros elementos gráficos.
Para crear una división HTML:
1.
2.
3.
4.
5.
Dibuje un objeto de división y selecciónelo.
En el Inspector de propiedades, elija HTML en el menú emergente Tipo.
Haga clic en Editar.
Escriba texto en la ventana "Editar división HTML" y asigne el formato que
desee mediante etiquetas de formato de texto HTML.
Haga clic en Aceptar para aplicar los cambios y cerrar la ventana "Editar
división HTML".
El texto y las etiquetas HTML que haya introducido aparecen en el archivo
PNG de Fireworks.
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, ya que en el navegador Web es posible definir el tamaño y la
fuente.
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. Fireworks soluciona este problema al
permitir el dibujo de divisiones con cualquier forma gracias a la herramienta
División poligonal.
También se pueden convertir los trazados vectoriales en divisiones para crear
divisiones con formas irregulares.
Para dibujar un objeto de división poligonal:
1. Elija la herramienta División poligonal.
2. Haga clic para poner los puntos de vector del polígono. La herramienta
3.
4.
División poligonal dibuja sólo segmentos en línea recta.
Cuando dibuje un objeto de división poligonal alrededor de objetos con
bordes suaves, debe incluir todo el objeto para evitar la creación
involuntaria de bordes duros en el elemento gráfico de la división.
Para dejar de utilizar la herramienta División poligonal, elija otra
herramienta en el panel de herramientas. No es necesario que haga clic de
nuevo en el primer punto para cerrar el polígono.
Nota: No es conveniente abusar de las divisiones poligonales ya que
requieren más código JavaScript que las divisiones rectangulares
semejantes. Un número elevado de divisiones poligonales puede aumentar
el tiempo de proceso del navegador web.
Para crear una división poligonal a partir de un objeto de vectores o un
trazado:
1. Seleccione un trazado vectorial.
2. Elija Editar > Insertar > Zona interactiva.
3. Elija Editar > Insertar > División.
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.
Gracias al Inspector de propiedades puede organizar las divisiones asignando un
color diferente a cada objeto de división.
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.
Para visualizar y seleccionar una división en el panel Capas:
1. Elija Ventana > Capas para abrir el panel Capas.
2. Expanda la capa de Web haciendo clic en el signo más (+) (Windows) o
triángulo (Macintosh).
3.
La lista completa de los objetos Web que se encuentran actualmente en su
documento aparece en la capa de Web.
Haga clic en un nombre de división para seleccionarla.
La división aparece resaltada en la capa de Web y se selecciona en el lienzo.
Visualizar y ocultar divisiones
Cuando se oculta una división, ésta se hace invisible en el archivo PNG de
Fireworks. Es posible desactivar todos o algunos de los objetos Web. Las divisiones
son objetos Web y aparecen enumerados en la capa de Web y del panel Capas, en
dicha capa puede activar y desactivar la visibilidad de una división seleccionada.
Cuando se oculta un objeto de división no se evita que la división se
exporte en el código HTML.
Para ocultar y mostrar unas divisiones y zonas interactivas determinadas:
1. Haga clic en el icono de ojo junto a cada objeto web individual del panel
2.
Capas
.
Haga clic en la columna Ojo para volver a activar la visibilidad. El icono de
"Ojo" vuelve a aparecer cuando los objetos Web son de nuevo visibles.
Para ocultar o mostrar todas las zonas interactivas, divisiones y guías, 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.
Para ocultar o mostrar las guías de división en todas las vistas de
documento:
Elija Ver > Guías de división.
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, la
visualización de las divisiones en estos objetos del documento puede resultar difícil.
Para facilitar la visualización de las divisiones puede asignar un color diferente a las
divisiones seleccionadas. Cada división puede tener un color exclusivo para
organizarlas mejor. El color de las guías de división también puede cambiarse.
Nota: En la vista previa, las divisiones no seleccionadas aparecen con una
superposición de color blanco.
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.
Para cambiar el color de las guías de división:
1. Elija Ver > Guías > Editar guías.
2. Seleccione un nuevo color en la sección Color división del cuadro de diálogo
Guías y haga clic en Aceptar.