Erstellen eigener HTML Templates für die Clanplanet Webseite

Erstellen eigener HTML Templates für die Clanplanet Webseite
Version 2 vom 12.11.2012 – Copyright by Clanplanet
www.clanplanet.de
•
•
•
•
•
Teil
Teil
Teil
Teil
Teil
1:
2:
3:
4:
5:
Einführung in die CP Templates
Template des Newsbeitrages
Template des Gästebucheintrages
Template der kompletten Webseite
Weitere Hinweise und Details
- Teil 1: Einführung in die CP Templates HTML und HTML Templates
„HTML Templates“ beschreiben exakt, wie die Clanplanet Webseite oder Teile davon aufgebaut
sind und werden wie der Name schon sagt in HTML geschrieben. Sowohl für Anfänger, als auch
für Fortgeschrittene bieten Seiten wie http://de.selfhtml.org und http://www.w3schools.com
Hilfe zur Entwicklung von HTML an. Wir gehen hier davon aus, dass Grundkenntnisse bereits
vorhanden sind, mehr als HTML mit CSS ist jedoch nicht erforderlich. Kenntnisse über
Programmiersprachen oder das Verwenden von Datenbanken werden für die Templates nicht
benötigt.
Welche Layouttechnik ist am besten geeignet?
Bei HTML Seiten unterscheidet man zwischen <div> + CSS und <table> Layouts. Mit dem
<table> Tag wird eine Tabelle begonnen, mit der sich die Webseite in Bereiche einteilen lässt.
Früher wurden Webseiten meistens so erstellt, heutzutage benutzt man in der Regel das <div>
zusammen mit einem CSS anstelle von Tabellen, weil das gewisse Vorteile bringt. Jedoch ist es
auch komplizierter und für einen Anfänger daher deutlich schwieriger zu lernen. Wer noch nie
mit HTML gearbeitet hat, kann hier, wenn er möchte, erst mit Tabellen beginnen und bei
Bedarf und besseren Kenntnissen später umsteigen. Beide Techniken lassen sich auch
gemeinsam verwenden.
In unseren Beispielen hier haben wir Tabellen verwendet, um die Inhalte so einfach wie
möglich zu vermitteln.
Richtig Testen ist wichtig
Damit eure Webseite bei allen Besuchern funktioniert und so aussieht wie gewünscht, muss
das Template gut getestet werden. Dazu empfehlen wir die Seite in zwei oder noch mehr
Webbrowsern zu testen, vor allem mit MS Internet Explorer und Mozilla Firefox, denn auch
wenn HTML ein Standard ist, so gibt es feine Unterschiede bei der Verarbeitung im Browser.
Auch Fehler im HTML Code können in verschiedenen Browsern zu unterschiedlichen Ausgaben
führen.
Wie funktioniert das Ganze nun?
Wir wollen mit den Templates also den Aufbau und das Aussehen der Webseite selbst
festlegen. Die Inhalte werden nach wie vor vom Clanplanet System eingefügt und zwar genau
dort, wo wir es möchten. Dafür stehen Aufrufe zur Verfügung, mit denen dem Clanplanet
System „mitgeteilt“ werden kann, wo es welchen Inhalt einfügen soll. Aufrufe beginnen und
enden immer mit dem $ Dollarzeichen. Wir werden das nun im Kapitel 2 am Newsbeitrag
genau zeigen. Alle Beispiele sind bewusst einfach aufgebaut, damit sie nur das Nötige zeigen.
- Teil 2: Template des Newsbeitrages Steigen wir also mit einer Liste der möglichen Aufrufe des Newsbeitrages direkt ein:
1
$titel$
$text$
$linkURL$
$name$
$iconURL$
$kategorie$
$zeitpunkt$
$tag$
$datum$
$kommentare$
$erlaubt$
$counter$
Der Titel des Beitrages
Der Text des Beitrages
URL auf die Beitragsseite mit den Kommentaren
Benutzername des Erstellers
Icongrafik URL
Die Bezeichnung der News-Kategorie
Zeitpunkt der Erstellung, z.B. 02.11.2008 15:43
Tag der Erstellung, z.B. „Sonntag“
Ausgeschriebenes Datum, z.B. „Sonntag 2. Nov. 2008 15:34“
Anzahl geschriebener Kommentare
„ja“, wenn Kommentare erlaubt sind, sonst „nein“
Beginnt bei 1 und zählt pro ausgegebenen Beitrag eins hoch
Als Beispiel ein kurzer HTML Code, den man als Newstemplate benutzen könnte:
<table style="width: 90%; margin: auto; margin-bottom: 25px; background-color: Navy;">
<tr>
<td><img src="$iconURL$" width="40" height="40" border="0"></td>
<td style="width: 100%">
<a href="$linkURL$">$titel$</a><br>
<b>$name$</b> am <i>$zeitpunkt$</i>
</td>
</tr>
<tr>
<td colspan="2" style="background-color: Gray">$text$</td>
</tr>
</table>
Dieser Quelltext erzeugt einen Newsbeitrag mit der Icongrafik oben links, rechts daneben den
Titel des Beitrages und direkt darunter den Benutzernamen des Erstellers und den Zeitpunkt,
an dem der Beitrag geschrieben wurde. Dann folgt der eigentliche Text des Beitrages. Klickt
man auf den Titel, gelangt man zur Seite mit den Kommentaren.
Um wirklich zu verstehen, was man mit den Aufrufen alles genau machen kann, sollte man ein
bisschen rumprobieren. Die Aufrufe $counter$ und $erlaubt$ machen eigentlich nur in
Verbindung mit Javascript Sinn und sind daher für Fortgeschrittene gedacht. Damit könnte
man zum Beispiel dem ersten Newsbeitrag andere Farben geben als den folgenden und den
Link auf die Kommentarseite nur dann anzeigen, wenn auch Kommentare geschrieben werden
dürfen. Sind Kommentare nicht erlaubt, ist der Aufruf $kommentare$ leer.
- Teil 3: Template des Gästebucheintrages $text$
$name$
$profilLINK$
$pmLINK$
$account$
$zeitpunkt$
$tag$
$datum$
$counter$
Der Text des Eintrages
Benutzername des Erstellers
Link-Tag <a ... > auf das Profil des Benutzers*
Link-Tag <a ... > zum Schreiben einer PM an den Benutzer*
Ist 1 wenn der Benutzer mit Account schrieb, sonst 0
Zeitpunkt der Erstellung, z.B. 02.11.2008 15:43
Tag der Erstellung z.B. „Sonntag“
Ausgeschriebenes Datum, z.B. „Sonntag 2. Nov. 2008 15:34“
Beginnt bei 1 und zählt pro ausgegebenen Beitrag eins hoch
*Da im Gästebuch auch Benutzer ohne Account schreiben können, werden im Gegensatz zu
den Links im Newstemplate hier komplette HTML Tags erstellt, die aber nur das öffnende
Element beinhalten, also nicht vergessen noch das </a> zu setzen. Sollte ein Benutzer ohne
Account geschrieben haben, wird nichts ausgegeben, so dass kein anklickbarer Link erzeugt
wird.
Auch hier ein einfaches Beispiel:
2
<table style="width: 80%; margin-bottom: 20px; background-color: Maroon;">
<tr>
<td>$profilLINK$$name$</a> | $pmLINK$PM schreiben</a></td>
<td style="text-align: right">$zeitpunkt$</td>
</tr>
<tr>
<td colspan="2" style="background-color: Gray">$text$</td>
</tr>
</table>
- Teil 4: Template der kompletten Webseite News- und Gästebuchtemplates sind noch recht einfach. Nun kommen wir zum Template für
die komplette Webseite, womit wir die gesamte Seite selbst erstellen und die Inhalte aus dem
Clanplanet System aufrufen können.
Einfügen des Inhaltes der Seite
Mit dem wichtigsten Aufruf $Seiteninhalt$ wird der eigentliche Inhalt der Seite eingefügt,
also zum Beispiel das Gästebuch oder die Startseite.
Die Minimalanforderung an den Aufbau des Templates sieht also so aus:
<html>
<head>
...
</head>
<body>
...
$Seiteninhalt$
...
</body>
</html>
Damit wird man allerdings noch nicht weit kommen und deswegen gibt es noch eine Reihe
weiterer Aufrufe, mit denen wir auch auf andere Elemente der CP Webseite zugreifen können.
Wichtig sind vor allem die Verlinkungen auf die automatisierten Inhalte, auf eigene
Inhalte und das Ausgeben der Module. Zum Erstellen der Links auf automatisierte Inhalte
gibt es folgende Aufrufe:
Links auf Seiten mit automatisierten Inhalten erstellen
$URL:Startseite$
URL auf den automatisierten Inhalt
$URL:Gästebuch$
URL auf den automatisierten Inhalt
$URL:Mitgliederliste$
URL auf den automatisierten Inhalt
$URL:Join us$
URL auf den automatisierten Inhalt
$URL:Eventplaner$
URL auf den automatisierten Inhalt
$URL:Forum$
URL auf den automatisierten Inhalt
$URL:Fight us$
URL auf den automatisierten Inhalt
$URL:Alte Umfragen$
URL auf den automatisierten Inhalt
$URL:Clanwar History$ URL auf den automatisierten Inhalt
Startseite
Gästebuch
Mitgliederliste
Join us
Eventplaner
Forum
Fight us
Alte Umfragen
Clanwar History
Diese Aufrufe erzeugen nur die URL, einen Link erzeugt man zum Beispiel so:
<a href="$URL:Startseite$">Startseite und News</a>
Links auf Seiten mit eigenem Inhalten
$URLInhalt:[Titel]$
Erstellt eine URL auf den Inhalt mit dem Titel „Titel“
Hat man zum Beispiel den eigenen Inhalt „Download Liste“ angelegt, erzeugt man den Link so:
<a href="$URLInhalt:Download Liste$">Unsere Liste mit Downloads</a>
Module mit automatisieren Inhalten ausgeben
3
$Modul:CPLogin$
$Modul:Aktuelle Umfrage$
$Modul:Eventticker$
$Modul:Forenticker$
$Modul:Claninfo$
$Modul:Shoutbox$
$Modul:Mitglieder$
$Modul:Clanwars$
$Modul:Besucherzähler$
Gibt
Gibt
Gibt
Gibt
Gibt
Gibt
Gibt
Gibt
Gibt
das
das
das
das
das
das
das
das
das
Modul
Modul
Modul
Modul
Modul
Modul
Modul
Modul
Modul
CPLogin aus
Aktuelle Umfrage aus
Eventticker aus
Forenticker aus
Claninfo aus
Shoutbox aus
Mitglieder aus
Clanwars aus
Besucherzähler aus
Ganz wichtig ist das Modul CPLogin, damit man in die Seitenverwaltung kommt und Meldungen
des CP Systems angezeigt werden (z.B. das Erhalten einer PM). So könnte man ein Modul
einbinden und ihm dabei 150px Breite geben:
<div style="width: 150px; overflow: hidden;">
$Modul:CPLogin$
</div>
Mit den bisher erklärten Aufrufen können wir eine funktionierende Seite aufbauen. Was nun
kommt ist nicht zwingend erforderlich, kann aber Arbeit ersparen und das Template weiter
aufwerten.
Das CP Style Sheet ausgeben
Alle automatisierten Inhalte benutzen Klassen aus dem Clanplanet Style Sheet. Wenn Du diese
nicht selbst anlegen möchtest, dann benutze einfach das CP Style Sheet, Farben und
Layouteinstellungen der Seite sind in diesem Stylesheet enthalten, so wie in den Optionen zum
Design angegeben. Du kannst natürlich selbst weitere Style Eigenschaften zusätzlich anlegen.
<html>
<head>
$CPStyleSheet$
...
</head>
URL des Design Speicherorts der Seite
Mit $designhost$ wird die Host-Adresse eingefügt, die bei den Design Einstellungen zum
Speichern der Grafiken verwendet wird. Damit lassen sich Templates universeller gestalten.
<img src="$designhost$test.gif">
Eigene Inhalte aus dem CP System einfügen
Oft gibt es Teile der Webseite, die sich regelmäßig ändern. Würde man diese fest im Template
einprogrammieren, müsste jedes Mal das Template bearbeitet werden, wenn nur ein kleiner
Teil der Webseite ausgetauscht werden muss. Ein typisches Beispiel sind Verlinkungen fremder
Seiten, zum Beispiel Partner, befreundete Clans oder Sponsoren. Hier empfiehlt es sich diesen
oft zu verändernden Codeabschnitt einfach als eigenen Inhalt anzulegen und im Template nur
diesen Inhalt abzurufen:
$Inhalt:[Titel]$
gibt den eigenen Inhalt mit Titel „Titel“ aus
<div style="width: 130px; overflow: hidden;">
$Inhalt:Befreundete Clans$
</div>
Die Formateinstellung des Inhaltes wird dabei beibehalten, hat man CP Code gewählt, wird
also auch der CP Code auf den Inhalt angewendet. Das folgende Beispiel gibt den eigenen
Inhalt „Befreundete Clans“ auf einer Breite von 130px aus.
Sollte der Inhalt nicht gefunden werden, wird er einfach ausgelassen, was übrigens auch beim
Aufruf $URLInhalt:...$ gemacht wird. Das ermöglicht es Templates zu erstellen, die nicht
speziell für einen Clan bzw. eine Gilde erschaffen wurden, sondern sehr allgemein gehalten
4
sind und daher von vielen Clans benutzt werden können. Man legt im Template Inhalte und
Links an, die typisch sind (z.B. Regeln, History, Server, Sponsoren, ...) und gibt zum Template
eine Erklärung, dass diese Inhalte verwendet werden können. Benutzt nun ein fremder Clan
Dein Template, kann er diese Inhalte anlegen und sie erscheinen automatisch an der von Dir
festgelegten Stelle. Hat er sie nicht, sind sie einfach nicht vorhanden.
Grafische Boxen
Auch oft gebraucht sind die grafischen Boxen, die mit diesen Aufrufen erzeugt werden:
$BoxStart:[Titel]$
öffnet eine Box mit der Titelzeile „Titel“
$BoxEnde$
schließt eine Box
<div style="width: 200px; overflow: hidden;">
$BoxStart:Meine neue Box$
Das ist der Inhalt meiner Box. Man könnte auch ein Modul hier reinsetzen.
$BoxEnde$
</div>
Zu beachten ist, dass eine Box die Breite 100% gesetzt bekommt und daher durch das Layout
bereits in eine Größe „gezwungen“ werden muss, hier im Beispiel sind es 200px. Es ist nicht
zwingend erforderlich, wie hier um jede Box (und genauso jeden Inhalt und jedes Modul), ein
<div> oder eine Tabelle zu legen. Es ist nur wichtig, dass irgendwo die verfügbare Breite
eingeschränkt wurde. Dies kann auch schon beim Layout der Seite selbst erfolgen.
Fertig eingestellte Menüs
Auch die folgenden Abrufe können das Template allgemeiner halten und vereinfachen
nachträgliche Änderungen, denn Du kannst die vier Menüs der Clanplanet Webseite im
Template einfügen lassen. Zum Beispiel könntest Du in einem Menü alle externen Links
anlegen und dies einfach im Template aufrufen. Möchtest Du später einen Link entfernen oder
hinzufügen, reicht es das Menü zu bearbeiten – das Template dagegen bleibt wie es ist.
$Menü:1$
$Menü:2$
$Menü:3$
$Menü:4$
gibt
gibt
gibt
gibt
das
das
das
das
Menü
Menü
Menü
Menü
Links-Außen aus
Links-Innen aus
Rechts-Innen aus
Rechts-Außen aus
Beachte, dass auch mehrere Menüs übereinander gelegt werden können, es wird nämlich nicht
die ganze „Menüleiste“ erstellt, sondern nur der Inhalt. Benutzt Du die Innenmenüs im
Template, solltest Du sie in der Seitenverwaltung ausschalten, sonst erscheinen sie noch mal
auf der Startseite. Sie werden dann automatisch in Boxdesign mit 100% Ausdehnung
dargestellt. Das ist auch ideal, wenn Dein Menü nicht die CP Standardgrößen hat, denn so
passt sich die Breite automatisch an. Die beiden Außenmenüs haben diese Einstellung nicht,
ihre Breite und ihr Design wird so dargestellt, wie in den Einstellungen festgelegt.
Feststellen, ob ein Benutzer eingeloggt oder sogar Mitglied ist
Der Aufruf $loginstatus$ gibt aus, ob ein Benutzer eingeloggt und wenn ja, ob er Mitglied auf
der Webseite ist. Der Wert lässt sich mit Javascripten weiterverarbeiten. Er ist 0, wenn der
Benutzer nicht eingeloggt ist, 1 wenn er eingeloggt ist und 2 wenn er eingeloggt und ein
Mitglied ist.
Brauche ich noch ein Design bzw. Grafiken nach der Clanplanet Vorlage?
Bestimmte Grafiken und die Farbeinstellungen werden nach wie vor verwendet. Dazu gehören
in jedem Fall die Grafiken der Boxen (für Gästebuch, Eventplaner, ...) und die des Forums.
Geschafft
Alles nötige ist nun Erklärt worden. Zum Abschluss haben wir noch ein Beispiel wie das
Template für die Webseite vom Prinzip her aufgebaut werden könnte. Wir hoffen die HTML
Templates damit ausreichend erklärt zu haben und wünschen nun viel Erfolg beim Arbeiten an
der Webseite. Im Teil 5 dieser Anleitung haben wir noch ein paar technische Details erklärt.
5
<html>
<head>
<title>Beispieltemplate</title>
$CPStyleSheet$
</head>
<body>
<table style="width: 994px; height: 100%; margin: auto">
<tr>
<td colspan="3" style="text-align: center; height: 130px;" class="light">
<b>Hier ist der Header</b>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 150px; overflow: hidden;" class="dark">
<table style="margin-bottom: 5px;">
<tr><td><a href="$URL:Startseite$">&raquo; News | Home</a></td></tr>
<tr><td><a href="$URL:Forum$">&raquo; Form</a></td></tr>
<tr><td><a href="$URL:Gästebuch$">&raquo; G&auml;stebuch</a></td></tr>
</table>
$Menü:3$
</td>
<td style="vertical-align: top; padding: 3px">
$Seiteninhalt$
</td>
<td style="vertical-align: top; width: 150px; overflow: hidden;" class="dark">
$Modul:CPLogin$
<div style="height: 10px;"></div>
$Modul:Aktuelle Umfrage$
<div style="height: 10px;"></div>
$Inhalt:Partner$
</td>
</tr>
</table>
</body>
</html>
- Teil 5: Weitere Hinweise und Details Welchen Doctype verwenden – HTML oder XHTML?
Kurz und einfach: Wir empfehlen <!DOCTYPE html> zu verwenden, also HTML 5. Das Template
der kompletten Webseite beginnt dann so:
<!DOCTYPE html>
<html>
<head>
...
Die eingebundenen Inhalte, die von Clanplanet erstellt werden, verwenden auch HTML und
nicht in XHTML.
Wie/Wo soll das Style Sheet (CSS) eingebunden werden?
In der Regel befindet sich bei Webseiten das CSS in einer extra Datei. Der Vorteil davon ist,
dass man bei Änderungen nur einmal die CSS Datei bearbeitet und die Änderung dann auf
allen Seiten des Webauftritts übernommen werden. Da man bei Clanplanet keine extra Datei
anlegen kann, empfehlen wir unbedingt das CSS mit <style> ... </style> direkt in das
Template einzufügen und nicht in einer externen Datei zu hosten. Das Template ist nur eine
einzige Seite, den oben genannten Vorteil bei einer Trennung gibt es hier nicht. Es besteht
6
jedoch die Gefahr, dass die externe Datei wegen Störungen oder weil sie gelöscht wurde nicht
mehr verfügbar ist und dann die ganze Seite nicht mehr funktioniert.
Automatisch eingefügtes HTML von Clanplanet
Direkt unter dem <head> Tag werden bei der Ausgabe automatisch für die Seite benötigte
HTML Codes eingefügt. Unter anderem ein Style Sheet mit Vorformatierungen, welches man
sich anschauen sollte, wenn man mit CSS arbeitet. Auch das Charset wird dort schon
eingetragen, weswegen es im Template selbst nicht mehr nötig ist.
Javascript Variablen kennzeichnen den gerade geladenen Inhalt
Wer seine Seite abhängig vom geladenen Inhalt unterschiedlich gestalten, spezielle Effekte
oder Besonderheiten je nach Inhalt einbringen möchte, muss auch wissen, welcher Inhalt
gerade geladen wurde und dann per Javascript z.B. Styles verändern oder ähnliches. Dafür
werden von uns beim Ausgeben eines Inhalts auch Javascript Variablen angelegt, die dann in
eigenen Scripten weiterverarbeitet werden können.
Javascript Variablen:
cp_maincontent
cp_maincontent_subpage
Die Tabelle zeigt, welche Werte die Variablen auf den verschiedenen Inhaltsseiten haben. Ist
eine Subpage nicht vorhanden, wird die cp_maincontent_subpage trotzdem erstellt und enthält
eine leere Zeichenfolge.
Seite
Startseite
Newsbeitrag
Mitgliederliste
Mitglied werden
Gästebuch
Eventplaner
Fight us
Clanwars
Alte Umfragen
Ansehen
Eigener Inhalt
cp_maincontent
homepage
news-article
members
join-us
guestbook
events
fight-us
clanwars
polls
reputation
own-content
cp_maincontent_subpage
all-members / [Squadkürzel] / details
liste / editor / registration
history / details
[Titel des Inhalts]
So werden die Variablen von uns z.B. auf der Clanwar-History Seite eingefügt:
<script type="text/javascript">
var cp_maincontent = 'clanwars';
var cp_maincontent_subpage = 'history';
</script>
Es ist wichtig zu beachten, dass dieser Code mit den Variablen erst am Ende des Inhalts
eingefügt wird. In HTML Templates können sie also erst nach dem $Seiteninhalt$ verwendet
werden. Für Seiten ohne eigenem Template, ist für den Inhaltsbereich die ID cp-content-area
vorhanden, so dass man auch hier die Javascript Variablen nutzen kann, um z.B. den
Hintergrund auszutauschen. Dafür muss man dort das Javascript zum Verarbeiten dieser
Variablen im Rechtsmenü als eigenen Inhalt platzieren.
7