Siegel der Universität
Universität zu Köln
Start / Service / Design

Umstellung von Frame-basierten Webauftritten

Grundlegendes

Im Folgenden wird kurz beschrieben, wie ein bestehender Web-Auftritt, der mit Frames realisiert ist, auf das neue Uni-Design von 2006 umgestellt werden kann. Dies kann nur als vorübergehende "Notlösung" angesehen werden, da zum einen einige Mängel auftreten, zum anderen Frames nicht gern gesehen werden. Dazu zählt, dass die Darstellung im Opera-Browser etwas anders als im Internet Explorer und Mozilla ist und das Gesamterscheinungsbild beeinträchtigen.

Es wird vorausgesetzt, dass in allen html-Dokumenten ein Stylesheet über eine externe Datei eingebunden wird, in der Form

<head>
<link rel="Stylesheet" type="text/css"
          href="http://www.uni-koeln.de/....css">
</head>

Andernfalls müssten alle Dateien entsprechend ergänzt werden.

Der Aufbau der Frames für die Webseiten wird wie folgt angenommen:

Kopf
(kopf.html)
Menü
(menue.html)
Haupt/Content-Bereich
(seite.html)

Gegebenenfalls muss die Frames-Struktur entsprechend geändert werden.

Unter

http://www.uni-koeln.de/uni/design/2006/frames/

ist ein Beispiel für einen solchen Webauftritt realisiert.

Die Startseite

Die Startseite, in der Regel index.html, sollte wie folgt aussehen:

<html>
<head>....</head>
<frameset rows="129,*" frameborder=0 border=0>
  <frame  name="kopf" src="kopf.html" scrolling=yes>
  <frameset cols="150,*" frameborder=0 border=0>
    <frame  name="links"  src="menue.html" >
    <frame  name="rechts" src="seite.html" >
  </frameset>
</frameset>
<noframes>
  <body>
    <p>Bei diesem Webauftritt werden nur Frames unterstützt.</p>
  </body>
</noframes>
</html>

Von besonderer Wichtigkeit ist die feste Pixelhöhe 129 für den Kopf. Diese korrespondiert mit dem Layer "leisteoben" im Stylesheet frames-k.css. Letzterer hat eine Höhe von 127px zuzüglich 2px für den unteren Rand, so dass der Kopf 129px hoch ist. Da der Content-Frame in der Regel einen Scrollbalken haben wird wird im Kopf das Siegel um die Breite des Scrollbalkens eingerückt: Zum einen müssen die transparenten Siegelhälften oben rechts korrespondieren, zum anderen ist das Erscheinungsbild homogener.

Die Pixelbreite für das Menü (oben 150px) kann individuell angepasst werden.

Die anderen Seiten

Die anderen Seiten sowie die Stylesheets

werden am praktischsten im Browser aufgerufen und dann lokal gespeichert. Anschließend müssen kopf.html und menue.html angepasst werden. Die verschiedenen Stylesheet-Varianten sind erforderlich, da insbesondere die body-Definitionen voneinander abweichen.

In kopf.html sind

  • die Fakultät mit URL
  • die Linie in der Fakultätsfarbe
  • der Name der eigenen Einrichtung mit URL
  • das Anker-Menü (Impressum, Suche,...)

individuell festzulegen. Das für den Kopf zuständige Stylesheet ist frames-k.css.

In menue.html ist lediglich das Hauptmenü einzutragen. Das für das Menü zuständige Stylesheet ist frames-m.css.

seite.html ist lediglich als Muster anzusehen. Das für die "normalen" Seiten zuständige Stylesheet ist frames-s.css. In der Regel können Seiten ohne weitere Änderungen übernommen werden. Jedoch ist eines zu beachten: Der Aufbau der Frames ist so angelegt, dass beim oberen Kopf- und unteren Content-Frame rechts Scrollbalken erscheinen sollten. Bei zu kurzen Seiten klappt dies aber nicht mit den Mozilla/Netscape-Browsern. In solchen Fällen kann man sich nur so behelfen, dass am Ende solcher Seiten eine Folge von <br><br>... anzufügen ist.

Wird - wie vorausgesetzt - bereits eine Stylesheet-Datei, etwa style.css in die html-Dateien eingebunden, so empfiehlt es sich, der o.a. frames-s.css den alten Namen style.css zu geben, damit die einzelnen Dokumente nicht geändert werden müssen.