Farbige Links - Links ohne Unterstreichung erstellen

[nettesekel]

Ich möchte euch mit folgender Anleitung zeigen, wie ihr ganz einfach Links in verschiedenen Farben formatieren könnt.

Immer wieder taucht die Frage nach farbigen Links auf, deshalb möchte ich an dieser Stelle eine kurze Anleitung dazu schreiben. Eine grundsätzliche Vorraussetzung um Links innerhalb eines Projekts verschiedene Farben zuweisen zu können, ist, in der Designansicht keine Einstellungen für Links vorzunehmen.  Die Linkeinstellungen aus der Designansicht dominieren alle weiteren Einstellungen über Formatvorlagen und sorgen somit für ein wüstes Durcheinander bei den Linkfarben. Also im Design diesen Bereich bitte nicht antasten und falls schon passiert, alle Einstellungen auf automatisch zurücksetzen.



Um innerhalb eines Projekts Links verschiedenfarbig zu formatieren nutzen wir Formatvorlagen, oder auch CSS-Klassen genannt.
Nehmen wir an, wir wollen unserem Projekt Links in den Farben blau, grün und orange verwenden. Legen wir los!
Wir öffnen die Arbeitsansicht oder auch Seitenansicht...



Nachdem wir einen eindeutigen Namen für unsere Formatvorlage vergeben haben, gelangen wir zur Eigenschaftenpalette, über welche wir die gewünschten Einstellungen vornehmen können. Die von mir vorgenommenen Einstellungen, erklären sich eigentlich von selbst. Ausgenommen die Einstellung unter „Effekte”. Hier ist standardmäßig ein Häkchen bei „automatisch” gesetzt, welches von mir entfernt wurde. Das Entfernen des Häkchens bewirkt, dass die Links ohne Unterstreichung dargestellt werden.



Wir bestätigen unsere Formatangaben mit einem Klick auf den OK-Button und gelangen wieder zur vorherigen Ansicht. Hier klicken wir nun erneut auf den Button „Neu...” und erstellen eine weitere Formatvorlage. Warum? Aus dem Web kennt sicher jeder von Euch das „Verhalten” von Links. So verändert sich zum Beispiel die Farbe eines Links, wenn ich mit dem Mauszeiger über den Link fahre.
Um diesen Effekt zu erzielen, legen wir unsere nächste Formatvorlage an. Wichtig ist hierbei der Name der Klasse, damit später auch alles wie gewünscht funktioniert.
Für unsere Ausgangsklasse, also für die erste Formatvorlage, haben wir den Namen „Link_blau” vergeben. Für der hover-Effekt muss nun unsere folgende Formatvorlage den Namen „Link_blau:hover” erhalten. Also je nachdem, wie eure erste Formatvorlage heißt, die zweite Formatvorlage erhält den selben Namen in gleicher Schreibweise ergänzt durch den Zusatz „:hover”.
Für diese Formatvorlage brauchen wir nur die Einstellungen vornehmen, welche für ein verändertes Aussehen des Links sorgen. Alle anderen Einstellungen, die identisch mit denen der Ausgangsklasse bleiben sollen, brauchen wir nicht erneut vornehmen, sie werden von der Ausgangsklasse automatisch weitergegeben. In meinem Fall soll sich bei Mausover nur die Farbe des Links ändern und ich möchte, dass er unterstrichen dargestellt wird. Also nehme ich bei der neuen Klasse auch nur diese Einstellungen vor.
Folgt bitte den Screenshots.





Wem diese „Funktionen” für seine Links ausreichen, der kann an dieser Stelle aufhören. Wer allerdings auch unterschiedliche Darstellungen für den aktiven und  den besuchten Link anstrebt, der legt nun zwei weitere Formatvorlagen an. Hierbei gehen wir genauso vor, wie bei der Formatvorlage für den Hover-Effekt.
Diese Formatvorlagen bekommen in meinem Fall die Namen „Link_blau:active”  und „Link_blau:visited”.
Also je nachdem, wie eure erste Formatvorlage heißt, die dritte und vierte Formatvorlage erhalten den selben Namen in gleicher Schreibweise ergänzt durch den Zusatz „:active” bzw. „:visited”.

Nun wiederholen wir den kompletten Vorgang noch einmal für die grünen Links, wobei bei der Benennung der Formatvorlage das „ü” durch „ue” ersetzt werden sollte, und noch ein weiteres Mal legen wir 4 Formatvorlagen an für die orangen Links.

In meinem Falle bekommen diese Formatvorlagen die Namen:

Link_gruen
Link_gruen:hover
Link_gruen:active
Link_gruen:visited

Link_orange
Link_orange:hover
Link_orange:active
Link_orange:visited


Nachdem wir nun alle erforderliche Vorarbeit geleistet haben, können wir jetzt drei Links einfügen und diesen unsere angelegten Formatvoragen zuweisen. Hierzu markiert ihr den zu formatierenden Link und geht vor wie im folgenden Screenshot.



Auch diesen Vorgang wiederholt ihr für die anderen zwei Farben. Und siehe da, schon haben wir innerhalb eines Projekts drei Links in drei verschiedenen Farben.




Viel Spaß! :-)