Com crear un menú desplegable a Dreamweaver

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à pels passos per crear un menú desplegable a Dreamweaver.

Dreamweaver Jump Menus

Dreamweaver 8 també proporciona un assistent per crear un menú de salt per a la navegació al vostre lloc web. A diferència dels menús desplegables bàsics, aquest menú realment farà alguna cosa quan hàgiu acabat. No hauríeu d'escriure cap JavaScript ni CGIs per a que funcioni el vostre formulari desplegable. Aquest tutorial també explica com utilitzar l'assistent de Dreamweaver 8 per crear un menú de salt.

01 de 20

Primer creeu el formulari

Com crear un menú desplegable en Dreamweaver Primer Crea el formulari. Tret de pantalla de J Kyrnin

Nota important sobre formularis HTML i Dreamweaver:

A excepció d'assistents especials com el menú de salt, Dreamweaver no us ajuda a fer que els formularis HTML "funcionin". Per a això, necessiteu un CGI o JavaScript. Consulteu el meu tutorial Realitzar treballs en format HTML per obtenir més informació.

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 Forma i, a continuació, seleccioneu "Formulari".

02 de 20

Mostra el formulari en la vista de disseny

Com crear un menú desplegable en Dreamweaver mostra el formulari en la vista de disseny. Tret de pantalla de J Kyrnin

Dreamweaver mostra la ubicació del formulari visualment a la vista del disseny, de manera que sàpigues on posar els elements del formulari. Això és important, 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 de color vermell a la vista de disseny.

03 de 20

Seleccioneu Llista / menú

Com crear un menú desplegable a Dreamweaver Seleccioneu Llista / menú. Tret de pantalla de J Kyrnin

Els menús desplegables s'anomenen elements "llista" o "menú" a Dreamweaver. Per afegir un al vostre formulari, heu d'ingressar al menú Formulari al menú Insereix i seleccioneu "Llista / menú". Assegureu-vos que el cursor es troba dins de la línia de punts vermell del quadre de formulari.

04 de 20

Finestra d'opcions especials

Com crear un menú desplegable a la finestra d'opcions especials de Dreamweaver. Tret de pantalla de J Kyrnin

A les opcions de Dreamweaver hi ha una pantalla sobre Accessibilitat. Tinc l'oportunitat de tenir Dreamweaver per mostrar-me tots els atributs d'accessibilitat. I aquesta pantalla és el resultat d'això. Els formularis són un lloc on molts llocs web disminueixen l'accessibilitat i omplint aquestes cinc opcions, els menús desplegables seran més accessibles de manera immediata.

05 de 20

Accesibilitat al formulari

Com crear un menú desplegable a l'Accessibilitat del formulari Dreamweaver. Tret de pantalla de J Kyrnin

Les opcions d'accessibilitat són:

Etiqueta

Aquest és el nom del camp. Es mostrarà com a text al costat del vostre element de formulari.
Escriviu el que voleu trucar al vostre menú desplegable. Aquesta pot ser una pregunta o una frase breu que respondrà el menú desplegable.

Estil

HTML inclou una etiqueta per identificar les etiquetes de formulari al navegador. Les vostres opcions consisteixen a embolicar el menú desplegable i el text de l'etiqueta amb l'etiqueta, per utilitzar l'atribut "per" a l'etiqueta de l'etiqueta per identificar quina etiqueta del formulari fa referència, o no utilitzar l'etiqueta de l'etiqueta.
Prefereixo utilitzar l'atribut per a l'atribut, ja que si necessito moure l'etiqueta, per alguna raó, continuarà connectat al camp del formulari correcte.

Posició

Podeu col·locar la vostra etiqueta abans o després del menú desplegable.

Clau d'accés

Aquesta és la clau que es pot utilitzar juntament amb les tecles Alt o Option per obtenir directament aquest camp de formulari. Això fa que els vostres formularis siguin molt fàcils d'usar sense necessitat de ratolí. Com configurar una clau d'accés en HTML

Índex de pestanyes

Aquest és l'ordre en què s'ha d'accedir al camp del formulari quan s'utilitza el teclat per fer una pestanya a través de la pàgina web. Comprenent el Tabindex

Quan hàgiu actualitzat les vostres opcions d'accessibilitat, feu clic a Acceptar.

06 de 20

Seleccioneu el menú

Com crear un menú desplegable a Dreamweaver Seleccioneu el menú. Tret de pantalla de J Kyrnin

Un cop tingueu el menú desplegable que es mostra a la vista del disseny, heu d'afegir-hi diversos elements. Primer, seleccioneu el menú desplegable fent clic sobre ell. Dreamweaver posarà una altra línia de punts al voltant del menú desplegable, per mostrar que l'heu seleccionat.

07 de 20

Propietats del menú

Com crear un menú desplegable a Propietats del menú Dreamweaver. Tret de pantalla de J Kyrnin

El menú de propietats canviarà a les propietats del menú / llista d'aquest menú desplegable. Allà podeu donar-li un ID a un menú (on diu "seleccionar"), decidir si vol que sigui un lis o un menú, donar-li una classe d'estil al full d'estils i assignar valors al menú desplegable.

Quina és la diferència entre la llista i el menú?

Dreamweaver crida a un menú desplegable del menú qualsevol menú desplegable que només permeti una selecció. Una "llista" permet múltiples opcions al menú desplegable i pot tenir més d'un element alt.

Si voleu que un menú desplegable tingui diverses línies altes, canvieu-lo a un tipus de "llista" i deixeu la casella "seleccions" desmarcada.

08 de 20

Afegeix nous elements de la llista

Com crear un menú desplegable a Dreamweaver Afegir nous elements de la llista. Tret de pantalla de J Kyrnin

Per afegir elements nous al vostre menú, feu clic al botó "Valors de la llista ...". Això obrirà la finestra de dalt. Escriviu l'etiqueta de l'element al primer quadre. Això és el que es mostrarà a la pàgina. Si deixeu el valor en blanc, això també serà el que s'enviarà al formulari.

09 de 20

Afegiu més i torneu a ordenar

Com crear un menú desplegable a Dreamweaver Afegir més i reordenar. Tret de pantalla de J Kyrnin

Feu clic a la icona de més per afegir més elements. Si voleu tornar a ordenar-los al quadre de llista, utilitzeu les fletxes amunt i avall de la dreta.

10 de 20

Doneu tots els valors dels elements

Com crear un menú desplegable en Dreamweaver Doneu tots els valors dels elements. Tret de pantalla de J Kyrnin

Com he esmentat al pas 8, si deixeu el valor en blanc, l'etiqueta s'enviarà al formulari. Però podeu donar-vos tots els valors dels vostres articles: per enviar informació alternativa al vostre formulari. Usareu molt això per a coses com els menús de salt.

11 de 20

Trieu un valor per defecte

Com crear un menú desplegable a Dreamweaver Trieu un valor predeterminat. Tret de pantalla de J Kyrnin

Les pàgines web són predeterminades per mostrar qualsevol element desplegable que apareix primer com a element predeterminat. Però si voleu un altre seleccionat, ressalteu-lo al quadre "Inicialment seleccionat" al menú Propietats.

12 de 20

Consulteu la vostra llista a la vista de disseny

Com crear un menú desplegable en Dreamweaver Vegeu la vostra llista en Vista de disseny. Tret de pantalla de J Kyrnin

Un cop hagueu acabat d'editar les propietats, Dreamweaver mostrarà la llista desplegable amb el valor predeterminat seleccionat.

13 de 20

Consulteu la vostra llista a la vista de codi

Com crear un menú desplegable en Dreamweaver Vegeu la vostra llista en la vista de codi. Tret de pantalla de J Kyrnin

Si canvieu a la visualització de codi, podeu veure que Dreamweaver afegeix el menú desplegable amb un codi molt net. Els únics atributs addicionals són els que hem afegit amb opcions d'accessibilitat. El codi està indentat i molt fàcil de llegir i comprendre. Fins i tot posa l'atribut "seleccionat" seleccionat perquè he dit a Dreamweaver que he escrit per defecte per escriure XHTML.

14 de 20

Desa i visualitza al navegador

Com crear un menú desplegable en Dreamweaver Desa i visualitza el navegador. Tret de pantalla de J Kyrnin

Si deseu el document i el visualitzeu en un navegador web, podeu veure que el menú desplegable es veu tal com s'espera.

15 de 20

Però no fa res

Com crear un menú desplegable a Dreamweaver però no fa res. Tret de pantalla de J Kyrnin

El menú que vam crear anteriorment es veu bé, però no fa res. Per fer-ho, necessiteu configurar una acció de formulari al formulari en si mateix, que és un tutorial completament diferent.

Afortunadament, Dreamweaver té un menú desplegable integrat que es pot utilitzar immediatament al vostre lloc sense haver d'aprendre sobre formularis, CGIs o scripting. Es diu un menú salt.

El menú Saltar Dreamweaver estableix un menú desplegable amb noms i URL. A continuació, podeu triar un element al menú i la pàgina web es traslladarà a aquesta ubicació, igual que si hagués fet clic a un enllaç.

Aneu al menú Insereix i seleccioneu Forma i, a continuació, Saltar menú.

16 de 20

Saltar finestra del menú

Com crear un menú desplegable a la finestra de menú Salt de Dreamweaver. Tret de pantalla de J Kyrnin

A diferència del menú desplegable estàndard, el menú Salt s'obre una nova finestra per tal que assenyali els elements del menú i afegiu detalls sobre com hauria de funcionar el formulari.

Per al primer element, canvieu el text "sense títol 1" al que voleu que llegeixi i afegiu un URL al qual hagi d'enllaçar.

17 de 20

Afegiu elements al menú Saltar

Com crear un menú desplegable en Dreamweaver Afegiu elements al menú Saltar. Tret de pantalla de J Kyrnin

Feu clic a l'element afegir per afegir un element nou al menú de salt. Afegiu tants elements com vulgueu.

18 de 20

Saltar opcions del menú

Com crear un menú desplegable a les opcions de menú de salt de Dreamweaver. Tret de pantalla de J Kyrnin

Un cop hàgiu afegit tots els enllaços que vulgueu, heu de triar les vostres opcions:

Obre URL 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 nova finestra o en un altre lloc.

Nom del menú

Doneu al vostre menú un identificador únic per a la pàgina. Això es requereix perquè el script funcioni correctament. També us permet tenir diversos menús de salt d'una forma: simplement doneu-los noms diferents.

Insereix el botó Go després del menú

M'agrada seleccionar això, perquè de vegades el script 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 indicador com "Seleccioneu-ne un" com a primer element del menú. Això assegurarà que aquest element es mantingui predeterminat a la pàgina.

19 de 20

Saltar menú Vista del disseny

Com crear un menú desplegable a la vista del disseny de menú salt de Dreamweaver. Tret de pantalla de J Kyrnin

Igual que amb el primer menú, Dreamweaver configura el menú de salt en la visualització de disseny amb l'element predeterminat visible. A continuació, podeu editar el menú desplegable com qualsevol altra.

Si ho modifiqueu, assegureu-vos de no canviar cap ID en els elements, en cas contrari, la seqüència de comandaments no funcionarà.

20 de 20

Saltar menú al navegador

Com crear un menú desplegable al menú Jump de Dreamweaver al navegador. Tret de pantalla de J Kyrnin

En desar el fitxer i fer clic a F12, es mostrarà la pàgina al vostre navegador preferit. Aquí podeu seleccionar una opció, feu clic a "Anar" i el menú de salts funciona.