Creación de barras de navegación Una barra de navegación, también denominada bar nav, es un grupo de botones que ofrece vínculos

a otras áreas de un sitio Web. Normalmente, no cambia de aspecto en el sitio, de modo que ofrece un método coherente de navegación sin importar el lugar en que se encuentre el usuario en el sitio Web. La barra de navegación tiene el mismo aspecto de una página Web a otra, pero los enlaces pueden ser específicos para el funcionamiento de cada página. En Fireworks, puede crear una bar nav creando un símbolo en el Editor de botones y luego poniendo instancias de dicho símbolo en el lienzo. Pasos para crear una barra de navegación: 1. Cree un símbolo de botón de cuatro estados. 2. Inserte una copia del botón mediante alguno de los siguientes procedimientos: • Seleccione la instancia de botón y elija Editar > Clonar. • Mantenga pulsada la tecla Alt mientras arrastra la instancia de botón. • Arrastre una instancia del botón desde el panel Biblioteca. 3. Situe el botón clonado. 4. Repita los pasos 2 y 3 para crear las instancias de botón que desee. 5. Seleccione cada instancia y asignele un texto único, un valor URL y otras propiedades utilizando el Inspector de propiedades.

Creación de menús emergentes Los menús emergentes son menús que aparecen en un navegador como respuesta al movimiento del puntero (o en respuesta a la acción de hacer clic) sobre objetos Web de activación como una división o zona interactiva. Los elementos de los menús emergentes pueden incluir vínculos URL para la navegación. Por ejemplo, puede utilizar los menús emergentes para organizar diferentes opciones de navegación que estén relacionadas con un botón en una barra de navegación. Puede crear submenús en los menús emergentes con el número de niveles que desee. Cada elemento de un menú emergente aparece como una celda con un estado Arriba, un estado Sobre y texto en ambos estados. Para ver una presentación preliminar de un menú emergente en un navegador debe pulsar F12. Las vistas previas del espacio de trabajo de Fireworks MX no muestran los menús emergentes.

Acerca del Editor de menús emergentes El editor de menús emergentes es un cuadro de diálogo con fichas que le guía durante el proceso de creación de un menú emergente. Contiene muchas opciones para controlar las características de un menú emergente y están organizadas en cuatro fichas:

. así como la orientación vertical y horizontal del menú. Aspecto contiene opciones que determinan el aspecto de cada celda de estado Arriba y de estado Sobre del menú. Cuando se crea un menú se aplican los ajustes actuales o predeterminados de las opciones del resto de las fichas del Editor de menús emergentes. la anchura del borde de la celda y el color. Para crear un menú emergente sencillo: 1. relleno y espaciado. vínculo URL y el valor de destino de cada elemento de menú. la demora de menú y el sangrado del texto. Seleccione una zona interactiva o división que será el área de activación del menú emergente. Creación de un menú emergente básico En la ficha Contenido del Editor de menús emergentes se creará la estructura básica y el contenido del menú emergente. así como el texto. Avanzado contiene opciones que determinan las dimensiones de celda.Contenido tiene opciones que determinan la estructura básica del menú. Posición contiene opciones que determinan la ubicación del menú y del submenú.

Siga uno de estos procedimientos para abrir el Editor de menús emergentes: • Elija Modificar > Menú emergente > Añadir menú emergente. De forma opcional. Puede añadir y eliminar celdas en cualquier momento. se pueden crear submenús los cuales son menús emergentes que aparecen cuando el puntero se encuentra (o se hace clic) sobre otro elemento de menú emergente. • Haga clic en Listo para finalizar el menú emergente y cerrar el Editor de menús emergentes. 5. Para crear un submenú emergente: .2. Haga clic en la ficha Contenido. Destino: designa el elemento destino del valor URL. Al añadir texto en la última línea de la ventana se agrega automáticamente una línea vacía debajo de la misma. Repita los pasos 4 y 5 hasta añadir todos los elementos de menú. resáltelo y haga clic en el botón Suprimir menú. Haga clic en el botón Añadir menú para añadir un elemento vacío de menú. Haga doble clic en cada celda e introduzca la información adecuada: Texto: especifica el texto para el elemento de menú. Vínculo: determina el valor URL del elemento de menú. • Haga clic en el tirador de comportamiento de la división y elija Añadir menú emergente. 6. Puede crear tantos niveles de submenús como desee. 7. 4. 8. • Cree entradas de submenú para el menú emergente. Creación de submenús en un menú emergente Gracias a los botones "Sangrar menú" y "Menú con sangría inversa" de la ficha "Contenido del Editor de menús emergentes". para eliminar un elemento de menú. En el espacio de trabajo. 3. la zona interactiva o división utilizada para crear el menú emergente muestra una línea azul de comportamiento unida a un contorno del nivel superior del menú emergente. Siga uno de estos procedimientos: • Haga clic en Siguiente para ir hasta la ficha Aspecto o elija otra ficha para continuar con la creación del menú emergente.

• Haga clic en Listo para cerrar el Editor de menús emergentes. 3. Para mover un elemento de menú hasta un submenú de mayor nivel o hasta el menú emergente principal: 1. aplicar estilos de gráfico para los estados Sobre y Arriba y elegir la orientación vertical u horizontal en la ficha Aspecto del Editor de menús emergentes. 2. Siga uno de los procedimientos siguientes para finalizar el menú emergente o seguir con su creación: • Haga clic en Siguiente para ir hasta la ficha Aspecto o elija otra ficha para continuar con la creación del menú emergente. Diseño del aspecto de un menú emergente Tras crear un menú básico y los submenús opcionales. 2. Haga clic en el botón Sangrar menú para designar el elemento como una opción de submenú del elemento inmediatamente encima en la lista. 4. Cree los elementos de menú que desee utilizar para el submenú. Para añadir el elemento siguiente del submenú. resalte un elemento de menú o submenú y haga clic en Añadir menú para insertar un nuevo elemento justo debajo del elemento resaltado. Póngalos directamente bajo el elemento de menú que activará el submenú. 5. 3. resáltelo y haga clic en el botón Sangrar menú. Resalte el elemento de menú en la ficha Contenido del Editor de menú emergentes. 6. • Haga clic en Listo para cerrar el Editor de menús emergentes.1. Haga clic para resaltar un elemento de menú emergente que desee convertir en elemento de submenú. Todos los elementos que están sangrados de forma contigua en el mismo nivel componen un submenú emergente. puede dar formato al texto. Siga uno de estos procedimientos: • Haga clic en Siguiente para ir a la siguiente ficha o elija otra ficha para continuar con la creación del menú emergente. . Abra la ficha Contenido del Editor de menús emergentes y cree elementos de menú. Haga clic en el botón Menú con sangría inversa. De forma opcional.

Abra el menú emergente que desee en el Editor de menús emergentes y haga clic en la ficha Aspecto. Esta configuración produce páginas de mayor tamaño. Elija un tamaño preestablecido en el menú emergente Tamaño o introduzca un valor en el cuadro de texto Tamaño.Para establecer la orientación. Elija un grupo de fuentes del sistema en el menú emergente Fuentes o introduzca el nombre de una fuente. . 3. Elija una opción de Celdas: HTML define el aspecto del menú utilizando sólo códigos HTML. el formato de celdas. el formato de texto y el diseño de las celdas de un menú emergente: 1. 3. Nota: Si en la ficha "Avanzado" del Editor de menús emergentes se establece la anchura y altura de celda en Automático. 2. 4. Imagen le permite seleccionar un estilo de imagen que se utilizará como fondo de celda. el tamaño del texto determina el tamaño de los gráficos asociados con el elemento de menú. Esta configuración produce páginas con el menor tamaño posible. Elija Vertical u Horizontal en el menú emergente Orientación.

Haga clic en un botón de justificación para alinear el texto por la izquierda. Si ha seleccionado Imagen como tipo de celda. el tiempo de visualización del menú y la anchura del borde.5. Siga uno de estos procedimientos: • Haga clic en Siguiente para ir hasta la ficha Avanzado o elija otra ficha para continuar con la creación del menú emergente. puede hacer clic en un botón de estilo de texto como negrita o cursiva. Definición de las propiedades avanzadas de menú emergente La ficha Avanzado del Editor de menús emergentes le ofrece opciones adicionales para controlar el tamaño de celda. 11. 8. 10. • Haga clic en Listo para cerrar el Editor de menús emergentes. 6. elija un estilo gráfico para cada estado. sombra y resaltado. Elija los colores del texto y de la celda para cada estado. 7. . la derecha o centrarlo. De forma opcional. el sangrado del texto. color. Elija un color de texto en el cuadro Color de texto. relleno y espaciado.

5. 3. Introduzca un valor en el cuadro de texto "Relleno celda" para determinar la distancia que habrá entre el texto del menú emergente y el borde de la celda. 6. 2. Color del borde.Para definir las propiedades de celda avanzadas del menú emergente actual: 1. Ancho del borde define la anchura del borde del menú emergente. 7. Introduzca un valor en el cuadro de texto "Sangría de textos" para definir el sangrado del texto del menú emergente. Introduzca un valor en el cuadro de texto "Espacio celda" para definir el espacio que habrá entre las celdas de menú. Sombra y Resaltado permite modificar el color del borde de un menú emergente. Abra el menú emergente que desee en el Editor de menús emergentes y haga clic en la ficha Avanzado. Nota: Muchas de estas opciones están desactivadas si se ha seleccionado el tipo de celda Imagen en la ficha Aspecto. Posición de los menús y submenús emergentes . Elija una restricción de anchura o de altura en el menú emergente Automático/Píxeles: Automático: restringe la altura de la celda al tamaño del texto definido en la ficha Aspecto del Editor de menús emergentes y restringe la anchura del elemento de menú al texto de mayor longitud. Siga uno de los procedimientos siguientes para finalizar el menú emergente o seguir con su creación: • Haga clic en Siguiente para ir hasta la ficha Posición o elija otra ficha para continuar con la creación del menú emergente. 4. las opciones siguientes estarán desactivadas. Si no se selecciona esta opción. • Haga clic en Listo para cerrar el Editor de menús emergentes. 8. Introduzca un valor en el cuadro de texto "Demora de menú" para definir los milisegundos que el menú permanecerá visible después de que el puntero se desplace fuera. Defina las propiedades del borde de un menú emergente: Mostrar bordes permite mostrar u ocultar los bordes de un menú emergente. Píxeles: permite introducir medidas específicas en píxeles en los cuadros de texto "Anchura de celda" y "Altura de celda".

La ficha Posición del Editor de menú emergente permite especificar la posición de un menú emergente. Siga uno de estos procedimientos para definir la posición del menú: • Haga clic en un botón "Posición del menú" para situar el menú emergente en relación con la división que lo activa. . Las coordenadas 0. 2. Para definir la posición de un menú emergente utilizando el Editor de menús emergentes: 1. 3. Abra el menú emergente que desee en el Editor de menús emergentes y haga clic en la ficha Posición. También es posible situar un menú emergente de nivel superior arrastrando su contorno en el espacio de trabajo cuando la capa de Web está visible. sitúelos tal como se describe en el procedimiento siguiente: • Haga clic en un botón "Posición del submenú" para situar el submenú emergente en relación con el elemento de menú emergente que lo activa. Si tiene submenús.0 permiten alinear la esquina superior izquierda del menú emergente con la esquina superior izquierda de la división que lo activa. • Introduzca las coordenadas X y Y.

2. Haga clic en Listo para cerrar el Editor de menús emergentes o haga clic en Atrás para modificar las propiedades de otras fichas. 4. no seleccione la opción "Colocar en la misma posición". Las coordenadas 0. . En el espacio de trabajo. • Para que la posición de cada submenú esté relacionada con el elemento de menú que lo activa. • Haga clic en la columna "Ojo" del panel Capas. 3. Arrastre el contorno de menú emergente hasta otra posición en el espacio de trabajo.• Introduzca las coordenadas X y Y. • Si desea que la posición de cada submenú esté en función de todo el menú emergente. 2. haga doble clic en el contorno azul del menú emergente. Para editar un menú emergente en el editor de menús emergentes: 1. reorganizar los elementos del menú y cambiar otras propiedades en cualquiera de las cuatro fichas en cualquier momento. Si no está visible la capa de Web. Para definir la posición de un menú emergente arrastrándolo: 1. • Haga clic en la columna "Ojo" del panel Capas. siga uno de los procedimientos siguientes para activarla: • Haga clic en el botón Mostrar divisiones y zonas interactivas del panel Herramientas. 3. Si no está visible la capa Web. Edición de menús emergentes Gracias al Editor de menús emergentes puede editar o actualizar el contenido de un menú emergente. siga uno de los procedimientos siguientes para activarla: • Haga clic en el botón Mostrar divisiones y zonas interactivas del panel Herramientas. Seleccione la división a la que el menú emergente se encuentra asociado. Se abre el Editor de menús emergentes mostrando las entradas del menú emergente.0 permiten alinear la esquina superior izquierda del submenú emergente con la esquina superior izquierda del menú o elemento de menú que lo activa. elija la opción "Colocar en la misma posición". Seleccione el objeto Web que activa el menú emergente.

el archivo mm_menu. Cuando incluye submenús. Fireworks siempre utilizará el mismo archivo arrows. Realice las modificaciones que desee en cualquiera de las cuatro fichas y haga clic en Listo.gif. Si desea poner los archivos en otra ubicación. Cuando un documento Fireworks que contiene menús emergentes se exporta a HTML. se crea un archivo JavaScript denominado mm_menu.js en la misma ubicación que el archivo HTML.js en el código HTML de Fireworks deben actualizarse para reflejar la nueva ubicación. Fireworks no crea archivos mm_menu.js debe transferirse al mismo directorio que la página Web que contenga al menú emergente.js extras: sólo se utiliza un único archivo para todos los documentos. todos los hipervínculos que hagan referencia a mm_menu. Si el documento contiene varios menús emergentes o si hay varios documentos con menús emergentes.4. Esta imagen corresponde a la pequeña flecha que aparece junto a la entrada de menú para indicar que existe un submenú. Acerca de la exportación de menús emergentes Fireworks genera todo el código JavaScript necesario para ver menús emergentes en un navegador Web. . Fireworks genera un archivo de imagen denominado arrows.gif. Independientemente del número de submenús presentes en el documento. Cuando transfiera los archivos.