Anleitung BlueGriffon 1 – Website Layout erstellen
BlueGriffon ist ein kostenloser WYSIWYG Editor, der auf den zukünftigen Webstandart HTML5 setzt. BlueGriffon gilt als inoffizieller Nachfolger von KompoZer. Auch BlueGriffon bietet die Möglichkeit an, Webseiten mit Div-Containern und CSS zu erstellen. Vorteil Div-Container mit CSS statt Tabellen Layout.
Fast hätte ich BlueGriffon sofort wieder gelöscht, als ich
schon bei der zweiten Aktion ein Addon kaufen sollte. Div-Container
erstellt und CSS klicken wollen. Dachte schon ohne CSS kannst
das ganze Programm vergessen. Aber zum Glück kann man das
ganze bei Stil-Eigenschaften einstellen. Zur eigenen
Verwunderung sehr viel bequemer als gedacht. Erwartet hatte
ich ja, dass das ganze so kompliziert zu erstellen ist, dass
man genervt das CSS Stylesheet Editor Addon kauft oder zu
einem anderen Anbieter wechselt.
Download von BlueGriffon auf der Herstellerseite möglich: Download
BlueGriffon.
Achtung: Bei der Installation darauf achten,
die ganzen Optionen für Startseitenänderung, Suchmaschinen
Änderung und Toolbar Installation abzuwählen.
Bringt
nur unnötigen Ärger, das wieder loszuwerden.
Das Grundgerüst, Layout einer Webseite erstellen
Webseiten bestehen meist aus den Bereichen Header (Kopfzeile), Menü (Navigation), Content (Inhalt) und Footer (Fußleiste).
Für die Navigation gibt es zwei Möglichkeiten, das sind das horizontale, sowie vertikales Menü.
Erstellen der Div-Container für die verschiedenen Bereiche der Website
Nach dem ersten Start von BlueGriffon wird man an Gimp
erinnert, da eine frei verschiebbare Box mit Namen
Stil-Eigenschaften (CSS Einstellungen) zu sehen ist.
Als erstes erstellen wir unsere Div-Container für unsere
Bereiche der Webseite.
Unter Einfügen –> HTML 5 Element wählen wir div aus. In der
Stil-Eigenschaften Box gehen wir zu Farben und klicken
Hintergrund an. Es öffnet sich nun ein Fenster zum auswählen
der Hintergrundfarbe. Ist die erfolgt, müssen wir unserem
DIV-Container noch einen eindeutigen ID Namen geben, um den
DIV-Container mit CSS zu verbinden. Wir wählen dafür den Namen
Rahmen aus. Der Rahmen ist dazu da, der Website später eine
Breite zu geben.
Anders als bei Amaya und KompoZer müssen wir bei BlueGriffon
nicht darauf achten, dass unterhalb des zu erstellenden Div’s
eine freie Zeile ist. BlueGriffon erstellt selbständig mit
einem neuen Div auch eine Leerzeile danach.
Daher können wir immer gleich in der nächsten Linie einen
weiteren Div-Container einfügen.
Auf die gleiche Art wie eben (Einfügen –> HTML 5 Element –>
div und Stil-Eigenschaften Box –> Farben –> Hintergrund die
Farbe + Namen für den Div-Container), erstellen wir nun
nacheinander Div’s für den Header, Menü, Menü links, Inhalt
(Content) und Footer. Dabei darauf achten, dass beim Div-Container
Namen keine Sonderzeichen, ä. ö, ü und Lerrzeichen genutzt
werden, um ohne Ärger voran zu kommen. Beschriften brauchen
wir die Felder nicht, da wir unten ganz einfach anhand der Div
ID Namen sehen können, um was für ein Feld es sich handelt.
Wer will kann die Felder trotzdem beschriften. Die Linie unten
mit dem Rahmen können wir gleich wieder löschen, indem wir in
diese Linie per Tastatur Pfeiltasten gehen, oder klicken.
Löschtaste und der Rahmen Div-Container ist nicht mehr zu
sehen.
Die Breite der Website festlegen, flexible und feste Breite