HTML und CSS für Designer

Formatierung von Hyperlinks

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Hyperlinks werden häufig mit sogenannten Pseudoklassen formatiert. Das eröffnet die Möglichkeit, Statuseffekte wie Active, Visited oder auch den bekannten Hover abzubilden.

Transkript

Es fehlt uns die Definition und Übernahme der Typographie für die Hyperlinks. Schauen wir uns in dem InDesign-Dokument das Ganze mal an. Ich greife hier durchaus noch mal obendrauf zurück auf das Demo. Ich habe jetzt hier ein Zeichenformat "Hyperlink-Hover". Kann ich nun das Ganze ausschalten. Also, diese beiden Vorgänge habe ich: Hyperlink, ganz normal, soll so aussehen und "Hyperlink-Hover" unterstrichen. Also, diese Reihenfolge, die soll gelten. Das kann ich auch hier abbilden. Gucken wir aber zunächst nochmal in das HTML-Dokument, dann fällt uns nämlich auf, dass die Vorgabe hier bereits unterstrichen ist. Das liegt daran, dass die Hyperlinks standardmäßig in einem Webbrowser eben diese Unterstreichung haben, und ich möchte das genau andersherum aufbauen. Also greife ich darauf auch zu. Ich gehe in die "section" und sage, das betrifft den HTML-Befehl "a" für "anchor", und den möchte ich jetzt mit einer bestimmten Größe versehen. Hier ist zunächst erstmal wichtig, dass ich die Farbe eintrage, die ich dafür brauche: Die Farbe ist 00 4B 89. Das entspricht dem Blau, und als "text-decoration", - langes Wort für den Unterstrich - möchte ich eben kein "underline" haben, sondern ihm standardmäßig sagen, bitte nicht unterstreichen. Das ist schon schon mal Punkt Nummer 1. Ich speichere das ab, aktualisiere, und jetzt sieht das schon genau so aus wie in meinem InDesign-Vorgabe-Dokument. Was aber fehlt: Wenn ich mit der Maus drübergehe, der Link ist schon aktiv, aber wenn ich mit der Maus drübergehe, tut sich nichts, und das ist nicht im Sinne des Erfinders. Also: "section a". Es gibt ein sog. Pseudoformat, nämlich der Doppelpunkt. Der Doppelpunkt kann Zustände übernehmen, unter anderem: "hover" über den "over"-Zustand der Maus. Da gibt es auch "active" und "visited", also lauter Dinge, die man da hinterher zuordnen kann. Das sind aber sicherlich die beiden wichtigsten. Hier ist es jetzt so, dass ich mir in meiner Designarbeit überlegt habe, wenn ich mit der Maus drübergehe, der Unterstrich kommen soll. Also verwende ich wieder "text-decoration", schreibe hier "underline", speichere ab, aktualisiere das HTML-Dokument. Bingo. Bis auf den "Header"-Bereich - da krebst immer noch die alte Überschrift rum, und die Grafik, sehe ich gerade noch - habe ich typgraphiemäßig nun alles übernommen, ganz genau so, wie ich mir das in meinem Vorgabe-Dokument ausgedacht habe. Ich sage mal vorsichtig, das hätte ich direkt in HTML und CSS schreiben können. Wenn Sie sich das jetzt mal anschauen, das ist beileibe nicht viel. Der größte Bestandteil ist der Inhalt. Inhalt übernehmen geht relativ schnell, und was ich an Formatangaben hier in den CSS bereits drin habe, wenn man nicht wirklich immer nachschauen muss, was am Anfang völlig verständlich ist. Wenn man das im Kopf hat, kann man das so runterschreiben. Dann bin ich identisch schnell wie auch direkt im InDesign-Dokument mit der ganzen Anlage der Absatzformate und Zeichenformate, und überhaupt der Auswahl von Schriftschnitt, Schriftgrad etc. Also, durchaus eine interessante Vorgehensweise.

HTML und CSS für Designer

Steigen Sie als Designer ein in HTML und CSS. Sie gestalten ein responsives Reisemagazin und erleben dabei, dass der Workflow beim Gestalten nicht anders ist als gewohnt.

3 Std. 9 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!