X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

Kostenlose Premium-Zugang

Rufen Sie unsere gesamte Bibliothek von Premium-Hub Artikel, Projekt-Dateien und die ersten 10% des jeweiligen Tutorial-Video aus dem Online-Tutorial-Bibliothek .

Erstellen Sie jetzt Ihren kostenlosen Zugang!

Dreamweaver CS5: Der Aufbau einer Navigations-Menü aus einer Liste
Übersetzt von Google Translate

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

Iain Anderson

Iain Anderson | Articles by this author

Iain Anderson is an editor, animator, designer, developer and Apple Certified Trainer based in Brisbane, Australia. He has taught privately and in tertiary institutions, and has freelanced for Microsoft and the Queensland Government. Comfortable with anything from Quartz Composer to Second Life and Final Cut Pro to Adobe Creative Suite, he has laid out books, booklets, brochures and business cards; retouched magazine covers and product packaging, shot and edited short films and animated for HD broadcast TV, film festivals and for the web.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link