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

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.

  1. Bild als Hintergrund im CSS festlegen. F11, #header, Hintergrund mit dem Ordnersymbol ein Bild auswählen und Anzeigeposition auswählen.
  2. 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