Anleitung BlueGriffon Website fertig verlinken Teil 3
Start - Die ersten Schritte - Website erstellen - Webspace + Domain - Weitere Schritte - Startseite erstellen
Start > Website erstellen > 2. WYSIWYG Editor > Anleitung BlueGriffon > 3. Website fertig stellen und verlinken

Anleitung BlueGriffon 3 – Website fertig stellen und verlinken

Die Website muss nun mit dem BlueGriffon WYSIWYG Editor verlinkt und fertig gestellt werden, nachdem das Grundgerüst mit den Div-Containern steht.

Logo einfügen

Uns fällt jetzt ein, dass wir ein Logo in unseren Header einfügen wollen.

  1. Das könnte man ganz einfach so machen, dass man auf Einfügen –> Bild geht und ein Logo-Bild das man vorher erstellt hat, einfügt. Dem Header muss man in den Einstellungen eine Höhe zuweisen, damit man das Bild sehen kann.
    Ein Div-Container ohne festgelegte Höhe ist eine Zeile hoch. Fügt man Leerzeilen ein, z.B. durch die Enter Taste, oder schreibt einen Text, passt sich der Div-Container daran an. An ein Bild passt sich ein Div-Container nicht an.
  2. Eine andere Möglichkeit wäre es, das ganze als Hintergrundbild für den Header einzufügen.  Dazu ruft man die Stil-Eigenschaften des Headers auf und wechselt in den Bereich Farben. Hier bei Bilder klickt man das + Zeichen an. Mit Hintergrundbild hinzufügen ein Bild einfügen. Mit den Optionen die Position usw. genau festlegen. Rechts gibt es weitere Optionen, die man nicht übersehen sollte, einfach den Scroll-Balken unten benutzen, oder alternativ die Box per Maus größer ziehen.
    Auch hier muss dem Header eine Höhe zugewiesen werden.
  3. Aber wir wollen nun das ganze in einen neuen Div-Container legen, in den wir unser Logo einfügen. Wir gehen zuerst in unseren Div des Headers. Hier fügen wir einen neuen Div-Container ein (Einfügen –> HTML 5 Element –> div). Damit wir ihn vom Header unterscheiden können, legen wir eine Hintergrundfarbe in den Stil-Eigenschaften fest. Wir werden nach einem Namen für unseren Div gefragt. Nennen das am besten Logo. darunter bei Geometrie setzen wir eine Breite, die mindestens so breit ist, wie das Logo, z.B. 200 Pixel, genauso machen wir das mit der Höhe, z.B. 100 Pixel. Nun machen wir das gleiche wie beim Menü, das Logo soll links stehen, der Header rechts vom Logo. Das machen wir bei Position und Layout eins unter den Geometrie Einstellungen. Bei Umfluss wählen wir wieder links. Jetzt sieht es aus, als ob jetzt alles kaputt ist (sofern man bisher alles genau nachgebastelt hat laut Anleitung). Das liegt daran, dass unser Logo eine Höhe zugewiesen bekommen hat, in unserem Fall 100 Pixel. Alle anderen Div-Container haben keine Höhe zugewiesen bekommen und haben die minimale Höhe von einer Zeile. Jetzt müssen wir dem Header eine Höhe zuweisen, mindestens die Höhe des Logos. Jetzt sieht das schon sehr gut aus. Nun fehlt noch unser Logo. Dazu gehen wir auf Einfügen –> Bild, bzw. klicken das Symbol bild-einfuegen-bluegriffin dafür in der Symbolleiste und wählen unser Bild aus. Geben einen alternativen Text für das Bild an und klicken OK. Fertig, das Logo ist eingefügt.

Menü erstellen und Seiten mit Hyperlinks verknüpfen

Gewöhnlich verknüpft man das Logo mit der Startseite, so dass wenn man auf das Logo klickt, auf die Startseite (Homepage bzw. Einstiegsseite) gelangt.
Das wird mit einem Hyperlink gemacht. Als erstes klickt man das Logo an und markiert es so. Dann geht man auf Einfügen –> Link, oder klickt das Symbol  dafür an. Im neuem Fenster klickt man auf das Ordnersymbol bei Ziel und wählt die Einstiegsseite der Website aus. In unserem Fall haben wir erst eine Seite, diese hier, die index.html.

Nun schreiben wir in die Menüs unsere Bezeichnungen für unsere Links auf die Seiten, die wir verknüpfen wollen.
Dabei wird uns auffallen, dass wir wieder ein Problem mit der Darstellung haben, wenn wir das Menü links füllen.  Das muss uns nicht stören, da sobald wir den Inhaltsbereich mit Text füllen das behoben wird. Wen das trotzdem stört, der drückt paar mal die Enter-Taste im Inhaltsbereich.

Speichern nun für jeden dieser Links eine Seite ab, Datei –> Speichern unter –> neuen Namen eingeben. Solange wiederholen, bis man für jeden Link eine Seite erstellt hat.

Alternativ ist es auch möglich im Ordner die index.html Datei zu kopieren und für jeden Link eine Kopie einzufügen. Die Namen der Kopien müssen dann nur noch mit der F2 Taste oder mit  Rechtsklick Maus –> umbenennen geändert werden.

Jetzt markieren wir einen Link, den wir verknüpfen wollen per Maus.
Bei Einfügen –> Link, oder anklicken des Hyperlink Symbol  können wir mit dem Ordnersymbol unsere gewünschte Seite auswählen. Das ganze machen wir mit allen anderen Links ebenfalls. Damit sind wir mit dem Verknüpfen fertig. Im Browser kann das ganze getestet werden. Wie man merkt, haben wir erst auf einer Seite unsere funktionierenden Links. Damit alles funktioniert, müsste man die Seite für alle anderen Links abspeichern. Aber das ist unnötige Arbeit, da wir vorher noch alles optimieren müssen.

Optische Verbesserungen

Nun sind wir fast am Ende angekommen. Es fehlt noch der Feinschliff im Aussehen der Website. Jetzt fügen wir noch die Dinge ein, die auf allen Seiten gleich sind. Normal alles bis auf den Inhaltsbereich.
Im Footer kann z.B. der Webseiten Name und Copyright eingesetzt werden, im Code ein Besucher Analyse Code wie z.B. Google Analytics, usw. Sofern man es noch nicht getan hat, können jetzt die Farben der Div so angepasst werden, wie sie am Ende sein sollen.
Am besten arbeitet man nur mit zwei verschiedenen Farben, sieht professioneller aus, als eine online Villa Kunterbunt.

Jetzt zum Text im Menü usw. Sicher ist schon jedem aufgefallen, dass der Text überall direkt am Rand Ansteht und so nicht schön aussieht. Um das zu ändern, müssen wir den Div-Boxen einen Innenabstand zuweisen. Das machen wir bei Geometrie –> Innenabstände. Es ist möglich jeder seite einen extra Abstand zuzuweisen, oder allen den gleichen. Ich benutze fast nur den gleichen Abstand für alle Seiten. Um allen Seiten den gleichen Abstand zu vergeben, muss zuerst “Vier gleiche Innenabstände” aktiviert werden. Dann gibt man in das Feld z.B. 10px ein. Schon hat man einen Schönen Abstand zu den Kanten der Boxen. Das ganze wiederholt man für alle andere Bereiche, die einem Optisch nicht so gut gefallen. Das wichtigste, den Inhaltsbereich nicht vergessen.
Da wir dort noch nichts drin haben, werden wir zum testen einen Blindtext einfügen. Mit einem Blindtext-Generator wie z.B. blindtextgenerator.de erstellen wir uns einen Blindtext und fügen den in unseren Inhaltsbereich ein.
Nun werden wir feststellen, dass im Inhaltsbereich etwas nicht passt. Trotz 10 Pixel Abstand auf jeder Seite, steht der Text direkt an das linke Menü an. Darunter ist der 10 Pixel Abstand zur Seite hin vorhanden. Um diesen Schönheitsfehler zu beheben, weisen wir dem Menü links einen Außenabstand rechts zu. Sollte “Vier gleiche Außenabstände” markiert sein, wählen wir das ab. Auf der rechten Seite geben wir nun unsere 10 Pixel ein, gegebenenfalls muss unten der Scroll-Balken betätigt werden, um das Feld zu sehen. Siehe da, es funktioniert.

Nun können wie die Seite für alle anderen übernehmen. Damit man später nicht bei jeder Seite Arbeit hat, den Blindtext zu löschen, löschen wir den jetzt.
Datei –> Speichern unter aufrufen und alle Dateien im Website Ordner überschreiben.

Jetzt muss nur noch der Inhalt für jede Seite erstellt werden und fertig ist die Website.