Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Alles hat ein Ende...

Eine Weisheit der Dakota-Indianer sagt:
"Wenn Du entdeckst, dass Du ein totes Pferd reitest, steig ab!"

Vor fast fünf Jahren habe ich die NOF-Community gegründet und nachdem just zu diesem Zeitpunkt das „alte NOF-Forum“ quasi über Nacht vom Betreiber geschlossen wurde, war mein Forum für viele Nutzer von NetObjects Fusion eine willkommene Alternative.

Inzwischen sind weit über 5000 NetObjects-Nutzer in der NOF-Community registriert und täglich kommen weitere hinzu. An interessierten Mitgliedern fehlt es also nicht. Was aber fehlt, sind Mitglieder, die Lust haben, anderen Nutzern bei der Lösung ihrer vielfältigen Probleme in der Anwendung von NetObjects Fusion zu helfen. Vielleicht, weil viele von ihnen - ebenso wie ich - das Interesse an NOF verloren haben und zwischenzeitlich mit anderen Programmen arbeiten.

Aktuell ist es so, dass der Support wie die Kosten für den Betrieb der NOF-Community fast ausschließlich von mir übernommen werden. Dies, und die Tatsache, dass ich die Arbeit mit NetObjects Fusion nicht mehr für zeitgemäß halte, veranlasst mich, den aktiven Forenbetrieb zu beenden. Die Beiträge, Tipps und Anleitungen aus den letzten Jahren stehen ab heute nur noch als Nachschlagewerk zur Verfügung.

Ich bedanke mich an dieser Stelle ganz herzlich bei allen, die mich und die NOF-Community in den vergangenen Jahren unterstützt haben.

Beste Grüße nettesekel

Die letzten Beiträge

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

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • 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... ;)