Ce qu'il faut savoir
- Aller à Insérer > Form > Form. Cliquez sur la ligne rouge pointillée sur le formulaire et accédez à Insert > Form > List/Menu. Choisissez les options d'accessibilité.
- Cliquez sur le menu et sélectionnez ses propriétés, puis sélectionnez Liste des valeurs pour ajouter de nouveaux éléments de menu. Cliquez sur le signe plus pour ajouter d'autres éléments.
- Ajoutez des valeurs d'élément et choisissez un élément par défaut. Pour ajouter des actions, allez Insert > Form > Jump Menu. Ajoutez des éléments au menu Jump et enregistrez.
Dreamweaver facilite la création de menus déroulants pour votre site Web. Mais comme tous les formulaires HTML, ils peuvent être un peu délicats. Ce didacticiel vous guidera à travers les étapes de création d'un menu déroulant dans Dreamweaver.
Menus de saut Dreamweaver
Dreamweaver 8 fournit également un assistant pour créer un menu de saut pour la navigation dans votre site Web. Contrairement aux menus déroulants de base, ce menu fera quelque chose lorsque vous aurez terminé. Vous n'aurez pas à écrire de JavaScript ou de CGI pour que votre formulaire déroulant fonctionne. Ce didacticiel explique également comment utiliser l'assistant Dreamweaver 8 pour créer un menu contextuel.
Premièrement, créez le formulaire
À l'exception des assistants spéciaux comme le menu contextuel, Dreamweaver ne vous aide pas à faire fonctionner les formulaires HTML. Pour cela, vous avez besoin d'un CGI ou JavaScript.
Lorsque vous ajoutez un menu déroulant à votre site Web, la première chose dont vous avez besoin est un formulaire pour l'entourer. Dans Dreamweaver, allez dans le menu Insertion et cliquez sur Formulaire, puis choisissez "Formulaire".
Le formulaire s'affiche en mode Création
Dreamweaver affiche visuellement l'emplacement de votre formulaire dans la vue de conception, afin que vous sachiez où placer vos éléments de formulaire car les balises de menu déroulant ne sont pas valides (et ne fonctionneront pas) en dehors de l'élément de formulaire. Comme vous pouvez le voir sur l'image, le formulaire est la ligne pointillée rouge dans la vue de conception.
Choisir Liste/Menu
Les menus déroulants sont appelés éléments de "liste" ou "menu" dans Dreamweaver. Donc, pour en ajouter un à votre formulaire, vous devez aller dans le menu Formulaire du menu Insertion et choisir "Liste/Menu". Assurez-vous que votre curseur se trouvait dans la ligne pointillée rouge de votre zone de formulaire.
Fenêtre Options spéciales
Dans les options de Dreamweaver, il y a un écran sur l'accessibilité. Vos menus déroulants seront immédiatement plus accessibles que d'autres sites Web si vous remplissez ces cinq options.
Accessibilité des formulaires
Les options d'accessibilité sont:
Étiquette
Le champ d'étiquette apparaît sous forme de texte à côté de votre élément de formulaire. Tapez un nom pour votre menu déroulant. Il peut s'agir d'une question ou d'une courte phrase à laquelle le menu déroulant répondra.
Style
HTML inclut une balise d'étiquette pour identifier vos étiquettes de formulaire dans le navigateur Web. Vos choix sont d'envelopper le menu déroulant et le texte de l'étiquette avec la balise, d'utiliser l'attribut "for" sur la balise de l'étiquette pour identifier la balise de formulaire à laquelle elle fait référence, ou de ne pas utiliser la balise de l'étiquette du tout.
Position
Vous pouvez placer votre étiquette avant ou après le menu déroulant.
Clé d'accès
Les visiteurs peuvent utiliser une touche d'accès avec les touches "Image" ou Option pour accéder directement à ce champ de formulaire. Ce raccourci clavier rend vos formulaires très faciles à utiliser sans souris. alt="
Index des onglets
L'index de tabulation est la façon dont les utilisateurs doivent accéder aux champs du formulaire lorsqu'ils utilisent le clavier pour parcourir la page Web.
Lorsque vous avez mis à jour vos options d'accessibilité, cliquez sur OK.
Sélectionner le menu
Une fois que votre menu déroulant s'affiche dans le mode Création de Dreamweaver, vous devez ajouter les différents éléments. Tout d'abord, sélectionnez le menu déroulant en cliquant dessus. Dreamweaver placera une autre ligne pointillée autour du menu déroulant pour indiquer que vous l'avez choisi.
Propriétés du menu
Le menu des propriétés passera aux propriétés de liste/menu pour ce menu déroulant. Là, vous pouvez donner à votre menu un ID (où il est écrit "sélectionner"), décider si vous voulez que ce soit une liste ou un menu, lui donner une classe de style à partir de votre feuille de style et attribuer des valeurs à la liste déroulante.
Quelle est la différence entre la liste et le menu ?
Dreamweaver appelle un menu déroulant tout menu déroulant qui n'autorise qu'une seule sélection. Une "liste" permet plusieurs choix dans la liste déroulante et peut contenir plusieurs éléments.
Si vous voulez qu'un menu déroulant comporte plusieurs lignes, changez-le en type "liste" et laissez la case "sélections" décochée.
Ajouter de nouveaux éléments de liste
Pour ajouter de nouveaux éléments à votre menu, cliquez sur le bouton "Liste des valeurs…", ce qui ouvre la fenêtre ci-dessus. Ensuite, tapez votre étiquette d'article dans la première case. Il s'affichera sur la page.
Ajouter plus et réorganiser
Cliquez sur l'icône plus pour ajouter d'autres éléments. Si vous souhaitez les réorganiser dans la zone de liste, utilisez les flèches haut et bas à droite.
Donnez des valeurs à tous les éléments
Si vous laissez la valeur vide, l'étiquette ira au formulaire. Mais vous pouvez donner des valeurs à tous vos éléments - pour envoyer des informations alternatives à votre formulaire. Vous l'utiliserez beaucoup pour des choses comme les menus de saut et les hyperliens.
Choisissez une valeur par défaut
Les pages Web affichent par défaut l'élément déroulant répertorié en premier comme élément par défaut. Mais si vous voulez en sélectionner un autre, mettez-le en surbrillance dans la case "Initialement sélectionné" du menu Propriétés.
Voir votre liste en mode Création
Une fois que vous avez terminé de modifier les propriétés, Dreamweaver affiche votre liste déroulante avec la valeur par défaut sélectionnée.
Voir votre liste en mode Code
Si vous passez en mode code, vous pouvez voir que Dreamweaver ajoute votre menu déroulant avec du code propre. Les seuls attributs supplémentaires sont les options d'accessibilité. Le code est entièrement en retrait et très facile à lire et à comprendre.
Enregistrer et afficher dans le navigateur
Si vous enregistrez le document et que vous l'affichez dans un navigateur Web, vous pouvez voir que votre menu déroulant ressemble à ce que vous attendez.
Mais ça ne fait rien…
Le menu que nous avons créé ci-dessus semble bien, mais il ne fait rien. Pour lui faire faire quelque chose, vous devez configurer une action de formulaire sur le formulaire lui-même.
Heureusement, Dreamweaver dispose d'un formulaire de menu déroulant intégré que vous pouvez utiliser immédiatement sur votre site sans avoir besoin de vous familiariser avec les formulaires, les CGI ou les scripts. C'est ce qu'on appelle un Jump Menu.
Le Jump Menu de Dreamweaver configure un menu déroulant avec des noms et des URL. Ensuite, vous pouvez choisir un élément dans le menu et la page Web se déplacera à cet emplacement, comme si vous aviez cliqué sur un lien.
Allez dans le menu Insertion et choisissez Formulaire puis Jump Menu.
Sauter la fenêtre du menu
Contrairement au menu déroulant standard, le menu Jump ouvre une nouvelle fenêtre vous permettant de nommer vos éléments de menu et d'ajouter des détails sur le fonctionnement du formulaire.
Pour le premier élément, remplacez le texte "un titled1" par ce que vous voulez qu'il lise et ajoutez une URL.
Ajouter des éléments à votre menu de démarrage
Cliquez sur l'élément d'ajout pour ajouter un nouvel élément à votre menu de saut. Ajoutez autant d'articles que vous le souhaitez.
Options de saut de menu
Une fois que vous avez ajouté tous les liens que vous souhaitez, vous devez choisir vos options:
Ouvrir les URL dans
Si vous avez un jeu de cadres, vous pouvez ouvrir les liens dans un cadre différent. Ou vous pouvez changer l'option de la fenêtre principale pour une cible spéciale afin que l'URL s'ouvre dans une nouvelle fenêtre ou ailleurs.
Nom du menu
Donnez à votre menu un identifiant unique pour la page. Il est nécessaire pour que le script fonctionne correctement. Il vous permet également d'avoir plusieurs menus de saut dans un seul formulaire - donnez-leur tous des noms différents.
Insérer le bouton Go après le menu
J'aime sélectionner ceci car parfois le script ne fonctionne pas lorsque le menu change. C'est aussi plus accessible.
Sélectionner le premier élément après le changement d'URL
Sélectionnez ceci si vous avez une invite telle que "Sélectionner un" comme premier élément de menu. Cela garantira que cet élément reste par défaut sur la page.
Jump Menu Design View
Comme pour votre premier menu, Dreamweaver configure votre menu contextuel en mode Création avec l'élément par défaut visible. Vous pouvez ensuite modifier le menu déroulant comme vous le feriez pour n'importe quel autre.
Si vous le modifiez, assurez-vous de ne pas modifier les identifiants des éléments; sinon, le script risque de ne pas fonctionner.
Sauter le menu dans le navigateur
En sauvegardant le fichier et en appuyant sur F12, la page s'affichera dans votre navigateur préféré. Là, vous pouvez sélectionner une option, cliquez sur "Aller", et le menu de saut fonctionne.
