Erstellen einer Navigationsleiste aus einer ungeordneten Liste von Links in Dreamweaver - Dummies

Hier ist ein großartiger CSS-Trick, um eine Aufzählungsliste in Dreamweaver mit einem einfachen Rollover-Effekt in eine Navigationsleiste umzuwandeln. Die Verwendung einer Aufzählungsliste für Navigationsleisten ist eine allgemein akzeptierte Konvention für Websites, die die aktuellen Zugänglichkeitsstandards erfüllen.

Credit: Fotos von istockphoto. com

Die gleichen Links sind immer noch in der ungeordneten Liste enthalten, aber die Anwendung der Stile ändert ihr Aussehen drastisch.

Credit: Fotos von istockphoto. com

Gehen Sie folgendermaßen vor, um eine Navigationsleiste mit CSS zu erstellen, um die ungeordneten Listen- und Link-Tags neu zu definieren:

1. Klicken Sie, um den Cursor an die Stelle zu setzen, an der Sie Ihre Navigationsleiste erstellen möchten.

2. Geben Sie den Text ein, der als Link dienen soll, indem Sie die Eingabetaste drücken, um eine Absatzrückgabe zu erstellen.

   Um die Links als ungeordnete Liste zu formatieren, trennen Sie jede Textzeile, die Sie mit einem

   -Tag verknüpfen möchten.

3. Erstellen Sie Verknüpfungen, indem Sie nacheinander jedes Textstück auswählen, auf das Hyperlinksymbol im Fenster "Gemeinsame Einfügung" klicken und dann die Seite auswählen, mit der Sie eine Verknüpfung herstellen möchten, oder eine URL eingeben.

4. Ziehen Sie mit der Maus, um die gesamte Gruppe von Links auszuwählen, und klicken Sie dann im Eigenschafteninspektor auf das Symbol für die ungeordnete Liste.

   Zu ​​Beginn jedes Links erscheint ein Aufzählungspunkt. Wenn ein Link nicht mit einem separaten Aufzählungszeichen versehen ist, klicken Sie, um den Abstand zwischen ihm und dem Link davor zu löschen, und drücken Sie dann die Eingabetaste, um die Links durch einen Absatzrücksprung zu trennen.

   

5. Um ein Tag um eine Liste mit Links (oder anderen Inhalten, die sich bereits auf einer Seite befinden) hinzuzufügen, wählen Sie den Inhalt aus und klicken Sie dann auf das Div-Symbol im Bereich "Gemeinsames Einfügen".

   Das Dialogfeld "Div einfügen" wird geöffnet.

   Das Hinzufügen eines Tags um die ungeordnete Liste von Links ist hilfreich, wenn Sie Formatierungen hinzufügen möchten.

6. Wählen Sie Wrap-Around-Auswahl aus der Dropdown-Liste Einfügen.

   Für eine genauere Kontrolle darüber, wo Sie ein neues Tag hinzufügen, können Sie Optionen aus der Dropdown-Liste Einfügen oben im Dialogfeld Div einfügen auswählen.

   

7. Geben Sie einen Namen in das Feld Klasse oder in das Feld ID ein.

   Ein Tag mit dem eingegebenen Klassen- oder ID-Namen wird automatisch der Seite hinzugefügt, die die Liste der Links umgibt.

8. Klicken Sie unten im Dialogfeld Div. Einfügen auf die Schaltfläche Neue CSS-Regel.

   Der neue CSS-Regelname wird der Liste der Stilnamen im CSS Designer-Auswahlfenster hinzugefügt.

9. Geben Sie im Eigenschaftenbedienfeld die gewünschten Einstellungen für Farbe, Hintergrund, Größe, Ränder und Füllung an.

   Die Stilformatierung wird automatisch auf den Inhalt des Tags angewendet, da Sie den Stil wie in den Schritten 5-7 erstellt haben.

10. Um einen zusammengesetzten Stil zu erstellen, der die ungeordnete Liste nur formatiert, wenn er in der Navigationsleiste verwendet wird, erstellen Sie einen zusammengesetzten Stil, der den Klassennamen enthält. Navigationsleiste:

    1. Platzieren Sie den Cursor an einer beliebigen Stelle in der Liste mit Aufzählungszeichen.

    2. Klicken Sie oben im Selektorbedienfeld auf das Pluszeichen (+).

    3. Stellen Sie sicher, dass Dreamweaver im Feld Selektorname automatisch eingegeben wurde. navbar ul als Name eines neuen Stils im Auswahlfenster.

    4. Legen Sie im Fenster Eigenschaften die Ränder und die Auffüllung auf 0 fest.

11. Erstellen Sie einen zusammengesetzten Stil, um die Tags des Listenelements neu zu definieren:

    1. Setzen Sie den Cursor an eine beliebige Stelle in der Aufzählungsliste.

    2. Klicken Sie oben im Selektorbedienfeld auf das Pluszeichen.

    3. Stellen Sie sicher, dass Dreamweaver im Feld Selektorname automatisch eingegeben wurde. navbar ul li als Name eines neuen Stils im Selektorenfenster.

    4. Setzen Sie im Fenster Eigenschaften die Anzeige auf Inline.

    5. Ändern Sie den Listenstiltyp in "Keine", um das Aufzählungszeichen zu entfernen.

    6. Stellen Sie den linken und rechten Rand auf 20 Pixel ein.

       Dieser Schritt trennt die Listenelemente in der horizontalen Liste voneinander. Sie können die Einstellung ändern, um den Abstand zwischen den Links zu schaffen, der am besten zu Ihrem Design passt.

12. Erstellen Sie einen Stil, um das Link-Tag neu zu definieren:

    1. Klicken Sie auf, um den Cursor innerhalb eines Links in der Navigationsleiste zu platzieren.

    2. Klicken Sie oben im Selektorbedienfeld auf das Pluszeichen.

    3. Wenn Sie den Stilnamen ändern möchten, doppelklicken Sie im Fenster "Selektoren" auf den Namen und geben Sie den Namen ein, den Sie verwenden möchten.

    4. Setzen Sie im Bereich "Text" des Eigenschaftenbedienfelds "Textdekoration" auf "Keine".

    5. Wählen Sie im Abschnitt "Text" noch immer eine Farbe aus dem Farbraum aus, um die Farbe der Links anzugeben, wenn diese auf eine Seite geladen werden.

13. Erstellen Sie einen neuen Stil, um das Hover-Link-Tag neu zu definieren, damit sich die Linkfarbe ändert, wenn ein Benutzer einen Mauszeiger über den Link bewegt:

    1. Klicken Sie oben im Selektorbedienfeld auf das Pluszeichen.

    2. Geben Sie im Feld Selektor Name ein. navbar a: schweben.

    3. Setzen Sie im Bereich "Text" des Eigenschaftenbedienfelds "Textdekoration" auf "Keine".

    4. Wählen Sie im Abschnitt "Text" noch immer eine Farbe aus dem Farbfeld aus, um die Farbe der Verknüpfung anzugeben, wenn Benutzer den Mauszeiger über die Verknüpfung bewegen.

14. Erstellen Sie einen neuen Stil, um das besuchte Link-Tag neu zu definieren, damit sich die Linkfarbe ändert, nachdem ein Benutzer auf einen Link geklickt hat:

    1. Klicken Sie oben im Fenster "Selektoren" auf das Pluszeichen.

    2. Geben Sie im Feld Selektor Name ein. navbar a: besucht.

    3. Setzen Sie im Bereich "Text" des Eigenschaftenbedienfelds "Textdekoration" auf "Keine".

    4. Wählen Sie im Bereich "Text" noch immer eine Farbe aus dem Farbfeld aus, um die Farbe der Verknüpfung nach dem Besuch anzugeben.

15. Klicken Sie oben im Arbeitsbereich auf die Schaltfläche "Live" oder klicken Sie auf die Schaltfläche "Vorschau", um die Seite in einem Browser anzuzeigen und die Wirkung der Verknüpfungsstile anzuzeigen.