Wie man eine Navigationsleiste aus einer ungeordneten Liste der Verbindungen in Dreamweaver erstellen
Hier ist eine große CSS Trick, um eine Liste mit Aufzählungszeichen in einer Navigationsleiste in Dreamweaver mit einem einfachen Rollover-Effekt für das Drehen. eine Liste mit Aufzählungszeichen für Navigationsleisten zu verwenden ist eine gut akzeptierte Konvention für Websites, die aktuellen Standards zur Barrierefreiheit zu erfüllen.
Die gleichen Verbindungen sind immer noch in der unsortierten Liste enthalten ist, aber die Anwendung der Stile ändert ihr Aussehen drastisch.
Um eine Navigationsleiste erstellen mit Hilfe von CSS die ungeordnete Liste und Link-Tags neu zu definieren, gehen Sie folgendermaßen vor:
Klicken Sie den Cursor zu platzieren, wo Sie Ihre Navigationsleiste auf der Seite erstellen möchten.
Geben Sie den Text als die Links dienen wollen, trennen jeweils mit der Return-Taste oder Enter-Taste einen neuen Absatz zu erstellen.
So formatieren Sie die Links als ungeordnete Liste, trennen Sie jede Textzeile, die Sie mit einem verknüpfen möchten
-Tag.
Erstellen von Verknüpfungen, indem jedes Stück Text nacheinander zu wählen, klicken Sie auf die Hyperlink-Symbol in der gemeinsamen Einsatzplatte, und wählen Sie dann die Seite, die Sie verknüpfen möchten oder eine URL eingeben.
Ziehen Sie den gesamten Satz von Links zu wählen, und klicken Sie dann auf das Ungeordnete Liste Symbol im Eigenschafteninspektor.
Ein Aufzählungspunkt erscheint am Anfang jeder Verbindung. Wenn eine Verbindung mit einem separaten Kugel nicht auf den Weg, klicken Sie auf den Raum zwischen ihm und dem Link, bevor es zu löschen, und dann die Eingabetaste drücken die Links mit einem neuen Absatz zu trennen.
Um ein Tag um eine Liste von Links hinzufügen (oder andere Inhalte, die bereits auf einer Seite ist), wählen Sie den Inhalt und klicken Sie dann auf das Div Symbol im Panel Gemeinsame Einfügen.
Das Insert Div Dialogfeld öffnet sich.
Hinzufügen eines Tag rund um die ungeordnete Liste von Links ist hilfreich, wenn Sie die Formatierung hinzufügen möchten.
Wrap Around Wählen Sie Auswahl aus dem Insert Dropdown-Liste.
Für eine genauere Kontrolle darüber, wo Sie eine neue Variable hinzufügen, können Sie Optionen aus dem Einfügen der Dropdown-Liste oben im Insert Div Dialogfeld wählen.
Geben Sie einen Namen in das Feld Klasse oder ID-Feld.
Ein Tag mit der Klasse oder ID-Name wird von Ihnen eingegebenen automatisch auf die Seite rund um die Liste der Links hinzugefügt.
Am unteren Rand des Dialogfelds einfügen Div, klicken Sie auf die Schaltfläche Neue CSS-Regel.
Die neue CSS-Regel-Name wird in der CSS-Designer Selektoren Panel in die Liste der Stilnamen hinzugefügt.
Im Eigenschaftenfenster geben Sie Ihre gewünschten Einstellungen für Farbe, Hintergrund, Größe, Ränder und Polsterung.
Die Formatierung ist mit dem Inhalt des Tags automatisch angewendet, weil Sie den Stil angewendet, wie Sie es in den Schritten 5-7 erstellt.
Um eine Verbindung Stil erstellen, die die ungeordnete Liste formatiert wird nur, wenn es in der Navigationsleiste verwendet wird, erstellen Sie eine Verbindung Stil, der den Klassennamen enthält .navbar:
Setzen Sie den Cursor irgendwo in der Aufzählungsliste.
Klicken Sie auf das Pluszeichen (+) an der Spitze des Selectors Panel.
Im Feld Selektor-Name, stellen Sie sicher, dass Dreamweaver automatisch .navbar ul als Name eines neuen Stil in der Selektoren Panel eingegeben.
Im Eigenschaftenfenster stellen Sie die Ränder und Polsterung auf 0.
Erstellen Sie eine Verbindung Stil der Listenelement-Tags neu zu definieren:
Setzen Sie den Cursor irgendwo in der Aufzählungsliste.
Klicken Sie auf das Pluszeichen an der Spitze der Selektoren-Panel.
Im Feld Selektor-Name, stellen Sie sicher, dass Dreamweaver automatisch .navbar ul li als Name eines neuen Stil in der Selektoren Panel eingegeben.
Im Eigenschaftenfenster, stellen Sie die Anzeige auf Inline.
Ändern Sie den Listenstil Typ auf Keine, um die Kugel zu entfernen.
Stellen Sie die linken und rechten Rand auf 20 Pixel.
Dieser Schritt trennt die Listenelemente voneinander in der horizontalen Liste. Sie können diese Einstellung ändern, um die Höhe des Raumes zwischen Verbindungen zu erstellen, Ihr Design am besten passt.
Erstellen Sie einen Stil auf den Link-Tag neu zu definieren:
Klicken Sie den Cursor in einem Link in der Navigationsleiste zu platzieren.
Klicken Sie auf das Pluszeichen an der Spitze der Selektoren-Panel.
Wenn Sie den Stil Namen ändern wollen, doppelklicken Sie auf den Namen in der Selektoren Feld und geben Sie den Namen, den Sie verwenden möchten.
Im Textteil der Eigenschaftenfenster, Text-Dekoration auf Keine eingestellt.
Noch im Textteil, eine Farbe aus der Farbe und wählen Sie die Farbe von Links angeben, wenn sie auf einer Seite geladen sind.
Erstellen Sie einen neuen Stil der Hover-Link-Tag neu zu definieren, so dass die Linkfarbe ändert sich, wenn ein Benutzer einen Cursor über den Link rollt:
Klicken Sie auf das Pluszeichen an der Spitze der Selektoren-Panel.
Im Selektor-Name-Feld geben Sie .navbar ein: Hover.
Im Textteil der Eigenschaftenfenster, Text-Dekoration auf Keine eingestellt.
Noch im Textteil, eine Farbe aus der Farbe und wählen Sie den Link der Farbe zu spezifizieren, wenn Benutzer ihre Cursor über den Link rollen.
Erstellen Sie einen neuen Stil der besuchten Link-Tag neu zu definieren, so dass die Linkfarbe ändert, nachdem ein Benutzer auf einen Link klickt:
Klicken Sie auf das Pluszeichen an der Spitze der Selektoren-Panel.
Im Selektor-Name-Feld geben Sie .navbar a: visited.
Im Textteil der Eigenschaftenfenster, Text-Dekoration auf Keine eingestellt.
Noch im Textteil, eine Farbe aus der Farbe und wählen Sie den Link der Farbe zu spezifizieren, nachdem es besucht wird.
Klicken Sie auf die Schaltfläche Live an der Spitze des Arbeitsbereichs oder klicken Sie auf die Schaltfläche Vorschau der Seite in einem Browser anzuzeigen, die Wirkung der Link-Styles zu sehen.
