Template verwenden

Eine gut strukturierte Website ist eingeteilt in zwei Bereiche, in ein Template, das im Wesentlichen alles darstellt, was auf jeder Seite unverändert bleibt, wie z.B. die Farbe oder das Logo und einen Content-Bereich, der die Seiteninhalte darstellt, die sich von Seite zu Seite ändern, wie z. B. der Text (also der eigentliche Seiteninhalt).

Das Template ist das Gesicht und der Content der Arbeitsbereich der Website.

Mit dem Template legt man fest, wo und wie auf der Seite die einzelnen Elemente angeordnet werden sollen. Es ist die Struktur, die auf allen Seiten erkennbar und immer gleich ist, wenn das selbe Template verwendet wird.

Es kommt aber häufig vor, dass mehrere Templates verwendet werden. So gibt es beispielsweise ein eigenes Template für den Download-Bereich oder für die Fehlerausgabe. Dies bedeutet, dass sich dann der Seitenaufbau im Download-Bereich und auf der Fehlerseite von den übrigen Seiten zum Teil deutlich unterscheidet.

Um grob zu verstehen, wie ein Template erstellt wird und aufgebaut ist, sind folgende Videos auf YouTube empfehlenswert:

www VideoMarathon von konnysworld

Der wesentlich einfachere Weg ist es, ein fertiges Template zu verwenden. Es gibt im Internet zahlreiche Anbieter von kostenlosen Templates. Man sollte darauf achten, dass die Quelle seriös ist, z. B. von selfhtml, Heise, Chip oder einem anderen Magazin empfohlen wird und sicherheitshalber die downgeloadeten Datein immer noch einmal von einem aktuellen Virenscanner prüfen lassen.

Die einzelnen Bereiche werden in einem Template mit den <div>, <frame> und <iframe> Tags festgelegt. In HTML5 gibt es keinen div-Tag mehr, sondern es werden spezifische Tags verwendet, z.B. <nav> für das Menue (die Navigation), der HTML5 <section> Tag ähnelt stark dem bis dahin verwendeten <div> Tag.


Mit Hilfe der folgenden Links kann man die Funktionsweise eines fertigen Templates nachvollziehen und ggf. auch ändern:

www alle HTML-, CSS-, ... Befehle über die selfhtml-Quickbar

www html.net CSS Tutorial

www ColorSchemeDesigner - passende Farben für die Website finden

www Übersicht HTML 5 Tags (nur zur Information, aber noch nicht unbedingt erforderlich)