Ältere Versionen:

• Styleguide Version 1.2003
• Styleguide Version 2.2006

Grundlegend

Die TU-Website ist für eine Fenstergröße von 800x600 optimiert. Fast alle Seiten halten diese Größenbeschränkung ein. Ausnahme sind einige Formulare, die sich schlecht auf die Breite anpassen lassen und einige Grafiken, die nicht (weiter) verkleinert werden können.
Für den Druck werden die Navigationselemente (Kopf und Marginalien) ausgeblendet. Das bedeutet, das keine wesentlichen Inhalte im Randbereich untergebracht werden können.

Schriften

Die benutzten Schriften sind:

Syntax (Normal, Italic, Bold, Black):
Syntax Fonts werden für das Logo benutzt. Dieses wird als Graphik zur Verfügung gestellt

Verdana (Normal, Italic, Bold):
Verdana Fonts werden für alle Inhalte, Navigation, Überschriften und Marginalien benutzt. Grösse, Farbe etc werden in Style Sheets (css) definiert. Alternativ werden Fonts Arial, Helvetica bzw. sans-serif in den Style Sheets definiert.

Courier New (Normal):
für <CODE>, <KBD>, <PRE> (font-size:13px;). Alternativ werden Fonts Courier bzw. monospace in den Style Sheets definiert.

Times New Roman (Normal, Italic, Bold):
für den Druck. Alternativ werden Fonts Times bzw. serif in den Style Sheets definiert.

Bilder / Grafiken

TU-Logo mit türkisem Hintergrund:logo.gif

Die Photos werden in Gruppen zur Verfügung gestellt.
- 8 Sets à 5 Bilder für die Homepage, (home_a.jpg, home_b.jpg ...)
- je 8 Bilder per Rubrik (Aktuell aktuell.jpg, Forschung forschung.jpg, Studium studium.jpg, Service service.jpg, Universität uni.jpg)
Die Bilderleiste TU-Homepage und die Rubrikenbilder werden ca. alle zehn Minuten gewechselt. Eine Ergänzung ist möglich (und einfach).
Zusätzlich gibt es ein Photo für die "Suchen"-Seiten (suchen.jpg).
Die Bildergrösse ist 157 x 52 Pixel

Folgende Grafiken werden benutzt:
Kleiner blauer Pfeil (Navigation):pfeil_b.gif
Kleiner blauer Pfeil mit weissem Hintergrund (Navigation Marginalien)
pfeil_bw.gif
Kleiner oranger Pfeil (Navigation) pfeil_o.gif
Kleiner oranger Pfeil mit weissem Hintergrund (Navigation Marginalien) pfeil_ow.gif
Weisser Pfeil auf rotem Kreis (Suche) button.gif
Weisser Pfeil auf orangenem Kreis auf türkisem Hintergrund (Suche im Header) button_ob.gif
Weisser Pfeil auf orangenem Kreis mit weissem Hintergrund (Suchenseite) button_ow.gif

Alle Bilder finden sich im Verzeichnis /img, bzw. in der von 01 bis 08 bezeichneten Unterverzeichnissen.

Style-Sheets

Die Stylesheets befinden sich im Verzeichnis /css. Dort gibt es main.css für die Homepage und screen.css, print.css und base.css für alle weiteren Seiten. Zusätzlich existieren dort andere, zumeist sehr kleine Stylesheets für diverse Zwecke.

Alle 'normalen' Seiten

Grundlegender Aufbau

Die Seite ist in der normalen Einstellung ca. 770px breit und folgendermassen aufgeteilt:

Der Header ist 770px breit, 128px hoch und enthält Navigation, Home, Suche, Logo und Rubrikbild. Der Header ist farbig unterlegt. Das Bild wechselt zeitgesteuert alle 10 Minuten. Die Navigation besteht aus zwei Menüspalten, von denen die linke für alle Seiten gleich ist und die rechte bereichsabhägig wechselt. Beide Spalten enthalten maximal fünf Einträge. Das Logo verlinkt immer zurück zur TU-Homepage.

Die Breadcrumb-Leiste ist ca. 570px breit, 18px hoch und farbig unterlegt und enthält den Klickpfad zur aktuellen Seite (maximal fünf Ebenen tief).

Inhalt (ca. 570px Breite): Zu transportierender Inhalt

Marginalien (ca. 195px Breite): dies ist der Bereich links vom Haupttext. Er ist dazu gedacht Bilder zu integrieren, Links zu anderen Seiten zu enthalten oder Zusatzinformationen herauszustellen, wird aber vor allem für Links genutzt.

Footer (ca. 570px Breite): enhält links den Namen des Autors nebst Mail-Link und rechts das Datum der letzten Änderung (automatisiert).

Farben

Auf der TUHH Webseite werden folgende websichere Farben verwendet:

Hintergrund Header #CCFFFF
Hintergrund Breadcrumb #99CCCC
Text #000066
Linie Footer (1px) #000066
Hintergrund Inhalt und Marginalien #FFFFFF

Schriftfarben siehe nächster Abschnitt

Schriften

Folgende Schriftgrößen und -farben werden in den einzelnen Bereichen genutzt:

Header
Menülinks font-size:14px; font weight:bold; color:#000066; text-decoration:none
Suchen-Link font-size:15px; font weight:bold; color:#CC6600; text-decoration:none

Breadcrumb
Text font-size:10px; font weight:normal; color:#000066;
Links font-size:10px; font weight:normal; color:#000066; text-decoration:none

Marginalien
Text font-size:13px; font weight:normal; color:#000066
Links font-size:14px; font weight:bold; color:#000066; text-decoration:none
Sprachversion-Links font-size:14px; font weight:bold; color:#993300; text-decoration:none

Inhalt
Überschrift 1 (<H1>) font-size:20px; font weight:bold; color:#336699
Überschrift 2 (<H2>) font-size:18px; font weight:bold; color:#336699
Überschrift 3 (<H3>) font-size:17px; font weight:bold; color:#336699
Überschrift 4 (<H4>) font-size:16px; font weight:bold; color:#336699
Überschrift 5 (<H5>) font-size:14px; font weight:bold; color:#336699
Überschrift 6 (<H6>) font-size:13px; font weight:bold; color:#336699
Text (<P>, <TD>, <LI> etc.) font-size:13px; font weight:normal; color:#000066
Links font-size:13px; font weight:normal; color:#336699; text-decoration:underline

Footer
Text font-size:10px; font weight:normal; color:#000066;
Links font-size:10px; font weight:normal; color:#000066; text-decoration:none

Rollovereffekte der Links:siehe nächsten Abschnitt

Links

Links im Seitenheader:
Die Links sind nicht unterstrichen, bei Rollover ändert sich blau (#000066) zu orange (#CC6600). Menülinks sind mit einem kleinen blauen Dreieck gekennzeichnet, dass bei Rollover orange wird.
Die Rubriken und Unterrubriken, die aktiv sind, sind orange (#CC6600), nicht unterstrichen und haben kein Rollover-Effekt. Besuchte Links sind nicht hervorgehoben
Der Suche-Link im Header ist Orange (#CC6600) ohne Rollover-Effekt

Links im Footer und in der Breadcrumb-Zeile:
Die Links sind nicht unterstrichen oder farblich herausgestellt. Bei Mouse-Over erscheint der Text unterstrichen.

Links im Randbereich:
Die Sprachversionen-Links ('English Version') sind dunkel-orange (#993300), fett, nicht unterstrichen und ändern sich nicht.
Andere Links sind nicht unterstrichen, bei Rollover ändert sich blau (#000066) zu orange (#CC6600). Links für den Randbereich gibt es in zwei Varianten mit (class="main") und ohne Dreieck (class="menu")

Navigation im Text Textlinks sind blau (#336699) und unterstrichen. Bei Visited und Hover ändert sich nichts. Auf farbigen Hintergründen sind die Links fett.

TU-Homepage

Farben

Auf der TUHH Homepage werden folgende websichere Farben verwendet:

Hintergrund #CCFFFF
TUHH Logo:TUHH #00CCCC Technische Universität Hamburg-Harburg #003366
Navigation-Überschriften #CC6600
Navigation-Links #000066
Text #000066

Aktuelle Ankündigungen (türkiser Kasten)
Hintergrund Kasten #99CCCC
Rahmen Kasten (1px) #000066

Schriften

Folgende Schriftarten werden in den einzelnen Bereichen genutzt:

Menübereich
Überschriften font-size:12px; font-weight:bold; color:#CC6600
'English Version' font-size:12px; font-weight:bold; color:#993300; text-decoration:none
'Stichwort, Person' (Suche) font-size:11px; font weight:bold; color:#993300
Navigation font-size:11px; font-weight:bold; color:#000066; text-decoration:none

Aktuelle Ankündigungen (türkiser Kasten auf der Homepage)
Überschriften font-size:11px; font weight:bold; color:#000066; text-decoration:none
Erklärender Text font-size:11px; font weight:normal; color:#000066

Fußzeile
Links font-size:10px; font weight:bold; color:#000066; text-decoration:none

Rollovereffekte der Links:siehe nächsten Abschnitt

Links

Navigation im Menübereich:
Die Links sind nicht unterstrichen, bei Rollover ändert sich blau (#000066) zu orange (#CC6600). Menülinks sind mit einem kleinen blauen Dreieck gekennzeichnet, dass bei Rollover orange wird. Besuchte Links sind nicht hervorgehoben.

Navigation im Footer und im News-Kasten:
Die Links sind nicht unterstrichen oder farblich herausgestellt. Bei Mouse-Over erscheint der Text unterstrichen.

Navigation Sprachversionen:
Die Links sind dunkel-orange (#993300) und ändern sich nicht.

Aktuelle Ankündigungen (türkiser Kasten auf der Homepage)

Der Kasten für aktuelle Ankündigungen ist 480 Pixel breit. Die Höhe ist variabel und ergibt sich aus der Anzahl der Ankündigungen. Der Kasten hat einen Rahmen von 1 Pixel. Die Überschriften sollen auf maximal 55 Zeichen (inkl. Leerzeichen) beschränkt werden. Die erklärenden Texte sollen jeweils maximal 2 Zeilen oder 150 Zeichen (inkl. Leerzeichen) enthalten. Die Überschrift stellt einen Link zu dem entsprechenden ausführlichen Text dar. Bei Mouse-Over erscheinen sie unterstrichen. Es sollten niemals mehr als sechs Ankündigungen auf der Homepage erscheinen (da sonst der Wert als wichtige Ankndigung herabgesetzt wird). Es sollte darauf geachtet werden, das die Ankündigungen immer aktuell sind (ein Datum in der Überschrift). Die Text/Überschriftenfarbe darf nicht variiert werden.
Die Ankündigungen werden aus den Terminen, Vorträgen & Pressemitteilungen im Intranet (automatisiert) entnommen.

Anzeigen

Der Platz, der als Anzeige vermietet wird ist 180 Pixel hoch und 150 Pixel breit. (Bannerformat, Rechteck). Die Anzeige wird rechts oben neben dem Ankündigungskasten platziert. Zwischen Kasten und Anzeige ist 4 Pixel Abstand.

Templates

Für Webautoren werden Templates zur Verfügung gestellt.
Komplett leeres Beispieltemplate:

<!--#set var="Autor" value=""-->
<!--#set var="Email" value=""-->
<!--#set var="Title" value="Title"-->
<!--#set var="Lang" value=""-->
<!--#set var="Category" value=""-->
<!--#set var="SubCategory" value=""-->
<!--#set var="SubSubCategory" value=""-->
<!--#set var="Main" value=""-->
<!--#set var="LeftFile" value=""-->
<!--#set var="LangLink" value=""-->
<!--#set var="ExtraCSS" value=""-->
<!--#set var="WideContent" value=""-->
<!--#set var="Margin" value=""-->
<!--#include virtual="/include/head.html"-->
<!-- --- Text startet hier --- -->

<!-- --- Text endet hier --- -->
<!--#include virtual="/include/foot.html" -->

Die Bedeutung der einzelnen Variablen:

* Die entsprechenden Zahlen können Sie der Auflistung der Website-Struktur (PDF) entnehmen.

Die Reihenfolge der "set var" ist beliebig, die "include"-Zeile muss als letztes stehen. Leere Variablen können komplett entfernt werden. Außer SSI-Befehlen darf vor der "include"-Zeile nichts stehen - auch kein HTML-Kommentar - das bringt den IE ausser Tritt.

Dieser Text enstand auf Basis einer Vorlage von von Bettina Kaiser & Kerstin Schürmann (formlabor)

v.2 April 2006