Ce wikiHow vous apprend à utiliser Adobe Dreamweaver pour créer une liste déroulante pour une page Web. Les listes déroulantes sont des menus qui "se déroulent" lorsqu'un élément de votre page Web est cliqué, présentant plus d'options dans le processus.
Pas
Étape 1. Ouvrez un projet Dreamweaver
Double-cliquez sur le fichier du projet pour le faire. Si vous souhaitez créer un nouveau projet Dreamweaver, ouvrez plutôt Dreamweaver, cliquez sur Déposer, Cliquez sur Nouveau, et suivez les invites à l'écran.
Étape 2. Créez une liste ordonnée
Pour créer un menu déroulant, vous devez avoir au moins un élément à puce. Vous pouvez créer une puce en désactivant CSS (cliquez sur le Vue élément de menu, sélectionnez Rendu de style, et cliquez sur Styles d'affichage si elle est cochée), en cliquant sur l'emplacement où vous souhaitez ajouter le point, en cliquant sur l'icône représentant une puce en bas de la fenêtre et en saisissant le nom du point. Vous devez ensuite réactiver CSS avant de continuer.
- Le nom du point ici servira d'activateur de votre menu déroulant (par exemple, le bouton sur lequel on survole ou appuie pour ouvrir le menu déroulant).
- Ignorez cette étape si vous avez déjà un élément de liste que vous souhaitez convertir en menu déroulant.
Étape 3. Déterminez le nom de votre liste
Clique le Code onglet et assurez-vous que vous êtes sur le Code source réglage, puis faites défiler jusqu'au code de votre liste commandée (ce sera entre un"
"balise et un"
"tag) et recherchez la balise " " au-dessus du haut"
. Le mot entre guillemets est le nom de votre liste.
-
Si vous ne voyez pas de nom, insérez la balise (où nom fait référence à votre nom préféré de la liste) directement au-dessus du
étiqueter.
Étape 4. Supprimez la ou les puces
Assurez-vous que vous êtes au bon endroit en cliquant sur le Concevoir onglet, puis en cliquant sur le Concepteur CSS dans le coin supérieur droit de la fenêtre, puis procédez comme suit:
- Cliquez sur + à droite de la rubrique "Sélecteurs".
- Tapez #name ul où "name" est le nom de votre liste.
- Appuyez deux fois sur ↵ Entrée.
- Faites défiler vers le bas et cliquez type-style-liste dans le volet en bas de la Concepteur CSS languette.
- Cliquez sur rien dans le menu contextuel résultant.
Étape 5. Modifiez votre liste ordonnée pour l'afficher horizontalement
Faire cela:
- Cliquez sur + à droite de la rubrique "Sélecteurs".
- Tapez #name li où "name" est le nom de votre liste.
- Recherchez l'en-tête « flotteur » dans le volet en bas de la Concepteur CSS languette.
- Clique le La gauche bouton immédiatement à droite de l'en-tête « flotteur ».
Étape 6. Ajoutez une balise active pour votre liste
Clique le + à droite de "Sélecteurs", puis saisissez #nom a (où "nom" est le nom de votre liste) et appuyez deux fois sur ↵ Entrée.
Étape 7. Ajoutez une couleur d'arrière-plan
Sélectionnez le #nommer un élément si nécessaire, puis cliquez sur l'onglet "Couleur de fond" en forme de boîte en haut de la Concepteur CSS volet, sélectionnez le Couleur de l'arrière plan option, et sélectionnez une couleur d'arrière-plan à utiliser.
Il s'agit de la couleur que les éléments de votre liste déroulante utiliseront
Étape 8. Faites en sorte que vos éléments de liste utilisent le format "bloc"
Ce format garantit que lorsque quelqu'un clique ou tape sur un élément de la liste, il peut l'ouvrir en le sélectionnant légèrement au-dessus ou en dessous au lieu d'avoir à sélectionner précisément le texte:
- Assurez-vous que votre #nommer un l'élément est sélectionné dans le Concepteur CSS languette.
- Faites défiler jusqu'à l'en-tête « affichage » dans le volet.
- Cliquez à l'extrême droite de l'en-tête « affichage », puis cliquez sur bloquer dans le menu résultant.
Étape 9. Ajoutez du rembourrage si nécessaire
Si vous remarquez que les éléments de votre liste sont coincés les uns contre les autres, vous pouvez placer un espace entre eux en procédant comme suit:
- Assurez-vous que votre #nommer un l'élément est sélectionné dans le Concepteur CSS languette.
- Faites défiler jusqu'à l'en-tête « rembourrage » dans le volet.
- Modifiez les champs de texte "px" en haut et en bas pour en lire au moins 5.
- Modifiez les champs de texte "px" de gauche et de droite pour en lire au moins 10.
Étape 10. Créez une couleur de survol
Voici la couleur qui apparaîtra lorsque vous passerez le curseur de votre souris sur un élément du menu déroulant:
- Cliquez sur + à droite de la rubrique "Sélecteurs".
- Tapez #nave a:hover (où "nom" est le nom de votre liste) et appuyez deux fois sur ↵ Entrée.
- Cliquez sur l'onglet "Couleur d'arrière-plan".
- Sélectionner Couleur de l'arrière plan puis sélectionnez une couleur plus claire que celle que vous avez utilisée pour la couleur d'arrière-plan.
Étape 11. Désactivez CSS
Clique le Vue élément de menu, sélectionnez Rendu de style, et cliquez sur le Styles d'affichage option dans la fenêtre contextuelle.
Si la Styles d'affichage est grisée, cliquez n'importe où dans votre document Dreamweaver et réessayez.
Étape 12. Créez le contenu du menu déroulant
Vous pouvez le faire en ajoutant des sous-points sous la puce que vous souhaitez utiliser comme bouton du menu déroulant:
- Cliquez à droite de l'élément de liste que vous souhaitez transformer en menu déroulant, puis appuyez sur ↵ Entrée.
- Appuyez sur Tab ↹.
- Tapez le nom de votre premier élément de menu déroulant, puis appuyez sur ↵ Entrée.
- Tapez le nom du menu déroulant suivant, puis appuyez sur ↵ Entrée et répétez si nécessaire.
Étape 13. Liez le contenu du menu déroulant à un élément de puce
Faire cela:
- Cliquez sur + à côté de "Sélecteurs", puis tapez #name ul ul et appuyez deux fois sur ↵ Enter.
- Faites défiler vers le bas et cliquez affichage, puis clique rien dans le menu contextuel.
- Trouvez et cliquez position, puis clique absolu dans le menu contextuel.
Étape 14. Créez le menu déroulant lui-même
Vous devrez ajouter encore un autre sélecteur pour ce faire:
- Cliquez sur + à côté de "Sélecteurs", puis tapez #name ul li:hover > ul et appuyez deux fois sur ↵ Enter.
- Trouvez et cliquez affichage, puis clique bloquer dans le menu contextuel résultant.
Étape 15. Affichez le contenu du menu déroulant verticalement
Par défaut, le contenu du menu déroulant s'affichera dans une barre horizontale, mais vous pouvez le forcer dans une colonne verticale en procédant comme suit:
- Cliquez sur + à côté de "Sélecteurs", puis tapez #name ul ul li et appuyez deux fois sur ↵ Enter.
- Trouvez la rubrique « flotteur ».
- Cliquez sur "aucun" () à droite de l'en-tête « flotteur ».
Étape 16. Enregistrez votre projet
Appuyez sur Ctrl+S (Windows) ou ⌘ Commande+S (Mac) pour ce faire.
