All Articles Dreamweaver
Dreamweaver CS5: Der Aufbau einer Navigations-Menü aus einer Liste
Iain Anderson on Sat, January 7th | 0 comments
When it comes down to it a Nav Menu is basically a list. Iain Anderson takes us through the basics of building one such menu from a list in Dreamweaver CS5.

Beim Bau eines Best-Practice-Website, sollten Sie beim Aufbau Ihrer Navigations-Menüs mit Listen, wenn möglich. Theyre semantisch korrekt (ein Menü ist eine Liste, nachdem alle) und CSS macht sie leicht zu stylen. Werfen wir einen Blick darauf, wie ein Navigationssystem Liste arbeitet unter der Haube. Ill werden mit Dreamweaver in der Codeansicht, aber das Gefühl frei zu folgen zusammen mit einer geraden Text-Editor, wenn Sie es wünschen.

Schritt 1 - Erstellen Sie eine Liste

Dieser Teil ist einfach: Erstellen Sie eine neue HTML-Datei, keine Vorlage, und geben Sie einfach die Artikel in Ihrem Menü. Schließen Sie jedes Listenelement mit

Sie sollten am Ende mit etwas wie folgt aus: <ul>
  <li>Home</li>
  <li>Products</li>
  <li>Support</li>
  <li>Team</li>
  <li>Contact Us</li>
</ul>

Sie möchten jedoch sicherstellen, dass jedes Element Links zu etwas wird es wichtig, wie wir die CSS zu bauen. So fügen Sie Links zu den #-Zeichen, um so etwas zu erstellen:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Support</a></li>
  <li><a href="#">Team</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

Schritt 2 - Link zu einer externen CSS-Datei

In der CSS-Panel, drücken Sie die Neue CSS-Regel-Taste an der Unterseite der Platte (das Dokument mit dem Plus-Symbol). Erstellen Sie eine ID-Stil mit dem Namen navlist und wählen Sie einen New Style Sheet Datei zu erstellen. In dem nun angezeigten Dialogfenster einen Namen für die Datei style.css . Es ist immer am besten ein externes Stylesheet verwenden, auch wenn das Experimentieren.

Wir brauchen nicht zu irgend etwas mit dem Dialog, der nächste erscheint zu definieren, so drücken Sie einfach OK. Youll haben ein Stylesheet mit einem einfachen, leeren Style-Definition erstellt. Anzeigen, indem Sie auf style.css knapp über das Dokument, neben dem markierten Wörter Source Code.

Schritt 3 - Fügen Sie einige grundlegende CSS-Regeln

Wir müssen festlegen, dass die Liste der ID navlist hat, so dass wir es können Ziel. In der HTML, add id=navlist der

Jetzt können wir loslegen auf dem CSS. Youll wahrscheinlich wollen Hintergrund-Farbe, Breite, Ränder und Rahmen anzupassen, um zu beginnen, und youll wollen, wie Sie bauen die CSS-Selektoren zu denken. Wenn Sie #navlist li , youll Zugriff auf das Listenelement in der Navigationsleiste. Noch besser, Target #navlist li a zum Ziel, die Verweise innerhalb Ihrer Liste. Hinzufügen Polsterung, sie macht ein größeres Ziel wäre beim Hinzufügen Polsterung zu einem Listeneintrag nicht. Versuchen Sie:

# Navlist {

list-style-type: none;

margin: 0;

padding: 0;

width: 200px;

}

# Navlist li {

margin: 5px;

}

# Navlist li a {

background-color: # 222;

color: # eee;

padding: 10px;

text-decoration: none;

display: block;

}


Die

Die #navlist li

Schließlich ist die

Schritt 4 - Hinzufügen einiger hover CSS-Regeln

Um die Liste mehr reaktive, fügen Sie ein hover-Regel:

# Navlist li a: hover {

background-color: # 444;

color: # ee2;

}

Schritt 5 - Kennzeichnung der aktiven Seite

Seine häufig in dieser Art von Seiten, um die aktive Seite mit einem beweglichen Klasse Stil kennzeichnen, zum Beispiel class = aktiv, die auf der aktuellen Seite platziert wird. Dies bedeutet jedoch, dass das Menü Block auf jeder Seite unterschiedlich ist. Sein bequemer, jedes Glied in der HTML mit einer anderen Klasse-Tag, dann fügen Sie eine Seite-spezifische Klasse, um den Body-Tag, und sie fangen alle mit einem einzigen CSS-Regel. Etwa so:

<body id="bodypage1">

  <li class="page1"><a href="#">Home</a></li>

  <li class="page2"><a href="#">Products</a></li>

Die passenden CSS:

# Bodypage1. Seite1 a, # bodypage2. Page2 a, # bodypage3. Page3 a, # bodypage4. Page4 a, # bodypage5. Page5 a {

background-color: # 555;

color: # ee2;

}

Auf diese Weise müssen Sie nur die Klasse im body-Tag auf jeder Seite ändern. Sneaky, aber es funktioniert.

Es gibt viele, viele weitere Tricks, aber das ist alles für heute. Wie Sie in der Exploring CSS Video-Tutorial gesehen haben mag, um die Liste horizontal, ist alles was Sie brauchen display: inline angewendet auf die li -Element, so entdecken, dass, wenn Sie es wünschen. Das nächste Mal, auch bei einigen exotischen Optionen.

fertig-product.png

Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: