Hinweise

Das Skript unterstützt seit Mitte Februar das neue Design von 2006. D.h. beim Anlegen einer neuen Menüstruktur erhalten die Seiten automatisch das neue Design. Das Skript kann allerdings gleichermaßen für alle Design-Varianten verwendet werden, da das Design ausschließlich in der Datei structure.html festgelegt wird, diese aber nach der Initialisierung nicht mehr vom Skript verändert wird.

Zum Anpassen des Designs von Seiten, die mit diesem Skript bearbeitet worden waren, an die Vorgaben von 2006 gibt es eine gesonderte Dokumentation.

Beachten Sie bitte auch die Hinweise zur Umstellung von Institutsauftritten im WWW auf das neue Corporate Design, die einige einführende Informationen zum Umgang mit SHTML und organisatorische Tipps bei der Umstellung größerer Webauftritte enthalten.

Aufgabe und Funktion des Skripts

Mit dem hier beschriebenen Skript "UniDesign" können bereits bestehende WWW-Seiten einer Uni-Einrichtung auf das im Sommer 2004 von der Universität beschlossene einheitliche Design (vgl. Zum Design der WWW-Seiten der Universität zu Köln) umgestellt und anschließend auch verwaltet werden. Hierzu zählt insbesondere das Einfügen und Löschen von Rubriken. Die wesentliche Arbeit des Skripts besteht in der Generierung einer konsistenten Menüstruktur, dem Hauptmenü am linken Rand der Seiten. Das Aussehen kann über die Bearbeitung einer fest vorgegebenen CSS-Datei individuell gestaltet werden. Dagegen können mittels des Skripts keine Dokumente bearbeitet werden.

Das Layout wird mittels der SSI/Shtml-Technik (vgl. Server Parsed Documents) auf die bestehenden Dokumente übertragen. Dazu erzeugt das Skript

• eine zentrale Datei "structure.html", in der das Layout für Seitenkopf und Menüs gespeichert ist,
• eine zentrale Datei "menue.html", in der das Hauptmenü gespeichert ist, das auf der linken Seite erscheint,
• eine zentrale Datei "footer.html", in der das Layout für den Seitenfuß gespeichert ist,
• eine zentrale Style-Sheet-Datei "style.css",
• eine zentrale Datei "konfig.txt" mit den Rubrikeninformationen ,
• Dateien "dirinfo.html" in jedem Rubriken-Verzeichnis,
• eine zentrale Datei sitemap.html mit einer Sitemap für die Einrichtung (wahlweise).

Die Verknüpfung der bestehenden Dokumente mit diesen Dateien vom Benutzer selbst hergestellt werden. Die dazu erforderlichen shtml-Anweisungen werden vom Skript am Bildschirm ausgegeben und müssen per Copy & Paste in die HTML-Dateien eingefügt werden.

Die Dateiverzeichnisse der Rubriken können bereits, müssen aber nicht existieren. Gegebenenfalls werden diese vom Skript angelegt.

Das Skript "UniDesign" nimmt dem Benutzer letztendlich lediglich die etwas mühselige und fehlerträchtige Codierarbeit ab, wie sie in Anleitung für das Erstellen von Uni-Seiten mit dem neuen Design mittels SSI/shtml beschrieben ist.

Das Skript UniDesign wird gestartet über die WWW-Seite: http://webapps.uni-koeln.de/unidesign.

Voraussetzungen

Das Skript geht von den folgenden Voraussetzungen aus:

• Die Einrichtung kann einer der 6 Fakultäten zugeordnet werden oder ist eine zentrale Einrichtung. Aus dieser Zuordnung resultieren:
  • Einsetzen des Namens der Fakultät in den Seitenkopf mit Link auf die Fakultäts-Homepage,
  • Wahl der Farbbalken in der Fakultätsfarbe.

• Es existiert ein Logo/Icon für die Einrichtung, das rechts in den Seitenkopf platziert wird.

• Es existiert ein Unterverzeichnis, in dem alle Bilder, Icons etc. zur Verfügung stehen.

• Die Startseiten jeder Rubrik bzw. jedes Verzeichnisses müssen den Namen index.html oder index.htm haben.

Beispiel

Die Vorgehensweise bei der Benutzung des Skripts wird im Folgenden an Hand eines Beispiels beschrieben. Dazu werden die WWW-Seiten des hypothetischen "Seminars für Webdesign" bearbeitet, die im Verzeichnis /vol/info/www/docs/experimente/institut/ ("Root-Verzeichnis") abgelegt sind. Dabei wird von folgender (relativ einfachen) Dokumentenstruktur ("Rubriken") ausgegangen:

Aktuelles --------|
                  |- Veranstaltungen
                  |- Stellenangebote
Über das Seminar -|
                  |- Profil
                  |- Kontakt
                  |- Mitarbeiter
Lehre/Studium ----|
                  |- Vorlesungen
                  |- Dokumente
                  |- Sudienberatung

    aktuelles 
                  veranstaltungen
                  stellen
    seminar 
                  profil
                  kontakt
                  mitarbeiter
    lehre
                  vorlesungen
                  dokumente
                  beratung

Die Erzeugung des Layouts

Die Layout-Spezifikation wird in einer zentralen Datei "structure.html" abgelegt. Dazu ist auf der Startseite des Skripts "Eine Menüstruktur initialisieren" auszuwählen. Auf der nachfolgenden Seite werden

• der Name der Einrichtung:
  Seminars für Webdesign
• das Root-WWW-Verzeichnis der Einrichtung (unterhalb /vol/info/www/docs/):
  experimente/institut/
• die Fakultät:
  Math.Nat.Fakultät
• der Pfad für das Logo der Einrichtung:
  bilder/logo.gif

angegeben. Nach Bestätigung über die Schaltfläche "Anlegen" muss sich der Benutzer mit Benutzerkennzeichen und Passwort authentifizieren, wobei zusätzlich auch das Zertifikat des Webservers akzeptiert werden muss. Falls an dieser Stelle der Benutzer eine falsche Eingabe macht (z.B. ein falsches Paßwort), muss der Browser komplett neu gestartet werden.

Das Skript gibt nun ein "Feedback" aus. Am Ende dieser Seite werden zwei Blöcke von shtml-Anweisungen ausgegeben, die an den Anfang bzw. an das Ende der Datei index.html (oder index.htm) im Root-Verzeichnis eingefügt werden müssen. Dabei müssen

• Seitentitel
• Name des Autors
• Mail-Adresse des Autors

individuell angepasst werden, also z.B.

<!--#include virtual="dirinfo.html" -->
<!--#set var="titel" value="Startseite des Seminars f&uuml;r Webdesign" -->
<!--#set var="autor" value="Haiko L&uuml;psen" -->
<!--#set var="kontakt" value="luepsen@uni-koeln.de" -->
<!--#include virtual="structure.html" -->
	 

bzw.

<!--# include virtual="footer.html" -->
	 

Für den Fall, dass das bisherige Ersscheinungsbild der Seiten schon mit SSI/SHTML erzeugt worden ist, müssen die alten shtml-Anweisungen durch die o.a. ersetzt werden.

Damit ist nun das Layout über die Dateien "structure.html", "menue.html" und "style.css" erzeugt. Die Startseite des Seminars ist somit "umgestellt". Entweder jetzt oder auch später muss allerdings die Datei "structure.html" noch angepasst werden, dort insbesondere das horizontale "Anker-Menü". Wahlweise kann auch das Erscheinungsbild über Änderungen an der CSS-Datei "style.css" modifiziert werden. Beides ist weiter unten beschrieben.

Erzeugung von Rubriken

Das Anlegen von Rubriken ist sowohl am Anfang bei der Umstellung der Seiten als auch später bei der Ergänzung von Dokumenten erforderlich. Dabei wird davon ausgegangen, dass inhaltlich jede Rubrik genau einem Dateiverzeichnis entspricht. Rubrik- und Verzeichnisnamen müssen nicht gleich sein. Es werden drei Hierarchiestufen für die Rubriken unterstützt, die dann auch in dem Hauptmenü auf der linken Seitenhälfte erscheinen.

Nach der oben beschriebenen Erzeugung des Layouts wird im Feedback gefragt, ob eine Rubrik angelegt werden soll. Alternativ kann auch auf der Startseite des Skripts "Eine Rubrik anlegen" gewählt werden. Nach der Aktivierung wird nach dem Rubrikennamen und dem Verzeichnisnamen gefragt. Die Spezifikation wäre z.B. für eine Hauptrubrik:

• Rubrikname: Aktuelles
• Verzeichnisname: aktuelles

und z.B. für eine Unterrubrik:

• Rubrikname: Stellenangebote
• Verzeichnisname: aktuelles/stellen

Unterrubriken werden aus der Schachtelung der Verzeichnisse erkennt.

Auch hier gibt das Skript ein "Feedback" aus. Am Ende dieser Seite werden (wie oben beschrieben) zwei Blöcke von shtml-Anweisungen ausgegeben, die an den Anfang bzw. an das Ende der Datei index.html (oder index.htm) des jeweiligen Verzeichnis sowie der anderen html-Dateien desselben Verzeichnisses eingefügt werden müssen. Dabei müssen auch wieder

• Seitentitel
• Name des Autors
• Mail-Adresse des Autors

individuell angepasst werden.

Dieser Prozess der Rubrikenerzeugung muss nun für alle Rubriken und Unterrubriken wiederholt werden, die im Hauptmenü erscheinen sollen. Rubriken können auch später jederzeit ergänzt oder gelöscht werden.

Löschen von Rubriken

Rubriken können über den entsprechenden Menüpunkt beim Start des Skripts gelöscht werden. Dabei wird nicht das Verzeichnis gelöscht, sondern lediglich entsprechende Einträge im Menü gelöscht.

Die Datei konfig.txt und Verändern der Menüstruktur

Die Rubrikeninformationen (Rubrikname und Verzeichnisname) sowie die Menüstruktur werden in einer zentralen Datei konfig.txt gehalten, die auch bei jedem Aufruf des Skripts gelesen und wieder geschrieben wird. Diese Datei ist eine einfache txt-Datei und kann mit einem simplen ASCII-Editor auf eigenes Risiko editiert werden. Hierfür gibt es drei Anwendungsfälle, die das Skript (derzeit) nicht abdeckt:

Ändern der Rubrikenreihenfolge:
Die Rubriken werden im Hauptmenü in alfabetischer Reihenfolge angezeigt. Dies ist nicht immer wünschenswert. Nach kompletter Eingabe der Rubriken kann deren Reihenfolge in trivialer Weise in der Datei konfig.txt durch Vertauschen in der Reihenfolge der zugehörigen Verzeichnisnamen geändert werden.

Verlinkung von Unterrubriken in mehreren übergeordneten Rubriken:
Beim Anlegen einer Unterrubrik wird diese genau einer übergeordneten Rubriken (über den Verzeichnisnamen) zugeordnet. Es soll z.B. die Unterrubrik "Veranstaltungen" gleichzeitig unter den Rubriken "Aktuelles" und "Lehre" verlinkt werden. Wurde diese als Unterrubrik von "Aktuelles" mit dem Verzeichnisnamen "veranstaltungen" angelegt, so erscheint "Veranstaltungen" unter "Aktuelles". Um diese auch im Untermenü von "Lehre/Studium" erscheinen zu lassen, muss "veranstaltungen" unter "lehre" eingefügt werden. Hinweis: Beim Aufruf von "Veranstaltungen" über das Menü "Lehre/Studium" wird allerdings im hierarchischen Pfad als übergeordnete Rubrik dennoch "Aktuelles" angezeigt.

Ändern eines Rubrikennamens
Beim Ändern eines Rubrikennamens muss darauf geachtet werden, dass der Name sowohl in den Rubrikdefinitionen am Anfang der Datei konfig.txt als auch bei der Definition der Hierarchie geändert wird.

Warnung:
Auf keinen Fall sollten über Editieren von konfig.txt Rubriken angelegt oder gelöscht werden. Dadurch würde die gesamte Menüstrukltur unbrauchbar.

Aufbau der Datei konfig.txt

Im ersten Teil der Datei konfig.txt werden alle Rubriken und Unterrubriken definiert, wobei die Namen durch einen numerischen Code ergänzt werden, um im Falle gleicher Unterrubrikennamen Eindeutigkeit herzustellen. Im zweiten Teil wird die Hierarchie festgelegt: die Rubrikennamen mit einer Kennzeichnung der Hierarchiestufe:

• + für die oberste 1. Stufe
• - für die 2. Stufe
• * für die 3. Stufe

Die zum o.a. Beispiel gehörende konfig.txt ist hier zu sehen.

Sollen z.B. die Unterrubriken unter "Lehre/Studium" in der Reihenfolge "Vorlesungen", "Dokumente", "Beratung" umsortiert werden und soll unter dieser Rubrik auch die Unterrubrik "Veranstaltungen" (aus "Aktuelles") aufgeführt werden, etwas direkt unter "Vorlesungen", so wäre die entsprechende Zeile aus

aktuelles
+ Aktuelles1116943913
- Veranstaltungen1117014338
- Stellenangebote1117013761	 
	 

wie folgt einzufügen:

+ Lehre/Studium1117014512
- Vorlesungen1117014557
- Veranstaltungen1117014338
- Dokumente1117014609	
- Beratung1117014760
	 

Nach einer Änderung von konfig.txt muss der entsprechende Menüpunkt des Skripts aufgerufen werden, damit die Änderungen auf die WWW-Seiten übernommen werden.

Anpassung der Datei structure.html

Die zentrale Layout-Datei structure.html muss in jedem Fall editiert werden, und zwar um die sichtbaren Punkte des horizontalen "Anker-Menüs" auszuwählen und mit Links zu versehen. Dies kann jederzeit erfolgen, nachdem sie vom Skript erstellt worden ist, da diese Datei vom Skript nicht mehr modifiziert wird.

Suche | 
Kontakt | 
<a href="<!--#echo var="SCRIPT_NAME"-->?_D_"> Druckversion&nbsp;</a>|&nbsp;
English&nbsp;<img src="/uni/design/Entwurf/english.gif">&nbsp;|&nbsp;
<a class="hist" href="/uni/impressum/">Impressum&nbsp;</a>
	 

Hier sollten

• Einträge für nicht angebotene Menüpunkte gelöscht werden,
• zusätzliche angebotene Menüpunkte (z.B. eine A-Z-Liste) ergänzt werden,
• die Menüpunkte mit Links versehen werden,
• gegebenenfalls der Link für das Impressum auf eine eigene Seite geändert werden.

Verlinkung weiterer Seiten

Bislang ging es ausschließlich um Rubriken bzw. Unterrubriken und den damit verbundenen Start- oder Übersichtsseiten index.html (oder index.htm). In der Regel existieren in einem Verzeichnis bzw. in einer Rubrik weitere Dokumente, die üblicherweise in der index.html verlinkt sind. Solche Seiten müssen in gleicher Weise bearbeitet werden wie oben beschrieben die index.html, d.h. am Kopf und am Fuß der Datei sind dieselben shtml-Anweisungen einzufügen wie in der Datei index.html desselben Verzeichnisses.

Dateien shtml-fähig machen

Wie eingangs erwähnt wird hier die SSI/shtml-Technik eingesetzt. Die Aktivierung setzt allerdings voraus, dass entweder die Datei-Endung eines shtml-Dokuments ".shtml" oder ".shtm" ist oder aber der Zugriffscode für die Datei "executable" bzw. "754" ist.

Das Skript gibt allen von ihm angelegten internen Dateien (wie z.B. dirinfo.html) automatisch den erforderlichen Code sowie allen .html- und .htm-Dateien einer Rubrik bzw. eines Verzeichnisses, wenn diese Rubrik vom Skript angelegt wird. Nachträglich vom Benutzer angelegte Dateien müssen entsprechend nachbearbeitet werden. Dies ist zum einen. möglich unter Unix mit dem Kommando

chmod 754 Pfad/Dateiname

oder einfach für alle Dateien eines Verzeichnisses:

chmod 754 Pfad/*.html

oder beim Upload von Dateien mittels WinSCP.

Individualisiereung des Designs über Änderungen der Style-Sheet-Datei "style.css"

Hauptmenü rechtsbündig oder linksbündig

Die Voreinstellung für die Ausrichtung des Hauptmenüs ist rechtsbündig. Dies sieht aber nur akzeptabel bis zur zweiten Hierarchiestufe aus, was allerdings der Regelfall sein wird. Bei 3-stufigen Menüs sollte dies linksbündig ausgerichtet werden. Dazu ist die Style-Sheet-Datei wie folgt zu verändern. Die CSS-Voreinstellung für die drei Stufen ist:

div.e0 {font-weight: bold; font-size: 1.00em; text-align: right}
div.e1 {font-weight: normal; font-size: 0.88em; text-align: right}
div.e2 {font-weight: normal; font-size: 0.70em; text-align: right}

Diese ist zu ersetzen durch:

div.e0 {font-weight: bold; font-size: 1.00em; text-align: left; padding-left:7px}
div.e1 {font-weight: normal; font-size: 0.88em; text-align: left; padding-left:7px}
div.e2 {font-weight: normal; font-size: 0.70em; text-align: left; padding-left:7px; background-color: #eaeff5;}

Abstand zwischen den Rubriknamen

Zwischen den Rubrikennamen im Hauptmenü wird standardmäßig kein Abstand angelegt. Dort kann allerdings ein Abstand in Form einer Leerzeile mittels <br> erzeugt werden. Dazu ist in der Datei structure.html unterhalb des Kommentars "Variable für den Menüabstand" in der shtml-Anweisung <!--#set var="abstand" value="" --> z.B. value="<br>" einzusetzen.

Erzeugen einer Sitemap

Über die entsprechende Wahl im Startmenü kann eine Sitemap erzeugt werden. Dabei wird eine Datei sitemap.html im Hauptverzeichnis des Instituts erzeugt. Diese ist dann in der Datei structure.html an der entsprechenden Stelle zu verlinken (siehe oben Anpassung der Datei structure.html).

Die vom Skript generierte Sitemap für das o.a. Beispiel