Comment créer une barre de navigation dans Dreamweaver

Pour créer une barre de navigation Dreamweaver, suivez ces étapes : Créez un document HTML et insérez un conteneur de navigation DIV (class="nav-container"). Créez des listes non ordonnées et des éléments de liste dans un conteneur et ajoutez des éléments d'ancrage contenant des liens. Stylez les conteneurs, les listes et les liens de la barre de navigation dans les feuilles de style CSS.

Création d'une barre de navigation dans Dreamweaver

Étape 1 : Créer un nouveau document HTML

1. Dans Dreamweaver, sélectionnez "Fichier" > "Nouveau" > "HTML".
2. Entrez le nom de fichier souhaité dans la boîte de dialogue Nouveau document HTML et cliquez sur Créer.

Étape 2 : Insérer un conteneur de navigation

1. Placez le curseur à l'emplacement souhaité dans le code HTML.
2. Dans le menu Insertion, sélectionnez Général > DIV.
3. Dans la boîte de dialogue "Insérer DIV", entrez la classe CSS "nav-container" et cliquez sur "OK".

Étape 3 : Créer des liens de navigation

1. Dans la DIV "nav-container", insérez une liste non ordonnée (
   ).
   • Ajouter des éléments de liste (
   • ), chaque élément de liste correspond à un lien de navigation.
   • Dans chaque élément de la liste, insérez un élément d'ancrage () qui contient l'adresse du lien et le texte à afficher.

<code class="html"><div class="nav-container">
  <ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="about.html">关于我们</a></li>
    <li><a href="contact.html">联系我们</a></li>
  </ul>
</div></code>

Étape 4 : Stylisez la barre de navigation

1. Dans la feuille de style CSS, ajoutez des styles pour la classe "nav-container", y compris l'apparence générale de la barre de navigation (comme la couleur d'arrière-plan, la police et taille du texte).
2. Ajoutez des styles aux classes "nav-container ul" et "nav-container li" pour spécifier le style des liens de navigation.
3. Ajoutez des styles à la classe "nav-container a" et définissez les styles des liens de navigation, y compris l'état de survol et l'état actif.

Exemple de style CSS

<code class="css">.nav-container {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

.nav-container ul {
  list-style-type: none;
  display: flex;
  justify-content: space-around;
}

.nav-container li {
  padding: 0 20px;
}

.nav-container a {
  text-decoration: none;
  color: #fff;
  transition: color 0.2s ease-in-out;
}

.nav-container a:hover {
  color: #ccc;
}

.nav-container a.active {
  color: #000;
  background-color: #ccc;
}</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!