Links können was erzählen...

Von vielen Websites ist man gewohnt, dass Pfeile nach innen oder außen anzeigen, ob ein Link auf eine andere Seite der besuchten Website verzweigt, oder außerhalb des Webangebots eine andere Internetseite repräsentiert. Woher weiß der Link das und wird die Darstellung realisiert.

Stylesheet Klasse

Wenn ein Text im OpenCMS Editor verlinkt wird, gibt es eine Reihe von möglichen Einstellungen und Angaben. Der Wert "Stylesheet Klasse" findet sich im Quelltext wieder und kann über das CSS definiert werden. Dies verlangt vom Redakteur gewissenhafte Arbeit und die Kenntnis über die möglichen bzw. definierten Stylesheet Klassen. Eine andere Möglichkeit wäre, die Links daraufhin zu untersuchen, ob es interne oder externe Links sind und ggf. welche Dokumenttypen verlinkt werden. 

Bei der Abwägung, welche Lösung für meine kleine, private Homepage zum Einsatz kommt, war die Entscheidung klar. Wenn ich Lust und Zeit habe an dieser Stelle zu optimieren, werde ich die Lösung vielleicht umbauen. Natürlich wäre ich auch dankbar für die Beschreibung, wie dies umzusetzen ist.

Nun zurück zu den verfügbaren Stylesheet Klassen:

• extlink
• intlink
• anker
• pdf

Es ist leicht diese Stylesheet Klassen zu erweitern, z.B. wären ergänzende generische Dokumenttypen, wie Excel, Word oder equivalent die Open Office Formate naheliegend.

 

 

 

Piktogramme

Die Links sollen mit kleinen Bildern versehen werden, die eine Bedeutung transportieren. Diese Bildelemente können sinnvoll in folgendem Verzeichnis abgelegt werden:

/system/modules/org.opencms.frontend.templateone/ressourcen/

Entsprechend der definierten Klassen wird je ein GIF-Bild extlink.gif, intlink.gif, anker.gif und pdf.gif abgelegt.

CSS Anpassung

Die CSS Datei muss nun um die definierten Klassen erweitert werden: /system/modules/org.opencms.frontend.templateone/ressourcen/style_accessible.css

/* Klassen intlink, extlink und pdf */
a.extlink {
padding-left:        20px;
background-image:    url(<%= cms.getResourcePath() %>extlink.gif);
background-position: left;
background-repeat:   no-repeat;
}
a.intlink {
padding-left:        20px;
background-image:    url(<%= cms.getResourcePath() %>intlink.gif);
background-position: left;
background-repeat:   no-repeat;
}
a.intlink {
padding-left:        20px;
background-image:    url(<%= cms.getResourcePath() %>anker.gif);
background-position: left;
background-repeat:   no-repeat;
}
a.pdf {
padding-left:        20px;
background-image:    url(<%= cms.getResourcePath() %>pdf.gif);
background-position: left;
background-repeat:   no-repeat;
}