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.
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