Tutorial: Verschiedene Links definieren

Hi,
viele von euch haben sich bestimmt schon die Frage gestellt, wie man Links
in der Sidebar, Navigation , oder im Content verschieden formatiert darstellt.

Ich werde euch in diesem Tutorial eine Möglichkeit zeigen.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Hier im Homepage-Baukasten wird dies bei dem Design "CSS-Design -
Ausschließlich für Profis geeignet" eingefügt.

- Login (hier)
- Design einstellen (hier)
- "CSS-Design - Ausschließlich für Profis geeignet" wählen
- Speichern

- "Erweiterte Einstellungen"
- "CSS-Code ohne Style Tags"
- Linkdefinition einfügen
- Speichern

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Zuerst müssen wir die normalen Links in CSS definieren.
CSS-Code ohne Style-Tags

a:link = Links, die noch nicht besucht worden sind
a:visited = Links, die bereits besucht worden sind
a:hover = während sich der Anwender mit der Maus auf dem Element befindet
a:active = gerade angeklicktes Element

font-weight: normal; = Schriftgewichtung (normal: Ausgangswert)
color: #000000; = Linkfarbe (in diesem Fall #000000: schwarz)
text-decoration: underline; = kann Links unter-, überstreichen,
durchstreichen oder blinken lassen (in diesem Fall: unterstrichen)

So werden alle Links auf der ganzen Website angezeigt.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Möchten wir aber verschiedene Linkformationen auf der Website
anzeigen, müssen wir dies durch einen weiteren CSS-Code ergänzen.
CSS-Code ohne Style-Tags

NAME = kann durch beliebiges Wort ersetzt werden

* die anderen Erklärungen wurden oben schon beschrieben

Jetzt ist noch immer die Standard Linkformatierung aktiv.
Um dies zu ändern, müssen wir einen Eingriff in das HTML machen,
oder wir nützen den Editor des Homepage-Baukastens.

Editor vom Homepage-Baukasten
- Login (hier)
- Seiten editieren (hier)
- gewünschte Seite wählen
- Link markieren: * Bild anzeigen
- "Link einfügen/editieren": * Bild anzeigen
- gewünschte URL einfügen: * Bild anzeigen
- "Erweitert"
- "Stylesheet Klasse": * Bild anzeigen
(dort gibst du den im CSS definierten Klassennamen an, in unserem Falle NAME)
- OK
- Speichern

HTML
- Login (hier)
- Seiten editieren (hier)
- gewünschte Seite wählen
- Quellcode
- an der gewünschten Stelle folgenden Code einbinden:

a class=" " = wählt die im CSS angewandte Klasse
NAME = unser definiertes Element
href=" " = Linkziel
takimata = kann durch x-beliebigen Text ersetzt werden

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Codeschnipsel-Zusammenfassung

CSS-Code ohne Style Tags

HTML-Code

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Viel Spass beim ausprobieren.

Gruss
Riki