Què cal saber
- Vés a Insereix > Formulari > Formulari. Feu clic a la línia vermella de punts del formulari i aneu a Insereix > Formulari > Llista/Menú. Tria les opcions d'accessibilitat.
- Feu clic al menú i seleccioneu-ne les propietats i, a continuació, seleccioneu Valors de la llista per afegir nous elements del menú. Feu clic al signe més per afegir més articles.
- Afegiu valors d'element i trieu un element predeterminat. Per afegir accions, aneu a Insereix > Formulari > S altar al menú. Afegeix elements al menú Jump i desa.
Dreamweaver facilita la creació de menús desplegables per al vostre lloc web. Però com tots els formularis HTML, poden ser una mica complicats. Aquest tutorial us guiarà a través dels passos per crear un menú desplegable a Dreamweaver.
Menús de s alt de Dreamweaver
Dreamweaver 8 també ofereix un assistent per crear un menú de s alt per navegar pel vostre lloc web. A diferència dels menús desplegables bàsics, aquest menú farà alguna cosa quan hàgiu acabat. No haureu d'escriure cap JavaScript o CGI per fer que el vostre formulari desplegable funcioni. Aquest tutorial també explica com utilitzar l'assistent de Dreamweaver 8 per crear un menú de s alt.
Primer, crea el formulari
Excepte els assistents especials com el menú de s alt, Dreamweaver no us ajuda a fer que els formularis HTML "funcionin". Per a això, necessiteu un CGI o JavaScript.
Quan afegiu un menú desplegable al vostre lloc web, el primer que necessiteu és un formulari per envoltar-lo. A Dreamweaver, aneu al menú Insereix i feu clic a Formulari i, a continuació, trieu "Formulari".
Mostrar el formulari a la vista Disseny
Dreamweaver mostra visualment la ubicació del vostre formulari a la vista de disseny, de manera que ja sabeu on posar els elements del formulari perquè les etiquetes del menú desplegable no són vàlides (i no funcionaran) fora de l'element del formulari. Com podeu veure a la imatge, el formulari és la línia de punts vermella a la vista de disseny.
Tria llista/menú
Els menús desplegables s'anomenen elements de "llista" o "menú" a Dreamweaver. Per tant, per afegir-ne un al vostre formulari, heu d'anar al menú Formulari al menú Insereix i triar "Llista/Menú". Assegureu-vos que el cursor es trobava dins de la línia de punts vermella del quadre de formulari.
Finestra d'opcions especials
A les Opcions de Dreamweaver, hi ha una pantalla d'accessibilitat. Els vostres menús desplegables seran immediatament més accessibles que altres llocs web si empleneu aquestes cinc opcions.
Accessibilitat del formulari
Les opcions d'accessibilitat són:
Etiqueta
El camp de l'etiqueta es mostra com a text al costat del vostre element de formulari. Escriviu un nom per al vostre menú desplegable. Pot ser una pregunta o una frase breu que el menú desplegable respondrà.
Estil
HTML inclou una etiqueta d'etiqueta per identificar les etiquetes del formulari al navegador web. Les vostres opcions són embolicar el menú desplegable i el text de l'etiqueta amb l'etiqueta, utilitzar l'atribut "per" a l'etiqueta de l'etiqueta per identificar a quina etiqueta de formulari fa referència o no utilitzar l'etiqueta en absolut.
Posició
Podeu col·locar la vostra etiqueta abans o després del menú desplegable.
Clau d'accés
Els visitants poden utilitzar una clau d'accés amb les tecles "Imatge" o Opcióper accedir directament al camp del formulari. Aquesta drecera de teclat fa que els vostres formularis siguin molt fàcils d'utilitzar sense ratolí. alt="
Índex de pestanyes
L'índex de pestanyes és com els usuaris han d'accedir als camps del formulari quan utilitzen el teclat per fer tabulació a través de la pàgina web.
Quan hàgiu actualitzat les opcions d'accessibilitat, feu clic a D'acord.
Seleccioneu el menú
Un cop tingueu el menú desplegable a la vista de disseny de Dreamweaver, heu d'afegir els diferents elements. Primer, seleccioneu el menú desplegable fent-hi clic. Dreamweaver posarà una altra línia de punts al voltant del menú desplegable per mostrar que l'heu escollit.
Propietats del menú
El menú de propietats canviarà a les propietats de la llista/menú d'aquest menú desplegable. Allà podeu donar un identificador al vostre menú (on diu "seleccionar"), decidir si voleu que sigui una llista o un menú, donar-li una classe d'estil del vostre full d'estil i assignar valors al menú desplegable.
Quina diferència hi ha entre la llista i el menú?
Dreamweaver anomena un menú desplegable a qualsevol menú desplegable que només permet una selecció. Una "llista" permet diverses opcions al menú desplegable i pot tenir més d'un element alt.
Si voleu que un menú desplegable tingui diverses línies, canvieu-lo a un tipus de "llista" i deixeu la casella "seleccions" sense marcar.
Afegeix nous elements a la llista
Per afegir nous elements al menú, feu clic al botó "Llista de valors…", que obre la finestra anterior. A continuació, escriviu l'etiqueta de l'article al primer quadre. Es mostrarà a la pàgina.
Afegeix-ne més i reordena
Feu clic a la icona del signe més per afegir més articles. Si els voleu tornar a ordenar al quadre de llista, utilitzeu les fletxes amunt i avall de la dreta.
Doneu valors a tots els articles
Si deixeu el valor en blanc, l'etiqueta anirà al formulari. Però podeu donar valors a tots els vostres articles, per enviar informació alternativa al vostre formulari. Ho fareu servir molt per coses com ara menús de s alt i hiperenllaços.
Tria un valor predeterminat
Les pàgines web mostren de manera predeterminada l'element desplegable que apareix primer com a element predeterminat. Però si en voleu seleccionar-ne un de diferent, ress alteu-lo al quadre "Seleccionat inicialment" del menú Propietats.
Vegeu la vostra llista a la vista Disseny
Un cop hàgiu acabat d'editar les propietats, Dreamweaver mostrarà la vostra llista desplegable amb el valor predeterminat seleccionat.
Vegeu la vostra llista a la vista de codi
Si canvieu a la vista de codi, podreu veure que Dreamweaver afegeix el vostre menú desplegable amb codi net. Els únics atributs addicionals són les opcions d'accessibilitat. El codi està tot sagnat i és molt fàcil de llegir i entendre.
Desa i visualitza al navegador
Si deseu el document i el visualitzeu en un navegador web, podreu veure que el vostre menú desplegable té l'aspecte que espereu.
Però no fa res…
El menú que hem creat anteriorment sembla bé, però no fa res. Perquè faci alguna cosa, has de configurar una acció de formulari al mateix formulari.
Afortunadament, Dreamweaver té un formulari de menú desplegable integrat que podeu utilitzar immediatament al vostre lloc sense necessitat d'aprendre sobre formularis, CGI o scripts. S'anomena menú de s alt.
El menú de s alt de Dreamweaver configura un menú desplegable amb noms i URL. A continuació, podeu triar un element al menú i la pàgina web es mourà a aquesta ubicació, com si haguéssiu fet clic a un enllaç.
Vés al menú Insereix i tria Formulari i, a continuació, Jump Menu.
S altar la finestra del menú
A diferència del menú desplegable estàndard, el menú Jump obre una finestra nova perquè pugueu posar un nom als elements del menú i afegir detalls sobre com hauria de funcionar el formulari.
Per al primer element, canvieu el text "sense títol1" pel que voleu que llegeixi i afegiu un URL.
Afegiu elements al vostre menú de s alt
Fes clic a l'element afegir per afegir un element nou al menú de s alt. Afegeix tants articles com vulguis.
Opcions de s alt del menú
Un cop hàgiu afegit tots els enllaços que vulgueu, haureu de triar les vostres opcions:
URL oberts a
Si teniu un conjunt de marcs, podeu obrir els enllaços en un marc diferent. O podeu canviar l'opció de la finestra principal a un objectiu especial perquè l'URL s'obri en una finestra nova o en un altre lloc.
Nom del menú
Doneu al vostre menú un identificador únic per a la pàgina. És necessari perquè l'script funcioni correctament. També us permet tenir diversos menús de s alt en un sol formulari: doneu-los noms diferents.
Insereix el botó Anar després del menú
M'agrada seleccionar això perquè de vegades el guió no funciona quan canvia el menú. També és més accessible.
Seleccioneu el primer element després del canvi d'URL
Seleccioneu-ho si teniu un missatge com ara "Seleccioneu-ne un" com a primer element del menú. Això garantirà que l'element es mantingui per defecte a la pàgina.
Vista de disseny del menú de s alt
Igual que amb el vostre primer menú, Dreamweaver configura el vostre menú de s alt a la vista de disseny amb l'element predeterminat visible. A continuació, podeu editar el menú desplegable com ho faríeu amb qualsevol altre.
Si l'editeu, assegureu-vos de no canviar cap identificador dels elements; en cas contrari, és possible que l'script no funcioni.
S altar al menú al navegador
Si deseu el fitxer i premeu F12, es mostrarà la pàgina al vostre navegador preferit. Allà podeu seleccionar una opció, fer clic a "Vés" i el menú de s alt funcionarà.
