Tutorial

Rollover-Effekt mit Style Sheets

Hier versuche ich im Detail zu erklären, wie ich die Homepage «kmec - Mechanik» erstellt habe.
Diese Homepage besteht aus Container (<div>-Tag) und die meisten Stilzuweisungen werden in der externen CSS-Datei (style.css) gespeichert, um das "Corporate Design" für Schrift und Links für alle Seiten dieser Homepage gleich zuhalten und um Änderungen von zentraler Stelle aus vornehmen zu können.

Der Aufbau

Kopfteil

Der Kopfteil soll aus einem Container, der über die ganze Seitenbreite reicht, mit schwarzem Hintergrund und Schriftart: Trebuchet MS, -grad: 36px, -schnitt: kursiv, -farbe: weiss, -ausrichtung: zentrisch; ausgestattet sein. Später soll eventuell noch ein Besucherzähler darin untergebracht werden.

Navigationsteil

Die Navigation soll in einem Container am linken Browser-Fenster-Rand sein mit einem kleinen Abstand zur Kopfzeile. In diesem Container wird eine Link-Liste mit Rollover-Effekt erstellt.

Inhaltsteil

Der eigentliche Inhaltsteil nimmt den restlichen Platz der Seite ein, auch in einem kleinen Abstand zu Kopf- und Navigationsteil.

Dateistruktur

Um den Überblick der verschiedenen Dateien zu behalten, habe ich folgende Dateistruktur gewählt:

dateistruktur

Die Konstruktion

Style Sheets

Zuerst werden wir in der CSS-Datei die Stilzuweisungen vornehmen. Wir öffnen den Windows-Editor und schreiben Zeile für Zeile in den Editor.
Hinweis:
Gespeichert wird diese Datei mit dem Dateiname "style.css" im gleichen Ordner, wie wir später die Datei "index.html" speichern (siehe Dateistrukur oben).
Leerschläge, Zeilenschaltung und Tabulator werden bei HTML und CSS nicht berücksichtigt, du kannst versuchen das Script übersichtlich zu gestalten.
Bei mir sieht dies so aus:
/* StyleSheet für kmec-Seiten */

/* Kopfzeile*/
.kopf                 {display: block;
                      border: solid 1px #FFFFFF;
                      background-color: #000000;
                      margin-bottom: 1px;
                      margin-top: 1px;
                      padding-left: 1px;
                      position: absolute;
                      width:1000px;
                      height: 92px;
                      left: 5px;
                      top: 5px;
                      font: bold italic 36px "Trebuchet MS",verdana, sans-serif;
                      color: #FFFFFF;
                      text-align: center;}

/* Navigation, Menues */
.menu                 {position: absolute;
                      width:150px;           
                      left: 5px;
                      top: 100px;
                      font: normal 13px "Trebuchet MS",verdana, sans-serif;
                      background:TRANSPARENT;}

.menu ul              {list-style-type: none;
                      padding: 0px;
                      margin: 0px;}

/* Link-Formatierung, Rollover */
.menu li a:link,
.menu li a:visited,
.menu li a:active     {display: block;
                      border: solid 1px #FFFFFF;
                      background-color: #FFBF00;
                      color: #800000;
                      text-decoration: none;
                      margin-bottom: 1px;
                      margin-top: 1px;
                      padding-left: 5px;
                      height: 24px;
                      line-height: 24px;}

.menu li a:hover      {background-color:#FF7F00;
                      color:#000000;
                      border: solid 1px #FFFFFF;}

/* Punkte vor dem Menuetext */
.punkt_w              {color: #FFFFFF;
                      font-weight: bold;
                      font-size: 8px;}

/* der aktive Menuepunkt */
.aktiv                {display: block;
                      font-weight:bold;
                      border: solid 1px #FFFFFF;
                      background-color: #FF0000;
                      color: #000000;
                      text-decoration:none;
                      margin-bottom: 1px;
                      margin-top: 1px;
                      padding-left: 15px;
                      height: 24px;
                      line-height: 24px;}

/* Hier soll noch die Formatierung des eigentlichen Inhalts folgen */

Hier nun Zeile für Zeile die Erklärung dazu:
Script in der CSS-Datei
Bedeutung
Bemerkung
/* StyleSheet für kmec-Seiten */
Ein Hinweis für welche Seiten diese css-Datei geschrieben wurde.
CSS-Kommentare beginnen mit den Zeichen "/*" und enden mit den Zeichen "*/". Sie können überall zwischen Definitionen auftreten und sollen keinen Einfluß auf die Darstellung haben. Kommentare dürfen nicht verschachtelt werden.
Kommentare sind ein wichtiger Bestandteil des Scripts, vor allem bei längeren!
/* Kopfzeile*/
Hier beginnt die Stilzuweisung für den Kopfteil.
Kommentar
.kopf            {
Die Klasse mit dem Namen "kopf".
Die Stilzuweisung beginnt mit der geschwungenen Klammer.
Eine Klasse kann jedem HTML-Tag über seinen Namen zugewiesen werden.
Beispiel: <div class="kopf">…</div>
display: block; Mit diesem Befehl wird ein Link auf die gesamte Zeile klick-sensitiv, während ja die Unterstreichung auf den Linktext beschränkt bleibt. Wir wollen ja ein Rollover-Effekt erzeugen und dies ist der Anfang.
Mehr zu diesem Thema findest du hier: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display
border: solid 1px #FFFFFF;
Ein Rahmen mit durchgezogener Linie, 1 Pixel breit in der Farbe weiss.
Durch den weissen Rahmen entsteht ein Abstand zwischen den Elementen.
Mehr zu diesem Theam findest du hier: http://de.selfhtml.org/css/eigenschaften/rahmen.htm
background-color: #000000;
Hintergrundfarbe: schwarz

margin-bottom: 1px;
Aussenrand/Abstand unten zum Elternelement
Mehr zu diesem Thema findest du hier: http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin_bottom
margin-top: 1px;
Aussenrand/Abstand oben zum Elternelement Mehr zu diesem Thema findest du hier: http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin_top
padding-left: 1px;
Innenabstand links
Mehr zu diesem Thema findest du hier: http://de.selfhtml.org/css/eigenschaften/innenabstand.htm#padding_left
position: absolute;
absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements Mehr zu diesem Thema findest du hier: http://de.selfhtml.org/css/eigenschaften/positionierung.htm
width:1000px;
Breite des Containers in Pixel

height: 92px;
Höhe des Containers

left: 5px;
Abstand links des Containers zum nächsthöheren Vorfahrenelement

top: 5px;
Abstand oben des Containers zum nächsthöheren Vorfahrenelement
font: bold italic 36px "Trebuchet MS",verdana, sans-serif;
Schriftart
fett, kursiv, 36Pixel, wenn vorhanden Trebuchet MS ansonsten Verdana, wenn auch nicht vorhanden Standardschrift ohne Serifen
color: #FFFFFF;
Schriftfarbe (weiss)

text-align: center;
Schriftausrichtung (zentrisch)

}
Ende der Anweisung "kopf"




/* Navigation, Menues */
Hier beginnt die Stilzuweisung für die Seiten-Navigation
Kommentar
.menu            {
Die Klasse mit dem Namen "menu".
Die Stilzuweisung beginnt mit der geschwungenen Klammer.
Eine Klasse kann jedem HTML-Tag über seinen Namen zugewiesen werden.
Zum Beispiel: <div class="menu">…</div>
position: absolute;
absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements Mehr zu diesem Thema findest du hier: http://de.selfhtml.org/css/eigenschaften/positionierung.htm
width:150px;
Breite des Containers in Pixel
left: 5px;
Abstand links des Containers zum nächsthöheren Vorfahrenelement
top: 100px;
Abstand oben des Containers zum nächsthöheren Vorfahrenelement
font: normal 13px "Trebuchet MS",verdana, sans-serif;
Schriftart normal, 13Pixel, wenn vorhanden Trebuchet MS ansonsten Verdana, wenn auch nicht vorhanden Standardschrift ohne Serifen
background:TRANSPARENT;
Hintergrund, transparent

}
Ende der Anweisung "menu"



.menu ul        {
Die Klasse mit dem Namen "menu ul".
Die Stilzuweisung beginnt mit der geschwungenen Klammer.
Weist dem Tag <ul> Stile zu, wenn das Elternelement die Klasse "menu" besitzt.
padding: 0px;
Innenabstand, allgemein

margin: 0px;
Aussenrand/Abstand allgemein

}
Ende der Anweisung "menu ul"



/* Link-Formatierung, Rollover */
Hier beginnt die Stilzuweisung für die Rollover. Kommentar
.menu li a:link,
.menu li a:visited,
.menu li a:active    {
Die folgenden Stilzuweisungen gelten für Links die:
- noch nicht besucht wurden
- bereits besucht wurden
- für gerade angeklickte Elemente.
Die Stilzuweisung beginnt mit der geschwungenen Klammer.
Weist dem Tag <il> Stile zu, wenn das Elternelement die Klasse "menu" besitzt und einen Link beherbergt.
display: block;
Mit diesem Befehl wird ein Link auf die gesamte Zeile klick-sensitiv, während ja die Unterstreichung auf den Linktext beschränkt bleibt. Wir wollen ja ein Rollover-Effekt erzeugen und dies ist der Anfang.
Mehr zu diesem Thema findest du hier: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display
border: solid 1px #FFFFFF;
Ein Rahmen mit durchgezogener Linie, 1 Pixel breit in der Farbe weiss. Durch den weissen Rahmen entsteht ein Abstand zwischen den Elementen.
Mehr zu diesem Theam findest du hier: http://de.selfhtml.org/css/eigenschaften/rahmen.htm
background-color: #FFBF00;
Hintergrundfarbe:

color: #800000;
Schriftfarbe:

text-decoration: none;
Unterdrückung der Unterstreichung
Mehr zu diesem Thema findest du hier: http://de.selfhtml.org/html/verweise/definieren.htm#gestalten
margin-bottom: 1px;
Aussenrand/Abstand unten zum Elternelement Mehr zu diesem Thema findest du hier: http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin_bottom
margin-top: 1px;
Aussenrand/Abstand oben zum Elternelement Mehr zu diesem Thema findest du hier: http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin_top
padding-left: 5px;
Innenabstand links Mehr zu diesem Thema findest du hier: http://de.selfhtml.org/css/eigenschaften/innenabstand.htm#padding_left
height: 24px;
Höhe des Elementes
line-height: 24px;
Zeilenhöhe
Mehr zu diesem Thema findest du hier: http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#line_height
}
Ende der Anweisung ".menu li a:link, .menu li a:visited, .menu li a:active



.menu li a:hover    {
Weist die Stile dem Element bei "mouseover" zu. Rollover-Effekt.
Weist dem Tag <il> Stile zu, wenn das Elternelement die Klasse "menu" besitzt und einen Link beherbergt.
Mehr zu diesem Thema findest du hier: http://de.selfhtml.org/…visited_focus_hover_active
background-color:#FF7F00;
Hintergrundfarbe

color:#000000;
Schriftfarbe

border: solid 1px #FFFFFF;
Ein Rahmen mit durchgezogener Linie, 1 Pixel breit in der Farbe weiss. Durch den weissen Rahmen entsteht ein Abstand zwischen den Elementen.
Mehr zu diesem Theam findest du hier: http://de.selfhtml.org/css/eigenschaften/rahmen.htm
}
Ende der Anweisung ".menu li a:hover"




/* Punkte vor dem Menuetext */
Hier beginnt die Stilzuweisung für die drei Punkte vor dem Linktext. Kommentar
.punkt_w        {
Die Klasse für die weissen Punkte vor dem Menue-Eintrag.
Die Stilzuweisung beginnt mit der geschwungenen Klammer.
Der Klassenname ".punkt_w" wählte ich für weisse Punkte, falls ich noch eine weitere Klasse mit schwarzen Punkten (".punkt_s") brauche, um sie gut voneinander zu unterscheiden.
color: #FFFFFF;
Schriftfarbe: weiss
font-weight: bold;
Schriftschnitt: fett
font-size: 8px;
Schriftgrad: 8 Pixel

{
Ende der Anweisung ".punkt_w"



/* der aktive Menuepunkt */
Hier beginnt die Stilzuweisung für den aktiven Menueeintrag.
Kommentar
.aktiv            {
Die Klasse für den Menueeintrag der aktiven/aktuelle Seite.
Die Stilzuweisung beginnt mit der geschwungenen Klammer.

display: block;
Mit diesem Befehl wird ein Link auf die gesamte Zeile klick-sensitiv, während ja die Unterstreichung auf den Linktext beschränkt bleibt. Wir wollen ja ein Rollover-Effekt erzeugen und dies ist der Anfang.
Mehr zu diesem Thema findest du hier: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display

(Ich merke gerade, dieses Attribut kann ich weglassen, denn hier gibt es gar keinen Link)
font-weight:bold;
Schriftschnitt: fett
color: #000000;
Schriftfarbe: schwarz
background-color: #FF0000;
Hintergrundfarbe

border: solid 1px #FFFFFF;
Ein Rahmen mit durchgezogener Linie, 1 Pixel breit in der Farbe weiss. Durch den weissen Rahmen entsteht ein Abstand zwischen den Elementen.
Mehr zu diesem Theam findest du hier: http://de.selfhtml.org/css/eigenschaften/rahmen.htm
text-decoration:none;
Unterdrückung der Unterstreichung Mehr zu diesem Thema findest du hier: http://de.selfhtml.org/html/verweise/definieren.htm#gestalten

(Ich merke gerade, dieses Attribut kann ich weglassen, denn hier gibt es gar keinen Link)
margin-bottom: 1px;
Aussenrand/Abstand unten zum Elternelement Mehr zu diesem Thema findest du hier: http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin_bottom
margin-top: 1px;
Aussenrand/Abstand oben zum Elternelement Mehr zu diesem Thema findest du hier: http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin_top
padding-left: 15px;
Innenabstand links Mehr zu diesem Thema findest du hier: http://de.selfhtml.org/css/eigenschaften/innenabstand.htm#padding_left
height: 24px;
Höhe des Elementes
line-height: 24px;
Zeilenhöhe Mehr zu diesem Thema findest du hier: http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#line_height
}
Ende der Anweisung ".aktiv"



/* Hier soll noch die Formatierung des eigentlichen Inhalts folgen */
Hier kann die Formatierung des letzten Containers beginnen.
Da es sich "nur" um das Grundgerüst einer Homepage handelt, überlasse ich die weiteren Formatierungen dem Besitzer … ;-)

HTML

Nun wenden wir uns der eigentlichen Homepage zu. Wir öffnen den Windows-Editor und schreiben Zeile für Zeile in den Editor.
Das Script sieht so aus:
<html>
<head>
<title>Home</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="kopf">kmec - Mechanik</div>

<div class="menu">
<ul>
<li class="aktiv">&#149;&nbsp;&#149;&nbsp;&#149;&nbsp;&nbsp;&nbsp; Home</li>

<li><a href="seiten/motorraeder.html"><span class="punkt_w">&#149;&nbsp;&#149;&nbsp;&#149;&nbsp;&nbsp;&nbsp;</span>Motorr&auml;der</a></li>

<li><a href="seiten/zuendsysteme.html"><span class="punkt_w">&#149;&nbsp;&#149;&nbsp;&#149;&nbsp;&nbsp;&nbsp;</span>Z&uuml;ndsysteme</a></li>

<li><a href="seiten/elektrik.html"><span
class="punkt_w">&#149;&nbsp;&#149;&nbsp;&#149;&nbsp;&nbsp;&nbsp;</span>Elektrik</a></li>

<li><a href="seiten/ersatzteile.html"><span class="punkt_w">&#149;&nbsp;&#149;&nbsp;&#149;&nbsp;&nbsp;&nbsp;</span>Ersatzteile</a></li>

<li><a href="seiten/elektronik.html"><span class="punkt_w">&#149;&nbsp;&#149;&nbsp;&#149;&nbsp;&nbsp;&nbsp;</span>Elektronik</a></li>

<li><a href="seiten/mechanik.html"><span class="punkt_w">&#149;&nbsp;&#149;&nbsp;&#149;&nbsp;&nbsp;&nbsp;</span>Mechanik</a></li>

<li><a href="seiten/spezial.html"><span
class="punkt_w">&#149;&nbsp;&#149;&nbsp;&#149;&nbsp;&nbsp;&nbsp;</span>Spezial</a></li>

<li><a href="seiten/neu.html"><span
class="punkt_w">&#149;&nbsp;&#149;&nbsp;&#149;&nbsp;&nbsp;&nbsp;</span>Neu</a></li>

<li><a href="seiten/kontakt.html"><span
class="punkt_w">&#149;&nbsp;&#149;&nbsp;&#149;&nbsp;&nbsp;&nbsp;</span>Kontakt</a></li>
</ul>
</div>

<div
 style="position: absolute; left: 157px; top: 102px; height: 600px; width: 848px; background-color: rgb(204, 204, 204); text-align: center;"><span
 style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;"></span><span
 style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;">Home</span><span
 style="font-family: Helvetica,Arial,sans-serif;"></span><br>
</div>

</body>
</html>

Auch hier versuche ich Zeile für Zeile zu erklären:
Script in der HTML-Datei
Bedeutung
Bemerkung
<html>
Jede HTML-Datei beginnt mit diesem Tag
Jedes Anfang-Tag hat in der Regel auch ein End-Tag.
Beispiel: </html>
Ausnahmen bestätigen die Regel.
Zum Beispiel: <hr>, die horizontale Linie kann ohne End-Tag notiert werden
Mehr zu diesem Thema findest du hier:
http://de.selfhtml.org/html/index.htm



<head>
Hier beginnt der Kopfteil der HTML-Datei und darin werden allgemeine Informationen über die HTML-Datei angegeben, beispielsweise kannst du dort die Namen des Autors, Copyright-Vermerke, Titel der Seite usw. notieren. Dieser Teil wird im Anzeigeteil des Browser nicht angezeigt.

<title>Home</title>
Anfang-Tag des Titels, Name des Titels, End-Tag des Titels.
Wird in der Titelleiste des Browserfenster angezeigt.

<link href="style.css" rel="stylesheet" type="text/css">
Hier wird der Link zu der oben erstellten CSS-Datei notiert

</head>
End-Tag des Kopfteils




<body>
Hier beginnt der eigentliche Inhaltsteil der Homepage

<div class="kopf">kmec - Mechanik</div>
Der erste Container.
Die Formatierung dieses Containers erfolgt über class="kopf" in der CSS-Datei.

<div class="menu">
Beginn des zweiten Containers.
Die Formatierung dieses Containers erfolgt über class="menu" in der CSS-Datei.

<ul>
Beginn einer Liste (im zweiten Container)
Die Formatierung erfolgt über .menu ul in der CSS-Datei.

<li class="aktiv">&#149;&nbsp;&#149;&nbsp;&#149; &nbsp;&nbsp;&nbsp; Home</li>
Der erste Listeneintrag.
Die Formatierung dieses Containers erfolgt über class="aktiv" in der CSS-Datei.
Zeigt den aktiven/aktuellen Menüeintrag.
&#149; = Sonderzeichen Mittelpunkt
&nbsp; = erzwungenes Leerzeichen
Mehr zu diesem Thema findest du hier:
http://de.selfhtml.org/html/referenz/zeichen.htm
<li><a href="seiten/motorraeder.html">
<span class="punkt_w">&#149;&nbsp;&#149;&nbsp; &#149;&nbsp;&nbsp;&nbsp;</span> Motorr&auml;der</a></li>
Der zweite Listeneintrag.
Die Formatierung dieses Containers erfolgt über class="punkt_w" und über .menu li a:link, .menu li a:visited, .menu li a:active in der CSS-Datei.
<a href="seiten/motorraeder.html"> ist das Anfang-Tag eines Links mit einem relativen Verweis auf die zu öffnende Datei.
</a> ist das End-Tag des Links.
&auml; = a-Umlaut = "ä" in der HTML-Welt
&uuml; = ü, &Ouml; = Ö
Mehr zu diesem Thema findest du hier:
http://de.selfhtml.org/html/referenz/zeichen.htm
Alle weiteren Listeneinträge sind mit dem oben aufgeführten identisch, einzig der Verweis und der Text des Links ändern sich.
<li><a href="seiten/zuendsysteme.html">
<span class="punkt_w">&#149; &nbsp; &#149; &nbsp;&#149;&nbsp; &nbsp;&nbsp;</span> Z&uuml;ndsysteme</a></li>

</ul>
End-Tag der Liste

</div>
End-Tag des zweiten Containers




<div style="position: absolute; left: 157px; top: 102px; height: 600px; width: 848px; background-color: rgb(204, 204, 204); text-align: center;">
Anfang-Tag des dritten Containers.
Die Formatierung erfolgt (im Moment noch) direkt im Tag

span style="font-family: Helvetica,Arial,sans-serif; font-weight: bold;">Home</span>
Allgemeines Inline-Element
Die Formatierung erfolgt (im Moment noch) direkt im Tag
Mehr zu diesem Thema findest du hier:
http://de.selfhtml.org/html/text/bereiche.htm#inline
</div>
End-Tag des dritten Containers



</body>
End-Tag des Inhaltsteil der Hompage




</html>
End-Tag der HTML-Datei


Für die weiteren HTML-Dateien genügt es die index.html-Datei zu kopieren, also mit Datei speichern unter… einen neuen Namen vergeben und im Ordner seiten zu speichen. Dabei ist zu beachten, dass die Verweise angepasst werden müssen.
In den folgenden Zeilen sind Änderungen notwendig:
Code in der index.html-Datei
Code in den Unterdateien/-seiten
<title>Home</title>
<title>der gewünschte Titel</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="../style.css" rel="stylesheet" type="text/css">
<li class="aktiv">&#149;&nbsp;&#149; &nbsp;&#149;&nbsp;&nbsp;&nbsp; Home</li>
<li><a href="../home.html"><span class="punkt_w">&#149; &nbsp;&#149;&nbsp;&#149;&nbsp;&nbsp;&nbsp;</span>Home</a></li>
Vom aktiven Listeneintrag zum "Link"-Listeneintrag formatieren
<li><a href="seiten/zuendsysteme.html"><span class="punkt_w">&#149;&nbsp;&#149;&nbsp; &#149;&nbsp;&nbsp;&nbsp;</span>Z&uuml;ndsysteme</a></li>
<li><a href="zuendsysteme.html"><span class="punkt_w">&#149;&nbsp;&#149;&nbsp; &#149;&nbsp;&nbsp;&nbsp;</span>Z&uuml;ndsysteme</a></li>
seiten/ bei allen anderen "Link"-Listeneinträgen auch löschen.
Ist beim nächsten Kopieren natürlich nicht mehr notwendig, da ab dieser Datei weitere Unterdateien erzeugt werden.
Und beim dritten Container den eigentlichen Seiten Inhalt einfügen.


Nun wünsche ich viel Spass mit der neuen Homepage … ;-)