Design Workshop - Teil 2
Im ersten Teil dieses Workshops haben wir gezeigt, wie man ein Webseitendesign von freecmstemplates.org für Papoo zugänglich macht. Letztlich haben wir damit noch nicht viel gewonnen, da das Design nun im Moment noch rein statisch ist und lediglich angezeigt wird, aber noch nicht funktioniert. In diesem Teil wollen wir nun damit anfangen, die einzelnen Papoo-Module in das Template zu integrieren.
Einbindung des Content-Bereiches
In dem Verzeichnis "/styles/memoranda/templates" Ihrer lokalen Papoo Installation finden Sie die Datei "__index.html". Dies ist die Template-Datei des neuen Designs, die bei der Einbindung des Designs automatisch generiert wurde und die Sie nun anpassen müssen. Wenn Sie die Datei in einem Editor öffnen, werden Sie als erstes feststellen, dass der DOCTYPE zweimal definiert ist, was daran liegt, dass Papoo diesen automatisch einfügt, ungeachtet dessen, ob er in der heruntergeladenen Template-Datei auch vorhanden ist. Entfernen Sie nun den String
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ml1/DTD/xhtml1-strict.dtd">
aus Zeile 7. Desweiteren sehen Sie, dass im <head>-Bereich die Datei "_kopf.utf8.html" eingebunden wird. Dies ist eine dynamisch generierte Datei, die anhand der Administrationsoberfläche automatisch erstellt wird. Dies ist gut so; hier brauchen Sie nichts zu ändern. In Zeile 7 wird die Datei "_body_kopf.utf8.html" eingebunden, leider an der falschen Stelle. Schneiden Sie den Inhalt von Zeile 7
{include file="_body_kopf.utf8.html"}
aus und fügen Sie Ihn in Zeile 27, anstelle des <body>-tags, wieder ein und speichern Sie die Datei. Das Resultat sollte jetzt so aussehen:
...</head>
{include file="_body_kopf.utf8.html"}
<div id="wrapper">
...
In dem Verzeichnis "/styles_default/templates" finden Sie ebenfalls eine Datei "__index.html"; das ist eine Standard-Template-Datei, die den grundsätzlichen Aufbau einer Papoo-Seite beschreibt. Wenn Sie sich diese Datei in einem Editor anschauen werden Sie sehen, dass ein Papoo-Template grundsäzlich in fünf Bereiche unterteilt ist, so wie Sie es vom Standard-Design her kennen:
- Kopfbereich (auch "Header" genannt)
- linke Spalte
- rechte Spalte
- mittlere Spalte (der Content-Bereich, in dem die Artikel erscheinen)
- Fussbereich (auch "Footer" genannt)
Jeder dieser fünf Bereiche wird über eine eigene, dynamisch generierte HTML-Datei gesteuert, die dann in die Datei "__index.html" eingebunden wird. Der Trick ist es nun, diese fünf Bereichsdateien in das Design, welches man in Papoo einbinden möchte, an der richtigen Stelle zu integrieren. Wenn wir uns das Design "memoranda" noch einmal anschauen, dann sehen wir im Grunde genommen nur drei Bereiche: Linke Spalte, Content-Bereich (mittlere Spalte) und Footer. In unserem Beispiel genügt es also, die drei Dateien "_inhalt_mitte.html", "_inhalt_links.html" und "_fuss.html" an den richtigen Stellen in das memoranda-Template einzubinden.
In der neu generierten "__index.html"-Datei des memoranda-Designs sehen Sie in Zeile 32 das Start-tag des div-Blockes "content":
...<div id="content">
<div class="post">
<h2 class="title"><a href="#">Welcome to Memoranda </a></h2>
...
Die Vermutung liegt nahe, dass innerhalb dieses div-Blockes der Content-Bereich geregelt wird, der sich in Papoo normalerweise in der mittleren Spalte befindet. Um dies zu überprüfen, fügen Sie mal einen beliebigen Text hinter das <div id="content"> tag in Zeile 32 ein und schauen Sie sich das Ergebnis im Browser an. Wie nicht anders zu erwarten, hat sich die Vermutung bestätigt:
Den soeben eingefügten Text können Sie nun wieder löschen. In diesen Content-Bereich müssen wir nun die mittlere Papoo-Spalte einbinden. Fügen Sie dazu nach Zeile 32 eine neue Zeile ein und binden Sie dort mit
{include file="_inhalt_mitte.html"}
die zuständige HTML-Datei ein:
...<div id="content">
{include file="_inhalt_mitte.html"}
<div class="post">
<h2 class="title"><a href="#">Welcome to Memoranda </a></h2>
...
Speichern Sie die Datei "__index.html" ab und betrachten Sie das Ergebnis im Browser:
(Klick zum vergrössern)
Wie Sie sehen, hat die Einbindung funktioniert. Die beiden Module "Brotkrummen" und "Inhalt" werden dargestellt, und wenn Sie weiter runterscrollen, sehen Sie immer noch den alten Content, der von vorneherein in dem Template vorhanden war. Dies ist auch erstmal ganz nützlich, damit man die Formatierungen vergleichen und anpassen kann. Zum Beispiel werden die Überschriften der Artikel noch nicht richtig dargestellt. Im Original sind sie Orange; im Papoo-Content noch schwarz. Ausserdem ist die Schriftart eine andere.
Im nächsten Teil dieses Workshops werden wir uns dann damit beschäftigen, diese Formatierungen anzupassen.
Kommentar zu Design Workshop - Teil 2?
Warenkorb
Hosting für Papoo
Sie wollen wissen, welcher der beste Provider für Ihre Internetseite ist? Dann klicken Sie hier: Bester Provider für Papoo
Unsere Leistungen
Was wir für die tun können? Eine Menge: Installation, Designumsetzungen, Programmierung uvm. – hier erfahren Sie mehr...
Newsletter abonnieren.
Agentur in Ihrer Region
Finden Sie Ihren Ansprechpartner für Ihre Umsetzung in Ihrer Region - unsere zertifizierten Partner beraten Sie und setzen für Sie Ihre Webseite um. Unsere zertifizierten Partner finden Sie hier...
Seminarkalender
| Mo | Di | Mi | Do | Fr | Sa | So |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 |
Nach vielen Monaten Entwicklungs- und Testzeit geht die MySEOapp nun endlich an den Start. In den letzten Wochen haben wir die