Start - Die ersten Schritte - Website erstellen - Webspace + Domain - Weitere Schritte - Startseite erstellen
Start > Website erstellen > 3. Homepage Vorlage > Mit BlueGriffon bearbeiten

Mit BlueGriffon eine Website aus einem CSS Template erstellen

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.

  1. 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.
  2. Die restlichen Links, die zu viel sind, löschen wir.
  3. Das Suchfeld oben und den Teil mit About Us können wir ebenfalls löschen. Einfach alles markieren und Entf-Taste drücken.
  4. 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.
  5. 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.
  6. 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.
  7. 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 Hyperlink Bluegriffin 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.