www. SATIS. de

(20.09.07)

Tipp-Bereich 10: Telekommunikation (WWW + E-Mail) (G 75-84)
Tipp-Gruppe 84: Weiteres zur optimalen Gestaltung von Webseiten

Tipp 84-5 : SATIS-CSS für andere Web-Seiten verwenden

Kurz-Info

Am Ende der Titelseite von www.satis.de werden dem Benutzer 16 fertige Farb- und Schrift-Schemata für die Darstellung dieser Webseite zur Auswahl angeboten; Näheres zu deren Benutzung steht im daneben stehenden Link "Mehr Informationen...".
In diesem Tipp wird beschrieben, wie man diese Schemata aus SATIS herauskopieren und in einer anderen Webseite integrieren kann.
Dies ist nicht sehr aufwendig, aber auch nicht ganz einfach, denn es werden Kenntnisse über HTML und möglichst auch CGI-Skripte vorausgesetzt. Ein versierter PC-Nutzer wird das Problem schon mit den unter Punkt 1 angebotenen Downloads selbst bewältigen können.

Beschreibung

Allgemeines zum Bereitstellen von CSS auf Webseiten

"CSS" (Cascading Style Sheets) sind Notationen zur Darstellungsweise von Webseiten bzw. HTML-Dateien. Sie können offline in einem Browser definiert und genutzt werden (vgl. SATIS-Tipp 79-4), aber auch auf einer Webseite zu deren Darstellung angeboten werden.
Werden, wie hier auf www.satis.de, dem Nutzer gleich mehrere Alternativen von CSS zur dauerhaften Aufbereitung der Webseite angeboten, so muss die Information über das ausgewählte Schema auf den Rechner des Nutzers übertragen werden können. Der Dialog und die Übertragung solcher kleiner Datenpakete ("Cookies") erfolgt in unserem Falle mit Hilfe von CGI-Skripten.
Bei der Übertragung der Einstellungsmöglichkeiten (CSS) von SATIS auf eine andere Webseite müssen also neben den CSS auch diese CGI-Skripte übertragen und passend eingerichtet werden. Dies wird nachfolgend beschrieben.

1. Download der Pakete (CSS und CGI-Skripte)

Die innerhalb der SATIS-Webseite neun verwendeten CSS-Dateien sowie das benötigte CGI-Skript können unter den folgenden Direktlinks heruntergeladen und anschließend gemäß Tipp 29-1 "entzippt" werden:

http://www.satis.de/www/75-84_ww/84_desig/84-5_satis_css.zip
http://www.satis.de/www/75-84_ww/84_desig/84-5_satis_cgi.zip

Diese Dateien können nach dem Entpacken mit einem ASCII-Editor aufgerufen und ggf. auch editiert werden.

2. Installieren und Anpassen des CGI-Skripts

Jeder Webspace-Provider, der das Ausführen eigener Skripte erlaubt, besitzt einen so genannten "Perl-Interpreter", um die in der Programmiersprache "Perl" geschriebenen CGI-Skripte ausführbar zu machen.
Der Pfad zu diesem Interpreter kann von Provider zu Provider variieren, lautet aber meist auf den Eintrag "#!/usr/bin/perl". Dieser muss in CGI-Skripten immer in der angegebenen Form in der ersten Zeile des CGI-Skript-Quelltextes stehen. So auch in dem downgeladenen CGI-Skript.
Nach dieser Zeile folgt im Skript ein kleiner Konfigurationsteil (deutlich gemacht durch Anmerkungen), in dem der Anwender den relativen Pfad zu den CSS-Dateien sowie das Standard-Stylesheet anpassen bzw. eingeben muss. Erläuternde Kommentarzeilen haben wir in das Skript eingefügt.

Das CGI-Skript muss in den eigens dafür vorgesehenen Ordner im Homepagebereich des Servers per FTP hochgeladen werden. Nach dem Hochladen erhält diese Datei automatisch vom Server eine Kodierung für Schreib- und Leserechte. Diese müssen auf das Tripel 755 abgewandelt werden. Je nach der verwendeten Zugangssoftware kann dieses Verfahren etwas unterschiedlich sein. Hier folgt eine Kurzbeschreibung für einen beliebigen FTP-Client:

- klicke mit der rechten Maus auf den Dateinamen "css-switcher.cgi"
- wähle im Kontextmenü den Eintrag "chmod" (change mode) aus
- es erscheint dann ein Fenster mit den gesetzten Dateiattributen für die Bereiche "Owner", "Group" und "Public"; vermutlich steht der Wert auf 644
- um die Einstellung zu verändern, muss für jede der 3 Kategorien das an der Stelle "Execute" befindliche ausgewählt werden (Häkchen setzen); die Werte springen dann automatisch auf 7, 5, 5
- der Vorgang wird mit der Eingabetaste abgeschlossen

Ergebnis: Ein fremder Nutzer der Webseite kann nun eines der angebotenen CSS zur Darstellung dieser Webseite auf seinem eigenen Rechner auswählen.

3. Bereitstellung der CSS für einzelne HTML-Seiten

Im Quelltext jeder HTML-Seite, für die eine Darstellung über die angebotenen CSS ermöglicht werden soll, muss im Kopfbereich, also zwischen <HEAD> und </HEAD>, ein entsprechender Eintrag gemacht werden:

<LINK rel="stylesheet" type="text/css" href="/cgi-bin/css-switcher.cgi">

Der relative Pfad "/cgi-bin/css-switcher.cgi" gibt den Ort des auszuführenden Skripts auf dem Server des Providers an. Dieser kann von unserem voreingestellten Pfad abweichen und muss vorher vom Benutzer über die Infoseite des Providers in Erfahrung gebracht und ggf. geändert werden (s. auch Punkt 2).

4. Einbinden der CSS-Auswahlmöglichkeit in die HTML-Seiten

In der ZIP-Datei sind alle neun auf der SATIS-Webseite aufzurufenden "CSS-Style Sheets" (Dateiendung ".css") enthalten. Diese können nun getrennt voneinander in beliebige HTML-Seiten der Homepage eingebaut werden. Es reicht allerdings auch, diese einmalig auf der Startseite ausführlich anzubieten und auf den anderen HTML-Seiten einen passenden Verweis zu machen (s. unter 3.).

Wir empfehlen, den HTML-Quelltext der Hauptseite von www.satis.de (mittels der Menüpunkte "Ansicht - Quelltext anzeigen") anzusehen, um diese auch als Beispiel für eigene CSS zu nutzen. In diesem wird, wie auf der Hauptseite ersichtlich wird, auch ein Symbol für jede Darstellungsweise erzeugt. Vereinfachend kann man den nachfolgenden Textausschnitt ohne diese grafischen Symbole in einen eigenen HTML-Quelltext kopieren, um dann die Seite in den 16 Varianten darstellen zu können; Voraussetzung sind natürlich die oben stehenden Punkte 1-3.

<a href="cgi-bin/css-switcher.cgi?setstyle=schrift_01">Schrift 1</a> 
<a href="cgi-bin/css-switcher.cgi?setstyle=schrift_02">Schrift 2</a> 
<a href="cgi-bin/css-switcher.cgi?setstyle=schrift_03">Schrift 3</a> 
<a href="cgi-bin/css-switcher.cgi?setstyle=schrift_04">Schrift 4</a> 
<a href="cgi-bin/css-switcher.cgi?setstyle=farbe_01">Farbe 1 Klein</a> 
<a href="cgi-bin/css-switcher.cgi?setstyle=farbe_02">Farbe 2</a> 
<a href="cgi-bin/css-switcher.cgi?setstyle=farbe_03">Farbe 3</a> 
<a href="cgi-bin/css-switcher.cgi?setstyle=farbe_04">Farbe 4</a>br>
<a href="cgi-bin/css-switcher.cgi?setstyle=style_00">CSS aus</a>