Hilfe beim Entwickeln von Templates

So wird ein Template aufgebaut.

Schauen wir uns zum Beispiel das Template von dieser Seite an. Hierbei handelt es sich um ein einfaches HTML-Template. An den markierten Stellen sind Variablen und Elemente eingesetzt, die darunter erklärt werden.

<!DOCTYPE html>
<html lang="de">
<head>
	<!-- HC INSERTS TITLE -->
	<title>HCHEADTITLE</title>
	<meta charset="UTF-8" />
	<!-- HC INSERTS HEADDESCRIPTION -->
	<meta name="description" content="HCHEADDESCRIPTION" />
	<!-- HC INSERTS KEYWORDS -->
	<meta name="keywords" content="HCHEADKEYWORDS" />
	<link rel="shortcut icon" href="img/favicon.ico" />
	<link rel="stylesheet" href="css/style.css" />
	<link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" />
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,800" />
	<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="js/superfish.js"></script>
	<script src="js/jquery.tabs.pack.js"></script>
	<script src="js/jquery.fancybox-1.3.4.pack.js"></script>
	<script src="js/jquery.validate.min.js"></script>
	<script src="js/slides.min.jquery.js"></script>
	<script src="js/jquery.easing.1.3.js"></script>
	<script src="js/jquery.scrollTo-1.4.2-min.js"></script>
	<script src="js/onload.js"></script>
</head>
<body id="HCBODYID">
	<header>
		<div id="header-inner">
			<!-- The name of your website -->
			<a href="index.html" class="logo">Frontium</a>

			<!-- Main navigation -->
			<nav>
				<!-- HC INSERTS NAVIGATION FROM LEVEL 0 TO LEVEL 3 -->
				<hccontent type="navi" start="0" end="3" openall="true" name="Hauptnavigation" area="1" />
			</nav>
			
			<!-- Secondary navigation -->
			<div id="sec-navi">
				<!-- HC INSERTS NAVIGATION FROM LEVEL 0 TO LEVEL 0 -->
				<hccontent type="navi" start="0" end="0" area="2" name="Navigation Kopf und Fussbereich" />
			</div>
		</div><!-- /header-inner -->
	</header>
	<div id="pageHeader">
		<div class="wrapper">
			<!-- HC INSERTS FIX CONTENT, ALLOWS ONLY MODUL TEXT -->
			<hccontent type="fixcontent" area="1" allowed_modules="text" />
		</div><!-- /wrapper -->
	</div><!-- /pageHeader -->
	

	<div class="wrapper">
		<!-- HC INSERTS DYNAMIC CONTENT -->
		<hccontent type="dyncontent" area="1" />
		<div class="clear"></div>
	</div><!-- /wrapper -->
	
	<footer>
		<div class="wrapper">
			<div class="one-third">
				<!-- HC INSERTS FIX CONTENT, ALLOWS ONLY MODUL HEADLINE AND RECOMMEND h3-->
				<hccontent type="fixcontent" area="2" allowed_modules="headline" modulevars="val6:h3" maxlength="1" />
				<!-- HC INSERTS FIX CONTENT -->
				<hccontent type="fixcontent" area="3" />
			</div>
			
			<div class="one-third">
				<!-- HC INSERTS FIX CONTENT, ALLOWS ONLY MODUL HEADLINE AND RECOMMEND h3-->
				<hccontent type="fixcontent" area="4" allowed_modules="headline" modulevars="val6:h3" maxlength="1" />
				<!-- HC INSERTS FIX CONTENT -->
				<hccontent type="fixcontent" area="5" />				
			</div>
			
			<div class="one-third last">
				<!-- HC INSERTS FIX CONTENT, ALLOWS ONLY MODUL HEADLINE AND RECOMMEND h3-->
				<hccontent type="fixcontent" area="6" allowed_modules="headline" modulevars="val6:h3" maxlength="1" />
				<!-- HC INSERTS FIX CONTENT -->
				<hccontent type="fixcontent" area="7" />				
			</div>
				
			<div id="copyright">
				<!-- HC INSERTS FIX CONTENT -->
				<hccontent type="fixcontent" area="8" />
			</div><!-- /copyright -->
		</div><!-- /wrapper -->
	</footer>
	<!-- JavaScript -->
</body>
</html>

Die wichtigen Elemente in der Übersicht

Variablen

Humble Clouds bietet sechs Variablen an, die in den Templates genutzt werden können.

<title>HCHEADTITLE</title>

Die Variable HCHEADTITLE fügt den Titel der Seite ein.

<meta name="description" content="HCHEADDESCRIPTION" />

Die Variable HCHEADDESCRIPTION fügt die Beschreibung für die Seite ein.

<meta name="keywords" content="HCHEADKEYWORDS" />

Die Variable HCHEADKEYWORDS fügt die Keywords für die Seite ein.

<body id="HCBODYID">

Die Variable HCBODYID fügt die ID für den body-tag ein, z.B. für die Verwendung in den CSS. Dies ist der Name der Navigation für diese Seite ohne Leerzeichen.

Daneben gibt es noch die beiden Variablen HCPATHTEMPLATE und HCPATHWEBSITEABSOLUTE.
HCPATHTEMPLATE fügt den Pfad zum Template ein.
HCPATHWEBSITEABSOLUTE fügt den Pfad zum Stammverzeichnis der Website ein.

Navigationselemente

<hccontent type="navi" start="0" end="3" openall="true" name="Hauptnavigation" area="1" />

Die Navigationselemente sind durch das Attribut type="navi" gekennzeichnet. Es können unterschiedliche Navigationsstränge eingebaut werden. Zum Beispiel einen Strang für die Hauptnavigation und einen Strang im Footer für Impressum, Kontakt und ähnliches. Jeder Strang braucht das Attribut area="Strangnummer". In diesem Fall ist das area="1". In Zeile 41 findet sich der zweite Navigationsstrang mit dem area="2". Jeder Navigationsstrang sollte ein Namensattribut haben, damit man beim Anlegen einer neuen Seite leichter entscheiden kann, zu welchem Strang die neue Seite gehören soll. Die Attribute start und end geben an, welche bis welche Navigationsebene dargestellt werden soll. Das Attribut openall gibt an, ob alle Unternavigationsebenen angezeigt werden sollen, auch die, welche gerade nicht aktiv sind. Üblicherweise würde man hier den Wert false eintragen, damit nur die Unternavigationspunkte anzeigen werden, welche auch aktiv sind. Da wir hier ein Dropdownmenu mit Hovereffekt haben, wollen wir jedoch alle Unternavigationsebenen anzeigen haben, d.h. auch die Unterebenen von Support, auch wenn wir gerade nicht in diesem Bereich sind.

AttributWertTypPflichtfeld?Beschreibung
type navi string ja Definiert ein Navigationselement.
start 0-999 integer ja Gibt an, ab welcher Ebene die Navigation dargestellt werden soll.
end 0-999 integer ja Gibt an, bis zu welcher Ebene die Navigation dargestellt werden soll.
openall true/false string nein true zeigt alle Unterebenen von allen Navigationspunkten an. false zeigt nur die Unterebenen des aktiven Navigationspunktes an.
name Name der Navigation string ja Name des Navigationsbereiches.
area 1-999 integer ja Gibt den Bereich des Elementes an.

Contentelemente

<hccontent type="fixcontent" area="1" allowed_modules="text" />
<hccontent type="dyncontent" area="1" />
<hccontent type="fixcontent" area="2" allowed_modules="headline" modulevars="val6:h3" maxlength="1" />

Es gibt zwei Typen von Contentelementen. Einmal den fixcontent und einmal den dyncontent.

Der fixcontent wird an allen Stellen auf allen Seiten der Website dargestellt, wo ein fixcontent element mit der gleichen Areanummer vorhanden ist. Dieses Element ist gut für die Darstellung von Header- und Footerelementen, da diese üblicherweise auf allen Seiten gleich sein sollen. So müssen diese nur einmal auf einer Seite angelegt werden und werden dann auf allen Seiten dargestellt.

Der dyncontent wird immer nur auf der Seite dargestellt, für die er angelegt wurde. Wenn ihr Template mehrere Contentbereiche hat, geben Sie bitte für jeden Contentbereich ein anderes Area an. Z.B. area="1" für den Hauptcontentbereich und area="2" für den Seitencontentbereich.

fixcontents haben eigene areas und dyncontents auch. Die Angabe type="fixcontent" area="1" und type="dyncontent" area="1" überschneiden sich nicht und sind erlaubt.

Diese Seite hat im Header und Footerbereich verschiedene fixcontents welche so eingerichtet sind, dass sie den Designvorgaben entsprechen.
So ist zum Beispiel vom Designer gewünscht, dass der Footer drei Spalten hat und jeweils mit einer Überschrift beginnt, welcher per CSS ein bestimmtes Design zugewiesen ist. Deshalb beginnt jede Spalte mit einem fixcontent element, welches als Modul nur eine einzige Headline erlaubt und dort auch als Empfehlung h3 vorgibt.

AttributWertTypPflichtfeld?Beschreibung
type fixcontent/dyncontent string ja Definiert ein Inhaltselement.
area 1-999 integer ja Gibt den Bereich des Elementes an. Jedes Contentelement der Gruppe fixcontent und dyncontent muss ein einmaliges Area zugewiesen werden.
maxlength 1-999 integer nein Gibt die maximale Anzahl von Inhalten an, die in diesem Bereich eingefügt werden können.
allowed_modules Angabe der Module, (mehrere mit ';' getrennt) string nein Hierdurch kann beschränkt werden, welche Module für diesen Bereich zugelassen sind.
modulevars Angabe von Feld und Wert im Format Feld:Wert;Feld:Wert... string nein Ein Vorschlag des Designers, welche Werte für dieses Modul benutzt werden sollten. Hierfür muss auch das Attribut allowed_modules mit der Angabe von nur einem Modul gesetzt sein.