Links und das Navigationsmenü formatieren.

Hinweis: Über die Download-Buttons kannst du die Creative Cloud-Bibliothek und alle Projektdateien für dieses Tutorial herunterladen. Du kannst entweder mit der Datei weiterarbeiten, die du im ersten Teil des Tutorials angelegt hast, oder die Version im Ordner für diese Lektion verwenden.

Einführung.

Willkommen zu Teil 6 dieses Tutorials zur Erstellung einer einfachen, responsiven Website mit Dreamweaver. Die einspaltige Version des Designs ist beinahe fertig. Es fehlt nur noch die Formatierung der Links und des Navigationsmenüs. Du wirst außerdem eine JavaScript-Datei mit deiner Website verknüpfen, um die Anzeige des Menüs auf kleinen Bildschirmen zu steuern.

Links mittels Pseudoklassen formatieren.

Links werden standardmäßig blau und unterstrichen dargestellt. Wenn ein Link bereits aufgerufen wurde, ändert sich die Schriftfarbe in Lila. Obwohl diese Formatierung gängig ist, passt sie in den seltensten Fällen zu modernen Designs. Heutzutage neigt man eher dazu, die Unterstreichung zu entfernen und das Erscheinungsbild von Links beim Mouseover zu verändern. Für die verschiedenen Zustände von Links werden in den CSS-Anweisungen sogenannte Pseudoklassen verwendet. Die Bezeichnung leitet sich davon ab, dass im Gegensatz zu normalen Klassen keine Klassenattribute zu den Elementen hinzugefügt werden. Die Pseudoklasse wird dynamisch vom Browser auf Basis der im Stylesheet hinterlegten CSS-Anweisungen angewendet.

Sie beginnt stets mit einem Doppelpunkt (:) und wird direkt an einen Selektor angefügt. Folgende Pseudoklassen werden für Links eingesetzt:

• „:link“ formatiert einen Link, der noch nicht aufgerufen wurde.
• „:visited“ formatiert einen zuvor aufgerufen Link.
• „:hover“ bestimmt das Erscheinungsbild eines Elements (nicht nur eines Links), wenn der Cursor darüber bewegt wird. Du hast dieses Attribut bereits im fünften Teil verwendet, um das Aussehen eines Bildes beim Mouseover zu verändern.
• „:active“ formatiert ein Element in dem Moment, in dem es angeklickt wird.
• „:focus“ formatiert ein aktuell ausgewähltes Element, z. B. beim Navigieren innerhalb einer Seite mithilfe der Tastatur.

Beim Formatieren von Links ist es wichtig, die Pseudoklassen in der hier gezeigten Reihenfolge zu verwenden. Andernfalls kann es zu Fehlern bei der Anwendung der CSS-Anweisungen kommen. Die Reihenfolge lässt sich mithilfe der Eselsbrücke LoVe-HAte (Liebe-Hass) leichter merken. Auch die Codehints in Dreamweaver helfen dir, die Pseudoklassen in der korrekten Reihenfolge aufzulisten. Die „:focus“-Pseudoklasse ist wichtig für die barrierefreie Nutzung einer Website durch Personen, die eine Maus auf dem Laptop oder Desktop nicht bedienen können oder wollen.

1. Wähle in der Ansicht „Live“ einen Link aus. Markiere im Bereich „Selektoren“ von CSS Designer den H2-Selektor. Die nächste CSS-Anweisung wird direkt nach dem H2-Selektor eingefügt, sodass die meisten generischen Selektoren im Stylesheet beieinander bleiben. Klicke auf das Pluszeichen, um einen neuen Selektor zu erstellen. Drücke die Nach-oben-Taste, um den Detailgrad des vorgeschlagenen Selektors zu senken. Für dieses Beispiel benötigst du einen A-Selektor, der Links in allen Zuständen formatiert.
   
   
2. Setze im Abschnitt „Text“ des Bereichs „Eigenschaften“ den Wert für „font-weight“ auf bold.
   
   
3. Wähle neben der Property „text-decoration“ das erste Symbol für den Wert none aus. Alle Links auf der Seite sind nun fett und ohne Unterstreichung.
   
   
4. Erstelle einen neuen Selektor für „a:link“. Wenn du den Doppelpunkt eingibst, zeigt Dreamweaver Codehints für die Pseudoklassen an.
   
   
5. Klicke im Bedienfeld „CC Libraries“ auf das rosa Farbfeld, um den Hex-Code #F68979 in die Zwischenablage zu kopieren. Füge diesen Code in das editierbare Feld der Property color ein.
   
   
6. Erstelle einen neuen Selektor für a:visited. Kopiere den Hex-Code #FF944C des hellorangen Farbfeldes. Füge diesen Code für die Property „color“ ein.
   
   
7. Erstelle einen neuen Selektor für „a:hover, a:active, a:focus“. Kopiere den Hex-Code #7F3300 des braunen Farbfeldes. Füge diesen Code für die Property „color“ ein.
   
   Lege für die Property „text-decoration“ den Wert underline fest, indem du auf das zweite Symbol klickst.
   
   
8. Fahre in der Ansicht „Live“ mit dem Cursor über einen Link. Die Schriftfarbe sollte sich in Braun ändern. Der Text sollte unterstrichen sein. Falls nicht, hast du die Link-Stile im Bereich „Selektoren“ möglicherweise in der falschen Reihenfolge angelegt. Vergleiche deine Einstellungen mit Abbildung 1.

Falls nötig, kannst du die Reihenfolge der CSS-Anweisungen ändern, indem du im Bereich „Selektoren“ die Selektoren per Drag-and-Drop umsortierst. Eine horizontale schwarze Linie zeigt an, wo der oder die Selektor(en) im Stylesheet platziert werden.

Im Moment sind alle Links gleich formatiert. Die Darstellung der Navigations-Links muss noch angepasst werden. Du musst aber zuerst einen sogenannten Trigger-Link (Auslöser) für das Navigationsmenü auf kleinen Bildschirmen erstellen.

Einen Trigger-Link für das Navigationsmenü erstellen.

Auf kleinen Bildschirmen wie bei Smartphones ist das Navigationsmenü normalerweise ausgeblendet und wird erst durch das Anklicken oder Antippen eines Menü-Buttons eingeblendet. In diesem Abschnitt wirst du der ungeordneten Liste eine ID zuweisen und eine Überschrift zweiter Ordnung mit einem Link zu dieser Liste hinzufügen. Der Menü-Link wird per CSS-Anweisung auf Bildschirmen mit hoher Auflösung verborgen. Die gleitende Bewegung des Navigationsmenüs auf kleineren Bildschirmen wird mithilfe einer Kombination aus CSS- und JavaScript-Code gesteuert.

1. Wähle in der Ansicht „Live“ die ungeordnete Liste mit den Navigations-Links aus, indem du auf einen der Links klickst. Der Link wird braun und unterstrichen dargestellt, weil er aktiviert wurde. Drücke dann mehrmals die Nach-oben-Taste, bis die Elementanzeige anzeigt, dass die Liste ausgewählt ist. Auf dem Tab der Elementanzeige sollte „ul“ zu sehen sein (siehe Abbildung 2).

Durch Drücken der Nach-oben-Taste in der Ansicht „Live“ wandert die Auswahl in der HTML-Hierarchie nach oben. Wenn du ein Listenelement in der Mitte der Liste auswählst und die Nach-oben-Taste einmal drückst, wird das A-Tag (der Hyperlink) des darüber liegenden Listenelements ausgewählt. Wenn du die Taste erneut drückst, wird das LI-Tag des übergeordneten Elements ausgewählt. Je öfter du die Nach-oben-Taste drückst, desto weiter bewegt sich Dreamweaver in der Hierarchie nach oben. Falls du zu weit nach oben gehst, wählt Dreamweaver zunächst das NAV-Element und dann das H1-Element aus. Drücke in diesem Fall die Nach-unten-Taste, um zum UL-Element zu gelangen.

Klicke bei ausgewähltem UL-Element auf das Pluszeichen der Elementanzeige. Weise der ungeordneten Liste die ID „navlinks“ zu, indem du im eingeblendeten Feld „#navlinks“ eingibst. Drücke die Tabulator- oder Eingabetaste, um die Änderung zu bestätigen. Vergewissere dich, dass im Popup-Bedienfeld unter Quelle auswählen die Datei responsive.css ausgewählt ist. Klicke außerhalb des Bedienfelds, um es zu schließen.

Hinweis: Wenn du eine ID oder Klasse über die Elementanzeige zuweist, erstellt Dreamweaver automatisch eine leere CSS-Anweisung für die ID oder Klasse, sofern diese im CSS-Code noch nicht vorhanden ist. Wenn du keine CSS-Anweisung erstellen möchtest, drücke die Esc-Taste, um das Popup-Bedienfeld zu schließen. Die automatische Erstellung von CSS-Anweisungen wird nur ausgelöst, wenn du Klassen oder IDs über die Elementanzeige zuweist. Wenn du das Bedienfeld „DOM“ oder den Eigenschafteninspektor verwendest, wird keine leere CSS-Anweisung erstellt.

2. Während die ungeordnete Liste noch ausgewählt ist, wähle Einfügen > Überschrift > Ü2. Wähle im Dialogfeld zur Positionierungshilfe die Option Vor, um eine Überschrift zweiter Ordnung direkt über der ungeordneten Liste einzufügen.
   
   
3. Mache einen Doppelklick auf den Platzhaltertext der Überschrift, um in den Bearbeitungsmodus zu wechseln. Überschreibe ihn mit dem Wort Menu.
   
   Bleibe im Bearbeitungsmodus. Markiere das Wort Menu. Klicke auf das Verknüpfungssymbol, um es in einen Link umzuwandeln.
   
   Gib in das Link-Feld „#navlinks“ ein (siehe Abbildung 3). Klicke außerhalb des Textes, um den Bearbeitungsmodus zu beenden.

Es wird ein Link zum Element mit der ID navlinks auf derselben Seite erstellt – also zur ungeordneten Liste der Navigations-Links.

4. Prüfe, ob das H2-Element in der Ansicht „Live“ ausgewählt ist (wenn das A-Element ausgewählt ist, musst du die Nach-oben-Taste einmal drücken). Weise mithilfe des Pluszeichens in der Elementanzeige dem H2-Element die ID menulink zu.
   
   
5. Schaue dir den HTML-Code in der Ansicht „Code“ an. Das NAV-Element sollte nun so aussehen:

Beachte, dass die ID-Attribute für H2 und UL nicht mit einem Hash-Zeichen # beginnen. Das HREF-Attribut im Link dagegen schon. Denn hier bedeutet das Hash-Zeichen: „Suche nach dieser ID“.

In der Elementanzeige oder im Bedienfeld „DOM“ setzt du ein # an den Anfang einer ID, um sie von einer Klasse zu unterscheiden. In der CSS-Sprache beginnt ein ID-Selektor mit einem Hash-Zeichen # und ein Klassen-Selektor mit einem Punkt (.). Dreamweaver behält also für die Anwendung von IDs und Klassen auf Elemente im Code dieselbe Konvention bei.

Hinweis: Eine ID kann nur einmal pro Seite verwendet werden, wohingegen eine Klasse für mehrere Elemente eingesetzt werden kann. ID- und Klassennamen sollten keine Leerzeichen enthalten. Verwende Bindestriche oder Unterstriche, um Wörter im Namen voneinander zu trennen. Alternativ kannst du Binnenversalien verwenden, d. h. jeweils den ersten Buchstaben eines Wortes innerhalb des Namens großschreiben. Verzichte in jedem Fall auf Sonderzeichen oder Satzzeichen.

6. Wenn du eine neue ID oder Klasse über die Elementanzeige erstellst, wird der entsprechende Selektor immer am Ende der Liste im Bereich „Selektoren“ eingefügt. Um die Stile logisch zu organisieren, wähle im Bereich „Selektoren“ den Selektor „#menulink“ aus. Ziehe ihn unter die anderen Link-Stile. Lasse die Maustaste los, wenn die horizontale schwarze Linie direkt unter der Gruppe von Selektoren „a:hover, a:active, a:focus“ liegt (siehe Abbildung 4).

7. Verschiebe den Selektor „#navlinks“ direkt unter „#menulink“.

Den Trigger-Link formatieren.

Der Trigger-Link ist innerhalb einer H2-Überschrift verschachtelt. Browser stellen Überschriften zweiter Ordnung standardmäßig groß und fett dar. Das Design verlangt jedoch nach einer kleineren, schlankeren Schrift. Da die Website auch auf Smartphones und Tablets verwendet wird, muss der Link selbst leicht anzutippen sein. Er sollte also die gesamte Breite der Überschriftenzeile einnehmen, nicht nur den eigentlichen Text.

1. Wähle im Bereich „Selektoren“ von CSS Designer den „#menulink“-Selektor aus. Entferne alle Ränder des Elements. Dazu gibt es zwei Möglichkeiten:
   
   
   • Klicke auf Kurzschrift festlegen. Gib 0 ein. Klicke außerhalb des Feldes.
   • Klicke auf das Verknüpfungssymbol in der Mitte des visuellen Tools (siehe Abbildung 5). Lege für eine Seite den Wert 0 oder 0px fest.

2. Lege die folgenden Properties fest:

Der Text ist nun zentriert ausgerichtet und steht vor einem schwarzen Hintergrund, der sich über die gesamte Breite des Wrapper-DIV-Elements erstreckt. Überschriften werden als Blockelemente behandelt, die die gesamte Breite des Containers einnehmen.

3. Vergewissere dich, dass in der Ansicht „Live“ das A-Element des Trigger-Links ausgewählt ist. Der Rahmen der Elementanzeige umschließt nur den Text (siehe Abbildung 6).

4. Erstelle einen Selektornachfahren für „#menulink a“. Lege im Abschnitt „Text“ des Bereichs „Eigenschaften“ folgende Properties fest:

5. Klicke auf das Symbol für Layout . Erstelle die folgenden Properties:

Sobald du die Property „display“ auf block setzt, erstreckt sich die Elementanzeige für das A-Tag über die gesamte Breite der Überschrift und macht so die gesamte Zeile zum klickbaren Element (siehe Abbildung 7).

Die Navigations-Links formatieren.

Die Navigations-Links sind in einer ungeordneten Liste enthalten. Um sie zu formatieren, musst du die Aufzählungszeichen sowie die Standardwerte für Ränder und Auffüllungen entfernen, die Browser auf Listen anwenden. Außerdem wirst du die Listenelemente über die gesamte Breite des Bildschirms anklickbar machen, so wie zuvor den Trigger-Link.

1. Wähle im Bereich „Selektoren“ von CSS Designer den „#navlinks“-Selektor aus. Lege im Abschnitt „Layout“ des Bereichs „Eigenschaften“ folgende Properties fest:

2. Klicke auf das Symbol für Text . Setze die Property „text-align“ auf center.
   
   
3. Scrolle zum Ende des Abschnitts „Text“. Entferne die Aufzählungszeichen, indem du für die Property „list-style-type“ den Wert none festlegst.
   
   
4. Klicke auf das Symbol für den Hintergrund , um zu den Hintergrund-Properties zu wechseln. Klicke auf das Farbfeld neben „background-color“, um den Farbwähler zu öffnen. Die Standardeinstellung ist Schwarz, was du auch möchtest. Doch sollte der Hintergrund nicht deckend, sondern halbtransparent sein.
   
   Wähle unten im Farbwähler RGBa. Ziehe den Regler für den Alphakanal (ganz rechts) um ungefähr ein Drittel der Skala nach unten. Der Wert im Feld links unten sollte rgba(0,0,0,0.65) oder so ähnlich lauten (siehe Abbildung 8).

Das RGBa-Farbformat besteht aus vier Werten, die durch Kommata voneinander getrennt sind. Die ersten drei legen die Rot-, Grün- und Blauanteile der Farbe über einen Ganzzahlwert von 0 bis 255 fest. Der letzte Wert bestimmt den Alphawert der Transparenz und reicht von 0 (völlig transparent) bis 1 (völlig deckend).

Klicke außerhalb des Farbwählers, um ihn zu schließen.

5. Ältere Browser können das RGBa-Farbformat nicht interpretieren. Du musst daher unbedingt eine alternative Hintergrundfarbe festlegen. Dazu musst du das Stylesheet in der Ansicht „Code“ manuell bearbeiten.
   
   Mache im Bereich „Selektoren“ einen Rechtsklick bzw. Ctrl-Klick auf den Selektor „#navlinks“. Wähle im Kontextmenü die Option Gehe zu Code (siehe Abbildung 9).

Die Ansicht „Teilen“ wird geöffnet. Die Einfügemarke steht am Ende der ausgewählten CSS-Anweisung.

6. Füge eine neue Zeile über der „background-color“-Definition ein. Gib folgenden Code ein:

Sobald du das #-Zeichen eingibst, öffnet sich der Farbwähler. Drücke die Eingabetaste, um ihn zu schließen. Dreamweaver fügt den Hex-Code für Schwarz ein. Vergiss nicht das Semikolon (;) am Ende der Zeile. Die geänderte CSS-Anweisung sollte nun wie in Abbildung 10 aussehen.

Bei dieser doppelten Angabe der Farbe machst du dir die CSS-Kaskade zunutze. Der zweite Wert hat bei Browsern, die das RGBa-Format interpretieren können, Vorrang vor dem ersten Wert. Ältere Browser, die die RGBa-Angabe nicht erkennen, ignorieren die zweite Anweisung einfach. Sie nutzen den Hex-Code und zeigen einen deckend schwarzen Hintergrund an.

7. Schließe die Ansicht „Teilen“, indem du auf Live klickst.
   
   
8. Erstelle einen Selektornachfahren „#navlinks a“ für die Links im Navigationsmenü. Lege folgende Properties im Abschnitt „Layout“ fest:

9. Klicke auf das Symbol für Text . Lege die folgenden Werte fest:

Dein Navigationsmenü sollte nun wie in Abbildung 11 aussehen.

Die Navigations-Links sind immer noch in einer ungeordneten Liste enthalten. Durch die eben definierten Stile hat sich aber ihr Look komplett verändert.

Das Navigationsmenü ein- und ausblenden.

Das Ein- und Ausblenden des Menüs wird über eine Kombination aus CSS und JavaScript bewerkstelligt. Wann immer der Trigger-Link angetippt oder angeklickt wird oder das Browser-Fenster schmaler als die vorgegebene Breite ist, tauscht der JavaScript-Code die Klasse für die ungeordnete Liste der Navigations-Links aus. Das Menü wird nur ausgeblendet, wenn JavaScript aktiviert ist.

Den JavaScript-Code wirst du später mit der Seite verknüpfen. Zuerst kümmerst du dich um die Formatierung des Navigationsmenüs im angezeigten Zustand.

1. Die Position des Navigationsmenüs – ob ein- oder ausgeblendet – wird über die absolute Positionierung im CSS-Code bestimmt. Markiere im Bereich „Selektoren“ von CSS Designer den „#navlinks“-Selektor. Setze die Property „position“ auf absolute. Du findest die Property im Abschnitt „Layout“ des Bereichs „Eigenschaften“ direkt unter dem visuellen Tool für die Auffüllung.
   
   Sobald du das tust, rückt das Bild mit der Golden Gate Bridge hinter die Navigations-Links (siehe Abbildung 12).

Das passiert, weil absolut positionierte Elemente aus dem normalen Fluss der Dokumentenelemente ausgeschlossen werden und auf einer separaten Ebene vor den anderen Elementen liegen.

2. Füge im Bedienfeld „DOM“ eine Klasse zur ungeordneten Liste hinzu. Mache hierzu einen Doppelklick auf das „#navlinks“-Element. Gib im editierbaren Feld ein Leerzeichen nach „#navlinks“ gefolgt von „.displayed“ (mit einem Punkt am Anfang) ein (siehe Abbildung 13). Klicke außerhalb des Feldes, um die Änderung zu bestätigen.

Du könntest die Klasse auch über die Elementanzeige zur ungeordneten Liste hinzufügen. Diese Methode hier hat aber den Vorteil, dass nicht automatisch ein Selektor im Bereich „Selektoren“ von CSS Designer angelegt wird.

3. Lasse im Bereich „Selektoren“ den „#navlinks“-Selektor ausgewählt. Klicke auf das Pluszeichen, um einen neuen Selektor anzulegen. Gib im editierbaren Feld „#navlinks.displayed“ ein.
   
   Achte darauf, dass sich kein Leerzeichen zwischen „#navlinks“ und dem Punkt am Anfang des Klassenselektors befindet. Dies ist kein Selektornachfahre: „#navlinks.displayed“ wirkt sich auf Elemente aus, die die ID „navlinks“ und die Klasse „displayed“ aufweisen.
   
   
4. Lege im Abschnitt „Layout“ des Bereichs „Eigenschaften“ mithilfe des visuellen Tools unter „position“ einen oberen Wert von 135px fest (siehe Abbildung 14).

Technisch ausgedrückt wird damit die absolute Position des Anfangs der ungeordneten Liste auf 135px unterhalb der Oberkante des sie umschließenden Blocks festgelegt. In diesem Beispiel ist der umschließende Block die Seite selbst. Die Liste wird also 135px unter dem oberen Seitenrand gesetzt. Im siebten Teil des Tutorials erfährst du mehr über absolute Positionierung.

5. Setze im Abschnitt „Layout“ die Property „z-index“ auf den Wert 1 und die Property „opacity“ ebenfalls auf 1.
   
   Um die Property „z-index“ festzulegen, wähle im Dropdown-Menü value aus. Gib 1 ein. Diese Property bestimmt die Stapelreihenfolge von positionierten Elementen und stellt sicher, dass das Navigationsmenü nicht versehentlich hinter anderen Elementen verschwindet.
   
   Für die Property „opacity“ kannst du einen Wert von 0 (völlig transparent) bis 1 (völlig deckend) festlegen. Das Menü wird während des Ein- und Ausblendens seine Deckkraft verändern.
   
   
6. Erstelle einen Selektor mit dem Namen „#navlinks.start“. Setze die Property „display“ auf den Wert none.
   
   
7. Erstelle einen Selektor mit dem Namen „#navlinks.collapsed“. Lege folgende Properties fest:

Der negative Wert für die Property „top“ führt dazu, dass der Anfang der ungeordneten Liste über den oberen Seitenrand hinaus aus dem Blickfeld verschoben wird. Durch die auf 0 gesetzte Property „opacity“ ist die Liste zudem unsichtbar.

8. Um das Menü zu aktivieren, musst du nun die JavaScript-Datei mit der Seite verknüpfen. Die Datei enthält eine Funktion, die nach benannten IDs sucht. Sie darf daher erst verknüpft werden, nachdem der komplette HTML-Code geladen wurde. Um das Skript an der richtigen Stelle einzufügen, wähle in der Ansicht „Live“ den Footer aus und dann Einfügen > HTML > Script.
   
   
9. Das Skript muss nach dem Footer eingefügt werden. Wähle daher im Dialogfeld für die Positionierungshilfe die Option Nach aus. Das Dialogfeld „Datei auswählen“ wird geöffnet. Navigiere zum Ordner „js“ im Stammverzeichnis. Wähle die Datei menu.js aus. Klicke auf OK (Windows) bzw. auf Öffnen (macOS).
   
   Wenn all deine CSS-Anweisungen und HTML-Komponenten korrekt sind, sollte das Navigationsmenü aus der Ansicht „Live“ verschwinden. Die Funktion in der JavaScript-Datei ändert nämlich die Klasse des Navigationsmenüs in „start“, wodurch die Property „display“ auf none gesetzt wird. Nur den Bruchteil einer Sekunde später wird die Klasse in „collapsed“ geändert, wodurch das Menü mit einem Klick auf den Trigger-Link eingeblendet werden kann.
   
   
10. Klicke auf das Wort „MENU“ über dem Bild mit der Golden Gate Bridge – das Navigationsmenü wird eingeblendet. Klicke erneut darauf, und das Menü verschwindet wieder. Gestalte den Übergang nun noch sanfter.
    
    
11. Mache im Bereich „Selektoren“ von CSS Designer einen Rechtsklick bzw. Ctrl-Klick auf den „#navlinks“-Selektor. Wähle im Kontextmenü Gehe zu Code.
    
    
12. Füge die folgenden zwei Code-Zeilen direkt vor der schließenden geschweiften Klammer der CSS-Anweisung #navlinks ein (Codehints helfen Ihnen dabei):

Du weist den Browser an, mithilfe der Property „-webkit-transition“ die Übergänge aller Properties für das Element und seine Nachfahren über eine halbe Sekunde zu strecken. Die Property „ease-out“ verlangsamt den Übergang zum Ende hin.

Die geänderte CSS-Anweisung sollte nun wie in Abbildung 15 aussehen.

12. Teste das Navigationsmenü erneut. Dieses Mal sollte es sanft ein- und ausgeblendet werden.
    
    
13. Wenn das Navigationsmenü angezeigt wird, klicke in der Ansicht „Live“ auf den Link „Home“. Klicke in der Elementanzeige auf das Pluszeichen. Gib im editierbaren Feld „.thispage“ ein, um dem Link diese Klasse zuzuweisen.
    
    Drücke die Tabulatortaste oder die Eingabetaste, um die Änderung zu bestätigen. Falls das Popup-Bedienfeld erscheint, in dem du eine Quelle auswählen sollst, drücke die Esc-Taste. Du möchtest keinen Selektor erstellen, denn diese CSS-Anweisung wird Teil eines viel komplexeren Selektors sein.
    
    
14. Wähle im Bereich „Selektoren“ von CSS Designer den „#navlinks a“-Selektor aus. Klicke auf das Pluszeichen, um einen neuen Selektor anzulegen. Gib die folgende Gruppe von Selektoren im editierbaren Feld ein:
    
    #navlinks a:hover, #navlinks a:active, #navlinks a:focus, #navlinks a.thispage

    Damit werden die Navigations-Links mit den Pseudoklassen „:hover“, „:active“ und „:focus“ sowie der Navigations-Link mit der Klasse „.thispage“ formatiert.
    
    
15. Gib im Abschnitt „Text“ des Bereichs „Eigenschaften“ für die Property „color“ den Wert #F68979 ein. Der Link „Home“ wird, wie die anderen Navigations-Links auch, beim Mouseover rosa.
    
    
16. Speichere deine Arbeit über den Menüpfad Datei > Alle zugehörigen Dateien speichern.

Mögliche Probleme.

Auch wenn bis hierhin alles gut gelaufen ist, könnte das Menü nicht wie vorgesehen funktionieren. Und das bedeutet leider, dass Sie irgendwo einen Fehler gemacht haben. Browser (und auch in gewissem Maße die Live-Ansicht von Dreamweaver) behandeln Fehler im HTML-Code mit Nachsicht. Sie können auch gut mit gelegentlichen Fehlern im CSS-Code umgehen. Bei JavaScript aber sind sie gnadenlos. Ein einziger Fehler und nichts funktioniert.

Das Skript in der Datei „menu.js“ verwendet eine sogenannte IIFE („iffy“ gesprochen). IIFEs sind „immediately invoked function expressions“, d. h. sofort ausgeführte Funktionsausdrücke. Sie benötigen drei Argumente: die ID des Trigger-Links, die ID der ungeordneten Liste und eine Zahl für den Breakpoint, ab dem das Menü ausgeblendet werden soll. Wenn Sie allen diesen Elementen unterschiedliche IDs zugewiesen oder sie unterschiedlich geschrieben haben, funktioniert die IIFE nicht. Sie wird auch nicht funktionieren, wenn Sie die Namen der Klassen „start“, „collapsed“ und „displayed“ falsch geschrieben haben. JavaScript achtet auf Groß- und Kleinschreibung, sodass es „menulink“ und „menuLink“ als völlig unterschiedliche Werte interpretiert.

Es können auch Fehler im CSS-Code passieren. Beispielsweise dürfen keine Leerzeichen in den letzten drei von Ihnen erstellten Selektoren vorkommen: „#navlink.displayed“, „#navlink.start“ und „#navlink.collapsed“. Überprüfen Sie auch, ob Sie am Ende jeder manuell eingegebenen CSS-Anweisung ein Semikolon (;) gesetzt haben.

Falls das Menü dann immer noch nicht funktioniert, vergleichen Sie Ihre eigenen Dateien mit den Beispieldateien im Ordner „part6“. Es spielt keine Rolle, falls die Zeilennummern abweichen. Achten Sie auf Unterschiede im Code. Dreamweaver lässt sich mit einem Drittanbieterprogramm für den Vergleich von Dateiinhalten integrieren, mit dem Sie Unterschiede leicht erkennen können. In der Dreamweaver-Hilfe erfahren Sie mehr darüber, wie Sie Dateien auf Unterschiede vergleichen.

Lassen Sie sich von Fehlern nicht entmutigen – sie sind ein wichtiger Teil des Lernprozesses. Auch Profis machen Fehler. Und sie wissen aus Erfahrung, wo sie nach ihnen suchen müssen und wie sie sie schneller korrigieren können.