Einsatz von Bootstrap und Gimp bei der Erstellung einer Homepage
Bootstrap und das auch in Windows zu verwendende Bildbearbeitungsprogramm Gimp sind gute Hilfsmittel, um eine Homepage zu erstellen. Es handelt sich aber um mehr oder weniger komplexe Systeme, mit denen mensch sich erst vertraut machen sollte.
Was ist Bootstrap?
In der deutschen Wikipedia heißt es zu Bootstrap (dieser Link führt zu Wikipedia): "Bootstrap ist eine freie Sammlung von Hilfsmitteln für die Gestaltung von Websites und Webanwendungen. Es enthält auf HTML und CSS basierende Gestaltungsvorlagen für Typografie, Formulare, Buttons, Tabellen, Grid-System, Navigations- und andere Oberflächengestaltungselemente sowie zusätzliche, optionale JavaScript-Erweiterungen."
Gleich auf der Startseite von Bootstrap (bei Twitter) wird ein Download angeboten. Darauf sollte aber nicht geklickt werden, weil es dann nur eine Mini-Ausgabe gibt. Am Anfang dachte ich, das reicht und habe mit der Miniversion versucht, eines der Beispiele umzusetzen. Es hat zwar funktioniert, aber besser ist es, das komplette Paket herunterzuladen, da in dem Paket die Grundmodelle (Beispiele) gleich dabei sind.
Einige Tipps
Bei der Erstellung meines Modells haben mir vor allem die Erklärungen auf dieser Seite geholfen. Dann fand ich noch ein paar Tipps unter Grundlagen für das CSS. Erst dann habe ich bei Bootstrap selber umgeschaut (sollte eigentlich ganz am Anfang gemacht werden.
Wichtig ist die Erkenntnis, dass mit 12 Spalten (sie nennen das Grid) gearbeitet wird. Diese Spalten kann ich beliebig aufteilen. Ich könnte also drei Spalten auf meiner Seite haben, die ich gleichmäßig mit 4 Grid-4 Grid-4 Grid oder aber verschieden als 6 Grid-3 Grid-3 Grid aufteilen könnte. Bitte die Schrägstriche "/" ignorieren und wo sie doppelt sind, einen entfernen:
Text
<//div>
Text
<//div>
Text
<//div>
Abkürzungen kann man z.B. in einem Tooltip anzeigen lassen, wenn man schreibt:
CSS
Das ist allerdings etwas umständlich. In MediaWiki gibt es dafür die Extension:Lingo (bei mir nicht installiert) und damit definiert die Abkürzungen, die öfter verwendet werden, so dass sie dann auf allen Seiten (einmal oder immer) als Tooltip hervor gehoben werden.
Die Sache mit Tabellen ist ebenfalls interessant. Das beginnt wie üblich:
So bekommt die Tabelle einen Rahmen:
Damit die Zeile, auf der die Maus ist, hervorgehoben wird, kommt
hinein, usw.
Es gibt ein paar Klassen, um bestimmte Arten von Text hervorzuheben (Warnungen, Irrtümer etc.). Mit
wird z.B. ein informativer Teil eines Textes hervorgehoben (erhält einen hellblauen Hintergrund).
Ein Modell anpassen
Jetzt wird es etwas schwieriger, da das System von Bootstrap die CSS Dateien mit einem Programm, das LESS genannt wird, erstellt. Installation und Ausführung erfolgt in einem Terminal. Da ich die Sache aber nicht so oft verwenden werden, habe ich darauf verzichtet, LESS zu installieren und zu lernen.
Die einfachere Variante ist, auf einer Seite, die Customizing heißt, die notwendigen Teile sowie (eigentlich das Wichtige) die Formatierungen (Farben, Schriften und dergleichen) nach eigenem Belieben verändern und sich dann das Alternativmodell herunterladen kann. Mir ist das mit der Hintergrundfarbe für die Navigationsleiste nicht gelungen, weil ich nicht wusste, dass die LESS-Definion wie "@grayDark" auch in normaler CSS Sprache geändert werden kann (für marineblau z.B. "#000080").
So konnte ich bestimmte Wünsche für die Schriftart ändern. Ich habe dazu bei @sansFontFamily und @serifFontFamily jeweils "arial, sans-serif;" eingegeben. Dann wurde mir eine "abgespeckte" Version von Bootstrap geliefert, aber immerhin war die Datei "bootstrap.css" darunter. Die habe ich an die Stelle der alten "bootstrap.css" gesetzt und nun war bei mir nicht mehr Times New Romans (wohl der Standard im Browser) sondern "Arial" zu sehen.
Da habe ich mich ziemlich schwer getan. Ich fand ein paar Anleitungen, als ich nach "bootstrap change background navbar" googelte. Ich konnte sie aber nicht umsetzen. Dabei habe ich versucht, angepasste Versionen zu installieren (war bei der Schrift erfolgreich, siehe oben) und auch fertige "stylesheets" nach dem Muster
</style type="text/css"> ... <//style>
(nach anderen Definitionen von "style" auf den jeweiligen Seiten aufzurufen. Erst auf dieser Seite bin ich fündig geworden. Damit konnte ich dann den Hintergrund der Navigationsleiste, der vor allem aus Farbverläufen (gradients) besteht, ändern.
Die Positionierung nach unten anstatt nach oben war einfach. Ich hatte einfach
durch zu ersetzen.
Gimp benutzen
Gimp ist ein sehr kompliziertes Programm, von dem ich nicht einmal 5% der Möglichkeiten kenne. Es ist z.B. beim Erstellen von Logos und Bannern sehr hilfreich. Ich gehe auf "Datei-Erstellen-Logo" und wähle ein von 20 Varianten aus. Dann gebe ich meinen Schriftzug ein, habe noch ein paar Varianten zur Verfügung und kann mit einem Klick ein Logo erstellen, wobei ich die schlechten Ergebnisse einfach ignoriere (nicht speichere) und gleich die nächste Form ausprobieren kann.
Logos mit zwei Zeilen
Als es aber darum ging, einen Text in zwei Zeilen zu einem Logo zu machen, wurde die Sache komplizierter. Das geht dann über "Datei-Neu". Hier wähle ich die Größe und wähle unter "Farben - Farbe zu Transparenz". Da mein Bild ja weiß ich, wähle ich: alles, was weiß ist wird transparent. Jetzt kann der Text eingegeben werden. Danach sollten die Ebenen vereint werden ("Ebene-Ebenen nach unten vereinen"). Jetzt unter "Ebene-Ebene auf Bildgröße" aktivieren. Nun noch "Filter-Alpha als Logo" anklicken und dann kann ich zwei Zeilen so "animieren" wie eine Zeile. Es muss in *.png abgespeichert werden. Dabei wird "exportiert" und "Ebenen vereinen" muss angeklickt sein. Es können die Standardwerte gewählt werden, obwohl bei meinem ersten Versuch der Hintergrund weiß und nicht transparent war.
Tipp: Es gibt ein eigenes Fenster für den Dialog "Ebene". Es ist nicht immer geöffnet ist, kann aber unter Fenster aktiviert werden.
Transparenter Hintergrund
Dies wird in einem knapp 2-minütigen Film bei Youtube beschrieben.
- mit Zauberstab die weiße Fläche wählen
- dann auf "Farben-Farben zu Transparenz" gehen und die Farbe wählen, die transparent sein soll: hier "weiß"
- das Bild sollte dann als *.png abgespeichert werden, wobei die Standard-Einstellungen im Dialog "Export" beibehalten werden können.
Bewegte Bilder
Man kann auch bewegte Bilder (mehrere Ebenen zu einem Bild im Format *.gig) mit Gimp erstellen, aber das war mir erst einmal zu kompliziert. Dafür gibt es auch eine einfachere Lösung. Ich habe ein neues Bild (200x150 Pixel) gewählt. Dann habe ich als Schriftzug ein kurzes Wort wie "Aktuell" hinzugefügt (blau, 38 Pixel). Jetzt gehe ich auf "Filter-Animation". Meine Wahl war "Globus" und 12 Einzelbilder. Ich wähle das Format *.gif und "Animation erstellen". Für die Einzelbilder wähle ich 200 Millisekunden.
Erneut "Ebene-Ebenen nach unten vereinen" und "Ebene-Ebene auf Bildgröße" aktivieren. Dann unter "Filter" zur "Animation" gehen und eine Option wählen. Jetzt nicht "sichtbaren Ebenen vereinen" sondern "als Animation speichern" wählen. Im nächsten Fenster wird ein sehr rasantes Tempo angegeben. Ich habe die 100 Millisekunden gleich auf 500 erhöht und erhielt eine Animation (10 Bilder), die dann doch etwas langsam liefen. Zudem hatte ich das Format falsch gewählt (je nach Schrift breiteres Bild) und die Zeichen liefen in die falsche Richtung.