Template, HP Vorlage mit KompoZer WYSIWYG Editor bearbeiten
Start - Die ersten Schritte - Website erstellen - Webspace + Domain - Weitere Schritte - Startseite erstellen
Start > Website erstellen > 3. Homepage Vorlage > Mit Kompozer bearbeiten

Template mit KompoZer WYSIWYG Editor bearbeiten

Das erste was man braucht, ist eine kostenlose Homepage Vorlage/Template. Eine Linkliste mit mehr als 40 Seiten, die kostenlose Templates anbieten, findet man hier: Kostenlose CSS, HTML Templates, Homepage Vorlagen Anbieter. Wichtig ist, dass man das, was zu beachten ist, auch genau durchliest. Wer keine bösen finanziellen Folgen spüren will, der liest auf der eben genannten Seite alles genau durch.

Download des Template

Zuerst braucht man eine HTML Homepage Vorlage/Template zum bearbeiten.
Ich zeige das ganze am Beispiel eines HTML Templates von kostenlose-templates.eu. (Die Seite ist inzwischen, bzw. aktuell nicht mehr zu erreichen). Ich lade das Template 1 auf der fünften Seite herunter.

Die Nutzungsbedingungen müssen bestätigt werden. Darin steht z.B., dass man diese Vorlage privat, sowie gewerblich nutzen darf. Anpassungen Layout sind erlaubt. Copyright-Hinweise und Links dürfen nicht entfernt werden. Rechte von Bildern und Grafiken liegen beim Autor, d.h. das kann für einen teuer werden, wenn man die Bilder nutzt. Dafür kann und wird man gewöhnlich auch abgemahnt. Weiter unten weist kostenlose-templates.eu jede Haftung für Schäden ab. Damit meinen sie auch bzw. besonders die finanziellen durch eine Abmahnung für Bilder.

Nach dem Download des Templates muss die (Zip in unserem Fall) Datei entpackt werden. Sollte kein Programm dafür installiert sein, kann man z.B. WinRAR oder 7-Zip kostenlos im Internet herunter laden.

Nach dem Entpacken haben wir einen Ordner mit allen Dateien des Templates. Dieser Ordner bündelt unsere ganze Homepage. Hier werden alle Seiten und Bilder (normal im eigenen Ordner wegen der Übersichtlichkeit) gespeichert. Dieser Ordner wird später ins Internet geladen. Sollte jemand z.B. ein Bild verknüpft haben, das nicht in diesem Ordner liegt, sondern auf einem anderen Platz der Festplatte, ist das Bild später im Internet nicht zu sehen.

Mit KompoZer öffnen wir nun die Index Datei des Templates.

Wer keinen kostenlosen WYSIWYG Editor hat, findet hier eine Liste mit kostenlosen WYSIWYG Editoren zum Download. In dieser Anleitung nutze ich den kostenlosen KompoZer, der kann auf kompozer.net herunter geladen werden kann.

Template bearbeiten – Bilder austauschen

Da wir nicht für jedes Bild oder Grafik mehr als 1 000 € im Falle einer Abmahnung zahlen wollen, tauschen wir alle Bilder und Grafiken aus. In unserem Fall sind das 7 Stück. 1 mal Header und 6 Buttons, die getauscht werden müssen. Wie die Menüpunkte heißen, sowie die Anzahl der Menüpunkte wissen wir schon, wenn wir so gearbeitet haben, wie unter 2. Website planen beschrieben wurde.

Zum bearbeiten der Bilder öffnen wir die vorhandenen Grafiken nach und nach, löschen den Bildinhalt bzw. übermalen das ganze und speichern das neue Bild unter dem bisherigen Namen. Das Bearbeiten von Bildern ist mit einem kostenlosen Bildbearbeitungsprogramm möglich.

Vorteil: So ist es nicht nötig auch nur das geringste am Template zu ändern, wie z.B. die Links der Bilder im Template. Auch passen die Bilder von der Größe her ganz genau, da die Höhe und Breite vom Originalbild vorhanden ist.

Menüpunkte im Template hinzufügen

Sollten wir nun feststellen, dass wir mehr Menüpunkte brauchen, als Bilder da sind, müssen wir weitere Bilder erstellen und im Template einfügen.
Dazu kopieren wir eines der Bilder und fügen je nach benötigter Anzahl der zusätzlichen Bilder Kopien im gleichen Ordner ein. Dann geben wir den Bildern einen Namen. Nun können wir wie vorher die Bilder mit einem Bildbearbeitungsprogramm bearbeiten.

Wenn das erledigt ist, müssen nur noch die Bilder in die Homepage Vorlage eingefügt werden. Im Moment haben wir sechs Bilder für das Menü, wollen aber acht Menüpunkte haben.
In meinem Beispiel will ich vor dem Impressum die beiden Menüpunkte einfügen. Wir klicken dazu in Kompozer auf das Feld oder das Bild Impressum. Damit sind wir nun in der Zelle der Tabelle. Rechtsklick mit der Maus –> Tabelle einfügen –> Reihe über auswählen. Jetzt haben wir ein freies Feld über dem Impressum. Möglich wär es auch gewesen, ein Feld darüber anzuklicken und darunter zu wählen, damit über dem Impressum ein Feld frei wird. Auf die gleiche Art fügen wir noch die zweite Zelle ein. Nun haben wir zwei freie Felder untereinander.
Die Bilder müssen nun in die Felder eingefügt werden. Dazu geht man in eines der Felder und wählt im Menü Einfügen –> Grafik, oder klicken das Symbol kompozer-grafik-einfuegen dafür an. Nun muss man bei Grafik-Adresse den Link des Bildes angeben. Wir klicken dazu auf das Ordnersymbol am Ende der Linie und wählen unseren Ordner mit der Homepage Vorlage aus.
Nun wählen wir das gewünschte Bild aus und geben einen Alternativtext an. Das kann ein Wort, oder auch mehrere Wörter sein, sollte den Bildinhalt alternativ wiedergeben, die ihn nicht sehen können. Es gibt welche, die schalten beim surfen im Browser die Anzeige von Bildern ab und erlauben nur bei Bedarf die Darstellung –> Vorteil schnellerer Seiten Aufbau bei geringer Übertragungsgeschwindigkeit z.B. wenn man mobil online ist. Auch Blinde sind online unterwegs und sind auf diese Alternativtexte angewiesen. Auch Google und sonstige Suchmaschinen können keine Bilder erkennen. Um für die Bildersuche Suchergebnisse liefern zu können, ist Google auf den Alternativtext angewiesen.
Nun können wir das ganze bestätigen. Bild da, aber das ganze hängt noch zu sehr am anderen Bild. Mit der Enter-Taste ist das behoben. Wer schon aus dem Feld heraus gegangen ist, muss zuerst wieder ins Feld ans Ende des Bildes gehen. Im anderen freien Feld wiederholen wir das ganze und fügen auch hier ein Bild ein. Fertig, das Menü steht.

Weiter mit Teil 2: Webseiten erstellen und im Template verknüpfen