So erstellen Sie eine Navigationsleiste in Dreamweaver

Um eine Dreamweaver-Navigationsleiste zu erstellen, befolgen Sie diese Schritte: Erstellen Sie ein HTML-Dokument und fügen Sie einen Navigationscontainer DIV (class="nav-container") ein. Erstellen Sie ungeordnete Listen und Listenelemente in einem Container und fügen Sie Ankerelemente mit Links hinzu. Gestalten Sie Navigationsleistencontainer, Listen und Links in CSS-Stylesheets.

Erstellen einer Navigationsleiste in Dreamweaver

Schritt 1: Erstellen Sie ein neues HTML-Dokument

1. Wählen Sie in Dreamweaver „Datei“ > „Neu“ > „HTML“.
2. Geben Sie im Dialogfeld „Neues HTML-Dokument“ den gewünschten Dateinamen ein und klicken Sie auf „Erstellen“.

Schritt 2: Navigationscontainer einfügen

1. Platzieren Sie den Cursor an der gewünschten Stelle im HTML-Code.
2. Wählen Sie im Menü „Einfügen“ die Option „Allgemein“ > „DIV“.
3. Geben Sie im Dialogfeld „DIV einfügen“ die CSS-Klasse „nav-container“ ein und klicken Sie auf „OK“.

Schritt 3: Navigationslinks erstellen

1. Fügen Sie im DIV „nav-container“ eine ungeordnete Liste (
   ) ein.
   • Listenelemente hinzufügen (
   • ), jedes Listenelement entspricht einem Navigationslink.
   • Fügen Sie in jedem Listenelement ein Ankerelement () ein, das die Linkadresse und den Anzeigetext enthält.

<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>

Schritt 4: Gestalten Sie die Navigationsleiste

1. Fügen Sie im CSS-Stylesheet Stile für die Klasse „nav-container“ hinzu, einschließlich des Gesamterscheinungsbilds der Navigationsleiste (z. B. Hintergrundfarbe, Schriftart usw.). Textgröße).
2. Fügen Sie Stile zu den Klassen „nav-container ul“ und „nav-container li“ hinzu, um den Stil von Navigationslinks festzulegen.
3. Fügen Sie Stile zur Klasse „nav-container a“ hinzu und legen Sie die Stile der Navigationslinks fest, einschließlich Hover-Status und Aktivstatus.

Beispiel-CSS-Stil

.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;
}

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Navigationsleiste in Dreamweaver. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!