Das Uni-Layout kopieren
Problemstellung
Grundlegendes
Aufbau
Weitere Möglichkeiten
Wir empfehlen als Referenz bei Fragen Self-HTML: HTML
und Self-HTML: CSSProblemstellung
Sie wollen Seiten ohne Imperia betreiben, die sich optisch nicht (oder nur an gewünschten Stellen) unterscheiden.
Schritt für Schritt
Wir empfehlen folgenden Workflow:
- Laden Sie sich das HTML-Gerüst herunter
. - Entscheiden Sie, ob Sie die Dateien auf dem eigenen Server haben möchten.
- Fordern Sie bei der KuM
eine Schriftzug-Grafik an. - Entscheiden Sie sich für eine fixe oder variable Seitenbreite. (Standard: variabel)
- Erstellen Sie eine Site-Map, die Platz für Erweiterungen lässt.
Evtl. hilft Ihnen dabei eine rechte Spalte oder graue Info-Boxen. - Überlegen Sie sich ein passendes Navigationskonzept.
- Schaffen Sie ein Grundlage für die einzelnen Seiten.
- Pflegen Sie die einzelnen Informationen ein, denken Sie dabei an das Hervorheben der Navigationspunkte.
Grundlegendes
CSS
Um die Grundlage des Designs zu erhalten, sollten Sie die Vorlagen der Uni zuerst einziehen.
Welche CSS Dateien einzuziehen sind, steht weiter unten.
Individuelle Anpassungen des Layouts können einfach über eine extra CSS Datei bewirkt werden.
Wo diese einzubinden ist, lesen Sie weiter unten.
HTML
Sie sollten nicht den Quellcode einer bestehenden Seite kopieren und die gewünschten Änderungen anpassen. Da Imperia einige interne Informationen im HTML-Code hinterlegt, kann es zu ungewünschten Effekten kommen.
Wenn Sie eine variable Seitenbreite verwenden, sollten Sie Breiten (z.B. in Tabellen) immer Prozentual angeben.
Dateien auf dem eigenen Server vs. Dateien einziehen.
Wenn Sie alles auf dem eigenen Server speichern, haben Sie volle Kontrolle über die Dateien. Ihnen wird also nicht der Seitenaufbau "zerschossen", wenn die Uni beschließt eine Layoutumstellung durchzuführen.
Außerdem wird Ihre Seite unabhängig von der Verfügbarkeit des Uni-Servers immer komplett angezeigt.
Andererseits müssen Sie bei Änderungen diese selbst einpflegen. Vor allem bei kleineren Änderungen können diese evtl. nur schlecht nachvollzogen werden.
In den hier angebotenen Vorlagen sind immer die Dateien auf dem Uni-Server verlinkt, sodass Sie die entsprechenden Pfade kennen.
Außerdem gibt es eine Seite zu den verwendeten Grafiken.
Aufbau
Kopfbereich
Inhaltsbereich
linke Spalte
rechte Spalte
mittlere Spalte
Im folgenden wird das HTML-Grundgerüst Stück für Stück erläutert. So können Sie die gewünschten Teile kopieren. Sie können aber auch das komplette HTML-Gerüst herunterladen .
Zu ändernde Stellen sind mit HTML-Kommentaren erläutert und (falls nicht anders erwähnt) im Code mit dem Platzhalter HIER markiert.
Weitere Formatierungsmöglichkeiten stehen unten. (u.a. für ein fixes Layout und/oder 2-Spaltige Seiten)
Kopfbereich
Die einzubindenden CSS-Dateien sollten genau in dieser Reihenfolge aufgeführt werden.
Individuelle CSS Anweisungen sollten danach erfolgen, um eine höhere Darstellungspriorität zu bekommen.
Hervorheben der Navigation geschieht als letztes.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="de"> <head> <!-- Ihr Seitentitel --> <title>HIER</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- Name des Autors --> <meta name="author" content="HIER"> <!-- Kontakt E-Mail --> <meta name="organization-email" content="HIER"> <meta name="city" content="Heidelberg"> <meta name="country" content="Germany - Deutschland"> <meta name="robots" content="index"> <meta name="robots" content="follow"> <meta name="revisit-after" content="3 days"> <meta http-equiv="imagetoolbar" content="no"> <!-- Ihre Keywords --> <meta name="keywords" content="HIER"> <!-- Ihre Seitenbeschreibung --> <meta name="description" content="HIER"> <!-- entspr. Länderlürzel (Englisch: en - Deutsch: de) --> <meta name="language" content="HIER"> <meta http-equiv="Content-Language" content="HIER"> <style type="text/css">
@import url(https://www.uni-heidelberg.de/css/uni/core/base_ltr.css); @import url(https://www.uni-heidelberg.de/css/uni/basemod_ltr_spread.css); @import url(https://www.uni-heidelberg.de/css/uni/content.css); @import url(https://www.uni-heidelberg.de/css/uni/style_ltr.css); @import url(https://www.uni-heidelberg.de/css/uni/print/print_ltr.css);
@import url(HIER den URL zur CSS Datei); </style>
<!-- Der folgende Abschnitt markiert den Menupunkt mit der id HIER -->
<style type="text/css" media="all">
<!--
#naviMainContainer a#HIER{background-color:#efefef;font-weight:bold;}
-->
</style>
</head>
Inhaltsbereich
<body> <div id="topBarInstitute"> <a name="up" id="up"></a> </div> <div id="page_margins"> <div id="page"> <div id="universitaet"> <a href="http://www.uni-heidelberg.de/"> <img src="http://www.uni-heidelberg.de/imperia/md/images/layoutgrafiken/schriftzug_uni_neu_448x32.gif" alt="Ruprecht-Karls-Universität Heidelberg"> </a> </div> <div id="greyBar"> </div> <div id="main">
linke Spalte
Wird hauptsächlich für die Navigation genutzt
<div id="col1">
<div id="col1_content" class="clearfix">
<div class="institutslogo">
<!-- Link zu Ihrer Startseite -->
<a href="HIER">
<!-- Ihr Schriftzug - Breite: 204 px-->
<img src="HIER" alt="HIER">
</a>
</div>
<div id="naviMainContainer">
<!-- Für Beispiele und Vorlagen: s. Dokumentationsseite -->
<div class="navilast">
</div>
</div> <!-- Ende NaviMainContainer -->
</div>
</div> <!-- ENDE Linke Spalte -->
Struktur der Navigation
Die Navigation hat eine Listen-Struktur (<ul>) . Jeder Navigationspunkt ist also Punkt einer Liste.
Den Grad der Einrückung wird im <li> Tag als class Attribut übergeben. Es gibt oberste, sub, subsub und subsubsub. Die Links der Navigationspunkte sollten eine eindeutige ID haben, um entsprechend hervorgehoben zu werden.
Beispiel für eine Navigation:
<ul> <li class="oberste"> <a href="..." id="navi_0">Startseite</a></li> <li class="oberste"> <a href="..." id="navi_1">Internationale Kontakte</a></li> <li class="sub"> <a href="..." id="navi_1_0" >Studium im Ausland</a> </li> <li class="subsub"> <a href="..." id="navi_1_0_0" >Erasmus</a> </li> <li class="subsubsub"> <a href="..." id="navi_1_0_0_0" >Studenten aus dem Ausland</a> </li> <li class="subsubsub"> <a href="..." id="navi_1_0_0_1" >Studieren im Ausland</a> </li> <li class="subsub"> <a href="..." id="navi_1_0_1" >Andere Austauschprogramme</a> </li> <li class="sub"> <a href="..." id="navi_1_1" >Partnerprojekte</a> </li> </ul>
rechte Spalte
Maginalspale für zusätzliche Informationen. Wie Sie diese Ausblenden lesen Sie im Abschnitt "Weitere Formatierungsmöglichkeiten".
<div id="col2">
<div id="col2_content" class="clearfix">
<!-- Für Beispiele und Vorlagen der rechten Spalte: s. Dokumentationsseite -->
</div>
</div> <!--ENDE rechte Spalte-->
Formatierung der Rechten Spalte
Das URZ CSS stellt folgende Klassen (für div Container) zur Verfügung: headlineRightColumn, headlineBoxRightColumn und boxRightColumn. Wie diese interpretiert und genutzt werden, Sehen Sie an folgendem Beispiel:
<div class="headlineRightColumn">Aktuelles</div> <div class="headlineBoxRightColumn"><p>Erste Nachricht</p></div> <div class="boxRightColumn"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam. </div> <div class="headlineBoxRightColumn"><p>Zweite Nachricht</p></div> <div class="boxRightColumn"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam. </div>
Erste Nachricht
Zweite Nachricht
mittlere Spalte
Enthält hauptsächlicher den Inhalt der Seite.
<div id="col3">
<div id="col3_content" class="clearfix">
<div id="content"> <!--// Beginn content //-->
<div id="naviHor">
<!-- optional: Horizontale Navigation (zB Link zur Kontaktseite/Lagekarte) Formatierung: <a href="LINK1">TEXT1</a> | <a href="LINK2">TEXT2</a> | ... -->
</div>
<div class="pathway">
<!-- Bread-Crump-Trail. Formatierung: <a href="LINK1">TEXT1</a> > <a href="LINK2">TEXT2</a> > ...-->
</div>
<!-- Überschrift der Seite -->
<h1>HIER</h1>
<div id="text">
<!-- Text der Seite -->
</div>
<div class="bearbeiter">
<!-- Kontakt des Seitenverantwortlichen -->
Verantwortlich:
<a href="HIER">E-Mail</a>
Letzte Änderung: HIER
</div>
<div class="topVariabel">
<a href="#up"><img src="http://www.uni-heidelberg.de/imperia/md/images/layoutgrafiken/icon_top.gif" alt="zum Seitenanfang/up" width="39" height="13"></a>
</div>
</div><!--// Ende content //-->
<!-- IE Column Clearing -->
<div id="ie_clearing">
 
</div>
</div>
<br class="rechts">
</div> <!-- Ende mittlere Spalte -->
Endbereich
</div> <!-- main -->
<!-- begin: #footer -->
<div id="footerBar">
</div> <!--// roter Balken Seitenfuß //-->
<div id="footer">
<div class="copyright">
© Copyright Universität Heidelberg.
<a href="http://www.uni-heidelberg.de/impressum.html">Impressum</a>.
</div><br>
</div> <!-- Ende footer -->
</div> <!-- Ende page -->
</div> <!-- Ende pagemargin -->
</body>
</html>
Weitere Möglichkeiten
Fixes Layout
Um der mittleren Spalte eine fixe Breite zu geben, ersetzen Sie
@import url(https://www.uni-heidelberg.de/css/uni/basemod_ltr_spread.css);
durch
@import url(https://www.uni-heidelberg.de/css/uni/basemod_ltr_small.css);
Ohne rechte Spalte
Um die rechte Spalte zu verbergen, ergänzen Sie den Body Tag zu
<body class="hidecol2">
Kasten mit "runden Ecken"
Um abgerundete Ecken zu bekommen, wird die Eigenschaft "border-radius" verwendet. Ältere Browser zeigen normale, eckige Boxen an. Die Universität verwendet die Klassen