Erstellen eigener HTML Templates für die Clanplanet Webseite Version 2 vom 12.11.2012 Copyright by Clanplanet www.clanplanet.de Teil 1: Einführung in die CP Templates Teil 2: Template des Newsbeitrages Teil 3: Template des Gästebucheintrages Teil 4: Template der kompletten Webseite Teil 5: 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$ Der Titel des Beitrages $text$ Der Text des Beitrages $linkurl$ URL auf die Beitragsseite mit den Kommentaren $name$ Benutzername des Erstellers $iconurl$ Icongrafik URL $kategorie$ Die Bezeichnung der News-Kategorie $zeitpunkt$ Zeitpunkt der Erstellung, z.b. 02.11.2008 15:43 $tag$ Tag der Erstellung, z.b. Sonntag $datum$ Ausgeschriebenes Datum, z.b. Sonntag 2. Nov. 2008 15:34 $kommentare$ Anzahl geschriebener Kommentare $erlaubt$ ja, wenn Kommentare erlaubt sind, sonst nein $counter$ 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;"> <td><img src="$iconurl$" width="40" height="40" border="0"> <td style="width: 100%"> <a href="$linkurl$">$titel$</a><br> <b>$name$</b> am <i>$zeitpunkt$</i> <td colspan="2" style="background-color: Gray">$text$ 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$ Der Text des Eintrages $name$ Benutzername des Erstellers $profillink$ Link-Tag <a > auf das Profil des Benutzers* $pmlink$ Link-Tag <a > zum Schreiben einer PM an den Benutzer* $account$ Ist 1 wenn der Benutzer mit Account schrieb, sonst 0 $zeitpunkt$ Zeitpunkt der Erstellung, z.b. 02.11.2008 15:43 $tag$ Tag der Erstellung z.b. Sonntag $datum$ Ausgeschriebenes Datum, z.b. Sonntag 2. Nov. 2008 15:34 $counter$ 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;"> <td>$profillink$$name$</a> $pmlink$pm schreiben</a> <td style="text-align: right">$zeitpunkt$ <td colspan="2" style="background-color: Gray">$text$ - 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> <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 Startseite $URL:Gästebuch$ URL auf den automatisierten Inhalt Gästebuch $URL:Mitgliederliste$ URL auf den automatisierten Inhalt Mitgliederliste $URL:Join us$ URL auf den automatisierten Inhalt Join us $URL:Eventplaner$ URL auf den automatisierten Inhalt Eventplaner $URL:Forum$ URL auf den automatisierten Inhalt Forum $URL:Fight us$ URL auf den automatisierten Inhalt Fight us $URL:Alte Umfragen$ URL auf den automatisierten Inhalt Alte Umfragen $URL:Clanwar History$ URL auf den automatisierten Inhalt 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 das Modul CPLogin aus Gibt das Modul Aktuelle Umfrage aus Gibt das Modul Eventticker aus Gibt das Modul Forenticker aus Gibt das Modul Claninfo aus Gibt das Modul Shoutbox aus Gibt das Modul Mitglieder aus Gibt das Modul Clanwars aus Gibt das Modul 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> $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 das Menü Links-Außen aus gibt das Menü Links-Innen aus gibt das Menü Rechts-Innen aus gibt das Menü 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> <title>beispieltemplate</title> $CPStyleSheet$ </head> <body> <table style="width: 994px; height: 100%; margin: auto"> <td colspan="3" style="text-align: center; height: 130px;" class="light"> <b>hier ist der Header</b> <td style="vertical-align: top; width: 150px; overflow: hidden;" class="dark"> <table style="margin-bottom: 5px;"> <td><a href="$url:startseite$">» News Home</a> <td><a href="$url:forum$">» Form</a> <td><a href="$url:gästebuch$">» Gästebuch</a> $Menü:3$ <td style="vertical-align: top; padding: 3px"> $Seiteninhalt$ <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$ </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> 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 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 cp_maincontent cp_maincontent_subpage Startseite homepage Newsbeitrag news-article Mitgliederliste members all-members / [Squadkürzel] / details Mitglied werden join-us Gästebuch guestbook Eventplaner events liste / editor / registration Fight us fight-us Clanwars clanwars history / details Alte Umfragen polls Ansehen reputation Eigener Inhalt own-content [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