Ältere Versionen:
Website Re-Design - Manual & Spezifikationen
Grundlegend
Die TU-Website ist für eine Fenstergröße von 800x600 optimiert. Es gibt die Möglichkeit, die Inhaltspalte zu verbreitern, so dass die Seite insgesamt etwa 1000px breit wird. Von dieser Möglichkeit sollte man nur gebrauch machen, wenn es unbedingt sein muss.
Alle Seiten sind linksbündig ausgerichtet.
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 Bild 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 orangenem Kreis auf türkisem Hintergrund (Suche im Header) button.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, die nur auf einzelnen Seiten eingebunden sind.
Alle 'normalen' Seiten
Grundlegender Aufbau
Die Seite ist in der normalen Einstellung ca. 770px breit und folgendermassen aufgeteilt:
Der Header ist 770px breit, 105px 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 vier 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
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 und Pressemitteilungen
Ü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; 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
Der Bereich für aktuelle Ankündigungen ist 480 Pixel breit. Die Höhe ist variabel und ergibt sich aus der Anzahl der Ankündigungen. 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 werden alle Termine der nächsten sieben Tage dargestellt, mindestens aber die nächsten sechs (wenn so viele Termine vorhanden sind, sonst weniger). Zusätzlich werden die Pressemitteilungen aus den letzten fünf Tagen dargestellt. Die Pressemitteilungen mit Bild, wenn es denn ein Bild zur PM gibt. Die Bilder werden alternierend rechts- und linksbündig ausgerichtet.
Die Ankündigungen werden aus den Terminen, Vorträgen & Pressemitteilungen im Intranet (automatisiert) entnommen.
"Anzeigen"
Auf der Homepage machen wir dauerhaft Werbung für die Virtual Tour. Zusätzlich kann für aktuelle Anlässe ein Banner geschaltet werden. Es ist dabei darauf zu achten, dass maximal drei zusätzliche Banner verwandt werden. Die Banner müssen 150px breit sein.
Dieser Text enstand auf Basis einer Vorlage von von Bettina Kaiser & Kerstin Schürmann (formlabor)
v.3 Februar 2010