Layout

Design und Layout

 

Das hier beschriebene Webdesign für die OpenCms-Templates 2.1 und 2.2 läuft aus. Schulungen und Unterlagen für das neue Webdesign (Template 3.0) sind derzeit in Vorbereitung und werden voraussichtlich ab April 2017 zur Verfügung stehen. Bei Fragen melden Sie sich bitte per E-Mail.

Vorgaben und  Mindestanforderungen an Fakultäten, Institute, Lehrstühle, Abteilungen, Studiengänge

Die Grundidee: Man sollte eindeutig erkennen können, dass Ihre Seite ein "Kind" der Universität Stuttgart ist. Es müssen aber nicht alle Kinder das gleiche Kleid tragen... ;-)

Mindestanforderung an Portale wie Fakultäten/Institute/Studiengänge:
Die Homepage (Startseite des Portals) muss in Uni-layout eingebettet werden
.



Elemente und Positionen

layout2



Globalnavigation

Ausgabe der Elemente der Globalnavigation. Der Link zur Uni Homepage ("uni") als erster Punkt sollte immer vorhanden sein. Danach folgen die Links zu den übergeordneten Organisationseinheiten (von einem Institut z.B. die Fakultät, von einer Abteilung das Institut), die Kontakt-, Such- und Sitemap-Seite als auch die Sprachumschaltung und die Druckversion.



Kopfgrafik

Erklärung Kopfgrafik Panoramabild des Instituts oder der Einrichtung als Bannerbild als Repräsentation der Einrichtung oder eine andere Grafik. Wie bisher auch: Einrichtungslogo (falls vorhanden) im linken Bereich (alternativ das große Uni-Logo) und rechts das Unilogo mit Schriftzug. Zur detailierten Beschreibung und Photoshop bzw. Gimp Vorlage.



Webseitenname

Ausgabe des Namens der Einrichtung. Dieser wird auf allen Seiten identisch ausgegeben.

<div id="portalueberschrift">Institut XY</div>


Navigation

Dieses Navigationsmenü enthält Links auf Elemente. Momentan wird auf eine spezielle Kennzeichnung der aktuellen Seite im Menü bewusst verzichtet um ein immergleiches Konstrukt zu haben, dass entweder gechacht oder in Ihren Eigenlösungen einfach inkludiert werden kann. Eine Markierung könnte einfach per JavaScript z.B. nachträglich vorgenommen werden. Es gibt eine Unterscheidung für innere Knoten, dies sind Elemente die weitere Unterelemente besitzen. Falls innere Knoten nur zur Strukturierung angelegt wurden und keinen Inhalt haben sollten sie nicht verlinkt werden. Die HTML-Auszeichnung sieht dann wie folgt aus:

<div id="hauptnavi">
        <ul class="menu">
                <li><a href="#" class="a_special" style="cursor:
default;">Studieninformation</a>
                <ul>
                        <li><a
href="/fak9/ling/studieninformationen/studiengaenge">Studiengänge</a></li>
                        <li><a
href="/fak9/ling/studieninformationen/beratung">Beratung</a></li>
                        <li><a
href="/fak9/ling/studieninformationen/auslandsaufenthalt">Auslandsaufenthalt</a><img
alt="" class="hauptnavipfeil" src="/fak9/ling/img/pfeil_rechts.gif"><ul>
                        <li><a
href="/fak9/ling/studieninformationen/auslandsaufenthalt/planung">Planung</a></li>
                </ul>
        </li>
        </ul>
</div>
 


Klickpfad

Der Klickpfad hilft die aktuelle Position im Content-Baum zu erkennen. Alle Zwischenebenen zurück zur Wurzel sind klickbar, falls Inhalt existiert, andernfalls nicht verlinkt. Das erste Element hat den festen Namen "Home". as entsprechende HTML sieht so aus:

<div id="breadcrumb">
<p>Sie sind hier: &nbsp;»&nbsp;<a
href="/fak9/ling/index.html">Home</a>&nbsp;»&nbsp;Aktuelles&nbsp;»&nbsp;<a
href="/fak9/ling/aktuelles/veranstaltungen">Veranstaltungen</a></p>
</div>


Zielgruppennavigation

Angepasste HTML Navigationsmenüs sind mit den Unterordnern der Seite verknüpft.



Seitentitel

Hier beginnt die Ausgabe der Seite mit dem Seitentitel. Dieser ist als gesonderte H1 ausgewiesen:

<h1 class="title">Veranstaltungen</h1>


Content

Hier wird der Inhalt eingefüllt. Es stehen knapp 700 Pixel an Breite für Informationen bereit. Übergroße Grafiken oder Tabellen werden zukünftig mit dynamischen jQuery-Elementen interaktiv in überlagernden Ausgaben widergegeben und nicht zwanghaft versucht in den Content-Bereich hineinzupressen. Entgegen manch anderen CSS-Vereinbarungen haben Sie alle Headings (h1-h6) zur Verfügung, um Dokumente beginnend mit einer Überschrift 1 strukturieren zu können.



Rechte Spalte

Als Infoblock  werden in der rechten Spalte die Informationen angezeigt wie Artikel, Neuigkeiten, Events, Links. Diese Ordner müssen im RootFolder des Seitenbaumes enthalten sein.



Fußzeile

Änderungsdatum, Kontakt zum technischen-administrativen Ansprechpartner und das Impressum. Im HTML wie folgt:

<div id="footer">
<ul class="footerlist">
        <li>Letzte Änderung: 19.10.10</li>
<li><a href="http://www.uni-stuttgart.de/cgi-bin/mail.cgi?" class="email"></a>
</li>
<li><a href="http://www.uni-stuttgart.de/">&copy; Universität
Stuttgart</a></li>
<li><a
href="http://www.uni-stuttgart.de/impressum/index.html">Impressum</a></li>
</ul>
</div>