Templates anpassen und erweitern

Bootstrap Themes und Templates

Es gibt viele Seiten im Web, die Themes oder auch Templates für Bootstrap gratis oder auch kostenpflichtig anbieten. Mit sogenannten Themes lässt sich das Aussehen einer Website verändern, ohne dass man den HTML-Code verändern muss. Templates hingegen sind Vorlagen, also "Schablonen" für eine Website, welche sowohl HTML-, als auch CSS- FIles beinhalten und häufig als zip-Archiv zum Download bereit gestellt werden. Texte und BIlder lassen sich einfach ersetzen. So kommt man in relativ kurzer Zeit zu einem professionell wirkenden Webauftritt.

Auf folgenden Webseiten, die nur als Beispiele zu verstehen sind, werden Sie fündig:

Bootswatch | Official Themes | Start Bootstrap | Shapebootstrap | Wrapbootstrap | Bootstrap Templates

1. Template anzeigen

Suchen Sie auf einer der oben aufgeführten Seiten ein Bootstrap-Template, welches Ihnen gefällt und kopieren Sie dieses auf Ihren Rechner.

  1. Laden Sie die Zip-Datei herunter.
  2. Erstellen Sie an geeigneter Stelle einen Ordner WebDesign.
  3. Kopieren Sie den Inhalt der Zip-Datei in den soeben erstellten Ordner.
  4. Öffnen Sie die Datei index.html mit einem Doppelklick im Standard-Browser.
  5. Verschieben Sie das Browser-Fenster, so dass es etwa die Hälfte des Bildschirms belegt.

2. Text-Inhalt ändern

Nun versuchen wir den Inhalt der Webseite anzupassen. Dabei müssen wir aufpassen, dass wir nicht die Struktur des HTML-Codes beschädigen!

  1. Machen Sie einen Rechtsklick auf die Datei index.html und wählen Sie öffnen mit Notepad++.
  2. Verschieben Sie das Notepad++-Fenster so, dass es die zweite Hälfte des Bildschirms belegt.
  3. Suchen Sie zwischen den HTML-Tags (alles mit den <>-Klammern) nach Textstellen, welche sie in der Browser-Ansicht sehen.
  4. Ändern Sie eine Textstelle.
  5. Speichern Sie das Dokument (Ctrl+S).
  6. Wechseln Sie zum Browser.
  7. Aktualisieren Sie die Seite (Ctrl+R oder F5).
  8. Wiederholen Sie den Vorgang ab Schritt 4.

3. Bilder ändern

Um die Bilder anzupassen sind zwei Vorgehensweisen möglich. Vorgehensweise 1 klappt nur, wenn das neue Bild das selbe Dateiformat wie das zu ersetzende Bild hat (also z.B. beides jpg-Dateien sind):

  1. Suchen Sie das zu ändernde Bild (es befindet sich im Unterordner images).
  2. Bereiten Sie ein anderes Bild im selben Format vor.
  3. Überschreiben Sie das zu ersetzende Bild mit dem neuen, indem Sie der neuen Bild-Datei denselben Namen geben und Sie damit das Original-Bild im Ordner images überschreiben.

Möchten Sie eine jpg-Datei mit einer png-Datei (anderes Bildformat) ersetzen, dann müssen Sie wie folgt vorgehen:

  1. Kopieren Sie das neue Bild in den Ordner images.
  2. Suchen Sie im HTML-Quelltext nach dem alten Bildnamen. Sie sollten in einem img-Tag fündig werden (sieht etwa so aus: <img src="images/alter-dateiname.jpg">).
  3. Ersetzen Sie den Dateinamen des alten Bildes im Code mit demjenigen des Neuen, inkl. Dateiendung.
  4. Entfernen Sie die alte Bilddatei aus Ordner images.

4. weitere Anpassungen

Mit etwas HTML-und CSS-Kenntnissen kann die Webseite natürlich weiter angepasst werden. Denkbar wären z.B. weitere Bilder oder zusätzliche Personen. Es empfiehlt sich von der html-Datei eine Kopie zu erstellen. Wenn man zu viel ändert und die Webseite unbrauchbar wird, kann man so zu einer früheren Version zurückkehren.