16.1 Introducción

Los documentos de una página Web se llaman documentos htm o html (hypertext markup language, lenguaje de marcas de hipertexto). Son documentos de texto puro en los que se insertan mandatos, llamados etiquetas, que indican al navegador cómo debe mostrar el documento.

Una de estas etiquetas es la etiqueta división (<div>) que delimita un bloque dentro del documento. Los bloques encerrados entre etiquetas <div> también reciben el nombre de capas. A las etiquetas se le puede asignar un atributo o incluso un programa.

Nuestro objetivo es aprender a crear divisiones con Fireworks y luego exportar el documento png, para conseguir una página Web o documento html que se pueda ver con un navegador de internet. Más adelante dotaremos de interactividad a esas divisiones, para que el navegador detecte las acciones del usuario y responda de una determinada manera.

Hay que aclarar un asunto importante, las divisiones que crea Fireworks se basan en la construcción de tablas (etiqueta <table>) con sus filas (etiqueta de fila <tr>) y columnas de celdas (etiqueta de celda <td>). Por lo tanto aunque técnicamente hablamos de divisiones en Fireworks, cuando exportamos el documento no se crean divisiones o capas en html.

16.2 Divisiones

Se trata de dividir un documento de Fireworks en porciones más pequeñas que se pueden exportar como archivos independientes. Durante la exportación, Fireworks también crea un archivo HTML que contiene el código de una tabla que recompone el documento en un navegador Web (como iexplorer).

Existen tres razones por las que resulta útil realizar divisiones:

1. Optimización: Uno de los retos del diseño gráfico para la Web es el mantener las imágenes lo suficientemente pequeñas como 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.
2. Interactividad: Puede crear divisiones para crear áreas que se activen con las acciones del ratón. Por lo tanto puede añadir interactividad a esas divisiones.
3. 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 modifican con frecuencia, sin cambiar la estructura de la página. Por ejemplo, suponga que una empresa tiene una página Web con una sección para el empleado del mes y que por lo tanto cambia de forma mensual. Las divisiones permiten cambiar rápidamente sólo el nombre y la foto del empleado sin tener que reemplazar toda la página.

Por desgracia, Fireworks genera unas divisiones basadas en tablas y no crea capas como sería deseable. La ventaja de las capas es que se pueden solapar cosa que no es posible con las celdas de una tabla. Por lo tanto aunque Fireworks habla de herramientas división, en realidad no genera divisiones en html, sino tablas.

16.3 Creación de divisiones

Las divisiones pueden ser rectangulares o poligonales. Insistimos en que no se generan auténticas divisiones o capas sino celdas de una tabla. Puede crearlas de dos formas: Insertando una división en un objeto determinado que ha seleccionado o dibujándola directamente con la herramienta División o División poligonal .

1. Seleccionando un objeto y asignándole una división mediante Edición > Insertar > División rectangular o poligonal: Como ejemplo, dibuje un óvalo, selecciónelo y asígnele una división poligonal. Luego elimine la división y asígnele una rectangular. Observe que la división aparece en la capa Web del panel Capas puesto que no forma parte del dibujo sino que se trata de un objeto que reconoce un navegador Web
2. Utilice la herramienta División o División poligonal para dibujar la división directamente. Para dibujar un objeto de división rectangular: Seleccione la herramienta División . Arrastre para dibujar la división. El objeto de división aparece en la capa de Web del documento. Mientras dibuja la división puede moverla. Para ello mantenga pulsado el botón del ratón y a la vez la barra espaciadora y arrastre la división hasta otro punto del lienzo.Como ejemplo dibuje una división en forma de pentágono.

Cuando crea una división aparecen unas líneas rojas determinadas por el objeto de división. Se llaman guías de división. Estas guías delimitan las celdas de una tabla que se genera en el documento durante la exportación.

En el caso de que se trate de divisiones hechas sobre una imagen, las guías determinan los límites de los trozos que se almacenarán en archivos diferentes. Estos archivos de imagen, para cada área definida por las divisiones, se crearán durante la exportación del documento.

Es importante que comprenda que las divisiones aparecen como objetos en lo que se denomina Capas Web del panel capas y que no forman parte del dibujo.

En la figura puede ver dos divisiones realizadas sobre un objeto rectangular. Una de las divisiones es rectangular y la otra poligonal. Observe las guías de división de color rojo que indican, como se dividirá el documento durante la exportación.

Si selecciona más de un objeto y se inserta una división mediante Edición > Insertar, hay dos formas de aplicar la división y podemos elegir entre dos opciones:

1. La opción Una, creará un único objeto de división que abarcará todos los objetos seleccionados.
2. La opción Varias, creará un objeto de división para cada objeto seleccionado.

16.4 Ejercicio (Divisiones sobre varios objetos)

1. Dibuje una elipse y un rectángulo. Selecciónelos.
2. Haga clic en Edición > Insertar > División poligonal
3. Seleccione la opción Una.
4. Dibuje otra elipse y otro rectángulo. Selecciónelos.
5. Haga clic en Edición > Insertar > División poligonal
6. Seleccione la opción Varias.

16.5 Ejercicio (División de imagen)

Utilice la imagen del vireo_gorrinegro

1. Almacene la imagen en su carpeta de trabajo.
2. Abra la imagen con Fireworks.
3. Utilice la herramienta División y cree una división que contenga la cabeza del pájaro. Observe que Fireworks le indica que es una división creada sobre una imagen: División JPEG.
4. Haga clic en Archivo > Exportar.
5. En la ventana de diálogo Exportar, navegue hasta su carpeta de trabajo. Haga clic en el botón Nueva carpeta . Cree una nueva carpeta para almacenar el resultado de la exportación y llámela división vireo gorrinegro.
6. Seleccione la carpeta división vireo gorrinegro y haga clic para abrirla.
7. Observe el nombre del archivo: vireo_gorrinegro.htm. Observe que en Exportar indica: HTML e imágenes, es decir, se exportará html y las imágenes. Observe que en la casilla HTML indica: Exportar archivo HTML. Observe que en la casilla Divisiones, indica: Exportar divisiones, de esa forma se insertan las etiquetas <div> en el documento html.
8. Marque la casilla que permite almacenar las imágenes en una subcarpeta img. El nombre por defecto de la subcarpeta es img aunque puede indicar otro nombre mediante el botón Examinar.
9. Haga clic en el botón Exportar.
10. Mire dentro de la carpeta división vireo gorrinegro y verá una página Web. Ábrala para verla con el navegador.
11. Mire la carpeta img que contiene las imágenes. Utilice la vista en miniatura de la carpeta y verá como se ha troceado la imagen según las guías de división y se han guardado los trozos en archivos independientes.
12. Abra la página Web con el navegador que recompone los trozos para mostrar la imagen. De esa forma el usuario irá recibiendo por la red archivos de menor tamaño para ir viendo parte de la imagen y no tendrá que esperar a recibir la imagen completa.

16.6 Divisiones HTML

Cuando crea una división sobre un objeto o sobre el documento, tiene la posibilidad de utilizarla de dos formas. Si en el inspector de propiedades, en la casilla tipo, selecciona la opción HTML, la división se convierte en un espacio o celda para introducir texto. En el inspector de propiedades aparece un botón edición que abre una ventana para escribir el contenido. Si en la casilla tipo, selecciona la opción imagen, la celda no vale para escribir texto y se exporta la imagen contenida en la división.

La exportación, crea una página Web en forma de tabla sin bordes, definida por las guías de división, es decir, la pantalla se divide en áreas independientes llamadas celdas. Cada zona puede tener un contenido independiente. Si la división es HTML se utiliza para insertar texto. Si es una división tipo imagen se utiliza para contener una imagen. El navegador no muestra las divisiones ya que se trata de una tabla sin bordes. Es una de las formas que utilizan los diseñadores para organizar el contenido de las diferentes zonas de la pantalla.

Ya hemos comentado que, cuando se exporta el documento, las imágenes se copian en una subcarpeta. Así que tendremos una página Web que contiene una tabla invisible que reproduce el documento y una subcarpeta con las imágenes necesarias para ser enlazadas por el navegador y rellenar las celdas de la división.

Insistimos en que una división HTML designa el área donde se presenta texto en el navegador. Una división HTML no exporta una imagen; 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 una determinada zona, sin tener que crear otros elementos gráficos.

Para crear una división HTML: Dibuje un objeto de división y selecciónelo. En el Inspector de propiedades, elija HTML en el menú emergente Tipo. Haga clic en Edición y se abre una ventana para escribir. Escriba texto en la ventana Editar división HTML. Tiene la posibilidad de asignar formato escribiendo etiquetas de formato de texto HTML, aunque es mejor añadir formato de texto utilizando después una herramienta especializada, como Dreamweaver.

16.7 Ejercicio (Página Web con división HTML)

Guarde la imagen vireo_gorrinegro en una carpeta de trabajo

1. 800 x 450 píxeles es un tamaño de lienzo que podemos utilizar para crear un página Web. Cree un lienzo de ese tamaño.
2. Importe la imagen y ajústela para que ocupe el mayor espacio posible del lienzo.
3. Cree una división HTML en la parte derecha.
4. Busque en Internet información sobre el vireo gorrinegro.
5. Introduzca texto en la división HTML con información sobre este pájaro.
6. Exporte a una subcarpeta. Las imágenes deben estar ubicadas en otra subcarpeta.
7. Vaya a la carpeta y vea con iexplorer la página Web generada.
8. Mire en la subcarpeta de imágenes y vea los diferentes archivos en los que se dividió la imagen.

16.8 Ejercicio (Diseño de una portada para la Web)

Si tiene una forma irregular y quiere que una división se ajuste a ella, puede hacerlo directamente. Seleccione la forma y haga clic en Editar > Insetar > División poligonal.

Con esta idea, diseñe una página Web similar a la de la figura pero con color y motivo diferente. Utilice cualquier idea que le parezca apropiada para mejorar el diseño. Concretamente:

1. La página debe tener un encabezamiento a modo de título.
2. Una imagen de fondo relacionada con el motivo de la página.
3. Puede utilizar cualquier tema: recetas de cocina, fórmula 1, motos, coches, deportes, aviación, astronomía, música (por ejemplo Queen), etc.
4. En la parte izquierda debe poner tres formas poligonales a modo de menú a las que debe asignar sendas divisiones.
5. La exportación debe hacerla en una carpeta independiente y exclusiva para este trabajo.
6. Exporte a página Web incluyendo las imágenes en una subcarpeta de nombre imagenes.

16.9 Ejercicio

Utilizando divisiones, tiene que diseñar una página Web parecida a la de la figura.

No debe preocuparse por el formato de texto (color, tamaño etc.).

Las imágenes necesarias las puede guardar en su carpeta de trabajo bajándolas mediante el siguiente vínculo: global.zip.

Habilite divisiones HTML para el texto y lo debe teclear utilizando el botón Edición del inspector de propiedades. Teclee texto estándar. Ignore el formato (color, tamaño...).

Como ayuda se muestra una posible organización de divisiones.