Gestaltungs-Richtlinien

Universität Bielefeld > Universität > Einrichtungen > Pressestelle > Web-Entwicklung > Roxen CMS > Gestaltungs-Richtlinien - Styleguide

Für Fakultäten und Einrichtungen gelten bestimmte Regelungen bei der Umstellung der Webseiten auf die neuen Portal-Templates:
Link zum Web-CD

Für die neuen Portal-Seiten gibt es einen zusätzlichen kleinen Styleguide, da einem in den Portalen noch weitere Elemente zur Verfügung stehen :
Zum Portal-Styleguide

Hier können Sie ganz normalen html-Inhalt einbinden.

   <div class="seitenbox">


      <div class="infoboxrechts">


        1.Box


      </div>


      <div class="infoboxrechts">


        2.Box


      </div>


    </div>

Der Seitencode für rechte Boxen: "seitenbox" legt den äußeren Rahmen fest, mit der "infoboxrechts" können mehrere Boxen untereinander geschaltet werden.

Mit jQuery kann man die Elemente einer Website animieren und so Inhalte in besonders übersichtlicher und moderner Form darstellen.

Ausklappboxen, Back-To-Top-Buttons, Lightbox-Bildanzeige und weitere Funktionalitäten finden Sie auf dieser Seite.

Roxen bietet auch eine Reihe von gestalterischen Elementen und Funktionen, die Sie ganz einfach in Ihre Seiten einbinden können
[mehr...]

Bei Fragen und Kommentaren wenden Sie sich bitte an markus.paulussen@uni-bielefeld.de

E-Mail

Der Styleguide soll Ihnen dabei helfen, die Elemente der Internet-Seiten der Universität Bielefeld korrekt einzusetzen. Dabei müssen Sie zum Teil HTML-Code einfügen, der hier dokumentiert ist. Wie sich diese Eingaben auswirken, ist im Folgenden jeweils zu erkennen.

Weitere Informationen zu den Funktionen des Uni Templates 2009 finden Sie unter Seitenelemente.

Um die Seiten grafisch und inhaltlich gut zu strukturieren, sollten folgende H-Überschriften verwendet werden:

Code:

<h1>Text</h1>

Code:

<h2>Text</h2>

Code:

<h3>Text</h3>

Weitere Infos und Kontakt sollten auf den Universitäts-Seiten immer in eckige Klammern gesetzt werden. Beispiel: [mehr...]

Links können nicht nur auf HTML-Seiten verweisen, sondern auch auf andere Datei-Formate wie z.B. PDF oder Word-Dokumente!

Code:

<a href="/Universitaet/Studium/SL_K5/Unterordner/xxx.html">[mehr...]</a>

Hinweistext zu externen Links

Nachfolgenden Text können Sie mit dem Insert-Befehl in Ihre Seiten einbinden:

Code:
<insert file='/Universitaet/links_anmerkung.html'/>

Code:

<img src="/images/template_2009/kopfbilder2/3.jpg" width="120" />

Bewerbungs-Icon groß Dauer-Icon groß tuer-Icon groß weitere-Icon groß zugang-Icon groß übersicht-Icon studbeginn-Icon groß exzellent-Icon groß eKVV-Icon groß

Hier geht's zur Übersicht der verwendeten Webicons

Allgemeine Schriftfarbe: #333333
Schriftfarbe für Meldungen: #282828
Grün (Logo): #007556
Grün (Universitätskopf): #B6C828
Helleres Grün (Listenbox): #e0eb98
Blau (Verlinkungen): #20496e
Helleres Blau: #2A9DDF
Grau (Textfarbe im Footer): #909090
Orange (Pfeile): #F59F00

Ausführliche Farbangaben finden Sie unter:
www.uni-bielefeld.de/corporatedesign/farben.html

Die css-Datei mit dem aktuellen Seitenlayout finden Sie hier:

/css/unistandard_2009.css

Zur übersichtlichen Auflistung mehrerer Menüpunkte steht die Listenbox zur Verfügung.

Code:

   <div class="listenbox"> 


      <h2> // Fakultäten </h2> 


      <ul class="listen"> 


        <li><a href="/Universitaet/Einrichtungen/Fakultaeten/Biologie/">Fakultät für Biologie</a></li> 


        <li><a href="/chemie/index.html">Fakultät für Chemie</a></li> 


        <li> ... </li> 


      </ul> 


    </div>

Die schmalen Listenboxen können Sie sowohl einzeln im Fließtext einbauen als auch nebeneinander. Achten Sie darauf, dass gleichausgerichtete Boxen untereinander dargestellt werden! Verwenden Sie daher eine links- und eine rechtsausgerichtete Box, wenn Sie zwei Boxen nebeneinander darstellen möchten.

Zudem können Sie ein Bild angeben, dass in der oberen rechten Ecke der Box angezeigt wird.

Code:

   
    <div class="listenbox_schmal"> 


    <div class="listenbild">
    <img src="/images/template_2009/kopfbilder2/3.jpg" width="120" /></div>

 <br /> <br /> <br />
    


      <h2> // Fakultäten </h2> 


      <ul id="listen"> 


        <li><a href="/Universitaet/Einrichtungen/Fakultaeten/Biologie/">Fakultät für Biologie</a></li> 


        <li><a href="/chemie/index.html">Fakultät für Chemie</a></li> 


        <li> ... </li> 


      </ul> 


    </div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Code:

   
    <div class="listenbox_schmal_rechts"> 


    <!--  
    <div class="listenbild">
    <img src="/images/template_2009/kopfbilder2/3.jpg" width="120" /></div>
    <br /> <br /> <br /> -->


      <h2> // Fakultäten </h2> 


      <ul id="listen"> 


        <li><a href="/Universitaet/Einrichtungen/Fakultaeten/Biologie/">Fakultät für Biologie</a></li> 


        <li><a href="/chemie/index.html">Fakultät für Chemie</a></li> 


        <li> ... </li> 


      </ul> 


    </div>

Code:
<div id="content_full">hier der Text...</div>

WICHTIG: Zu beachten ist bei dieser Box, dass sie nicht in Kombination mit der Seitenbox rechts verwendet werden kann, da es hierbei zu Überschneidungen und Inhaltsverlusten in der Darstellung kommt!

Code:
<div id="contentspaltelinks">hier der Text...</div>

Code:
<div id="contentspalterechts">hier der Text...</div>

Die Spaltenbreite kann auf Wunsch angepasst werden, indem die voreingestellten css-Werte überschrieben werden. Dies geschieht durch Einfügen von Style-Informationen im öffnenden div-Tag, z.B. wie folgt:

Code:
<div id="contentspalterechts" style="width:300px;">hier der Text...</div>

Code:
<div class="contentbox">hier der Text...</div>

Code:
<div class="contentboxlinks">hier der Text...</div>

Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Code:
<div class="contentboxrechts">hier der Text...</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Auch die die Breite der Contentboxen kann bei Bedarf angepasst werden, indem die voreingestellten css-Werte überschrieben werde, z.B. wie folgt:

Code:
<div id="contentboxrechts" style="width:300px;">hier der Text...</div>

Der Seitencode für rechte Boxen: "seitenbox" legt den äußeren Rahmen fest, mit der "infoboxrechts" können mehrere Boxen untereinander geschaltet werden. Zu sehen ist diese Box auf dieser Seite rechts oben.

Code:
<div class="seitenbox"> <div class="infoboxrechts"> 1.Box </div> <div class="infoboxrechts"> 2.Box </div> </div>

Diese Bildboxen können beispielsweise als Newsboxen oder für Übersichtsseiten verwendet werden.
Beispielseite mit Bildboxen

Code:
<div class="content_full"> <h1>Beispielboxen</h1>  <div id="boxen"> <div id="box1" class="boxen"> <a href="/Universitaet/Forschung/forschung_schwerpunkte.html"><img src="/images/homepage_2012/forschen/box1.jpg" width="220" alt="Grünes Foto" /> <div class="box_ueberschrift_div"><span class="box_ueberschrift"> Profilschwerpunkte</span></div></a> Vernetzte Forschung auf internationalem Spitzenniveau. </div> <div id="box2" class="boxen"> <a href="/spitzencluster/"><img src="/images/homepage_2012/forschen/box2.jpg" width="220" alt="Foto Roboterhand" /> <div class="box_ueberschrift_div"><span class="box_ueberschrift"> Spitzencluster</span></div></a> Intelligente technische Systeme.: Im Spitzencluster kooperieren Hochschulen mit Industrieunternehmen </div> <div id="box3" class="boxen"> <a href="/nachwuchs/"><img src="/images/homepage_2012/forschen/box4.jpg" width="220px" height="135px" alt="Foto Perspektive Fensterfront" /> <div class="box_ueberschrift_div"><span class="box_ueberschrift"> Nachwuchs</span></div></a> Hoher Standard in Forschung und Lehre: beste Bedingungen für wissenschaftlichen Nachwuchs. </div> <div class="boxen_trenner"></div> <div id="box4" class="boxen"> <a href="/nachwuchs/"><img src="/images/homepage_2012/forschen/box4.jpg" width="220px" height="135px" alt="Foto Perspektive Fensterfront" /> <div class="box_ueberschrift_div"><span class="box_ueberschrift"> Nachwuchs</span></div></a> Hoher Standard in Forschung und Lehre: beste Bedingungen für wissenschaftlichen Nachwuchs. </div> <div id="box5" class="boxen"> <a href="/(de)/ZIF/"><img src="/images/homepage_2012/forschen/box5.jpg" width="220px" height="135px" alt="Foto Zentrum für Interdisziplinäre Forschung" /> <div class="box_ueberschrift_div"><span class="box_ueberschrift">Herausragende Forschung</span></div></a> Das Zentrum für interdisziplinäre Forschung fördert innovative Forschungsprojekte. </div> <div id="box6" class="boxen"> <a href="/Universitaet/Forschung/forschung_schwerpunkte.html"><img src="/images/homepage_2012/forschen/box1.jpg" width="220" alt="Grünes Foto" /> <div class="box_ueberschrift_div"><span class="box_ueberschrift"> Profilschwerpunkte</span></div></a> Vernetzte Forschung auf internationalem Spitzenniveau. </div> <div class="boxen_trenner"></div> <div id="box7" class="boxen"> <a href="/spitzencluster/"><img src="/images/homepage_2012/forschen/box2.jpg" width="220" alt="Foto Roboterhand" /> <div class="box_ueberschrift_div"><span class="box_ueberschrift"> Spitzencluster</span></div></a> Intelligente technische Systeme.: Im Spitzencluster kooperieren Hochschulen mit Industrieunternehmen </div> </div>  <div style="clear: both;"></div> </div>

Profilschwerpunkte

Vernetzte Forschung auf internationalem Spitzenniveau.

Nachwuchs

Hoher Standard in Forschung und Lehre: beste Bedingungen für wissenschaftlichen Nachwuchs.

Nachwuchs

Hoher Standard in Forschung und Lehre: beste Bedingungen für wissenschaftlichen Nachwuchs.

Spitzencluster

Intelligente technische Systeme.: Im Spitzencluster kooperieren Hochschulen mit Industrieunternehmen

Zur übersichtlichen Aufbereitung von Informationen können Tabellen mit im Stylesheet vordefinierten Farben verwendet werden:

Überschrift 1 - Farbwert: #d4d0c8	Überschrift 2
Spalte 1, Zeile 1 - Farbwert: #EFF3F7	Spalte 2, Zeile 1
Spalte 1, Zeile 2	Spalte 2, Zeile 2

Code:

<table cols="2" cellspacing="2" cellpadding="8" align="center"> <tbody> <tr class="tabellenkopf"> <th>Überschrift 1</th> <th>Überschrift 2</th> </tr> <tr class="tabelle"> <td align="left">Spalte 1, Zeile 1</td> <td align="left">Spalte 2, Zeile 1</td> </tr> <tr class="tabelle"> <td align="left">Spalte 1, Zeile 2</td> <td align="left">Spalte 2, Zeile 2</td> </tr> </tbody> </table>

Spalte 1, Zeile 1 - Farbwert: #F0F0F0	Spalte 2, Zeile 1
Spalte 1, Zeile 2	Spalte 2, Zeile 2

Code:

<div class="contentbox"> <h1>Überschrift / Titel</h1> <table cellpadding="4" cellspacing="2" width="100%" class="print_table"> <tr> <td width="180" valign="top"><p><strong>Spalte 1, Zeile 1 - Farbwert: #F0F0F0</strong></p></td> <td valign="top"><p>Spalte 2, Zeile 1</p></td> </tr> <tr> <td valign="top"><p><strong>Spalte 1, Zeile 2</strong></p></td> <td valign="top"><p>Spalte 2, Zeile 2</p></td> </tr> </table> </div>

In diesem Beispiel wird der Text zwischen den <span>-Tags erst angezeigt, wenn man die Maus auf den entsprechenden Link bewegt.
Wichtig ist es den Klassennamen "info" anzugeben (Siehe Code-Schnipsel)!

Code:

 
  <a class="info" href="http://www.uni-bielefeld.de/"> 


      Fahren Sie mit der Maus über diesen Link 


      <span>Wenn Sie nun auf den Link KLICKEN, werden Sie zu der     hinterlegten Adresse weitergeleitet...</span> 


  </a> 




  <a class="info"> 


      Kein weiterführender Link 


      <span> Sie müssen auch nicht zwingend auf etwas verlinken. Sie     können dann anstelle der Linkadresse eine Raute eingeben.</span>


  </a>

Fahren Sie mit der Maus über diesen LinkWenn Sie nun auf den Link KLICKEN, werden Sie zu der hinterlegten Adresse weitergeleitet...

Kein weiterführender LinkSie müssen auch nicht zwingend auf etwas verlinken. Sie können dann anstelle der Linkadresse eine Raute eingeben.

Nach oben

Impressum und Datenschutzhinweise

Gestaltungs- Richtlinien - Styleguide