Sie sind hier:

Vom HTML zum Template

Aus dem HTML-Design eine Websitebaker-Designvolage bauen.

Eine halbwegspassable HTML-Vorlage haben wir jetzt. Nun ist es an der Zeit die Websitebaker spezifischen Elemente in die HTML-Vorlage zu integrieren.

Zuerst einmal ändere ich den Titel im Header der Seite wie folgt:
Vorher:
<title>Designentwurf fuer ein WebsiteBaker Template</title>

Nachher:
<title><?php page_title(); ?></title>

<?php page_title(); ?> wird von Website Baker durch den Titel der Internetseite ersetzt, der im CMS hinterlegt ist.
In den Header kann man auch noch wenn man möchte Suchbegriffe und eine Beschreibung hinterlegen. Beide sind auf der Seite nicht direkt sichtbar, aber für viele Suchmaschinen von großer Bedeutung. Also sollte man darauf nicht verzichten.
<meta name="description" content="<?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />
Wie am Anfang dieses Tutorials bereits erwähnt, soll unser Design später mit Hilfe von CSS Stylesheets seinen letzten Feinschliff erhalten. Der besseren Übersichtlichkeit wegen werden alle CSS-Formatierungen in externe Dateien ausgelagert. Die Position der CSS-Dateien muss natürlich auch im Header definiert werden und zwar z.B. so:
<link href="<?php echo TEMPLATE_DIR; ?>/seite.css" rel="stylesheet" type="text/css" media="screen" />
<link href="<?php echo TEMPLATE_DIR; ?>/druckbareseite.css" rel="stylesheet" type="text/css" media="print" />
In der seite.css werden dann alle Formatierungen vorgenommen, die erforderlich sind, damit die Seite nett anzuschauen ist.
Die druckbareseite.css bietet eine Drucker-optimierte Seite, die man nur zu sehen bekommt wenn man die Seite ausdrucken möchte.
Der header sieht jetzt wie folgt aus:
<head>
<title><?php page_title(); ?></title>
<meta name="description" content="<?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />
<link href="<?php echo TEMPLATE_DIR; ?>/seite.css" rel="stylesheet" type="text/css" media="screen" />
<link href="<?php echo TEMPLATE_DIR; ?>/druckbareseite.css" rel="stylesheet" type="text/css" media="print" />
</head>
Jetzt ist es an der Zeit etwas in die Kopfzeile zu schreiben. Hierzu möchte ich gerne den Seitennamen verwenden, den ich in Websitebaker angegeben habe. Also tausche ich
<td>Inhalt der Kopfzeile</td>
gegen
<td><?php page_title('','[WEBSITE_TITLE]'); ?></td>

Jetzt brauchen wir noch das Menü. Hierzu einfach
<td>Menü Inhalt</td>
gegen
   <td>
     <?php
       if(SHOW_MENU) { /* Wird nur angezeigt, wenn auch benötigt */
        show_menu();
       }
      ?>
   </td>
ersetzen.
Ja, genau richtig gesehen. An dieser Stelle werden mehrere Zeilen eingesetzt. Das eigentliche Menü ist show_menu(); . Es kann aber sein, dass man einige Seiten hat, auf denen man das Menü nicht angezeigt haben möchte, dafür sind die anderen Zeilen da.
Als nächstes muss dafür gesorgt werden, dass der Inhalt der unterschiedlichen Seiten auch an seiner vorgesehenen Position angezeigt wird. Dazu tauschen wir einfach

<td>Inhalt der Seite</td>
gegen
<td><?php page_content(); ?></td>

Unterhalb unseres eigentlichen Designs platzieren wir jetzt noch eine Fußzeile, welche auch aus Websitebaker heraus formatiert werden kann.
Vorher:
</table>

</body>
Nachher:
</table>

<center><?php page_footer(); ?></center>
</body>
Würden wir unsere Seite jetzt schon als Websitebaker Designvorlage betrachten können, sähe sie in etwa so aus:

Template ohne CSS formatierungen

Wie gewollt wird der Seitentitel, das Menü, der Seiteninhalt und die Fußzeile genau dort eingebunden, wo sie hin sollten. Design-technisch ist das ganze aber noch eine halbe Katastrophe. Das liegt unter anderem daran, dass der letzte Feinschliff fehlt und wir die CSS-Dateien noch nicht erstellt haben, die im Header definiert sind.

Weiter zu "CSS Formatierungen" >>

Seitenanfang