Um aus einer Homepage Vorlage/Template eine Website zu erstellen, braucht man erstmal eine Vorlage. Dazu habe ich eine Linkliste mit Templates zum kostenlosen Download zusammen gestellt: Kostenlose CSS, HTML Templates, Homepage Vorlagen Anbieter. Wer das ganze kostenlos nutzen will und keine dreistellige Summe zahlen will, sollte im eben genannten Link das ganze genau durchlesen.
In dieser Anleitung nutze ich ein CSS Template von openwebdesign.org.
Ich klicke auf Browse oder die Anzahl der Templates und gelange
zur Übersicht aller Homepage Vorlagen. Hier kann man sich eine
Vorlage aussuchen.
Ich benutze in dieser Anleitung das Sky Blue Template mit der ID
6107. Am leichtesten findet man das Template, wenn man auf Search
geht und nach der Template ID (6107) sucht oder alternativ über
das Keyword: Sky Blue.
Das gewünschte Template laden wir mit Download herunter und entpacken das ganze.
Nun bearbeiten wir das Template mit BlueGriffon. Dazu starten wir zuerst BlueGriffon. Mit Datei –> Öffnen suchen wir uns mit Datei auswählen die index Datei in unserem eben ausgepackten Template im Ordner Sky_Blue heraus. Nun öffnet sich unser Template + die Stil-Eigenschaften. Die Stil-Eigenschaften sind unsere CSS Regeln, die in unserem Ordner als style.css Datei gespeichert sind.
Änderungen am Template vornehmen
Laut Lizenz dürfen wir das Template auch verändern. Einzige Bedingung ist, dass man in der Fußzeile den Link des Erstellers nicht löscht.
- Als erstes benennen wir die Bezeichnungen der Links um und ersetzen die durch unsere eigenen Link-Namen. Im linken Menü ersetzen wir zusätzlich noch die Überschrift der Links.
- Die restlichen Links, die zu viel sind, löschen wir.
- Das Suchfeld oben und den Teil mit About Us können wir ebenfalls löschen. Einfach alles markieren und Entf-Taste drücken.
- In der obersten Linie ersetzen wir Sky Blue mit unserem Website Namen. Statt design by… kann ein eigener Slogan angeben werden, oder komplett gelöscht werden.
- In der Fußzeile passen wir das Copyright an. Da wir schon 2014 haben, schreiben wir 2014 rein. Wer das Design für eine alte Seite nutzt, der kann auch z.B. 2005 – 2014 schreiben. Statt Sitename.com nehmen wir unsere eigene Website-Adresse.
- Im Inhaltsbereich ist aktuell das Template wie ein Blog aufgebaut. Wollen wir später das so nicht nutzen, sondern nur eine Überschrift, evtl. Datum und Inhalt, so löschen wir alles, was später nicht benötigt wird.
- Das speichern nicht vergessen.
Seiten erstellen und miteinander verlinken
Als nächstes erstellen wir für jeden Link den wir nutzen eine
eigene Seite. Dafür gehen wir auf Datei –> Speichern unter und
geben unseren neuen Seitennamen mit .html am Ende an. Beispiel
impressum.html. Das ganze machen wir so oft, bis wir für jeden
unserer Links eine eigene Seite haben.
Sobald wir unsere einzelnen Webseiten haben, können wir diese
verknüpfen.
Nun markieren wir mit der Maustaste den Text eines Links. Mit Einfügen –> Link, oder klicken auf das Hyperlink Symbol können wir nun unseren Link einfügen. Bei Ziel suchen wir mit dem Ordnersymbol am Ende der Linie unsere Seite aus, die verlinkt werden soll, öffnen und OK drücken. Fertig ist der erste Link. Das ganze kann auch im Browser getestet werden. Für die anderen Links wiederholen wir das ganze.
Sind alle Links verknüpft, speichern wir wieder das ganze für alle Seiten ab.
Seitenmarkierung für aktuelle Seite erstellen
In unserem Template haben wir eine Anzeige, welche Seite gerade
besucht wird. Das sehen wir beim ersten Link (Home Bezeichnung im
original Template). Statt der weißen Schriftfarbe ist die Farbe
schwarz und der Hintergrund hat ein helleres Blau.
Wir wollen dass auf unseren Seiten die gerade besuchte Seite
anzeigt wird. Dafür müssen wir die Regel die dafür erstellt und
zugewiesen wurde dem anderen Link zuweisen.
Als erstes löschen wir diese Regel für den ersten Link. Das zu
klicken wir in das Linkfeld und können dann unten das zugewiesene
Element sehen — > <li.current_page_item>.
Mit der rechten Maustaste klicken wir nun auf dieses Element .
Nun löschen wir diese dem Feld zugewiesene Klasse. Dazu klicken
wir in das Feld für die Klasse oben und
löschen den Text heraus und drücken Enter. Nun ist (keine Klasse)
zu lesen, der Link ist wie alle anderen weiß und hat keine andere
Hintergrundfarbe.
Nun muss die Klasse (Regel) current_page_item dem
anderen Listenpunkt zugewiesen werden. Bearbeiten wir gerade die
Impressum Seite, so klicken wir ins Feld mit dem Impressum Link.
Nun können wir unten unseren Listenpunkt (li)
sehen.
Den markieren wir durch anklicken mit der Maus. Nun kann man
sehen, dass der ganze Listenpunkt markiert ist, samt dem Impressum
Namen.
Nun weisen wir die Klasse mit den CSS Regeln dem Listenpunkt zu.
Hierfür wählen wir die Klasse aus. Oben kann die gewünschte Klasse
ausgewählt werden .
Wir nehmen current_page_item. Wie man sehen kann, tritt der
gewünschte Effekt ein und wir sind fertig für diese Webseite.
Speichern nicht vergessen. Bei den anderen Seiten wird das genauso
geändert.
Einzelne Seiten Inhalte erstellen
Inzwischen haben wir unser Design fertig gestellt. Nun fehlt
nur noch der Inhalt für die einzelnen Webseiten.
Den Inhalt erstellt man ganz einfach wie in einem
Textverarbeitungsprogramm.
Sobald für jede Seite der Inhalt erstellt ist, ist unsere Website fertig.