http://www.uni-bielefeld.de/Universitaet/Einrichtungen/Pressestelle/Informationsmanagement/Help/Gestaltungsrichtlinien/index.html?__xsl=/templates/null.xslGestaltungs-Richtlinien - StyleguideMarkus PaulussenGestaltungsgrundlagen in RoxenGestaltungs- Richtlinien,Vorgaben Template,Farben und Piktogramme,Stylesheet- Angaben (CSS),Java Script Beispielseite, jQuery, Stylesheet-Anweisungen CSS,Medienaufbereitung Usability,Prozeßoptimierung und Performance ,Sicherheit ,Erfolgsanalyse ,Kompatibilität, LightboxUniversität Bielefeld2017-05-10detext/htmlCorporate Design Vorgaben Für Fakultäten und Einrichtungen gelten bestimmte Regelungen bei der Umstellung der Webseiten auf die neuen Portal-Templates: Link zum Web-CDPortal-Styleguide 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-StyleguideRechte 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. GestaltungselementeRoxenRoxen 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 function mailsend(mail,p1,p2,p3) { var ca; ca = "mailto:" + p2 + "\@" + p3 + "." + p1; mail.href = ca; return (1); } E-MailStyleguideDer 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 WebseiteUm die Seiten grafisch und inhaltlich gut zu strukturieren, sollten folgende H-Überschriften verwendet werden: H1-ÜberschriftCode:<h1>Text</h1>H2-ÜberschriftenCode:<h2>Text</h2>H3-ÜberschriftenCode:<h3>Text</h3>Links und DateienWeitere 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 LinksNachfolgenden Text können Sie mit dem Insert-Befehl in Ihre Seiten einbinden: Code:<insert file='/Universitaet/links_anmerkung.html'/>BilderCode: (den richtigen Pfad einsetzen) <img src="/images/template_2009/kopfbilder2/3.jpg" width="120" />Weitere Hilfen zur TexteingabeWebicons    Hier geht's zur Übersicht der verwendeten WebiconsFarbwerte  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): #F59F00Ausführliche Farbangaben finden Sie unter:www.uni-bielefeld.de/corporatedesign/farben.htmlCSSDie css-Datei mit dem aktuellen Seitenlayout finden Sie hier:/css/unistandard_2009.cssjQuery 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 ListenboxenZur ü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> // FakultätenFakultät für BiologieFakultät für Chemie... 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 BoxCode: <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>  // FakultätenFakultät für BiologieFakultät für Chemie...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>  // FakultätenFakultät für BiologieFakultät für Chemie...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. ContentspaltenContentspalte - volle BreiteLorem 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> 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 - 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>  ContentboxenContentbox - 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. 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 - 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>  Rechte Seiten-Boxen 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> Bild-Boxen Diese Bildboxen können beispielsweise als Newsboxen oder für Übersichtsseiten verwendet werden.Beispielseite mit BildboxenCode: <div class="content_full"> <h1>Beispielboxen</h1> <!-- Boxen --> <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> <!-- Ende boxen --> <div style="clear: both;"></div> </div> <!-- content_full ENDE --> Bild-Boxen Beispiel 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  TabellenZur übersichtlichen Aufbereitung von Informationen können Tabellen mit im Stylesheet vordefinierten Farben verwendet werden:Überschrift 1 - Farbwert: #d4d0c8Überschrift 2Spalte 1, Zeile 1 - Farbwert: #EFF3F7Spalte 2, Zeile 1Spalte 1, Zeile 2Spalte 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>  Alternative Tabelle Überschrift / TitelSpalte 1, Zeile 1 - Farbwert: #F0F0F0Spalte 2, Zeile 1Spalte 1, Zeile 2Spalte 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>  Hover-Texte 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.   $("#text1").hide();$("#link1").click(function(){$("#text1").toggle("slow");}); $("#text2").hide();$("#link2").click(function(){$("#text2").toggle("slow");}); $("#text3").hide();$("#link3").click(function(){$("#text3").toggle("slow");}); $("#text4").hide();$("#link4").click(function(){$("#text4").toggle("slow");}); $("#text5").hide();$("#link5").click(function(){$("#text5").toggle("slow");}); $("#text6").hide();$("#link6").click(function(){$("#text6").toggle("slow");}); $("#text7").hide();$("#link7").click(function(){$("#text7").toggle("slow");}); $("#text8").hide();$("#link8").click(function(){$("#text8").toggle("slow");}); $("#text9").hide();$("#link9").click(function(){$("#text9").toggle("slow");}); $("#text10").hide();$("#link10").click(function(){$("#text10").toggle("slow");}); $("#text11").hide();$("#link11").click(function(){$("#text11").toggle("slow");}); $("#linktext").hide();$("#linklinktext").click(function(){$("#linktext").toggle("slow");}); $(document).ready(function(){ $("#hidden-links").hide(); $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 1000) {$('#hidden-links').fadeIn();} else {$('#hidden-links').fadeOut();} }); $('.back-top').click(function () {$('body,html').animate({scrollTop: 0}, 800);return false;}); $('.code').click(function () {$("#text9").toggle("slow"); $('body,html').animate({scrollTop: 2700}, 800);return false;}); }); }); Nach oben