Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Neuigkeiten der NOF-Community

Die letzten Beiträge

Upload von NOF Seite mit Filezilla
von olrim
22. Januar 2017, 22:37:19

Navi und Header fixed
von nettesekel
20. Januar 2017, 17:15:27

Link mit einer Aktion
von Jeanne
20. Januar 2017, 13:19:17

Neuinstallation
von nettesekel
19. Januar 2017, 19:04:32

Text geht auf über Text
von dummy
15. Januar 2017, 11:15:20

* Friendship

DER Katzenblog – mit tollen Tipps und Ideen für deine Katze(n) <3

Blogs zu unserem Forum

Button zum Forum Blog
Testbericht NOF 13

* Social Media...

onlinestreet.de - Verzeichnis redaktionell ausgewählter Webseiten
Verzeichnis ausgewählter Webseiten zum Thema:
Internet » Chats und Foren
Geführt im Verzeichnis ausgewählter Webseiten: NOF-Community - Deutschsprachiges NetObjects Fusion Forum
Fachanwalt für Internet-Recht C.Schmietenknop

Autor Thema: Farbige Links - Links ohne Unterstreichung erstellen  (Gelesen 904 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8121
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Farbige Links - Links ohne Unterstreichung erstellen
« am: 07. August 2012, 09:50:40 »
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ß! :-)
« Letzte Änderung: 27. Dezember 2016, 13:10:46 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

 


Wenn dir dieser Artikel gefallen hat, dann empfehle ihn doch weiter... ;)