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