Qué saber
- Ir a Insertar > Formulario > Formulario. Haga clic en la línea roja punteada del formulario y vaya a Insert > Form > List/Menu. Elige las opciones de accesibilidad.
- Haga clic en el menú y seleccione sus propiedades, luego seleccione Valores de lista para agregar nuevos elementos de menú. Haga clic en el signo más para agregar más elementos.
- Agregue valores de elementos y elija un elemento predeterminado. Para agregar acciones, vaya a Insert > Form > Jump Menu. Agregue elementos al menú S altar y guarde.
Dreamweaver facilita la creación de menús desplegables para su sitio web. Pero como todos los formularios HTML, pueden ser un poco complicados. Este tutorial lo guiará a través de los pasos para crear un menú desplegable en Dreamweaver.
Menús de s alto de Dreamweaver
Dreamweaver 8 también proporciona un asistente para crear un menú de s alto para la navegación en su sitio web. A diferencia de los menús desplegables básicos, este menú hará algo cuando haya terminado. No tendrá que escribir ningún JavaScript o CGI para que su formulario desplegable funcione. Este tutorial también explica cómo utilizar el asistente de Dreamweaver 8 para crear un menú de s alto.
Primero, crea el formulario
A excepción de los asistentes especiales como el menú de s alto, Dreamweaver no le ayuda a hacer que los formularios HTML "funcionen". Para esto, necesita un CGI o JavaScript.
Cuando agrega un menú desplegable a su sitio web, lo primero que necesita es un formulario que lo rodee. En Dreamweaver, vaya al menú Insertar y haga clic en Formulario, luego seleccione "Formulario".
Visualizaciones de formularios en la vista de diseño
Dreamweaver muestra visualmente la ubicación de su formulario en la vista de diseño, para que sepa dónde colocar los elementos del formulario porque las etiquetas del menú desplegable no son válidas (y no funcionarán) fuera del elemento del formulario. Como puede ver en la imagen, el formulario es la línea de puntos roja en la vista de diseño.
Elegir Lista/Menú
Los menús desplegables se denominan elementos de "lista" o "menú" en Dreamweaver. Entonces, para agregar uno a su formulario, debe ir al menú Formulario en el menú Insertar y elegir "Lista/Menú". Asegúrese de que el cursor esté dentro de la línea de puntos roja del cuadro de formulario.
Ventana de opciones especiales
En las Opciones de Dreamweaver, hay una pantalla de Accesibilidad. Sus menús desplegables serán inmediatamente más accesibles que otros sitios web si completa estas cinco opciones.
Accesibilidad de formularios
Las opciones de accesibilidad son:
Etiqueta
El campo de la etiqueta aparece como texto al lado de su elemento de formulario. Escribe un nombre para tu menú desplegable. Puede ser una pregunta o una frase corta que responderá el menú desplegable.
Estilo
HTML incluye una etiqueta para identificar las etiquetas de su formulario en el navegador web. Sus opciones son ajustar el menú desplegable y el texto de la etiqueta con la etiqueta, usar el atributo "para" en la etiqueta de la etiqueta para identificar a qué etiqueta de formulario hace referencia, o no usar la etiqueta en absoluto.
Posición
Puede colocar su etiqueta antes o después del menú desplegable.
Clave de acceso
Los visitantes pueden usar una tecla de acceso con las teclas "Imagen" u Opción para acceder directamente a ese campo de formulario. Este atajo de teclado hace que sus formularios sean muy fáciles de usar sin un mouse. alt="
Índice de pestañas
El índice de pestañas es la forma en que los usuarios deben acceder a los campos del formulario cuando usan el teclado para desplazarse por la página web.
Cuando haya actualizado sus opciones de accesibilidad, haga clic en Aceptar.
Seleccione el menú
Una vez que tenga el menú desplegable en la vista de diseño de Dreamweaver, debe agregar los diversos elementos. Primero, seleccione el menú desplegable haciendo clic en él. Dreamweaver colocará otra línea de puntos alrededor del menú desplegable para mostrar que lo ha elegido.
Propiedades del menú
El menú de propiedades cambiará a las propiedades de lista/menú para ese menú desplegable. Allí puede darle a su menú una ID (donde dice "seleccionar"), decidir si quiere que sea una lista o un menú, darle una clase de estilo de su hoja de estilo y asignar valores al menú desplegable.
¿Cuál es la diferencia entre lista y menú?
Dreamweaver llama a un menú desplegable cualquier menú desplegable que solo permita una selección. Una "lista" permite múltiples opciones en el menú desplegable y puede tener más de un elemento alto.
Si desea que un menú desplegable tenga varias líneas de alto, cámbielo a un tipo de "lista" y deje la casilla de "selecciones" sin marcar.
Añadir nuevos elementos a la lista
Para agregar nuevos elementos a su menú, haga clic en el botón "Lista de valores…", que abre la ventana anterior. Luego, escriba la etiqueta de su artículo en el primer cuadro. Se mostrará en la página.
Añadir más y reordenar
Haga clic en el ícono más para agregar más elementos. Si desea reordenarlos en el cuadro de lista, use las flechas hacia arriba y hacia abajo a la derecha.
Dar valores a todos los artículos
Si deja el valor en blanco, la etiqueta irá al formulario. Pero puede dar valores a todos sus artículos para enviar información alternativa a su formulario. Lo usará mucho para cosas como menús de s alto e hipervínculos.
Elija un valor predeterminado
Las páginas web muestran de forma predeterminada el elemento desplegable que aparece primero como elemento predeterminado. Pero si desea seleccionar uno diferente, resáltelo en el cuadro "Seleccionado inicialmente" en el menú Propiedades.
Vea su lista en la vista de diseño
Una vez que haya terminado de editar las propiedades, Dreamweaver mostrará su lista desplegable con el valor predeterminado seleccionado.
Vea su lista en Vista de código
Si cambia a la vista de código, puede ver que Dreamweaver agrega su menú desplegable con código limpio. Los únicos atributos adicionales son las opciones de accesibilidad. El código está sangrado y es muy fácil de leer y comprender.
Guardar y ver en el navegador
Si guarda el documento y lo ve en un navegador web, puede ver que su menú desplegable se ve exactamente como lo esperaría.
Pero no hace nada…
El menú que creamos arriba se ve bien, pero no hace nada. Para que haga algo, debe configurar una acción de formulario en el formulario mismo.
Afortunadamente, Dreamweaver tiene un formulario de menú desplegable integrado que puede usar inmediatamente en su sitio sin necesidad de aprender sobre formularios, CGI o secuencias de comandos. Se llama menú de s alto.
El menú de s alto de Dreamweaver configura un menú desplegable con nombres y direcciones URL. Luego puede elegir un elemento en el menú y la página web se moverá a esa ubicación, como si hubiera hecho clic en un enlace.
Vaya al menú Insertar y seleccione Formulario y luego S altar menú.
Ventana de menú de s alto
A diferencia del menú desplegable estándar, el menú S altar abre una nueva ventana para que usted nombre los elementos del menú y agregue detalles sobre cómo debería funcionar el formulario.
Para el primer elemento, cambia el texto "sin título1" por lo que quieras que lea y agrega una URL.
Añadir elementos a su menú de s alto
Haga clic en Agregar elemento para agregar un nuevo elemento a su menú de s alto. Agregue tantos elementos como desee.
Opciones de menú de s alto
Una vez que haya agregado todos los enlaces que desee, debe elegir sus opciones:
Abrir URL en
Si tiene un conjunto de marcos, puede abrir los enlaces en un marco diferente. O puede cambiar la opción de la ventana principal a un destino especial para que la URL se abra en una nueva ventana o en otro lugar.
Nombre del menú
Dale a tu menú una identificación única para la página. Es necesario para que el script funcione correctamente. También le permite tener varios menús de s alto en una sola forma: asígneles nombres diferentes.
Insertar el botón Ir después del menú
Me gusta seleccionar esto porque a veces el script no funciona cuando cambia el menú. También es más accesible.
Seleccione el primer elemento después del cambio de URL
Seleccione esto si tiene un mensaje como "Seleccione uno" como el primer elemento del menú. Esto garantizará que ese elemento permanezca predeterminado en la página.
Vista de diseño del menú de s alto
Al igual que con su primer menú, Dreamweaver configura su menú de s alto en la vista de diseño con el elemento predeterminado visible. Luego puede editar el menú desplegable como lo haría con cualquier otro.
Si lo edita, asegúrese de no cambiar ningún ID en los elementos; de lo contrario, es posible que el script no funcione.
S altar menú en el navegador
Guardar el archivo y presionar F12 mostrará la página en su navegador preferido. Allí puede seleccionar una opción, hacer clic en "Ir" y el menú de s alto funcionará.
