Anleitung KompoZer WYSIWYG Editor
Start - Die ersten Schritte - Website erstellen - Webspace + Domain - Weitere Schritte - Startseite erstellen
Start > Website erstellen > 2. WYSIWYG Editor > Anleitung Kompozer

Anleitung KompoZer 1 – Website Layout erstellen

KompoZer bietet die Möglichkeit Webseiten mit CSS und Div-Containern zu erstellen. Diese Möglichkeit sollte man auf jeden Fall nutzen. Die andere Möglichkeit wäre mit Tabellen zu arbeiten.
Tabellen sind aber nicht gerne gesehen, da sie einige Nachteile gegenüber Div-Containern haben.
Vorteil Div-Container mit CSS statt Tabellen Layout

Als erstes braucht man den kostenlosen KompoZer, den man z.B. auf der Herstellerseite auf deutsch herunterladen kann kompozer.net in der Version: 0.8b3. Beim ersten Start sollte man schauen, ob unter Extras –> Einstellungen –> CSS-Style statt HTML-Elementen und Attributen verwenden eingestellt ist.

Das Grundgerüst, Layout einer Webseite erstellen

Webseiten bestehen meist aus diesen Bereichen: Header (Kopfzeile), Menü (Navigation), Content (Inhalt) und Footer (Fußleiste). Auf die Idee mit dem Logo kommen wir dann erst später und fügen es nachträglich ein.

typisches-website-design

Dabei kann die Navigation als horizontales, sowie vertikales Menü gestaltet werden. Wir werden beides auf unsere eigene Website einbauen.

Div-Container erstellen für die Bereiche der Website

Als erstes Starten wir KompoZer mit einem leerem HTML Dokument und speichern es unter index (Regeln für Dateinamen) in einen eigenen Ordner (warum?) ab. Das erste was wir tun, ist die Bereiche mit Div-Containern zu erstellen.
Dazu gehen wir auf Format –> Absatz –> generic container (div). Wir sehen einen rot gepunkteten Rahmen. Schon haben wir unseren ersten Div-Container. Da schreiben wir die Bezeichnung rein, um was es sich handelt, in dem Fall Rahmen oder Umrandung. Jetzt müssen wir dem Div-Container einen Namen geben, um ihn im CSS (Stylesheet) ansprechen zu können.
Das geht per Taste F11, im Menü unter Extras –> CSS-Editor oder durch anklicken des Bildes . Nun sollten wir bei “Neue Style-Regel” sein. Ist dies nicht der Fall, oben links  öffnen und “Regel” auswählen. Wir wählen den Punkt “individuelle Style-Regel” aus. Nun erscheint ein # im Eingabe Feld und geben dem Container einen Namen. Am besten nutzt man etwas was einem sagt um was es sich handelt. Hier soll es der Rahmen für die Webseite werden. Also nennen wir es Rahmen, im englischen wird dafür meist wrapper verwendet.
Nicht OK drücken, sondern auf den Button “style-Regel erstellen”. Wir wollen jetzt nur die Hintergrundfarbe zur besseren Unterscheidung der Boxen festlegen. Klicken dazu auf den Reiter Hintergrund und bei Farbe suchen wir mit dem Symbol am Ende eine Farbe aus -> OK. Das war es schon, aber zu sehen ist noch nichts.
Jetzt müssen wir noch die erstellte CSS Regel dem Div-Container zuweisen. dafür geht man mit der rechten Maustaste auf <div> ganz unten links . Bei ID kann nun unser Name, den wir festgelegt haben, vergeben werden. In unserem Fall kann “Rahmen” ausgesucht werden, den wir auch nehmen. Siehe da, unser Container ist nun farbig.

Es fehlen nun die ganzen anderen Div-Container für den Header, Menüleiste, Menü links, Content, Footer. Die können wir genauso erstellen wie die erste Box für den Rahmen. Dazu müssen wir mit Enter in eine übernächste Zeile innerhalb der Box gehen. Jetzt könnten wir wie oben unsere Div-Container einzeln nacheinander erstellen, mit einer Zeile Abstand zum vorherigen Div-Container. Aber wir nutzen jetzt eine andere Möglichkeit. Die zweite Möglichkeit ist das kopieren des ersten Div-Containers. Dazu klickt man einfach im Div-Container mit der rechten Maus und klicken kopieren. Nun kann man mit einfügen weitere Boxen einfügen, wir brauchen zusammen fünf weitere Container, also fügen wir das ganze fünf mal ein, lassen aber immer eine Zeile Platz, damit die Boxen nicht ineinander verschachtelt werden. Denn der oberste Container gibt den anderen Containern die innerhalb liegen die Formatierung vor. Das Menü 2 soll nachher links nur eine bestimmte Breite belegen und der Inhalt rechts davon stehen. Dies geht nicht, wenn wir die Menü Formatierung auch auf die unteren Boxen Content und Footer übertragen würden. Wir hätten zwei weitere Menüs unterm 2 Menü.

Dann schreiben wir in die Div-Container den Verwendungszweck, erstellen die ganzen Namen für die Div-Container (was das mit der F11 Taste und Regel auswählen links oben) + eigene Farbe und weisen dann mit Rechtsklick dem entsprechenden Container zu.

Wichtig ist, dass das Menü links vor dem Inhalt kommt und auch vorher wieder geschlossen wird. Es muss später mit der CSS Eigenschaft float umflossen werden (durch den geschrieben Inhalt rechts).

Das ganze schaut jetzt noch nicht vielversprechend aus, aber das ändert sich gleich.

Weiter geht es mit: Kompozer Anleitung 2 - Website mit fester Breite und flexibler Breite erstellen