Anleitung für den Web-Builder

Transkript

1 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

2 Wenn man den Web-Builder öffnet, erscheint er wie folgt: Seite 2

3 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

4 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

5 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

6 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

7 1.3 Maße/Farben/Hintergrund Auch hier werden grundlegende Dinge eingestellt. Der Titel der Seite erscheint in der Browsern immer ganz oben. Seite 7

8 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 Wenn man möchte, dass ein Rahmen um die Homepage eingeblendet werden soll, setzt man das Häkchen bei Seitenrand einblenden 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

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

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

11 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

12 2.0 Navigation 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

13 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

14 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: In Pixel wird hier die Breite der Spalte angegeben, wenn die Navigation untereinander (vertikal) dargestellt wird. Seite 14

15 2.0.3 Die Angabe der Höhe wird nur dann berücksichtigt, wenn man eine Navigation nebeneinander (horizontal) gewählt hat 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 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 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

16 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: 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

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

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

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

20 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

21 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

22 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 Die Breite der Spalte ist in Pixel einzustellen. Auch hier wieder der Tipp, die Spalte einzustellen und über der Vorschau das Ergebnis anzuschauen Die Hintergrundfarbe wird eingestellt wie auch die Seiten-Hintergrund-Farbe (siehe 1.3.6) Ein Hintergrundbild wird genauso eingestellt wie das Seiten-Hintergrund-Bild (siehe und 1.3.8) Seite 22

23 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 Seite 23

24 7.0 Tools Unter dem Hauptmenü Tool findet man vorgefertigte Dinge, die man durch wenige Klicks in die Homepage einfügen kann 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! 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

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

26 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