Anleitung KompoZer 3 – Website fertig stellen und verlinken
Nachdem das Grundgerüst steht, fehlen nur noch die kleinen optischen Verbesserungen, ein Logo, die ganzen Links im Menü und die Webseiten die verknüpft werden sollen.
Optische Verbesserungen beim Text
Die Texte die wir bisher geschrieben haben (Bezeichnungen der Div-Container) stehen überall direkt am Rand, egal auf welcher Seite. Das sieht überhaupt nicht gut aus. Daher werden wir jetzt überall einen Innenrand hinzufügen. Dazu drücken wir F11 und wählen unseren Div-Container aus. Bei Box gehen wir zu Innenabstand und geben z.B. 10px für jede gewünschte Seite ein. Das machen wir mit allen Boxen. Wenn das soweit fertig ist, fällt einem auf, dass rechts vom Menü 2 der Inhalt keinen Abstand hat, aber unter der Box zur Seite seine 10 Pixel hat. In dem Fall müssen wir dem Menü 2 zusätzlich einen Außenabstand rechts hinzufügen. Nun passt das auch.
Logo hinzufügen
Für das Logo brauchen wir als erstes ein Logo, das wir einfügen können. Ist das erstellt, wird das in unseren Website Ordner kopiert, am besten in einen Ordner mit dem Namen Bilder für die bessere Übersicht. Jetzt können wir entweder unter Einfügen –> Grafik unser Bild direkt in den Header einfügen, oder das mittels CSS machen. Wo wir doch bisher immer so schön zwischen HTML und Grafik getrennt haben, werden wir jetzt nicht mit dem pfuschen anfangen.
- Bild als Hintergrund im CSS festlegen. F11, #header, Hintergrund mit dem Ordnersymbol ein Bild auswählen und Anzeigeposition auswählen.
- Einen DIV-Container dafür erstellen, um
später mit dem Stylesheet die Position auf
allen Seiten verändern zu können. Dazu
erstellen wir als erstes einen weiteren
DIV-Container. Dieser muss wieder vor dem
Objekt kommen, das ihn umfließen (float) soll.
Also erstellen wir in der ersten Linie unseren neue Box. Sofern der Header nur aus einer Linie besteht, muss erst Enter gedrückt werden. Format –> Absatz –> generic container (div), erstellen in CSS die Regeln (F11) dafür, (float left) mit Box –> Puffer –> links + Breite für Logo Box. Wählen bei Hintergrund unser Bild aus und legen die Position fest, wo es angezeigt werden soll. Nun weisen wir dem Div-Container die ID fürs Logo zu (war das mit Rechtsklick unten bei <div>). Fertig, gegebenenfalls muss die Höhe des Headers angepasst werden.
Menü erstellen, Verlinkung der Seiten mit Hyperlinks
Nun tragen wir in die Menüs die Namen der Links
ein, die wir verwenden wollen. Für jeden Link
speichern wir nun eine eigene Seite ab. Nun
markieren wir einen Namen, den wir verlinken und
rufen über das Symbol Link 
oder
Einfügen –> Link das Auswahlmenü auf. Hier können
wir mit dem Ordner am Ende der Linie unser Link
Ziel aussuchen. Sollte es sich bei dem Link um
eine externe Seite handeln, kann man sie auch im
neuem Fenster öffnen lassen, indem man darunter
bei Ziel “Link wird geöffnet” markiert und “in
einem neuen Fenster” auswählt. Sobald alle
Hyperlinks fertig erstellt wurden, speichern wir
das ganze für jede Seite neu ab, so dass alle
Seiten ihre Links haben.
Fertig, jetzt kann der Inhalt für die Seiten erstellt werden
Vorlagen erstellen
KompoZer bietet die Option an, eigene Vorlagen
zu erstellen. Leider ist diese Option so verbugt,
dass man die nicht sinnvoll nutzen kann.
So eignet sich Kompozer nur für kleinere Seiten.
Wer später z.B. einen zusätzlichen Menü Link
einfügen will, muss statt nur die Vorlage ändern
das auf jeder einzelnen Seite von Hand ändern