Dreamweaver facilita a creación de menús despregables para o seu sitio web. Pero, como todos os formularios HTML, poden ser un pouco complicados. Este tutorial vai percorrer os pasos para crear un menú despregable en Dreamweaver.
Dreamweaver Jump Menus
Dreamweaver 8 tamén ofrece un asistente para crear un menú de salto para a navegación no seu sitio web. A diferenza dos menús despregables básicos, este menú realmente fará algo cando termine. Non terá que escribir ningún JavaScript ou CGIs para que o seu formulario desplegable funcione. Este tutorial tamén explica como usar o asistente de Dreamweaver 8 para crear un menú de salto.
01 de 20
Primeiro cree o formulario
Nota importante sobre HTML Forms e Dreamweaver:
Con excepción de asistentes especiais como o menú de salto, Dreamweaver non axuda a facer "traballo" en formularios HTML. Para iso necesitas un CGI ou JavaScript. Consulte o meu tutorial Facer traballos en HTML Forms para obter máis información.
Cando estea engadindo un menú despregable ao seu sitio web, o primeiro que precisa é un formulario para rodealo. En Dreamweaver, vai ao menú Inserir e prema en Formulario, a continuación, escolla "Formulario".
02 de 20
Mostra o formulario na vista de deseño
Dreamweaver mostra a localización do formulario visualmente na vista de deseño, así que xa sabes onde poñer os teus elementos de formulario. Isto é importante, porque as etiquetas do menú despregable non son válidas (e non funcionarán) fóra do elemento do formulario. Como se pode ver na imaxe, o formulario é a liña de puntos vermella na vista de deseño.
03 de 20
Escolla Lista / Menú
Os menús desplegables chámanse elementos "lista" ou "menú" en Dreamweaver. Para engadir un ao seu formulario, ten que entrar no menú Formulario no menú Inserir e escoller "Lista / Menú". Asegúrese de que o cursor estea dentro da liña de puntos vermella do seu cadro de formulario.
04 de 20
Ventá de Opcións Especiais
Nas Opcións de Dreamweaver hai unha pantalla sobre Accesibilidade. Escollemos que Dreamweaver me mostre todos os atributos de accesibilidade. E esta pantalla é o resultado. Os formularios son un lugar onde moitos sitios web caen na accesibilidade e, ao completar estas cinco opcións, os menús desplegables serán de inmediato máis accesibles.
05 de 20
Accesibilidade ao formulario
As opcións de accesibilidade son:
Etiqueta
Este é o nome do campo. Aparecerá como texto xunto ao elemento de formulario.
Escriba o que desexa chamar ao menú despregable. Esta pode ser unha pregunta ou frase breve que o menú desplegable responderá.
Estilo
HTML inclúe unha etiqueta para identificar as etiquetas dos formularios no navegador. As túas opcións son engadindo o menú despregable e o texto da etiqueta coa etiqueta, para usar o atributo "para" na etiqueta para identificar a etiqueta do formulario que fai referencia ou non usar a etiqueta.
Prefiro usar o atributo para o atributo, polo que se necesito mover a etiqueta por algún motivo, aínda estará conectado ao campo do formulario correcto.
Posición
Pode colocar a súa etiqueta antes ou despois do menú despregable.
Tecla de acceso
Esta é a clave que se pode empregar xunto coas teclas Alt ou Option para chegar directamente a ese campo de formulario. Isto fai que os seus formularios sexan moi fáciles de usar sen ter que usar un rato. Como configurar unha clave de acceso en HTML
Índice de pestañas
Esta é a orde en que se debe acceder ao campo de formulario cando se usa o teclado para facelo a través da páxina web. Comprensión do Tabindex
Cando actualice as súas opcións de accesibilidade, faga clic en Aceptar.
06 de 20
Selecciona o menú
Unha vez que teña o seu menú despregable que se mostra na vista de deseño, cómpre engadir os distintos elementos a ela. Primeiro seleccione o menú despregable premendo nel. Dreamweaver poñerá outra liña de puntos ao redor do menú despregable, para mostrar que a seleccionou.
07 de 20
Propiedades do menú
O menú de propiedades cambiará a lista / propiedades do menú desplegable. Alí pode dar ao seu menú unha ID (onde di "seleccionar"), decidir se quere que sexa un lis ou un menú, darlle unha clase de estilo da súa folla de estilo e asignar valores ao menú despregable.
Cal é a diferencia entre lista e menú?
Dreamweaver chama a un menú despregable do menú calquera menú desplegable que só permite unha selección. A "lista" permite múltiples opcións no menú despregable e pode ter máis dun elemento alto.
Se desexa que un menú despregable teña varias liñas altas, cambie a un tipo de "lista" e deixe a caixa de "seleccións" desmarcada.
08 de 20
Engadir novos elementos da lista
Para engadir novos elementos ao seu menú, prema no botón "Listar valores ...". Isto abrirá a xanela de arriba. Escribe a etiqueta do teu elemento na primeira caixa. Isto é o que se mostrará na páxina. Se deixa o valor en branco, tamén será o que se enviará no formulario.
09 de 20
Engadir máis e reordenar
Fai clic no ícono máis para engadir máis elementos. Se quere volver ordenalos na caixa de lista, use as frechas cara arriba e cara abaixo á dereita.
10 de 20
Dea todos os elementos
Como dixen no paso 8, se deixa o valor en branco, a etiqueta enviarase ao formulario. Pero podes dar todos os valores dos teus elementos: enviar información alternativa ao teu formulario. Vai usar isto moito para cousas como salto de menús.
11 de 20
Escolla un valor por defecto
As páxinas web son predeterminadas para mostrar o elemento desplegable que aparece primeiro como elemento predeterminado. Pero se desexa un outro seleccionado, resálteo no cadro "Inicialmente seleccionado" no menú Propiedades.
12 de 20
Vexa a súa lista na vista de deseño
Unha vez que termine de editar as propiedades, Dreamweaver mostrará a súa lista despregábel co valor predeterminado seleccionado.
13 de 20
Vexa a súa lista na vista de código
Se cambias á vista de código, podes ver que o Dreamweaver engade o menú despregable cun código moi limpo. Os únicos atributos extra son os que engadimos con opcións de accesibilidade. O código é todo indentado e moi fácil de ler e comprender. Incluso coloca o atributo "seleccionado" seleccionado porque dixen a Dreamweaver que defecto escribir XHTML.
14 de 20
Gardar e ver no navegador
Se garda o documento e veo nun navegador web, pode ver que o menú despregábel se parece ao que esperaría.
15 de 20
Pero non fai nada
O menú que creamos anteriormente vese ben, pero non fai nada. Para lograr que faga algo, necesitas configurar unha acción de formulario no formulario en si, que é un tutorial completamente diferente.
Afortunadamente, Dreamweaver ten un menú de menú desplegable incorporado que pode usar de inmediato no seu sitio sen ter que aprender sobre os formularios, CGIs ou scripting. Chámase Menú de salto.
O menú Saltar Dreamweaver configura un menú despregable con nomes e URL. Logo podes escoller un elemento no menú e a páxina web moverase a esa situación, así como se fixes clic nunha ligazón.
Vaia ao menú Inserir e escolla Formulario e, a continuación, Menú de salto.
16 de 20
Ir á ventá do menú
A diferenza do menú desplegable estándar, o menú Saltar abre unha nova fiestra para que nomea os seus elementos de menú e engada detalles sobre como debería funcionar o formulario.
Para o primeiro elemento, cambie o texto "sen título1" ao que quere que lea e engada un URL ao que debería dirixirse esa ligazón.
17 de 20
Engade elementos ao teu menú Saltar
Fai clic no elemento de engadir para engadir un novo elemento ao menú de salto. Engade tantos elementos como queiras.
18 de 20
Opcións de menú de salto
Unha vez que engadiches todas as ligazóns que queiras, debes escoller as túas opcións:
Abrir URL en
Se ten un conxunto de marcos, pode abrir as ligazóns nun marco diferente. Ou pode cambiar a opción de fiestra principal a un destino especial para que a URL se abra no novo nunha fiestra ou noutro lugar.
Nome do menú
Dea ao teu menú un ID único para a páxina. Isto é necesario para que o script funcione correctamente. Tamén permite que teña varios menús de salto nun só formulario - simplemente dálles todos os nomes diferentes.
Inserir botón Ir despois do menú
Gústame seleccionar isto porque ás veces o script non funciona cando cambia o menú. Tamén é máis accesible.
Seleccione o primeiro elemento despois do cambio de URL
Seleccione isto se ten un aviso como "Seleccionar un" como o primeiro elemento do menú. Isto asegurará que ese elemento permaneza por defecto na páxina.
19 de 20
Vista de deseño de menú de salto
Do mesmo xeito que co seu primeiro menú, Dreamweaver configura o seu menú saltar na vista de deseño co elemento predeterminado visible. Podes editar o menú despregábel coma calquera outro.
Se o edifica, asegúrate de non cambiar ningunha ID nos elementos, se non, o script pode non funcionar.
20 de 20
Menú de salto no navegador
Gardando o ficheiro e pulsando F12 mostrará a páxina no seu navegador preferido. Aquí pode seleccionar unha opción, prema en "Ir" e funciona o menú de salto.