Anleitung BlueGriffon WYSIWYG Editor
Start - Die ersten Schritte - Website erstellen - Webspace + Domain - Weitere Schritte - Startseite erstellen
Start > Website erstellen > 2. WYSIWYG Editor > Anleitung BlueGriffon

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).

typisches-website-design

 

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