dg6bi - Projekte

Dreispalten Layout

Erstellung einer Dreispaltenvorlage

So, oder ähnlich sieht heute sehr oft das Layout einer Webseite aus. Titel, Navigation, News und Inhalt sind übersichtlich getrennt. Das folgende Beispiel zeigt, wie ein solches Layout schnell erstellt wird. Man erhält eine große Flexibilität, wenn man die Bereiche Das Layout Titel, Menü, News und Inhalt trennt.

Die Trennung dieser Bereiche bedeutet für die spätere Arbeit an der Webseite, dass man sich nicht mehr um das Layout, das Menü, den Titel usw, sondern sich möglichst nur nor um den Inhalt kümmern muss. Das Layout, also die Aufteilung der Seite ist im Wesentlichen in der CSS-Datei definiert, genau so wie die Darstellung des Menüs und andere Eigenschaften der Seite. Titel, Menü und News werden getrennt bearbeitet und in einem gesonderten Schritt in die Datei mit dem Inhalt eingebunden.

Die folgenden Schritte machen einen einen Vorschlag einer Ordnerstruktur und zeigen, wie der Kompozer und Phase5 konfiguriert werden, um auf dieser Struktur zu arbeiten. Außerdem wird ein Grundgerüst für das oben stehende Dreispaltenlayout erstellt.

Schritt 1:

Ordnerstruktur anlegen:

Für eine Website sollte man sich eine bestimmte Ordnerstruktur zurechtlegen. Diese kann so aussehen:

Unter dem Ordner html liegen alle html-Seiten. Im Ordner css liegen die css-Dateien, in grafik die verwendeten Bilder und in include werden wir dir include-Dateien anlegen. Bei größeren Websites kann man die Struktur natürlich entsprechend anpassen.

Schritt 2:

Projektordner in Phase5 und Kompozer festlegen:

Damit der Kompozer und Phase5 richtig arbeiten, müssen beide Programme den Projektordner kennen. Phase5 möchte sogar ganz genau wissen, wo sich die einzelnen Komponenten der Seite befinden. Die Seitenverwaltung kann im Komozer mit der Taste F9 geöffnet und auch wieder geschlossen werden. Danach wird das Menü "Seiten bearbeiten" geöffnet.

Wurzelverzeichnis der Seite im Kompozer angeben:

Jetzt öffnet sich ein neues Fenster. Hier können für unsere Ordnerstruktur folgende Einträge gemacht werden:

Seiteneinstellungen im Kompozer

Ordnerstruktur im Kompozer:

Nach Bestätigen mit OK ist in der Seitenauswahl die Ordnerstruktur erkennbar:

Einstellung in Phase5:

In Phase5 gelangt man über "Projekte->Einstellungen" in einen Dialog, in dem alle Projekt-relevanten Einträge gemacht werden können. Auch wählen wir den den Wurzelpfad unserer Webseiten. Darüber hinaus müssen alle Ordner einzeln angegeben werden. In der Ansicht "Lokale Verzeichnisse" machen wir also folgende Einträge:

Ordnerstruktur in Phase5:

Noch sind keine Dateien in unserem Projekt enthalten. Somit sieht die Ordnerstruktur in Phase5 so aus:

Beide Editoren, Kompozer und Phase5 können mit mehreren Projekten quasi gleichzeitig arbeiten. Es muss nur darauf geachtet werden, dass das richtige Projekt gewählt wird, sonst wird möglicherweise alles etwas durcheinander gebracht.

Nachdem nun alle Vorbereitungen getroffen sind, kann mit der Erstellung der ersten Seite begonnen werden. Dies kan dann später die "Musterseite" werden, um weitere Seiten ins Projekt einzufügen.

Schritt 3:

Neue Musterseite beginnen:

Nachdem wir unsere Ordnerstruktur angelegt haben, können wir mit der ersten Seite unseres Projektes beginnen. Legen wir also mit dem Kompozer (Phase5 geht natürlich auch) eine neue Seite an. Diese speichern wir zunächst unter dem Namen "_leere_Seite.htm". Damit haben wir auch gleich eine Musterseite, um unsere Website zu erweitern.

Schritt 4:

Einteilung der Seite mit dem <div>-Tag:

Als nächstes teilen wir diese Seite mit Hilfe des div-Tags in vier Teile. Dies können wir bequem in der Quelltextansicht machen. In diesem Beispiel sehen wir einen Screenshot von Phase5.

Wir sehen jetzt schon die vier verschiedenen Bereiche. Zu beachten ist, dass diese bereits Identifier (title, menue, usw.) bekommen haben. Allerdings sind die Spalten noch nicht so angeordnet, wie gewünscht. Dies geschieht durch ein getrenntes CSS-Script, welches als nächstes erstellt wird.

Schritt 5:

Erzeugen einer css-Datei:

Als nächstes erzeugen wir z.B. mit dem Notepad++ oder Phase5 eine Datei mit folgendem Inhalt und speichern diese im Ordner "css" unter dem Namen "meine-homepage.css".

Schritt 6:

Einbinden der css-Datei in unsere Musterseite:

Diese css-Datei muss von unserer Musterseite eingelesen werden. Hierzu wird die markierte Zeile eingefügt. Danach sieht unsere Seite im Quelltext so aus::

Schritt 7:

Bearbeiten der CSS-Datei im Komposer:

Wird jetzt die "_leere_Seite.htm" im Komposer geöffnet kann durch Klicken auf das Symbol CSS, oder durch die Taste F11 der CSS-Editor geöffnet werden. Dies sieht dann so aus:

Jetzt kann für jeden Bereich bequem über den Editor eine Formattierung eingegeben werden. Zunächst sollen die Bereiche nach der Vorlage von oben gefärbt werden, damit man sehen kann, wie die Formatierungen wirken. Danach werden Default-Breiten und ggf. Höhen gesetzt, damit die Bereiche auch eine Ausdehnung haben. Im CSS-Editor sieht das ganze für die "title-Region" so aus:

Ansicht der title-Formatierung im Komposer:

Diese Werte können direkt, wie hier zu sehen, oder über Menüs eingetragen werden. Die folgenden Screenshots zeigen für den "title-Bereich" noch einmal alle Einträge in der Menüansicht. Für die anderen Bereiche sind die Einträge entsprechend gemacht worden.

Ansicht des title-Hintergrund-Menüs im Komposer:

Ansicht des title-Hintergrund-Menüs im Komposer:

Die CSS-Datei als Textdatei:

Mit dieses Einträgen kann also folgendes Layout eingestellt werden:

Layoutansicht im Kompozer:

Basierend auf diesem Layout kann jeder schnell eine Website mit entsprechender Einteilung erstellen. Über den CSS-Editor kann der Inhalt in den verschiedenen Bereichen bearbeitet und den eigenen Wünschen entsprechend angepasst werden. Zur Klärung tiefer gehender Fragen empfehle ich die weiter oben genannten Seiten Html-Seminar und SelfHtml. Nachdem die Layoutfrage geklärt ist, kommen wir zur Organisation mehrer Webseiten mit Include-Dateien...

Aufteilung der Webseite:

Es ist wie in der Programmierung. Definitionen, die immer wieder benötigt werden, schreibt man nicht jedes Mal neu, sondern formuliert diese einmal und bindet sie dann immer wieder an den Stellen ein, wo sie benötigt werden. Betrachten wir unsere Webseite, dann könnte man vielleicht davon ausgehen, dass der Titel- sowie der Menü- und der Fußleistenbereich immer die gleichen Inhalte hat. Der Inhaltsbereich und der News-Bereich hingegen ändern sich von Webseite zu Webseite.

Also gliedern wir den Titel- den Menü- und den Fußleistenbereich in jeweils eine eigene Datei aus, um diese bei Bedarf getrennt zu bearbeiten. Mit Phase5 können wir dann später jederzeit die aktualisierten Titel- Menü- und Fußleistenbereiche in die Webseite einfügen. Zunächst werfen noch einmal einen Blick auf den Quelltext unserer "leeren Seite":

Quelltext der leeren Seite:

Jetzt entfernen wir die Zeile:

<div style="text-align: center;" id="title"><br>Titel</div>

aus der Datei "_leereSeite.htm" und fügen diese in eine neue Datei ein. Diese nennen wir "title.inc" und speichern sie im Ordner "include" ab. Dies sieht in Phase5 dann so aus:

Quelltext der Title-Include-Datei:

Include-Datei einbinden:

Es geht zurück auf unsere "_leere_Seite.htm", mit dem Cursor genau an die Stelle, an der wir gerade den Title-Bereich entfernt haben. Jetzt können wir, wenn alle Pfade vorher richtig gesetzt wurden, über den Menübefehl Einfügen->Include-Datei den Inhalt der Datei "title.inc" genau an der Stelle einfügen, an der sich dieser zuvor befand. Die Webseite sieht im Quelltext dann so aus:

Include-Datei "title.inc" eingebunden:

Man sieht jetzt die gleiche Seite, allerdings mit dem Vermerk von Phase5, dass der "Title-Bereich" per Include-Datei eingebunden wurde. Dieses wiederholen wir sinngemäß für den Menü- und den Fußleistenbereich. Sind wir fertig, sieht unsere Webseite im Quelltext so aus:

Unsere Seite im Quelltext mit allen konstanten Bereichen per Include -Datei eingebunden:

An den Kommentar-Tags erkennt Phase5 später, dass hier eventuell geänderte Include-Dateien neu eingebunden werden müssen. Um das zu testen, ändern wir einmal den Inhalt des Title-Bereiches:

Titel-Bereich in Phase5 bearbeiten:

Alle Include-Dateien aktualisieren:

Wählen wir jetzt in Phase5 den folgenden Menübefehl...

wird die geänderte Datei "title.inc" neu eingebunden. Damit sieht der neue Quelltext der kompletten Seite dann so aus:

Aktualisierte Webseite:

Es ist zu erkennen, dass Phase5 die veränderte Include-Datei "title.inc" neu eingebunden hat. Dies kann man sinngemäß für alle anderen Include-Bereiche durchführen. Nach einer Projekt-Aktualisierung erhält man einen kompletten Satz aller Webseiten des Projektes, die dann einfach auf einen Webserver ohne weitere Extras wie PHP, oder andere Mechanismen hoch geladen werden können.

Erstellung neuer Seiten:

Durch Kopieren der Datei "_leere_Seite.htm" nach z.B. "index.htm", "thema1.htm" und "thema2.htm" erhalten wir drei Musterseiten, die nur noch mit Inhalt gefüllt werden müssen. Außerdem muss ein einzigen Mal die Include-Datei "menue.inc" bearbeitet werden. Sie wird später in der veränderten Form wieder in alle Seiten eingebunden. Nachdem diese Arbeiten getan sind, sind unsere Muster-Site so aus:

Ansicht der Muster-Site:

Im Quelltext kann man die Struktur gut erkennen.

Die Muster-Site im Quelltext:

Die Seiten zum "Thema 1" und "Thema 2" sehen entsprechend aus. Dieses Muster kann sich jeder seinen Wünschen entsprechend anpassen und erweitern. Der komplette Seitensatz der Muster-Site kann hier heruntergeladen werden.