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