Gestaltungs-Richtlinien - Styleguide
 
 
Background picture
Background picture
Uni from A-Z
Universität Bielefeld > University > Faculties and Departments > Pressestelle > Informations-Management > Roxen CMS > Gestaltungs-Richtlinien - Styleguide
  

Rechte Seitenboxen

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

Der Code

<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.

jQuery

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.

GestaltungselementeRoxen

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

Fragen und Anmerkungen?

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

E-Mail

Styleguide

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.

Hauptelemente einer Webseite

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

 

H1-Überschrift

    Code:
    <h1>Text</h1>

H2-Überschriften

    Code:
    <h2>Text</h2>

H3-Überschriften

    Code:
    <h3>Text</h3>

Links und Dateien

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: (den richtigen Pfad einsetzen)
    <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'/>



Bilder

    Code: (den richtigen Pfad einsetzen)
    <img src="/images/template_2009/kopfbilder2/3.jpg" width="120" />



+

Farbwerte

  •  
    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

CSS

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

/css/unistandard_2009.css

jQuery

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.

 

 

Wichtige vordefinierte CSS-Elemente für das Seitenlayout

 

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>

 

Listenboxen schmal (links und rechts)

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.

Linke Box

    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.

 

Rechte Box (Bild auskommentiert)

    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>

 

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.

 

Contentspalte - volle Breite

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 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!

 

Contentspalte - links:

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

 

Contentspalte - rechts:

Code:
<div id="contentspalterechts">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. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

 

Contentspalte - variable Breite:

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>

 

Contentbox - volle Breite:

Code:
<div class="contentbox">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. 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 faci.

 

Contentbox - links:

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.

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.

Contentbox - rechts:

Code:
<div class="contentboxrechts">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.

Contentbox - variable Breite:

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:


Bild-Boxen Beispiel

Grünes Foto
 Profilschwerpunkte
Vernetzte Forschung auf internationalem Spitzenniveau.
Foto Perspektive Fensterfront
 Nachwuchs
Hoher Standard in Forschung und Lehre: beste Bedingungen für wissenschaftlichen Nachwuchs.
Foto Perspektive Fensterfront
 Nachwuchs
Hoher Standard in Forschung und Lehre: beste Bedingungen für wissenschaftlichen Nachwuchs.
Foto Roboterhand
 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 id="tabellenkopf">
      <th>Überschrift 1</th>
      <th>Überschrift 2</th>
    </tr>
    <tr id="tabelle">
      <td align="left">Spalte 1, Zeile 1</td>
      <td align="left">Spalte 2, Zeile 1</td>
    </tr>
    <tr id="tabelle">
      <td align="left">Spalte 1, Zeile 2</td>
      <td align="left">Spalte 2, Zeile 2</td>
    </tr>
  </tbody>
</table>

 

Alternative Tabelle

Überschrift / Titel

 

Code:

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