WYSIWYG WEB BUILDER 9 « Deutsche Hilfe zum Programm »
© 2013 - 2014 ZULETZT AKTUALISIERT AM: 19.04.2014 11:25
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Inhaltsverzeichnis 1
Vorwort ................................................................................................................... 6
2
Einleitung ................................................................................................................ 7
3
Einstellungen .......................................................................................................... 8 3.1
Einstellen der deutschen Sprache ............................................................... 8
3.2
Umstellen des Menüs .................................................................................... 10
3.3
Probleme mit dem FTP unter Windows 8.1 ................................................ 12
4
Das Programm (Oberfläche) ............................................................................ 13
5
Das Menü (Ribbon) ............................................................................................. 15 5.1
Menüpunkt: Datei ......................................................................................... 16
5.1.1
Neue Website ......................................................................................... 16
5.1.2
Neue Website von Template ............................................................... 16
5.1.3
Website öffnen ....................................................................................... 17
5.1.4
Website speichern ................................................................................. 17
5.1.5
Website speichern als… ........................................................................ 17
5.1.6
Vorschau im Browser ............................................................................. 17
5.1.7
Publizieren ............................................................................................... 18
5.1.8
Schließen ................................................................................................. 18
5.1.9
Website schließen .................................................................................. 18
5.1.10 6
Beenden .............................................................................................. 18
Die Werkzeuge .................................................................................................... 19 6.1
Toolbox: Standard......................................................................................... 20
6.1.1
Mauszeiger .............................................................................................. 20
6.1.2
Lesezeichen ............................................................................................ 20
6.1.3
Bullet-Liste (Aufzählung) ........................................................................ 21
6.1.4
Horizontale Linie ..................................................................................... 22
6.1.5
HTML ......................................................................................................... 23
6.1.6
Inline Frame ............................................................................................. 24
6.1.7
Laufschrift ................................................................................................ 25
Webseiten erstellen wie die Profis!
Seite 1
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.1.8
Tabelle ..................................................................................................... 27
6.1.9
Text ........................................................................................................... 28
6.2
Toolbox: Bilder ............................................................................................... 29
6.2.1
Bild ............................................................................................................ 29
6.2.2
ImageMap .............................................................................................. 30
6.2.3
Foto-Galerie ............................................................................................ 30
6.2.4
RollOver-Bild ............................................................................................ 33
6.2.5
RollOver-Text ........................................................................................... 34
6.2.6
Slide-Show ............................................................................................... 37
6.3
Toolbox: Zeichnung ...................................................................................... 39
6.3.1
Banner...................................................................................................... 39
6.3.2
Clip Art ..................................................................................................... 41
6.3.3
Kurven ...................................................................................................... 42
6.3.4
Geschlossene Kurve .............................................................................. 43
6.3.5
Text-Kurve ................................................................................................ 44
6.3.6
Linie .......................................................................................................... 45
6.3.7
Polygon .................................................................................................... 46
6.3.8
Scribble .................................................................................................... 46
6.3.9
Form ......................................................................................................... 47
6.3.10 6.4
Textart ................................................................................................... 50
Toolbox: Formular-Steuerelemente ............................................................ 54
6.4.1
Was machen Formulare und wie sehen sie aus................................ 54
6.4.2
Grundlagen schaffen ............................................................................ 55
6.4.3
Formular-Assistent ................................................................................... 56
6.4.4
Erweiterter Button ................................................................................... 63
6.4.5
Button ....................................................................................................... 66
6.4.6
Captcha .................................................................................................. 68
6.4.7
Markierfeld .............................................................................................. 70
6.4.8
Auswahlfeld ............................................................................................ 72
6.4.9
Eingabefeld............................................................................................. 75
Webseiten erstellen wie die Profis!
Seite 2
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.4.10
Optionsfeld .......................................................................................... 77
6.4.11
Mehrzeiliges Eingabefeld .................................................................. 79
6.5
Toolbox: Medien ........................................................................................... 80
6.5.1
Flash.......................................................................................................... 80
6.5.2
Flash Video Player .................................................................................. 82
6.5.3
HTML5 Audio ........................................................................................... 86
6.5.4
Java ......................................................................................................... 88
6.5.5
OLE-Objekt .............................................................................................. 89
6.5.6
Quicktime ................................................................................................ 91
6.5.7
Real Player .............................................................................................. 93
6.5.7.1 6.5.8
6.6
Verknüpfen mehrerer Steuerelemente ........................................ 94
YouTube ................................................................................................... 95
6.5.8.1
Video in Lightbox anzeigen ........................................................... 97
6.5.8.2
Wo finde ich die YouTube URL zum Einfügen ............................. 99
Toolbox: Navigation ................................................................................... 101
6.6.1
CSS-Menü .............................................................................................. 102
6.6.1.1
Hinzufügen...................................................................................... 104
6.6.1.2
Bearbeiten ...................................................................................... 105
6.6.1.3
Entfernen ........................................................................................ 105
6.6.1.4
Den Stil des Menüs ändern/anpassen ....................................... 106
6.6.2
Gehe zu-Menü...................................................................................... 109
6.6.2.1 6.6.3
Anpassung des Stils ....................................................................... 111
Mega-Menü .......................................................................................... 112
6.6.3.1
Hinzufügen von Menüpunkten und Kategorien ....................... 113
6.6.3.2
Ansicht des Mega-Menüs ............................................................ 114
6.6.4
Menüleiste ............................................................................................. 116
6.6.4.1
Hinzufügen von Menüpunkten und Submenüs ........................ 116
6.6.4.2
Verschieben bzw. Anordnen von Menüpunkten ..................... 118
6.6.4.3
Anpassung des Stils ....................................................................... 118
6.6.5
Navigationsleiste .................................................................................. 119
Webseiten erstellen wie die Profis!
Seite 3
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.6.5.1
Anpassung des Stils ....................................................................... 121
6.6.6
Site-Tree ................................................................................................. 123
6.6.7
Slide-Menü ............................................................................................ 124
6.6.7.1
Ordner hinzufügen ........................................................................ 125
6.6.7.2
Eintrag hinzufügen ........................................................................ 125
6.6.7.3
Anpassung des Stils ....................................................................... 126
6.6.8
Tab-Menü .............................................................................................. 127
6.6.8.1 6.6.9
Anpassung des Stils ....................................................................... 128
Text-Menü .............................................................................................. 128
6.6.9.1
Eintrag hinzufügen ........................................................................ 129
6.6.9.2
Anpassung des Stils ....................................................................... 130
6.6.10
Standard-Menü-Dialoge ................................................................. 131
6.6.10.1 Hinzufügen eines Menüpunkts .................................................... 131 6.6.10.2 Linkverweise resp. Ziele ................................................................ 134 6.7
Toolbox: Erweitert ........................................................................................ 136
6.7.1
Blog......................................................................................................... 136
6.7.2
Karussell ................................................................................................. 138
6.7.3
Inhaltsbereich Master-Frame ............................................................. 141
6.7.4
Datei-Publisher ...................................................................................... 143
6.7.5
Ebene ..................................................................................................... 144
6.7.6
Master-Objekt ....................................................................................... 149
6.7.7
News Feed Ticker ................................................................................. 150
6.7.8
Gebrauchsfertige JavaScripts ........................................................... 152
6.7.9
RSS-Feed ................................................................................................ 155
6.7.10
Website-Suche .................................................................................. 158
6.7.11
Timer.................................................................................................... 160
6.8
jQuery UI ....................................................................................................... 162
7
Neu in der Version 9 .......................................................................................... 163
8
Abbildungsverzeichnis...................................................................................... 166
9
Tabellenverzeichnis ........................................................................................... 170
Webseiten erstellen wie die Profis!
Seite 4
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
10 Impressum .......................................................................................................... 171
Webseiten erstellen wie die Profis!
Seite 5
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
1 Vorwort Diese Hilfe befindet sich zurzeit noch in der Aufbauphase, daher möchte ich Sie an dieser Stelle schon einmal bitten, evtl. Fehler in Schrift und Bild zu entschuldigen. Zum Zeitpunkt der Erstellung kam es noch zu Änderungen an der eigentlichen Software und somit auch zur Änderung von manchen Funktionen. Wir arbeiten mit Nachdruck an dieser Hilfe und werden diese immer wieder updaten. Aus diesem Grund haben wir die Hilfe auch als PDF online gestellt. Somit können wir Änderungen unabhängig vom Setup des WYSIWYG Web Builder an der Hilfe vornehmen und Sie profitieren von einer stets aktuellen Hilfe-Datei. Fragen, Wünsche und/oder Anregungen nehmen wir gerne im Forum (www.wysiwygwebbuilder-forum.de) entgegen.
Ihr und Euer,
Sven Owsianowski
Webseiten erstellen wie die Profis!
Seite 6
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
2 Einleitung WYSIWYG Web Builder 9 ist eine All-in-One-Software-Lösung, die verwendet wird, um eine komplette Homepage zu erstellen. What-You-See-Is-What-YouGet (WYSIWYG) bedeutet, dass alle Elemente der Seite, auf der exakt gleichen Position (festes Layout) angezeigt werden, wie sie zuvor im Designer (WYSIWYG Web Builder) positioniert wurden. Im Gegensatz zu dynamischen Layouts (erzeugt durch traditionelle HTML - Editoren), wo sich die Position von Objekten abhängig von der Position und Größe der Objekte ergibt. WYSIWYG Web Builder generiert HTML (Hypertext Markup Language), XHTML oder HTML5-Tags mit wenigen Mausklicks. Sie benötigen keine HTML-Kenntnisse, um mit dieser Software eine Homepage zu erstellen. Positionieren Sie Texte, Bilder, Tabellen und vieles mehr einfach per Drag-and-Drop. Wenn Sie fertig sind, dann veröffentlichen Sie Ihre Website auf Ihrem Webserver mit der integrierten FTP-Funktion. WYSIWYG Web Builder gibt Ihnen die volle Kontrolle über den Inhalt und das Layout Ihrer Webseiten. Ein, mit dem WYSIWYG Web Builder erstelltes Projekt, kann problemlos mehrere Seiten beinhalten, die Sie alle untereinander und miteinander verbinden können. Einfacher und schneller war es noch nie eine Website zu erstellen!
Webseiten erstellen wie die Profis!
Seite 7
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
3 Einstellungen Wie bei jedem anderen Programm auch, ist es auch beim WYSIWYG Web Builder vorteilhaft, einige Einstellungen an die eigenen Bedürfnisse anzupassen. Darunter fällt beispielsweise die Umstellung auf die deutsche Sprache oder die Umstellung vom Ribbon-Menü zum herkömmlichen Dropdown-Menü. Allerdings, verteufeln Sie das Ribbon-Menü nicht von vorneherein, sondern versuchen Sie sich einmal kurz damit auseinanderzusetzen und Sie werden schnell die Vorteile erkennen.
3.1 Einstellen der deutschen Sprache Der WYSIWYG Web Builder wird in der englischen Sprache ausgeliefert, auch wenn Sie die deutsche Version erworben haben. Das ist Per se nichts Schlimmes, denn die Sprache ist mit wenigen Mausklicks umgestellt. Wichtig! Wenn Sie die deutsche Setup-Datei installieren, dann installieren Sie in jedem Fall auch das deutsche Sprachpaket, da eine Umstellung im Programm ansonsten nicht funktionieren wird. Starten Sie nach der Installation den WYSIWYG Web Builder. Klicken Sie im oberen Ribbon-Menü auf den Reiter / Tab mit der Aufschrift „Tools“ (siehe Bildschirmfoto Punkt 1) und anschließend auf den Menüeintrag „Options“ (siehe Bildschirmfoto Punkt 2).
Abbildung 1: Ribbon-Menü Tools Options
Anschließend wird sich zentriert in Ihrem Bildschirm ein Fenster mit Einstellungen öffnen.
Webseiten erstellen wie die Profis!
Seite 8
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 2: Die "Options"
Wählen Sie hier im linken Menü den Eintrag „Miscellaneous“ und im rechten Bereich unter „Language“ die deutsche Sprache aus. Bestätigen Sie Ihre Einstellungen mit einem Mausklick auf die Schaltfläche „OK“. Starten Sie anschließend den WYSIWYG Web Builder neu um sämtliche Menüs in der deutschen Sprache angezeigt zu bekommen.
Abbildung 3: Das deutsche Menü
Webseiten erstellen wie die Profis!
Seite 9
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
3.2 Umstellen des Menüs Das neue Ribbon-Menü hat im WYSIWYG Web Builder Einzug erhalten. Wer aber lieber wieder zum herkömmlichen Dropdown-Menü wechseln möchte, der kann dies durchaus tun. Rufen Sie dazu im oberen Ribbon-Menü den Reiter / Tab „Werkzeuge“ auf und klicken Sie dort auf den Menüeintrag „Optionen“. Es wird umgehend der Dialog mit den Programmeinstellungen geöffnet. Wählen Sie in den Programmeinstellungen resp. den Optionen auf der linken Seite des Dialogs den Eintrag „Sonstiges“ aus und wählen Sie auf der rechten Seite unter „Oberfläche“ den Eintrag „Menü/Werkzeugleiste“ aus.
Abbildung 4: Optionen Ribbon zu Menüleiste
Um die Einstellungen zu übernehmen, klicken Sie bitte unten am Dialogfenster auf die Schaltfläche „OK“. Das Menü wird sofort umgestellt. Über diesen Weg können Sie natürlich jederzeit wieder zum Ribbon-Menü wechseln. Webseiten erstellen wie die Profis!
Seite 10
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 5: Die altbekannte Menüleiste ist wieder aktiv
Webseiten erstellen wie die Profis!
Seite 11
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
3.3 Probleme mit dem FTP unter Windows 8.1 Seit der Einführung von Windows 8.1 kommt es vermehrt zu Problemen bei der FTP-Übertragung. Das Problem liegt nicht am Programm, sondern vielmehr an den verwendeten Protokollen zur Übertragung der Daten. Damit Sie Ihre mühsam erarbeitete Website auch unter Windows 8.1 auf Ihren Server übertragen können, gehen Sie bitte wie nachfolgend beschrieben vor, um das Übertragungsprotokoll zu ändern. Wählen Sie in der Menüleiste den Eintrag „Werkzeuge Optionen“ aus.
Abbildung 6: Optionen in der Menüleiste
Wählen Sie im nächsten Fenster im linken Menü den Eintrag „Publizieren & Vorschau“ aus. Stellen Sie anschließend die „FTP-Engine“ von „wininet“ auf „winsock“ um und bestätigen Sie die Änderungen durch einen Mausklick auf „OK“.
Abbildung 7: Optionen --> FTP-Engine
Webseiten erstellen wie die Profis!
Seite 12
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
4 Das Programm (Oberfläche)
Abbildung 8: Der WYSIWYG Web Builder
Der neue WYSIWYG Web Builder Version 9 zeigt sich nach dem Programmstart ordentlich strukturiert und funktionell. Das neue Ribbon-Menü (Menüband) erweist sich als ein einfach zu bedienendes Menü, wie es schon das altbekannte Office, seit der Version 2007 vorgemacht hat.
Abbildung 9: Das Ribbon-Menü
Durch das Ribbon-Menü haben Sie immer die Funktionen von einem markierten Objekt parat bzw. können schnell innerhalb der Funktionen navigieren. Auf der linken Seite des Programmfensters finden Sie die Werkzeugleiste. Hier befinden sich die einzelnen Objekte wie z. B. Text, Bild, horizontale Linie usw. Diese Objekte werden zur Erstellung der Internetseite in der mittleren Arbeitsfläche benötigt. Webseiten erstellen wie die Profis!
Seite 13
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Auf der rechten Seite des Programmfensters finden Sie den sog. « Seiten-Manager ». Hier werden Ihnen alle zu Ihrem Projekt gehörenden Seiten und Unterseiten angezeigt. Weiter haben Sie hier auch die Möglichkeit Ordner anzulegen, um von vorneherein eine sauber strukturierte Website aufzubauen. Auf den Seiten-Manager gehen wir in dem entsprechenden Kapitel näher ein. Unterhalb des Seiten-Managers finden Sie die Einstellungen der Seite bzw. später auch die Einstellungen des jeweils markierten Objekts vom Arbeitsbereich.
Webseiten erstellen wie die Profis!
Seite 14
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
5 Das Menü (Ribbon) Das Ribbon-Menü besteht aus den Kategorien:
Datei Start Einfügen Seite Ansicht Anordnen Werkzeuge Hilfe
Durch einen Mausklick auf die jeweilige Kategorie bzw. den jeweiligen Menüpunkt öffnet sich darunter das entsprechende Untermenü. Ähnlich wie Sie es sicherlich aus den „alten“ Dropdown-Menüs kennen. In den Einstellungen haben Sie auch die Möglichkeit vom Ribbon-Menü wieder zurück zum „alten“ Dropdown-Menü zu wechseln.
Webseiten erstellen wie die Profis!
Seite 15
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
5.1 Menüpunkt: Datei Der Menüpunkt Datei besteht aus den folgenden Untermenüpunkten, welche die dazugehörende Funktion aufrufen.
Abbildung 10: Menüpunkt «Datei»
5.1.1 Neue Website An dieser Stelle wird eine neue und leere Arbeitsfläche geschaffen, damit Sie ein NEUES Projekt beginnen können.
5.1.2 Neue Website von Template Hier haben Sie die Möglichkeit eine neue Website aus einer Designvorlage (Template) zu erstellen. Dazu wählen Sie ein entsprechendes Template aus und öffnen dieses.
Webseiten erstellen wie die Profis!
Seite 16
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
5.1.3 Website öffnen Öffnen Sie ein vorher von Ihnen gespeichertes Projekt. Zum Öffnen erscheint der unter Windows® übliche Dialog.
5.1.4 Website speichern Hier speichern Sie ein verändertes Projekt, welches schon einmal von Ihnen gespeichert bzw. abgelegt wurde.
5.1.5 Website speichern als… Hier legen Sie fest, unter welchem Pfad bzw. in welches Verzeichnis und unter welchem Namen Ihr neues Projekt gespeichert werden soll.
I.
WYSIWYG Web Builder Projekt Hiermit speichern Sie das gesamte Projekt, einschließlich der von Ihnen im Projekt verwendeten Grafiken und Dateielemente.
II.
WYSIWYG Web Builder Template Speichert Ihr Projekt als Template (Vorlage) ab. Sie finden das Template dann an entsprechender Stelle wieder.
III.
HTML Dokument (Export) Exportiert Ihr Projekt in ein von Ihnen festgelegtes Verzeichnis. Wenn Sie eine einzelne (aktive) Seite exportieren wollen, dann halten Sie die Taste
¸gedrückt. 5.1.6 Vorschau im Browser Hier können Sie sich Ihr Projekt oder einzelne Seiten Ihres Projektes in einem Browser zur Vorschau (lokal) ansehen. Des Weiteren haben Sie an dieser Stelle die Möglichkeit, verschiedene Browser zu definieren, die auf Ihrem System installiert sind und die Sie für eine Vorschau verwenden möchten.
Webseiten erstellen wie die Profis!
Seite 17
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
5.1.7 Publizieren Hier wird der Dialog zum Veröffentlichen Ihrer Website aufgerufen. Der Dialog wird weiter unten in einem extra Kapitel besprochen.
5.1.8 Schließen Schließt die Seite, die sich momentan im Vordergrund befindet respektive es wird der aktive Tab geschlossen.
5.1.9 Website schließen Ihr komplettes Projekt wird geschlossen.
5.1.10
Beenden
Der WYSIWYG Web Builder wird beendet.
Webseiten erstellen wie die Profis!
Seite 18
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6 Die Werkzeuge Um eine Website zu erstellen, benötigen Sie Werkzeuge z. B. um einen Textbereich zu erstellen, um ein Bild einzufügen usw. Diese Werkzeuge bietet Ihnen der WYSIWYG Web Builder. Manche dieser Werkzeuge sind sehr trivial in der Handhabung und manche Werkzeuge sind etwas komplexer. Wir werden die einzelnen Werkzeuge hier nacheinander beschreiben. Bitte beachten Sie, dass die meisten Werkzeuge sowohl über das Menü als auch über die Werkzeugleiste (links) aufgerufen werden können. Wählen Sie das Werkzeug immer aus der von Ihnen bevorzugten Variante (Ribbon oder Werkzeugleiste) aus.
Webseiten erstellen wie die Profis!
Seite 19
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.1 Toolbox: Standard In diesem Bereich der Werkzeugleiste finden Sie die Standard-Werkzeuge, die benötigt werden, um Texte, Sprungmarken, Codefragmente usw. in Ihre Seite einzufügen.
Abbildung 11: Toolbox Standard
6.1.1 Mauszeiger Mit dem Zeiger können Sie Ihre Maus von einem an ihr „befestigten“ Werkzeug befreien und andere Elemente im Arbeitsbereich anklicken, ohne durch ein vorher benutztes Werkzeug befangen zu sein.
6.1.2 Lesezeichen Hierbei handelt es sich um eine sog. Sprungmarke. Diese Markierung wird beispielsweise an eine Überschrift einer längeren Seite gesetzt. Der Grund dafür ist recht einfach. Gehen Sie davon aus, dass Sie in Ihrem Impressum auf den Datenschutz hinweisen wollen. Sie setzen also eine Sprungmarke an die Überschrift des Datenschutzhinweises und können nun ganz gezielt über eine Verlinkung direkt die entsprechende Passage im Impressum „anspringen“. Sollte sich der Hinweis weiter unten auf Ihrer Seite befinden, dann wird, nachdem der Link zur Sprungmarke angeklickt wurde, nicht die Seite direkt von oben nach unten angezeigt, sondern es wird direkt zur Sprungmarke gescrollt, ohne dass der Benutzer lange auf Ihrer Seite nach dem entsprechenden Hinweis suchen muss. Sie können beliebig viele Sprungmarken auf einer Seite einsetzen. Achten Sie bei der Benennung der Sprungmarken darauf, dass der Name auf das verknüpfte Thema hinweist, um es später leichter wiedererkennen zu können.
Webseiten erstellen wie die Profis!
Seite 20
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.1.3 Bullet-Liste (Aufzählung) Eine Aufzählung wird häufig verwendet und darf als Werkzeug für eine professionelle Software nicht fehlen. Klicken Sie das entsprechende Symbol in der Werkzeugleiste an und wandern Sie anschließend mit der Maus auf den mittleren Arbeitsbereich. Der Mauszeiger wird nun als Kreuz angezeigt. Ziehen Sie nun mit gedrückter linker Maustaste diagonal einen Bereich in der Arbeitsfläche auf. Die Größe bestimmen Sie; diese kann nachträglich verändert werden. Lassen Sie anschließend die Maustaste wieder los, und es wird der folgende Dialog erscheinen. Tragen Sie in das erste Feld die Anzahl der Aufzählungen ein, die Ihre Liste erhalten soll. In dem darunterliegenden DropdownFeld können Sie ein Aufzählunssymbol auswählen. Anschließend klicken Sie bitte auf die Schaltfläche „OK“ um die Aufzählung in Ihren Arbeitsbereich einAbbildung 12: Aufzählungs-Dialog zufügen. Mit einem Doppelklick (links) auf eine der Listeneintragungen können Sie diese bearbeiten. Den Abstand vom Aufzählungszeichen zum eigentlichen Text können Sie mit der Maus regulieren. Dazu müssen Sie nur die Zelle in der Mitte anfassen und nach links verschieben.
Webseiten erstellen wie die Profis!
Abbildung 13: Eine Aufzählung
Seite 21
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.1.4 Horizontale Linie Klicken Sie mit der Maus das entsprechende Symbol in der Werkzeugleiste an und positionieren Sie die Maus auf dem Arbeitsbereich. Der Mauszeiger wird als Kreuz angezeigt. Klicken Sie mit der linken Maustaste und halten Sie diese beim Aufziehen der horizontalen Linie gedrückt. Wenn Sie die gewünschte Breite aufgezogen haben, dann lassen Sie die Maustaste los.
Abbildung 14: Horizontale Linien
Wenn Sie die Maus beim Aufziehen der Linie noch nach unten bewegen, dann können Sie die Stärke der horizontalen Linie schon beim Aufziehen beeinflussen. Die Farbe sowie den Schatten- und Leuchteffekt können Sie mit einem Doppelklick auf die Linie verändern oder aber Sie nehmen die entsprechenden Einstellungen auf der rechten Seite im Bereich « Einstellungen » des WYSIWYG Web Builder vor. Beachten Sie jedoch, dass das entsprechende Objekt markiert sein muss, bevor Sie Veränderungen in den Einstellungen vornehmen können.
Abbildung 15: Einstellungen der HR-Linie
Webseiten erstellen wie die Profis!
Seite 22
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.1.5 HTML Mit diesem Objekt haben Sie die Möglichkeit, einen HTMLQuellcode in Ihre Seite einzufügen. Nachdem Sie das Objekt in Ihrer Arbeitsfläche aufgezogen haben, müssen Sie es mit einem Doppelklick anklicken. Im Anschluss erscheint ein Dialog, in welchen Sie den entsprechenden Quellcode einfügen können. Bitte beachten Sie die Größe des Objekts.
Abbildung HTML-Objekt
16:
Im Dialogfenster haben Sie verschiedene Einstellungsmöglichkeiten. Beispielsweise können Sie dem Objekt eine Beschreibung zuteilen, damit Sie auf einen Blick erkennen können, um welchen Quellcode es sich handelt. Weiter haben Sie die Möglichkeit, im Bereich „Typ“ den Ort im Dokument zu bestimmen, an den der Code eingefügt werden soll. Hier könnte z. B. ein Code existieren, welcher zwischen und eingefügt werden muss. Die Option „Überfließen“ gibt Ihnen die Möglichkeit festzulegen, ob der Bereich des Objektes scrollbar sein darf oder auch nicht. Im Feld HTML fügen Sie den entsprechenden Quellcode ein.
Abbildung 17: Dialog des HTML-Objekts Webseiten erstellen wie die Profis!
Seite 23
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.1.6 Inline Frame
Abbildung 18: Inlineframe Objekt
Der Inline Frame wird verwendet, um den Inhalt einer separaten Webseite als eigenständiges Dokument in Ihre Seite einzufügen. Der Bereich, an dem der Inhalt angezeigt wird, wird von Ihnen mit dem Inline FrameObjekt frei bestimmt. Inline Frames können mit Scrollbalken dargestellt werden, somit ist auch gewährleistet, dass der Benutzer den gesamten Inhalt des Doku-
mentes sehen kann. Nachdem Sie das Objekt im Arbeitsbereich aufgezogen haben, müssen Sie dieses mit einem Doppelklick öffnen um an die Einstellungen zu gelangen. Selbstverständlich können Sie auch die Einstellungen auf der rechten Seite des WYSIWYG Web Builder verwenden.
Abbildung 19: Einstellungen Inlineframe 1. Tab
Name Bezeichnung des Inline Frames
Webseiten erstellen wie die Profis!
Seite 24
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Verlinken mit Wählen Sie zwischen externen Inhalten oder internen vom WYSIWYG Web Builder generierten Inhalten (Seiten). URL Entweder eine externe URL oder ein interner Seitenlink. Alternativ-Text Dieser wird angezeigt, wenn der Inline Frame im Browser nicht dargestellt werden kann. Scrollbalken Hier haben Sie die Möglichkeit dem Inline Frame die Verwendung von Scrollbalken zu erlauben oder zu verweigern. Weiter kann hier auch die Einstellung „Wenn erforderlich“ verwendet werden. Bei dieser Einstellung werden die Scrollbalken erst dann angezeigt, wenn sie vom Dokument benötigt werden. Rahmen Wenn Sie einen Rahmen um Ihren Inline Frame anzeigen lassen wollen, dann müssen Sie hier den Rahmenstil, die Rahmenfarbe und die Rahmenbreite einstellen. Die folgenden Reiter oder Tabs „Lightbox“ und „Box-Schatten“ sind optional. Sie können den Inline Frame in einer Lightbox anzeigen lassen, dazu muss zuvor eine Grafik angezeigt werden. Wenn diese angeklickt wird, öffnet sich die Lightbox inkl. des Inline Frames. Die Größe der Lightbox kann in diesem Bereich ebenfalls eingestellt werden. Box-Schatten Dort finden Sie die Einstellungen (CSS3), um einen Schatten um den Inline Frame zu legen. Dazu berücksichtigen Sie die Achsen x und y.
6.1.7 Laufschrift
Abbildung 20: Laufschrift Objekt Webseiten erstellen wie die Profis!
Erfahrenere Benutzer kennen dies noch unter der Bezeichnung Marquee. Der eingedeutschte Name des Objekts ist selbsterklärend. Es handelt sich um Seite 25
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
eine laufende Schrift, die sich in div. Richtungen bewegen kann, ähnlich wie man es von einem Informationsticker kennt. Nachdem das Objekt im Arbeitsbereich aufgezogen wurde, muss dieses mit einem Doppelklick geöffnet werden, um an die Einstellungen zu gelangen.
Abbildung 21: Einstellungen der Laufschrift
In diesem Bereich geben Sie den Text ein, der später in der Laufschrift erscheinen soll. Die Einstellungsmöglichkeiten sind mannigfaltig. Angefangen von der Schriftart und Schriftgröße über die Farbe und viele weitere Einstellungen am Text selbst. Links und Sonderzeichen können selbstverständlich auch eingefügt werden. Im Bereich Laufband stellen Sie die Richtung ein, in welche Ihr Text bewegt werden soll. Sie können den Text in bestimmten Intervallen wiederholen oder sich kontinuierlich bewegen lassen.
Webseiten erstellen wie die Profis!
Seite 26
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Beim Verhalten stellen Sie ein, ob der Text scrollend, gleitend oder alternativ bewegt werden soll. In den weiteren Tabs innerhalb dieses Dialoges sind noch zusätzliche Funktionen zu finden, um das Objekt entsprechend den Bedürfnissen anzupassen.
6.1.8 Tabelle Wie es der Name des Objekts bereits verrät, verbirgt sich dahinter eine Funktion, um Tabellen in Ihrem Arbeitsbereich zu platzieren.
Abbildung 22: Tabellen Objekt
Nachdem Sie das Objekt im Arbeitsbereich aufgezogen haben (die Größe des aufgezogenen Objekts richtet sich nach Ihren Bedürfnissen) erscheint der Dialog zum Objekt.
In diesem Dialog haben Sie die Möglichkeit, die Anzahl der Spalten und Zeilen, die Ihre Tabelle beinhalten soll, einzustellen. Die folgenden Einstellungen Textabstand in der Zelle und den Abstand der Zellen untereinander wirken sich auf alle Zellen innerhalb der gesamten Tabelle aus. Im Bedarfsfall legen Sie den Textabstand innerhalb jeder Zelle zu allen vier Begrenzungslinien in Px fest. Der Abstand der Zellen zu ihren jeweiligen Nachbarzellen und zu den Begrenzungslinien des Objektes Tabelle lässt sich hier ebenfalls für die gesamte Tabelle einstellen.
Wenn Sie im Anschluss Ihrer Einstellungen auf die Schaltfläche „OK“ klicken, werden Sie die von Ihnen eingestellte Tabelle direkt in der Arbeitsfläche sehen. Die einzelnen Zellen können mit einem Doppelklick aktiviert werden, um diese mit Inhalten zu füllen. Die einzelnen Kästchen einer Tabelle werden Zellen genannt.
Webseiten erstellen wie die Profis!
Seite 27
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.1.9 Text Dieses Objekt werden Sie mit Sicherheit am häufigsten anwenden. Es findet immer Abbildung 23: Text Objekt dann Verwendung, wenn Sie mit Texten arbeiten. Ziehen Sie das Objekt mit der Maus im Arbeitsbereich auf. Sie können das Objekt nur in die Breite aufziehen. Die Höhe reguliert sich später nach dem Inhalt des Objekts. Um einen Text in dieses Objekt schreiben zu können, müssen Sie dieses mit einem Doppelklick aktivieren. Anschließend können Sie mit der Texteingabe beginnen. Schauen Sie sich an dieser Stelle einmal das Ribbon-Menü an. Es zeigt Ihnen sofort alle Werkzeuge, die Sie zur Formatierung Ihrer Texte benötigen.
Abbildung 24: Ribbon Schrift-Werkzeuge
Da der Umgang mit einer Textverarbeitung geläufig sein sollte, ersparen wir es uns hier, auf die einzelnen Formatierungsmöglichkeiten einzugehen.
Webseiten erstellen wie die Profis!
Seite 28
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.2 Toolbox: Bilder In diesem Bereich der Werkzeugleiste (Toolbox) finden Sie all die Werkzeuge, die für die Präsentation Ihrer Bilder in der Website verwendet werden können.
Abbildung 25: Toolbox Bilder
Angefangen vom einfachen Bild bis hin zur FotoGalerie und Slideshow ist dort alles vorhanden, was das Designerherz begehrt.
Durch die unzähligen Einstellungsmöglichkeiten sind Ihnen, was das Designen angeht, kaum Grenzen gesetzt.
6.2.1 Bild Um ein einfaches Bild in Ihre Seite einzufügen, wählen Sie bitte das Objekt „Bild“ aus der Werkzeugleiste aus und ziehen dieses in Ihrer Arbeitsfläche auf. Unmittelbar danach wird ein Dateiauswahl-Dialog angezeigt. Wählen Sie eine Bilddatei aus, die sich lokal auf Ihren Laufwerken befindet, und bestätigen Sie die Auswahl mit einem Mausklick auf „Öffnen“.
Abbildung 26: Dateiauswahldialog
Webseiten erstellen wie die Profis!
Seite 29
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Das von Ihnen ausgewählte Bild wird nun im Arbeitsbereich angezeigt. Evtl. müssen Sie an dieser Stelle das Bild verkleinern. Fassen Sie es dazu mit der Maus an beispielsweise der rechten unteren Ecke an und schieben Sie es nach links oben zusammen, bis Sie die gewünschte Größe erreicht haben. Abbildung 27: Eingefügtes Bild mit Anfasspunkten
„Anfassen“ können Sie die Bilder immer an den Punkten, die sich an allen Ecken und zentriert an den 4 Seiten des Bildes befinden. Diese Punkte werden „Anfasspunkte“ genannt. !!! TIPP !!! Beim Verkleinern eines Bildes kann es zu Qualitätsproblemen kommen. Dies ist für den WYSIWYG Web Builder kein Problem. Klicken Sie das entsprechend verkleinerte Bild mit der rechten Maustaste an und wählen Sie in dem Menü den folgenden Eintrag aus: Bildwerkzeuge -> Auflösung anpassen
6.2.2 ImageMap 6.2.3 Foto-Galerie Dieses Objekt können Sie verwenden, sobald Sie mehrere Fotos oder Bilder auf Ihrer Website präsentieren wollen. Klicken Sie das Objekt in der Werkzeugleiste an und ziehen Sie dieses im Arbeitsbereich auf. Die von IhAbbildung 28: Foto-Galerie Objekt nen aufgezogene Größe bestimmt die Größe des Objekts (Änderungen können jederzeit vorgenommen werden). Nachdem Sie das Objekt in Ihrer Arbeitsfläche aufgezogen haben, klicken Sie es mit einem doppelten Mausklick an, um Bilder / Fotos dem Objekt zuzuordnen. Die Bilder / Fotos werden von Ihrem lokalen Datenträger hinzugefügt.
Webseiten erstellen wie die Profis!
Seite 30
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 29: Dialog zum Objekt Foto-Galerie
Um dem Objekt nun Bilder / Fotos zuzuordnen, klicken Sie auf die Schaltfläche mit der Aufschrift „Hinzufügen“. Es öffnet sich der unter Windows bekannte Dateidialog, mit dem Sie die gewünschten Bilder aussuchen und öffnen. Eine Mehrfachauswahl ist an dieser Stelle möglich. Im Anschluss können Sie die einzelnen Bilder in der Liste anklicken und im Feld „Titel“ dem jeweiligen Bild einen Titel zuordnen, der wiederum in beispielsweise einer Lightbox angezeigt wird. Webseiten erstellen wie die Profis!
Seite 31
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
In der Rubrik „Optionen“ besteht die Möglichkeit, die Größe der Vorschaubilder sowie die Anzahl der Thumbnails (kleine Vorschaubilder) in einer Reihe (pro Bild eine Spalte) festzulegen. Wenn Sie die Vorschaubild-Größe auf „Variable“ setzen, dann paßt sich die Größe automatisch an die Größe des Objekts (Foto-Galerie) an. Im Bereich „Verhalten“ wird eine Aktion nach einem Mausklick auf ein Vorschaubild eingestellt. Nachdem das Vorschaubild angeklickt wurde, wird dieses in voller Größe angezeigt. Bitte beachten Sie die Größe der Originaldatei. Denken Sie daran, dass ein 12MP Bild nicht unbedingt auf jedem Monitor in voller Größe betrachtet werden kann. Es empfiehlt sich, das Bild vorher auf eine Größe von 800 x 600 oder 1024 x 768 Pixel zu reduzieren. Sie haben hier die folgenden Einstellungsmöglichkeiten:
Im gleichen Browser-Fenster öffnen In einem neuen Browser-Fenster öffnen In einem Popup-Fenster öffnen (Das Bild wird in einem neuen Fenster angezeigt.)
In einem anderem Fenster öffnen Im jQuery Dialog öffnen (Das Bild wird unter Verwendung des jQuery Frameworks geöffnet.)
Lightbox Galerie (Eine sehr beliebte Variante; hier wird das Bild vergrößert und der Hintergrund halbtransparent abgedunkelt.)
Im zweiten Hauptreiter (Tab) der Fotogalerie „Stil“ haben Sie weitere, den Stil betreffende Einstellungsmöglichkeiten. Ihrer Fantasie sind beinahe keine Grenzen gesetzt.
Webseiten erstellen wie die Profis!
Seite 32
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.2.4 RollOver-Bild Hierbei handelt es sich eigentlich um zwei Bilder. Einem festen Bild, welches der Benutzer sofort beim Aufrufen der Webseite sehen kann und einem dahinter versteckten Bild, welches erst sichtbar wird, wenn der Benutzer mit der Maus über das Bild fährt. Bei einem Mausklick auf das Bild kann eine weitere Aktion gestartet werden. In der Regel wird danach ein Link aufgerufen. Sobald Sie das Objekt im Arbeitsbereich aufgezogen haben, öffnet sich der Dateiauswahl-Dialog. Wählen Sie hier zunächst das direkt sichtbare Bild aus. Im Anschluss klicken Sie das sichtbare Bild mit der linken Maustaste zweimal an. Es öffnet sich der Dialog des RollOver-Bildes. Nun können Sie ein sog. MouseOver-Bild auswählen bzw. festlegen.
Abbildung 30: Dialog des RollOver Objektes
Webseiten erstellen wie die Profis!
Seite 33
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Klicken Sie bitte die Schaltfläche rechts neben der Zeile „MouseOver-Bild“ an. Es öffnet sich erneut der Dateiauswahl-Dialog. Hier wählen Sie das Bild aus, welches angezeigt werden soll, sobald die Maus über das erste Bild geschoben wird (Bildwechsel). Im Bereich „Text“ haben Sie noch die optionale Möglichkeit, einen alternativen Text und einen Titel einzugeben. Der Titel wird als ToolTipp angezeigt, sobald der Mauszeiger einige Zeit auf dem Objekt verweilt. Im Bereich „Animation“ können Sie den Effekt bestimmen, mit welchem der Bildwechsel vollzogen werden soll. Die Dauer ist auf 500ms eingestellt. 1.000ms entsprechen einem reellen Zeitwert von 1 Sekunde. Im linken Bildteil können Sie einen Bildwechsel erkennen. In diesem Fall mit der Animation „Slide left“. Sobald das erste Bild mit dem Mauszeiger berührt wurde, startet der Bildwechsel. Abbildung 31: MouseOver-Animation "Slide left"
6.2.5 RollOver-Text Wie es der Name des Objektes schon sagt, wird hier ein Text eingeblendet, sobald der Mauszeiger über das vorher festgelegte Bild gefahren wird. Klicken Sie das Objekt „RollOver-Text“ in der Werkzeugleiste an und ziehen Sie dieses anschließend in Ihrem Arbeitsbereich auf. Es öffnet sich im Anschluss direkt der Dateiauswahl-Dialog. Hier wählen Sie ein Bild aus, welches Sie an dieser Stelle anzeigen möchten. Öffnen Sie den Dialog des RollOver-Textes durch einen Doppelklick auf das nun im Arbeitsbereich sichtbare Bild.
Webseiten erstellen wie die Profis!
Seite 34
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Füllen Sie die entsprechenden Felder „Titel“, „Beschreibung“ und ggf. „Link“ aus und bestätigen Sie den Dialog durch Drücken der Schaltfläche „OK“. Zuvor jedoch können Sie im Bereich „Verhalten“ eine Animation festlegen, mit welcher der RollOver-Text sich über das Bild legen soll (sobald das Bild mit dem Mauszeiger berührt wird). Im Hauptreiter (Tab) „Stil“ haben Sie diverse Gestaltungsmöglichkeiten. Soll ein Link aufgerufen werden, sobald der Text (Link-Text) angeklickt wird, dann sollten Sie im Tab „Link“ den entsprechenden Verweis festlegen.
Abbildung 32: Dialog vom RollOver-Text Objekt
Webseiten erstellen wie die Profis!
Seite 35
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 33: Bild mit RollOver-Text
Webseiten erstellen wie die Profis!
Seite 36
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.2.6 Slide-Show Dieses Objekt wird zur automatischen Anzeige von mehreren Bildern oder Fotos verwendet. Ziehen Sie das Objekt im Arbeitsbereich auf. Danach öffnet sich direkt der Dateiauswahl-Dialog. Hier können Sie nun mehrere Bilder (Mehrfachauswahl) auswählen. Um den Dialog des Objektes angezeigt zu bekommen, klicken Sie doppelt auf das nun im Arbeitsbereich angezeigte Bild.
Abbildung 34: Dialog des Slide-Show Effekts
Webseiten erstellen wie die Profis!
Seite 37
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Im Feld „Anzeige“ stellen Sie die Dauer in Sekunden ein, in der das Bild angezeigt werden soll. Im darunterliegenden Auswahlfeld stellen Sie einen gewünschten Effekt ein, mit dem das Bild gewechselt werden soll. Rechts daneben stellen Sie die Zeit in Sekunden ein, die der Wechseleffekt andauern soll. Im Auswahlfeld „Festgelegte Reihenfolge“ haben Sie die folgenden Darstellungsmöglichkeiten:
Festgelegte Reihenfolge Zufällige Reihenfolge Lightbox-Galerie Conveyer-Belt (hier werden die Bilder in einer Art Laufband angezeigt)
Webseiten erstellen wie die Profis!
Seite 38
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.3 Toolbox: Zeichnung Dieser Bereich der Werkzeugleiste enthält viele Elemente, die zum Einfügen von Zeichnungselementen verwendet werden können. Darunter sind Objekte wie Formen, Clip Arts, Linien usw. zu finden.
Abbildung 35: Toolbox Zeichnung
6.3.1 Banner Mit diesem Objekt haben Sie Möglichkeit, auf eine Schnelle Art und Weise ein ansprechendes Banner in Ihre Website einzufügen. Als Banner ist hier nicht der aus Webseiten bekannte animierte Werbebanner zu verstehen, sondern vielmehr eine Art Header.
Abbildung 36: Banner Objekt
Der Text, welcher in dem Banner erscheinen soll, kann entweder von Ihnen „per Hand“ eingetragen werden oder es wird der Titel Ihrer Seite angezeigt, auf welcher der Banner eingeblendet wird. Nachdem Sie das Objekt im Arbeitsbereich aufgezogen haben, können Sie den Dialog mit den Einstellungen zum Objekt durch einen Doppelklick auf das Banner aufrufen.
Webseiten erstellen wie die Profis!
Seite 39
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 37: Eigenschaften des Banner Objekts
Sollten Sie einen eigenen Banner-Text eingeben wollen, dann entfernen Sie das Häkchen rechts neben dem Eingabefeld mit der Bezeichnung „Seitentitel benutzen“. Im Anschluss wird das Eingabefeld aktiviert und Sie können eine Bezeichnung Ihrer Wahl dort eingeben. Im Hauptreiter (Tab) „Stil“ können Sie den Stil und beispielsweise den Farbverlauf und die Farben des Banners verändern. Im Reiter „Effekte“ kann das Banner mit einem Schatten und einer Reflexion belegt werden. Diese Einstellungen sind alle optional und richten sich nach Ihrem persönlichen Geschmack. Im Reiter „Link“ kann ein Link hinterlegt werden, der aufgerufen wird, sobald das Banner mit der Maus angeklickt wurde. „Publizieren“, hier können Sie festlegen, ob das Banner als Bild oder als Standardtext mit CCS3-Styling veröffentlicht wird. Webseiten erstellen wie die Profis!
Seite 40
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Unter den „Ereignissen“ können beispielsweise Aktionen festgelegt werden, die ein bestimmtes Ereignis ausführen. Mit „MouseOver“ wird z. B. ein Ereignis ausgeführt, sobald mit dem Mauszeiger über das Banner gefahren wird. Im Bereich der „CSS3-Animationen“ kann das Banner beim Einblenden mit diversen Animationen belegt werden.
6.3.2 Clip Art Bei diesen Clip Art wird auf sogenannte „Dingbats“ Schriftarten zugegriffen. Dingbats sind symbolhafte und dekorative Glyphen wie Sie diese bestimmt aus den Schriftarten Webdings & Wingdings kennen. Hier mal ein kleines Beispiel aus den Wingdings Glyphen:
Im WYSIWYG Web Builder werden diese Symbole in Bilder umgewandelt und können entsprechend dem von Ihnen eingestellten Stil angezeigt werden. Ziehen Sie das Objekt „Clip Art“ in Ihrer Arbeitsfläche auf. Es erscheint im Anschluss direkt ein Dialog, in welchem Sie eine Dingbats-Schriftart und ein entsprechendes Symbol auswählen können. Zum Einfügen klicken Sie mit der Maus auf „OK“. Wenn Sie weitere Dingbats auswählen wollen, dann können Sie die entsprechenden Schriften in das Programmverzeichnis vom WYSIWYG Web Builder in den Ordner „ClipArt“ packen. Bitte beachten Sie, dass die Schriftarten die Endung „*.ttf“ haben müssen. Der Pfad lautet in der Regel:
Abbildung 38: Clip Art Dialog Webseiten erstellen wie die Profis!
C:\Program Files (x86)\WYSIWYG Web Builder 9\clipart\
Seite 41
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 39: Verschiedene Darstellungsmöglichkeiten von Clip Art
Das Aussehen der einzelnen Clip Art können Sie in den Eigenschaften des entsprechenden Objekts bestimmten. Klicken Sie dazu das zu verändernde Clip Art doppelt an.
6.3.3 Kurven Mit diesem Objekt ist es Ihnen möglich, Linien in Kurvenform in den Arbeitsbereich zu zeichnen. Dazu haben Sie zwei Möglichkeiten.
I.
Linke Maustaste permanent gedrückt halten In diesem Fall können Sie beim Bewegen der Maus Kurven „malen“.
II.
Klickweise die Linien zu einer Kurve verbinden Klicken Sie einen Punkt im Arbeitsbereich an und setzen Sie etwas entfernt davon einen weiteren Punkt. Dies können Sie solange fortsetzen wie benötigt.
Webseiten erstellen wie die Profis!
Seite 42
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Um den Zeichenmodus zu beenden, setzten Sie am letzten Punkt einen Doppelklick. Die Stärke, Farbe und Art der Linie können Sie wieder in den Einstellungen des Objekts festlegen.
6.3.4 Geschlossene Kurve Es handelt sich bei diesem Objekt um eine abgeschlossene Kurve, die eine Vielzahl an Formen darstellen kann. Wählen Sie das Objekt aus der Werkzeugleiste aus und klicken Sie einmal mit Abbildung 40: Geschlossene Kurve Objekt der Maus an eine Startposition in Ihrer Arbeitsfläche. Versetzt (die Richtung spielt keine Rolle) klicken Sie erneut, um einen zweiten Punkt der Kurve zu erstellen. Einen dritten Punkt setzen Sie nun beispielsweise unterhalb und zentriert zu Ihrer ersten Kurvenverbindung. Wenn Sie Ihre geschlossene Kurve beenden wollen, setzten Sie am letzten Punkt einen Doppelklick. Änderungen an Größe und Höhe können nachträglich vorgenommen werden. Markieren Sie dazu das Objekt und benutzen Sie die Anfasspunkte, um die Form zu verändern. Sie können das Objekt auch mit gedrückter linker Maustaste im Arbeitsbereich aufziehen. Schauen Sie am besten, welche Art die zweckdienlichste für Ihre Bedürfnisse ist.
Abbildung 41: Geschlossene Kurve mit linker Maustaste aufgezogen
Die Eigenschaften der jeweilig angelegten Kurven können Sie mit einem Doppelklick auf das Objekt aufrufen.
Webseiten erstellen wie die Profis!
Seite 43
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.3.5 Text-Kurve
Abbildung 42: Text-Kurven Objekt
Auch hier muss zu Beginn eine Kurve erstellt werden. Es gibt die zwei bekannten Möglichkeiten. Entweder Sie ziehen das Objekt mit gedrückter linker Maustaste auf oder aber Sie setzen einzelne Verbindungspunkte, die am Ende zu einer Kurve zusammengeführt werden.
Die Kurve können Sie mit einem Doppelklick abschließen. Nachdem Sie die Kurve abgeschlossen haben, wird sich ein Text, welcher an dieser Kurve ausgerichtet ist, präsentieren: „Enter your text here“ Klicken Sie nun die Kurve oder den Text mit einem doppelten Mausklick an, um die Eigenschaften angezeigt zu bekommen. Hier haben Sie alsdann auch die Möglichkeit, Ihren eigenen Text zu hinterlegen.
Abbildung 43: Eigenschaften der Text-Kurve
Webseiten erstellen wie die Profis!
Seite 44
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.3.6 Linie Mit Hilfe dieses Objekts können Sie gerade Linien in Ihrem Arbeitsbereich aufziehen. Die Linien können dabei in alle Richtungen gezogen werden.
Abbildung 44: Linien Objekt
Die Eigenschaften, um beispielsweise die Linienstärke zu ändern, erreichen Sie mit einem Doppelklick auf ein Linien-Objekt oder aber auf der rechten Seite des WYSIWYG Web Builder unter den „Eigenschaften“.
Abbildung 45: Eigenschaften der Linien
Webseiten erstellen wie die Profis!
Seite 45
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.3.7 Polygon
Abbildung 46: Polygon Objekt
Als Polygon wird ein Vieleck bezeichnet. Diese Vielecke können Sie mit wenigen Mausklicks erstellen. Wählen Sie dazu das Werkzeug „Polygon“ aus der Werkzeugleiste aus und klicken Sie einmal in Ihre Arbeitsfläche, um einen Anfangspunkt zu setzen. Ziehen Sie die Maus anschließend beispielsweise ca. drei Zentimeter nach rechts und klicken Sie erneut.
Wie Sie nun erkennen können, wird eine Verbindung zwischen Punkt A und Punkt B erstellt. Bewegen Sie nun die Maus ca. 2 Zentimeter nach unten und klicken Sie erneut einmal auf die linke Maustaste. Nun wird eine weitere Verbindung hergestellt. Wie viele Verbindungen (Ecken) Sie generieren, ist letztendlich Ihnen überlassen. Wenn Sie am letzten Punkt angelangt sind und Sie keine weitere Verbindung mehr erstellen wollen, dann schließen Sie die letzte Verbindung mit einem Doppelklick ab. Die Eigenschaften des Objekts können Sie auch hier wieder mit einem Doppelklick auf das erstellte Polygon erreichen.
6.3.8 Scribble Scribble sind sog. „Kritzeleien“. Um mit einem Scribble zu beginnen, wählen Sie das Objekt bitte aus der linken Werkzeugleiste aus. Klicken Sie anschließend mit der linken Maustaste einmal in Ihren Arbeitsbereich, um einen Startpunkt für Ihr Scribble festzulegen. Nun können Sie etwas entfernt vom Startpunkt ein weiteres Mal die linke Maustaste drücken und Sie erhalten eine Verbindung zwischen den beiden Punkten. Setzen Sie etwas versetzt wieder einen Punkt, dann wird dieser ebenfalls verbunden.
Abbildung 47: Scribble Objekt
Um „freihändig“ zu „kritzeln“ halten Sie die linke Maustaste gedrückt und schieben Sie die Maus entsprechend hin und her.
Webseiten erstellen wie die Profis!
Seite 46
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Um das Scribble zu beenden, setzten Sie am letzten Punkt einen Doppelklick. Die Eigenschaften können Sie im Anschluss durch einen Doppelklick auf das erstellte Objekt öffnen.
6.3.9 Form Hier haben Sie ein Werkzeug an der Hand, welches Sie vermutlich viel im WYSIWYG Web Builder verwenden werden. Alleine, wenn Sie nur an eine kleine Hinweisbox denken, können Sie diese wunderbar einfach mit einer rechteckigen oder abgerundeten Form erstellen. Wählen Sie das Objekt „Form“ in der linken Werkzeugleiste aus und ziehen Sie anschließend ein Abbildung 48: Form Objekt Rechteck mit gedrückter linker Maustaste im Arbeitsbereich auf. Die Größe können Sie später jederzeit über die Anfasspunkte des Objekts ändern. Um die Eigenschaften aufzurufen, setzen Sie einen Doppelklick auf das soeben aufgezogene Rechteck. Es öffnet sich der Eigenschaften-Dialog des Objekts. In diesem Dialogfenster haben Sie etliche Einstellungsmöglichkeiten. Beispielsweise können Sie direkt in der ersten Rubrik eine Form auswählen. Sie erinnern sich, dass wir zuvor ein Rechteck im Arbeitsbereich aufgezogen haben. Hier haben Sie nun die Möglichkeit die Form entsprechend zu ändern. Wählen Sie sich aus der Liste eine Form aus, die Ihnen zusagt bzw. eine Form, die zu Ihrem Seitenbereich passt.
Abbildung 49: Formen
Webseiten erstellen wie die Profis!
Seite 47
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 50: Eigenschaften Form Objekt
Im darunterliegenden Bereich haben Sie die Möglichkeit, den Farbeffekt einzustellen. Hier finden Sie eine entsprechende Auswahl im Feld „Effekt“. Im Feld „Opazität“ wir die „Lichtundurchlässigkeit“ eingestellt. D. h. wenn Sie hier beispielsweise den Wert „50“ eintragen, dann wird Ihr Objekt halbtransparent dargestellt. Im Feld „Farben“ können Sie eine entsprechende Farbe für Ihr Objekt auswählen. Im Bereich „Rahmen“ können Sie die Breite, Farbe und den Stil des Objektrahmens verändern bzw. anpassen.
Webseiten erstellen wie die Profis!
Seite 48
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Der „Hover-Modus“ wird dann aktiviert, wenn Sie einen Farbwechsel der Form erreichen wollen, sobald mit dem Mauszeiger über das Objekt gefahren wird. Im oberen Hauptreiter (Tab) „Text“ haben Sie die Möglichkeit, einen formatierten Text in Ihre Form zu setzen.
Abbildung 51: Eigenschaften Form Objekt (Text)
Die Bedienung ist selbsterklärend. Um alle von Ihnen vorgenommenen Einstellungen zu übernehmen, klicken Sie bitte auf die Schaltfläche „OK“.
Webseiten erstellen wie die Profis!
Seite 49
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 52: Formen als Muster (Beispiele)
6.3.10
Textart
Textarten kennen Sie bestimmt aus dem Bereich der Textverarbeitung. Wenn Sie schon einmal eine Einladung geschrieben haben, dann haben Sie bestimmt auch schon die Textarten verwendet, um beispielsweise eine geschwungene Schrift als Überschrift zu generieren. Mit den Textarten im WYSIWYG Web Builder haben Sie sehr viele Gestaltungsmöglichkeiten, wie Sie eben einen solchen auffallenden Text erstellen können. Wählen Sie zu Beginn das Objekt „Textart“ in der linken Werkzeugleiste aus und ziehen Sie das Objekt mit gedrückter linker Maustaste im Arbeitsbereich auf. Im Anschluss werden Sie etwa das Folgende sehen:
Abbildung 53: Aufgezogenes Objekt Textart
Um nun den Text und das Aussehen des Objekts verändern zu können, muss der Eigenschaften-Dialog aufgerufen werden. Setzten Sie dazu bitte einen Doppelklick auf das soeben aufgezogene Objekt.
Webseiten erstellen wie die Profis!
Seite 50
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 54: Eigenschaften Objekt Textart
Im Feld „Text“ geben Sie nun bitte Ihren gewünschten Text ein. Zuvor löschen Sie den Text „WYSIWYG Web Builder“ aus dem Feld. Ihr eingegebener Text darf mehrzeilig sein, das stellt überhaupt kein Problem dar. Im Bereich „Neigungstyp“ haben Sie die Möglichkeit, die Textneigung auszuwählen. Klicken Sie dazu auf den kleinen Pfeil rechts am Feld.
Webseiten erstellen wie die Profis!
Seite 51
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Klicken Sie auf die Schaltfläche „Galerie…“, um einige Beispiele zur Auswahl angezeigt zu bekommen.
Abbildung 55: Galerie Objekt Textart
Wählen Sie hier ein Beispiel durch Anklicken aus und bestätigen Sie dies mit einem Mausklick auf die Schaltfläche „OK“. Im Bereich „Hintergrund“ haben Sie wieder die Möglichkeit, den Hintergrund des Objekts entsprechend Ihrer Vorstellung zu gestalten. Um alle von Ihnen getätigten Einstellungen zu übernehmen und anzuwenden, klicken Sie bitte auf die Schaltfläche „OK“. Ihr Textart Objekt könnte nun wie folgt aussehen:
Webseiten erstellen wie die Profis!
Seite 52
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 56: Erstelltest Textart I
Abbildung 57: Erstelltest Textart II
Webseiten erstellen wie die Profis!
Seite 53
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.4 Toolbox: Formular-Steuerelemente Hier kommen wir zu einem sehr interessanten und komplexen Themenbereich. „Formulare“ werden nahezu in allen Webseiten eingesetzt. Als Kontaktformular, Bestellformular, für Kommentare usw. Um mit Formularen arbeiten zu können, müssen gewisse Grundvoraussetzungen serverseitig erfüllt sein. Sie sollten bei Ihrem Webpaket darauf achten, dass Sie in jedem Fall PHP (Personal Home Page Tools) benutzen können respektive, dass PHP in Ihrem Webpaket zur Verfügung steht. Achten Sie ggf. darauf, dass die PHP Version höher 5 ist.
6.4.1 Was machen Formulare und wie sehen sie aus Formulare in Webseiten sind ausfüllbare Eingabefelder, Auswahlboxen, Auswahllisten, Optionsbuttons und Markierungsschaltflächen. Diese Felder werden von Ihnen mit einer Bezeichnung versehen (z. B. können Sie einem Eingabefeld den Bezeichner „Vorname“ zuteilen). Die Bezeichnungen können Sie frei wählen. Am Ende eines Formulars befindet sich immer ein „Senden“-Knopf, über welchen das Formular versendet werden kann.
Abbildung 58: Formularfelder
Ein Formular wird entweder direkt per E-Mail übermittelt oder der Inhalt wird in einer Datei oder einer MySQL-Datenbank hinterlegt. Webseiten erstellen wie die Profis!
Seite 54
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Die Übertragung von Formularen ist in den meisten Fällen nicht gesichert. D. h., dass die Daten während der Übermittlung im Extremfall abgegriffen werden könnten. Sollten Sie sensible Daten wie z. B. Kreditkartendaten usw. über Ihre Formulare erfragen, dann sollten Sie mit Ihrem Hostinganbieter über sinnvolle Sicherheitsprotokolle sprechen. Wenn Sie einen Server Ihr Eigen nennen dürfen, dann sollte das Aufspielen solcher Zertifikate kein Problem darstellen. Ein ausgefülltes Formular, welches per E-Mail übermittelt wird, wird in der E-Mail wie folgt dargestellt: IP ADRESSE: 000.000.00.00 BEZEICHNER1: VOM BENUTZER AUSGEFÜLLT BEZEICHNER2: VOM BENUTZER AUSGEFÜLLT BEZEICHNER3: VOM BENUTZER AUSGEFÜLLT Jedes Kontaktobjekt (Eingabefeld, Optionsbutton usw.) wird in einer einzelnen Zeile dargestellt. Angefangen mit der erfassten IP Adresse des Benutzers.
6.4.2 Grundlagen schaffen Um ein Formular erstellen zu können, müssen zuerst zwei Grundlagen geschaffen werden. 1. Stellen Sie die Datei-Erweiterung in den Seiten-Eigenschaften auf PHP. 2. Ziehen Sie einen Formularbereich im Arbeitsbereich auf. Danach haben Sie die ersten Grundlagen geschaffen, um ein Formular zu erstellen. Die Formularobjekte können Sie nun im Formularbereich (welcher sich im Arbeitsbereich befindet) einfügen.
Webseiten erstellen wie die Profis!
Seite 55
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.4.3 Formular-Assistent Wenn Sie ein schnelles Formular erstellen wollen und wenig Erfahrung mit Formularen haben, dann verwenden Sie einfach den Formular-Assistenten aus der linken Toolbox. Klicken Sie das Objekt „Formular-Assistent“ an und ziehen Sie anschließend einen entsprechend großen Bereich in der Arbeitsfläche auf. Anschließend öffnet sich der folgende Dialog:
Abbildung 59: WWB Formular-Assistent 1 von 4
Wählen Sie hier aus den drei vorgegebenen Möglichkeiten aus. In diesem Beispiel halten wir uns an die erste Option „Ein neues Formular auf Basis einer Vorlage erstellen“. Klicken Sie auf „Weiter“. Im nächsten Schritt haben Sie die Möglichkeit, aus den bestehenden Vorlagen eine auszusuchen. Bitte beachten Sie, dass Sie Änderungen später jederzeit durchführen können.
Webseiten erstellen wie die Profis!
Seite 56
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 60: WWB Formular-Assistent 2 von 4
Wenn Sie ein Formular durch Anklicken ausgesucht und markiert haben, dann klicken Sie bitte auf „Weiter“, um zum nächsten Schritt zu kommen.
Abbildung 61: WWB Formular-Assistent 3 von 4
Webseiten erstellen wie die Profis!
Seite 57
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Im vorletzten Schritt sehen Sie nun eine Auflistung aller für Ihr ausgewähltes Formular benötigten Objekte. Sie können an dieser Stelle weitere Objekte hinzufügen oder bestehende Objekte entfernen. Verwenden Sie dazu die Schaltflächen auf der rechten Seite des Dialogs. Um ein weiteres Formularobjekt hinzuzufügen, klicken Sie bitte auf die Schaltfläche mit der Aufschrift „Hinzufügen“. Es öffnet sich direkt im Anschluss an Ihren Mausklick auf „Hinzufügen“ ein Menü. Hier wählen Sie das gewünschte Objekt durch einen einmaligen, linken Mausklick aus. Danach öffnet sich ein neuer Dialog, in welchen Sie den Bezeichner des Formularobjekts eintragen können. Der Bezeichner wird später vor das entsprechende Objekt gesetzt.
Abbildung 62: Hinzufügen von Formularobjekten
Tabelle 1: Formular-Objekte
Objekt Captcha
Funktionsbeschreibung « Completely Automated Public Turing test to tell Computers and Humans Apart ». Das bedeutet wörtlich: „Vollautomatischer öffentlicher Turing-Test zur Unterscheidung von Computern und Menschen“.
Markierfeld Wird zur Mehrfachauswahl verwendet. Auswahlfeld
Wenn nur eine Option aus einer Auswahl gewählt werden kann (Einfachauswahl). Aufklappbares Feld.
Eingabefeld
Zur Eingabe aller Zeichen.
Webseiten erstellen wie die Profis!
Seite 58
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Datei-Upload
Verborgenes Feld Label Optionsfeld
Zurücksetzen-Button
Übermitteln-Button
Wird zum Upload einer Datei verwendet und besteht aus einem Eingabefeld und einem Button. Ein verstecktes Feld, welches zur Übergabe von Variablen und Arrays verwendet werden kann. Textbezeichner. Wenn nur eine Option ausgewählt werden können soll. Beispiel JA oder NEIN. Hier werden alle Eingaben aus dem Formular gelöscht und der Urzustand des Formulars wird wiederhergestellt. Zum Übermitteln der Formularfelder (per E-Mail, per Datei oder MySQL).
Mehrzeiliges Eingabefeld Ein Eingabefeld, welches mehrere Zeilen und die Taste ENTER verarbeiten kann.
Wenn Sie alle Felder, die Ihr Formular enthalten soll, eingefügt und bezeichnet haben, dann klicken Sie auf die Schaltfläche „Weiter“, um zur nächsten Seite des Dialogs zu gelangen. Im vierten und letzten Schritt werden die Formulareigenschaften eingestellt. Soll heißen, dass hier eingestellt wird, wie das Formular übermittelt werden soll und an welche Adresse. Hier können Sie auch gleich die Betreffzeile der E-Mail konfigurieren und die Verschlüsselungsart des Formulars festlegen.
Webseiten erstellen wie die Profis!
Seite 59
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 63: WWB Formular-Assistent 4 von 4
Das Feld „Formularname“ ist für Sie zur Bezeichnung und besseren Wiedererkennung des Formulars gedacht. Tragen Sie hier also nur eine globale Bezeichnung zu Ihrem Formular ein. Im Auswahlfeld „Formular-Aktionen“ haben Sie die folgenden Auswahlmöglichkeiten:
Keine Aktion Diesen Punkt sollten Sie nicht auswählen, da hier keine Aktion ausgelöst wird.
Daten an eine E-Mail-Adresse übermitteln (nicht empfohlen) Hier werden die Daten an ein E-Mail-Programm (Standard) übermittelt und müssen dann vom Benutzer aus dem jeweiligen Programm manuell versendet werden.
Daten an eine Seite innerhalb Ihrer Website übermitteln Wird z. B. zur Übergabe von Daten in einem Shopsystem verwendet.
Daten an ein Skript auf einer externen Website übermitteln Für den Fall, dass Sie auf einen externen Formmailer zugreifen wollen, können Sie dies hier problemlos realisieren.
Webseiten erstellen wie die Profis!
Seite 60
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Daten mit PHP-Formular-Prozessor an eine E-Mail-Adresse übermitteln Dieser Punkt wird in 90% der Fälle, in denen ein Formular übermittelt werden soll, verwendet. Alle Daten werden dann direkt über Ihren Server ohne fremde Skripte versendet.
Im Feld „Methode“ können Sie (je nach Auswahl) entweder „POST“ oder „GET“ einstellen.
HTTP GET Hier werden die Parameter durch das Zeichen ? in die URL eingefügt. Oft wird diese Vorgehensweise gewählt, um eine Liste von Parametern zu übertragen, die die Gegenstelle bei der Bearbeitung einer Anfrage berücksichtigen soll. Beispiel: «formmailer.php?subject=Test?body=Nachrichtentext?attachment=c:/file1.jpg»
HTTP POST Übertragung der Daten mit einer speziell dazu vorgesehenen Anfrageart im HTTP-Body, so dass sie in der eigentlichen URL nicht sichtbar sind.
Im Feld der „Verschlüsselungsart“ haben Sie die nachfolgenden Auswahlmöglichkeiten.
application/x-www-form-urlencoded Ohne diese Kodierung wären einige Informationen nicht in einer URL darstellbar. Beispielsweise Leerzeichen.
multipart/form-data Wird bei einer Mischung aus Formularobjekten sowie beispielsweise einer Uploadfunktion von Dateien verwendet.
text/plain Ist der reine Text ohne Formatierung.
Klicken Sie auf die Schaltfläche „Weiter“ um den Dialog zu schließen und das Formular zu erstellen. Wenn Sie die nachfolgende Meldung angezeigt bekommen, dann haben Sie evtl. vergessen, Ihre Datei-Erweiterung auf „PHP“ einzustellen.
Webseiten erstellen wie die Profis!
Seite 61
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 64: Dialog PHP-Erinnerung
Wie links angezeigt könnte nun Ihr fertiges Formular aussehen. Sie haben an dieser Stelle immer wieder die Möglichkeit, Objekte zu entfernen oder hinzuzufügen. Wählen Sie dazu das entsprechende Formularobjekt aus der linken Toolbox und ziehen Sie es in den Formularbereich.
Abbildung 65: Ein fertiges Formular
Bitte beachten Sie, dass alle Formularfelder immer in den dafür vorgesehenen Formularbereich gesetzt werden müssen. Liegen diese Felder außerhalb des Formularbereichs, werden Sie im Formular nicht berücksichtigt!
Webseiten erstellen wie die Profis!
Seite 62
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.4.4 Erweiterter Button Das Objekt „Erweiterter Button“ kann vielseitig eingesetzt werden. Zum einen kann es als trivialer Button zum Versenden des Formulars oder aber zum Löschen der Formulardaten genutzt werden und zum anderen als Link-Button. Um das Objekt als Sende-Schaltfläche oder als Reset-Schaltfläche zu verwenden, muss diese Schaltfläche zwingend Teil eines Formularbereichs sein. Wird das Objekt beispielsweise zur Verlinkung eingesetzt, dann kann es frei und außerhalb eines Formularbereichs platziert werden.
I.
Einsatz als Sende-/ oder Reset-Schaltfläche Ziehen Sie in diesem Fall das Objekt mit der gedrückten linken Maustaste in einem bestehenden Formularbereich auf. Anschließend öffnen Sie die Eigenschaften des Objekts durch einen Rechtsklick darauf. Bitte beachten Sie, dass die Eigenschaften an dieser Stelle nicht mit einem Doppelklick aufgerufen werden können, da der Doppelklick an dieser Stelle die Eingabe der Schaltflächenaufschrift freigibt. Nachdem Sie die Eigenschaften aufgerufen haben, erscheint der nachfolgende Dialog:
Webseiten erstellen wie die Profis!
Seite 63
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 66: Eigenschaften des erweiterten Buttons
Im Feld „Button-Typ“ können Sie auswählen, ob Sie den Button zur Übermittlung oder aber zum Zurücksetzen der Formularfelder verwenden möchten.
Abbildung 67: Button-Typ
Webseiten erstellen wie die Profis!
Seite 64
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
II.
Einsatz als Link-Schaltfläche Ein weiteres Einsatzgebiet des „erweiterten Buttons“ ermöglicht es, diesen als Link-Button zu verwenden. In diesem Fall wird der Button mit einer entsprechenden Internetadresse verknüpft, so dass diese beim Anklicken des Buttons geöffnet wird. Der Button muss für diesen Zweck nicht Bestandteil eines Formularbereichs sein. Wählen Sie in den Eigenschaften im Feld „Button-Typ“ den Eintrag „OnClick“ aus. Das darunter liegende Auswahlfeld „OnClick-Aktion“ wird aktiviert, so dass Sie zum Auswählen der Aktionen auf das kleine Pfeilsymbol (rechts) klicken können.
Abbildung 68: OnClick Aktionen des erweiterten Buttons
Um den Button mit einer Internetadresse zu verknüpfen, wählen Sie den Eintrag „Zur angegebenen URL navigieren“ aus. Geben Sie anschließend im Feld „OnClick-Wert“ die zu verlinkende URL ein.
Webseiten erstellen wie die Profis!
Seite 65
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 69: OnClick Aktion LINK
Die anderen OnClick-Aktionen sind selbsterklärend.
6.4.5 Button Der Button (Schaltfläche) wird immer dann eingesetzt, wenn Sie ein Formular übermitteln oder dessen Inhalt löschen wollen. Fügen Sie den Button immer in den entsprechenden Formularbereich ein, da er nur dort die oben genannten Funktionen ausüben kann. Sollten Sie den Button zu anderen Zwecken wie beispielsweise für Links benötigen, dann wählen Sie dazu bitte den „Erweiterten Button“ aus. Nachdem Sie den Button im Formularbereich aufgezogen haben, rufen Sie bitte dessen Eigenschaften auf, um die notwendigen Einstellungen vornehmen zu können.
Webseiten erstellen wie die Profis!
Seite 66
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 70: Eigenschaften Button
Im Bereich „Button-Typ“ haben Sie die folgenden Einstellungsmöglichkeiten:
Normal Übermitteln Zurücksetzen
keine Funktion zur Übermittlung der Formularobjekte zum Leeren der gesamten Formularfelder
Im Feld „Wert/Label“ können Sie die Beschriftung der Schaltfläche ändern. Um Ihre getätigten Einstellungen zu übernehmen, klicken Sie bitte unten im Dialogfenster auf die Schaltfläche „OK“.
Webseiten erstellen wie die Profis!
Seite 67
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.4.6 Captcha Das Captcha-Objekt wird zur SPAM-Prävention verwendet. Hier muss der Endbenutzer eine zufällige Zeichenfolge in das dafür vorgesehene Eingabefeld übertragen, damit das Formular versendet werden kann. Das Captcha-Objekt verwendet dazu Buchstaben und Zahlen, welche bunt gemischt angezeigt werden. Das Captcha-Objekt muss ebenfalls in den Formularbereich gesetzt werden, damit es verwendet werden kann. Nachdem Sie das Objekt im Formularbereich positioniert haben, rufen Sie bitte die Eigenschaften des Objekts auf.
Abbildung 71: Eigenschaften des Captcha Objekts
Webseiten erstellen wie die Profis!
Seite 68
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Im Bereich „Allgemein Captcha-Bild“ haben Sie die Möglichkeit, das Feld, welches später den Captcha-Code anzeigt, entsprechend zu formatieren. Mit Hilfe der Felder „Breite“ und „Höhe“ stellen Sie eben die genannten Werte ein. „Schriftart“, hier stellen Sie eine Ausgangsschriftart des Captcha-Objekts ein. Die Schriftgröße bestimmen Sie im gleichnamigen Feld. Einen entsprechenden Hintergrund können Sie ebenfalls im darunterliegendem Feld auswählen. Darunter finden Sie die folgenden drei Punkte, die optional von Ihnen aktiviert werden können:
Zufälligen Hintergrund generieren Wie es der Name schon aussagt, wird hier ein zufälliger Hintergrund erzeugt. Dabei werden unterschiedliche Farben und Striche im CaptchaObjekt verwendet.
Text-Schatten aktivieren Zeigt einen Schatten hinter den zufällig erzeugten Zahlen und Buchstaben an.
Inklusive GDFONTPATH Einige Webserver benötigen diese Einstellung, um die Schriften, die vom Captcha verwendet werden, zu finden. Beachten Sie jedoch auch, dass manche Webserver diese Einstellung nicht zulassen. Sprechen Sie im Zweifelsfall Ihren Webhoster an. Aktivieren Sie diese Option, dann wird die folgende Zeile in das CAPTCHA Skript hinzugefügt: putenv ('GDFONTPATH =' realpath (). '.');
Dieser Code wird dem Captcha mitteilen, wo sich die Schrift für den Sicherheitscode auf dem Server befindet. Unter dem Punkt „Fehlerseite“ können Sie eine Seite bestimmen, welche angezeigt werden soll, falls der Captcha-Code nicht korrekt übertragen wurde. Sollte bei der Übertragung des Codes ein Fehler auftreten, dann können Sie diesen über die Validierung abfangen und eine entsprechende Meldung ausgeben lassen. Webseiten erstellen wie die Profis!
Seite 69
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 72: Eigenschaften des Captcha Objekts – Validieren
In das Feld „Fehlermeldung“ tragen Sie bitte einen entsprechenden Text ein, welcher bei einer nicht bestandenen Validierung angezeigt werden soll. Durch einen Mausklick auf die Schaltfläche „Einstellungen“ haben Sie die Möglichkeit die entsprechenden Meldungen zu formatieren.
6.4.7 Markierfeld Das Markierfeld kann immer dann eingesetzt werden, wenn Sie eine Mehrfachauswahl in Ihren Formularen anbieten wollen. Das Einsatzgebiet dieses Objekts ist mannigfaltig. Um das Markierfeld zu verwenden, wählen Sie dieses in der linken Werkzeugleiste aus und ziehen dieses im Arbeitsbereich aus. Bitte beachten Sie auch hier wieder, dass das Markierfeld in einen Formularbereich platziert werden muss. Im Anschluss sehen Sie ein einfaches viereckiges Kästchen im Arbeitsbereich ohne Beschreibung. Die Beschreibung, muss mit einem Textobjekt (siehe Kapitel 6.1.9) neben das Markierfeld gesetzt werden. Der Zustand des Markierfeldes ist im ersten Moment, nachdem Sie dieses im Formularbereich aufgezogen haben, unmarkiert. Der Wert lautet also FALSE. Wenn Sie das Markierfeld von vorneherein als markiertes Feld (Wert = TRUE) darstellen wollen, dann müssen Sie die Eigenschaften des Markierfeldes öffnen. Webseiten erstellen wie die Profis!
Seite 70
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 73: Eigenschaften des Markierfeld Objekts
Das Markierfeld kann auf Wunsch auch validiert werden. Dabei wird der Zustand des Feldes beim Absenden des Formulars geprüft. Beispiel: Sie wollen zwingend, dass Ihre AGB akzeptiert werden müssen, dann wird bei der Validierung eingestellt „Auswahl erforderlich“. Das Formular kann dann erst verarbeitet werden, wenn das Markierfeld auf TRUE (also markiert) gesetzt wird.
Webseiten erstellen wie die Profis!
Seite 71
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.4.8 Auswahlfeld Dieses Formularobjekt wird beispielsweise bei der Anrede eines Formulars verwendet. Hier kann der Benutzer dann beispielsweise auswählen: Frau, Herr, Firma… Um das Formularfeld verwenden zu können, wählen Sie dieses bitte in der linken Werkzeugleiste aus. Nachdem Sie das Objekt dann im Arbeitsbereich in den entsprechenden Formularbereich platziert haben, rufen Sie die Einstellungen des Auswahlfeldes auf.
Abbildung 74: Eigenschaften des Auswahlfeld Objekts – Allgemein
Im Bereich „Name“ geben Sie eine Bezeichnung des Objekts ein. Bitte beachten Sie, dass die Bezeichnung später an die E-Mail des Formulars übergeben wird.
Webseiten erstellen wie die Profis!
Seite 72
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Im Auswahlfeld „Typ“ haben Sie die Möglichkeit die Art des Auswahlfeldes zu bestimmen. Ihnen stehen hier drei Möglichkeiten zur Auswahl:
I.
Auswahlfeld Das übliche Auswahlfeld, welches über einen PfeilButton an der rechten Seite aufgeklappt wird.
II.
Listenfeld Hier wird der Inhalt, welcher zur Auswahl steht in einer Liste angezeigt. Sollte der Inhalt größer als das Objekt selbst sein, dann erscheint ein Scrollbalken rechts im Listenfeld.
III.
Datalist Hier kann ein Datenbestand eingesetzt werden. Beispielsweise eine Liste mit Ländern oder Ähnliches. Dabei funktioniert das Auswahlfeld ähnlich wie ein Textfeld-Objekt jedoch mit einer Autovervollständigung. Zur Autovervollständigung wird der Inhalt des Datenbestandes verwendet. Mit einem Doppelklick auf das Auswahlfeld kann später im Browser der Datenbestand zur Auswahl unter dem Eingabefeld angezeigt werden.
Wenn Sie dem Benutzer die Auswahl von mehreren Punkten in der Auswahl ermöglichen wollen, dann setzen Sie bitte ein Häkchen bei „Mehrfach-Auswahl zulassen“. Im Bereich „Punkte“ werden die zur Auswahl stehenden Punkte eingetragen. Zum Eintragen einzelner Punkte klicken Sie bitte aus die rechte Schaltfläche mit der Aufschrift „Hinzufügen“. Abbildung 75: Auswahlfeld - Punkte
Webseiten erstellen wie die Profis!
Seite 73
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Im Anschluss daran öffnet sich ein kleines Dialogfenster, in welchem Sie den entsprechenden Punkt eingeben können. Im Bereich „Text“ geben Sie die im Auswahlfeld sichtbare Bezeichnung ein. Im Feld „Wert“ haben Sie die Möglichkeit (wenn Abbildung 76: Auswahlfeld - Punkt eintragen Sie beispielsweise eine PHP-Programmierung vornehmen) einen entsprechenden Auslösewert einzutragen. „Anfangszustand“, hier setzen Sie die Option „Ausgewählt“ bitte auf den Punkt, der im Anfangszustand Ihres Formulars direkt ausgewählt sein soll. Alle weiteren Punkte geben Sie dann mit der Option „Nicht ausgewählt“ ein. Klicken Sie auf die Schaltfläche „OK“ um den Punkt zu übernehmen. Einen weiteren Punkt können Sie nun durch erneutes Anklicken der Schaltfläche „Hinzufügen“ Ihrer Auswahl hinzufügen. Klicken Sie auf „Importieren“, wenn Sie einen bestehenden Datenbestand z. B. in einer Text-Datei oder aber einen vordefinierten Datenbestand verwenden wollen.
I.
Vordefinierte Werte Der WYSIWYG Web Builder bietet Ihnen hier eine beachtliche Auswahl an gängig verwendeten Daten an. Treffen Sie hier eine Auswahl. Die Daten werden direkt übernommen.
Abbildung 77: Auswahlfeld vordefinierte Werte
Webseiten erstellen wie die Profis!
Seite 74
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
II.
Aus Datei importieren Hier haben Sie die Möglichkeit eine bestehende Liste Ihrer Auswahl hinzuzufügen. Bitte beachten Sie, dass es sich dabei um eine Liste, nicht um eine CSV-Datei handeln muss. Die Punkte müssen in dieser Liste also untereinander stehen und dürfen nicht mit einem Komma oder Semikolon getrennt sein.
Um einen bestehenden Punkt nachträglich bearbeiten zu können, klicken Sie bitte auf die Schaltfläche mit der Aufschrift „Bearbeiten“. Es öffnet sich im Anschluss der Ihnen schon bekannte Dialog. Hier können Sie nun Änderungen vornehmen. Um einen Punkt aus der Auswahl zu entfernen, klicken Sie die gleichnamige Schaltfläche an, nachdem Sie den Punkt markiert (angeklickt) haben. Auch das Auswahlfeld kann entsprechend validiert werden. Wählen Sie dazu in den Einstellungen den Reiter „Validieren“ aus und legen Sie den entsprechenden Modus fest.
6.4.9 Eingabefeld Das Eingabefeld ist eines der am häufigsten verwendeten Formularobjekte. Hier hat der Benutzer die Möglichkeit zum Ausfüllen. Beispielsweise legen Sie ein Eingabefeld an, in welchem der Benutzer seinen Namen eingeben soll und ein weiteres für den Vornamen usw. Wählen Sie das Objekt in der linken Werkzeugleiste aus und positionieren Sie dieses in einem Formularbereich! Das Eingabefeld verfügt über eine Bezeichnung (Label), welche vor oder über dem Feld steht. Hierzu verwenden Sie bitte wieder das Text-Objekt. Um Einstellungen am Eingabefeld vorzunehmen (beispielsweise für die Validierung oder der Darstellung), rufen Sie bitte die Eigenschaften des Objekts auf.
Webseiten erstellen wie die Profis!
Seite 75
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 78: Eigenschaften des Eingabefeld-Objekts
Bitte beachten Sie, dass der Wert im Feld „Name“, der Bezeichner ist, der später in der E-Mail dargestellt wird. Soll Ihr Eingabefeld beispielsweise eine Telefonnummer beinhalten, dann geben Sie unter „Name“ z. B. „Telefonnummer“ ein. TIPP !!! Wenn Sie eine E-Mail Adresse abfragen und wollen, dass diese als Absender in der Formular-E-Mail erscheint, dann geben Sie in das Feld „Name“ die Bezeichnung „email“ (bitte die Schreibweise beachten!) ein. Im Feld „Anfangswert“ können Sie einen Wert festlegen, der schön zu Beginn im Eingabefeld stehen soll. Wenn Sie beispielsweise eine Internetadresse vom Benutzer abfragen, dann könnte ein Anfangswert z. B. „http://“ sein. „Platzhalter“ ist eine Bezeichnung, welche grau im Eingabefeld angezeigt wird. Der dort stehende Wert wird automatisch entfernt, sobald der Benutzer mit seiner Eingabe beginnt. Löscht der Benutzer seine gesamte Eingabe, dann wird Webseiten erstellen wie die Profis!
Seite 76
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
automatisch der Platzhalter angezeigt. Der Platzhalter kann auch als Bezeichner des Eingabefeldes verwendet werden anstelle eines Text-Objektes / Label. Somit können Sie Formulare auch auf engerem Raum erstellen ohne Platz durch einen externen Bezeichner zu verlieren. Im Auswahlfeld „Typ“ haben Sie die Möglichkeit einen entsprechenden Typ für Ihr Eingabefeld festzulegen. Wenn Sie beispielsweise ein Passwort über dieses Feld abfragen, dann stellen Sie den Typ auf „Passwort“. Die Eingabe, die der Benutzer nun tätigt, wird mit Kreisen dargestellt. Die maximale Inhaltslänge können Sie im Feld „Max. Länge“ festlegen. Geben Sie hier beispielsweise eine Zehn (10) ein, dann können maximal 10 Zeichen in das Feld eingegeben werden. Geben Sie eine Null (0) ein, wenn Sie keine Beschränkung der Länge festlegen wollen. Auch dieses Feld kann vor der Übertragung validiert werden. Klicken Sie dazu den Reiter „Validieren“ in den Eigenschaften an. Legen Sie hier die Art der Überprüfung fest.
6.4.10
Optionsfeld
Die Optionsfelder werden dann verwendet, wenn Sie dem Benutzer mehrere Auswahlen anbieten, aber nur eine ausgewählt werden darf / muss. Dies wäre z. B. dann sinnvoll, wenn Sie eine JA/NEIN Abfrage erstellen. Um das Objekt verwenden zu können, wählen Sie dieses bitte in der linken Werkzeugleiste aus und positionieren es in einem Formularbereich. Im Anschluss sehen Sie einen einfache Kreis im Arbeitsbereich ohne Beschreibung. Die Beschreibung, muss mit einem Textobjekt (siehe Kapitel 6.1.9) neben das Markierfeld gesetzt werden. Der Wert des Optionsfeldes ist im Anfangszustand immer FALSE, also nicht ausgewählt. Wenn Sie eines der Optionsfelder als TRUE, also ausgewählt anzeigen wollen, dann müssen Sie dies in den Einstellungen des Optionsfeldes festlegen. Rufen Sie dazu die Eigenschaften des Objekts auf. Webseiten erstellen wie die Profis!
Seite 77
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 79: Eigenschaften des Optionsfeld-Objekts
BITTE BEACHTEN!!! Wenn Sie mehrere Abfragen mit Optionsfeldern in einem Formular verwenden, dann müssen die jeweiligen Optionsfelder gruppiert werden. Teilen Sie diesen also in einem solchen Fall einen Gruppennamen mit. Dabei muss jedes Optionsfeld einer Gruppe den selben Gruppennamen bekommen. Warum muss das sein? Wenn Sie beispielsweise zwei JA/NEIN Abfragen im Formular verwenden und Sie würden die Optionsfelder nicht gruppieren, dann können nur eines der vier Optionsfelder markiert werden. Gruppieren Sie aber die erste JA/NEIN und die zweite JA/NEIN Abfrage, dann kann jeweils der Wert True in jeder der beiden Abfragen gesetzt werden.
Webseiten erstellen wie die Profis!
Seite 78
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Um das Optionsfeld zu validieren, rufen Sie bitte den entsprechenden Reiter in den Eigenschaften des Objekts auf.
6.4.11
Mehrzeiliges Eingabefeld Verwenden Sie dieses Objekt immer dann, wenn der Benutzer die Möglichkeit haben soll Ihnen beispielsweise eine Nachricht zukommen zu lassen.
Die Funktionsweise von diesem Objekt ist die Gleiche wie die des Eingabefeldes. Der große Unterschied liegt in der Fähigkeit des Objekts mehrere Zeilen zu verarbeiten. D. h. der Benutzer kann auch einen Absatz in seiner Eingabe mit der Taste ENTER erzeugen. Genauso wie in einem herkömmlichen Texteditor. Auf schriftbildliche Formatierungen muss der Benutzer verzichten, da dies in diesem Formular-Objekt nicht möglich ist. Das mehrzeilige Eingabefeld kann in den Eigenschaften des Objekts vor der Übermittlung des Formulars, validiert werden.
Webseiten erstellen wie die Profis!
Seite 79
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.5 Toolbox: Medien Hier finden Sie alle wichtigen Objekte, welche Sie zur Darstellung von Ton- und Videomaterial sowie Flash-Dateien und OLE-Objekten benötigen.
6.5.1 Flash Flash-Dateien können vielseitig eingesetzt werden. Es gibt u. a. Flash Animationen, Filme, Menüs und weitere aufwendige und effektvolle Programmierungen. All diese Dateien, welche allgemein mit der Dateierweiterung „.swf“ enden, können über dieses Medienobjekt in Ihre Webseiten eingebunden werden. Beim Einbinden der Datei spielt es keine Rolle, wo sich diese lokal auf Ihrem Rechner befindet. Sobald Sie die Datei ausgewählt und eingebunden haben, wird diese automatisch vom WYSIWYG Web Builder in das Projektverzeichnis kopiert. Um dem Objekt nun eine Flash-Datei zuzuordnen, müssen Sie zuerst die Eigenschaften des Objekts aufrufen. Direkt in der ersten Eingabezeile „Film“ haben Sie die Möglichkeit die Datei einzufügen. Klicken Sie dazu einfach auf das Ordner-Symbol, welches sich rechts neben dem Eingabefeld befindet. Abbildung 80: Eigenschaften des Objekts Flash
Im darunterliegendem Feld „Alternatives Bild“ haben Sie die Möglichkeit, ein Bild festzulegen, welches angezeigt wird, sollte der die Flash-Datei nicht automatisch starten. Unter „Version“ können Sie die verwendete Flash-Version einstellen. Hier wird der Standardwert „8.0.0.0“ verwendet.
Webseiten erstellen wie die Profis!
Seite 80
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Die Qualität der Animation können Sie im nächsten Feld (Dropdown) festlegen. Es stehen Ihnen hier einige Merkmale zur Verfügung. Im Feld „Skalieren“ haben Sie die Möglichkeit der Skalierung. Es stehen die Ihnen die Möglichkeiten „ExactFit“, „NoBorder“ und „ShowAll“ zur Verfügung. Im „Fenster-Modus“ wählen Sie Transparent aus, wenn Sie den Flash-Film mit transparent angezeigt werden sollen. Andernfalls wählen Sie „Window“ oder „Opaque“ aus. Script-Zugriff erlauben Die Skript-Zugriffsparameter des Flash Player steuern die Möglichkeit, ausgehende Skripts aus einer Flash-Datei auszuführen. Stellen Sie „nie“ ein, wenn keine Skripte ausgeführt werden sollen. Wollen Sie Skripte ausführen lassen, dann setzen Sie die Einstellung auf „always“. In diesem Fall werden alle Skripte, welche von der SWF-Datei ausgehen, zugelassen. Sollen die Skripte nur innerhalb der Domäne ausgeführt werden, dann setzen Sie die Einstellung auf "sameDomains". Adobe Flash Player-Inhalte mit Hilfe des SWFObject einbinden „SWFObject“ ist eine W3C-Standardfreundliche Methode, um Flash-Inhalte, die ein kleines JavaScript nutzt einzubetten. Wenn Sie diese Option aktivieren, dann verwendet der WYSIWYG Web Builder die SWFObject Skripte anstelle des W3C nicht konformen Tags und . Die weiteren Optionen des Eigenschaften-Dialogs auf der rechten Seite können zusätzlich aktiviert bzw. deaktiviert werden. Autostart Startet die Animation / Programmierung direkt nach dem Laden der SWF-Datei. Wiederholen Spielt die SWF-Datei in einer Endlosschleife ab. Komplettes Menü anzeigen Zeigt auf Wunsch das komplette Flash-Menü an. Webseiten erstellen wie die Profis!
Seite 81
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Sollten Sie weitere Variablen der Flash-Datei zuordnen wollen, dann können Sie dies im Reiter „Erweitert“ des Eigenschaften-Dialogs entsprechend eingeben.
6.5.2 Flash Video Player Mit dem Flash Video Player haben Sie eine komfortable Endlösung um einen entsprechenden Videofilm in Ihrer Webseite anzuzeigen. Wählen Sie das Objekt in der linken Werkzeigleiste aus und ziehen Sie dieses mit der Maus in einer entsprechenden Größe in der Arbeitsfläche auf. Es wird Ihnen unmittelbar danach der Player angezeigt. Um den Player nutzen zu können, muss der Endbenutzer das Adobe Flash Player-PlugIn im Browser installiert haben. Dies ist in den meisten Fällen installiert und die Darstellung sollte kein Problem darstellen. Anderenfalls müsste das Plug-in vom Endbenutzer nachinstalliert werden. Sie können mit diesem Player die folgenden Formate abspielen lassen: Flash-Filme (FLV), MP4 (auch AVC), MOV, AVI, MP4V, M4V, F4V, VP6, VP7 und M4A (auch AAC, iPod), M4R (Audio / Klingeltöne für iPhone), F4A (Audio), WEBM. Um den Player nun zu konfigurieren, müssen Sie die Einstellungen des Objekts aufrufen.
Webseiten erstellen wie die Profis!
Seite 82
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 81: Eigenschaften des Objekts Flash Video Player
Im Feld „Video“ haben Sie die Möglichkeit, dass entsprechende Video einzufügen. Klicken Sie dazu auf das Ordner-Symbol auf der rechten Seite des Eingabefeldes. Im Feld „Bild“ haben Sie die Möglichkeit, ein festes Bild anzuzeigen, welches angezeigt wird, wenn der Player nicht automatisch mit dem Abspielen beginnen soll. Anderenfalls bleibt der Player schwarz. Im Feld „Titel“ können Sie den Titel des Films eingeben. Die Eingabe ist optional. Im darauffolgendem Feld haben Sie die Möglichkeit, eine mehrzeilige Beschreibung des Films einzugeben. Auch dieses Feld ist wieder optional.
Webseiten erstellen wie die Profis!
Seite 83
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Die Lautstärke, welche direkt nach dem Anspielen des Films voreingestellt sein soll, können Sie in dem entsprechendem Dropdown-Feld festlegen. Wie Optionen „Autostart“ besagt, dass der Film automatisch nach dem Laden der Seite gestartet wird, ohne dass der Endbenutzer auf einen „Playbutton“ klicken muss. Die weitere Option „Wiederholen“ sorgt dafür, dass der Film in einer Endlosschleife abgespielt wird. In der Rubrik „Anzeige-Optionen“ haben Sie die nachfolgenden Einstellmöglichkeiten, die in der Grafik erläutert werden:
Abbildung 82: Anzeige Optionen des Objekts Flash Video Player
In der Rubrik „HTML5“ haben Sie die Möglichkeit, die Steuerung über HTML5 zu regeln. Das Aussehen des Flash Video Players können Sie im Eigenschaften-Dialog unter dem Reiter „Erweitert“ regeln bzw. einstellen und verändern. Die Beschreibung der einzelnen Elemente ist dabei selbsterklärend.
Webseiten erstellen wie die Profis!
Seite 84
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 83: Aussehen des Objekts Flash Video Player verändern
Webseiten erstellen wie die Profis!
Seite 85
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.5.3 HTML5 Audio Audio-Dateien sowie Video-Dateien können mit dem Objekt „HTML5 Audio“ abgespielt werden. Um das Objekt verwenden zu können, wählen Sie es bitte in der linken Werkzeugleiste aus und ziehen es im Arbeitsbereich auf. Anschließend müssen Sie die Eigenschaften des Objekts öffnen, um weitere Einstellungen an dem Objekt vornehmen zu können.
Abbildung 84: Eigenschaften des Objekts HTML5 Audio
Als Erstes können Sie im Dropdown-Menü „Typ“ die Art respektive den Typ der zu verwendenden Medienart festlegen. Sie können wählen zwischen HTML5 Audio und HTML5 Video. Haben Sie beispielsweise „HTML5 Audio“ ausgewählt, dann können Sie im Feld „Dateiname“, eine lokal auf Ihrem Rechner liegende Datei, auswählen. Dazu Webseiten erstellen wie die Profis!
Seite 86
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
klicken Sie bitte die Schaltfläche „Durchsuchen“ auf der rechten Seite neben dem Eingabefeld an. Es können die folgenden Formate im Bereich Audio verwendet werden: WAV, OGG, MP3, WMA, AU, AIFC, AIFF, MID und MIDI Nachdem Sie eine Audio-Datei ausgewählt haben, können Sie das Verhalten des Objekts in der entsprechenden Rubrik konfigurieren. Dazu haben Sie die folgenden Möglichkeiten: Autostart Startet die Audio-Datei automatisch direkt, nachdem die Seite geladen wurde. Wiederholen Spielt die Audio-Datei in einer Endlosschleife ab. Verbergen Verbirgt das Objekt. Steuerung anzeigen Zeigt die Steuerung des Objekts an.
Abbildung 85: Steuerung des Objekts HTML5 Audio im Browser
Medien-Datei vorladen Hier wird die Medien-Datei zuerst geladen, bevor mit dem Abspielen begonnen wird. Audio stumm schalten Schaltet den Lautsprecher bzw. die Ausgabe der Audio-Datei stumm.
Im Bereich „Alternative Formate“ können Sie von derselben Audiodatei weitere Formate hinterlegen. „Teaser-Bild“ wird nur beim Typ „HTML5 Video“ verwendet.
Webseiten erstellen wie die Profis!
Seite 87
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.5.4 Java Java-Applets sind eine effiziente Möglichkeit, Ton und Animation, sowie Bildlauf-Nachrichten und andere tolle Effekte, zu der eigenen Seite hinzuzufügen. Dabei sind Java-Applets plattformunabhängige Anwendungen mit kompakten Dateigrößen. Die meisten Browser sind Java-kompatibel, so dass Besucher der Website keine speziellen Plug-ins benötigen, um ein Java-Applet ausführen. Das Java-Objekte macht es einfach, Java Applets, einzufügen. Dazu ziehen Sie das Objekt bitte im Arbeitsbereich auf und rufen dessen Eigenschaften auf.
Abbildung 86: Eigenschaften des Objekt Java
Geben Sie in das Feld „Meldung für Browser ohne Java-Unterstützung“ einen kurzen Hinweis darauf, dass Java evtl. nachinstalliert werden muss um das entsprechende Applet auf Ihrer Webseite anzuzeigen.
Webseiten erstellen wie die Profis!
Seite 88
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Sie können Java-Applets auf einer der nachfolgend genannten Webseiten herunterladen (natürlich gibt es zahlreiche andere Webseiten, die ebenfalls JavaApplets anbieten): http://www.javafile.com/ http://www.freewarejava.com/applets/index.shtml http://javaboutique.internet.com/ Beim Einfügen der Applets folgen Sie den Anweisungen bzw. den Informationen über die Parameter und anderer Einstellungen der jeweiligen Applet.
6.5.5 OLE-Objekt Bei OLE-Objekten handelt es sich um Objekt-Verknüpfungen bzw. Einbettungen von Objekten in die eigene Anwendung respektive Website. OLE bedeutet „Object Linking and Embedding“ die Bedeutung habe ich oben schon erklärt. Wozu können OLE-Objekte im WYSIWYG Web Builder verwendet werden, werden Sie sich sicherlich fragen. Stellen Sie sich vor, dass Sie eine aufwendige Tabelle mit der namhaften Tabellenkalkulation von Microsoft™ erstellt haben. Diese würden Sie nun gerne in Ihre Website einbinden und zugleich möchten Sie die Option der Veränderung an der Tabelle behalten. In einem solchen Fall würden Sie die Tabelle als OLE-Objekt in Ihre Webseite einbetten. Die Tabelle kann jederzeit von Ihnen bearbeitet werden und entsprechend im Internet aktualisiert werden. Bitte beachten Sie, dass alle OLE-Objekte als Grafik in die Website eingebettet werden. Eine Bearbeitung ist später nur im WYSIWYG Web Builder möglich! Um nun beispielsweise eine Tabelle in Ihre Website einzubinden, wählen Sie in der linken Werkzeugleiste das OLE-Objekt aus und ziehen dieses im Arbeitsbereich auf. Anschließend öffnet sich direkt der Dialog zur Auswahl des entsprechenden OLE-Objekts.
Webseiten erstellen wie die Profis!
Seite 89
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 87: Auswahl-Dialog des OLE-Objekts
Sie haben nun die Möglichkeit zwischen „Neu erstelle“ und „Aus Datei erstellen“ zu wählen. In diesem Beispiel erstelle ich eine neue Tabelle. Dazu wählen Sie den Objekttyp „Microsoft Excel Worksheet“ aus und klicken auf die Schaltfläche „Okay“ um das Objekt einzubetten. Jetzt nicht erschrecken und vor allem etwas Gedulden. Es wird nun Excel innerhalb des aufgezogenen OLE-Objekts geöffnet.
Abbildung 88: Tabelle als OLE-Objekt
Nun können Sie die Tabelle bearbeiten, so wie Sie es aus der Tabellenkalkulation gewohnt sind. Ihnen stehen alle Funktionen des Programms zur Verfügung. Webseiten erstellen wie die Profis!
Seite 90
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Um das OLE-Objekt wieder zu verlassen, klicken Sie einfach mit der linken Maustaste außerhalb des markierten Tabellenbereichs. Siehe Beispiel.
Abbildung 89: Tabellenobjekt verlassen
Anschließend befindet sich Ihre Tabelle im WYSIWYG Web Builder. Das OLE-Objekt wird als Grafik im WYSIWYG Web Builder eingebettet. Wenn die Tabelle später bearbeitet werden muss, dann klicken Sie diese im WYSIWYG Web Builder doppelt mit der linken Maustaste an. Wenn Sie die Taste STRG gedrückt halten und das OLE-Objekt doppelt mit der linken Maustaste anklicken, dann wird das Objekt im eigentlichen Programmfenster geöffnet. Um die Daten im WYSIWYG Web Builder zu übernehmen, reicht es vollkommen aus, das Hauptprogramm der Anwendung zu schließen.
6.5.6 Quicktime Das Quicktime Objekt wird dann verwendet, wenn Sie eine Mediendatei mit der Dateiendung .mov oder .qt in Ihre Website einbinden wollen. Um das Objekt zu verwenden, wählen Sie dieses bitte in der linken Werkzeugleiste aus und ziehen es, wie gewohnt, im Arbeitsbereich auf. Anschließend öffnen Sie die Eigenschaften des Objekts indem Sie es doppelt mit der linken Maustaste anklicken.
Webseiten erstellen wie die Profis!
Seite 91
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 90: Eigenschaften des Quicktime Objekts
Die Eigenschaften dieses Objekts sind trivial. Wählen Sie die Mediendatei über die Schaltfläche „Durchsuchen…“ aus, die später abgespielt werden soll. Setzen Sie einen Haken in das Feld „Film im Benutzer-Cache behalten“, wenn Sie wollen, dass der Film nicht jedes Mal neu geladen werden muss, wenn der Benutzer Ihre Seite öffnet. Beachten Sie hierbei bitte, dass wenn Sie ein Update Ihrer Mediendatei auf Ihren Server laden, diese in diesem Fall nicht unbedingt direkt vom Endbenutzer gesehen werden kann, da der Browser auf die gecachte Datei zugreift. In den „Anzeige-Optionen“ haben Sie die Möglichkeit, das Abspielen der Datei automatisch zu starten (Autostart), eine Wiederholung stattfinden zu lassen (Endlosschleife), das Objekt zu verbergen und die Steuerung ein-/ respektive auszublenden. Bitte denken Sie daran, dass der Endbenutzer in seinem Browser ein Quicktime-Plugin installiert haben muss, um die Wiedergabe der von Ihnen eingebetteten Multimediadatei sehen zu können.
Webseiten erstellen wie die Profis!
Seite 92
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.5.7 Real Player Die erste Version des Real Players wurde im Jahr 1995 veröffentlicht. Der Player stammt aus dem Unternehmen RealNetworks. Verwenden Sie dieses Objekt, sobald Sie Real Player Mediendateien in Ihre Website einbetten wollen. Wählen Sie dazu das Objekt in der linken Werkzeugleiste aus und ziehen Sie dieses im Arbeitsbereich auf. Anschließend öffnen Sie die Eigenschaften des Objekts durch einen Doppelklick mit der linken Maustaste auf das soeben aufgezogene Objekt.
Abbildung 91: Eigenschaften des Real Player Objekts
Über die „Durchsuchen…“-Schaltfläche haben Sie die Möglichkeit, eine Mediendatei auszuwählen. Die hier auszuwählende Mediendatei darf die Dateiendungen: .ra, .rm, .rv, .mvb, .rmj, .rms, .ram, .rmm, .rax, .rvx, .rp, .rtx, .rt und .rmx enthalten. In den „Anzeige-Optionen“ haben Sie die Möglichkeit, die Steuerung, die Konsole sowie den Autostart und die Wiederholung der Mediendatei zu bestimmen. Im Feld Steuerung finden Sie eine große Palette diverser Funktionen, die nachfolgend erläutert werden: Tabelle 2: Befehle zur Steuerung des RealPlayer Objekts
Option Webseiten erstellen wie die Profis!
Bedeutung Seite 93
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
ImageWindow
Zeigt das Bildfenster.
Alle
Zeigt das grundlegende RealPlayer Bedienfeld.
ControlPanel
Zeigt ein kompaktes RealPlayer Bedienfeld.
PlayButton
Zeigt eine Play / Pause -Taste.
PlayOnlyButton
Zeigt eine Play-Taste.
PauseButton
Zeigt eine Pause-Taste.
StopButton
Zeigt eine Stopp-Taste.
FFCTRL
Zeigt eine Schnellvorlauf-Taste.
RWCtrl
Zeigt eine Rücklauf-Taste.
MuteCtrl
Zeigt eine Mute(Stumm)-Taste.
MuteVolume
Zeigt eine Mute-Taste und Lautstärkeregler.
volumeSlider
Zeigt ein Lautstärkeregler.
PositionSlider
Zeigt einen Clip Positionsslider.
TACCtrl
Zeigt ein Clip Informationsfeld.
HomeCtrl
Zeigt das Real™ Logo.
InfoVolumePanel
Zeigt Informationen zusammen mit dem Lautstärkeregler und der Mute-Taste an.
InfoPanel
Zeigt die Präsentation Infotafel an.
StatusBar StatusField
PositionField
Zeigt das Status –Panel an, welches informative Meldungen anzeigt. Zeigt den Nachrichtentextbereich der Statusleiste an. Zeigt das Positionsfeld, welches den Clip an dem aktuellen Platz in der Timeline zeigt und gibt weiter eine Information der gesamten Länge des Videoclips an.
Konsole Hier geben Sie einen Namen für das Plug-in ein. Durch die Vergabe von unterschiedlichen Konsolennamen können Sie mehrere RealPlayer Objekte unabhängig voneinander auf einer einzelnen Seite verwenden.
6.5.7.1 Verknüpfen mehrerer Steuerelemente Die Konsoleneigenschaft definiert einen Namen, welcher RealPlayer Objekte vereint, so dass mehrere Steuerelemente zusammenarbeiten können. Webseiten erstellen wie die Profis!
Seite 94
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Zum Beispiel könnten Sie drei separaten RealPlayer Objekte in Ihre Seite integrieren, welche unterschiedliche Einstellungen beinhalten. Durch die Verwendung von drei (oder mehr) verschiedenen Objekten, können Sie die Größe der einzelnen Steuerelemente separat eingestellt. Um die Kontrollen zusammenzufügen, vergeben Sie in jedes RealPlayer-Objekt denselben Konsolennamen oder verwenden Sie eine der folgenden vordefinierten Namen : Tabelle 3: Konsolennamen im RealPlayer-Objekt
Konsolenname _Master
_unique
Bedeutung Verbindet die Kontrolle zu allen anderen Embedded- Steuerelemente auf der Seite. Es werden keine anderen eingebetteten Instanzen berücksichtigt. Zeigt das grundlegende RealPlayer Bedienfeld.
Wenn Sie beispielsweise zwei unabhängige Videoclips in Ihre Seite einfügen wollen, dann könnte diese jeweils einen anderen Konsolennamen tragen (Bsp. Video1 und Video2). Um eine Mediendatei abzuspielen muss der Endbenutzer ein RealPlayer Plug-in in seinem Browser installiert haben! Anderenfalls ist die Wiedergabe der Mediendatei nicht möglich. In vielen Fällen ist das Flash Movie Player – Objekt wahrscheinlich eine sicherere Wahl, weil es ein gemeinsames Video-Format für das Internet ist.
6.5.8 YouTube Ohne Frage gehört YouTube wohl zu einer der bekanntesten Video-Plattformen die es gibt. Die Funktionen der Plattform selbst sind recht beeindruckend, was die einfache Bearbeitung der eigenen Videos angeht.
Webseiten erstellen wie die Profis!
Seite 95
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Sie haben im WYSIWYG Web Builder die Möglichkeit, auf einfachste Art und Weise ein YouTube-Video in Ihre Website einzubinden. Wählen Sie dazu das Objekt in der linken Werkzeugleiste aus und ziehen Sie dieses im Arbeitsbereich auf. Danach sehen Sie schon direkt den Player im Arbeitsbereich. Klicken Sie diesen mit der linken Maustaste zweimal kurz hintereinander an, um die Eigenschaften des Objekts zu öffnen.
Abbildung 92: Eigenschaften des YouTube-Objekts
Im Feld URL kopieren bzw. fügen Sie die URL zu einem YouTube-Video ein. Siehe Kapitel „6.5.8.2 Wo finde ich die YouTube URL zum Einfügen“. Im Auswahlfeld „Größe“ haben Sie die Möglichkeit, vordefinierte Größen für die Anzeige Ihrer Videos auszuwählen oder aber Sie lassen die Einstellungen auf „Benutzerdefiniert“ bestehen. Das Video wird dann in der Größe des aufgezogenen YouTube-Objekts angezeigt.
Webseiten erstellen wie die Profis!
Seite 96
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Als „Player-Version“ ist die Version 3 vordefiniert. Einige neue Features (wie die neue Theme-Optionen) erfordern Version 3, aber wenn Sie eine ältere Version des Players laden möchten, können Sie hier eine 1 oder 2 eintragen (oder lassen Sie das Feld komplett leer). Die darunterliegenden Funktionen sind selbsterklärend. Sollten Sie in den Eigenschaften „Stil“ die Option „Rahmen anzeigen“ verwenden wollen, dann müssen Sie oberhalb die Option „Unterstützung von Flash und HTML5Video“ deaktivieren, da die Verwendung von Rahmen mit der genannten Option verworfen wurde.
6.5.8.1 Video in Lightbox anzeigen In den Eigenschaften des YouTube-Objekts finden Sie oben im Fenster einen zweiten Reiter oder Tab mit der Aufschrift „Lightbox“. Hier haben Sie die Möglichkeit sich das YouTube-Video innerhalb einer Lightbox (Fancybox) anzeigen zu lassen.
Webseiten erstellen wie die Profis!
Seite 97
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 93: Eigenschaften des YouTube Objekts – Lightbox
Als Erstes müssen Sie ein Häkchen im Feld „Inhalte innerhalb der Lightbox anzeigen…“ setzen. Erst dann ist das Objekt in der Lage das Video innerhalb einer Lightbox anzuzeigen. Wenn Sie die Anzeige innerhalb der Lightbox wünschen, dann müssen Sie anschließend ein Vorschaubild auswählen. Das Vorschaubild wird dann direkt nach dem Aufrufen der Website angezeigt. Das Video selbst wird erst angezeigt, wenn der Endbenutzer auf das Vorschaubild klickt. Im Feld „Titel“ können Sie einen Titel des Videos eingeben. Dieser wird in der Lightbox angezeigt. Sie können das Feld auch leer lassen, wenn Sie keinen Titel anzeigen möchten. Im Bereich „Breite“ und „Höhe“ stellen Sie bitte die Anzeigegröße des Videos innerhalb der Lightbox ein.
Webseiten erstellen wie die Profis!
Seite 98
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Über die Schaltfläche „Optionen“ können Sie weitere Einstellungen an der Lightbox vornehmen.
Abbildung 94: Lightbox Optionen des YouTube-Objekts
Jede Option muss in einer neuen Zeile stehen und durch ein Komma voneinander getrennt sein (siehe Beispiel). 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'speedIn' : 600, 'speedOut' : 200, 'overlayShow' : true, 'overlayColor' : '#FF0000'
Welche Möglichkeiten bzw. welche Optionen Ihnen hier zur Verfügung stehen, entnehmen Sie dem folgenden Internetlink: http://fancybox.net/api
6.5.8.2 Wo finde ich die YouTube URL zum Einfügen Zuerst müssen Sie sich ein Video bei YouTube aussuchen. Nachdem Sie das gesuchte Video gefunden haben und das Video angezeigt wird, klicken Sie im
Webseiten erstellen wie die Profis!
Seite 99
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
unteren Menü auf „Teilen“ und kopieren die dort angezeigte URL mit den Tasten STRG + C.
Abbildung 95: YouTube Website mit ausgewähltem Video zum Teilen
Diese soeben in die Zwischenablage kopierte URL fügen Sie anschließend in den Eigenschaften des YouTube-Objekts in das Feld „URL“ ein (siehe Kapitel „6.5.8 YouTube“).
Webseiten erstellen wie die Profis!
Seite 100
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.6 Toolbox: Navigation Ohne eine vernünftige Navigation kann eine Website kaum funktionieren. Der WYSIWYG Web Builder bietet von Haus aus eine Vielzahl an Navigationsmöglichkeiten. Sie als Endanwender haben hier die „Qual der Wahl“. Entscheide Sie sich für ein CSS-Menü, welches auf Style-Sheets aufgebaut ist oder doch lieber für ein Slide-Menü oder gar doch für eine ganz andere Möglichkeit? Der WYSIWYG Web Builder lässt Sie hier nicht im Stich. Die Toolboxrubrik „Navigation“ bietet Ihnen schier alles, was Sie benötigen werden. Ihrer kreativen Seite sind kaum grenzen gesetzt. In den nachfolgenden Kapiteln werden wir Ihnen die einzelnen Menüs vorstellen und die Verwendung sowie Anpassung erklären. Bitte haben Sie dafür Verständnis, dass die einzelnen Kapitel stellenweise recht lang werden. Dies liegt an den mannigfaltigen Möglichkeiten der einzelnen Menüs.
Abbildung 96: Eine kleine Übersicht der Navigationsmöglichkeiten
Webseiten erstellen wie die Profis!
Seite 101
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.6.1 CSS-Menü Das CSS-Menü basiert auf CSS-Stylesheets und kommt daher vollkommen ohne grafische Elemente aus. CSS-Stylesheets werden von allen bekannten Browsern unterstützt, so dass Sie keine bösen Überraschungen in der Darstellung erleben werden. Das CSS-Menü kann vertikal sowie horizontal eingesetzt werden. Untermenüs können ebenso realisiert werden. Das Aussehen und die Größe der Menüpunkte kann vollkommen an Ihre Bedürfnisse angepasst werden. Um das CSS-Menü verwenden zu können, müssen Sie dieses in der linken Werkzeugleiste auswählen und mit der Maus im Arbeitsbereich aufziehen. Danach wird Ihnen sofort das Menü in horizontaler Darstellung angezeigt. Um Einstellungen am Aussehen oder der Darstellung (horizontal/vertikal) an dem Menü vorzunehmen, müssen Sie dessen Eigenschaften aufrufen. Klicken Sie dazu mit einem Doppelklick auf das soeben aufgezogene Menü. Es wird der Eigenschaften-Dialog geöffnet. Zuerst werden wir in dem Dialog das Hinzufügen von Menüpunkten und den Untermenüpunkten beschreiben, bevor wir auf die Einstellungen des Aussehens der einzelnen Menüpunkte eingehen.
Webseiten erstellen wie die Profis!
Seite 102
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 97: Eigenschaften des CSS-Menü
Im Vorfeld werden Sie schon vier vordefinierte Menüpunkte zur besseren Darstellung des Menüs finden. Diese können Sie entweder direkt löschen oder über die Funktion „Bearbeiten“ entsprechend verändern. Zum Entfernen der einzelnen Punkte klicken Sie jeweils den zu löschenden Menüpunkt an und klicken danach einmal auf die Schaltfläche (rechts) „Entfernen“. Bitte beachten Sie, dass einmal entfernte Menüpunkte nicht wiederhergestellt werden können. Diese müssten bei einem versehentlichem Löschen, erneut angelegt werden. Webseiten erstellen wie die Profis!
Seite 103
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Auf der rechten Seite finden Sie die links abgebildeten Schaltflächen. Diese werden von Ihnen benötigt, um einzelne Menüpunkte oder Untermenüpunkte anzulegen, zu bearbeiten oder zu löschen. Abbildung CSS-Menü arbeiten
98: be-
Beachten Sie bitte, dass zum Bearbeiten oder zum Entfernen einzelner Menüpunkte, der jeweilige Menüpunkt markiert resp. Ausgewählt sein muss.
6.6.1.1 Hinzufügen Um einen Menüpunkt dem CSS-Menü hinzuzufügen, klicken Sie bitte auf die rechte Schaltfläche im Dialogfenster der Eigenschaften mit der Aufschrift „Hinzufügen“. Im Anschluss wird der nachfolgende Dialog geöffnet:
Abbildung 99: Dialog zum Hinzufügen von Menüpunkten
Siehe Kapitel „6.6.10.1 Hinzufügen eines Menüpunkts“. Wenn Sie einen Untermenüpunkt anlegen wollen, dann müssen Sie, bevor Sie auf die Schaltfläche „Hinzufügen“ klicken, zuerst den Menüpunkt anklicken, welchem der Untermenüpunkt zugeteilt werden soll.
Webseiten erstellen wie die Profis!
Seite 104
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.6.1.2 Bearbeiten Hier öffnet sich derselbe Dialog wie beim Hinzufügen von neuen Menüpunkten, allerdings sind alle Felder im Dialog schon mit den Daten, des zum bearbeitenden Menüpunkts belegt.
6.6.1.3 Entfernen Mit dieser Schaltfläche haben Sie die Möglichkeit, einen Menüpunkt zu entfernen. Vorsicht!!! Es erscheint kein weiterer Dialog, der Sie fragt, ob Sie den Menüpunkt wirklich löschen wollen. Bitte prüfen Sie vor dem löschen eines Menüpunktes, ob dieser evtl. Untermenüpunkte enthält. Sollte der Menüpunkt Untermenüpunkte enthalten und Sie den Hauptmenüpunkt löschen, dann sind auch sofort alle Untermenüpunkte gelöscht. Ein einmal gelöschter Menüpunkt kann nicht wiederhergestellt werden. Sollte er versehentlich gelöscht worden sein und es liegt Ihnen kein Backup des Projektes vor, dann bleibt Ihnen nichts anderes übrig, als den Menüpunkt erneut anzulegen.
Die Schaltflächen „Nach oben“ und „Nach unten“ schieben eben den markierten Menüpunkt in die eine oder andere Richtung. Die Schaltflächen „“ bringen einen Menüpunkt in ein Untermenü herein oder heraus. Sie haben auch die Möglichkeit, die Menüpunkte anhand Ihrer angelegten Seiten generieren zu lassen. Diese automatisch generierten Menüpunkte können Sie aktivieren indem Sie ein Häkchen in das Feld „Mit Site-Manager synchronisieren“. Seiten, die nicht im Menü erscheinen sollen, müssen Sie dann in den Seiteneigenschaften der jeweiligen Seiten definieren. Im rechten Feld „Ziel“ können Sie festlegen, wie die Menüpunkte geöffnet werden sollen. Hier eine kurze Beschreibung der Ziele: Webseiten erstellen wie die Profis!
Seite 105
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Tabelle 4: Bedeutung der Link-Ziele
Art
Bedeutung
_blank
Link wird in einem neuen Browserfenster geöffnet.
_self
Link wird im selben Browserfenster/Frame geöffnet.
_parent
Link wird im Elternframe geöffnet.
_top
Link bricht bei verschachtelten Framesets aus den Frames aus.
Wenn Sie ein Häkchen im Feld „Stil des Hover-Status auf der aktuellen Seite anzeigen“ setzen, dann wird der Menüpunkt im Hover-Status auf der verlinkten Seite angezeigt. Diese Option funktioniert nur außerhalb von Master-Objekten!!!
6.6.1.4 Den Stil des Menüs ändern/anpassen Um das Aussehen des CSS-Menüs an Ihre Website anzupassen, muss der Stil entsprechend Ihren Bedürfnissen angepasst werden. Um dies zu bewerkstelligen, rufen Sie bitte den Eigenschaften-Dialog des CSS-Menüs mit einem Doppelklick auf das Menü (Arbeitsfläche) auf. Wechseln Sie im oberen Bereich des Dialogs in den Reiter / Tab mit der Aufschrift „Stil“. Anschließend finden Sie alle Einstellungsmöglichkeiten des CSS-Menüs in Sachen „Aussehen“ vor.
Webseiten erstellen wie die Profis!
Seite 106
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 100: Eigenschaften des CSS-Menü – Stil
Die Ansicht des Dialogs ist in drei Teile aufgeteilt. Im oberen Bereich finden Sie die Einstellungen für das Hauptmenü danach die Einstellungen für die Untermenüpunkte. Im dritten Teil des Dialogs finden Sie die Vorschau des Menüs. Es handelt sich um eine Live-Vorschau, welche auch funktioniert, wenn Sie mit der Maus über die Menüpunkte fahren.
Webseiten erstellen wie die Profis!
Seite 107
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
I.
Hauptmenü
In diesem Bereich wird das Aussehen des Hauptmenüs festgelegt. Zuvor jedoch haben Sie hier die Möglichkeit, die Ausrichtung des Menüs festzulegen. Das CSS-Menü ist zuallererst als horizontales Menü eingestellt. Wenn Sie das CSSMenü jedoch vertikal nutzen wollen, dann stellen Sie dies im Dropdown-Feld „Layout-Modus“ um. Im Feld „Layout-Modus“ kann die Ausrichtung des Menüs (horizontal oder vertikal) festgelegt werden. Im Feld „Ausrichtung“ legen Sie die Ausrichtung des Menüs fest. Beispielsweise könnten Sie hier eine zentrierte Ausrichtung wählen, wenn das Menü bei Ihnen zentriert ausgerichtet sein soll. Die Button-Größe können Sie entweder manuell in den darunter liegenden Eingabefeldern bestimmen oder aber Sie lassen die Einstellungen auf „variabel“ stehen, dann paßt sich die Größe der Buttons an die Beschriftung derselben an. Sollten Sie ein vertikales Menü erstellen, dann eignet sich die Einstellung „variabel“ wahrscheinlich nicht, da die Buttons dann alle unterschiedlich groß sind. In einem horizontalen Menü ist dies jedoch gängige Praxis. In den weiteren Reitern / Tabs des Hauptmenüs finden Sie die jeweiligen Einstellungen wie z. B. Hintergrundfarben etc. Die Bezeichnungen der jeweiligen Felder sollten selbsterklärend sein. Nutzen Sie immer die Vorschau im unteren Bereich des Eigenschaften-Dialogs um zu testen, wie sich das Menü beispielsweise bei einem Mouse-Over verhält.
II.
Untermenü
Hier finden Sie dieselben Einstellungen wie auch im Hauptmenü allerdings auf die Untermenüpunkte bezogen. Die hier getätigten Einstellungen werden auch auf alle verschachtelten Untermenüpunkte bezogen.
Webseiten erstellen wie die Profis!
Seite 108
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
III.
Beispiel wie ein Menü aussehen könnte
Abbildung 101: Beispiel eines horizontalen CSS-Menüs
Die Farben sind bewusst grell gewählt, um die unterschiedliche Darstellung besser zu verdeutlichen. Grundsätzlich wird Ihnen beim Designen des Menüs kein Mensch helfen können, da hier immer wieder der subjektive Geschmack gefragt ist. Der WYSIWYG Web Builder versteht sich als das Handwerkszeug, was Sie daraus machen, liegt ganz in Ihrem ermessen.
6.6.2 Gehe zu-Menü Bei diesem Menü handelt es sich um ein Menü, welches im Grunde genommen aus zwei Formularelementen besteht. Es besteht aus einem Auswahlfeld und einer Schaltfläche mit der die Auswahl letztendlich bestätigt resp. aufgerufen wird. Um das Menü in Ihre Seite zu integrieren, wählen Sie dieses in der linken Werkzeugleiste aus und ziehen es im Arbeitsbereich auf. Anschließend öffnen Sie die Eigenschaften des Menüs mit einem Doppelklick auf das aufgezogene Menüelement.
Webseiten erstellen wie die Profis!
Seite 109
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 102: Eigenschaften des Gehe zu-Menüs
Sie haben hier die Möglichkeit über die Schaltflächen auf der rechten Seite des Dialogfensters neue Menüpunkte hinzuzufügen, bestehende Menüpunkte zu bearbeiten oder aber vorhandene Menüpunkte zu entfernen. Um Menüpunkte hinzuzufügen, klicken Sie bitte auf die Schaltfläche „Hinzufügen…“. Siehe Kapitel „6.6.10.1 Hinzufügen eines Menüpunkts“. Mit den Schaltflächen „Nach oben“ und „Nach unten“ können Sie die einzelnen Menüpunkte im Menü selber anordnen. Sollten Sie das Menü automatisch mit dem Site-Manager synchronisieren lassen wollen, dann setzen Sie bitte ein Häkchen in das Feld „Mit Site-Manager synchronisieren“. Seiten, die in diesem Fall nicht im Menü auftauchen sollen, müssen über die jeweiligen Seiteneigenschaften ausgeschlossen werden. Webseiten erstellen wie die Profis!
Seite 110
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Im Bereich „Stufen“ haben Sie die Möglichkeit, bei verschachtelten Menüs eine Ebene zu wählen, die verwendet werden soll. Im Dropdown-Feld „Ziel“ bestimmen Sie, in welchem Fenster oder Frame der Link geöffnet werden soll. Siehe Kapitel „6.6.10.2 Linkverweise resp. Ziele“. Im Bereich „Verhalten“ geben Sie in das Feld „Ausgangstext“ den Text ein, welcher direkt nach dem Laden der Seite in dem Auswahlfeld zu sehen sein soll. Der „Button-Text“ beinhaltet den Text, der nachher auf der Schaltfläche stehen soll. Beispielsweise würde hier ein „Los“ oder „OK“ klar definieren, dass nach der Auswahl noch auf den Button geklickt werden muss. Sollten Sie das Auswahlmenü ohne eine Schaltfläche benutzen wollen, die nach der Auswahl des Menüpunkts gedrückt werden muss, dann setzen Sie ein Häkchen in das Feld „Keinen Button verwenden […]“. Der Link, welcher hinter dem Menüpunkt steckt, wird dann direkt nach der Auswahl aufgerufen.
6.6.2.1 Anpassung des Stils Auch dieses Menü kann Ihrem Design angepasst werden. Da es sich um Formularelemente handelt, erfolgt die Anpassung über CSS. Wählen Sie im Eigenschaften-Dialog des Menüs den oberen Reiter / Tab „Stil“ aus. Sie können hier auf einen Stil, welchen Sie vielleicht schon zuvor im Stil-Manager für Ihre Formularelemente erstellt hatten zurückgreifen oder aber Sie verwenden die darunterliegenden Felder um einen eigenen Stil für dieses Element festzulegen. Rechts sehen Sie ein grelles Beispiel, wie ein angepasstes Menü aussehen könnte.
Abbildung 103: Beispiel eines Gehe zu-Menüs
Webseiten erstellen wie die Profis!
Seite 111
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.6.3 Mega-Menü Bei dem Mega-Menü handelt es sich um ein erweitertes Dropdown-Menü, welches die Untermenüpunkte in einzelnen Kategorien darstellen kann. Dazu haben Sie die Möglichkeit, zur folgenden Darstellung: Tabelle 5: Darstellung im Mega-Menü
Art
Bedeutung
Columns only
Nur Spalten
Rows only
Nur Zeilen
2 columns
2 Spalten
3 columns
3 Spalten
4 columns
4 Spalten
Simple menu
Einfache Menüführung
Button only
Nur Schaltflächen ohne Untermenüs Das komplette Mega-Menü verwendet das jQuery-Framework welches vom Design im „Theme-Manager“ des WYSIWYG Web Builder angepasst werden kann. Nachdem Sie das Mega-Menü im Arbeitsbereich aufgezogen haben, rufen Sie bitte die Eigenschaften des Objekts auf, um das Menü mit Menüpunkten zu füllen.
Nachdem Sie den Eigenschaften-Dialog aufgerufen haben, finden Sie auf der rechten Seite drei Schaltflächen. Abbildung 104: Eigenschaften des Mega-Menü Über diese können Sie Menüpunkte hinObjekts zufügen, vorhandene Menüpunkte bearbeiten oder löschen. Darunter finden Sie zwei Schaltflächen zum Verschieben der angelegten Menüpunkte. Im oberen Reiter / Tab „Stil“ haben Sie noch kleinen Einfluss auf die
Webseiten erstellen wie die Profis!
Seite 112
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Schriftart und div. Abstände der Menüs. Für die farbliche Gestaltung verwenden Sie bitte den „Theme-Manager“.
6.6.3.1 Hinzufügen von Menüpunkten und Kategorien Um Menüpunkte, Untermenüpunkte und Kategorien im Mega-Menü anzulegen, klicken Sie bitte im Eigenschaften-Dialog des Objekts auf die Schaltfläche mit der Aufschrift „Hinzufügen…“. Es öffnet sich der nachfolgende Dialog:
Abbildung 105: Hinzufügen-Dialog des Mega-Menü Objekts
In der Rubrik „Allgemein“ haben Sie die Möglichkeit, die Beschriftung Ihres Menüpunkts einzugeben und weiter die Auswahl des Menü-Layouts. Die LayoutMöglichkeiten wurden weiter oben schon beschrieben.
Webseiten erstellen wie die Profis!
Seite 113
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Nachdem Sie sich für ein Layout des Menüpunkts entschieden haben (jeder Menüpunkt darf ein anderes Layout verwenden) können Sie im Bereich „Einträge“ Untermenüpunkte hinzufügen. Sollten Sie Kategorien anlegen wollen, dann wählen Sie die entsprechende Schaltfläche auf der rechten Seite aus. Wenn die Untermenüpunkte des Mega-Menüs in Spalten angezeigt werden sollen, dann müssen Sie für jede anzuzeigende Spalte eine Kategorie anlegen. Über die Schaltfläche „Hinzufügen…“ werden die Menüpunkte hinzugefügt (siehe Kapitel „6.6.10.1 Hinzufügen eines Menüpunkts“).
6.6.3.2 Ansicht des Mega-Menüs Nachfolgend die Darstellungsmöglichkeiten des Mega-Menüs.
I.
Nur Spalten
Abbildung 106: Mega-Menü -> Nur Spalten
Webseiten erstellen wie die Profis!
Seite 114
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
II.
Nur Zeilen
Abbildung 107: Mega-Menü -> Nur Zeilen
III.
2 Spalten
Abbildung 108: Mega-Menü -> 2 Spalten
IV.
Einfache Menü
Abbildung 109: Mega-Menü -> Einfaches Menü
Webseiten erstellen wie die Profis!
Seite 115
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
6.6.4 Menüleiste Die Menüleiste besteht aus einfachen Menüpunkten sowie Submenüs, welche unter den gewünschten Menüpunkten ausgeklappt werden können. Die Menüleiste kann vertikal und horizontal angezeigt werden und sie basiert auf CSSStylesheets und, wenn gewünscht, auch auf dem jQuery-Framework. Durch die hohen Anpassungsmöglichkeiten ist diese Menüart in div. Webseiten einsetzbar. Abbildung 110: Menüleiste
6.6.4.1 Hinzufügen von Menüpunkten und Submenüs Um einzelne Menüpunkte der Menüleiste hinzuzufügen, rufen Sie bitte die Einstellungen des Menüs auf. Klicken Sie dazu das Objekt „Menüleiste“ doppelt mit der linken Maustaste an.
Webseiten erstellen wie die Profis!
Seite 116
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 111: Eigenschaften des Menüleisten Objekts
Um einen Menüpunkt nun einzufügen bzw. anzulegen, klicken Sie auf die Schaltfläche „Hinzufügen“ auf der rechten Seite des Eigenschaften-Dialogs. Beachten Sie zum Einfügen bitte das Kapitel „6.6.10 Standard-Menü-Dialoge“. Um ein Submenü anzulegen, klicken Sie bitte auf den Menüpunkt, der ein solches Submenü erhalten soll und klicken im Anschluss auf „Hinzufügen“. Der neue Menüpunkt wird dann direkt als Submenüpunkt angelegt.
Webseiten erstellen wie die Profis!
Seite 117
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
„Teiler einfügen“ können Sie immer dann anklicken, wenn ein Teiler zwischen den einzelnen Menüpunkten erscheinen soll. Ein Teiler dient nur der Visualisierung und ist daher nicht anklickbar. Abbildung 112: Menüleiste mit Teilern
6.6.4.2 Verschieben bzw. Anordnen von Menüpunkten Im Eigenschaften-Dialog des Objekts „Menüleiste“ haben Sie die Möglichkeit Menüpunkte im Nachhinein anzuordnen bzw. zu verschachteln. Um die Reihenfolge eines Menüpunkts zu verändern, klicken Sie bitte den entsprechenden Menüpunkt an und verschieben diesen durch die Schaltflächen „Nach oben“ und „Nach unten“. Sollten Sie einen Menüpunkt einem Submenü zuteilen wollen, dann klicken Sie den entsprechenden Menüpunkt an und verschieben diesen durch die Schaltfläche „>>“ in ein Submenü. Mit der Schaltfläche „ FTP-Engine .................................................................................................. 12 Abbildung 8: Der WYSIWYG Web Builder .............................................................................................. 13 Abbildung 9: Das Ribbon-Menü ............................................................................................................. 13 Abbildung 10: Menüpunkt «Datei» ......................................................................................................... 16 Abbildung 11: Toolbox Standard ............................................................................................................ 20 Abbildung 12: Aufzählungs-Dialog ......................................................................................................... 21 Abbildung 13: Eine Aufzählung ............................................................................................................... 21 Abbildung 14: Horizontale Linien ............................................................................................................ 22 Abbildung 15: Einstellungen der HR-Linie .............................................................................................. 22 Abbildung 16: HTML-Objekt ..................................................................................................................... 23 Abbildung 17: Dialog des HTML-Objekts ............................................................................................... 23 Abbildung 18: Inlineframe Objekt .......................................................................................................... 24 Abbildung 19: Einstellungen Inlineframe 1. Tab ................................................................................... 24 Abbildung 20: Laufschrift Objekt ............................................................................................................ 25 Abbildung 21: Einstellungen der Laufschrift .......................................................................................... 26 Abbildung 22: Tabellen Objekt ............................................................................................................... 27 Abbildung 23: Text Objekt........................................................................................................................ 28 Abbildung 24: Ribbon Schrift-Werkzeuge ............................................................................................. 28 Abbildung 25: Toolbox Bilder ................................................................................................................... 29 Abbildung 26: Dateiauswahldialog ....................................................................................................... 29 Abbildung 27: Eingefügtes Bild mit Anfasspunkten ............................................................................. 30 Abbildung 28: Foto-Galerie Objekt ........................................................................................................ 30 Abbildung 29: Dialog zum Objekt Foto-Galerie .................................................................................. 31 Abbildung 30: Dialog des RollOver Objektes ....................................................................................... 33 Abbildung 31: MouseOver-Animation "Slide left" ................................................................................ 34 Abbildung 32: Dialog vom RollOver-Text Objekt ................................................................................. 35 Abbildung 33: Bild mit RollOver-Text ...................................................................................................... 36 Abbildung 34: Dialog des Slide-Show Effekts ....................................................................................... 37 Abbildung 35: Toolbox Zeichnung.......................................................................................................... 39 Abbildung 36: Banner Objekt .................................................................................................................. 39 Abbildung 37: Eigenschaften des Banner Objekts.............................................................................. 40 Abbildung 38: Clip Art Dialog .................................................................................................................. 41 Abbildung 39: Verschiedene Darstellungsmöglichkeiten von Clip Art ........................................... 42 Abbildung 40: Geschlossene Kurve Objekt .......................................................................................... 43 Abbildung 41: Geschlossene Kurve mit linker Maustaste aufgezogen ........................................... 43 Abbildung 42: Text-Kurven Objekt .......................................................................................................... 44 Abbildung 43: Eigenschaften der Text-Kurve ....................................................................................... 44 Abbildung 44: Linien Objekt .................................................................................................................... 45 Abbildung 45: Eigenschaften der Linien ............................................................................................... 45 Webseiten erstellen wie die Profis!
Seite 166
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 46: Polygon Objekt ................................................................................................................ 46 Abbildung 47: Scribble Objekt ................................................................................................................ 46 Abbildung 48: Form Objekt ...................................................................................................................... 47 Abbildung 49: Formen .............................................................................................................................. 47 Abbildung 50: Eigenschaften Form Objekt........................................................................................... 48 Abbildung 51: Eigenschaften Form Objekt (Text)................................................................................ 49 Abbildung 52: Formen als Muster (Beispiele)........................................................................................ 50 Abbildung 53: Aufgezogenes Objekt Textart ....................................................................................... 50 Abbildung 54: Eigenschaften Objekt Textart ....................................................................................... 51 Abbildung 55: Galerie Objekt Textart .................................................................................................... 52 Abbildung 56: Erstelltest Textart I............................................................................................................. 53 Abbildung 57: Erstelltest Textart II ............................................................................................................ 53 Abbildung 58: Formularfelder .................................................................................................................. 54 Abbildung 59: WWB Formular-Assistent 1 von 4 ................................................................................... 56 Abbildung 60: WWB Formular-Assistent 2 von 4 ................................................................................... 57 Abbildung 61: WWB Formular-Assistent 3 von 4 ................................................................................... 57 Abbildung 62: Hinzufügen von Formularobjekten ............................................................................... 58 Abbildung 63: WWB Formular-Assistent 4 von 4 ................................................................................... 60 Abbildung 64: Dialog PHP-Erinnerung ................................................................................................... 62 Abbildung 65: Ein fertiges Formular ........................................................................................................ 62 Abbildung 66: Eigenschaften des erweiterten Buttons ...................................................................... 64 Abbildung 67: Button-Typ ......................................................................................................................... 64 Abbildung 68: OnClick Aktionen des erweiterten Buttons ................................................................ 65 Abbildung 69: OnClick Aktion LINK ........................................................................................................ 66 Abbildung 70: Eigenschaften Button ..................................................................................................... 67 Abbildung 71: Eigenschaften des Captcha Objekts .......................................................................... 68 Abbildung 72: Eigenschaften des Captcha Objekts – Validieren ................................................... 70 Abbildung 73: Eigenschaften des Markierfeld Objekts ...................................................................... 71 Abbildung 74: Eigenschaften des Auswahlfeld Objekts – Allgemein .............................................. 72 Abbildung 75: Auswahlfeld - Punkte ...................................................................................................... 73 Abbildung 76: Auswahlfeld - Punkt eintragen ..................................................................................... 74 Abbildung 77: Auswahlfeld - vordefinierte Werte ............................................................................... 74 Abbildung 78: Eigenschaften des Eingabefeld-Objekts .................................................................... 76 Abbildung 79: Eigenschaften des Optionsfeld-Objekts ..................................................................... 78 Abbildung 80: Eigenschaften des Objekts Flash.................................................................................. 80 Abbildung 81: Eigenschaften des Objekts Flash Video Player ......................................................... 83 Abbildung 82: Anzeige Optionen des Objekts Flash Video Player .................................................. 84 Abbildung 83: Aussehen des Objekts Flash Video Player verändern .............................................. 85 Abbildung 84: Eigenschaften des Objekts HTML5 Audio ................................................................... 86 Abbildung 85: Steuerung des Objekts HTML5 Audio im Browser ...................................................... 87 Abbildung 86: Eigenschaften des Objekt Java ................................................................................... 88 Abbildung 87: Auswahl-Dialog des OLE-Objekts ................................................................................. 90 Abbildung 88: Tabelle als OLE-Objekt ................................................................................................... 90 Abbildung 89: Tabellenobjekt verlassen ............................................................................................... 91 Abbildung 90: Eigenschaften des Quicktime Objekts ........................................................................ 92 Abbildung 91: Eigenschaften des Real Player Objekts ...................................................................... 93 Abbildung 92: Eigenschaften des YouTube-Objekts .......................................................................... 96 Webseiten erstellen wie die Profis!
Seite 167
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 93: Eigenschaften des YouTube Objekts – Lightbox ....................................................... 98 Abbildung 94: Lightbox Optionen des YouTube-Objekts .................................................................. 99 Abbildung 95: YouTube Website mit ausgewähltem Video zum Teilen .......................................100 Abbildung 96: Eine kleine Übersicht der Navigationsmöglichkeiten .............................................101 Abbildung 97: Eigenschaften des CSS-Menü .....................................................................................103 Abbildung 98: CSS-Menü bearbeiten ..................................................................................................104 Abbildung 99: Dialog zum Hinzufügen von Menüpunkten..............................................................104 Abbildung 100: Eigenschaften des CSS-Menü – Stil ..........................................................................107 Abbildung 101: Beispiel eines horizontalen CSS-Menüs ...................................................................109 Abbildung 102: Eigenschaften des Gehe zu-Menüs ........................................................................110 Abbildung 103: Beispiel eines Gehe zu-Menüs ..................................................................................111 Abbildung 104: Eigenschaften des Mega-Menü Objekts................................................................112 Abbildung 105: Hinzufügen-Dialog des Mega-Menü Objekts ........................................................113 Abbildung 106: Mega-Menü -> Nur Spalten ......................................................................................114 Abbildung 107: Mega-Menü -> Nur Zeilen..........................................................................................115 Abbildung 108: Mega-Menü -> 2 Spalten ..........................................................................................115 Abbildung 109: Mega-Menü -> Einfaches Menü ..............................................................................115 Abbildung 110: Menüleiste ....................................................................................................................116 Abbildung 111: Eigenschaften des Menüleisten Objekts ................................................................117 Abbildung 112: Menüleiste mit Teilern .................................................................................................118 Abbildung 113: Gegenüberstellung "Volle Breite verwenden" False und True ............................119 Abbildung 114: Eigenschaften-Dialog des Navigationsleisten Objekts ........................................120 Abbildung 115: Stil des Menüs im Eigenschaften-Dialog .................................................................121 Abbildung 116: Normal und mit jQuery ...............................................................................................122 Abbildung 117: Darstellung des Site-Tree Objekts .............................................................................123 Abbildung 118: Eigenschaften des Objekts Slide-Menü ..................................................................124 Abbildung 119: Dialog um einen Ordner hinzuzufügen ...................................................................125 Abbildung 120: Eigenschaften des Slide-Menüs (Stil) .......................................................................126 Abbildung 121: Das Tab-Menü..............................................................................................................127 Abbildung 122: Eigenschaften des Tab-Menü Objekts ....................................................................127 Abbildung 123: Eigenschaften des Tab-Menüs (Stil).........................................................................128 Abbildung 124: Eigenschaften des Text-Menü Objekts ...................................................................129 Abbildung 125: Eigenschaften des Text-Menüs (Stil) ........................................................................130 Abbildung 126: Menü-Punkt bearbeiten ............................................................................................131 Abbildung 127: Eigenschaften des Blog Objekts ..............................................................................137 Abbildung 128: Objekt Karussell mit aktiven Rahmen ......................................................................139 Abbildung 129: Eigenschaften des Objekts Karussell .......................................................................140 Abbildung 130: Aktivierung des Master-Frames ................................................................................141 Abbildung 131: Eigenschaften des Objekts Inhaltsbereich Master-Frame ..................................142 Abbildung 132: Eigenschaften des Objekts Datei-Publisher ...........................................................143 Abbildung 133: Eigenschaften des Objekts Ebene...........................................................................148 Abbildung 134: Eigenschaften des Objekts Master-Objekt ............................................................149 Abbildung 135: Eigenschaften des Objekts News Feed Ticker .......................................................151 Abbildung 136: Datenquelle des Objekts News Feed Ticker ..........................................................151 Abbildung 137: Gebrauchsfertige JavaScripts einfügen ................................................................153 Abbildung 138: Eigenschaften des Objekts RSS-Feed ......................................................................155 Abbildung 139: Neue Schlagzeilen in den Feed einfügen ..............................................................156 Webseiten erstellen wie die Profis!
Seite 168
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
Abbildung 140: Schlagzeile bearbeiten ..............................................................................................157 Abbildung 141: Optionale Einstellungen des RSS-Feed Objekts.....................................................158 Abbildung 142: Eigenschaften des Website-Suche Objekts ...........................................................159 Abbildung 143: Eigenschaften des Objekts Timer .............................................................................160 Abbildung 144: Ereignisse des Objekts Timer ......................................................................................161
Webseiten erstellen wie die Profis!
Seite 169
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
9 Tabellenverzeichnis Tabelle 1: Formular-Objekte .................................................................................................................... 58 Tabelle 2: Befehle zur Steuerung des RealPlayer Objekts .................................................................. 93 Tabelle 3: Konsolennamen im RealPlayer-Objekt ............................................................................... 95 Tabelle 4: Bedeutung der Link-Ziele .....................................................................................................106 Tabelle 5: Darstellung im Mega-Menü ................................................................................................112 Tabelle 6: Modi des Slide-Menüs...........................................................................................................125 Tabelle 7: Verlinken mit... ........................................................................................................................132 Tabelle 8: Zielfenster oder Frame ..........................................................................................................134 Tabelle 9: Linkverweise resp. Ziele (target) .........................................................................................134 Tabelle 10: Überfließen in Ebenen ........................................................................................................145 Tabelle 11: Modi der Ebenen ................................................................................................................145 Tabelle 12: Optionale Einstellungen zu den Modi der Ebenen.......................................................146 Tabelle 13: Anzeigetypen des Objekts News Feed Ticker ...............................................................152
Webseiten erstellen wie die Profis!
Seite 170
WYSIWYG Web Builder 9 (deutsche Hilfe als PDF)
10 Impressum Das Werk einschließlich aller Inhalte ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Nachdruck oder Reproduktion (auch auszugsweise) in irgendeiner Form (Druck, Fotokopie oder anderes Verfahren) sowie die Einspeicherung, Verarbeitung, Vervielfältigung und Verbreitung mithilfe elektronischer Systeme jeglicher Art, gesamt oder auszugsweise, ist ohne ausdrückliche schriftliche Genehmigung des Autors untersagt. Rechte Dritter sind entsprechend gekennzeichnet und in der Quellenangabe gelistet. Alle Übersetzungsrechte vorbehalten. Die Benutzung dieser Anleitung sowie die Umsetzung der darin enthaltenen Informationen erfolgt ausdrücklich auf eigenes Risiko. Rechts- und Schadenersatzansprüche sind ausgeschlossen. Das Werk inklusive aller Inhalte wurde unter größter Sorgfalt erarbeitet. Dennoch können Druckfehler und Falschinformationen nicht vollständig ausgeschlossen werden. Der Autor übernimmt keine Haftung für die Aktualität, Richtigkeit und Vollständigkeit der Inhalte dieser Anleitung, ebenso nicht für Druckfehler. Es kann keine juristische Verantwortung sowie Haftung in irgendeiner Form für fehlerhafte Angaben und daraus entstandenen Folgen vom Autor übernommen werden. Für die Inhalte von den in dieser Anleitung abgedruckten Internetseiten sind ausschließlich die Betreiber der jeweiligen Internetseiten verantwortlich. Microsoft® und Windows® sind entweder eingetragene Marken oder Marken der Microsoft Corporation in den USA und/oder anderen Ländern. Weitere auf in dieser Dokumentation aufgeführten Produkt- und Firmennamen können geschützte Marken ihrer jeweiligen Inhaber sein. Android is a trademark of Google™ Inc.
1. Auflage 2013 - 2014 © 2013 - 2014 alle Rechte vorbehalten. Sven Owsianowski
Entwicklung des WYSIWYG Web Builder: Pablo Software Solutions – Pablo van der Meer www.wysiwygwebbuilder.com
Deutscher Vertrieb sowie Grafikdesign: GOEMO Media Group www.wysiwygwebbuilder.de
Texte, Bilder, Screenshots (wenn nicht anders angegeben): Owsianowski GbR www.svo-nrw.de
Webseiten erstellen wie die Profis!
Seite 171
