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.

Transcripción

1 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:

2 Contenido tiene opciones que determinan la estructura básica del menú, así como el texto, vínculo URL y el valor de destino de cada elemento de menú. Aspecto contiene opciones que determinan el aspecto de cada celda de estado Arriba y de estado Sobre del menú, así como la orientación vertical y horizontal del menú. Avanzado contiene opciones que determinan las dimensiones de celda, relleno y espaciado; la anchura del borde de la celda y el color; la demora de menú y el sangrado del texto. Posición contiene opciones que determinan la ubicación del menú y del submenú. 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. 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. Para crear un menú emergente sencillo: 1. Seleccione una zona interactiva o división que será el área de activación del menú emergente.

3 2. Siga uno de estos procedimientos para abrir el Editor de menús emergentes: Elija Modificar > Menú emergente > Añadir menú emergente. Haga clic en el tirador de comportamiento de la división y elija Añadir menú emergente. 3. Haga clic en la ficha Contenido. 4. Haga clic en el botón Añadir menú para añadir un elemento vacío de menú. Puede añadir y eliminar celdas en cualquier momento. 5. 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ú. 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. 6. Repita los pasos 4 y 5 hasta añadir todos los elementos de menú. 7. De forma opcional, para eliminar un elemento de menú, resáltelo y haga clic en el botón Suprimir menú. 8. 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. Cree entradas de submenú para el menú emergente. Haga clic en Listo para finalizar el menú emergente y cerrar el Editor de menús emergentes. En el espacio de trabajo, 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. 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", 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. Puede crear tantos niveles de submenús como desee. Para crear un submenú emergente:

4 1. Abra la ficha Contenido del Editor de menús emergentes y cree elementos de menú. Cree los elementos de menú que desee utilizar para el submenú. Póngalos directamente bajo el elemento de menú que activará el submenú. 2. Haga clic para resaltar un elemento de menú emergente que desee convertir en elemento de submenú. 3. 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. Para añadir el elemento siguiente del submenú, resáltelo y haga clic en el botón Sangrar menú. Todos los elementos que están sangrados de forma contigua en el mismo nivel componen un submenú emergente. 5. De forma opcional, resalte un elemento de menú o submenú y haga clic en Añadir menú para insertar un nuevo elemento justo debajo del elemento resaltado. 6. 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. Haga clic en Listo para cerrar el Editor de menús emergentes. Para mover un elemento de menú hasta un submenú de mayor nivel o hasta el menú emergente principal: 1. Resalte el elemento de menú en la ficha Contenido del Editor de menú emergentes. 2. Haga clic en el botón Menú con sangría inversa. 3. 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. Haga clic en Listo para cerrar el Editor de menús emergentes. Diseño del aspecto de un menú emergente Tras crear un menú básico y los submenús opcionales, puede dar formato al texto, 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.

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

6 5. De forma opcional, puede hacer clic en un botón de estilo de texto como negrita o cursiva. 6. Haga clic en un botón de justificación para alinear el texto por la izquierda, la derecha o centrarlo. 7. Elija un color de texto en el cuadro Color de texto. 8. Elija los colores del texto y de la celda para cada estado. 10. Si ha seleccionado Imagen como tipo de celda, elija un estilo gráfico para cada estado. 11. 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. Haga clic en Listo para cerrar el Editor de menús emergentes. 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, relleno y espaciado; el sangrado del texto; el tiempo de visualización del menú y la anchura del borde, color, sombra y resaltado.

7 Para definir las propiedades de celda avanzadas del menú emergente actual: 1. Abra el menú emergente que desee en el Editor de menús emergentes y haga clic en la ficha Avanzado. 2. 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. Píxeles: permite introducir medidas específicas en píxeles en los cuadros de texto "Anchura de celda" y "Altura de celda". 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. 4. Introduzca un valor en el cuadro de texto "Espacio celda" para definir el espacio que habrá entre las celdas de menú. 5. Introduzca un valor en el cuadro de texto "Sangría de textos" para definir el sangrado del texto del menú emergente. 6. 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. 7. Defina las propiedades del borde de un menú emergente: Mostrar bordes permite mostrar u ocultar los bordes de un menú emergente. Si no se selecciona esta opción, las opciones siguientes estarán desactivadas. Ancho del borde define la anchura del borde del menú emergente. Color del borde, Sombra y Resaltado permite modificar el color del borde de un menú emergente. Nota: Muchas de estas opciones están desactivadas si se ha seleccionado el tipo de celda Imagen en la ficha Aspecto. 8. 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. Haga clic en Listo para cerrar el Editor de menús emergentes. Posición de los menús y submenús emergentes

8 La ficha Posición del Editor de menú emergente permite especificar la posición de un menú emergente. 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. Para definir la posición de un menú emergente utilizando el Editor de menús emergentes: 1. Abra el menú emergente que desee en el Editor de menús emergentes y haga clic en la ficha Posición. 2. 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. Introduzca las coordenadas X y Y. Las coordenadas 0,0 permiten alinear la esquina superior izquierda del menú emergente con la esquina superior izquierda de la división que lo activa. 3. Si tiene submenús, 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.

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

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