Anleitung für den Web-Builder

Anleitung für den Web-Builder
Der Web-Builder ist erstellt worden, um auf einfacher Weise eine Homepage erstellen zu können, ohne Programmierkenntnisse
in HMTL haben zu müssen.
Seite 1
Wenn man den Web-Builder öffnet, erscheint er wie folgt:
Seite 2
Der Web-Builder ist in verschiedene Haupt- und Untermenüs aufgebaut. In der oberen Zeile befindet sich das Hauptmenü.
Sowie man auf einen Eintrag im Hautmenü klickt, wird entsprechend das Untermenü verändert.
1.0 „Meine Seite“
Die Auswahl „Meine Seite“ wird, wenn man den Web-Builder startet, als erstes angezeigt. Mit „Meiner Seite“ ist die ganze
Homepage gemeint und in ihr werden allgemeine Einstellungen vorgenommen, die auch sehr selten verändert werden. Ist im
Hauptmenü „Meine Seite“ ausgewählt, erscheint folgendes Untermenü:
1.1 „Allgemein“
Im Untermenü „Allgemein“ wird der Aufbau (Darstellung) der Homepage festgelegt. Möchte man die Navigation (Die Links, mit
denen man später die Unterseiten der Homepage aufruft. Beispielsweise „Kontakt“ oder „Wir über uns“ etc.) an der linken Seite
der Homepage untereinander anzeigen lassen, oder doch lieber oben nebeneinander. Möchte man eine Kopf- oder Fusszeile
(Werden auf jeder Seite, auch auf den Unterseiten, angezeigt) anzeigen, oder nicht? Diese Gedanken sollte man sich vorher
machen, bevor man weiter seine Homepage erstellt bzw. mit Daten füllt.
Seite 3
Beispiele:
Im ersten Beispiel ist für die Homepage folgende Grundeinstellung gewählt (erkennt man an dem hell hinterlegten Grau):
Die Homepage hat eine Kopfzeile, in dem man ein Hintergrundbild (könnte eine Firmenlogo sein) einstellt oder/und eine
Überschrift. Die Navigation (Links zu weiteren Unterseiten) ist links in einer Spalte untereinander angeordnet. Auch in dieser
Spalte kann man mit Hintergrundbilder und Hintergrundfarben arbeiten. In der Mitte befindet sich dann der eigentliche Inhalt
der Start- und auch weiterer Unterseiten. Zusätzlich bei dieser Auswahl gibt es eine rechte Spalte. Sie dient eher für die Optik
(siehe späteres Beispiel). Und zuletzt befindet sich bei dieser Auswahl eine Fußzeile. In der Fußzeile kann man zusätzliche
Navigationspunkte (wird gerne benötigt, um beispielsweise de AGB oder Impressum etc. unterzubringen). Auch in der Fußzeile
kann man mit Hintergrundbilder und –farbe arbeiten.
Im zweiten Beispiel wird lediglich eine Navigation ausgewählt, die sich oben nebeneinander darstellt und der eigentliche
Seiteninhalt unterhalb der Navigation. Würde ausreichen, um einen einfachen Blog einzustellen.
Seite 4
Hinweis:
Je nach dem, welche Grundeinstellung man auswählt, ändert sich das Hauptmenü. Wählt man beispielsweise die
Grundeinstellung vom zweiten Beispiel, werden im Hauptmenü die Punkte „Kopfzeile“, „rechte Spalte“ und „Fußzeile“ nicht
angezeigt, da in diesen Bereichen nichts einzustellen ist.
Seite 5
1.2 „Ausrichtung“
Im Untermenü „Ausrichtung“ wird lediglich festgelegt, ob die Homepage links, zentriert oder rechtsbündig auf den
Bildschirmen angezeigt werden soll. In diesem Beispiel wird die Homepage zentriert angezeigt. Auch hier erkennt man die
Auswahl an dem hellen grauen Hintergrund.
Seite 6
1.3 „Maße/Farben/Hintergrund“
1.3.1 Auch hier werden grundlegende Dinge eingestellt. Der Titel der Seite erscheint in der Browsern immer ganz oben.
Seite 7
1.3.2 Das Feld Suchbegriffe erklärt sich eigentlich von selber. Wenn man möchte, dass die Homepage künftig von den
Suchmaschinen (Google) erkannt und gefunden wird, stellt man hier die Begriffe ein. Die Begriffe werden mit einem Komma
getrennt eingegeben. Man sollte genau überlegen, welche Begriffe man eingibt. Bei welchen Begriffen, die der Internetsurfer
eingibt, soll die Homepage bei Google in der gefundenen Liste angezeigt werden?
Ein Schreiner würde wohl die Begriffe Fenster, Türen, Holz, Fenstereinbau, Türeneinbau………usw. eingeben.
1.3.3 Wenn man möchte, dass ein Rahmen um die Homepage eingeblendet werden soll, setzt man das Häkchen bei
„Seitenrand einblenden“.
1.3.4 Die Breite und Höhe der gesamten Homepage kann man mit
den Werten „Pixel“ einstellen. Nun werden einige fragen: „Wie breit
ist denn ein Pixel“? Antwort: Das kann man so nicht bestimmt sagen.
Das hängt wiederum davon ab, in welcher Auflösung der
Internetsurfer seinen Bildschirm eingestellt hat.
Die eigene Einstellung Deines Bildschirm kannst Du nachschauen,
wenn Du auf dem Desktop (Startbildschirm in Windows) auf einer
freien Stelle (nicht auf ein Symbol) dir rechst Maustaste klickst und
anschließend die „Eigenschaften“ aufrufst.
Das rechst abgebildete Dialogfenster erscheint. Oben klickt man auf
das Register „Einstellungen“ und schon sieht man seine
Bildschirmauflösung. Desto höher die Auflösung eingestellt wurde,
umso mehr sieht man auf seinem Bildschirm. Jedoch alle etwas
kleiner dargestellt.
Das bedeutet für unsere „Pixel-Einstellung“, dass der Internetsurfer
mit einer höheren Einstellung unserer Seite kleiner dargestellt
bekommt als der jenige, der eine niedrigere Bildschirmauflösung
eingestellt hat.
Wenn der Wert der Breite um die 970 Pixel eingestellt ist, ist die Einstellung auch ok. Möchte man die Seite breiter einstellen,
dann gibt man beispielsweise 1080 Pixel ein.
Hinweis: Alle Veränderungen die man macht, kann man direkt über die Vorschau (oben rechts), aufrufen!
Seite 8
1.3.5 Die Schriftart und –größe, die man hier einstellt, bezieht sich auf die gesamte Seite. Hier einfach ausprobieren, indem
man die verschiedenen Schriftarten und –größen auswählt und sich die Veränderung über die Vorschau anschaut. Gleichzeitig
kann man zu der Schriftart und –größe auch die Farbe der Schrift auswählen.
1.3.6 Klickt man auf die Schaltfläche „Farbe wählen“, öffnet sich ein Fenster mit einer Farbauswahl. Hier klickt man die
gewünscht Farbe an.
Gleiches gilt auch für die Auswahl der Farben für den Seiten-Inhalt und dem Seiten-Hintergrund. Der Seiten-Inhalt ist die
Fläche, auf der später der Inhalte (Texte, Bilder) der Start- und Unterseiten angezeigt wird. Die Seiten-Hintergrund-Farbe ist
die Farbe, die hinter der eigentlichen Homepage angezeigt wird. Da in unserem Beispiel die Homepage zentriert dargestellt
wird, ist der Seitenhintergrund der Bereich links, rechts und unterhalb der Homepage.
Hinweis:
Die User, die sich mit den Farbwerten auskennen, können diese auch direkt in die Felder eingeben (mit Raute).
Seite 9
1.3.7 Ganz unten findet man die Möglichkeit, ein Seiten-Hintergrund-Bild einzufügen. Wenn man auf die Schaltfläche
„Durchsuchen“ klickt, werden die Laufwerke des eigenen Computers angezeigt. Hier wählt man das Bild aus, welches im
Hintergrund der Seite eingestellt werden soll.
1.3.8 Reduziert man die Bildqualität (Angabe in Prozent), so verliert das Bild zwar etwas an Qualität, wird aber schneller auf
der Homepage geladen, da es nicht soviel Speicherplatz wegnimmt. Auch dies kann man ausprobieren, indem man das Bild
hoch lädt und sich die Vorschau (obern rechts) anschaut.
Nachdem man ein Bild für den Hintergrund hochgeladen hat, wird dies an Stelle des Formulars angezeigt:
Das Hintergrundbild wird dargestellt und in Klammer die Größenangabe in Pixel. Mit dem kleinen Mülleimer an der rechten Seite
des Bildes, kann der Hintergrund wieder entfernt werden.
Seite 10
1.4 „Meine Daten“
Hier trägt man seine Daten ein, die später in der Unterseite Kontakt und/oder Impressum automatisch eingefügt werden. Auch
für das Copyright wird der Name hier genommen.
Das Hauptmenü „Meine Seite“ wird also für die grundsätzlichen Einstellungen der Homepage genutzt und wird daher für die
tägliche Arbeit mit der Homepage weniger gebraucht.
Seite 11
2.0 Navigation
2.0.1 Wenn man im Hauptmenü den Eintrag „Navigation“ anklickt, erscheinen die Formulare, um die Navigationspunkte (Links
zu den Unterseiten) und den Navigationsbereich selber, gestalten zu können.
Standardmäßig ist der Eintrag „Home“ schon eingetragen. Der Menüpunkt „Home“ ist dazu da, um immer wieder zurück auf die
Startseite der Homepage zu gelangen.
Jeder Navigationspunkt kann umbenannt werden, indem man auf das „Bearbeitungssymbol“ klickt:
Seite 12
Hiernach erscheint ein Formular, indem man den Begriff umbenennen kann:
In dem Feld „externer Link“ würde man eintragen, wenn eine ganz andere Internetseite aufgerufen werden soll. Beispielsweise
möchte man auf die Seite des Bekannten verlinken. Wenn man im dem Kästchen „neues Fenster“ ein Häkchen macht, bedeutet
das, das ein neues Browserfenster geöffnet wird, wenn auf der Homepage dieser Menüpunkt angeklickt wird. Verlinkt man auf
eine andere Internetseite, dann ist es sinnvoll dieses Häkchen zu setzen, damit die eigene Homepage im Hintergrund stehen
bleibt. Verlinkt man aber auf eine eigene Unterseite auf seiner Homepage, sollte man dieses Häkchen NICHT setzen, denn sonst
hat der Besucher der Homepage später mehrere Browserfenster von der Homepage geöffnet.
Dies bezieht sich auch auf das Formular, indem man einen ganz neuen Menüpunkt anlegt:
Gibt man nun einen neuen Menüpunkt ein und klickt auf die Schaltfläche „Speichern“, erschein dieser Menüpunkt anschließend
in der Auflistung:
Seite 13
Mit den roten Pfeilen, die nach oben und unten zeigen, kann man die Reihenfolge der Menüeintrage in der Navigation
verändern.
Auf dem Mülleimersymbol, löscht man an Menüpunkt wieder weg.
Hinweis:
Hinter jedem Menüpunkte steht letztendlich eine Unterseite. Das bedeutet:
Wenn man ein Menüpunkt löscht, wird gleichzeitig der gesamte Inhalt dieser Unterseite auch gelöscht!!!!!
Folgende Einstellungen beziehen sich nur auf den Bereich, in dem sich die Navigation befindet:
2.0.2 In Pixel wird hier die Breite der Spalte angegeben, wenn
die Navigation untereinander (vertikal) dargestellt wird.
Seite 14
2.0.3 Die Angabe der Höhe wird nur dann berücksichtigt,
wenn man eine Navigation nebeneinander (horizontal) gewählt
hat.
2.0.4 Im Feld „Abstand“ trägt man den Abstand in Pixel ein, der oberhalb und unterhalb der Navigation dargestellt werden soll.
Das bedeutet, dass der erste Eintrag (Home) nicht direkt oben an der Kopfzeile steht, sondern mit ein paar Pixel darunter
gestellt wird.
2.0.5 Die Hintergrund-Farbe des Navigationsbereiches (in unserem Beispiel die linke Spalte) ist genauso einzustellen wir die
Seiten-Hintergrund-Farbe (siehe 1.3.6). Die weiteren Einstellungen sprechen für sich, wobei die Schriftart, -Farbe und Schriftstil
der Navigationseinträge gesondert eingestellt werden kann.
2.0.6 Auch kann hier in der Spalte der Navigation wie auch beim Seitenhintergrund ein Bild als Hintergrund eingestellt werden.
(siehe 1.3.7)
Hinweis:
Ist in den Grundeinstellungen eine Navigation nebeneinander (horizontal) ausgewählt, erscheinen automatisch Vorlagen zur
Auswahl, in der man Schaltflächen an Stelle von Texteinträgen als Navigationspunkte auswählen kann:
Seite 15
3.0 Die Kopfzeile
Ist in der Grundeinstellung ein Seitenaufbau mit Kopfzeile ausgewählt worden, erschein im Hauptmenü auch der Eintrag
„Kopfzeile“. Klickt man auf diesen, erscheint folgendes:
3.0.1 An erster Stelle, kann man die Höhe der Kopfzeile
einstellen. Diese richtet sich ein bisschen danach, ob man ein
Hintergrundbild (könnte ein Logo sein) in die Kopfzeile einfügt
oder nicht. Denn wenn die Höhe des Logos beispielsweise 120
Pixel hoch ist, wird die Kopfzeile es dann auch sein. Setzt man
kein Logo rein und begnügt sich mit einer Überschrift, muss
die Kopfzeile nicht so hoch sein. Aber das ist
Geschmackssache.
Ich denke, alle anderen Einstellungen sprechen für sich. Ausprobieren und auf Vorschau (oben rechst) klicken!
Seite 16
4.0 Inhalte
Kommen wir nun wohl zu dem wichtigsten Teil: Das einstellen und pflegen der „Inhalte“!!
Klickt man auf den Eintrag „Inhalte“ im Hauptmenü, erscheint eine Seite mit einem Untermenü. In diesem Untermenü werden
nun alle Menüpunkte (Unterseiten) die unter „Navigation“ angelegt wurden, angezeigt.
Wichtig:
Man fügt in die Unterseite Inhalte ein, die im Untermenü ausgewählt ist. In der Abbildung ist Home ausgewählt und somit
würden alle Inhalte, die nun eingefügt werden, auf der Home-Seite eingefügt.
4.0.1 Man sieht zwei Formulare. In dem oberen Formular wird reiner Text eingefügt. Unterhalb der Text-Box befinden sich vier
Symbole für die Ausrichtung. Als Standard ist linksbündig ausgewählt. Man kann jedoch den eingefügten Text zentriert,
rechtsbündig oder in Blocksatz darstellen. Diese Einstellung bezieht sich nur auf diesen Absatz bzw. Text, der hier eingefügt
wird.
Tipp:
Man sollte den nicht den ganzen Text der Unterseite zusammen einstellen, da man sonst keine Möglichkeiten hat, ein Bild
dazwischen einzufügen oder etwas zu verschieben. Man sollte nur einzelne Absätze einfügen und danach den nächsten usw.
Seite 17
Ist der erste Absatz eingegeben, kann auch später den Absatz umformatieren, sprich anders ausrichten:
Natürlich ist der Text auch zu verändern, indem man auf das Bearbeitungssymbol klickt. Mit Klick auf das Müllereimersymbol
wird der ganze text gelöscht.
4.0.2 Das zweite Formular dient zu einstellen von Bildern in die Unterseite:
Mit einem klick auf die Schaltfläche „Durchsuchen“ werden die Laufwerke des eigenen Computers eingezeigt. Hier wählt man
nun das hochzuladene Bild aus. Man kann zu dem Bild eine Beschreibung hinzufügen, die später auf der Homepage in einem
Infofeld angezeigt wird, wenn man mit der Maus auf das Bild zeigt.
Reduziert man die Bildqualität (Angabe in Prozent), so verliert das Bild zwar etwas an Qualität, wird aber schneller auf der
Homepage geladen, da es nicht soviel Speicherplatz wegnimmt. Auch dies kann man ausprobieren, indem man das Bild hoch
lädt und sich die Vorschau (obern rechts) anschaut.
Seite 18
Bei den Bildern gibt es ebenfalls Ausrichtungsmöglichkeiten. Das erste Symbol soll das Bild mit text, der sich rechst vom Bild
befindet, darstellen. Das bedeutet, wenn man das erste Symbol anwählt (Standardmäßig), wird das Bild auf der Homepage links
dargestellt. Eventueller nachfolgenden Text, steht direkt rechts neben dem Bild.
Das zweite Symbol dient dazu, um ein Bild in die Seite einzufügen, aber zu unterbinden, das links oder rechts nachfolgender
Text erscheint. Eventuell nachfolgender Text wird auf der Homepage darunter erscheinen.
Das dritte Symbol ist das Gegenteil vom ersten Symbol. Das Bild wird auf die rechte Seite gestellt und eventuell nachfolgender
Text erschein links vom Bild.
4.0.3 Sind nun mehrere Einträge gemacht, erscheinen diese unterhalb der beiden eben erklärten Formulare unten aufgelistet.
Nach dem zweiten Eintrag erscheinen rote Pfeile, die nach unten und oben zeigen. Sie dienen dazu, um die Reihenfolge der
Einträge zu verändern. Zu den beschriebenen Ausrichtungsmöglichkeiten sind zu den Bildern noch weitere Symbole
hinzugekommen. Hier kann man die Breite der Bilder verändern. Die maximale Breite des Bilder ist standardmäßig ausgewählt.
Seite 19
Hinweis:
Ist das originale Bild beispielsweise nur 340 Pixel breit, werden die Symbole 400px und 350px nicht angezeigt.
In der Vorschau sieht die Seite nun so aus
(ist für die Darstellung verkleinert worden):
Nachdem ich das Bild nun auf 300px umgestellt habe
(einfacher Klick auch das Symbol „300px“, sieht die
Seite nun so aus:
Die Höhe der Bilder wird automatisch
proportional verändert.
Seite 20
Klickt man bei den Bildeinträgen auf das „Bearbeitungssymbol“ bezieht sich das auf die Beschreibung des Bildes:
Möchte man nun Inhalte für eine andere Unterseite erfassen, klickt man im Untermenü auf die entsprechende Seite:
Seite 21
5.0 rechte Spalte
Wenn man in den Grundeinstellungen (siehe 1.1) einen Seitenaufbau mit rechter Spalte ausgewählt hat, ist im Hauptmenü die
Option sichtbar und anwählbar.
Die rechte Spalte dient im Prinzip nur zur Gestaltung (Optik) der Homepage. Daten, wie Links können (noch) nicht eingestellt
werden.
5.0.1 Die Breite der Spalte ist in Pixel einzustellen.
Auch hier wieder der Tipp, die Spalte einzustellen und über
der Vorschau das Ergebnis anzuschauen.
5.0.2 Die Hintergrundfarbe wird eingestellt wie auch die Seiten-Hintergrund-Farbe (siehe 1.3.6)
5.0.3 Ein Hintergrundbild wird genauso eingestellt wie das Seiten-Hintergrund-Bild (siehe 1.3.7 und 1.3.8)
Seite 22
6.0. Die Fußzeile
Wenn man in den Grundeinstellungen (siehe 1.1) einen Seitenaufbau mit Fußzeile ausgewählt hat, ist im Hauptmenü die
Option sichtbar und anwählbar.
Die Einstellungen der Höhe (in Pixel), die Farben und der Schrift sind vergleichbar mit den Einstellungen in der Kopfzeile (siehe
3.0)
Eine Besonderheit hat die Fußzeile gegenüber der Kopfzeile. Man kann Navigationen (Unterseiten) in die Fußzeile einfügen.
Gerne werden die AGB oder auch das Impressum in die Fußzeile gestellt. Die Navigationen, die durch ein Häkchen in das
entsprechende Kästchen in die Fußzeile eingefügt werden, werden aus der „Hauptnavigation“ entfernt. Das bedeutet, dass die
Links nur einmal auf der Homepage erscheinen.
In der Fußzeile kann auch ein Hintergrundbild eingefügt werden. Anleitung dazu siehe 1.3.7
Seite 23
7.0 Tools
Unter dem Hauptmenü Tool findet man vorgefertigte Dinge, die man durch wenige Klicks in die Homepage einfügen kann.
7.0.1 Kontakt / Impressum
Wie im Text unter Kontakt/Impressum bereits beschrieben ist, wird durch eine Klick auf die Schaltfläche „Kontakt/Impressum
erstellen“ die Unterseite automatisch angelegt und in die Navigation (siehe 2.0) eingefügt. Es werden die hinterlegten Daten
aus „Meine Daten“ (siehe 1.4.) eingefügt. Weiterhin wird automatisch ein Text eingefügt, der den Copyright, Die Haftung und
den Hinweis zu allen Links regelt.
Hinweis:
Die Unterseite „Kontakt/Impressum“ kann unter Inhalte (siehe 4.0) genauso verändert und/oder ergänzt werden wie jede
andere Seite auch!
7.0.2 Gästebuch
Das Gästebuch ist auch fertig programmiert und wird durch den Klick auf die Schaltfläche „Gästebuch einstellen“ ganz einfach
auf die Homepage eingefügt. Ist das Gästebuch eingefügt, erscheint an der gleichen Stelle die Schaltflächen „Gästebuch
ausblenden“ und „Gästebuch löschen“.
Mit „Gästebuch ausblenden“ wird das Gästebuch zwar nicht mehr auf der Homepage angezeigt, aber alle Gästebucheinträge
bleiben erhalten, im Gegensatz zu „Gästebuch löschen“, wo alle Einträge endgültig gelöscht werden.
Seite 24
7.0.3 Besucherzähler
Der Besucherzähler kann zurzeit nur ein- bzw. ausgeblendet werden. Der Besucherzähler wird links in der Fußzeile angezeigt
und kann (noch) nicht weiter bearbeitet werden.
7.0.4 Laufband
Das Laufband ist ein Text, der auf der Homepage von einer Seite zur anderen Seite läuft und den Besucher auf etwas
aufmerksam machen soll.
Eine direkte Vorschau des Laufbandes wird direkt oberhalb angezeigt. Standardmäßig ist der Text „Willkommen auf meiner
Seite“ eingetragen, den man einfach überschreibt. Die anderen Optionen sollte man einfach ausprobieren und sich anschauen.
Wenn man das Laufband eingestellt hat, muss man nur noch angeben, auf welcher Seite das Laufband eingefügt werden soll.
Unterhalb der Einstellungen werden alle angelegten Unterseiten angezeigt.
Anschließen klickt man auf „speichern“ und schon sollte das Laufband in der Seite erscheinen.
Seite 25
Wechselt man nun in die Inhalte, wird das Laufband als einen weiteren Eintrag angezeigt.
Natürlich kann man nun auch hier über die Pfeile „nach oben“ und „nach unten“ das Laufband an die Stelle auf der Unterseite
bringen, wo man es haben möchte.
Seite 26