Comment créer une barre de navigation à partir d'une liste non ordonnée de liens dans Dreamweaver

category Ordinateurs et logiciels / Graphiques et animations / Conception graphique

Voici un grand tour de CSS pour tourner une liste à puces dans une barre de navigation dans Dreamweaver avec un effet de survol simple. Utilisation d'une liste à puces pour les barres de navigation est une convention bien accepté pour les sites qui répondent aux normes d'accessibilité actuelles.

Comment créer une barre de navigation à partir d'une liste non ordonnée de liens dans Dreamweaver

Les mêmes liens sont encore contenus dans la liste non ordonnée, mais l'application des styles changent leur apparence spectaculaire.

Comment créer une barre de navigation à partir d'une liste non ordonnée de liens dans Dreamweaver

Pour créer une barre de navigation en utilisant le CSS à redéfinir la liste et associer des balises non ordonnées, suivez ces étapes:

  1. Cliquez pour placer votre curseur là où vous voulez créer votre barre de navigation dans la page.

  2. Entrez le texte que vous voulez servir les liens, en séparant chaque en appuyant sur la touche Entrée ou Retour pour créer un retour de paragraphe.

    Pour formater les liens comme une liste non ordonnée, séparer chaque ligne de texte que vous souhaitez créer un lien avec un

    tag.

  3. Créer des liens en sélectionnant chaque morceau de texte, à son tour, en cliquant sur l'icône de lien hypertexte dans le panneau Insertion commune, puis en sélectionnant la page que vous souhaitez créer un lien ou en entrant une URL.

  4. Faites glisser pour sélectionner l'ensemble des liens, puis cliquez sur l'icône Liste non ordonnée dans l'inspecteur des propriétés.

    Un point de puce apparaît au début de chaque lien. Si un lien ne semble pas partit avec une balle séparée, cliquez pour supprimer l'espace entre elle et le lien avant, puis appuyer sur Entrée pour séparer les liens avec un retour de paragraphe.

    image2.jpg

  5. Pour ajouter un

    tag autour d'une liste de liens (ou tout autre contenu qui est déjà sur une page), sélectionnez le contenu, puis cliquez sur l'icône Div dans le panneau Insertion commune.

    La boîte de dialogue Insérer Div ouvre.

    L'ajout d'un

    tag autour de la liste non ordonnée de liens est utile si vous voulez ajouter la mise en forme.

  6. Choisissez Wrap Around sélection dans la liste déroulante Insérer.

    Pour un contrôle plus précis sur l'endroit où vous ajoutez un nouveau

    tag, vous pouvez choisir des options de la liste déroulante Insérer dans le haut de la boîte de dialogue Insérer Div.

    image3.jpg

  7. Entrez un nom dans le champ de la classe ou le champ ID.

    UN

    étiquette avec le nom de la classe ou l'ID que vous avez entré est ajouté automatiquement à la page entourant la liste des liens.




  8. Au bas de la boîte de dialogue Insérer Div, cliquez sur le bouton Nouvelle règle de CSS.

    Le nouveau nom de la règle CSS est ajouté à la liste des noms de style dans le panneau des sélecteurs CSS Designer.

  9. Dans le panneau Propriétés, spécifiez vos paramètres souhaités pour la couleur, fond, la taille, les marges, et le rembourrage.

    Le formatage de style est automatiquement appliqué au contenu du

    tag parce que vous avez appliqué le style que vous avez créé dans les étapes 5-7.

  10. Pour créer un style de composé qui va formater la liste non ordonnée que si elle est utilisée dans la barre de navigation, créer un style de composé qui inclut le nom de la classe .navbar:

  1. Placez votre curseur dans la liste à puces.

  2. Cliquez sur le signe plus (+) en haut du panneau des sélecteurs.

  3. Dans le champ Nom du sélecteur, assurez-vous que Dreamweaver automatiquement inscrit .navbar ul comme le nom d'un nouveau style dans le panneau des sélecteurs.

  4. Dans le panneau Propriétés, définissez les marges et le remplissage à 0.

  • Créer un style composé de redéfinir les balises d'élément de liste:

    1. Placez votre curseur dans la liste à puces.

    2. Cliquez sur le signe plus en haut du panneau des sélecteurs.

    3. Dans le champ Nom du sélecteur, assurez-vous que Dreamweaver automatiquement inscrit .navbar ul li comme le nom d'un nouveau style dans le panneau des sélecteurs.

    4. Dans le panneau Propriétés, régler l'affichage à Inline.

    5. Modifier la liste Type de style pour Aucun pour supprimer la balle.

    6. Définissez les marges gauche et droite pour 20 pixels.

      Cette étape sépare les éléments de liste à partir de l'autre dans la liste horizontale. Vous pouvez modifier le réglage pour créer la quantité d'espace entre les liens qui correspond le mieux à votre conception.

    7. Créer un style de redéfinir la balise link:

      1. Cliquez pour placer votre curseur dans un lien dans la barre de navigation.

      2. Cliquez sur le signe plus en haut du panneau des sélecteurs.

      3. Si vous voulez changer le nom du style, double-cliquez sur le nom dans le panneau des sélecteurs et entrez le nom que vous souhaitez utiliser.

      4. Dans la section de texte du panneau Propriétés, définissez text-decoration à Aucun.

      5. Toujours dans la section de texte, choisissez une couleur dans le puits de couleur pour spécifier la couleur des liens quand ils sont chargés sur une page.

      6. Créer un nouveau style de redéfinir la balise hover-lien de sorte que la couleur du lien va changer quand un utilisateur lance un curseur sur le lien:

        1. Cliquez sur le signe plus en haut du panneau des sélecteurs.

        2. Dans le champ Nom du sélecteur, entrez .navbar a: hover.

        3. Dans la section de texte du panneau Propriétés, définissez text-decoration à Aucun.

        4. Toujours dans la section de texte, choisissez une couleur dans le puits de couleur pour spécifier la couleur du lien lorsque les utilisateurs lancent leur curseur sur le lien.

        5. Créer un nouveau style de redéfinir le lien tag visité de sorte que les changements de couleur lien après un utilisateur clique sur un lien:

          1. Cliquez sur le signe plus en haut du panneau des sélecteurs.

          2. Dans le champ Nom du sélecteur, entrez .navbar a: visited.

          3. Dans la section de texte du panneau Propriétés, définissez text-decoration à Aucun.

          4. Toujours dans la section de texte, choisissez une couleur dans le puits de couleur pour spécifier la couleur du lien après qu'il a été visité.

          5. Cliquez sur le bouton en direct en haut de l'espace de travail ou cliquez sur le bouton Aperçu pour afficher la page dans un navigateur pour voir l'effet des styles de lien.

            image4.jpg
            6. Articles Similaires

            A propos Auteur
            Comment centrer une mise en page avec des marges CSS dans Dreamweaver Comment centrer une mise en page avec des marges CSS dans Dreamweaver

            Dreamweaver vous permet de centrer votre mise en page en utilisant les marges CSS. Beaucoup de conceptions de pages Web sont centrées sur la page de sorte qu'ils semblent flotter entre les côtés de la fenêtre du navigateur, peu importe comment…

            Comment changer le style des liens avec les propriétés de page dans Dreamweaver Comment changer le style des liens avec les propriétés de page dans Dreamweaver

            Si vous êtes comme beaucoup de designers qui utilisent Dreamweaver, vous avez probablement ne l'aimez pas le soulignement qui apparaît automatiquement dans tout le texte lié dans une page Web. Il est vraiment facile de supprimer ce soulignement…

            Comment faire pour créer un nouveau style de balise dans Adobe Dreamweaver CS6 Comment faire pour créer un nouveau style de balise dans Adobe Dreamweaver CS6

            Création d'un tag de style (ou Type sélecteur) Dans Adobe Dreamweaver CS6 est une voie simple et sûr pour les nouveaux utilisateurs à comprendre CSS car il cible les balises HTML existants, tels que P, H1, H2 et.Utilisation de balises existantes…

            Comment créer des styles avec sélecteurs class et id dans dreamweaver Comment créer des styles avec sélecteurs class et id dans dreamweaver

            Les sélecteurs de classe et d'identité dans Dreamweaver présentent de nombreuses similitudes et une différence essentielle. Styles d'identité ne peuvent être utilisés une fois par page, mais les styles de classe peuvent être utilisés autant…

            Comment définir des styles avec le sélecteur de balises dans Dreamweaver Comment définir des styles avec le sélecteur de balises dans Dreamweaver

            Vous pouvez créer entièrement de nouveaux styles dans Dreamweaver en utilisant l'appel ou ID sélecteurs, mais vous pouvez également créer des styles qui changent la forme de balises HTML existants. Ces styles sont créés en utilisant la…

            Comment modifier un style dans Dreamweaver Comment modifier un style dans Dreamweaver

            Vous pouvez modifier les attributs d'un style dans Dreamweaver après sa création en modifiant sa définition de style. Ceci est où certains des plus grands avantages de Cascading Style Sheets entrent en jeu. Vous pouvez apporter des modifications…

            Comment modifier les styles dans une mise en page CSS dans Dreamweaver Comment modifier les styles dans une mise en page CSS dans Dreamweaver

            Après avoir créé une nouvelle page avec une mise en page CSS dans Dreamweaver, vous avez un nombre apparemment infini d'options pour l'édition, mais vous devez d'abord déterminer quels styles dans la feuille de style correspondent aux…

            Comment lier des pages de votre site Web dans Dreamweaver Comment lier des pages de votre site Web dans Dreamweaver

            Dreamweaver rend reliant d'une page à une autre page de votre site Web facile. Assurez-vous d'enregistrer vos pages dans le dossier de votre site local avant de commencer la mise en liens.Voici comment vous créez un lien d'une page dans un site à…

            Comment modifier (AP) divs absolus-positionné dans Adobe Dreamweaver CS6 Comment modifier (AP) divs absolus-positionné dans Adobe Dreamweaver CS6

            Chaque Absolute-Positionné (AP) Div vous dessinez dans Adobe Dreamweaver CS6 est listé automatiquement dans le panneau Eléments PA (choisissez Fenêtre-Eléments PA pour l'afficher). Le panneau Eléments PA peut vous aider à sélectionner,…

            Comment définir les attributs de texte dans Fireworks CS5 Comment définir les attributs de texte dans Fireworks CS5

            Le texte peut créer humeur et le sentiment, de sorte que vous devez vous assurer que votre message a le droit police et le style. Vous pouvez appliquer des attributs de texte en utilisant une des deux méthodes principales: le menu Type ou le…

            Création de lien interne dans Adobe CS5 Dreamweaver Création de lien interne dans Adobe CS5 Dreamweaver

            Adobe Creative Suite 5 (CS5 Adobe) Dreamweaver dispose de plusieurs installations pour vous aider à créer, modifier et placer des hyperliens internes dans vos pages web. Dreamweaver propose une boîte de dialogue de lien hypertexte, l'inspecteur…

            La création d'div relativement positionné dans Adobe CS5 Dreamweaver La création d'div relativement positionné dans Adobe CS5 Dreamweaver

            Adobe Creative Suite 5 (CS5 Adobe) Dreamweaver prend en charge la création et l'édition de DIV qui utilisent positionnement relatif. DIV relativement positionnés permettent un élément à être déplacé avec le contenu qui l'entoure, ce qui…

            Le formatage du texte en utilisant Adobe Dreamweaver CS5 inspecteur de propriétés Le formatage du texte en utilisant Adobe Dreamweaver CS5 inspecteur de propriétés

            Le (Adobe CS5) inspecteur propriétés de Dreamweaver d'Adobe Creative Suite 5 est utilisé pour appliquer des balises HTML et construire des classes CSS pour formater la couleur du texte, le visage, la taille, et d'autres caractéristiques.…

            Créer une nouvelle feuille de style dans le panneau styles CSS Créer une nouvelle feuille de style dans le panneau styles CSS

            Lorsque vous cliquez sur l'icône CSS Nouvelle règle (dans la marge) au bas du panneau Styles CSS, la boîte de dialogue Nouvelle règle CSS ouvre. La boîte de dialogue Nouvelle règle CSS combine les caractéristiques pour définir des styles…

            » » » » Comment créer une barre de navigation à partir d'une liste non ordonnée de liens dans Dreamweaver