Stylesheets definieren die Formateigenschaften von HTML-Elementen.
Aktive Alarme werden im folgenden Beispiel mit Fettschrift auf
roten Hintergrund dargestellt, passive Alarme mit grauer Schrift
ohne Hintergrundfarbe. Die Interpretation der Stylesheets erfolgt
im Browser, was sich positiv auf die Ressourcen des Alarmmodems
auswirkt. So wird es gemacht:
Im 'head' der Webseite werden Formate als Klassen definiert:
<style type="text/css">
<!--
.rot1 { background-color: #FF4040; font:bold 12px Tahoma, Verdana, Arial; }
.rot0 { color:#5F5F5F; font: 12px Tahoma, Verdana, Arial; }
-->
</style>
Im 'body' der Seite werden die Alarmtexte 'Motor 1 gestört',
'Motor 2 gestört' usw. in einer Tabelle notiert.
Die Tabellenzelle wird mit dem Attribut 'class' versehen.
Durch den Webserver im Modem wird die Prozessvariable ersetzt,
so daß je nach Wert 0 oder 1 das Format rot0 oder rot1 zur
Anwendung kommt.
<table>
<tr><td>Alarme
<span class="rot1"> Aktiv </span>
<span class="rot0"> Passiv </span>
</td></tr>
<tr><td class="rot®/Process/Bus1/D1/C0;">Motor 1 gestört</td></tr>
<tr><td class="rot®/Process/Bus1/D1/C1;">Motor 2 gestört</td></tr>
:
Die Legenden 'Aktiv' und 'Passiv' vermitteln schon beim
Entwurf der Seite einen Eindruck für die jeweilige Darstellung.
Für die konkrete Gestaltung der Alarmzustände hat der Entwickler
alle Möglichkeiten, die CSS Stylesheets bieten. Rote und grüne
rechteckige Flächen (LED's) werden z.B. durch eine identische
Wahl von Vorder- und Hintergrundfarbe erzeugt. Wird dann noch
ein Rahmen zugefügt, sind die LEDs echten Grafiken ebenbürtig.
Wem das nicht reicht, kann auch noch Hintergrundbilder zufügen.
Die Anwendung des Attributs 'class' ist grundsätzlich nicht auf
bestimmte HTML-Elemente beschränkt. Durch die Formatierung von
Klickbuttons ergeben sich weitere Möglichkeiten, z.B. ein
'EIN'-Button für eine Rückmeldung grün zu hinterlegen.
Für weitere Informationen zu den CSS Stylesheets wird SELFHTML
von Stefan Münz empfohlen (
http://de.selfhtml.org), dort stehen
auch Downloads für SELFHTML zum Offline-Lesen bereit.