Sie sind auf Seite 1von 318

Inhaltsverzeichnis

1. Willkommen ............................................. 1
Willkommen! .................................................................. 3 Neue Features ............................................................... 5 Installieren der Software .............................................. 10

2. Prsentieren Ihrer Website online ......... 13


Starten von WebPlus ................................................... 15 Arbeiten mit dem Serif Webhosting .............................. 15 Auswhlen eines Designs ............................................ 18 Einfgen einer Grafik Website im Aufbau .................. 20 Publizieren Ihrer Website ............................................. 22 Bearbeiten von Titel und Text ...................................... 23 Einfgen von Bildern .................................................... 24 Einfgen einer neuen leeren Seite ............................... 26

3. Einrichten von Websites und Seiten ...... 27


Der Startassistent ........................................................ 29 Erstellen einer Website mit einer Designvorlage .......... 30 ffnen einer bestehenden Website .............................. 34 Aufbauen einer vollstndig neuen Website.................... 36 Entwerfen mobiler Websites und Seiten ...................... 38 Arbeiten mit der Website-Struktur ................................ 42 Festlegen der Website-Eigenschaften ......................... 46

Inhaltsverzeichnis

Arbeiten mit Seiten und Master-Seiten ........................ 47 Hinzufgen, Entfernen und Neuordnen von Seiten ...... 53 Festlegen der Seiteneigenschaften.............................. 61 Einfgen von Hintergrnden ........................................ 61 Arbeiten mit Farbschemata .......................................... 67 Die dynamischen Fhrungslinien ................................. 71

4. Die Layoutelemente ............................... 75


Einfgen von Textrahmen ............................................ 77 Einfgen von Bildern .................................................... 82 Einfgen von Panels .................................................... 89 Einfgen einer Fotogalerie ........................................... 96 Einfgen von Tabellen ............................................... 103 Einfgen eines Kalenders .......................................... 105 Arbeiten mit Slidern.................................................... 109

5. Die Navigationselemente ..................... 115


Einfgen von Navigationsleisten ................................ 117 Einfgen von Popup-Mens ....................................... 122 Einfgen von Schaltflchen ....................................... 123 Einfgen von Hyperlinks und Aktionen ...................... 126 Einfgen von Ankern.................................................. 131 Arbeiten mit Lightboxen ............................................. 132

Inhaltsverzeichnis

6. Interaktive Objekte............................... 137


Einfgen eines Rollovers ........................................... 139 Die Rolloveroptionen .................................................. 139 Einfgen von Rollover-Popups ................................... 143 Einfgen einer Website-Suche ................................... 146 Einfgen von Google Maps ........................................ 148 Einfgen einer Werbung ............................................ 150

7. Externe/Verwaltete Inhalte .................. 153


Einfgen von Dokumentrahmen ................................. 155 Einfgen eines Blogs ................................................. 157 Einfgen eines News-Fensters .................................. 160 Einfgen eines Forums .............................................. 162 Einfgen eines RSS-Readers .................................... 167 Die Zugangskontrolle ................................................. 169 Arbeiten mit Smart-Objekten ...................................... 180

8. Soziale Netzwerke ............................... 191


Einfgen von Facebook-Objekten .............................. 193 Einfgen von Twitter-Objekten ................................... 196 Einfgen einer Google +1-Schaltflche ................... 201 Einfgen eines Lesezeichen-Symbolstreifens fr soziale Netzwerke .................................................................. 203

9. Multimedia ........................................... 205


Hinzufgen von Sounds und Videos .......................... 207 Einfgen von Flash-Dateien (SWF)............................ 210 Einfgen von YouTube-Videos .................................. 211

Inhaltsverzeichnis

10. Formulare ............................................. 213


Einfgen von Formularen ........................................... 215 bertragen von Formularen ....................................... 219

11. E-Commerce-Objekte .......................... 225


Was bedeutet E-Commerce? ..................................... 227 Einfgen von E-Commerce-Objekten (PayPal) .......... 230

12. Text ...................................................... 239


Importieren von Texten aus einer Datei ..................... 241 Arbeiten mit knstlerischen Texten ............................ 243 Platzieren von Texten auf einem Pfad ....................... 245 Bearbeiten von Texten auf einer Seite ....................... 247 Einstellen von Texteigenschaften .............................. 250 Arbeiten mit verschiedenen Schriftoptionen.................... 251 Arbeiten mit Textformatvorlagen ................................ 252 Erstellen von Nummerierungen und Aufzhlungen .... 256 Einfgen von Benutzerdetails .................................... 258 Einfgen von Variablen .............................................. 260 Suchen und Ersetzen................................................. 262

13. Quelldateien fr kreative Designs ........ 263


Arbeiten mit Quelldateien ........................................... 265 Arbeiten mit dem Quelldatei-Browser ........................... 268 Speichern von Designs .............................................. 272

Inhaltsverzeichnis

14. Vorschau und Publizieren.................... 277


Arbeiten mit der Website-Prfung .............................. 279 ffnen einer Website-Vorschau ................................. 282 Publizieren im Web .................................................... 284

15. Website-Validerung und -Analyse ....... 291


Validieren Ihrer Website ............................................. 293 Analysieren der Webstatistik ...................................... 295

16. Anhnge .............................................. 297


Serif-Kontaktinformationen ......................................... 299 Warenzeichen und Copyright-Vermerke .................... 300

17. Index.................................................... 303

Inhaltsverzeichnis

Willkommen

Willkommen

Willkommen

Willkommen!
Willkommen zu WebPlus X6 von Serif, der unkomplizierten Komplettlsung fr private und geschftliche Websites. Um Ihnen die tgliche Arbeit zu erleichtern, enthlt WebPlus eine breite Palette vordefinierter Designvorlagen, flexibler Navigationsleisten, kreativer Quelldateien und Formatvorlagen, die Sie flexibel anpassen und als Grundstein fr Ihre Projekte einsetzen knnen. Fr Einsteiger in das Webdesign ist es daher berhaupt kein Problem, professionelle Ergebnisse mit unserer Software zu erzielen. Sie knnen ebenfalls Dokumente aus Textverarbeitungen importieren, um bereits vorhandene Inhalte in Ihren Projekten zu verwenden. Mit dem Studiofenster fr Bildausschnitte knnen Sie Fotomotive von ihrem Hintergrund lsen, und das neue PhotoLab ist ideal, wenn Sie Bilder korrigieren oder mit kreativen Effektkombinationen versehen mchten. Diese Funktionsvielfalt sollte sich wirklich niemand entgehen lassen! WebPlus X6 bietet jedoch noch mehr als statische Webinhalte. Mit unserem Programm knnen Sie auch dynamische Inhalte in Ihre Webseiten einfgen und flexibel verwalten, wie z. B. Blogs, Foren, und RSS-Feeds von anderen Websites. Moderne und unverzichtbare Webelemente, wie Panels, Slider und Google Maps drfen natrlich ebenso wenig fehlen wie Objekte fr Facebook, Twitter und Google+. Sie knnen sogar mit den E-CommerceWerkzeugen einen Warenkorb in Ihre Website integrieren und bequem verschiedene Artikel ber das Internet vertreiben. Nachdem Sie Ihr Seitendesign abgeschlossen haben, knnen Sie die Website schnell und einfach im Web publizieren und Ihren Kunden, Kollegen, Freunden und Familienmitgliedern prsentieren.

Willkommen

Upgrades von lteren Programmversionen


Wenn Sie ein Upgrade von einer Vorgngerversion von WebPlus durchgefhrt haben, werden Sie berrascht sein, wie viele fantastische neue Features (siehe Seite 5) die aktuelle Version zustzlich bietet - und das zu einem unglaublichen Preis-LeistungsVerhltnis, das WebPlus weit von der Masse der Konkurrenzprodukte abhebt. Wir wnschen Ihnen viel Vergngen und Erfolg bei der Arbeit mit Ihrem neuen Webdesign-Profi.

Registrierung
Vergessen Sie nicht, Ihre Kopie des Programms mit dem Registrierungsassistenten aus dem Men Hilfe bei uns zu registrieren. Wir halten Sie dann automatisch ber neue Entwicklungen und verfgbare Upgrades auf dem Laufenden.

Eine Anmerkung zu diesem Handbuch


Das Handbuch zu WebPlus X6 wurde als Starthilfe fr neue Kunden oder Einsteiger in die Welt des Webdesigns entwickelt, damit Sie sich schnell in WebPlus zurechtfinden. Da unser Programm ber eine ausgesprochen breite Palette an Features verfgt, knnen wir in diesem Handbuch nicht auf alle Mglichkeiten unseres Produkts eingehen und konzentrieren uns daher auf die wichtigsten Funktionen und die am hufigsten verwendeten Features. Eine umfangreiche Erluterung zu den Programmfunktionen finden Sie in der Hilfe zu WebPlus. Um diese Hilfe zu ffnen, drcken Sie in unserem Programm einfach die F1-Taste.

Willkommen

Neue Features

Przise Verwaltung aller Webseiten mit der WebsiteStrukturansicht (siehe Seite 44) Die bersicht in Vollbilddarstellung ist besonders praktisch fr komplexe Websites. Endlich knnen Sie mit einem Blick die Zusammenhnge zwischen den Webseiten prfen. Anhand der Seitenminiaturen in der Baumstruktur lsst sich genau erkennen, wie die Seiten miteinander in Verbindung stehen. Alle Seiten lassen sich durch einfaches Klicken und Ziehen neu sortieren und auch anderen Seiten ber- oder unterordnen. Slider mit animierten Panels (siehe Seite 109) Perfekt fr Werbebanner, News, besondere Inhalte und hnliche Elemente! Endlich knnen Sie Ihren Panels Beine machen mit verschiedenen bergngen, wie z. B. Von Links/Rechts/Oben/Unten, Gemischt, Akkordeon, Overlay, Bildlauf und noch vielen weiteren Varianten. Dank der Zeitvorgabe fr die Panels knnen Sie genau festlegen, wann und welche Inhalte angezeigt werden sollen. Themenlayouts fr mobile Websites (siehe Seite 38) Mit den speziell fr mobile Websites entworfenen Themenvorlagen knnen Sie mobile Webseiten direkt in eine bestehende Website integrieren oder auch eine eigenstndige mobile Website entwerfen. Alle Layouts wurden fr die Betrachtung auf Mobilgerten optimiert! Endlich knnen alle Smartphone-Besitzer schnell und einfach von unterwegs auf Ihre Webseiten zugreifen!

Willkommen

Umleitung von Desktop zu Mobil (siehe Seite 41) Leiten Sie Smartphone-Benutzer direkt von Ihrer fr die Desktop-Darstellung optimierten Website auf die mobilen Seiten - wahlweise innerhalb einer Website mit Desktop- und Mobil-Seiten als auch zu einer vllig separaten Mobil-Website! Diese Umleitung erkennt sowohl Telefone als auch die Betrachtung mit bestimmten Bildschirmabmessungen. QuickBuild-Registerkarte fr ein unkompliziertes Webdesign (siehe WebPlus-Hilfe) Mit der Studio-Registerkarte QuickBuild knnen Sie schnell und einfach auf eine breite Palette wichtiger Objekte zugreifen, die in verschiedene Kategorien unterteilt sind, wie z. B. Layoutelemente, Navigationselemente, Soziale Netzwerke und Interaktive Objekte sowie auch Externe/Verwaltete Inhalte und noch vieles mehr. Anhand der groen Symbole lassen sich alle Objekte mit einem Blick identifizieren. Ziehen Sie einfach ein Symbol auf die gewnschte Position Ihrer Seite. Dank dieser kinderleichten Designmethode finden sich auch Einsteiger schnell mit unserem Programm zurecht! Zustzliche Aktionen fr noch mehr Objektinteraktivitt (siehe Seite 129) Blenden Sie Objekte aus, bis sie von einer Maus berhrt werden. Elemente knnen ebenfalls ihre Positionen ndern! Fr Slider stehen Ihnen Schaltflchen fr die Wiedergabesteuerung zur Verfgung sowie Schaltflchen, deren Darstellung sich je nach SliderAktivitt ndert.

Willkommen

Validierung Ihrer Website mit Google und Bing (siehe Seite 293) Durch einen einfachen Nachweis, dass Sie der Besitzer der Website sind, knnen Sie wichtige Informationen zur Suchmaschinenoptimierung Ihrer Website einsehen und eine breite Palette von Webmaster-Tools einsetzen (Analytics und AdSense).

Programmoberflche & Bedienkomfort

Erweiterte Benutzeroberflche Um die Bedienung zu vereinfachen, haben wir die Symbolleisten entschlackt und die Mens und per Rechtsklick zu ffnenden Kontextmens neu strukturiert. Das Entwerfen neuer Websites ist jetzt noch einfacher als je zuvor! (siehe Seite 36) Die Funktion Neue Website anlegen im Startassistenten fhrt Sie nun durch die wichtigsten Schritte fr den Aufbau einer komplett neuen Website. Whlen Sie schnell und einfach die Webadresse, Seitengre, Anzahl der Seiten, ein Farbschema und die Navigationsleisten direkt am Anfang des Projekts aus und ersparen Sie sich lstige Designnderungen am Ende. Przise Steuerung der Registerkarten mit der neuen Studioleiste Mit dieser neuen Symbolleiste knnen Sie die StudioRegisterkarte Quelldateien, die Studio-Registerkarte Schriften, die Studio-Registerkarte QuickStart sowie alle anderen Registerkarten gezielt ein- und ausblenden.

Willkommen

Kreatives Design

Kreatives Arbeiten mit Quelldateien (siehe Seite 263) Mit der neuen Studio-Registerkarte Quelldateien knnen Sie von Profis entworfene Seiteninhalte durchsuchen und bequem auf Ihren Seiten verteilen. Diese Quelldateien lassen sich sogar mit einer flexiblen Textsuche durchstbern! Hier finden Sie sowohl webspezifische Kategorien, wie Slider/Panels und Schaltflchen, als auch allgemeine Kategorien, wie Grafiken, Bilder, Bildrahmen, Hintergrnde, Seiteninhalte und sogar ganze Seiten. Einfach Klicken, Ziehen und Absetzen - schon ist Ihr Layout fertig! In dieser Registerkarte knnen Sie auch selbst definierte Designs speichern - sowohl fr den Einsatz in der aktuellen Website als auch zur spteren Verwendung in allen anderen Projekten. Sogar Paketdateien aus PagePlus lassen sich hier in WebPlus importieren! Unkomplizierte Farbzuweisungen mit der Farbleiste ber diese neue Symbolleiste knnen Sie die Farben fr Fllung, Linie und Text aus Ihrem aktuellen Farbschema oder der Website-Palette auswhlen. Hintergrnde mit mehreren Bildern (siehe Seite 61) Kombinieren Sie mehrere Bilder im Hintergrund zu fantastischen Designs. Jedes Bild lsst sich einzeln positionieren, sodass Sie vollkommen frei und flexibel arbeiten knnen. Diese Methode ist perfekt, wenn Sie die Designs fr Kopfzeilen, Fuzeilen, Kachellayouts und Logos separat entwerfen mchten!

Willkommen

Benannte Schemafarben (siehe Seite 70) Verlieren Sie bei der Farbgestaltung der verschiedenen Seitenelemente auch hin und wieder die bersicht? Geben Sie Ihren Farben doch einfach aussagekrftige Namen, wie z. B. Hintergrund oder Text - html, sodass Sie mit einem Blick erkennen, fr welchen Zweck Sie die Farben eingesetzt haben.

Soziale Netzwerke

Feeds und Schaltflchen fr soziale Netzwerke (siehe Seite 191) Mit den Objekten fr Facebook, Twitter und Google+ lassen sich Feeds und Schaltflchen in Ihre Webseiten integrieren. Ihre Website-Besucher knnen dann Ihre Website (oder jede andere URL) auf den Seiten eines sozialen Netzwerkes ihrer Wahl anderen Websurfern empfehlen. Lesezeichen-Symbolstreifen fr soziale Netzwerke (siehe Seite 203) Mit dem Lesezeichen-Symbolstreifen fr soziale Netzwerke knnen Website-Besucher fr Ihre Website ber Facebook, Twitter, Delicious, Digg und Google Lesezeichen die Werbetrommel rhren. Und dies ist nur eine Auswahl der verfgbaren Mglichkeiten. Natrlich lassen sich Ihre Webseiten bzw. URLs ber diesen Symbolstreifen auch per E-Mail versenden und drucken.

Multimedia

Zugriff auf Multimedia-Streams aus dem Internet (siehe Seite 209) Integrieren Sie schnell und einfach Streaming-Movies (MPEG, MP4, Shockwave, FLV und QuickTime) oder Audioclips von URLs in Ihre Webseiten.

10

Willkommen

Installieren der Software


Systemanforderungen
Minimale Systemanforderungen:

Windows-basierender PC mit DVD-Laufwerk und Maus Eines der Betriebssysteme Microsoft Windows XP (32 Bit), Windows Vista oder Windows 7 512 MB RAM (Arbeitsspeicher) 434 MB freie Festplattenkapazitt Monitor und Grafikkarte, die eine Auflsung von 1024 x 768 ermglichen Internet Explorer 7 Fr den Zugriff auf die Onlineressourcen und das Publizieren der Projektdateien im World Wide Web werden ein Internetzugang und ein Benutzerkonto bei einem Internet Service Provider bentigt

Fr die Bearbeitung groer oder komplexer Websites werden zustzliche Festplattenkapazitt und mehr Arbeitsspeicher bentigt.

Willkommen

11

Optional:

Windows-kompatibler Drucker TWAIN-kompatibler Scanner und-/oder TWAINkompatible Digitalkamera .NET 2.0 fr die Textimportfilter von Word 2007/2010 + OpenOffice (Bestandteil der Standardinstallation)

Die Erstinstallation
Um Serif WebPlus X6 zu installieren, legen Sie einfach die Programm-Disc von WebPlus X6 in Ihr Disc-Laufwerk ein. Die AutoRun-Funktion sollte nun automatisch das Setup starten. Fhren Sie einfach die auf dem Bildschirm angezeigten Schritte aus, um das Programm zu installieren.

Reparieren oder ndern der Installation


Wenn Sie die Software erneut installieren oder die Installation ndern mchten, klicken Sie im Startmen von Windows auf Systemsteuerung und dann auf das Symbol Software/Programme deinstallieren. Stellen Sie sicher, dass die Programm-Disc in Ihr Disc-Laufwerk eingelegt ist und klicken Sie auf den Eintrag Serif WebPlus X6. Klicken Sie dann auf eine der Schaltflchen ndern oder Reparieren und folgen Sie den Anweisungen auf Ihrem Bildschirm.

12

Willkommen

Prsentieren Ihrer Website online

14

Prsentieren Ihrer Website online

Prsentieren Ihrer Website online

15

Starten von WebPlus


Nach dem ersten Programmstart wird automatisch der Startassistent eingeblendet, der Ihnen folgende Einstiegsmglichkeiten in WebPlus bietet:

Arbeiten mit dem Serif Webhosting


Mit dem Serif Webhosting knnen Sie Ihre Website auf einem von Serif angebotenen Webspace publizieren. Ihre Website ist dann fr alle Websurfer erreichbar. Indem Sie sich bei dem Hosting-Dienst anmelden, knnen Sie sich das Publizieren Ihrer Websites im Internet enorm vereinfachen. Das Hosting-Paket lsst sich jederzeit erweitern, sodass der Platz auf Ihrem Webspace stets ausreicht. Wenn Sie sich als Kunde anmelden, knnen Sie je nach ausgewhltem Paket den Namen festlegen, den Sie fr Ihre Webadresse verwenden mchten. Diese Adresse mssen die Websurfer dann in ihren Browser eingeben, um die Homepage Ihrer Website zu besuchen. Je nach ausgewhltem Paket lassen sich die Webadressen wie folgt formatieren: <Prfix>.webplus.net ODER <Prfix>.com Den <Prfix>-Teil der Adresse legen Sie bei Ihrer Anmeldung fest.

16

Prsentieren Ihrer Website online

Die neuesten Informationen zu den verfgbaren Hosting-Paketen finden Sie unter www.serif.com/hosting/. Beachten Sie bitte, dass unser Hosting-Angebot momentan nur in englischer Sprache verfgbar ist.

Einrichten eines Kontos fr das Serif Webhosting


Nach dem Start von WebPlus lsst sich das Serif Webhosting problemlos konfigurieren. 1. 2. Klicken Sie im Men Hilfe auf Webhosting-Anbieter suchen. Folgen Sie online den Schritten fr die Anmeldung zu dem Hosting-Paket Ihrer Wahl. Hierzu mssen Sie:

Eine gltige E-Mail-Adresse und gltige Kontaktinformationen eingeben. Auf den Aktivierungslink der E-Mail klicken, die Ihnen Serif nach der Anmeldung zuschickt. Das Webhosting-Konto mit Ihrer E-Mail-Adresse und Ihrem Kennwort anlegen. Sie mssen ebenfalls Ihr ausgewhltes <Prfix> fr Ihre Webadresse eingeben. Whlen Sie in dem Detailbildschirm zu den Hosting-Angeboten das gewnschte Hosting-Paket aus.

Vergessen Sie nicht den Hosting-Gutschein einzulsen, den Sie mit Ihrer Version von WebPlus erhalten haben. Geben Sie einfach den Gutschein-Code ein, wenn Sie das Paket auswhlen, um Ihren Gutschein einzulsen.

Geben Sie die Zahlungsinformationen ein.

Prsentieren Ihrer Website online

17

3.

Drucken Sie im letzten Bildschirm die FTP-Kontodetails fr Ihr Webhosting aus (oder archivieren Sie diese Daten auf eine andere Weise). Sie mssen diese Daten spter noch per Kopieren und Einfgen nach WebPlus bertragen. Auerdem sollten Sie stets eine Sicherheitskopie fr Notflle griffbereit haben.

bertragen Ihrer Kontodetails


WebPlus prft automatisch, ob Sie in dem Programm Kontodetails zu Ihrem Webhosting eingetragen haben. Sollten keine Daten vorhanden sein, wird automatisch ein Dialogfeld eingeblendet, damit Sie die Informationen eingeben knnen. 1. 2. Klicken Sie in WebPlus auf die Option publizieren der Standardsymbolleiste. Website

Whlen Sie in dem Dialogfeld unter Bestehendes Hosting & Domnennamen verwenden die Option Details hinzufgen aus. Tragen Sie durch Kopieren und Einfgen die Kontodetails Ihres Webhosting-Kontos (das Sie zuvor online erstellt haben) in die entsprechenden Felder ein. Klicken Sie auf die Schaltflche OK. Mchten Sie anstelle des Webhostings von Serif Ihr eigenes Hosting-Paket und einen zuvor festgelegten Domnennamen verwenden, gehen Sie wie unter "Publizieren Ihrer Website" (siehe Seite 22) beschrieben vor. Bevor Sie fortfahren, sollten Sie in dem Dialogfeld fr den Server-Upload auf Test klicken. Sollte keine Verbindung zu dem Server erstellt werden, prfen Sie bitte Ihre Kontodetails und Ihre Internetverbindung und versuchen es dann erneut.

3.

4.

18

Prsentieren Ihrer Website online

Auswhlen eines Designs


Mit WebPlus mssen Sie Ihre Projekte nicht von Grund auf selbst aufbauen. Sie knnen auch eine vollstndige Website basierend auf einem Themenlayout zusammenstellen. Themenlayouts enthalten mehrere Vorlagenseiten, die alle einen hnlichen Look aufweisen. Um ein Design zu bestimmen, whlen Sie einfach ein Themenlayout und ein Farbschema aus.

Auswhlen von Themenlayout und Farbschema


1. 2. 3. Starten Sie WebPlus. Klicken Sie im Startassistenten auf Designvorlage verwenden. Whlen Sie in dem Dialogfeld ein Themenlayout aus. Fr unser Beispiel nehmen wir die Variante Verspielt.

4.

Whlen Sie am oberen Rand des Dialogfelds ein Farbschema aus. Die ersten drei Optionen in diesem Dropdownfeld sind speziell auf die ausgewhlte Vorlage zugeschnitten. Die Seitenminiaturansichten werden nun automatisch aktualisiert, um den neuen Look der Seiten widerzuspiegeln. Entfernen Sie in dem rechten Feld die Hkchen aller Seiten - auer dem fr die Homepage.

5.

Prsentieren Ihrer Website online

19

Mit den Pfeiltasten Aufwrts/Abwrts knnen Sie jedes einzelne Schema bequem fr eine Vorschau auswhlen. 6. Klicken Sie anschlieend auf die Schaltflche ffnen. Ihre Webseite wird nun in die Studio-Registerkarte Website eingefgt.

Auswhlen einer Pro-Vorlage


Anstelle eines Themenlayouts knnen Sie auch Pro-Vorlagen verwenden. Diese mehrseitigen Vorlagen sind bereits mit Lizenzgebhr freien Bildern gefllt. Das Design dieser Vorlagen wurde gezielt auf bestimmte Berufe und Branchen abgestimmt (z. B. Maler) und nicht auf ein bestimmtes Designthema. 1. 2. Klicken Sie im Startassistenten auf Designvorlage verwenden. Blttern Sie in dem Dialogfeld die Vorlagenliste nach unten, bis Sie die Kategorien der WebPlus X6 ProVorlagen erreichen, und whlen Sie eine Vorlage aus.

3.

Klicken Sie anschlieend auf die Schaltflche ffnen. Ihre Webseiten werden nun in die Studio-Registerkarte Website eingefgt.

20

Prsentieren Ihrer Website online

Einfgen einer Grafik Website im Aufbau


Bevor Sie Ihre fertige Website live im Internet prsentieren, sollten Sie mindestens eine Seite Ihrer geplanten Website publizieren, die eine Grafik Website im Aufbau zeigt. Wenn Sie diese Seite publizieren und Ihre Website-Besucher die URL Ihrer Website aufrufen, stehen sie nicht vllig im Dunkeln, sondern sehen an dieser Grafik, dass Sie noch an Ihrer Website arbeiten und die Inhalte erst spter verfgbar sind. Alle Grafiken, die Sie auf allen Seiten Ihrer Website anzeigen mchten, lassen sich bequem auf der Master-Seite der Seiten ablegen. 1. 2. Klicken Sie in der Studio-Registerkarte Website auf Master-Seiten>. Fhren Sie einen Doppelklick auf die Miniatur der Master-Seite aus, die von Ihren Seiten verwendet wird. Master-Seiten werden stets als Seitensymbol mit einem Buchstaben (z. B. ) gekennzeichnet. Klicken Sie in der Studio-Registerkarte Quelldateien auf Durchsuchen. Geben Sie oben links in das Feld Suchen des Quelldatei-Browsers den Begriff Bauarbeiten ein.

3. 4.

Prsentieren Ihrer Website online

21

5.

Whlen Sie eine Im Aufbau-Grafik aus.

6. 7.

Klicken Sie auf die Schaltflche Schlieen. Ziehen Sie die Grafik aus der Studio-Registerkarte Quelldateien unten auf Ihre Master-Seite.

8.

Klicken Sie mit der rechten Maustaste auf die Grafik und in ihrem Kontextmen auf Anordnen > An unterer Seitenkante festlegen. Nach dem Publizieren wird die Grafik Website im Aufbau immer am unteren Rand der Seite(n) angezeigt, der bzw. denen Sie diese Master-Seite zuweisen.

22

Prsentieren Ihrer Website online

Publizieren Ihrer Website


Um Ihre Website online prsentieren zu knnen, mssen Sie die einzelnen Dateien an Ihren Webspace (Speicherplatz fr Webseiten auf einem Internetserver) bertragen. 1. ffnen Sie in der Standardsymbolleiste das Men Website publizieren und klicken Sie auf Im Web publizieren. Geben Sie in das Dialogfeld die URL dieser Website ein und whlen Sie den FTP-Kontonamen in dem Dropdownfeld FTP-Konto aus. Die Kontoeinstellungen werden nun angezeigt Klicken Sie auf die Schaltflche OK. Ihre Dateien werden nun an Ihre Website bertragen und sind somit live im World Wide Web erreichbar!

2.

3.

Nachdem Sie Ihre Website online gestellt haben, knnen Sie weiter an Ihrem Projekt arbeiten. Wir konzentrieren uns zunchst auf die Bearbeitung von Texten, das Einfgen von Bildern sowie das Einfgen neuer Seiten.

Prsentieren Ihrer Website online

23

Bearbeiten von Titel und Text


Bearbeiten des Seitentitels
1. 2. Fhren Sie in der Studio-Registerkarte Website einen Doppelklick auf den Eintrag der Seite Home aus. Fhren Sie einen Doppelklick auf den Titeltext aus und geben Sie einen neuen Titel ein, wie z. B. den Namen Ihrer Firma.

Bearbeiten des Textkrpers


1. 2. Fhren Sie auf der Seite einen Dreifachklick auf einen Textrahmen aus, um einen Absatz zu markieren. Geben Sie den gewnschten Text ein. Anstatt einen bestehenden Textrahmen zu bearbeiten, knnen Sie auch einen neuen Textrahmen ber die Option Textrahmen der Studio-Registerkarte QuickBuild erstellen.

24

Prsentieren Ihrer Website online

Einfgen von Bildern


Einfgen von Bildern in WebPlus
1. 2. 3. Klicken Sie in der Kategorie Bilder der StudioRegisterkarte Quelldateien auf Hinzufgen. ffnen Sie in dem Dialogfeld einen Ordner mit Bildern und whlen Sie die gewnschten Bilder aus. Klicken Sie anschlieend auf die Schaltflche ffnen. Ihre Bilder werden nun als Miniaturen in der Kategorie Bilder angezeigt.

Prsentieren Ihrer Website online

25

Einfgen von Bildern in eine Seite

Ziehen Sie aus der Kategorie Bilder der StudioRegisterkarte Quelldateien eine Bildminiatur direkt auf die Seite, in einen Rahmentext oder knstlerischen Text (das Bild wird dann an der Position der Einfgemarke platziert) oder in einen Bildplatzhalter (siehe unten).

ODER

Fhren Sie einen Doppelklick auf einen Platzhalter aus, um ein Bild direkt aus einem Ihrer PC-Laufwerke einzufgen.

26

Prsentieren Ihrer Website online

Einfgen einer neuen leeren Seite


1. Whlen Sie in der Studio-Registerkarte Website die Seite aus, nach der die neue Seite eingefgt werden soll. Klicken Sie auf den Pfeil des Symbols Neue Seite oder neuen Link hinzufgen. Klicken Sie in dem nun geffneten Men auf Neue leere Seite. Legen Sie in dem Dialogfeld Seiteneigenschaften einen Seitennamen fr Ihre neue Seite fest. Klicken Sie auf die Schaltflche OK. Vergessen Sie nicht, die Website erneut zu publizieren, um die neuen nderungen auf ihre live Website zu bertragen.

2.

3. 4.

Einrichten von Websites und Seiten

28

Einrichten von Websites und Seiten

Einrichten von Websites und Seiten

29

Der Startassistent
Nach dem ersten Programmstart wird automatisch der Startassistent eingeblendet, der Ihnen folgende Einstiegsmglichkeiten in WebPlus bietet:

Die einzelnen Bezeichnungen der Optionen sind weitgehend selbsterklrend. Mit dem ersten Men knnen Sie Websites von Grund auf neu erstellen oder mithilfe einer Designvorlage aufbauen. Bereits gespeicherte Websites lassen sich mit dem Assistenten ebenfalls ffnen.

Neue Datei anlegen > Neue Website anlegen: Aufbauen einer neuen Website aus einer leeren Seite. Neue Datei anlegen > Designvorlage verwenden: Erstellen einer neuen Website mithilfe einer vordefinierten Layoutvorlage, die bereits einige Designelemente enthlt. Weitere Ressourcen: Hier finden Sie Links zu kostenlosen Designelementen und kostenpflichtigen Designvorlagen.

30

Einrichten von Websites und Seiten

Datei ffnen: Hier finden Sie eine Liste der zuletzt geffneten Websites. Um eine Vorschau fr eine Website einzublenden, bewegen Sie einfach den Mauszeiger auf ihren Dateinamen! Studienmaterial: ffnen der Website mit Videos, Tutorials, Support und anderen Informationen. Bitte beachten Sie, dass dieses Material teilweise nur in englischer Sprache verfgbar ist.

Standardmig wird der Startassistent automatisch bei jedem Programmstart von WebPlus aktiviert. Sie knnen den Assistenten auch ber die Option Diesen Assistenten nicht mehr anzeigen deaktivieren. Sollten Sie spter Ihre Meinung ndern, klicken Sie auf den Menpunkt Extras > Optionen und aktivieren in der Kategorie Optionen > Allgemein die Option Startassistent verwenden.

Erstellen einer Website mit einer Designvorlage


WebPlus enthlt eine breite Palette kategorisierter Designvorlagen, mit denen Sie schnell und einfach die unterschiedlichsten Websites aufbauen knnen. Die Vorlagen bieten:

Ergnzende Designs mit professionell entworfenen Layouts und starker visueller Wirkung. Schemata: Whlen Sie einfach ein Farbschema aus, um der gesamten Website einen bestimmten Look zu verleihen.

Einrichten von Websites und Seiten

31

Seitenauswahl: Hier knnen Sie einige oder auch alle Vorlagenseiten auswhlen (z. B. Homepage, Produkte, Downloads usw.), die Sie als Grundstein fr Ihre Website verwenden mchten.

Generell gibt es zwei Arten von Designvorlagen - Themenlayouts und Pro-Vorlagen. Themenlayouts Hier knnen Sie verschiedene Themen (z. B. Arktis) als Grundlage fr Ihre Website auswhlen. Die Seiten dieser Vorlagen enthalten jedoch keine Bilder, sondern Platzhalterrahmen. Fgen Sie einfach Ihre eigenen Bilder in die Platzhalter ein, ndern Sie den Platzhaltertext, und schon ist Ihre Website zur Publikation bereit. Als Ergnzung zu den Vorlagen fr normale Websites steht Ihnen auch eine breite Palette an Vorlagen fr mobile Websites zur Verfgung. Die Seitenabmessungen dieser Vorlagen wurden fr die Darstellung auf Smartphones optimiert. Nhere Informationen hierzu finden Sie unter dem Thema Entwerfen mobiler Websites und Seiten auf Seite 38.

32

Einrichten von Websites und Seiten

Pro-Vorlagen Diese in Kategorien unterteilten Vorlagen enthalten Lizenzgebhr freie Bilder, sodass Sie schnell und einfach Ihre eigenen Websites zusammenstellen knnen. Sie mssen nur noch den Platzhaltertext durch Ihren eigenen Text ersetzen und anschlieend die Website publizieren. Erstellen einer Website mit einer Designvorlage 1. 2. 3. Starten Sie WebPlus, oder klicken Sie im Men Datei auf Startassistent..., um den Startassistenten zu aktivieren. Klicken Sie auf die Option Neue Datei anlegen > Designvorlage verwenden. Whlen Sie in dem Dialogfeld ein Themenlayout (Normal- oder Mobil-Variante) oder eine Pro-Vorlage aus.

Themenlayouts

Einrichten von Websites und Seiten

33

Pro-Designvorlagen

Mit der Bildlaufleiste knnen Sie bequem durch alle verfgbaren Designs blttern. Um eine Kategorie zu reduzieren oder zu erweitern, klicken Sie auf das Symbol neben dem Kategorienamen. In dem rechten Feld werden automatisch die Miniaturansichten fr die Seiten der ausgewhlten Vorlage angezeigt. 4. Legen Sie in dem rechten Feld fest, welche Seiten Sie fr Ihre Website verwenden mchten. Sie knnen entweder die einzelnen Seiten per Mausklick mit einem Hkchen versehen oder mit der Schaltflche Alle auswhlen alle Seiten markieren. Um die aktuelle Auswahl zu widerrufen, klicken Sie auf Nichts auswhlen.

34

Einrichten von Websites und Seiten

5.

Whlen Sie am oberen Rand des Dialogfelds ein Farbschema aus. Die ersten drei Optionen in diesem Dropdownfeld sind speziell auf die ausgewhlte Vorlage zugeschnitten. Bei geffneter Dropdownliste knnen Sie einfach mit den Pfeiltasten Aufwrts und Abwrts Ihrer Tastatur durch die Farbschemata schalten und direkt die Auswirkung der neuen Farbkombinationen auf die Seitenvorschau prfen. Die Seitenminiaturansichten werden automatisch aktualisiert, um den neuen Look der Seiten widerzuspiegeln. Klicken Sie anschlieend auf die Schaltflche ffnen.

6.

Die Website wird nun automatisch mit der Startseite (Homepage) geffnet. Auf der rechten Seite des Arbeitsbereiches finden Sie eine vollstndige Baumstruktur der Website in der Studio-Registerkarte Website.

Einige Hinweise
ber die Kategorie Weitere Vorlagen knnen Sie zustzliche Vorlagen von Serif erwerben. Alle Themenlayouts enthalten so genannte Quelldateien, wie z. B. einzelne von Profis entworfene Grafiken, Bilder, Schaltflchen, Symbole, Bildrahmen oder Hintergrnde, als Ergnzung zu den Seitenelementen des Themenlayouts.

ffnen einer bestehenden Website


Um eine gespeicherte WebPlus-Website zu ffnen, knnen Sie den Startassistenten, die Standardsymbolleiste oder das Men Datei verwenden. Mit dem Men Datei lassen sich darber hinaus auch Webseiten importieren die zu bestehenden Websites gehren. Nhere Informationen hierzu finden Sie in der WebPlus-Hilfe.

Einrichten von Websites und Seiten

35

ffnen einer bestehenden WebPlus-Website mit dem Startassistenten 1. In dem Startassistenten werden unter Datei ffnen Ihre zuletzt verwendeten Websites aufgelistet. Die als Letztes geffnete Website steht hierbei ganz oben in der Liste. Um eine Miniaturvorschau der Website einzublenden, bevor Sie die entsprechende Datei ffnen, platzieren Sie den Mauszeiger einfach auf ihrem Listeneintrag. Um eine Datei zu ffnen, klicken Sie auf ihren Namen. Sollten Sie die gewnschte Website lnger nicht geffnet haben und die entsprechende Datei daher in der Liste fehlen, klicken Sie auf Durchsuchen und whlen die Datei manuell aus. ffnen einer bestehenden WebPlus-Website whrend einer WebPlus-Arbeitssitzung 1. 2. Klicken Sie in der Standardsymbolleiste auf ffnen. Wechseln Sie in dem Dialogfeld ffnen zu dem Ordner der Datei und klicken Sie auf den oder die Dateinamen. Mchten Sie mehrere Websites ffnen, klicken Sie mit gedrckter Umschalttaste auf die nebeneinander liegenden Dateinamen oder mit gedrckter Strg-Taste auf nicht nebeneinander liegende Dateien. Klicken Sie auf die Schaltflche ffnen.

2.

3.

ffnen von Websites durch Klicken und Ziehen

Ziehen Sie die Miniaturvorschau der Website aus dem Windows Explorer in den Arbeitsbereich von WebPlus.

36

Einrichten von Websites und Seiten

Zurckgreifen auf die gespeicherte Version einer geffneten Website

Klicken Sie im Men Datei auf den Eintrag Wiederherstellen.

Ersetzen von Schriftarten


WebPlus bietet Ihnen die Mglichkeit, alle Schriftarten einer WebPlus-Website zu ersetzen, die nicht auf Ihrem Computer gespeichert sind. Dies kann z. B. vorkommen, wenn Sie ein Projekt auf einem anderen Computer erstellt oder Ihr Betriebssystem zwischenzeitlich neu installiert haben. Mit dem in diesen Fllen angezeigten Dialogfeld knnen Sie die fehlenden Schriften bequem identifizieren und manuell gegen entsprechende Ersatzschriften austauschen. Nhere Informationen hierzu finden Sie in der WebPlus-Hilfe.

Aufbauen einer vollstndig neuen Website


Obwohl die Designvorlagen (siehe Seite 30) sehr hilfreich sind, knnen Sie Ihre Websites auch von Grund auf neu gestalten, indem Sie mit einer leeren Seite beginnen. Folgen Sie einfach den verschiedenen Arbeitsschritten, die in dem Assistenten angezeigt werden, um die wichtigsten Aspekte fr die neue Website einzustellen. Hierbei legen Sie unter anderem die folgenden Optionen fest:

Website-Name und Website-URL Seitengre und Seitenhhe sowie die Anzahl der Seiten Die Schemafarben Die Navigationsleiste Die Quelldateien

Einrichten von Websites und Seiten

37

Sie knnen diese Einstellungen jederzeit ndern, nachdem Sie den Assistenten geschlossen haben. Die Seitengre und -hhe ist fr alle Seiten identisch einschlielich einer Master-Seite, die automatisch angelegt und allen neuen Seiten zugewiesen wird. Ihre Navigationsleiste wird automatisch auf dieser MasterSeite platziert. Erstellen einer neuen Website ohne Vorlage mit dem Startassistenten 1. Starten Sie WebPlus. ODER Klicken Sie in der Standardsymbolleiste auf Website. 2. 3. Neue

Klicken Sie auf Datei anlegen > Neue Website anlegen. Fhren Sie in dem Dialogfeld die einzelnen Schritte aus und klicken Sie anschlieend auf Weiter>, um zu dem nchsten Fenster zu wechseln. Klicken Sie auf Fertig stellen, um den Assistenten zu schlieen.

4.

Erstellen einer neuen, leeren Website whrend einer Arbeitssitzung in WebPlus

Klicken Sie im Men Datei auf den Eintrag Neu. Die neue Website wird nun mit einer leeren Seite geffnet, die mit den standardmig verwendeten Seiteneigenschaften formatiert ist. Wenn Sie in dem Startassistenten auf Abbrechen klicken, wird ebenfalls eine neue Website mit einer leeren Standardseite angelegt.

38

Einrichten von Websites und Seiten

Entwerfen mobiler Websites und Seiten


Vor dem Boom der Mobiltelefone mit Internetzugang hieen Websites einfach nur Websites. Heutzutage werden Websites nicht lnger nur auf normalen Computermonitoren betrachtet, sondern auch auf vielen Mobilgerten, wie z. B. Apple iPhones, Blackberrys sowie Androidund Windows-Smartphones. Aus diesem Grund haben die Webdesigner als Ergnzung zu der normalen Seitengre auch ein Format geschaffen, das speziell fr die Betrachtung auf den kleinen Bildschirmen der Mobilgerte optimiert ist. Die fr mobile Gerte entwickelten Designs werden hufig als mobile Websites und die im herkmmlichen Format als Desktop-Websites bezeichnet. Die mobilen Websites sind speziell so konzipiert, dass sich alle Texte und Seitenelemente trotz der wesentlich geringeren Abmessungen der Smartphone-Bildschirme gut erkennen lassen. Hierzu wurde nicht nur die Seitengre reduziert, sondern auch das gesamte Design der Seiten vereinfacht. Die Seiten mobiler Websites passen sich automatisch auf die Gre des Telefons an, mit dem sie betrachtet werden.

Mobile Websites in WebPlus


WebPlus bietet Ihnen mehrere Mglichkeiten, mobile Websites zu entwerfen:

Erstellen Sie eine eigenstndige mobile Website. Entwerfen Sie eine Hybrid-Website aus normalen Desktop-Seiten und mobilen Seiten inklusive Umleitung von den Desktop-Seiten zu den Mobil-Seiten (und umgekehrt), sodass alle Seiten in einem WebPlusProjekt zusammengefasst sind. Entwerfen Sie separate Desktop- und Mobil-Websites mit einer Umleitung von den Desktop-Seiten zu den separat gespeicherten Mobil-Seiten. Ihre Mobil-Website wird hierbei als eigenstndiges WebPlus-Projekt erstellt.

Einrichten von Websites und Seiten

39

Entwerfen mobiler Seiten innerhalb Ihrer Website


Um mit der Seitenumleitung zu arbeiten, mssen Sie die mobilen Seiten erstellen und als Ziel angeben. In WebPlus knnen Sie mobile Seiten direkt mithilfe von Themenlayouts (siehe Seite 30) entwerfen, die speziell fr mobile Websites konzipiert wurden und die normalen Designs hervorragend ergnzen. Sie fgen diese Vorlagenseiten dann genau so in Ihre Website ein, wie die Vorlagenseiten fr Desktop-Websites. Einfgen einer mobilen Seite 1. Klicken Sie ber dem Feld Seiten der StudioRegisterkarte Website auf den nach unten zeigenden Pfeil des Symbols Neue Seite oder neuen Link hinzufgen. Klicken Sie in dem nun geffneten Men auf Neue Vorlagenseite. Whlen Sie in dem Dialogfeld die Option Master-Seite vergleichen und kopieren des ersten Dropdownfeldes aus. Whlen Sie im linken Feld ein mobiles Themenlayout aus und markieren Sie per Mausklick die Seite(n), die Sie einfgen mchten. Die mobilen Themenlayouts wurden speziell als Ergnzung zu den normalen Desktop-Layouts entworfen. Wenn Sie also Ihre Website mit dem Themenlayout Arktis entworfen haben, verwenden Sie einfach die Seiten des Themenlayouts Arktis (mobil). Klicken Sie anschlieend auf die Schaltflche ffnen.

2.

3.

4.

In der Studio-Registerkarte Website werden die mobilen Seiten nun am Ende des Website-Strukturbaums eingefgt. Sie knnen natrlich auch jederzeit eine mobile Website von Grund auf neu erstellen (siehe Seite 36).

40

Einrichten von Websites und Seiten

Verwalten der mobilen Dateien


Einer der wichtigsten Punkte bei Hybrid-Websites ist die Trennung der mobilen Seiten von den Desktop-Seiten. Auf diese Weise lassen sich alle Seiten effizient verwalten und Sie knnen unabhngige Navigationsleisten fr die Desktop- und Mobil-Seiten festlegen. Hier einige Tipps fr Hybrid-Websites:

ndern Sie die Dateinamen fr mobile Seiten: Mobile Seiten erhalten einen anderen Namen, wenn Sie die Seiten in Ihre Website einfgen (z. B. index0.html anstelle von index.html), damit keine bestehenden Dateien berschrieben werden. Sie knnen fr Ihre mobilen Seiten auch eine gemeinsame Vorsilbe festlegen, wie z. B. m. (m.index0.htm anstelle von index.html), sodass sich die Dateinamen besonders leicht unterscheiden lassen. Klicken Sie hierzu mit der rechten Maustaste auf eine Seite und in dem Kontextmen auf Seiteneigenschaften. Tragen Sie nun die Vorsilbe m. in das Feld Dateiname ein. Stellen Sie in der Studio-Registerkarte Website sicher, dass Ihre Desktop- und Mobil-Seiten untergeordnete Seiten der jeweiligen Homepage sind. Ziehen Sie hierzu die Eintrge der Desktop-Seiten unter den Eintrag fr die Desktop-Homepage und die Eintrge der Mobil-Seiten unter den der Mobil-Homepage. Ihre Website hat dann also zwei Homepages - eine fr die Desktop- und eine fr die Mobil-Darstellung. Um die Seitennavigation genau zu steuern, bearbeiten Sie die Navigationsleisten auf der Master-Seite fr die Desktop-Seiten sowie auf der Master-Seite fr die MobilSeiten. Klicken Sie mit der rechten Maustaste auf die Navigationsleiste und in dem Kontextmen auf

Einrichten von Websites und Seiten

41

Navigationsleiste bearbeiten. Klicken Sie auf Untergeordnete Seiten von... und whlen Sie die entsprechende Homepage in dem unteren Dropdownfeld aus. Stellen Sie hierbei sicher, dass die Optionen Untergeordnete Seiten einbeziehen und Homepage einbeziehen ebenfalls aktiviert sind.

Umleiten zu/von Mobil-Seiten


Fr die Umleitung bentigen Sie eine Seite, auf der die Umleitung startet und eine Zielseite, zu der die Website-Besucher geleitet werden. Fr gewhnlich werden die Umleitungen auf DesktopSeiten erstellt, um Website-Besucher zu den mobilen Seiten zu fhren. Die umgekehrte Variante ist natrlich auch denkbar. Alle Umleitungen werden von der aktuell angezeigten Seite gestartet und bentigen einen speziellen Auslser. Hierzu knnte die Website z. B. ein Mobilgert oder einen Desktop-Computer erkennen oder auch die Abmessungen des Bildschirms, auf dem die Seite gerade betrachtet wird. Fr die Erkennung des Browsers wird der Wert UserAgent des Browsers verwendet. Umleiten von/zu Seiten oder Websites 1. 2. 3. Klicken Sie mit der rechten Maustaste auf eine Seite und in ihrem Kontextmen auf Seiteneigenschaften. Wechseln Sie in dem Dialogfeld Seiteneigenschaften zu der Kategorie Weiterleitung. Klicken Sie auf die Schaltflche Link, um eine Liste mit mglichen Zielen fr die Weiterleitung zu ffnen. Nhere Informationen hierzu finden Sie unter Auswhlen eines Hyperlinkziels in der WebPlus-Hilfe. Whlen Sie die Option Website-Seite fr eine mobile Seite innerhalb Ihrer Website aus oder die Option Internet-Seite fr den Link zu einer Seite einer separaten mobilen Website (z. B. m.mywebsite.com/products/productX).

42

Einrichten von Websites und Seiten

4.

Aktivieren Sie die Option Umleiten unter der Bedingung, damit die Umleitung nur erfolgt, wenn ein Mobiltelefon oder ein Desktop-Computer auf die publizierte Webseite zugreifen. Standardmig wird die Umleitung aktiviert, wenn die Website ein mobiles Gert erkennt. Sie knnen die Umleitung aber auch von mobilen auf Desktop-Seiten festlegen oder dann durchfhren lassen, wenn bestimmte Bildschirmabmessungen erkannt werden. Legen Sie eine passende Verzgerungszeit fest. Hierdurch knnen die Website-Besucher die DesktopSeite kurz betrachten, bevor die Umleitung zu der mobilen Seite gestartet wird. Klicken Sie auf die Schaltflche OK. Standardmig wird die Umleitung dadurch aktiviert, dass die Website den Browser ihrer Besucher erkennt (z. B. Firefox oder Firefox Mobile). Um die Suchmaschinenoptimierung mglichst effizient zu gestalten, sollten Sie stets die Website-Besucher zwischen Seiten mit gleichen Inhalten umleiten. Erstellen Sie als die Umleitung von der Desktop-Seite fr Produkt X auf die mobile Seite fr Produkt X.

5.

6.

Arbeiten mit der Website-Struktur


Bei der Struktur einer Website sind die physikalische Position der Seiten oder ihr Speicherplatz vllig unwichtig. Bei der WebsiteStruktur kommt es auf die logische Anordnung der verschiedenen Website-Inhalte an, sodass die Besucher der Website einfacher durch die fr sie interessanten Themengebiete navigieren knnen. Eines der wichtigsten Organisationsprinzipien, das Sie auch mit WebPlus beherzigen sollten, ist die umgekehrte Baumstruktur, die mit der Startseite (Homepage) beginnt und sich dann weiter in

Einrichten von Websites und Seiten

43

die anderen Seiten verzweigt. Dem Besucher Ihrer Website prsentieren sich die Inhalte dann in einer gewohnten, hierarchischen Anordnung, die in Sektionen und Strukturebenen unterteilt ist.

Eine Sektion ist eine Inhaltskategorie, die durch eine eigenstndige Seite in Ihrer Website reprsentiert wird, wie z. B. Home, Kontakt, Galerie, Produkte usw. Die wichtigen Hauptsektionen werden fr gewhnlich auf der Homepage einer Website und den anderen Sektionsseiten in Form einer Navigationsleiste prsentiert. Die Strukturebene entspricht der Anzahl Stufen (d. h. Links), die eine Seite von ihrer bergeordneten Seite in der Website entfernt ist. Die Homepage liegt immer auf der Strukturebene 1, fr gewhnlich zusammen mit den Menseiten der verschiedenen Sektionen. Durch diese hierarchische Anordnung knnen die Navigationsleisten eine einfache Klickstruktur fr die Website festlegen. Die Seiten eine Stufe unter den Menseiten fr die Sektionen liegen auf Stufe 2 und sind somit untergeordnete Seiten; die Sektionsseiten sind in diesem Fall die bergeordneten Seiten. Eine bergeordnete Seite namens Produkte knnten z. B. zwei untergeordnete Seiten namens Produkt1 und Produkt2 besitzen.

Anzeigen der Website-Struktur


Die Website-Struktur lsst sich ber zwei Optionen einblenden: die Studio-Registerkarte Website und die Website-Strukturansicht. Die zweite Variante ist ideal fr die Darstellung groer Websites. Prfen der Struktur ber die Studio-Registerkarte Website In WebPlus knnen Sie mit dem Website-Strukturbaum der Studio-Registerkarte Website die Inhalte Ihrer Website bequem

44

Einrichten von Websites und Seiten

in Sektionen und Stufen aufteilen. Eine Struktur knnte zum Beispiel wie folgt aussehen:

Mit dem Website-Strukturbaum knnen Sie die verschiedenen Bezge zwischen den Seiten auf unkomplizierte, visuelle Weise erstellen und eine Struktur schaffen, die den Inhalten Ihrer Website genau entspricht. Bei einer Website finden sich natrlich immer auch Linkverzweigungen von einer Seite auf beliebige andere Seiten, sodass ein dichtes Netzwerk von Verknpfungen entsteht. In dem Strukturbaum legen Sie nur die wichtigsten Bezge fest (horizontal und vertikal) - alle anderen Links knnen Sie spter gezielt auf den einzelnen Seiten erstellen. Durch einen logischen Aufbau der Sektionen und Strukturebenen wird die Website wesentlich bersichtlicher, sodass Sie die einzelnen Inhalte leichter verwalten, und die Besucher den Themen leichter folgen knnen. Mit WebPlus lassen sich schnell und einfach Navigationsleisten einfgen, die genau an Ihre Website-Struktur angepasst sind und als Wegweiser fr die Website-Besucher dienen. Prfen der Struktur ber die Website-Strukturansicht Fr groe Websites ist die Website-Strukturansicht eine gute Alternative zur Studio-Registerkarte Website und bietet eine Vollbilddarstellung aller Sektionen und Strukturebenen Ihrer Website. Die Seiten werden hierbei als Miniaturen in einer Baumstruktur angezeigt.

Einrichten von Websites und Seiten

45

Anzeigen der Website-Struktur

Klicken Sie in der Standardsymbolleiste auf die Option Website-Struktur.

Fr eine ausgewhlte Seite knnen Sie nun die blichen Verwaltungsaufgaben erledigen, wie z. B. Einfgen, Klonen und Lschen oder die Bearbeitung der Seiteneigenschaften. Verwenden Sie hierzu einfach die Kontextleiste der Website-Struktur oder klicken Sie mit der rechten Maustaste auf eine Seitenminiatur. ber die Symbolleiste knnen Sie ebenfalls Seiten anzeigen und per Vorschau prfen, in die Navigation einschlieen oder von der Navigation ausschlieen sowie die ausgewhlte(n) Seite(n) per QuickPublish publizieren. Besonders praktisch an dieser Strukturansicht ist, dass Sie durch einfaches Ziehen einer oder mehrerer ausgewhlter Seiten ihre Position innerhalb einer Strukturebene verndern oder die Seiten auch auf andere Strukturebenen verschieben knnen. Um mehrere Seiten auszuwhlen, markieren Sie die Seiten (auf einer oder unterschiedlichen Strukturebenen) durch Ziehen mit der Maus. Mchten Sie nicht aufeinander folgenden Miniaturen auswhlen, klicken Sie mit gedrckter Strg-Taste auf die Miniaturen.

46

Einrichten von Websites und Seiten

Fr die Sortierung knnen Sie eine Seite auf eine Zielseite ziehen, an der dann quadratische Marker eingeblendet werden. Ziehen Sie einfach die Seite auf einen Marker, um die Seite entsprechend zu platzieren.

Ziehen Sie die Seite auf A, wird die Seite vor der Zielseite in derselben Strukturebene eingefgt; bei B wird die Seite nach der Zielseite auf derselben Strukturebene platziert; bei C wird die Seite der Zielseite untergeordnet.

Wenn Sie eine bergeordnete Seite verschieben, bewegen Sie gleichzeitig auch ihre untergeordneten Seiten.

Festlegen der Website-Eigenschaften


In den Website-Eigenschaften legen Sie die Optionen fest, die fr die gesamte Website gelten sollen. Im Allgemeinen werden die wichtigsten Website-Eigenschaften (Seitenbreite, Seitenhhe usw.) automatisch festgelegt, wenn Sie eine Vorlage auswhlen oder eine Website von Grund auf neu entwerfen. Die anderen Einstellungen mssen Sie hufig nicht ndern. Dies ist jedoch jederzeit mglich. Einige Optionen aus den Website-Eigenschaften, wie die Seitendarstellung und Einstellungen fr die Suchmaschinenoptimierung, sind ber das Dialogfeld

Einrichten von Websites und Seiten

47

Seiteneigenschaften (siehe Seite 61) auch fr einzelne Seiten verfgbar. Hier knnen Sie die globalen Vorgaben der WebsiteEigenschaften ergnzen oder auch vollstndig durch lokale Werte fr einzelne Seiten auer Kraft setzen. Die Website-Eigenschaften lassen sich wie folgt prfen oder bearbeiten:

Klicken Sie im Men Bearbeiten auf den Eintrag Website-Eigenschaften. Es wird nun das Dialogfeld Website-Eigenschaften geffnet. Klicken Sie in der linken Liste einfach auf eine Kategorie, um in der rechten Fensterhlfte die entsprechenden Optionen einzublenden.

Arbeiten mit Seiten und Master-Seiten


Vom Designstandpunkt aus betrachtet besteht jede WebPlus-Seite aus einer Seite im Vordergrund und einer Master-Seite im Hintergrund.

Die Master-Seiten sind ein wichtiger Strukturbaustein Ihrer WebPlus-Website, da Sie auf diesen Seiten alle Objekte und Layoutelemente platzieren knnen, die auf mehr als einer Seite verwendet werden, wie z. B. Logos, Hintergrundbilder, Navigationsleisten oder Umrandungen. Der wichtigste Punkt bei

48

Einrichten von Websites und Seiten

der Arbeit mit Master-Seiten ist, dass sich diese Seiten mehreren Seiten zuweisen lassen (siehe folgende Abbildung). Die Elemente auf den Master-Seiten werden dann auch auf allen Seiten eingeblendet, die sich auf diese Master-Seite beziehen. Zustzlich zu diesen gemeinsam genutzten Hintergrundelementen legen Sie dann fr jede einzelne Seite die individuellen Layoutbausteine wie Texte, Bilder usw. fest.

Die Studio-Registerkarte Website besteht aus einem oberen Feld fr Master-Seiten und einem unteren Feld fr die Website-Struktur Ihrer Standardseiten. Fr jede in diesem Feld aufgelistete Seite wird ebenfalls die Master-Seite angezeigt, die Sie der Seite zugewiesen haben. Um das Design der Seiten Ihrer Website zu variieren, knnen Sie ebenfalls mehr als eine Master-Seite erstellen (siehe Hinzufgen, Entfernen und Neuordnen von Seiten auf Seite 53). Nachdem Sie mehrere Master-Seiten angelegt haben, knnen Sie diese den Webseiten einzeln zuweisen oder auch mehrere Master-Seiten fr eine Seite festlegen.

Einrichten von Websites und Seiten

49

Zuweisen anderer Master-Seiten


Standardmig werden alle fr eine Website neu angelegten Seiten mit der Master-Seite A erstellt. Mchten Sie jedoch eine andere Master-Seite verwenden, weisen Sie der Seite einfach Ihre gewnschte Master-Seite zu und ersetzen die ursprngliche Master-Seite. Zuweisen anderer Master-Seiten zu Seiten 1. Klicken Sie in der Studio-Registerkarte Website mit der rechten Maustaste auf den Eintrag einer Seite und in dem Kontextmen auf Seiteneigenschaften. Deaktivieren Sie in der Kategorie Master-Seiten des nun geffneten Dialogfeldes die Option der ursprnglichen Master-Seite und whlen Sie die gewnschte Master-Seite per Mausklick aus. Klicken Sie auf die Schaltflche OK.

2.

3.

Aufheben der Zuweisung einer Master-Seite

Deaktivieren Sie den Eintrag der Master-Seite in der Kategorie Master-Seite des Dialogfelds Seiteneigenschaften. Wenn Sie alle Master-Seiten deaktivieren, verwendet die Seite die Website-Darstellung, die Sie in den Website-Eigenschaften (Bearbeiten > WebsiteEigenschaften) festgelegt haben.

Zuweisen mehrerer Master-Seiten


Mit WebPlus knnen Sie fr eine Webseite auch mehrere MasterSeiten festlegen, um das Design der Seite modular aus mehreren Bereichen aufzubauen. Hierbei knnen Sie auch die Reihenfolge der Master-Seiten relativ zueinander und zu der Webseite festlegen

50

Einrichten von Websites und Seiten

und somit die Abfolge bestimmen, in der die entsprechenden Objekte auf der Seite platziert werden. Ein Beispiel: Ihre Website verwendet zwei Designs aus den Seiten Master A und Master B. Mit dem Dialogfeld Seiteneigenschaften knnen Sie Master B mit dem IPSUMText vor der ausgewhlten Seite platzieren, sodass Master A als Seitenhintergrund fungiert.

Zuweisen mehrerer Master-Seiten zu einer Webseite 1. Klicken Sie in der Studio-Registerkarte Website mit der rechten Maustaste auf den Eintrag einer Seite und in dem Kontextmen auf Seiteneigenschaften. Klicken Sie in der Kategorie Master-Seiten des Dialogfelds auf die Eintrge mehrerer Master-Seiten.

2.

3.

Klicken Sie auf die Schaltflche OK. Die Seite verwendet nun alle Seitenelemente der ausgewhlten Master-Seiten.

Einrichten von Websites und Seiten

51

In der Website-Struktur der Studio-Registerkarte Website werden alle Seiten mit einem Pluszeichen markiert (anstelle eines Buchstabens wie A, B usw.), denen mehrere Master-Seiten zugewiesen sind.

Neuordnen der Seiteninhalte und Master-Seiten

Whlen Sie den Seiteneintrag in der Kategorie MasterSeiten des Dialogfelds Seiteneigenschaften aus und klicken Sie auf eine der Schaltflchen Aufwrts oder Abwrts.

Bearbeiten von Objekten auf Master-Seiten


Wenn Sie mit Seiten arbeiten, denen Master-Seiten zugewiesen sind, tragen die Objekte der Master-Seite zu dem Aufbau der Seite bei. Sie knnen diese Objekte schnell und einfach von der Webseite aus bearbeiten, indem Sie ein Objekt auswhlen und die darunter eingeblendeten Symbole verwenden.

Bearbeiten von Objekten der Master-Seite 1. Whlen Sie auf der normalen Seite das Objekt einer Master-Seite aus, um die entsprechende Symbolleiste einzublenden. Klicken Sie auf das Symbol Auf Master-Seite bearbeiten. Die Master-Seite wird nun zur Bearbeitung geffnet.

2.

52

Einrichten von Websites und Seiten

Manchmal mchten Sie vielleicht die Seitenobjekte, die von der Master-Seite stammen, bearbeiten, ohne die Master-Seite zu verndern, sodass sich Ihre nderung nur auf die aktuelle Seite auswirkt und nicht auch auf alle anderen Seiten, denen die MasterSeite zugewiesen ist. Sie knnen in diesen Fllen die Objekte von der Master-Seite auf die normale Webseite bernehmen. Hierbei wird das Objekt der Master-Seite im Grunde kopiert und das auf der Webseite platzierte Original durch eine Kopie ersetzt, die Sie beliebig ndern knnen. bernehmen der Objekte von einer Master-Seite 1. Whlen Sie auf der normalen Seite das Objekt einer Master-Seite aus, um die entsprechende Symbolleiste einzublenden. Klicken Sie auf das Symbol Aus Master-Seite bernehmen. Das Original wird nun auf der Webseite durch eine Kopie ersetzt, die Sie beliebig verndern knnen, ohne die Master-Seite zu beeinflussen. Alle anderen Seiten, denen die Master-Seite zugewiesen ist, bleiben von dieser nderung ebenfalls verschont. Wenn Sie Ihre Meinung spter ndern, knnen Sie das genderte Objekt jederzeit wieder durch die Originalversion der Master-Seite ersetzen. Zuweisen der ursprnglichen Objektversion 1. Whlen Sie auf der normalen Seite das bernommene Objekt einer Master-Seite aus, um die entsprechende Symbolleiste einzublenden. Klicken Sie auf das Symbol Auf Master-Seite zurcksetzen.

2.

2.

Einrichten von Websites und Seiten

53

Hinzufgen, Entfernen und Neuordnen von Seiten


In der Studio-Registerkarte Website stehen Ihnen die folgenden Optionen zur Verfgung.

Einfgen von Seiten Lschen von Seiten. Einfgen einer oder mehrerer MasterSeiten.

Anordnen der Seiten in der Website-Struktur durch Klicken und Ziehen. Einfgen von Seiten aus einer installierten Designvorlage. Einfgen von Offsite-Links. Einfgen von HTML-Seiten. Festlegen einer Seite als Homepage.

In dem oberen Feld Master-Seiten der Registerkarte arbeiten Sie mit den Master-Seiten. In dem unteren Feld Seiten befindet sich der Strukturbaum der Website, mit dem Sie auf die normalen Seiten zugreifen knnen. Da WebPlus auch HTML-Seiten und Offsite-Links untersttzt, lassen sich diese Elemente genau so in dem Website-Strukturbaum platzieren wie normale Seiten. Die Symbole fr HTML-Seiten und Offsite-Links unterscheiden sich von denen fr Standardseiten,

54

Einrichten von Websites und Seiten

sodass Sie auf einen Blick erkennen knnen, dass sich hinter diesen Eintrgen reiner HTML-Code (siehe WebPlus-Hilfe) bzw. ein Link zu einer externen Webseite verbirgt.

Einfgen von Seiten


Hinzufgen einer neuen, leeren Seite 1. Whlen Sie in dem unteren Feld Seiten der StudioRegisterkarte Website die Seite aus dem WebsiteStrukturbaum aus, nach der Sie die neue Seite einfgen mchten. Klicken Sie ber dem Feld Seiten der StudioRegisterkarte Website auf den nach unten zeigenden Pfeil des Symbols Neue Seite oder neuen Link hinzufgen. Klicken Sie in dem nun geffneten Men auf Neue leere Seite. Whlen Sie in dem Dialogfeld Seiteneigenschaften die Optionen fr die neue Seite aus (siehe Festlegen der Seiteneigenschaften auf Seite 61). Klicken Sie auf die Schaltflche OK.

2.

3.

4.

Die neue Seite wird nun an der von Ihnen ausgewhlten Position der Website-Struktur eingefgt. Die Abmessungen der Seite werden aus den Website-Eigenschaften (siehe Seite 46) bernommen. Sie knnen die Position und Hierarchiestufe der Seite jederzeit verndern oder der Seite eine andere Master-Seite zuweisen (siehe Neuordnen von Seiten oder Zuweisen anderer Master-Seiten auf Seite 56 und 49). Alle neu erstellten Seiten verwenden stets die aktuell in dem Dialogfeld Website-Eigenschaften festgelegten Werte (Bearbeiten > Website-Eigenschaften), wie z. B. die Standardseitengre und -ausrichtung, sofern

Einrichten von Websites und Seiten

55

Sie diese Optionen nicht mit dem Dialogfeld Seiteneigenschaften auer Kraft setzen. Leere Seiten knnen ebenfalls auf einer Master-Seite basieren (z. B. wenn Sie die Website mit einer Vorlage erstellt haben) und daher bereits die Seitenelemente enthalten, die auf der Master-Seite festgelegt sind.

Einfgen von Master-Seiten


Hinzufgen einer neuen Master-Seite 1. Klicken Sie in der Studio-Registerkarte Website auf die Schaltflche Master Seiten >, um das Feld MasterSeiten zu ffnen. Klicken Sie ber dem Feld Master-Seiten auf das Symbol Neue Master-Seite hinzufgen.

2.

In dem Feld Master-Seiten der Studio-Registerkarte Website wird nun eine neue Master-Seite angezeigt. Wenn Sie bestimmte Master-Seiten fr eine Seite festlegen mchten, gehen Sie wie unter Arbeiten mit Seiten und Master-Seiten auf Seite 47 beschrieben vor.

Lschen von Seiten


Lschen einer Seite oder Master-Seite 1. Whlen Sie in der Studio-Registerkarte Website die zu lschende Seite oder Master-Seite mit einem Klick auf ihren Eintrag aus. Klicken Sie ber dem entsprechenden Fenster auf die Option Ausgewhlte Seite lschen, um die Seite zu entfernen.

2.

56

Einrichten von Websites und Seiten

Wenn Sie eine Seite lschen, knnen Sie wahlweise alle Hyperlinks lschen, die von Ihrer Website auf die gelschte Seite verweisen, oder die Hyperlinks auf eine andere Seite umleiten. Alle Hyperlinks, die auf Anker der gelschten Seite verweisen, lassen sich ebenfalls lschen.

Hinzufgen von HTML-Seiten


HTML-Seiten lassen sich in die Website-Struktur jeder Website einfgen. Genau wie Standardseiten knnen Sie diese Seiten auch in die Navigation einbinden. Einfgen einer HTML-Seite 1. Whlen Sie in dem unteren Feld Seiten der StudioRegisterkarte Website die Seite aus, nach der Sie die neue Seite einfgen mchten. Klicken Sie ber dem Feld Seiten der StudioRegisterkarte Website auf den nach unten zeigenden Pfeil des Symbols Neue Seite oder neuen Link hinzufgen. Klicken Sie in dem nun geffneten Men auf Neue HTML-Seite

2.

Die neue HTML-Seite wird nun zu der Registerkarte Website hinzugefgt. Nhere Informationen hierzu finden Sie unter dem Thema Erstellen von HTML-Seiten in der WebPlus-Hilfe.

Neuordnen von Seiten


Mit der Studio-Registerkarte Website knnen Sie Seiten nicht nur hinzufgen oder lschen, sondern auch innerhalb der Website an beliebige Positionen verschieben. Mithilfe der Hierarchie aus bergeordneten und untergeordneten Seiten lassen sich die einzelnen Seiten bequem durch einfaches Ziehen mit der Maus

Einrichten von Websites und Seiten

57

oder ber Schaltflchen verschieben. Fr das Verschieben von Seiten stehen Ihnen unterschiedliche Ziele zur Verfgung:

Eine neue Position innerhalb der Reihenfolge (aufwrts oder abwrts) einer einzigen Strukturebene. Eine bergeordnete Strukturebene Eine untergeordnete Strukturebene

Verschieben einer Seite 1. 2. 3. ffnen Sie die Studio-Registerkarte Website. Whlen Sie mit einem einfachen Mausklick die gewnschte Seite im Strukturbaum der Website aus. (Per Drag & Drop) Ziehen Sie den Seiteneintrag mit gedrckter Maustaste nach oben oder nach unten auf eine neue Position des Strukturbaums. Der Mauszeiger gibt Ihnen einen Anhaltspunkt zu der Positionierung der verschobenen Seite in Bezug auf die Seite, ber der sich der Mauszeiger gerade befindet: Die Seite wird auf derselben Stufe eingefgt, wie die markierte Seite und direkt nach der markierten platziert. Die Seite wird als untergeordnete Seite der markierten Zielseite platziert.

Einfgen von Vorlagenseiten


Das Einfgen leerer Seiten ist sehr praktisch, wenn Sie eine Website von Grund auf neu entwerfen. Mchten Sie jedoch etwas Zeit sparen, knnen Sie auch eine vorgefertigte Seite aus einer der WebPlus-Vorlagen einfgen. Damit das Originaldesign der Seite erhalten bleibt, lsst sich die Master-Seite, die dieser Seite

58

Einrichten von Websites und Seiten

zugewiesen ist, direkt zusammen mit der Seite in Ihr Projekt importieren. Einfgen einer neuen Seite aus einer Vorlage 1. Whlen Sie in der Studio-Registerkarte Website die Seite aus, nach der die neue Seite eingefgt werden soll. Klicken Sie ber dem Feld Seiten der StudioRegisterkarte Website auf den nach unten zeigenden Pfeil des Symbols Neue Seite oder neuen Link hinzufgen. Klicken Sie in dem nun geffneten Men auf Neue Vorlagenseite. Whlen Sie in dem Dialogfeld Neue Vorlagenseite einfgen eine Vorlage in der linken Liste aus und markieren Sie dann die Seite mit einem Hkchen, die Sie einfgen mchten (Sie knnen ebenfalls mehrere Seiten auswhlen).

2.

3.

4.

Mit WebPlus knnen Sie bequem festlegen, ob die mit einer Seite verknpfte Master-Seite ebenfalls kopiert werden soll. Klicken Sie hierzu in der linken oberen Ecke auf einen der folgenden Eintrge des Dropdownmens:

Master-Seite kopieren: Mit dieser Einstellung wird die Master-Seite immer in Ihre Website kopiert. Master-Seite vergleichen und kopieren: Hierbei prft das Programm, ob die Master-Seite bereits in

Einrichten von Websites und Seiten

59

Ihrer Website vorhanden ist. Ist die Master-Seite noch nicht Teil Ihrer Website, wird sie kopiert.

5.

Ohne Master-Seite: Die Master-Seite wird unter keinen Umstnden in Ihre Website kopiert.

Klicken Sie auf die Schaltflche ffnen. Die Seite wird nun in die Studio-Registerkarte Website eingefgt.

Einfgen von Offsite-Links


Sie knnen ebenfalls einen Offsite-Link zu Ihrer Website-Struktur hinzufgen. Fr gewhnlich handelt es sich hierbei um Links zu Seiten oder Ressourcen, die kein Teil Ihrer Website, in der Navigationsstruktur Ihrer Website jedoch durchaus hilfreich sind. Der Offsite-Link wird in der Website-Struktur und in den Navigationselementen angezeigt, sodass Sie ihn genauso bearbeiten knnen, wie eine Seite aus Ihrer Website. Hinzufgen eines Offsite-Links 1. Whlen Sie in der Studio-Registerkarte Website die Seite aus, nach der die neue Seite eingefgt werden soll. Klicken Sie ber dem Feld Seiten der StudioRegisterkarte Website auf den nach unten zeigenden Pfeil des Symbols Neue Seite oder neuen Link hinzufgen. Klicken Sie in dem nun geffneten Men auf Neuer Offsite-Link. In der Registerkarte Offsite-Link stehen Ihnen verschiedene Linkoptionen zur Verfgung:

2.

3.

Geben Sie einen Mennamen ein, um den OffsiteLink in dem Strukturbaum der Website eindeutig zu identifizieren. Dieser Name bernimmt dieselbe Funktion wie ein Seitenname.

60

Einrichten von Websites und Seiten

Mchten Sie den Link in Ihre Website-Navigation integrieren, aktivieren Sie die Option In Navigation einbeziehen. Mchten Sie die Seite als Untermeneintrag in Navigationsleisten mit horizontalen Trennlinien unter oder ber der Seite markieren, aktivieren Sie unter Trennelemente die Option(en) Vor und/oder Nach. Mchten Sie zustzlichen Text zu der Seite in dem Untermenelement der Navigationsleiste hinzufgen, geben Sie den Text in das Feld Beschreibung ein.

4.

Whlen Sie in der Registerkarte Hyperlinks den Zieltyp fr den Offsite-Link aus (z. B. Smart-Objekt) und das Ziel (z. B. ein zuvor erstelltes Forum). Nhere Informationen hierzu finden Sie unter Auswhlen eines Hyperlinkziels in der WebPlus-Hilfe. Whlen Sie in der Registerkarte Zielfenster ein Fenster oder einen Rahmen aus, in dem das Ziel angezeigt werden soll. Klicken Sie auf die Schaltflche OK.

5.

6.

Festlegen der Homepage


Festlegen einer Website als Homepage

Klicken Sie in der Studio-Registerkarte Website mit der rechten Maustaste auf eine Standardseite und in dem Kontextmen auf Als Homepage festlegen.

Einrichten von Websites und Seiten

61

Festlegen der Seiteneigenschaften


Ihre WebPlus-Website ist nach einer bestimmten Struktur aufgebaut und umfasst die eigentliche Website, eine oder mehrere Master-Seiten und einige einzelne Seiten. Fr jeden Teil dieser Struktur knnen Sie unterschiedliche Eigenschaften festlegen, die entscheidend zu der Darstellung und Funktionalitt der publizierten Website im Internet beitragen. Wenn Sie eine neue Website mit einer WebPlus-Vorlage oder von Grund auf neu erstellen, knnen Sie entweder die Standardeinstellungen bernehmen oder die einzelnen Werte flexibel anpassen. Die Eigenschaften fr Seiten (Master-Seiten) lassen sich wie folgt prfen oder bearbeiten:

Klicken Sie mit der rechten Maustaste auf die aktive Seite und in ihrem Kontextmen auf Seiteneigenschaften.

Einfgen von Hintergrnden


WebPlus enthlt eine breite Palette an Hintergrnden, die Sie sowohl fr alle Seiten Ihrer Website als auch gezielt fr einzelne Seiten festlegen knnen.

Diese Hintergrnde gehren zu den Quelldateien (siehe Seite 263), die in Form verschiedener Quelldatei-Pakete verfgbar sind, wie z. B. Fuzeilen, Verlufe, Kopfzeilen, Muster, Foto und Texturen.

62

Einrichten von Websites und Seiten

Darber hinaus knnen Sie fr den Hintergrund einzelner Seiten (oder aller Seiten Ihrer Website) auch bestimmte Farben ber die Seiteneigenschaften und die Website-Eigenschaften (siehe Seite 61 und 46) festlegen. Hierfr lassen sich sowohl normale Farben als auch Schemafarben verwenden. Legen Sie das Hintergrunddesign ber die WebsiteEinstellungen fest, bernehmen alle Seiten, die Sie neu erstellen, automatisch diese Einstellungen. Sie knnen jedoch diese Vorgaben auch fr einzelne Seiten umgehen und dann die Seiten- und Hintergrundeinstellungen individuell festlegen.

Einfgen von Hintergrundbildern


Einfgen eines Hintergrundbilds fr Ihre Seite 1. 2. 3. Klicken Sie in der Studio-Registerkarte Quelldateien auf Durchsuchen. Klicken Sie in dem Dialogfeld Quelldatei-Browser unter Kategorien auf Hintergrnde. Durchsuchen Sie die Quelldatei-Pakete nach einem passenden Hintergrund. Klicken Sie entweder auf einen einzelnen Hintergrund oder auf Alles hinzufgen, wenn Sie alle Hintergrnde des Pakets bernehmen mchten. Ausgewhlte Miniaturansichten werden stets mit einem Hkchen markiert. Klicken Sie als Letztes auf die Schaltflche Schlieen. Die Hintergrnde werden nun in der Kategorie Hintergrnde der Studio-Registerkarte aufgelistet. ffnen Sie die gewnschte Seite im Arbeitsbereich und ziehen Sie die Miniatur des Hintergrunds direkt auf die Seite.

4.

5.

Einrichten von Websites und Seiten

63

6.

Whlen Sie in dem nun angezeigten Dialogfeld aus, ob der Hintergrund fr alle Seiten gelten soll (d. h. als Standardhintergrund der Website festgelegt wird) oder nur fr die aktuelle Seite. Mit der ersten Option ersetzen Sie alle Hintergrnde in Seiten, die fr die Verwendung der Website-Einstellungen konfiguriert sind. Klicken Sie auf die Schaltflche OK.

7.

Alternativ knnen Sie auch ein Hintergrundbild ber den Menpunkt Bearbeiten > Website-Eigenschaften oder Bearbeiten > Seiteneigenschaften festlegen. Legen Sie einfach die gewnschte Einstellung ber die Option Hintergrund fest.

Arbeiten mit mehreren Bildern als Hintergrund


Wenn Sie den Hintergrund Ihrer Seiten etwas aufwendiger gestalten mchten, knnen Sie mit WebPlus auch mehrere Bilder kombinieren. Jedes Bild lsst sich hierbei als Hintergrund fr ein wichtiges Seitenelement festlegen, wie z. B. Kopfzeile, Fuzeile, Kachelung oder Logo.

(A) Kopfzeile, (B) Fuzeile, (C) Gekachelter Hintergrund und (D) Firmenlogo.

64

Einrichten von Websites und Seiten

Besonders professionelle Ergebnisse erzielen Sie, wenn Sie Hintergrnde aus mehreren Bildern mit Bildtransparenzen und Objekten mit Verlaufstransparenzen kombinieren. Entwerfen von Hintergrnden mit mehreren Bildern 1. Klicken Sie auf den Menpunkt Bearbeiten > WebsiteEigenschaften und dann auf die Option Hintergrund. Klicken Sie auf Hinzufgen, um die Bilder in Ihren Hintergrund zu integrieren. Stellen Sie die Optionen fr Wiederholung und Position ein. Die Bilder werden in Relation zu den Kanten des Browserfensters platziert. Klicken Sie auf die Schaltflche OK.

2.

3.

Alle Bilder werden nun in der Liste Hintergrundbilder aufgefhrt. Mit den Schaltflchen neben der Liste knnen Sie ein ausgewhltes Bild in der Liste aufwrts und abwrts verschieben. Auf diese Weise lsst sich flexibel festlegen, wie jedes einzelne Bild in Relation zu den anderen Bildern angezeigt wird. Das Bild, dessen Eintrag am hchsten in der Liste steht, wird vor allen anderen Bildern in Ihrem Hintergrund angezeigt.

Festlegen der Seiten- und Hintergrundfarbe


Festlegen der Farben fr Seiten und Hintergrund 1. 2. Klicken Sie auf den Menpunkt Bearbeiten > WebsiteEigenschaften. Klicken Sie in dem Dialogfeld auf die Option Seite > Hintergrund und dann auf den Pfeil der Option Seitenfarbe oder Hintergrundfarbe.

Einrichten von Websites und Seiten

65

3.

Whlen Sie einfach eine andere Farbe ber die Farbfelder aus, die Schemafarben und andere Farben anzeigen. Mit dem Eintrag Weitere Farben... ffnen Sie das Dialogfeld Farbauswahl. Klicken Sie auf die Schaltflche OK. Wenn Sie die Seitenfarbe als transparent festlegen, wird der darunter liegende Seitenhintergrund sichtbar, sodass die Seitenabmessungen unsichtbar scheinen. Der eigentliche Inhalt der Seite (Texte, Bilder usw.) wird nach wie vor nur innerhalb des Bereichs angezeigt, den Sie als Seitenabmessungen festgelegt haben. Wenn Sie ein Bild mit transparenten Bereichen als Hintergrund verwenden, ist die Hintergrundfarbe durch diese Bereiche sichtbar. Bilder ohne Transparenz verdecken die Hintergrundfarbe vollstndig.

4.

Weitere Informationen zu den anderen Einstellungen finden Sie in der Hilfe zu WebPlus.

Festlegen benutzerdefinierter Hintergrnde


Sie knnen fr einzelne Standardseiten oder Master-Seiten die in den Website-Eigenschaften festgelegte Seitenfarbe, Hintergrundfarbe sowie das Hintergrundbild ignorieren und durch individuelle Vorgaben ersetzen. Wenn Sie die Einstellungen fr eine Master-Seite ndern, beeinflussen Sie damit auch die Darstellung aller Standardseiten, denen diese Master-Seite zugewiesen ist. Seiten, denen Sie keine Master-Seite zugewiesen haben, verwenden standardmig die Einstellungen des WebsiteHintergrunds. Sie knnen diese Einstellungen jedoch ber die Kategorie Hintergrund des Dialogfelds Seiteneigenschaften auer Kraft setzen.

66

Einrichten von Websites und Seiten

Festlegen eigener Hintergrnde 1. ffnen Sie in dem Dialogfeld die Kategorie Hintergrund und legen Sie in dem Dropdownfeld Hintergrund die Option Seitenhintergrund verwenden fest. Klicken Sie auf den nach unten zeigenden Pfeil der Tafel Seitenfarbe und whlen Sie eine Farbe aus. Die Schemafarben werden in diesem Men mit ihren entsprechenden Nummern angezeigt. Wiederholen Sie den vorangehenden Schritt fr die Hintergrundfarbe. ODER Fr Hintergrundbilder klicken Sie auf Hinzufgen und whlen dann ein oder mehrere Bilder per Dialogfeld aus. Klicken Sie auf die Schaltflche OK.

2.

3.

4.

Einrichten von Websites und Seiten

67

Arbeiten mit Farbschemata


WebPlus bietet eine breite Palette an Farbschemata, die Sie bequem auswhlen knnen, wenn Sie eine Website mit einer Designvorlage erstellen oder von Grund auf neu entwerfen. Bei der Arbeit mit Vorlagen-basierenden Websites bestimmt das Farbschema den Look Ihrer Seite und legt z. B. Farben fr Hyperlinks fest. Alle Vorlagen verwenden ein Farbschema, sodass Sie durch Wechseln des Schemas mit nur einem Mausklick schnell und einfach die Stimmung der Website ndern knnen!

Farbschemata: (A) Koralle, (B) Smoothie und (C) Standard

Wenn Sie die Vorlage fr eine neue Website auswhlen, knnen Sie eines von drei Farbschemata festlegen, die speziell fr die ausgewhlte Vorlage entworfen wurden, oder auch eines der globalen Farbschemata verwenden. Nhere Informationen hierzu finden Sie unter Erstellen einer Website mit einer Designvorlage auf Seite 30.

68

Einrichten von Websites und Seiten

Wie funktionieren Farbschemata?

Farbschemata in WebPlus funktionieren ein wenig wie das Malen nach Zahlen. Sie weisen den verschiedenen Designelementen Ihrer Seite eine Schemafarbe zu, fr die innerhalb des Farbschemas eine bestimmte Nummer festgelegt ist. Diese Farben werden in Farbfeldern gespeichert (nummeriert von 1 bis 12), die in der Studio-Registerkarte Farbfelder aufgelistet sind.

Das Farbschema Smoothie

Diese Farbfelder stehen fr das Website-Farbschema. Von hier aus knnen Sie den verschiedenen Elementen Ihrer Webseiten die einzelnen Schemafarben zuweisen. Bei den Designvorlagen haben wir diese Zuordnung bereits fr Sie durchgefhrt. Wenn Sie nun ein anderes Farbschema auswhlen, werden die aktuellen Schemafarben durch die entsprechenden Farben des neuen Schemas ausgetauscht, und die Website erhlt einen vllig anderen Look.

Einrichten von Websites und Seiten

69

Wenn Sie Ihren Schemafarben eigene Namen verleihen, knnen Sie spter schnell mit einem Blick feststellen, welche Aufgabe die Farbe in Ihrer Website bernimmt. Sie knnen sich hierbei an den Beschreibungen auf der rechten Seite orientieren. Nhere Informationen hierzu finden Sie unter Festlegen von Namen fr Schemafarben auf Seite 70. Fr die Hyperlinks in Textformatvorlagen knnen Sie ebenfalls Schemafarben festlegen, die dann in der gesamten Website verwendet werden. Dies ist besonders praktisch, wenn Sie die Hyperlinkfarben von berschriften (z. B. berschrift 1, berschrift 2) anders frben mchten als die des Textkrpers.

Auswhlen von Farbschemata


Auswhlen eines vordefinierten Farbschemas 1. 2. Klicken Sie in der Standardkontextleiste auf Farbschema-Designer. Whlen Sie in der Registerkarte Farbschemata des Dialogfelds ein anderes Farbschema in der Liste aus und klicken Sie auf OK.

70

Einrichten von Websites und Seiten

Das Programm frbt nun alle Elemente der Website, denen eine der 12 Farbnummern des alten Schemas zugewiesen war, in der entsprechenden Farbe des neuen Schemas ein. Sie knnen fr jede Website immer nur ein aktives Farbschema festlegen, das als Website-Farbschema bezeichnet und stets in der Studio-Registerkarte Farbfelder angezeigt wird. Wenn Sie die Website speichern, wird ihr aktuelles Farbschema automatisch zusammen mit dem Dokument gespeichert. Mit dem Farbschema-Designer knnen Sie ebenfalls Schemafarben ndern oder Ihre eigenen Farbschemata zusammenstellen (siehe WebPlus-Hilfe).

Festlegen von Namen fr Schemafarben


Bei 12 verschiedenen Schemafarben ist es manchmal schwierig, sich die Verwendungszwecke aller Farben zu merken. Sie knnen in dem Farbschema-Designer jedoch fr jede Schemafarbe einen aussagekrftigen Namen festlegen. Festlegen von Namen fr Schemafarben 1. 2. Klicken Sie in der Standardkontextleiste auf Farbschema-Designer. Geben Sie in die Registerkarte Website-Farbnamen einen Namen fr die einzelnen Schemafarben ein, an denen Sie ihren Verwendungszweck gut erkennen knnen, und klicken Sie auf OK.

Ihre selbst festgelegten Namen fr die Schemafarben werden nun als QuickInfos angezeigt, wenn Sie den Mauszeiger in der StudioRegisterkarte Farbfelder auf eine Schemafarbe bewegen.

Einrichten von Websites und Seiten

71

Weitere Informationen zu dem Festlegen von Schemafarben fr Website-Hintergrund, Seitenfarbe, Hyperlinks, Textformatvorlagen und andere Seitenobjekte finden Sie in der WebPlus-Hilfe.

Die dynamischen Fhrungslinien


Anstatt fr eine genaue Skalierung und Platzierung Ihrer Objekte manuell Seitenfhrungslinien festzulegen oder Objekte auszuwhlen und dann mit Transformations- und Ausrichtungsoptionen zu bearbeiten, knnen Sie in WebPlus auch dynamische Fhrungslinien verwenden. Wenn Sie ein Objekt verndern, bietet Ihnen WebPlus visuelle Vorschlge fr die Ausrichtungsoptionen, wie z. B. an der linken, rechten, oberen oder unteren Kante eines Objekts sowie der Mitte des Objekts oder der Seitenmitte. Durch Ziehen ber Objekte oder Auswhlen platzierter Objekte knnen Sie diese Ausrichtungshilfen fr maximal drei Seitenelemente anzeigen lassen. Standardmig sind die dynamischen Fhrungslinien aktiviert. Sie knnen diese Linien aber auch jederzeit deaktivieren und wieder reaktivieren. Aktivieren/Deaktivieren dynamischer Fhrungslinien 1. 2. Klicken Sie in der Standardkontextleiste auf die Schaltflche Optionen. Klicken Sie auf den Menpunkt Layout > Automatische Ausrichtung und aktivieren/deaktivieren Sie die Option Dynamische Fhrungslinien verwenden. Um die Ausrichtung auch fr die Seitenmitte zu aktivieren, mssen Sie auch die Option Seitenmitte auswhlen.

72

Einrichten von Websites und Seiten

Ausrichten von Objekten


Das folgende Beispiel zeigt die Arbeit mit dynamischen Fhrungslinien. Das dunkle Objekt ist bereits auf der Seite platziert, whrend das helle gerade an seine Position gezogen wird.

Links

Rechts

Oben

Unten

Objektmitte

Einrichten von Websites und Seiten

73

Seitenmitte

Sie knnen je nach Position Ihres gezogenen Objekts auch die obigen Ausrichtungsoptionen kombinieren, um z. B. eine Ausrichtung rechts und unten vorzunehmen. Dynamische Fhrungslinien werden rot oder blau angezeigt - je nachdem, ob die Ausrichtung an anderen Objekten oder der Seite erfolgt.

74

Einrichten von Websites und Seiten

Skalieren von Objekten


Das folgende Beispiel zeigt die Grennderung von Objekten mit dynamischen Fhrungslinien. Das dunkle Objekt ist bereits auf der Seite platziert, whrend das helle gerade an seine Position gezogen wird.

Die Layoutelemente

76

Die Layoutelemente

Die Layoutelemente

77

Einfgen von Textrahmen


Fr gewhnlich werden die Texte in WebPlus-Projekten in HTMLTextrahmen platziert, da sich diese Container sowohl fr einzelne Wrter und Abstze eignen als auch fr ganze Buchkapitel oder Zeitungsartikel. Neben den Rahmentexten knnen Sie auch knstlerische Texte fr einzelne berschriften und Spezialeffekte erstellen oder Tabellentexte fr eine zeilen- oder spaltenweise Darstellung (siehe auch Einfgen von Tabellen auf Seite 103).

Was sind Textrahmen?


Ein Textrahmen ist im Grund eine Miniaturseite, die Rahmentext enthlt, der in einem oder mehreren Abstzen durch den Rahmen fliet. Der Text in einem Rahmen wird in WebPlus als Story bezeichnet.

Fr ausgewhlte Rahmen zeigt das Programm automatisch die Begrenzungsrnder als Linie mit verschiedenen Ziehpunkten an. Um eine Einfgemarke fr Texte oder Bilder in einem Rahmen zu platzieren, klicken Sie einfach mit dem Zeigerwerkzeug in das Rahmeninnere. Sie knnen nun wie in einer Textverarbeitung den Rahmentext mit dem Zeiger beliebig auswhlen, kopieren usw. Nhere Informationen hierzu finden Sie unter dem Thema Bearbeiten von Texten auf einer Seite auf Seite 247. Wenn Sie einen Textrahmen verschieben, verndern Sie automatisch auch die Position seiner Story. Bei einer Grennderung des Textrahmens wird der Textfluss der Story automatisch an die neuen Abmessungen angepasst.

78

Die Layoutelemente

Erstellen von HTML-Rahmen


Rahmen lassen sich auf die gleiche Weise in Seiten einfgen, wie andere Objekte auch. Sie knnen alle Rahmen beliebig auswhlen, verschieben und skalieren. Die Grundform der Rahmen lsst sich jedoch nicht ndern. Erstellen eines Rahmens 1. Klicken Sie in der Kategorie Layoutelemente der Studio-Registerkarte QuickBuild auf das Symbol Textrahmen. Ziehen Sie den Cursor mit gedrckter Maustaste ber die Seite, um die Rahmenabmessungen selbst festzulegen. ODER Klicken Sie auf die Seite oder die Montageflche, um einen Rahmen in Standardgre zu erstellen. Lschen von Rahmen

2.

Whlen Sie den Rahmen aus und drcken Sie die Taste Entf. Enthlt der Rahmen eine Einfgemarke, lschen Sie mit der Taste Entf die Buchstaben nach dem Textcursor.

Einfgen von Text in einen Rahmen


Texte lassen sich auf unterschiedliche Weise in Rahmen einsetzen. Der Text wird dann automatisch in einen kompatiblen HTMLCode umgewandelt. Der integrierte Storyeditor WritePlus Whlen Sie einen Rahmen aus und klicken Sie in der Rahmenkontextleiste auf WritePlus.

Die Layoutelemente

79

Importieren von Texten

Klicken Sie mit der rechten Maustaste auf einen Rahmen und in dem Kontextmen auf Einfgen > Textdatei. Alternativ knnen Sie auch die Tastenkombination Strg+T drcken, um einen Text zu importieren. Aktivieren Sie das Zeigerwerkzeug, klicken Sie in den Rahmen, um eine Einfgemarke zu platzieren, und tippen Sie den Text ber Ihre Tastatur ein. Alternativ knnen Sie auch zuerst eine Textstelle markieren und dann durch Tippen ersetzen. Nhere Informationen hierzu finden Sie unter dem Thema Bearbeiten von Texten auf einer Seite auf Seite 247. Platzieren Sie eine Einfgemarke in dem Text und drcken Sie die Tastenkombination Strg+V. Whlen Sie den gewnschten Text in einem anderen Programm (z. B. einer Textverarbeitung) aus und ziehen Sie ihn bei gedrckter Maustaste auf die in WebPlus angezeigte Seite. Wenn Sie den Text auf einen ausgewhlten Rahmen ziehen, wird der Text im Anschluss an den vorhandenen Text platziert. Ist kein Rahmen ausgewhlt, erstellt das Programm einen neuen Rahmen fr den Text.

Direkte Texteingabe in den Rahmen

Einfgen ber die Zwischenablage Drag & Drop

80

Die Layoutelemente

Einrichten des Rahmenlayouts


Das Rahmenlayout bestimmt, wie der Text durch den Rahmen fliet. Wenn Sie einen Rahmen auswhlen und fr den Rahmen Rnder eingestellt sind, werden die Rahmenrnder als graue Strichlinien angezeigt. Diese Fhrungslinien bestimmen, wie der Text innerhalb des Rahmens fliet, indem sie den Abstand zwischen dem Text und der Rahmenkante vorgeben. Der Text eines Rahmens kann niemals auerhalb der Rahmenrnder platziert werden. Festlegen der Rahmenrnder

Whlen Sie den Rahmen aus und ziehen Sie die Spaltenfhrungslinien mit der Maus, um die Abmessungen der Rahmenspalte anzupassen.

(1)

(2)

(3)

Die obige Abbildung zeigt, wie sich der Mauszeiger verndert, wenn Sie ihn ber dem Begrenzungsrahmen (1) platzieren; nach einer Verschiebung nach innen, knnen Sie die Rahmenrnder (2) verndern; und nach einer Verschiebung nach unten lsst sich der obere Rahmenabstand (3) verschieben. Wenn Sie die Rahmenrnder festlegen, mssen Sie immer den Rahmen auswhlen und nicht den Rahmentext. Der Rahmen sollte nach dem Auswhlen von einer gleichfarbigen Linie umgeben sein. Wenn Sie die Rahmenrnder sehr exakt festlegen mchten, knnen Sie die gewnschten Werte fr den linken, rechten, oberen und unteren Rahmenrand auch in ein Dialogfeld eintragen.

Die Layoutelemente

81

Festlegen der Rahmenrnder 1. Whlen Sie den Rahmen aus und klicken Sie in der Rahmenkontextleiste auf das Symbol Textrahmen einrichten. Legen Sie in dem Dialogfeld unter Rahmenrnder die gewnschten Werte fr Links, Rechts, Oben und Unten fest.

2.

Anpassen von berlauftext


Die genaue Aufteilung des gesamten Textes in Rahmen gehrt zu den wichtigsten Punkten bei der Erstellung eines Webseitenlayouts. Enthlt ein Rahmen zu viel Storytext, speichert WebPlus den berschuss in einem berlaufbereich am unteren Ende des Rahmens. Der Text ist lediglich unsichtbar und wird nicht gelscht! An dem Symbol Textberlauf unter einem Rahmen erkennen Sie, dass zu viel Text vorhanden war und ein Teil in dem berlaufspeicher liegt. Sie mssen also diesen Text wieder einblenden, damit Ihre Website-Besucher nicht mitten im Satz abgeschnitten werden. Hierzu stehen Ihnen verschiedene Optionen zur Verfgung:

Vergrern Sie den Textrahmen, wenn die Seite gengend Platz bietet. Krzen Sie den Text. Vielleicht lassen sich ja einige Stze knapper formulieren? ndern Sie die Textgre (siehe unten).

82

Die Layoutelemente

Um einen Rahmentext zu vergrern oder zu verkleinern, nachdem Sie bereits die endgltige Gre und Position fr den Rahmen festgelegt haben, stehen Ihnen in der Rahmenkontextleiste mehrere Optionen zur Verfgung.

Einfgen von Bildern


Die Kategorie Bilder der Studio-Registerkarte Quelldateien lsst sich als Sammelmappe fr Bilder einsetzen, die Sie spter auf den Seiten Ihrer Website platzieren mchten. Da in dieser Registerkarte alle Bilder jederzeit griffbereit sind, und Sie die Fotos einfach per Klicken und Ziehen auf den Seiten platzieren knnen (anstatt sie mhsam einzeln zu importieren), sparen Sie bei Ihrer Arbeit sehr viel Zeit. Gerade fr Websites mit sehr vielen Bildern ist diese Registerkarte eine enorme Hilfe. Ziehen Sie einfach die Bilder auf einen Bildrahmen mit Umrandung oder einen Bildrahmen ohne Umrandung (oder ein Bild direkt auf der Seite, das Sie ersetzen mchten). Fr Fotos aus Ihrer Digitalkamera ffnen Sie einfach den Ordner auf Ihrem PC, in den Sie die Fotos bereits kopiert haben, und fgen sie in die Studio-Registerkarte ein. ber einen Scanner eingelesene Bilder, die Sie bereits auf Ihrer Festplatte gespeichert haben, lassen sich auf diese Weise ebenfalls integrieren. In WebPlus knnen Sie fr das Einfgen von Bildern ebenfalls die Studio-Registerkarte QuickBuild oder die Grundlagenleiste verwenden.

Die Layoutelemente

83

Einfgen von Bildern in die Studio-Registerkarte Quelldateien


Einsetzen von Bildern in die Registerkarte 1. 2. 3. Klicken Sie in der Kategorie Bilder der StudioRegisterkarte Quelldateien auf Hinzufgen. ffnen Sie in dem Dialogfeld einen Ordner mit Bildern und whlen Sie die gewnschten Bilder aus. Klicken Sie anschlieend auf die Schaltflche ffnen. Die Studio-Registerkarte Quelldateien zeigt Ihre Bilder nun als Miniaturen in der Kategorie Bilder an.

Sortieren von Bildern in der Registerkarte

Klicken Sie auf die Miniatur des gewnschten Bildes und ziehen Sie es in der Registerkarte an die gewnschte Position.

Entfernen von Bildern aus der Studio-Registerkarte

Klicken Sie mit der rechten Maustaste auf ein ausgewhltes Bild und in seinem Kontextmen auf Quelldatei entfernen.

Einfgen von Bildern in eine Seite


Sie knnen Bilder einfach mit gedrckter Maustaste auf eine Seite ziehen und dort absetzen. Einfgen einzelner Bilder in eine Seite

Ziehen Sie aus der Kategorie Bilder der StudioRegisterkarte Quelldateien eine Bildminiatur direkt auf die Seite, in einen Rahmentext oder knstlerischen Text (das Bild wird dann an der Position der Einfgemarke platziert) oder in einen Bildrahmen. Nach dem Einfgen wird an der Bildminiatur ein Zhler ( ) eingeblendet,

84

Die Layoutelemente

sodass Sie stets im Auge behalten knnen, wie oft Sie das Bild bereits in der Website eingesetzt haben. Wenn Sie Bilder auf einer Seite platzieren, werden diese Dateien standardmig mit Ihrer Website verknpft und nicht eingebettet. Sie knnen Fotos ber das Symbol Bild aus Datei einfgen der Grundlagenleiste einbetten (klicken Sie hierzu in dem Dialogfeld auf Bild einbetten) oder auch jederzeit den Ressourcen-Manager verwenden, um den Status verknpfter Bilder in Eingebettet zu ndern. Automatisches Einfgen von Inhalten mit AutoFlow Mit der Funktion AutoFlow knnen Sie die Bilder aus der Kategorie Bilder direkt in die leeren Bildrahmen (siehe WebPlusHilfe) einfgen, die ber Ihre Website verteilt sind. ACHTUNG: Nachdem Sie die Rahmen automatisch mit Bildern gefllt haben, lsst sich dieser Schritt nicht noch einmal wiederholen. Automatisches Einfgen Ihrer Bilder

Klicken Sie in der Studio-Registerkarte Quelldateien am unteren Rand der Kategorie Bilder auf AutoFlow.

Die Bilder werden nun nacheinander in die verfgbaren Bildrahmen Ihrer Website eingefgt. Die Funktion geht hierbei nach der Reihenfolge vor, in der die Bilder in der StudioRegisterkarte sortiert sind. Eventuell mssen Sie die Bilder also zunchst neu ordnen.

Suchen nach Bildern mithilfe von Markern


In WebPlus knnen Sie Bilder mithilfe von Markern (auch Tags genannt) suchen, d. h. der XMP-Metadaten, die mit jedem Bild gespeichert sind. Mchten Sie selbst Marker fr Ihre Bilder festlegen, verwenden Sie den Quelldatei-Manager.

Die Layoutelemente

85

Suchen von Bildern ber ihre Marker

Klicken Sie unten in der Studio-Registerkarte Quelldateien in das Suchen-Feld und geben Sie den gewnschten Begriff ein, wie z. B. Urlaub. Alle mit diesem Marker gekennzeichneten Bilder werden nun ber dem Suchen-Feld in einer temporren Ergebnisliste angezeigt.

Einfgen von Bildern mit Skalierung, Einbetten und Verknpfen


Sie knnen Bilder nicht nur durch Klicken und Ziehen von Miniaturen aus der Studio-Registerkarte Quelldateien einsetzen, sondern auch durch Kopieren und Einfgen ber die Zwischenablage oder durch Ziehen einer Datei aus einem externen Windows-Ordner direkt auf eine Seite. Bild importieren der Grundlagenleiste ber die Option knnen Sie ebenfalls Bilder einfgen. Hierbei lsst sich auch die Bildgre einstellen. Sie knnen ebenfalls festlegen, ob das Bild in die Website eingebettet oder mit dieser verknpft wird.

Ersetzen von Bildern


Bilder lassen sich jederzeit austauschen. Dies ist besonders praktisch, wenn Sie die Position und Gre eines Fotos auf der Seite beibehalten und nur das eigentliche Bild selbst ndern mchten. Diese Funktion lsst sich fr zugeschnittene und unbeschnittene Bilder einsetzen. Ersetzen eines Bildes

Klicken Sie direkt unter dem ausgewhlten Bild auf Bild ersetzen und whlen Sie das neue Bild aus. Klicken Sie anschlieend auf die Schaltflche ffnen.

86

Die Layoutelemente

Anzeigen von Bildern in Lightboxen


Lightboxen sind Popups, die sich unter anderem ideal fr die Anzeige groer Bilder eignen. Um die groe Bildversion einzublenden, mssen Ihre Website-Besucher lediglich auf eine Bildminiatur klicken. Der groe Vorteil der Lightboxen besteht darin, dass die groen Bildversionen erst auf Wunsch des Betrachters mit einer Animation eingeblendet werden und nicht die ganze Zeit wertvollen Platz im Browserfenster belegen. Erstellen einer Lightbox fr die Bilder auf Ihrer Webseite 1. 2. Whlen Sie ein Bild aus (vorzugsweise platziert als Bildminiatur). Erstellen Sie einen Hyperlink fr das Objekt. Klicken Sie hierzu im Men Format oder dem per Rechtsklick auf das Objekt geffneten Kontextmen auf den Eintrag Hyperlink. Klicken Sie in der linken Liste auf den Eintrag Bild und legen Sie in der Registerkarte Zielfenster ber das Feld Typ die Option Lightbox fest.

3.

Freistellen von Bildmotiven


Mit dem Studio fr Bildausschnitte knnen Sie einzelne Bildobjekte bequem von ihrem Hintergrund trennen. Je nach Zusammenstellung Ihres Fotos lassen sich z. B. die wichtigen Objekte (Personen usw.) extrahieren oder die einfarbigen Hintergrundbereiche (z. B. Himmel, Leinwand eines Fotostudios) entfernen. In beiden Fllen ist der extrahierte Bildbereich ein echter Blickfang, der sich flexibel in Ihrer Website einsetzen lsst.

Die Layoutelemente

87

ffnen des Studios fr Ausschnitte 1. 2. Whlen Sie ein Bild aus. Klicken Sie auf die Schaltflche Studio fr Bildausschnitte in der Bildkontextleiste. Es wird nun das Studiofenster fr das Extrahieren von Bildbereichen geffnet. Klicken Sie auf der linken Seite des Studiofensters auf das Werkzeug Bildbereich bernehmen oder Bildbereich entfernen und bermalen Sie die Bereiche, die Sie entfernen bzw. behalten mchten. In der QuickStart-Hilfe des Studiofensters finden Sie eine genaue Anleitung zu der Arbeit mit diesen Werkzeugen.

3.

Bildkorrekturen und Effekte


PhotoLab ist ein leistungsstarkes Studiofenster fr die Bildbearbeitung, in dem Sie Ihre Bilder korrigieren und mit verschiedenen Effekten bearbeiten knnen. Alle Funktionen lassen sich einzeln oder auch in Kombination anwenden.

88

Die Layoutelemente

(A) Hauptsymbolleiste, (B) Arbeitsbereich, (C) Filterstapel, (D) Filterregisterkarten, (E) Registerkarte Bilder

Starten von PhotoLab 1. Whlen Sie das Bild aus, auf das Sie einen Filter anwenden mchten. Klicken Sie auf die Schaltflche PhotoLab der Bildkontextleiste. Whlen Sie einen Filter der Filterregisterkarten aus (Favoriten, Korrekturen oder Effekte). Stellen Sie in dem Testfeld rechts unten die gewnschten Optionen fr den Filter ein und klicken Sie auf bernehmen. Wiederholen Sie diese Schritte fr alle Filter, die Sie anwenden mchten. Klicken Sie auf die Schaltflche OK.

2. 3. 4.

5. 6.

Weitere Informationen hierzu finden Sie in der WebPlus-Hilfe.

Die Layoutelemente

89

Einfgen von Panels


Panels sind Schauksten mit Informationen, die ber Ihren Webseiten eingeblendet werden. Hier knnen Sie sowohl Bilder und Texte anzeigen (siehe unten) als auch Formen und Zeichnungen.

Da die Panels ber Ihren Webseiten in dem Browser der WebsiteBesucher angezeigt werden, knnen Sie den Informationsgehalt Ihrer Website schnell und einfach erweitern oder ndern, ohne das Layout der einzelnen Seiten modifizieren zu mssen. Panels lassen sich sowohl permanent als auch auf Wunsch einblenden, wenn die Website-Besucher ihren Mauszeiger auf Schaltflchen, Bildern oder anderen Quelldateien platzieren. Die permanente Variante ist ebenfalls ideal fr Navigationsleisten, da diese auch bei scrollbaren Seiteninhalten stndig auf dem Bildschirm erreichbar sind. Panels gehren zu den flexibelsten Elementen einer Website und eignen sich hervorragend zur Prsentation folgender Informationen:

Details zu bestimmten Events (Konzerte, Tagungen usw.) Produkt- und Verkaufsinformationen Jetzt kaufen-Formulare von PayPal

90

Die Layoutelemente

Hilfreiche Tipps und Tricks Kontaktdetails, Tastaturkrzel sowie andere Infos, auf die Website-Besucher schnell zugreifen mchten. Permanent sichtbare Navigationselemente (umgewandelt aus einer Navigationsleiste wie auf Seite 115 beschrieben) Vergrerte Bildversionen

Panels werden auch als Bausteine fr animierte Slider (siehe Seite 109) verwendet. Genau wie die Anzeigetafeln am Spielfeldrand in groen Fuballstadien stndig ihre Aufschrift ndern, knnen auch die Slider unterschiedliche Panels fr bestimmte Zeitintervalle einblenden. WebPlus bietet eine breite Palette an modernen Hintergrunddesigns, mit denen Sie schnell und einfach ansprechende Panels entwerfen knnen. Alternativ knnen Sie auch eine Hintergrundvorlage anpassen oder in dem neuen Design Studio (siehe Seite 94) von WebPlus den Hintergrund selbst entwerfen.

Einfgen eines Panels


Um ein Panel einzufgen, gehen Sie wie folgt vor: 1. 2. Klicken Sie in der Kategorie Layoutelemente der Studio-Registerkarte QuickBuild auf das Symbol Panel. Ziehen Sie den Mauszeiger mit gedrckter Maustaste ber Ihre Seite, um den Bereich und die Gre fr das Panel zu bestimmen.

Die Layoutelemente

91

3.

(Optional) Legen Sie in dem Dialogfeld eine HTML-ID fr das Panel fest. Sie knnen die Vorgabe fr gewhnlich direkt bernehmen, da die ID immer als einzigartige Zeichenkette festgelegt wird. Klicken Sie in dem Dialogfeld auf die Panelvorschau. Whlen Sie eine Panelvorlage in dem Men aus. Die Vorschau wird nun mit dem ausgewhlten Paneldesign aktualisiert. (Optional) Stellen Sie den Schieber Transparenz neu ein, um die Transparenz des Panels vor seinem Hintergrund zu bestimmen. Um die Auswirkung dieser nderung zu prfen, mssen Sie die Webseite in einer Vorschau ffnen. (Optional) Um das Panel stets griffbereit an einer festen Position des Browserfensters zu verankern, wenn Ihre Website-Besucher den Seiteninhalt mit den Bildlaufleisten scrollen, klicken Sie auf Panel mit Browserfenster ausrichten. Legen Sie anschlieend die Panelposition mit den Feldern Horizontale Ausrichtung und Vertikale Ausrichtung fest. (Optional) Aktivieren Sie die Option Verschieben des Panels mit der Maus auf der Seite mglich, wenn Sie Ihren Website-Besuchern die Mglichkeit geben mchten, das Panel frei in ihrem Browser zu verschieben. (Optional) Um das Panel direkt mit dem Schlieen des Dialogfelds auszublenden, klicken Sie auf die Option

4. 5.

6.

7.

8.

9.

92

Die Layoutelemente

Panel ist zu Beginn ausgeblendet. Fr gewhnlich werden Sie diese Option wahrscheinlich deaktivieren, um weiter an dem Design fr Ihr Panel zu arbeiten. 10. Klicken Sie auf die Schaltflche OK. Sie knnen ein Panel in den Standardabmessungen erstellen, indem Sie es einfach aus der StudioRegisterkarte QuickBuild direkt auf eine Seite ziehen. Alternativ knnen Sie ein einfaches Panel (ohne Konfiguration ber das Dialogfeld) direkt auf der Seite platzieren, wenn Sie es mit gedrckter Strg-Taste auf die Seite ziehen. Bearbeiten eines Panels

Fhren Sie einen Doppelklick auf das Panel aus und stellen Sie wie oben beschrieben die verschiedenen Optionen ein.

Festlegen des Inhalts fr ein Panel


Sie knnen Ihr Panel wie einen leeren Baustein fr Ihre Website behandeln und mit den Werkzeugen und Funktionen von WebPlus vollenden. Wenn Sie Objekte in dem Panelbereich erstellen, gehren diese automatisch zu dem Panel. Dies gilt auch fr Textrahmen, knstlerische Texte, Tabellen, QuickShapes und Bilder. Wenn Sie das Panel auf der Seite verschieben, ndern Sie auch die Position seiner Objekte.

Ein-/Ausblenden eines Panels


Nachdem Sie das Panel entworfen und mit dem gewnschten Inhalt gefllt haben, knnen Sie es sichtbar lassen oder auch ausblenden. Ausgeblendete Panels lassen sich per Mausberhrung oder Klick auf ein Seitenobjekt einblenden. Auf diese Weise knnen Sie schnell und einfach zustzliche Optionen oder Details fr Schaltflchen, Bilder und Galerieobjekte auf Ihren Webseiten

Die Layoutelemente

93

anbieten. Die Website-Besucher blenden dann einfach nur die fr sie interessanten Panels ein und werden nicht mit Informationen berfrachtet. Fr diese Einblendung mssen Sie ein Objekt als Auslser konfigurieren, dessen Aktion (siehe Seite 129) bei Mausberhrung oder Mausklick das entsprechende Panel ffnet. Die Aktion verbindet dann das bereits erstellte Panel mit dem Objekt. Festlegen von Aktion und Panel 1. 2. 3. Klicken Sie mit der rechten Maustaste auf ein Objekt und in seinem Kontextmen auf Aktionen. Klicken Sie in dem Dialogfeld auf Hinzufgen und dann auf die Menoption Sichtbarkeit. Whlen Sie das gewnschte Panel in dem Feld Panel-ID aus und legen Sie dann ein Ereignis in dem gleichnamigen Dropdownfeld fest. Diese Ereignisse legen fest, was passiert wenn die Aktion stattfindet (d. h. der Mauszeiger sich auf das Objekt bewegt oder ein Mausklick stattfindet). Klicken Sie auf die Schaltflche OK.

4.

Nachdem Sie nun Panel und Auslser fertig konfiguriert haben, knnen Sie das Panel ausblenden. Ausblenden ausgewhlter Panel

Klicken Sie in der Kontextleiste auf die Option Panel ausblenden.

94

Die Layoutelemente

Das Panel wird nun auf der Seite durch das Symbol Ausgeblendetes Panel ersetzt. Das Panel ist immer noch vorhanden und lsst sich mit einem weiteren Klick auf die Schaltflche Panel ausblenden wieder sichtbar schalten. Die Schaltflche Panel ausblenden entspricht in Ihrer Funktion dem Kontrollkstchen Panel ist zu Beginn ausgeblendet. Wenn Sie nun Ihre Webseite publizieren und den Mauszeiger auf dem als Auslser konfigurierten Seitenobjekt platzieren, wird das Panel per Rollover an der von Ihnen festgelegten Stelle eingeblendet.

Entwerfen eigener Panelhintergrnde


Mchten Sie eine Hintergrundvorlage noch weiter anpassen oder den Hintergrund komplett selbst entwerfen, verwenden Sie einfach das Design Studio - eine spezielle Designumgebung, die dem Button Studio hnelt. Der Hintergrund wird in diesem Studiofenster vollkommen isoliert angezeigt. Auf diese Weise knnen Sie sich ganz auf das Design konzentrieren und werden nicht von den anderen Elementen der Seite abgelenkt.

Die Layoutelemente

95

Entwerfen eigener Hintergrundvarianten 1. (Optional) Whlen Sie in dem Dialogfeld Panel Eigenschaften eine Vorlage aus, die Sie als Ausgangspunkt fr Ihr Design verwenden mchten. Klicken Sie in dem Dialogfeld auf das Symbol Bearbeiten. Das Design Studio wird nun aktiviert und zeigt automatisch Ihren Hintergrund im Arbeitsbereich an. Sie knnen den Hintergrund nun mit den blichen Werkzeugen und Registerkarten von WebPlus X6 anpassen. In der Registerkarte QuickStart des Studiofensters finden Sie einige ntzliche Tipps und Hilfestellungen. Um das Studio zu beenden, klicken Sie in der Hauptsymbolleiste auf nderungen bernehmen. Der Hintergrund wird nun an seiner ursprnglichen Position mit den neuen Einstellungen aktualisiert. Mit dem Design Studio knnen Sie exakt bestimmen, welche Objekte in dem Panel automatisch gedehnt oder gestaucht werden, wenn Sie die Gre des Panels verndern. ber die Symbolmens Horizontale Skalierung und Vertikale Skalierung knnen Sie das Verhalten der Objekte genau festlegen. Nhere Informationen hierzu finden Sie in der QuickStart-Registerkarte.

2.

3.

4.

96

Die Layoutelemente

Einfgen einer Fotogalerie


In WebPlus knnen Sie eine auf Flash oder JavaScript basierende Fotogalerie in jede beliebige Webseite einfgen. Fr die Galerien stehen Ihnen unterschiedliche Designs mit verschiedenen Navigationsmethoden fr die enthaltenen Bilder zur Verfgung.

Die Galerietypen
Fr Ihre Flash- oder JavaScript-Fotogalerien stehen Ihnen sehr unterschiedliche Galerieformate zur Verfgung. Galerietyp Features Professionelle Flash-Fotogalerie Diese Galerien enthalten ber oder unter der Bildanzeige eine Steuerleiste mit Vorschauminiaturen, die alle mit einem Rollovereffekt versehen sind.

Die Layoutelemente

97

Professionelle Flash-Fotogalerie (Live Feed) Diese Galerien bieten die gleichen Optionen wie Professionelle Fotogalerien. Die Fotos lassen sich jedoch als Fotostream (in Form eines RSS-Feeds) aus Ihrem Konto bei flickr einfgen sowie aus jedem anderen Bildhosting-Service, der RSS 2.0 untersttzt, oder auch aus SlideShowPro Director. Flash-Fotogalerie Diese Galerien enthalten ber oder unter der Bildanzeige eine Steuerleiste mit Navigationselementen und/oder Vorschauminiaturen, die sich horizontal/vertikal per Bildlauf verschieben lassen. Fotoraster und Fotostapel sind ebenfalls als Galerievorlagen verfgbar. Sie knnen fr die Fotogalerie sogar eine Hintergrundmusik festlegen. JavaScript-Fotogalerie Diese Galerien bieten hnliche Optionen wie die Flash-Galerie, basieren jedoch auf JavaScript. Zustzlich zu den Fotorastern und Fotostapeln sind hier auch Lightboxen verfgbar.

Einfgen einer Fotogalerie


Fotogalerien lassen sich genau so auf Ihren Seiten einfgen, wie einzelne Fotos. Das aktuell angezeigte Foto ist hierbei lediglich von einem Hintergrund, einer Navigationsleiste und Vorschauminiaturen eingerahmt.

98

Die Layoutelemente

Einfgen einer Fotogalerie 1. Klicken Sie in der Kategorie Layoutelemente der Studio-Registerkarte QuickBuild auf das Symbol Fotogalerie. Um die Galerie mit einer Standardgre einzufgen, platzieren Sie den Mauszeiger an der gewnschten Stelle der Seite und drcken die linke Maustaste. ODER Um die Gre der Galerie selbst zu bestimmen, ziehen Sie bei gedrckter Maustaste den Cursor ber die Seite und lassen die Maustaste wieder los, sobald der Begrenzungsrahmen die gewnschten Abmessungen erreicht hat. Whlen Sie einen Galerietyp aus (siehe obige Beschreibung). Klicken Sie auf die Schaltflche Weiter>. Fr alle Galerietypen (auer den Varianten mit Live Feed) legen Sie in dem Dialogfeld folgende Optionen fest:

2.

3. 4.

Hinzufgen einzelner Dateien Klicken Sie auf Dateien hinzufgen, um die gewnschten Bilddateien auszuwhlen. Wenn Sie mehrere Dateien auswhlen mchten, halten Sie die Strg-Taste gedrckt (fr nicht aufeinander folgende Dateien) oder die Umschalttaste (fr aufeinander folgende Dateien), whrend Sie auf die Dateinamen klicken. ODER

Die Layoutelemente

99

Hinzufgen aller Fotos in einem Ordner Klicken Sie auf die Schaltflche Ordner hinzufgen, um alle Bilder aus einem bestimmten Ordner zu importieren. ODER Import aus Digitalkamera oder Scanner Klicken Sie auf die Schaltflche TWAIN-Import. Falls Sie mehrere TWAIN-Gerte angeschlossen haben, klicken Sie zunchst auf den Pfeil der Schaltflche und legen ber den Menpunkt Quelle auswhlen... das gewnschte Modell fest. Wenn Sie den Ordner fr die Speicherung der Bilder nach dem Einlesen festlegen mchten, klicken Sie in dem Symbolmen auf Exportordner festlegen. Klicken Sie auf Import..., um Ihre Fotos einzulesen. Um eine oder mehrere Miniaturansichten zu entfernen, whlen Sie sie aus und klicken auf Lschen.

5.

(Optional) Verwenden Sie die Optionen neben den Fotominiaturen, um die Bilder zu bearbeiten.

Um die Reihenfolge der Fotos zu ndern, klicken Sie auf Aufwrts und Abwrts am unteren Rand des Dialogfelds. Um einen Titel einzufgen, klicken Sie in die Spalte Titel und geben den gewnschten Text ein. Sie knnen sowohl Zahlen als auch Buchstaben verwenden.

100

Die Layoutelemente

(Nur fr professionelle Flash-Fotogalerien) Um die Fotos mit Hyperlinks zu versehen, klicken Sie auf Hyperlink bearbeiten. Whlen Sie in dem Dialogfeld einen Hyperlinktyp aus. Sie knnen hier die Verwendung von Hyperlinks deaktivieren, Hyperlinks zu den Originalbildern erstellen oder Hyperlinks zu anderen Hyperlinkzielen festlegen (z. B. Seiten Ihrer Website oder einer anderen Website).

6.

Wenn Sie die ausgewhlten Bilder in die Website integrieren mchten, aktivieren Sie die Option Bilder einbetten. Standardmig werden die Fotos von der WebPlus-Datei getrennt gespeichert und mit einer Verknpfung an die entsprechenden Webseiten gebunden. Klicken Sie auf die Schaltflche Weiter. Whlen Sie am oberen Rand des Dialogfelds eine Galerieformatierung in der Liste Galerietyp aus. (Optional) Legen Sie fr den ausgewhlten Typ rechts die verschiedenen Galerieoptionen fest (Hintergrundmusik, Schriftfarbe, AutoPlay usw.).

7. 8. 9.

10. Klicken Sie anschlieend auf die Schaltflche Fertig stellen.

Die Layoutelemente

101

Bearbeiten der Fotogalerie


Nachdem Sie die Fotogalerie in eine Webseite eingefgt haben, lsst sie sich jederzeit bearbeiten. Bearbeiten einer Fotogalerie 1. 2. Whlen Sie die gewnschte Galerie auf der Webseite aus. Fhren Sie einen Doppelklick auf die Galerie aus. Es wird nun das Dialogfeld Fotogalerie angezeigt. Die Optionen in diesem Dialogfeld sind identisch mit denen, die fr die Erstellung der Galerie verfgbar waren. 3. Um die Attribute fr alle Bilder gleichzeitig zu ndern, whlen Sie alle Fotos ber das Kontrollkstchen oben in der Spalte Bild aus und stellen dann die Optionen unter der Fotoliste neu ein.

Nachdem Sie eine Galerie auf der Seite platziert haben, knnen Sie ihre Gre durch Ziehen eines Eckpunkts verndern. Wenn Sie das Seitenverhltnis der Galerie unverndert bernehmen mchten, halten Sie whrend des Ziehens die Strg-Taste gedrckt.

Arbeiten mit Onlinefotoquellen


Anstatt Ihre Fotos von einem lokalen Laufwerk auf Ihrem PC zu importieren, knnen Sie in Ihre Fotogalerie auch Bilder per Live Feed einfgen, die bereits online bei flickr oder SlideShowPro Director gespeichert sind. Der grte Vorteil dieser Galerien mit Live Feed liegt darin, dass Ihre publizierte Fotogalerie automatisch aktualisiert wird, sobald Sie neue Fotos auerhalb von WebPlus an flickr oder SlideShowPro Director bertragen. Auf diese Weise mssen Sie die Fotos nicht einzeln in Ihrer Galerie nachtragen und dann die Website erneut publizieren.

102

Die Layoutelemente

Bevor Sie eine Fotogalerie mit Live Feed erstellen, mssen Sie Ihr Konto bei flickr oder der Website von SlideShowPro Director aufsuchen. Dieser Schritt ist notwendig, da Sie den Link zu Ihren Fotos kopieren und dann in WebPlus einfgen mssen. Kopieren Ihres Fotolinks von der flickr-Website 1. 2. 3. Gehen Sie zu der Website flickr.com und melden Sie sich bei Ihrem Konto an. Klicken Sie auf die Option fr Ihren Fotostream. Blttern Sie die Seite nach unten bis zu dem Symbol fr den RSS-Feed, klicken Sie mit der rechten Maustaste auf das Symbol und in dem Kontextmen auf Verknpfung kopieren. Stellen Sie sicher, dass sich der kopierte Link immer noch in der Zwischenablage befindet, wenn Sie ihn in WebPlus einfgen mchten. Kopieren Ihres Fotolinks von SlideShowPro Director 1. 2. Gehen Sie zu der Website SlideShowPro Director und melden Sie sich bei Ihrem Konto an. Whlen Sie Ihr Album aus und klicken Sie unter Publish auf die Kopieren-Schaltflche (in der Option Copy XML File Path), um den Link in die Zwischenablage einzutragen.

Einfgen einer Fotogalerie mit Live Feed

1. 2.

Klicken Sie in dem Dialogfeld fr Fotogalerien auf Professionelle Flash-Fotogalerie (Live Feed). Klicken Sie auf die Schaltflche Weiter>.

Die Layoutelemente

103

3.

Aktiveren Sie je nach der Fotodatenquelle, die Sie verwenden mchten, eine der Optionen RSS 2.0 Medien oder SlideShowPro Director.

Fr die erste Option fgen Sie den kopieren Link fr den RSS-Feed (siehe obige Beschreibung) in das entsprechende Dropdownfeld ein.

ODER

Fr die zweite Option fgen Sie den kopierten XML-Dateipfad (siehe obige Beschreibung) ein.

Die Optionen der anderen Dialogfelder lassen sich genau so konfigurieren wie fr die normalen Galerietypen.

Einfgen von Tabellen


Tabellen sind eine ideale Wahl, wenn Sie Ihre Texte oder Daten in bersichtlichen Zeilen und Spalten anordnen mchten. WebPlus verfgt ebenfalls ber eine Reihe von Rechenfunktionen, mit denen Sie die Werte einzelner Zellen wie in einer Tabellenkalkulation berechnen knnen. Jede Tabellenzelle bernimmt im Grunde die Aufgabe eines kleinen Textrahmens. Tabellentexte lassen sich wie Rahmentexte flexibel mit Zeichen- und Absatzattributen sowie Textformatvorlagen formatieren und durch integrierte Bilder und gleichmige Farbfllungen erweitern. Mithilfe der Rechtschreibprfung knnen Sie anschlieend eventuelle Fehler beseitigen. Zu den Spezialfunktionen fr Tabellen gehren die Zahlenformatierung und das Einfgen von Formeln.

104

Die Layoutelemente

Anstatt Ihre Tabellen von Grund auf neu zu erstellen, knnen Sie eines der vordefinierten Tabellenformate (d. h. eine Vorlage) von WebPlus verwenden. Whlen Sie einfach eine Formatierung aus und fllen Sie die Zellen mit den gewnschten Inhalten. WebPlus bietet Ihnen die folgenden Mglichkeiten:

Bearbeiten vordefinierter Formate, bevor Sie die neue Tabelle auf der Seite platzieren. Erstellen Ihrer eigenen Formate, ohne eine Tabelle einzufgen. Nhere Informationen hierzu finden Sie unter Entwerfen eigener Tabellenformate in der WebPlus-Hilfe. Bearbeiten bestehender Tabellen, um sie an ein anderes Format anzupassen (vordefiniert oder selbst angelegt).

Einfgen einer Tabelle 1. Klicken Sie in der Kategorie Layoutelemente der Studio-Registerkarte QuickBuild auf das Symbol Tabelle. Klicken Sie auf Ihre Seite, oder ziehen Sie mit gedrckter Maustaste einen Rahmen in der gewnschten Gre fr die Tabelle. In dem nun geffneten Dialogfeld Tabelle erstellen whlen Sie einfach eine Tabellenvariation aus dem Feld Format: aus. Klicken Sie auf die verschiedenen Eintrge, um die jeweilige Formatierung in dem Vorschaufeld zu begutachten. Wenn Sie mit einer einfachen Tabelle ohne besondere Linienformatierungen und Farben beginnen mchten, klicken Sie auf den Eintrag (Standard). (Optional) Klicken Sie auf Bearbeiten, wenn Sie das ausgewhlte Format noch weiter konfigurieren mchten.

2.

3.

4.

Die Layoutelemente

105

5.

Legen Sie die Tabellengre fest. Dies ist die Anzahl der Zeilen und Spalten, aus denen das Tabellenlayout besteht. Klicken Sie auf die Schaltflche OK. Die neue Tabelle wird nun auf Ihrer Seite angezeigt.

6.

Um die Struktur und Zelleninhalte von Tabellen zu ndern, fhren Sie die unter Bearbeiten von Tabellen (siehe WebPlus-Hilfe) beschriebenen Schritte aus.

Einfgen eines Kalenders


Mit dem Kalenderassistenten lassen sich Kalender unterschiedlichster Formate schnell und einfach in Ihre Webseiten einsetzen.

Der Assistent erstellt die Kalender als skalierbare textbasierende Tabellen. Sie knnen den Kalender also mit Standardfunktionen und -werkzeugen zur Textbearbeitung beliebig verndern. Die Eigenschaften eines ausgewhlten Kalenders hneln denen von Tabellen, sodass sich Kalender auch mit hnlichen Handgriffen bearbeiten lassen (siehe Bearbeiten von Tabellen in der WebPlusHilfe).

106

Die Layoutelemente

Einfgen eines Kalenders 1. Klicken Sie in der Kategorie Layoutelemente der Studio-Registerkarte QuickBuild auf das Symbol Kalender. Klicken Sie auf Ihre Seite, oder ziehen Sie mit gedrckter Maustaste einen Begrenzungsrahmen in der gewnschten Gre fr den Kalender. Whlen Sie in dem nun geffneten Kalenderassistenten die Optionen fr Jahr und Monat sowie die Kalenderformatierung (quadratisch oder in ein- bzw. doppelspaltigem Layout) aus. Legen Sie anschlieend den Wochentag fr den Kalenderanfang fest, die Anzeigeoptionen, das Kalenderformat, die Darstellung der Termine und Feiertage und stellen Sie ein, ob der Kalender zustzlichen Platz fr eigene Notizen bieten soll. Wenn Sie die gesetzlichen Feiertage in Ihrem Land anzeigen lassen mchten, aktivieren Sie in den Kalendereigenschaften die Option ffentliche Feiertage einfgen und whlen Ihr Land in dem Dropdownfeld Region aus. Falls Sie eigene Termine eintragen mchten, aktivieren Sie die Option Persnliche Termine einfgen. 4. Klicken Sie auf Fertig stellen, um den Assistenten zu schlieen. Mchten Sie Ihren Kalender auch in Zukunft verwenden, aktualisieren Sie einfach die Einstellung fr Jahr in den Kalenderdetails (Extras > Benutzerdetails festlegen).

2.

3.

Die Layoutelemente

107

Anzeigen und Bearbeiten der Eigenschaften eines ausgewhlten Kalenders 1. 2. Klicken Sie auf die Schaltflche Kalender bearbeiten der Kalenderkontextleiste. Stellen Sie die gewnschten Optionen in den verschiedenen Registerkarten (Datum, Format, Termine usw.) ein und klicken Sie auf OK.

ber das Untermen Kalender des per Rechtsklick geffneten Kalenderkontextmens knnen Sie auch einzelne Spalten und Zeilen auswhlen, skalieren, an Inhalte anpassen, einfgen, lschen und neu verteilen. Achten Sie aber darauf, dass Sie hierbei nicht die Tabellenformatierung des Kalenders beschdigen.

Einfgen ffentlicher Feiertage


Wenn Sie einen Kalender anlegen, knnen Sie gleichzeitig die ffentlichen Feiertage in den Kalender eintragen lassen, die fr Ihr Land gelten. Die Feiertage werden dann automatisch angezeigt, wenn Sie in den Kalendereigenschaften die Option ffentliche Feiertage einfgen aktivieren. Aktivieren der ffentlichen Feiertage 1. Whlen Sie den Begrenzungsrahmen des Kalenders aus und klicken Sie in der Kontextleiste auf Kalender bearbeiten. Klicken Sie in der Registerkarte Termine auf ffentliche Feiertage einfgen. (Optional) Um die Feiertage fr ein anderes Land einzutragen, whlen Sie das gewnschte Land in dem Dropdownfeld Region aus. Klicken Sie auf die Schaltflche OK.

2. 3.

4.

108

Die Layoutelemente

Anzeigen ffentlicher Feiertage 1. 2. 3. Whlen Sie den Begrenzungsrahmen des Kalenders aus. Klicken Sie in der Kalenderkontextleiste auf die Schaltflche Kalendertermine. Aktivieren Sie die Option ffentliche Feiertage anzeigen.

Einfgen persnlicher Termine


Sie knnen die Liste der ffentlichen Feiertage (z. B. Osterferien) durch persnliche Termine wie Geburtstage, Jahrestage und geschftliche Besprechungen erweitern, sodass die zustzlichen Termine ebenfalls in Ihrem Kalender angezeigt werden. Klicken Sie hierzu einfach in der Kontextleiste des ausgewhlten Kalenders auf die Schaltflche Kalendertermine. Die Termine werden automatisch in Ihrem Kalender fr das ausgewhlte Datum angezeigt. Einfgen eines Termins 1. 2. 3. Whlen Sie den Begrenzungsrahmen des Kalenders aus. Klicken Sie in der Kalenderkontextleiste auf die Schaltflche Kalendertermine. (Optional) Aktivieren Sie die Option Termine nach Datum anzeigen, um Termine mit einem traditionellen Kalenderlayout zu bearbeiten, einzufgen oder zu lschen. Ist die Option deaktiviert, knnen Sie die Termine zeilenweise in einer Datum/Termin-Liste bearbeiten. Klicken Sie anschlieend auf das Symbol Neuer Termin.

4.

Die Layoutelemente

109

5.

Legen Sie in dem nun geffneten Dialogfeld mit den Pfeilsymbolen oder dem Symbol Durchsuchen ein Datum fest. Geben Sie den gewnschten Termintext in das Textfeld ein. Dieser Text wird dann in dem Kalender fr das entsprechende Datum angezeigt. Falls es sich bei dem Termin um einen Geburtstag oder einen hnlichen Anlass handelt, der jedes Jahr anfllt, aktivieren Sie die Option Termin findet jedes Jahr statt. Klicken Sie auf die Schaltflche OK. Das Ereignis wird nun in der Ereignisliste fr das ausgewhlte Datum angezeigt. Nachdem Sie alle gewnschten Termine festgelegt haben, klicken Sie auf die Schaltflche Speichern. Um einen ausgewhlten Termin zu ndern oder zu entfernen, verwenden Sie die Symbole Termin bearbeiten oder Termin lschen.

6.

7.

8.

9.

Arbeiten mit Slidern


Slider bieten elegante und flexible Mglichkeiten fr die Animation von Panels und lassen sich unter anderem fr Werbebanner, NewsTicker und Alternativen zu Navigationsleisten einsetzen. Jeder Slider besteht aus einer Reihe von Panels - es kann jedoch immer nur ein Panel gleichzeitig angezeigt werden.

110

Die Layoutelemente

Sie knnen auf jedem Panel eine Mischung aus Bildern, Texten, Linien und Formen platzieren. Wie in einer Diashow lassen sich die Panels auch so konfigurieren, dass sie in bestimmten Intervallen automatisch ein- und ausgeblendet werden. Eine manuelle Umschaltung zwischen den Panels ist ebenso mglich wie die Steuerung ber einen Timer. Fr die Darstellung der Panels stehen Ihnen verschiedene Animationstypen zur Verfgung. Sie knnen einfache Richtungsnderungen (z. B. Links nach Rechts, Oben nach Unten usw.) sowie eine Gemischte Animation (bestehend aus mehreren Varianten) verwenden oder auch spezifische Vorgaben wie Akkordeon, Overlay oder Bildlauf-Varianten einsetzen. Bei der Steuerung ber einen Timer knnen Sie das Start- und Enddatum (oder die Zeit) fr jedes Panel przise angeben. In der Studio-Registerkarte Quelldateien steht Ihnen eine breite Palette professioneller Slider zur Verfgung. Nach dem Platzieren auf der Seite knnen Sie jede dieser Slidervarianten flexibel anpassen. Auf diese Weise lassen sich Panels hinzufgen, neu ordnen und lschen, sodass der Slider am Ende genau Ihren Vorstellungen entspricht.

Die Layoutelemente

111

Einfgen eines Sliders 1. 2. 3. Klicken Sie in der Studio-Registerkarte Quelldateien auf Durchsuchen. Klicken Sie in dem Dialogfeld Quelldatei-Browser unter Kategorien auf Slider/Panels. Blttern Sie in dem Hauptfeld durch die verschiedenen Kategorien und klicken Sie auf die Miniatur eines Sliders. Mchten Sie alle Slider einer Unterkategorie verwenden, klicken Sie auf das Symbol Alles hinzufgen. Ausgewhlte Miniaturansichten werden stets mit einem Hkchen markiert. Klicken Sie als Letztes auf die Schaltflche Schlieen. Die Slider werden nun in der Kategorie Slider/Panels der Studio-Registerkarte Quelldateien angezeigt. Ziehen Sie die Miniatur des gewnschten Objekts auf Ihre Seite.

4.

5.

Auswhlen eines Sliders

ffnen Sie die Studio-Registerkarte Objekte und klicken Sie auf den Slider. ber dem Arbeitsbereich im Programmfenster wird nun die Kontextleiste fr den Slider eingeblendet, sodass Sie den Slider bearbeiten knnen. Wenn Sie ein Objekt bearbeiten, das auf einem Panel platziert ist, und das Panel selbst auswhlen mchten, klicken Sie auf den Menpunkt Bearbeiten > bergeordnetes Element auswhlen. Mit einem weiteren Klick auf diesen Menpunkt whlen Sie dann den Slider aus, zum dem das Panel gehrt. Der Quelldatei-Browser enthlt ebenfalls einige Slider mit einer separaten Navigationsleiste, ber die Ihre Website-Besucher zwischen den Panels umschalten

112

Die Layoutelemente

knnen. Alle Slider-Panels lassen sich hierbei przise anpassen.

Bearbeiten Ihres Sliders


Standardmig enthlt jeder Slider ein Set von Panels. Sie knnen den Slider jedoch wie folgt konfigurieren:

Hinzufgen, Kopieren und Lschen von Panels in dem Slider. Einfgen von Inhalten in das aktuell sichtbare Panel. Bedenken Sie stets, dass Sie fr jedes Panel in einem Slider die Inhalte genauso frei festlegen knnen, wie fr ein eigenstndiges Panel auf einer Webseite. Austauschen von Bildern gegen ein eigenes Foto. Klicken Sie hierzu unter dem Bild des Panels auf Bild ersetzen. Hinzufgen von Hyperlinks zu den Bildern, Schaltflchen oder anderen Objekten, die pro Panel auf ein anderes Ziel verweisen, wie z. B. eine Produktseite. Diese Linkziele lassen sich dann in einem neuen Fenster oder einer Lightbox einblenden. ndern des Animationstyps in eine der folgenden Optionen: Einfach: Einfache Umschaltung zwischen den Panels ohne Animation. Deckkraft abblenden: Umschalten zwischen den Panels; jedes Panel wird hierbei in das nchste abgeblendet. Von Links/Rechts/Oben/Unten: Umschalten zwischen den Panels; jedes Panel wird hierbei aus der entsprechenden Richtung in den Slider geschoben.

Die Layoutelemente

113

Gemischt: Eine Kombination der obigen Methoden. Akkordeon Horizontal/Vertikal: Die Panels werden aufeinander gestapelt, sodass immer nur eine Kante sichtbar ist. Overlay schieben/abblenden: Hierbei werden nur zwei Panels verwendet. Platziert ein Website-Besucher die Maus auf dem ersten Panel, wird das zweite ber dem ersten eingeblendet. Bildlauf: Die Panels werden in einem Raster angeordnet, und die Ansicht wechselt von einem Panel zum nchsten. Datum & Uhrzeit: Mit dieser Option knnen Sie Panels an einem bestimmten Datum zu einer frei konfigurierbaren Uhrzeit ein- und ausblenden. Darber hinaus knnen Sie auch die Reihenfolge der Panels und Steuersymbole fr die Wiedergabe ndern. Hinzufgen neuer Panels 1. 2. Whlen Sie den Slider aus. Klicken Sie in der Kontextleiste auf die Option Panel hinzufgen.

Es wird nun ein leeres Panel nach dem letzten Panel in Ihrem Slider eingefgt. Sie knnen den Inhalt fr das neue Panel frei festlegen (siehe Seite 92). Die Reihenfolge der Panels in dem Slider lsst sich ber die Option Slider bearbeiten der Symbolleiste ndern. Navigieren zwischen Panels

Klicken Sie auf die Navigationssymbole direkt unter dem ausgewhlten Slider. ODER Klicken Sie in der Sliderkontextleiste auf die Panelliste.

114

Die Layoutelemente

Jeder Slider verfgt ber ein Vordergrundpanel, das seinen Inhalt permanent anzeigt. Dieses Panel ist daher perfekt fr Kontaktinformationen, E-Commerce-Schaltflchen, Telefonnummern oder ein Bild, das Sie stndig eingeblendet halten mchten. Die Slidereigenschaften lassen sich jederzeit ndern, sodass Sie die Animationstypen und Wiedergabesteuerung genau an Ihre Vorstellungen anpassen knnen. Die Reihenfolge der Panels in dem Slider lsst sich ebenfalls ndern und Sie knnen die Panels sogar zu bestimmten Zeiten einblenden. ndern der Slidereigenschaften 1. 2. Fhren Sie einen Doppelklick auf den Slider aus. Whlen Sie in der Registerkarte Optionen einen Animationstyp aus. In dem unteren Feld wird automatisch eine Vorschau fr den ausgewhlten Typ angezeigt. Legen Sie die anderen Steueroptionen fr die Wiedergabe ber die Kontrollkstchen und Dropdownfelder fest. ber die Registerkarte Panel knnen Sie Panel hinzufgen, Panel kopieren, Panel lschen oder die Reihenfolge der Panels durch Klicken und Ziehen ndern. Alternativ verwenden Sie die Optionen Panel Links und Panel Rechts. Geben Sie fr jedes Panel einen einzigartigen Namen ein und/oder ndern Sie seine Hintergrundfarbe. Wenn Sie fr den Animationstyp in der Registerkarte Optionen die Einstellung Datum & Uhrzeit festgelegt haben, knnen Sie fr jedes ausgewhlte Panel (mit Ausnahme des Vordergrundpanels) ein Startdatum und Enddatum sowie eine Startzeit und Endzeit festlegen. Klicken Sie auf die Schaltflche OK.

3. 4.

5.

6.

Die Navigationselemente

116

Die Navigationselemente

Die Navigationselemente

117

Einfgen von Navigationsleisten


Mit den Navigationsleisten knnen Ihre Website-Besucher bequem zu den verschiedenen Seiten umschalten, wie z. B. Homepage, Galerie, Produkte und Kontakt. Die Navigationsleisten in WebPlus sind so programmiert, dass sie die Struktur Ihrer Website (siehe Seite 42) erkennen und automatisch bercksichtigen, sodass sich Website-Besucher spter schnell zurechtfinden und problemlos durch die verschiedenen Seiten navigieren knnen. Navigationsleisten ermglichen den Wechsel zwischen verschiedenen Sektionen und Stufen einer Website (siehe Seite 42) und enthalten Links zu der Homepage und den anderen Seiten der obersten Stufe fr jede Sektion. ber Popup-Mens lassen sich dann die untergeordneten Seiten der einzelnen Sektionen aufrufen. Die Navigationselemente lassen sich schnell und einfach auf jeder Strukturebene Ihrer Website platzieren und beliebig anpassen, sodass Sie Links zu einzelnen Seiten erstellen, die Darstellung der Navigationsleiste verndern oder auch bestimmte Seiten von der Website-Navigation ausschlieen knnen.

Einfgen von Navigationsleisten


Navigationsleisten lassen sich zwar in jede Seite einfgen, werden aber fr gewhnlich auf der Master-Seite platziert. Hierdurch mssen Sie dasselbe Element nicht in alle Seiten einfgen, auf denen die Leiste spter erscheinen soll. Wenn Sie eine Navigationsleiste einfgen, knnen Sie mit den folgenden Optionen festlegen, wie die Leiste auf der Seite angezeigt wird:

Typ: Hier legen Sie das grundlegende Design der Navigationsleiste fest (z. B. Block, Sprechblase, Traditionell).

118

Die Navigationselemente

Navigationstyp: Hier legen Sie fest, ob die Navigationsleiste auf der Website-Struktur oder einer von Ihnen selbst festgelegten Struktur basieren soll. Darstellung: Hier bestimmen Sie das Design fr Schaltflchen, Trennelemente und den Hintergrund der Navigationsleiste. Sie knnen wahlweise eine Vorlage verwenden oder die Designs auch selbst entwerfen. Popup-Mens: Hier legen Sie die Designs fr Schaltflchen, Trennelemente und den Hintergrund aller Popup-Mens fest, die ber die Navigationsleiste aktiviert werden (falls Ihre Website-Struktur untergeordnete Seiten enthlt).

Hinzufgen einer Navigationsleiste 1. 2. Whlen Sie eine Seite (oder Master-Seite) aus. Klicken Sie in der Kategorie Navigationselemente der Studio-Registerkarte QuickBuild auf das Symbol Navigationsleiste. Platzieren Sie den Mauszeiger auf der gewnschten Seitenposition und klicken Sie einmal, um die Leiste zu platzieren. Die Leiste wird mit ihrem Mittelpunkt an der von Ihnen festgelegten Stelle positioniert. Blttern Sie in der Registerkarte Typ des nun geffneten Dialogfelds durch die verschiedenen Kategorien. Um eine Kategorie zu erweitern, klicken Sie auf das Symbol . Prfen Sie die einzelnen Navigationsleisten. Mit den Pfeiltasten Ihrer Tastatur knnen Sie bequem durch die Liste blttern. Klicken Sie einfach auf die gewnschte Designvariante, wie z. B. Traditionell 2.

3.

4.

5.

Die Navigationselemente

119

6.

Whlen Sie in der Registerkarte Navigationstyp aus, ob der Aufbau der Navigationsleiste direkt aus der WebsiteStruktur Ihrer Website abgeleitet werden soll. Klicken Sie hierzu auf Basierend auf Website-Struktur. ODER Aktivieren Sie die Option Benutzerdefiniert und ndern Sie die Optionen der Navileiste (siehe auch Anpassen der Navigationsstruktur auf Seite 120). Wenn Sie die Option Website-Struktur verwenden, stehen Ihnen folgende Optionen zur Verfgung:

Whlen Sie die Strukturstufe aus, deren Seiten in der Navigationsleiste aufgelistet werden sollen: Oberste Stufe, bergeordnete Stufe, Gleiche Stufe usw. Je nach der Hauptauswahl knnen Sie nun noch untergeordnete Seiten, Anker, die Homepage sowie bergeordnete Seiten einschlieen und/oder die aktuelle Seite ausblenden sowie deaktivierte Links ausblenden. Legen Sie das Zielfenster oder den Zielrahmen fest, in dem die neue Seite geffnet werden soll. Whlen Sie hierzu eine der Optionen Gleiches Fenster (die am hufigsten verwendete Variante), Neues Fenster (besonders hilfreich fr Offsite-Seiten), Oben im aktuellen Fenster, bergeordneter Rahmen, Benanntes Fenster, Dokumentrahmen oder Lightbox aus.

7.

Klicken Sie auf die Schaltflche OK. Die Navigationsleiste wird nun auf Ihrer Seite angezeigt.

120

Die Navigationselemente

ber den Quelldatei-Browser knnen Sie Navigationsleisten aus den Quelldatei-Paketen auswhlen. Klicken Sie hierzu einfach in der StudioRegisterkarte Quelldateien auf Durchsuchen und whlen Sie die Kategorie Seiteninhalt aus. Unter den nun angezeigten Quelldateien finden Sie auch eine breite Palette an Navigationsleisten. Einige Navigationsleisten folgen dem aktuell verwendeten Farbschema, sodass Sie ihre Darstellung noch weiter anpassen knnen. Nhere Informationen hierzu finden Sie unter Arbeiten mit Farbschemata auf Seite 67. Bearbeiten einer Navigationsleiste 1. 2. Fhren Sie einen Doppelklick auf die Navigationsleiste aus. Sie knnen nun die verschiedenen Optionen der Registerkarten neu einstellen (siehe oben).

Anpassen der Navigationsstruktur fr eine Leiste


Standardmig basiert die Struktur der Navigationsleiste auf Ihrer Website-Struktur. Mchten Sie fr Ihre Navigationsleiste eine andere hierarchische Struktur verwenden als die Website-Struktur, knnen Sie mit WebPlus einen benutzerdefinierten Navigationsbaum zusammenstellen. Sie knnen einzelne Elemente beliebig hinzufgen, bearbeiten oder lschen und verschiedene Linkzieltypen festlegen (siehe auch Einfgen von Hyperlinks und Aktionen auf Seite 126.) Wenn Sie mit einem benutzerdefinierten Navigationsbaum arbeiten, wird die Navigationsleiste nicht mehr automatisch aktualisiert, sobald Sie neue Seiten in Ihre Website einfgen. Mchten Sie auf diese Aktualisierung nicht verzichten, mssen Sie eine auf der Website-Struktur basierende Navigationsleiste verwenden.

Die Navigationselemente

121

Anpassen einer ausgewhlten Navigationsleiste 1. 2. 3. Fhren Sie einen Doppelklick auf die Navigationsleiste aus. Aktivieren Sie in der Registerkarte Navigationstyp die Option Benutzerdefiniert. ndern Sie die Reihenfolge der Navigationsleistenelemente durch Klicken und Ziehen mit der Maus oder mithilfe der Schaltflchen Aufwrts, Abwrts, berordnen oder Unterordnen. Um einen neuen Link am Ende des benutzerdefinierten Navigationsbaums zu erstellen (z. B. um eine Seite zu integrieren, die Sie nachtrglich in Ihre Website eingefgt haben), klicken Sie auf Link hinzufgen. Whlen Sie in dem nun geffneten Dialogfeld ein Hyperlinkziel, ein Zielfenster oder einen Zielrahmen sowie einen Titel aus. Klicken Sie auf die Schaltflche OK. Klicken Sie erneut auf die Schaltflche OK. Die Navigationsleiste verwendet nun fr die Menanzeige den benutzerdefinierten Navigationsbaum.

4.

5.

Um den Navigationsbaum wieder auf die Website-Struktur einzustellen, klicken Sie auf Zurcksetzen. Mit Alles lschen entfernen Sie alle Eintrge in dem selbst definierten Navigationsbaum. Benutzerdefinierte Navigationsbume lassen sich ebenfalls innerhalb der Website speichern und dann in anderen Navigationsleisten erneut verwenden. Sie knnen ebenfalls die Schaltflchen, Trennelemente und Hintergrnde Ihrer eigenen Navigationleistenformate ndern. Nhere Informationen hierzu finden Sie in der WebPlus-Hilfe.

122

Die Navigationselemente

Einfgen von Popup-Mens


Popup-Mens sind ein wichtiger Bestandteil mehrstufiger Navigationsleisten (siehe Seite 115) und werden erst angezeigt, wenn Ihre Website-Besucher den Mauszeiger auf der entsprechenden Schaltflche platzieren. In den Popup-Mens werden die untergeordneten Seiten Ihrer Website-Hierarchie aufgelistet. In WebPlus knnen Sie Popup-Mens zu jedem beliebigen Objekt hinzufgen (QuickShapes, Bildern, Grafikobjekten), hauptschlich werden diese Mens jedoch fr Schaltflchen festgelegt. Das Men, das sich ber dieses selbststndige Objekt ffnen lsst, entspricht dann seinem Gegenstck aus der Navigationsleiste. Popup-Mens lassen sich auf hnliche Weise konfigurieren wie Navigationsleisten, sodass sie entweder Ihre Website-Struktur (oder einen Teil davon) wiedergeben oder eine von Ihnen selbst festgelegte Struktur. Erstellen von Popup-Mens 1. 2. 3. Whlen Sie das Objekt aus, an das Sie das Popup-Men anhngen mchten. Klicken Sie im Men Format auf Popup-Men. Aktivieren Sie in der Registerkarte Navigationstyp die Option Popup-Men anzeigen, um die Navigationslinks fr das Objekt zu aktivieren. Klicken Sie auf eine der Optionen Basiert auf WebsiteStruktur oder Benutzerdefiniert, um die Navigationslinks Ihrer Website fr das Men zu verwenden oder Ihre eigene Struktur (siehe Seite 120) festzulegen. Mit der ersten Option knnen Sie z. B. die untergeordneten Seiten einer Seite Produkte aus der obersten Strukturebene als Grundlage fr Ihr Men verwenden.

4.

Die Navigationselemente

123

5.

Klicken Sie in der Registerkarte Mendarstellung des Dialogfeldes auf eine der Optionen Popup-Textmen oder Popup-Grafikmen. Die Eintrge der Grafikmens bestehen nicht aus reinen Texten, sondern aus beschrifteten Schaltflchen. Passen Sie das Design fr Ihr Popup-Men mit den Dropdownfeldern, Kontrollkstchen und Auswahlsymbolen an. Die Optionen fr die Schaltflchen, Trennelemente und den Hintergrund von Popup-Grafikmens hneln denen fr Navigationsschaltflchen. Eine genaue Beschreibung der Optionen finden Sie unter ndern der Popup-Mens in der WebPlus-Hilfe.

6.

7.

Klicken Sie auf die Schaltflche OK.

Einfgen von Schaltflchen


Schaltflchen sind ein wichtiger Bestandteil der Navigationsleisten (siehe Seite 115) von WebPlus, lassen sich jedoch auch solo auf Ihren Webseiten platzieren - entweder als separate Schaltflchen oder als Teil eines Formulars. Die Schaltflchen lassen sich so konfigurieren, dass der Mausklick eines Website-Besuchers z. B. ein Hyperlinkziel aufruft, ein Popup-Men ffnet oder eine Aktion auslst. In WebPlus knnen Sie Schaltflchen mit einer Vorlage erstellen oder in dem Button Studio von Grund auf neu entwerfen. Um beide Anstze zu verbinden, whlen Sie einfach eine Vorlage aus und passen dann die verschiedenen Optionen fr die Schaltflche (Farbe, Aufschrift usw.) an.

124

Die Navigationselemente

Einfgen vordefinierter Schaltflchen 1. Klicken Sie in der Kategorie Navigationselemente der Studio-Registerkarte QuickBuild auf das Symbol Schaltflche. Platzieren Sie den Mauszeiger auf der gewnschten Seitenposition und drcken Sie die linke Maustaste, um die Schaltflche zu platzieren. Um die Gre der Schaltflche selbst zu bestimmen, ziehen Sie bei gedrckter Maustaste den Cursor ber die Seite und lassen die Maustaste wieder los, sobald der Button die gewnschten Abmessungen erreicht hat. Klicken Sie in dem Dialogfeld Schaltflche bearbeiten auf die Vorschaubox. Whlen Sie eine Schaltflchenvorlage in dem Men aus. Die Vorschau wird nun mit dem ausgewhlten Schaltflchendesign aktualisiert. Geben Sie den Schaltflchentext ein, den Sie als Beschriftung verwenden mchten, wie z. B: Home, Hilfe oder Bilder. Whlen Sie in der Registerkarte Hyperlinks das Hyperlinkziel aus. Hiermit knnen Sie die WebsiteBesucher per Hyperlink (siehe Seite 126) auf ein bestimmtes Ziel verweisen (Internetseite, eine Datei, andere Seite Ihrer Website usw.). Whlen Sie in der Registerkarte Zielfenster ein Fenster oder einen Rahmen in dem Dropdownfeld Typ aus. Sie knnten die Zielseite zum Beispiel in einem Neuen Fenster ffnen. Klicken Sie auf die Schaltflche OK.

2.

3. 4.

5.

6.

7.

8.

Die Navigationselemente

125

ber die Registerkarten Erweitert und Aktionen legen Sie Optionen fr die Barrierefreiheit Ihrer Website und Attribute fr Suchmaschinen-Bezge (REL) fest sowie eine breite Palette an Aktionen (siehe Seite 129), die bestimmen, was die Website-Besucher mit einem Klick auf die Schaltflche auslsen knnen. ber den Quelldatei-Browser steht Ihnen eine Vielzahl an Website-Buttons und Schaltflchen aus Themenvorlagen zur Verfgung, die in verschiedenen Quelldatei-Paketen gespeichert sind. Klicken Sie hierzu einfach in der Studio-Registerkarte Quelldateien auf Durchsuchen und whlen Sie die Kategorie Schaltflchen aus. Bearbeiten einer Schaltflche

Fhren Sie einen Doppelklick auf die Schaltflche aus und stellen Sie wie oben beschrieben die verschiedenen Optionen ein.

Entwerfen eigener Schaltflchen


Mchten Sie eine Schaltflchenvorlage noch weiter anpassen oder das Design komplett selbst entwerfen, verwenden Sie einfach das Button Studio - eine spezielle Designumgebung, die direkt in WebPlus integriert ist. Die Schaltflche wird in diesem Studiofenster vollkommen isoliert angezeigt. Auf diese Weise knnen Sie sich ganz auf das Design Ihrer Schaltflche konzentrieren und werden nicht von den anderen Elementen der Seite abgelenkt.

126

Die Navigationselemente

Nhere Informationen hierzu finden Sie in der Hilfe zu WebPlus. Bearbeiten des Schaltflchendesigns

Klicken Sie in der Kontextleiste auf das Symbol Schaltflchendesign bearbeiten.

Einfgen von Hyperlinks und Aktionen


Wenn Sie Objekte wie z. B. Wrter, Bilder usw. mit einem Hyperlink versehen, kann ein Besucher Ihrer Website mit einem Klick auf dieses Objekt ein frei definierbares Ereignis auslsen. Aktionen hneln in sofern den Hyperlinks, als dass sie ebenfalls bestimmen, was bei einem Mausklick oder der Mausberhrung eines Objekts geschieht. Der Unterschied zu den Hyperlinks liegt jedoch darin, dass ein Klick oder eine Mausberhrung auf der aktuellen Seite ein Ereignis auslsen und den Website-Besucher nicht zu einem anderen Ziel leiten. Nhere Informationen hierzu finden Sie unter dem Thema Anwenden von Aktionen auf Seite 129.

Die Navigationselemente

127

Einfgen von Hyperlinks


Hinzufgen eines Hyperlinks 1. Whlen Sie mit dem Zeigerwerkzeug ein einzelnes Objekt, eine Objektgruppe oder einen Textabschnitt aus. Klicken Sie in der Symbolleiste fr Webeigenschaften auf die Option Hyperlink. Das Programm ffnet nun das Dialogfeld Hyperlinks. 3. 4. Whlen Sie den Zieltyp fr den Hyperlink aus, wie z. B. eine Website-Seite, Internetseite, ein Smart-Objekt usw. Je nach Linktyp knnen Sie in dem rechten Feld nun unterschiedliche Optionen fr Ihr Hyperlinkziel festlegen. Klicken Sie auf die Schaltflche OK. Alle Hyperlinks und Anker in Ihrer Website lassen sich bequem mit dem Website-Manager verwalten, der jederzeit ber die Standardkontextleiste sowie das Men Extras erreichbar ist. Entfernen und Bearbeiten von Hyperlinks 1. Markieren Sie mit dem Zeigerwerkzeug das gewnschte Objekt, oder platzieren Sie per Mausklick eine Einfgemarke in dem Linktext. (Sie mssen nicht den gesamten Hyperlinktext markieren.) Klicken Sie in der Symbolleiste fr Webeigenschaften auf die Option Hyperlink.

2.

5.

2.

Das Dialogfeld Hyperlink bearbeiten wird nun geffnet und zeigt das Hyperlinkziel des ausgewhlten Objekts an.

128

Die Navigationselemente

Um den Hyperlink zu modifizieren, whlen Sie einen neuen Zieltyp, ein neues Ziel und/oder andere Optionen aus. Um den Hyperlink zu lschen, klicken Sie auf die Option Kein Hyperlink.

Auswhlen des Zielfensters


ber die Registerkarte Zielfenster im Dialogfeld Hyperlink knnen Sie eine Reihe unterschiedlicher Fenster, Rahmen oder auch eine Lightbox festlegen, in denen das Linkziel angezeigt werden soll. Auswhlen eines Zielfensters 1. 2. Klicken Sie in dem Dialogfeld Hyperlink bearbeiten auf die Registerkarte Zielfenster. Whlen Sie eine Option in dem Dropdownfeld Typ aus.

Fr knstlerische Texte, Rahmentexte oder Tabellentexte knnen Sie in der Registerkarte Darstellung des Dialogfelds verschiedene Farboptionen fr den Hyperlinktext festlegen. ndern der Hyperlinkdarstellung 1. Legen Sie die gewnschten Eigenschaften fest (z. B. den Titel, der als QuickInfo angezeigt wird, wenn Sie den Mauszeiger auf dem Link platzieren). Mit der Dropdownliste Stil legen Sie fest, wie der Hyperlinktext formatiert wird (nur fr Texthyperlinks).

2.

Anzeigen und Bearbeiten bestehender Hyperlinks

Klicken Sie im Men Extras auf Website-Manager > Hyperlink-Manager, wenn Sie einen Hyperlink anzeigen, umbenennen oder entfernen mchten.

Die Navigationselemente

129

Anwenden von Aktionen


Aktionen lassen sich fr Objekte (nicht fr Texte) festlegen und bieten Ihren Website-Besuchern mehr Interaktionsmglichkeiten. Hierfr stehen Ihnen die folgenden Aktionen zur Verfgung, die gewhnlich durch einen Mausklick oder das Platzieren der Maus auf dem Objekt ausgelst werden:

Hinweis: Anzeigen eines Popup-Hinweisfensters (bei Mausklick). Sichtbarkeit: Anzeigen eines Panels (bei Mausberhrung oder Klick). Deckkraft: Schaltet das Objekt transparent (bis zu der Mausberhrung), um z. B. nur bei der Mausberhrung Navigationsschaltflchen in dem Panel einzublenden. Z-Index: ndern der Stapelfolge (Z-Index) des Objekts in Relation zu anderen Objekten (bei Mausberhrung). Ein hoher Wert fr den Z-Index (z. B. 150) stellt sicher, dass dieses Objekt bei der Mausberhrung immer vor allen anderen Objekten angezeigt wird (also nicht verdeckt ist). Auf diese Weise lsst sich z. B. ein Foto weiter unten in einem Bilderstapel mit der Mausberhrung oben auf den Stapel legen. Drucken: Drucken der aktuellen Seite ber ein DruckenDialogfeld (bei Mausklick). Slider: Hinzufgen einer Aktion (Wiedergabe, Pause usw.) zu einer Navigationsschaltflche, um die Wiedergabe des Sliders zu steuern. Sie knnen die entsprechende Aktion zu allen Navigationsschaltflchen zuordnen, d. h. die Wiedergabe-Aktion zu einer Wiedergabe-Schaltflche usw. Nhere Informationen hierzu finden Sie unter Arbeiten mit Slidern auf Seite 109.

130

Die Navigationselemente

Slider-Feedback: Hiermit bestimmt der aktuelle Wiedergabestatus des Sliders den Schaltflchenzustand. Der Schaltflchenzustand ndert sich also dynamisch je nach momentaner Aktivitt des Sliders. Benutzerdefiniert: Hiermit knnen Sie selbst ein JavaScript festlegen, das als Reaktion auf einen Mausklick, Tastendruck usw. gestartet werden soll. Die Registerkarte Aktionen wird nur angezeigt, wenn Sie ein Objekt auswhlen. Nach der Auswahl von Text ist diese Registerkarte nicht verfgbar. Bevor Sie eine Aktion fr einPanel festlegen knnen, mssen Sie zunchst das Panel erstellen. Weitere Informationen hierzu finden Sie unter Einfgen von Panels auf Seite 89.

Festlegen einer Aktion 1. 2. 3. 4. Klicken Sie in der Symbolleiste fr Webeigenschaften auf die Option Aktionen bearbeiten. Klicken Sie in dem Dialogfeld auf Hinzufgen und dann auf die gewnschte Menoption. Konfigurieren Sie in dem Dialogfeld die gewnschte Aktion. Klicken Sie auf die Schaltflche OK.

Bei der Vorschau oder nach dem Publizieren der Webseite lsst sich die ausgewhlte Aktion dann mit einem Mausklick oder der Platzierung des Mauszeigers auf dem Objekt auslsen.

Die Navigationselemente

131

Einfgen von Ankern


Ein Anker ist eine bestimmte Position auf einer Webseite, die als Ziel fr einen Hyperlink (siehe Seite 126) fungieren kann. Diese fr die Website-Besucher unsichtbaren Anker markieren fr gewhnlich den Anfang von Abstzen, interessante Textstellen oder Bilder auf einer Webseite. Einfgen eines neuen Ankers 1. Markieren Sie mit dem Zeigerwerkzeug das gewnschte Objekt, oder platzieren Sie per Mausklick eine Einfgemarke in dem Zieltext. Klicken Sie in der Symbolleiste fr Webeigenschaften auf die Option Anker. Geben Sie in das Dialogfeld einen Namen fr den Anker ein. (Optional) Aktivieren Sie die Option Anker in Navigation einschlieen, damit der Anker (fr gewhnlich ein ausgewhltes Objekt) ber die Navigationsleiste angesteuert werden kann anstatt ber einen Hyperlink. Zuvor mssen Sie fr Ihre Navigationsleiste jedoch die Option Anker einschlieen (in den Navigationsleisteneinstellungen) aktivieren. Geben Sie nun einen Titel fr den Anker ein. Klicken Sie auf die Schaltflche OK.

2. 3. 4.

5.

Anzeigen und Bearbeiten bestehender Anker

Klicken Sie im Men Extras auf Website-Manager > Anker-Manager, wenn Sie auf Ihren Seiten festgelegte Anker berprfen, umbenennen oder entfernen mchten. Sie knnen Anker ebenfalls in die Seitennavigation einbeziehen.

132

Die Navigationselemente

Arbeiten mit Lightboxen


Lightboxen bieten elegante und moderne Prsentationsmglichkeiten fr verschiedene Webinhalte, die dann einfach ber Ihren Seiten eingeblendet werden. Wenn Sie auf ein Objekt mit entsprechendem Auslser klicken, wird automatisch ein Popup-Fenster fr die Lightbox geffnet und zeigt den entsprechenden Inhalt an. Diese Fenster sind daher ideal zur Prsentation zustzlicher Informationen - Ihre Website-Besucher entscheiden einfach selbst, welche Inhalte sie sehen mchten.

Lightboxen lassen sich fr die Anzeige folgender Inhalte konfigurieren:

Bilder (als grere Variante einer Bildminiatur, die Sie bereits auf einer Webseite platziert haben). Formulare Ihrer Website. Ein Anmeldungsfeld fr die Zugangskontrolle. Seiten (Ihrer Website oder aus dem Internet). Blogs, Foren oder RSS-Feeds. Word-Dateien, PDFs oder andere Dateitypen.

Die Navigationselemente

133

Erstellen einer Lightbox fr die Bilder auf Ihrer Webseite 1. Whlen Sie ein Bild aus (vorzugsweise platziert als Bildminiatur). Klicken Sie in der Symbolleiste fr Webeigenschaften auf Hyperlink. Whlen Sie in der Registerkarte Hyperlink die Option Bild aus. Legen Sie in der Registerkarte Zielfenster die Option Lightbox ber das Feld Typ fest. (Optional) Um einen Titel fr das Bild in der Lightbox einzublenden, geben Sie den Text in das Feld Titel ein. Klicken Sie auf die Schaltflche OK.

2. 3. 4. 5. 6.

Um die Darstellungsgre der verknpften Lightbox-Bilder einzuschrnken, skaliert WebPlus grere Bilder automatisch auf eine maximale Breite und Hhe (standardmig 800 x 600 Pixel). Das Seitenverhltnis der Bilder bleibt hierbei unverndert. Bilder, deren Abmessungen kleiner als die Standardwerte sind, werden nicht skaliert. Sie knnen die Maximalwerte fr Breite und Hhe jederzeit anpassen. Nhere Informationen hierzu finden Sie unter Einstellen der globalen Lightbox-Eigenschaften auf Seite 136. Erstellen einer Lightbox fr ein lokal gespeichertes Bild

Gehen Sie wie oben beschrieben vor und whlen Sie in dem Hyperlink-Dialogfeld anstelle der Option Bild die Option Datei aus.

Sie knnen das Bild wahlweise einbetten oder verknpfen. In beiden Fllen wird das Bild mit seinen ursprnglichen Bildabmessungen angezeigt.

134

Die Navigationselemente

Lightbox-Diashows
Sie knnen einfache Lightbox-Diashows aus den Bildern erstellen, die auf derselben Webseite platziert sind. In der Lightbox werden dann Steuersymbole eingeblendet, mit denen die Betrachter durch die Bilder navigieren knnen. Erstellen einer Lightbox-Diashow 1. 2. 3. Erstellen Sie eine Lightbox fr ein Bild auf Ihrer Webseite (siehe oben). Klicken Sie in dem Dialogfeld Hyperlink und Aktionen bearbeiten auf die Registerkarte Zielfenster. Geben Sie eine Bezeichnung fr die Diashow in das Feld Name der Diashow ein. Dieser Name wird dann auch fr andere Bilder verwendet, die Sie zu dieser Diashow hinzufgen. Klicken Sie auf die Schaltflche OK. Wiederholen Sie den Schritt fr das nchste Bild. Der zuvor festgelegte Name der Diashow wird nun fr alle anderen Bilder in dem entsprechenden Dropdownfeld aufgelistet. Whlen Sie den Namen der Diashow aus, um das Bild zu integrieren. (Optional) Geben Sie einen Titeltext fr die einzelnen Bilder ein. Klicken Sie auf die Schaltflche OK. Die Lightbox-Diashow lsst sich nur fr die Bilder festlegen, die auf derselben Webseite platziert sind. Wenn Sie Bilder aus unterschiedlichen Seiten in eine Diashow einfgen, wird fr jede Seite eine separate Diashow erstellt.

4.

5. 6.

Die Navigationselemente

135

Anzeigen beliebiger Hyperlinkziele in Lightboxen


Lightboxen lassen sich nicht nur fr die Darstellung von Bildern einsetzen. Eine Lightbox ist im Grunde ein Fenster, in dem Sie jede Art von Hyperlinkziel (siehe WebPlus-Hilfe) einblenden knnen von den Seiten Ihrer Website (z. B. ein Formular oder eine Anmeldungsseite) bis zu beliebigen Internetseiten, Blogs, Foren oder RSS-Feeds. Word-Dateien, PDFs und andere Dateitypen lassen sich mit der Option Datei ebenfalls in einer Lightbox ffnen. Erstellen einer Lightbox fr ein beliebiges Hyperlinkziel 1. 2. 3. 4. Whlen Sie ein Objekt aus (Bild, Schaltflche usw.). Klicken Sie in der Symbolleiste fr Webeigenschaften auf Hyperlink. Whlen Sie in der Registerkarte Hyperlink ein Hyperlinkziel aus. Konfigurieren Sie die Lightbox wie zuvor beschrieben ber die Registerkarte Zielfenster.

136

Die Navigationselemente

Einstellen der globalen Lightbox-Eigenschaften


Genau wie bei den meisten Einstellungen in WebPlus knnen Sie auch die Lightbox-Einstellungen fr die aktuelle Website anpassen. Zu den konfigurierbaren Optionen einer Lightbox gehren die allgemeine Lightbox-Steuerung (einschlielich Umrandungstyp), die Titelformatierung (Schriftart, -gre, -farbe und -deckkraft) sowie die Hintergrundoptionen (Farbe und Deckkraft). ndern der Lightbox-Einstellungen fr Ihre Website 1. Klicken Sie auf den Menpunkt Bearbeiten > WebsiteEigenschaften und dann auf die Kategorie Features > Lightbox. Passen Sie die gewnschten Optionen der allgemeinen Einstellungen, Titeleinstellungen und Hintergrundeinstellungen an. (Optional) ffnen Sie eine Test-Lightbox ber Vorschau der Lightbox, um Ihre Einstellungen zu prfen und zu verfeinern.

2.

3.

Lightboxen fr Fotogalerien
Sie knnen ebenfalls eine Fotogalerie (siehe Seite 96) im Stil einer Lightbox erstellen, wenn Sie die Option JavaScript-Fotogalerie verwenden. Einer der hier verfgbaren Galerietypen wurde speziell fr Lightboxen entworfen.

Wenn Sie diese Formatierung auswhlen, knnen Sie die LightboxEinstellungen separat anpassen und somit die globalen Einstellungen in den Website-Eigenschaften ignorieren.

Interaktive Objekte

138

Interaktive Objekte

Interaktive Objekte

139

Einfgen eines Rollovers


Bilder, deren Darstellung sich durch ein Mausereignis verndert, werden als Rollovergrafiken bezeichnet. Zu diesen Mausereignissen gehren z. B. ein Mausklick oder das Platzieren des Mauszeigers auf einem Objekt. Sie knnen ebenfalls Rollovergrafiken importieren, die mit Serif DrawPlus erstellt wurden. Nhere Informationen hierzu finden Sie in der WebPlus-Hilfe.

Die Rolloveroptionen
Wenn Sie einen Rollovereffekt einrichten, legen Sie zunchst den Rolloverzustand oder die Zustnde fr ein Objekt fest und weisen dann jedem Zustand ein bestimmtes Bild zu. WebPlus bietet Ihnen fr die Rolloverzustnde vier Grundoptionen:
Normal

Dies ist der Ruhezustand der Grafik vor Beginn des Rollovereffekts. Diesen Zustand mssen Sie fr alle Objekte festlegen.

140

Interaktive Objekte Mouseover

Dieser Zustand wird ausgelst, wenn sich der Mauszeiger auf dem Objekt befindet.

Klick

Dieser Zustand wird durch einen Mausklick auf das Objekt ausgelst (d. h. die Maustaste muss gedrckt werden, wenn sich der Mauszeiger auf dem Objekt befindet).

Der hier nicht dargestellte Zustand Klick+Mouseover wird fr ein Mouseover-Ereignis verwendet, das nach dem Klick auf das Objekt eintritt. Fr jeden Rollovereffekt knnen Sie ebenfalls ein HyperlinkEreignis festlegen, wie z. B. den Wechsel zu einer anderen Webseite. Dieses Ereignis wird automatisch ausgelst, wenn ein Webseitenbesucher auf das Rolloverobjekt klickt und dann die Maustaste loslsst. Darber hinaus lassen sich auch verschiedene Schaltflchen zu einer Gruppe zusammenfassen, sodass immer nur eine Schaltflche den Klick-Zustand aufweisen kann.

Interaktive Objekte

141

Erstellen einer Rollovergrafik 1. Erstellen Sie in einem Bildbearbeitungsprogramm die gewnschten Quellbilder fr die verschiedenen Zustnde des Effekts. Klicken Sie in der Kategorie Interaktive Objekte der Studio-Registerkarte QuickBuild auf das Symbol Rollover und ziehen Sie den Mauszeiger mit gedrckter Maustaste ber Ihre Seite, um die Gre des Rolloverobjekts zu bestimmen. Gehen Sie in der Registerkarte Rollovergrafik des nun geffneten Dialogfelds Rollover bearbeiten wie folgt vor:

2.

3.

Legen Sie unter Rolloverzustnde die gewnschten Zustnde (siehe oben) fr die Grafik fest. Klicken Sie fr jeden Zustand auf die Schaltflche Durchsuchen..., whlen Sie die entsprechende Bilddatei aus, und legen Sie dann die Exportoptionen fr das Bild fest (siehe Einstellen der Bildexportoptionen in der WebPlus-Hilfe). Wenn Sie die Bilder in Ihre WebPlus-Website integrieren mchten, aktivieren Sie die Option Dateien in Website einbetten. Whlen Sie fr den anfnglichen Zustand des Rollovereffekts eine der Optionen Normal oder Klick aus.

142

Interaktive Objekte

Mchten Sie dieses Rolloverobjekt mit anderen Rolloverobjekten auf der Seite so gruppieren, dass immer nur eines dieser Objekte im Klick-Zustand angezeigt werden kann, aktivieren Sie fr dieses und die anderen Rolloverobjekte der Gruppe die Einstellung Optionsfeld.

4. 5.

(Optional) Legen Sie in der Registerkarte Hyperlinks ein Hyperlinkziel fr den Rollover fest. Klicken Sie auf die Schaltflche OK.

WebPlus zeigt fr die ausgewhlte Rollovergrafik immer das Bild des Normal-Zustands an. Sie sollten daher die Webseite in einer Vorschau ffnen, um die Rollovergrafiken zu testen. Anschlieend knnen Sie dann die notwendigen Korrekturen in WebPlus vornehmen. Bearbeiten einer Rollovergrafik

Fhren Sie einen Doppelklick auf die Rollovergrafik aus, um das Dialogfeld Rollover bearbeiten zu ffnen. Stellen Sie die gewnschten Werte ein.

Interaktive Objekte

143

Einfgen von Rollover-Popups


In WebPlus werden Rollover-Popups hauptschlich fr Bilder verwendet. Wenn ein Website-Besucher den Mauszeiger auf eine Bildminiaturansicht bewegt, wird automatisch eine vergrerte Darstellung des entsprechenden Fotos eingeblendet (fr gewhnlich ein wenig gegen die Miniatur versetzt).

Mit WebPlus knnen Sie die Position und Gre des Popups in Relation zu der Miniaturansicht festlegen und auch die Miniaturansicht jederzeit auswhlen und vergrern oder verkleinern. Bearbeiten von Rollover-Popups 1. Klicken Sie in der Kategorie Interaktive Objekte der Studio-Registerkarte QuickBuild auf das Symbol Rollover-Popup und ziehen Sie den Mauszeiger mit gedrckter Maustaste ber Ihre Seite, um die Gre des Rolloverobjekts zu bestimmen. Gehen Sie in der Registerkarte Rollovergrafik des nun geffneten Dialogfelds Rollover-Popup bearbeiten wie folgt vor:

2.

Whlen Sie das Bild fr den Zustand Normal aus, indem Sie ber die Schaltflche Durchsuchen... die gewnschte Datei angeben. Klicken Sie anschlieend auf die Schaltflche ffnen.

144

Interaktive Objekte

Standardmig wird das fr Normal ausgewhlte Bild auch fr die Mouseover-Variante verwendet (z. B. fr Fotominiaturansichten). Mit der Schaltflche Durchsuchen... knnen Sie aber auch ein vllig anderes Bild auswhlen. (Optional) Legen Sie fr eines oder beide Bilder die Exportoptionen fest (siehe Einstellen der Bildexportoptionen in der WebPlus-Hilfe). (Optional) Wenn Sie die Bilder in Ihre WebPlusWebsite integrieren mchten, aktivieren Sie die Option Bilddateien in Website einbetten.

Fr die Rollover-Popups knnen Sie zustzlich einen Titel festlegen, der dann neben dem Mouseover-Bild eingeblendet wird. Nhere Informationen hierzu finden Sie in der WebPlus-Hilfe. Damit das Rollover-Popup mglichst effektiv ist, mssen Sie noch die Position der Normal- und Mouseover-Bilder auf der Seite festlegen. Die Position der Bilder lsst sich ber ein Dialogfeld przise einstellen, indem Sie die Bilder einfach durch Ziehen mit der Maus platzieren oder ihre Gre ndern. Alternativ lassen sich die Einstellungen auch als absolute Pixelwerte festlegen. Positionieren der Rolloverbilder 1. ffnen Sie in dem Dialogfeld Rollover-Popup bearbeiten die Registerkarte Rollovergrafik und klicken Sie auf die Schaltflche Rolloverposition. Whlen Sie in dem nun geffneten Dialogfeld ein Bild aus. In dem Dropdownfeld wird der aktuelle Auswahlstatus angezeigt:

2.

Normal Auswahl: Ein Bild fr den Zustand Normal wird ausgewhlt und mit einem grnen Rand markiert.

Interaktive Objekte

145

Mouseover Auswahl: Ein Bild fr den Zustand Mouseover wird ausgewhlt und mit einem blauen Rand markiert. Wenn Sie kein Bild auswhlen, wird in dem Dropdownfeld der Eintrag Nein Auswahl angezeigt.

3.

Sie knnen die Bilder nun durch Klicken und Ziehen neu positionieren. Um die Bildgre zu ndern, ziehen Sie mit gedrckter Maustaste einen der Eckziehpunkte. Das Seitenverhltnis wird bei dieser Skalierung beibehalten. Alternativ knnen Sie auch genaue Werte in die Felder Oben und Links sowie Breite und Hhe eingeben, um die Position festzulegen. ber die nach unten zeigenden Pfeile dieser Felder knnen Sie die drei zuletzt verwendeten Werte auswhlen, die Sie fr Normal, Mouseover und Titel (von oben nach unten) festgelegt haben, sodass sich die Bilder przise ausrichten lassen. (Optional) Um die Position der Mouseover-Grafik in Relation zu der normalen Grafik beizubehalten, wenn die normale Grafik vergrert oder verkleinert wird, aktivieren Sie die Option Position relativ zum Normalbild. (Optional) Wenn Sie die Bilder fr den Normalund/oder Mouseover-Zustand frei skalieren mchten, deaktivieren Sie die Option Seitenverhltnis beibehalten. Anschlieend mssen Sie die Bildabmessungen mit den Eingabefeldern (nicht durch Ziehen) festlegen.

4.

5.

Das Bild fr den Zustand Normal wird nun auf Ihrer Seite platziert. Das Mouseover-Bild lsst sich erst in einer Vorschau oder auf einer publizierten Webseite anzeigen.

146

Interaktive Objekte

Indem Sie zustzliche Normalbilder als separate Rollover-Popups auf einer Webseite platzieren, knnen Sie schnell und einfach eine interessante Galerie zusammenstellen, bei der sich die vergrerten Bilder einfach per Mausklick auf die Miniaturen ffnen lassen. Bearbeiten von Rollover-Popups

Fhren Sie einen Doppelklick auf das Normalbild einer Seite aus, um das Dialogfeld Rollover-Popup bearbeiten zu ffnen. Stellen Sie die gewnschten Werte ein.

Einfgen einer Website-Suche


WebPlus verwendet eine leistungsstarke Suchfunktion, mit der Sie oder Ihre Website-Besucher gezielt die Texte (knstlerische Texte sowie Textrahmen und Tabellen) nach bestimmten Begriffen durchsuchen knnen. Die Suchfunktion besteht aus zwei Teilen: einem Formular fr die Website-Suche und einem Fenster fr die WebsiteSuchergebnisse. Ergebnisse der Website-Suche: Hiermit erstellen Sie ein Fenster, in dem die Suchergebnisse angezeigt werden. Dieses Fenster wird fr gewhnlich auf einer separaten Seite platziert und ist nicht Teil der Navigationsstruktur Ihrer Website. Fr gewhnlich wird das Fenster fr die Suchergebnisse vor dem Formular fr die Website-Suche platziert.

Interaktive Objekte

147

Formular fr die Website-Suche: In dieses Textfeld geben die Website-Besucher den Begriff ein, nach dem die Webseiten durchsucht werden sollen. Sie fgen dieses Textfeld fr gewhnlich auf einer Master-Seite ein, damit es auf allen Seiten Ihrer Website verfgbar ist. In den Suchergebnissen werden dann ein Seitenname mit Hyperlink angezeigt sowie ein entsprechender Text der Webseite als Referenz. Klicken Sie einfach auf den Hyperlink, um zu der entsprechenden Seite umzuschalten. Einfgen des Objekts fr die Website-Suchergebnisse 1. Klicken Sie im Men Einfgen auf den Eintrag WebsiteSuche und in dem nun geffneten Untermen auf Website-Suchergebnisse. Ziehen Sie den Einfgen-Cursor mit gedrckter Maustaste ber die Seite, um das Fenster fr die Suchergebnisse zu platzieren. Es empfiehlt sich auerdem, die Suchergebnisse auf einer separaten (eventuell neuen) Seite einzublenden. Fr diese Seite knnen Sie dann z. B. auch ein anderes Design festlegen als fr den Rest der Website. Um die Darstellung auf der Seite zu ndern, fhren Sie einfach einen Doppelklick auf das Objekt fr die Suchergebnisse aus. Einfgen eines Formularobjekts fr die Website-Suche 1. Klicken Sie im Men Einfgen auf den Eintrag WebsiteSuche und in dem nun geffneten Untermen auf Website-Suche. Klicken Sie mit dem Einfgen-Cursor auf die Seite, um das Formularobjekt fr die Website-Suche zu platzieren. Damit Ihre Website-Besucher mglichst von allen Seiten auf die Suchfunktion zugreifen knnen, sollten

2.

2.

148

Interaktive Objekte

Sie das Funktionsobjekt am oberen Rand einer MasterSeite platzieren. Bearbeiten der Darstellung fr ein Suchen-Objekt

Fhren Sie einen Doppelklick auf das Suchen-Objekt aus, um sein Bearbeitungsfenster zu ffnen. Stellen Sie die gewnschten Werte ein.

Einfgen von Google Maps


Google Maps sind ideal, wenn Sie Ihren Website-Besuchern eine genaue Karte zu Ihrem Unternehmen oder den Anfahrtsweg zu einem besonderen Event zur Verfgung stellen mchten. Diese Karten eignen sich ebenfalls hervorragend, um Sehenswrdigkeiten zu markieren.

Auf jeder Karte knnen Sie Marker platzieren, um bestimmte Orte zu kennzeichnen.

Interaktive Objekte

149

Einfgen einer Google Map 1. Klicken Sie in der Kategorie Interaktive Objekte der Studio-Registerkarte QuickBuild auf das Symbol Google Map und ziehen Sie den Mauszeiger mit gedrckter Maustaste ber Ihre Seite, um die Gre der Karte zu bestimmen. Tragen Sie in dem Dialogfeld Google Map Ihre Postleitzahl oder Adresse in das Feld Folgenden Ort suchen ein und klicken Sie anschlieend auf Suchen. WebPlus sucht nun mit dem Geolocator von Google nach der von Ihnen angegebenen Position und zeigt die lokalen Adressen an.

2.

Einfgen von Markern


Sie knnen Ihre Google Map mit einer unbegrenzten Anzahl von Markern versehen. Jeder Marker lsst sich so konfigurieren, dass er bei einer Mausberhrung oder einem Klick zustzliche Details einblendet. Hinzufgen von Markern 1. 2. Klicken Sie im Dialogfeld Google Map auf Hinzufgen. Klicken Sie in dem Dialogfeld Google Map Marker mit dem Mauszeiger 3. auf die gewnschte Position. Geben Sie einen Namen fr den Marker ein. Dieser Name wird als QuickInfo angezeigt, wenn ein WebsiteBesucher den Mauszeiger auf dem Marker platziert. Hier knnten Sie z. B. den Namen einer Firma eintippen.

150 4.

Interaktive Objekte

Legen Sie eine Klickaktion fr den Marker fest. Diese bestimmt, welche Informationen bei einem Mausklick angezeigt werden. Klicken Sie auf die Schaltflche OK. Der Marker wird in der Kartenvorschau nun grn angezeigt. Hieran erkennen Sie stets die aktuelle Auswahl. Wiederholen Sie diese Schritte, um nacheinander alle gewnschten Marker zu platzieren.

5.

Einfgen einer Werbung


Google AdSense ist ein kostenloser Service von Google, mit dem Sie Werbeflchen auf Ihren Webseiten platzieren knnen. Ihren Website-Besuchern werden dann Werbungen gezeigt, die je nach Inhalt Ihrer Webseiten variieren. Fr die Werbeflchen bentigen Sie als Webentwickler einen gltigen Account bei Google Adsense (www.google.com/adsense), mit dem Sie Werbungen auswhlen und ihre Darstellung festlegen knnen. Jede Werbung wird als Einheit bezeichnet. Sie knnen den fr jede Einheit von der Google Adsense Website generierten Code kopieren und einfach in das Google Adsense Dialogfeld von WebPlus einfgen. Anmelden bei Google Adsense

ffnen Sie die Website www.google.com/adsense, um sich anzumelden oder ein Konto zu erffnen. Klicken Sie auf die Schaltflche Jetzt anmelden, um Ihre bestehenden Benutzerdetails einzugeben oder ein Konto bei Google Adsense zu erffnen. Als neuer Benutzer mssen Sie zunchst die URL Ihrer Website sowie die Sprache angeben und den Nutzungsbedingungen von Google zustimmen.

Interaktive Objekte

151

Nach der Registrierung mssen Sie einige Zeit warten, bis Google geprft hat, ob Ihre Website die Bedingungen fr AdSense-Werbungen erfllt. Sie erhalten dann eine E-Mail mit der Antwort von Google. Besteht Ihre Website die Prfung, knnen Sie Ihre eigenen Anzeigen erstellen und verwalten. Bei der Registrierung wird Ihre Website berprft und Sie erhalten Werbungen, die zu dem Inhalt Ihrer Website passen. Erstellen und Verwalten von Anzeigen 1. 2. Melden Sie sich bei Google Adsense an. Whlen Sie in dem Adsense Setup die Option Adsense fr Content-Seiten aus und folgen Sie den Anweisungen des Assistenten, um eine Anzeigeneinheit zu erstellen. Legen Sie anschlieend Format und Farbgebung fr die Anzeigen fest. Kopieren Sie nun den von Google generierten Code der Anzeigeneinheit. Diesen Code mssen Sie in WebPlus einfgen.

3.

152

Interaktive Objekte

Einbetten von Anzeigen in Ihre Webseite 1. Whlen Sie eine Webseite oder Master-Seite aus, auf der Sie die Anzeige platzieren mchten. ffnen Sie die Kategorie Interaktive Objekte der Studio-Registerkarte QuickBuild und ziehen Sie das Symbol Google AdSense direkt auf Ihre Seite, um die Werbung in der Standardgre zu erstellen. Die Abmessungen der Werbung lassen sich nicht ndern. Sie mssen die Werbung immer mit der von Google AdSense festgelegten Originalgre verwenden. 3. Klicken Sie auf die Schaltflche Aus Zwischenablage einfgen, um den zuvor kopierten Code einzufgen. Der Code wird nun in Ihrem Dialogfeld angezeigt und lsst sich nicht bearbeiten. Klicken Sie auf die Schaltflche OK.

2.

4.

Bearbeiten Ihrer Anzeige 1. Um das Format und die Farbe Ihrer Anzeigeneinheit zu ndern, nehmen Sie die entsprechenden nderungen in dem Adsense Setup auf der Website von Google Adsense vor und kopieren dann den neu erstellten Code. Fhren Sie einen Doppelklick auf die Anzeige Ihrer Seite aus. Klicken Sie auf die Schaltflche Aus Zwischenablage einfgen, um den zuvor kopierten Code einzufgen. Klicken Sie auf die Schaltflche OK.

2. 3. 4.

Externe/Verwaltete Inhalte

154

Externe/Verwaltete Inhalte

Externe/Verwaltete Inhalte

155

Einfgen von Dokumentrahmen


Mit WebPlus knnen Sie einen oder mehrere Rahmen auf einer Seite platzieren, um in diesen Rahmen eine andere Seite Ihrer Website anzuzeigen. Diese auf einer Seite eingebetteten Dokumentrahmen werden auch als Inline Frames oder IFrames bezeichnet. Dokumentrahmen lassen sich genau wie Bilder an jeder beliebigen Stelle einer Seite platzieren und flexibel skalieren. Obwohl das in diesen Rahmen per Link angezeigte Ziel hufig eine Seite ist, knnen Sie die Rahmenlinks auch auf beliebige andere Ziele erstellen, wie z. B. eine Seite im Internet, eine lokale Datei, ein Smart-Objekt oder gespeicherte Benutzerdaten.

Wenn Sie einen Rahmen zu einer Master-Seite hinzufgen, sollten Sie sicherstellen, dass die Zielseite des Rahmens nicht dieselbe Master-Seite verwendet, damit kein unerwnschter Seite-in-Seite-Effekt auftritt. WebPlus untersttzt ebenfalls Aktive Dokumentrahmen. Dies ist besonders hilfreich, wenn Sie eine Website mit Rahmen aufgebaut haben und eine bestimmte Seite in einem Rahmen ffnen mchten.

156

Externe/Verwaltete Inhalte

Der Name des aktiven Dokumentrahmens besteht aus einer Kombination von Seiten- und Rahmennamen. Die Bezeichnung Home:ifrm_6 steht z. B. fr die Seite Home (also die Homepage) und den automatisch generierten Frame ifrm_6. Die Seiten lassen sich mit einer Weiterleitung zu dem Rahmen ausstatten, in dem sie angezeigt werden sollen. Dies ist besonders praktisch, wenn die Seiten ber eine Suchmaschinenabfrage aufgerufen werden. Um diese Mglichkeit fr alle Seiten festzulegen, die in einem Rahmen angezeigt werden sollen, verwenden Sie die Seiteneigenschaften der Seite. Aktivieren Sie in dem Dialogfeld Seiteneigenschaften unter der Kategorie Navigation die Optionen Im aktiven Dokumentrahmen ffnen und Falls notwendig zu diesem Rahmen weiterleiten. Erstellen einer Website mit Dokumentrahmen 1. Whlen Sie die Seite aus, auf der Sie den Rahmen einfgen mchten. Klicken Sie in der Kategorie Externe/Verwaltete Inhalte der Studio-Registerkarte QuickBuild auf das Symbol Dokumentrahmen. Ziehen Sie den Mauszeiger mit gedrckter Maustaste ber Ihre Seite, um den Bereich und die Gre fr den Rahmen zu bestimmen. Es wird nun ein Dialogfeld geffnet, mit dem Sie verschiedene Einstellungen fr den Dokumentrahmen konfigurieren knnen. Hierzu gehren:

2.

3.

4.

HTML-ID: Diese einzigartige ID wird fr jeden Rahmen festgelegt. Fr gewhnlich mssen Sie diese Einstellung nicht ndern. Aktiver Dokumentrahmen: Aktivieren Sie diese Option, wenn Sie per Hyperlink die Seiten in einem Rahmen auf einer anderen Seite ffnen mchten.

Externe/Verwaltete Inhalte

157

5.

Whlen Sie in der Registerkarte Inhalte ein Linkziel aus. Klicken Sie einfach auf eines der Symbole, um z. B. eine Seite Ihrer Website, eine Internet-Seite, ein SmartObjekt, oder eine Datei auf Ihrer Festplatte als Ziel auszuwhlen. Legen Sie die Informationen fr den Inhalt des Rahmens (den Namen der Seite oder Internet-Seite usw.) fest. Je nach ausgewhltem Ziel knnen Sie in diesem Feld unterschiedliche Optionen einstellen. Klicken Sie auf die Schaltflche OK.

6.

7.

Absolute URLS
Da Rahmen eine Webseite in unterschiedliche Felder teilen, die alle separate HTML-Dokumente anzeigen, mssen Sie sicherstellen, dass alle Teile des Rahmens mit absoluten URLs bezeichnet werden. Wenn Sie mit absoluten URLs arbeiten mchten, mssen Sie die Stamm-URL Ihrer Website festlegen, die ein fester Bestandteil aller URLs Ihrer Webseiten ist, z. B. www.serif.com. WebPlus verwendet dann diese Vorgabe, um den Rest der URL zu erstellen.

Einfgen eines Blogs


Ein Blog (Kurzform von Weblog) bernimmt die Funktion eines Tagebuchs/Nachrichtenblattes auf Ihrer Website, in dem Sie mit einem unkomplizierten RTF-Editor Ihre eigenen Artikel verffentlichen. Bei den Blogs ist es blich, dass die Besucher der Website die verschiedenen Artikel kommentieren knnen. In WebPlus gehren die Blogs zu den Smart-Objekten, einer besonderen Kategorie von Seitenelementen, die auf dem Server eines sicheren Onlinedienstes gespeichert werden - den Serif Webressourcen. Wenn Sie also einen Blog oder ein anderes SmartObjekt verwenden mchten, bentigen Sie ein gltiges

158

Externe/Verwaltete Inhalte

Benutzerkonto fr die Serif Webressourcen. Dieses Konto knnen Sie bequem anlegen, wenn Sie Ihren Blog erstellen. Als Besitzer des Blogs bernehmen Sie auch die Blogverwaltung. Sie knnen fr den Blog z. B. Artikel hinzufgen, bearbeiten und entfernen sowie Kommentare lschen, die Website-Besucher zu den Artikeln hinterlassen haben. Blogs lassen sich ebenfalls so konfigurieren, dass mehrere Autoren Artikel zu dem Blog beisteuern knnen (siehe WebPlus-Hilfe). Wenn Sie viel unterwegs sind und hufig mit einem Laptop von unterschiedlichen geografischen Standorten arbeiten, knnen Sie diese verwalteten Inhalte jederzeit ber die Serif Webressourcen aktualisieren. Sie mssen Ihre Website dann anschlieend NICHT erneut publizieren.

Einfgen von Blogs


Blogs lassen sich genau wie alle anderen Objekte in WebPlus behandeln, sodass Sie das gewnschte Objekt einfach an der passenden Stelle Ihrer Webseite absetzen knnen. Einfgen eines Blogs auf einer Seite 1. Klicken Sie in der Kategorie Externe/Verwaltete Inhalte der Studio-Registerkarte QuickBuild auf das Symbol Blog. Ziehen Sie den Mauszeiger mit gedrckter Maustaste ber Ihre Seite, um den Bereich und die Gre fr den Blog zu bestimmen. Sollten Sie noch kein Konto bei den Serif Webressourcen angelegt haben oder gerade nicht angemeldet sein, wird automatisch das Anmeldungsfenster fr die Serif Webressourcen geffnet. Um sich anzumelden, klicken

2.

Externe/Verwaltete Inhalte

159

Sie unter Neuer Benutzer auf Konto anlegen. ODER Besitzen Sie bereits ein Konto und sind angemeldet, wird das Dialogfeld Blog bearbeiten geffnet. 3. Geben Sie in das Dialogfeld einen Namen fr Ihren Blog ein. Dieser Blogtitel wird auch am Anfang des im Web publizierten Blogs angezeigt. (Optional) Geben Sie eine Beschreibung ein, um den Inhalt Ihres Blogs zu umreien. Bentigen Sie nhere Informationen zu den anderen Optionen, klicken Sie einfach auf die Hilfe-Schaltflche des Dialogfelds. Klicken Sie auf die Schaltflche Speichern. Der nun angezeigte hellblaue Bereich kennzeichnet den Blog.

4.

5.

Bearbeiten Ihres Blogs

Fhren Sie einen Doppelklick auf den Blog aus. Weitere Informationen zu den Kontooptionen der Serif Webressourcen finden Sie unter dem Thema Arbeiten mit Smart-Objekten (siehe Seite 180).

Verwalten Ihres Blogs


ber die Blogverwaltung knnen Sie Artikel hinzufgen, bearbeiten und entfernen sowie Kommentare lschen, die zu Artikeln abgegeben wurden. Mit den Editorgruppen lassen sich auch Artikel verffentlichen, die aus der Feder mehrerer Autoren stammen. Um einen neuen Artikel zu erstellen oder einen bestehenden zu bearbeiten, geben Sie einfach den gewnschten Text in den RTF-Editor ein, whlen die Tags und den Poster des Artikels aus, aktivieren die Rckverfolgung oder geben einen Kommentar ein.

160

Externe/Verwaltete Inhalte

Verwalten Ihres Blogs

Whlen Sie den Blog aus und klicken Sie in der Kontextleiste auf Verwalten. Nhere Informationen sowie eine Beschreibung der einzelnen Optionen finden Sie in der Hilfe zu den Webressourcen. Klicken Sie einfach in dem SmartObjekt-Dialogfeld des Blogs auf Hilfe.

Weitere Informationen zu den Smart-Objekten finden Sie in der WebPlus-Hilfe.

Einfgen eines News-Fensters


News-Fenster sind ideal, wenn Sie Ihren Website-Besuchern wichtige, aktuelle Informationen prsentieren mchten. Die Homepage ist daher der perfekte Platz fr diese Objekte. Hier knnen Sie z. B. genderte Zeitplne auflisten oder andere Daten und Fakten, die nur fr einen kurzen Zeitraum relevant sind. Dieses Objekt untersttzt neben der RTF-Bearbeitung auch Absatzformatvorlagen, Hyperlinks, integrierte Mediadateien sowie die Bearbeitung des HTML-Quellcodes. Wenn Sie viel unterwegs sind und hufig mit einem Laptop von unterschiedlichen geografischen Standorten arbeiten, knnen Sie diese verwalteten Inhalte jederzeit ber die Serif Webressourcen aktualisieren. Sie mssen Ihre Website dann anschlieend NICHT erneut publizieren. Einfgen eines News-Fensters 1. Klicken Sie in der Kategorie Externe/Verwaltete Inhalte der Studio-Registerkarte QuickBuild auf das Symbol News.

Externe/Verwaltete Inhalte

161

2.

Ziehen Sie den Mauszeiger mit gedrckter Maustaste ber Ihre Seite, um den Bereich und die Gre fr das News-Fenster zu bestimmen. Sollten Sie noch kein Konto bei den Serif Webressourcen angelegt haben oder gerade nicht angemeldet sein, wird automatisch das Anmeldungsfenster fr die Serif Webressourcen geffnet. Um sich anzumelden, klicken Sie unter Neuer Benutzer auf Konto anlegen. ODER Besitzen Sie bereits ein Konto und sind angemeldet, wird das Dialogfeld fr die Bearbeitung des Smart-Objekts geffnet.

3.

Geben Sie in das Dialogfeld einen Namen fr Ihr NewsFenster ein. Dieser Titel wird auch am Anfang des im Web publizierten Fensters angezeigt. Klicken Sie auf die Schaltflche Speichern. Der nun angezeigte hellblaue Bereich kennzeichnet das Fenster.

4.

Bearbeiten Ihres News-Fensters

Fhren Sie einen Doppelklick auf das News-Fenster aus. Weitere Informationen zu den Kontooptionen der Serif Webressourcen finden Sie unter dem Thema Arbeiten mit Smart-Objekten (siehe Seite 180).

Verwalten Ihres News-Fensters

Whlen Sie das Fenster aus und klicken Sie in der Kontextleiste auf Verwalten.

162

Externe/Verwaltete Inhalte

Einfgen eines Forums


Mit WebPlus knnen Sie ein Smart-Objekt fr ein Forum auf Ihren Webseiten platzieren. Dieses Forum lsst sich dann flexibel in verschiedene Kategorien mit einem oder mehreren Unterforen aufteilen. Besucher Ihrer Website knnen dann die in den Unterforen geposteten Themen sowie die Antworten, den Autor eines Beitrags und das zuletzt eingefgte Posting sehen. Website-Besucher knnen ebenfalls einen Beitrag zu einem Thema schreiben oder auch selbst ein vllig neues Diskussionsthema erffnen. Das von Ihren Website-Besuchern in einem Unterforum neu erstellte Diskussionsthema steht dann auch fr alle anderen Website-Besucher offen, sodass diese Ihre Meinung als Nachricht posten knnen; auf diese Weise entsteht ein Diskussionsfaden (auch Thread genannt).

Die Forum-Features

Anlegen mehrerer untergeordneter Foren (Plato, Aristoteles, Descartes usw.) in Kategorien (z. B. Philosophen). Festlegen einer Zugangskontrolle fr Benutzer und Moderatoren. Einstellen des Datenschutzes per Forumzugang (ffentlich oder nur fr ausgewhlte Mitglieder). Formatieren des Forums mit einem Thema (visueller Stil). Anlegen, Bearbeiten und Zuweisen von Benutzerrngen. Festlegen der Benutzerrechte. Verwalten und Moderieren des Forums, ohne das Forum neu publizieren zu mssen.

Externe/Verwaltete Inhalte

163

Wenn Sie viel unterwegs sind und hufig mit einem Laptop von unterschiedlichen geografischen Standorten arbeiten, knnen Sie diese verwalteten Inhalte jederzeit ber die Serif Webressourcen aktualisieren. Sie mssen Ihre Website dann anschlieend NICHT erneut publizieren.

Einfgen eines Forums


Foren lassen sich genau wie andere Objekte auf Seiten einfgen. Sie knnen jedoch das Forum auch ber einen Offsite-Link als Fenster in voller Gre prsentieren. Einfgen eines Forums 1. Klicken Sie in der Kategorie Externe/Verwaltete Inhalte der Studio-Registerkarte QuickBuild auf das Symbol Forum. mit gedrckter Ziehen Sie den Mauszeiger Maustaste ber Ihre Seite, um den Bereich und die Gre fr das Forum zu bestimmen. Sollten Sie noch kein Konto bei den Serif Webressourcen angelegt haben oder gerade nicht angemeldet sein, wird automatisch das Anmeldungsfenster fr die Serif Webressourcen geffnet. Um sich anzumelden, klicken Sie unter Neuer Benutzer auf Konto anlegen. ODER Besitzen Sie bereits ein Konto und sind angemeldet, wird das Dialogfeld Forum bearbeiten geffnet. 3. Geben Sie in das Dialogfeld einen Namen fr Ihr Forum ein. Dieser Forumtitel wird auch am Anfang des im Web publizierten Forums angezeigt.

2.

164 4.

Externe/Verwaltete Inhalte

Geben Sie eine Forumbeschreibung ein, um Ihren Website-Besuchern einen Eindruck von den diskutierten Inhalten zu vermitteln. Klicken Sie auf die Schaltflche Speichern. Das Forum wird nun auf Ihrer Seite platziert. Wenn Sie bereits ein Smart-Objekt fr die Zugangskontrolle in den Serif Webressourcen angelegt haben und dieses verwenden mchten, whlen Sie den entsprechenden Eintrag in dem Dropdownfeld Zugangskontrolle (bestehend) aus. Alternativ legen Sie ber die Option Zugangskontrolle (Neu) einfach ein neues Objekt fr die Zugangskontrolle zu Ihrem neuen Forum an. Sie knnen ber den Menpunkt Einfgen > SmartObjekt ebenfalls ein Forum anlegen.

5.

Bearbeiten Ihres Forums

Fhren Sie einen Doppelklick auf das Forum aus. Wenn Sie ein neues Forum erstellen, wird automatisch ein damit verbundenes Smart-Objekt fr die Zugangskontrolle angelegt. Mchten Sie ein SmartObjekt fr die Zugangskontrolle verwenden, das bereits in den Serif Webressourcen vorhanden ist, whlen Sie es in dem Dropdownfeld Zugangskontrolle aus. Weitere Informationen zu den Kontooptionen der Serif Webressourcen finden Sie unter dem Thema Arbeiten mit Smart-Objekten (siehe Seite 180).

Externe/Verwaltete Inhalte

165

Verwalten Ihres Forums


Bis jetzt haben Sie nur ein Unterforum innerhalb einer einzigen Kategorie angelegt. Mchten Sie den Namen einer Kategorie oder eines Unterforums ndern oder weitere Kategorien hinzufgen und/oder zustzliche Unterforen in den Kategorien erstellen, mssen Sie die Forumverwaltung verwenden. Hier legen Sie ebenfalls die Optionen fr den Datenschutz, die Moderation, Themen und Benutzerrnge (nach Anzahl der Postings) fest. Verwalten Ihres Forums

Whlen Sie das Forum aus und klicken Sie in der Kontextleiste auf Verwalten.

Die Forensicherheit
Standardmig wird Ihr Forum mit aktivierter Option Neue Benutzer bei Beitritt hinzufgen angelegt. Auf diese Weise mssen Sie keine weiteren Schritte unternehmen und knnen sich auf die Moderation der Foreninhalte beschrnken. Mchte sich einer Ihrer Website-Besucher an einer Forumsdiskussion beteiligen, gibt er einfach selbst die Anmeldungsdaten zu seiner Person ein und kann anschlieend Beitrge in das Forum schreiben. Das Forum verwendet hierbei ein Smart-Objekt fr Benutzerlisten als Zugangskontrolle, das automatisch zusammen mit Ihrem Forum angelegt wird. Bedenken Sie stets, dass Ihr Forum auch ein SmartObjekt ist! Mit dem Smart-Objekt fr Benutzerlisten knnen Sie die Benutzer Ihres Forums auf verschiedene Weise verwalten:

Manuelles Hinzufgen von Benutzern: Fr private Foren knnen Sie z. B. eine begrenzte Liste von ganz bestimmten Benutzern festlegen. Nur diese Personen knnen sich dann an den Diskussionen beteiligen und alle anderen Website-Besucher knnen sich nicht selbst fr dieses Forum anmelden.

166

Externe/Verwaltete Inhalte

Zugriffsrechte fr Benutzer einfrieren und Benutzer per Bann ausschlieen: Manchmal geht es in Forumsdiskussionen nicht weniger hitzig zu, als in realen Streitgesprchen. Von Zeit zu Zeit mssen die Forumsmoderatoren dann eingreifen, um die Diskussion wieder in die Bahn des eigentlichen Themas zu lenken und die Teilnehmer ermahnen, sich an die Hausregeln zu halten. Zu diesem Zweck knnen Sie Benutzer einfrieren (zeitweilig ausschlieen) oder per Bann komplett ausschlieen.

Manuelles Hinzufgen von Forumbenutzern 1. 2. Klicken Sie im Men Einfgen auf Smart-Objekt. Whlen Sie in der Bibliothek fr Smart-Objekte den Eintrag fr eine Benutzerliste aus, die denselben Namen trgt wie Ihr Forum. Klicken Sie auf Verwalten. Mit den Registerkarten Benutzer und Gruppen knnen Sie dann manuell neue Benutzer hinzufgen und bestehende Benutzer einfrieren oder per Bann vor die Tr setzen. Klicken Sie anschlieend auf die Schaltflche Beenden. Foren sind sehr komplexe Objekte. Bentigen Sie nhere Informationen zu den Konfigurationsmglichkeiten oder eine Beschreibung der Optionen, klicken Sie in dem Dialogfeld fr SmartObjekte auf die Hilfe-Schaltflche.

3. 4.

5.

Externe/Verwaltete Inhalte

167

Einfgen eines RSS-Readers


Mit WebPlus knnen Sie RSS-Feeds von anderen Websites direkt auf Ihrer eigenen Webseite einblenden. Wenn Sie den Reader fr den RSS-Feed auf Ihrer Seite einfgen, abonnieren Sie automatisch den entsprechenden RSS-Feed oder Podcast. Es gibt noch einige andere Methoden, um RSS-Feeds oder Podcasts ber Webbrowser und iTunes zu abonnieren. An dieser Stelle beschftigen wir uns mit dem Einbinden eines Feeds in Ihre Seite, sodass die Seite automatisch Artikel und Episoden empfngt. Das folgende Beispiel zeigt, wie ein RSS-Feed von Reuters auf einer WebPlus-Webseite aussieht:

Einfgen eines RSS-Feed oder Podcast in Ihre Seite 1. Whlen Sie im Internet einen RSS-Feed oder einen Podcast aus. Suchen Sie hierbei nach den folgenden Symbolen:

168 2.

Externe/Verwaltete Inhalte

Kopieren Sie die URL fr den Feed oder Podcast in die Zwischenablage, indem Sie mit der rechten Maustaste auf das Symbol klicken. Klicken Sie in der Kategorie Externe/Verwaltete Inhalte der Studio-Registerkarte QuickBuild auf das Symbol RSS-Reader. Das Programm zeigt nun den Platzierungscursor an. Um die Gre des Feed-Fensters selbst zu bestimmen, ziehen Sie bei gedrckter Maustaste den Cursor ber die Seite und lassen die Maustaste wieder los, sobald der Begrenzungsrahmen die gewnschten Abmessungen erreicht hat. Mchten Sie das Fenster in der Standardgre einfgen, drcken Sie einfach nur die linke Maustaste. Fgen Sie in dem Dialogfeld die kopierte URL in das Feld URL des RSS-Feeds ein. Klicken Sie auf die Schaltflche OK.

3.

4.

5. 6.

Das Feed-Fenster wird mit einer pfirsichfarbenen Fllung erstellt und zeigt automatisch die URL des Feeds an. Um den aktuellen Feed live zu erleben, mssen Sie die Webseite publizieren. Beachten Sie stets, dass sich der Inhalt dieses Feed-Fensters automatisch ndert, sobald der Feed auf der ursprnglichen Website aktualisiert wird. Wenn ein Website-Besucher den Podcast ansieht, lsst sich jede Episode ber den Audiolink wiedergeben, der fr gewhnlich auf eine MP3-Datei verweist. Nachdem die Datei heruntergeladen und gespeichert wurde, lsst sie sich mit dem aktuell festgelegten Standardplayer (z. B. Windows Media Player) abspielen.

Externe/Verwaltete Inhalte

169

Die Zugangskontrolle
Mit der Zugangskontrolle knnen Sie Sicherheitseinstellungen fr Ihre Website festlegen, um z. B. nur bestimmten Personen Zugriff auf einzelne Webseiten zu gewhren oder den Zugang zu Ihren Foren oder anderen Features der Serif Webressourcen zu regulieren.

Fr die Seitensicherheit: Hierbei knnen Sie Seiten mit einem Kennwort schtzen oder ein Anmeldungsfeld auf einer Seite platzieren. Diese Methode wird hufig auf privaten Websites oder den Websites kleiner Unternehmen eingesetzt. Hierbei gewhren Sie den Besuchern freien Zugriff auf den Groteil Ihrer Website und beschrnken nur fr einige Seiten den Zugang auf ausgewhlte Besucher. Eine Fotogalerie mit Schnappschssen Ihrer Familie lsst sich z. B. als privat einstufen, sodass durch eine Kennwortkontrolle nur Mitglieder Ihrer Familie diese Seiten ffnen knnen. Die Anmeldungsdaten werden in einer Benutzergruppe gespeichert, die mit der Seite verknpft ist. Diese Gruppe enthlt eine Liste aller autorisierten Benutzer. Neue Mitglieder werden entweder manuell von dem WebsiteVerwalter in die Liste eingefgt oder knnen sich selbst ber ein Anmeldungsfeld eintragen. Fr die Sicherheit von Smart-Objekten: Hierbei wird der Zugang zu Foren, Blogs und Content Management Systemen (CMS) reguliert.

Foren: fr die Verwaltung von Benutzern und dem Moderieren von Gruppen. Blogs: fr das Hinzufgen und Entfernen von Artikeln ber eine Editorengruppe.

170

Externe/Verwaltete Inhalte

CMS: fr die Verwaltung von Artikeln in Ihrem CMS.

Die Zugangskontrolle wird ber die Serif Webressourcen in Form eines Smart-Objekts vom Typ Benutzerliste gesteuert. Mit diesem Objekt knnen Sie Benutzergruppen und Benutzer verwalten sowie festlegen, wie sich die Benutzer anmelden mssen. Bei den Serif Webressourcen handelt es sich um einen sicheren Onlinedienst, dessen Hosting von Serif bernommen wird. Dieser Dienst ist fr die sichere Speicherung von Smart-Objekten (siehe Seite 180) sowie allen erzeugten Daten zustndig. Sie knnen die Benutzerlisten genau wie alle anderen Smart-Objekte entweder aus WebPlus heraus oder ber www.serifwebresources.com jederzeit verwalten. Damit die Zugangskontrolle fr Ihre Website reibungslos funktioniert, mssen Sie die folgenden Schritte ausfhren.

Einrichten des Smart-Objekts fr die Benutzerliste Eintragen von Benutzern (manuell oder ber eine selbst durchgefhrte Registrierung) Aktivieren der Zugangskontrolle Einfgen des Anmeldungsfeldes Festlegen der erweiterten Optionen fr die Zugangskontrolle

Externe/Verwaltete Inhalte

171

Einrichten des Smart-Objekts fr die Benutzerliste


Sie mssen zunchst das Smart-Objekt fr die Benutzerliste erstellen und dann eine oder mehrere Gruppen anlegen, die mit diesem Smart-Objekt verbunden sind. Fr gewhnlich bentigen Sie ein Smart-Objekt pro Website. Mithilfe der einzelnen Gruppen knnen Sie dann festlegen, wer auf bestimmte Seiten oder SmartObjekt-Ressourcen zugreifen darf. Erstellen des Smart-Objekts fr die Benutzerliste 1. 2. Klicken Sie im Men Einfgen auf Smart-Objekt. Melden Sie sich bei den Serif Webressourcen an (siehe Arbeiten mit Smart-Objekten auf Seite 180). Falls Sie noch keine gltigen Zugangsdaten fr die Webressourcen besitzen, mssen Sie sich zunchst registrieren lassen. Klicken Sie am unteren Ende des Feldes Meine SmartObjektbibliothek auf die Schaltflche Neu. Blttern Sie in dem Dialogfeld Smart-Objekt erstellen mit der Bildlaufleiste durch die Smart-Objekte, klicken Sie auf Benutzerliste und anschlieend auf OK. Klicken Sie in dem Popup-Dialogfeld auf Zugangskontrolle. Legen Sie in dem Dialogfeld den Namen fr Ihr SmartObjekt fest, speichern Sie es in einem Profil und stellen Sie die Farben und Schriften fr Titel, Text/Beschriftung, Schaltflchen und Umrandung ein. Klicken Sie auf die Schaltflche Erstellen. Ihr neues Smart-Objekt wird nun in Ihrer Bibliothek fr SmartObjekte aufgelistet.

3. 4.

5. 6.

7.

172 8.

Externe/Verwaltete Inhalte

Klicken Sie auf Beenden, um sich bei den Serif Webressourcen abzumelden.

Nachdem Sie das Smart-Objekt erstellt haben, knnen Sie mit der Funktion Verwalten Benutzergruppen anlegen und dem Objekt zuweisen. Festlegen der Benutzeranmeldung und Sicherheitseinstellungen 1. 2. Klicken Sie im Men Einfgen auf Smart-Objekt. Whlen Sie in dem Feld Meine Smart-Objektbibliothek das Objekt fr die Benutzerliste aus, und klicken Sie auf die Schaltflche Verwalten, um das Dialogfeld fr die Benutzer zu ffnen. Wenn Sie Website-Besuchern die Mglichkeit geben mchten, sich selbst fr das Smart-Objekt einzutragen, aktivieren Sie die Option Anmeldungen fr Benutzerliste aktivieren. Hierdurch wird unter dem platzierten Anmeldungsfeld ein Link Beitreten eingeblendet. Wenn Sie fr die Benutzeranmeldung eine zustzliche Sicherheitskontrolle verwenden mchten, aktivieren Sie die Option CAPTCHA aktiviert. CAPTCHA ist ein Spam-Schutz, bei dem ein zufllig vom Server erstellter Text angezeigt wird, den der Benutzer dann als Besttigung eingeben muss. Wenn Sie den Benutzer nach der Anmeldung direkt zu einer bestimmten Webseite fhren mchten, geben Sie die entsprechende URL in das Feld Nach dem Anmelden umleiten ein. Klicken Sie auf Aktualisieren.

3.

4.

5.

6.

Externe/Verwaltete Inhalte

173

Erstellen von Benutzergruppen 1. 2. Klicken Sie am oberen Rand des Dialogfelds auf die Option Gruppen. Geben Sie nun in dem Abschnitt Neue Gruppe erstellen eine Bezeichnung fr die Gruppe in das Feld Gruppenname ein. Dieser Name sollte den Zweck der Gruppe widerspiegeln, wie z. B. Fotozugriff. Klicken Sie auf die Schaltflche Gruppe erstellen, prfen Sie die Einstellungen in dem Dialogfeld und klicken Sie auf Fertig. Die Gruppe wird nun in die Dropdownliste Gruppe der Benutzergruppenverwaltung eingetragen.

3.

Verwalten von Benutzergruppen

Whlen Sie den Gruppennamen in dem Dropdownfeld Gruppe aus und klicken Sie dann auf Gruppe verwalten.

In diesem Dialogfeld knnen Sie den Namen der Gruppe ndern und die Anzahl der Gruppenbenutzer prfen. Um eine nderung durchzufhren, klicken Sie auf Gruppe aktualisieren. Mit der Schaltflche Gruppe lschen entfernen Sie die Gruppe.

Eintragen von Benutzern (manuell oder ber eine selbst durchgefhrte Registrierung)
Manuelles Eintragen von Benutzern Die manuelle Benutzerkontrolle eignet sich hervorragend fr bersichtlich strukturierte Umgebungen wie kleine Unternehmen, Organisationen oder Vereine, bei denen die Benutzer bekannt sind. Zu jeder angelegten Benutzergruppe knnen Sie Benutzer hinzufgen, indem Sie die Daten manuell eingeben oder aus einer mit Kommata getrennten Textdatei importieren.

174

Externe/Verwaltete Inhalte

Sie knnen wahlweise nur eine Benutzeranmeldung verwenden, sodass jeder Benutzer dieselben Anmeldungsdaten verwendet, oder auch jedem Benutzer eine bestimmte Anmeldung zuweisen (ideal fr die Arbeit mit Mitgliederlisten). Eintragen von Benutzern durch selbststndige Registrierung Die Anmeldung durch Benutzer ist fr einen eher ffentlichen Zugang konzipiert, bei dem es zu aufwendig wre, alle Benutzer manuell zu kontrollieren. Die Website-Besucher knnen sich dann einfach registrieren lassen und ber einen Beitrittslink ihre Anmeldungsdaten eingeben. Der Verwalter Ihrer Website kann dann mit dem SmartObjekt fr die Benutzerliste die Benutzer in den verschiedenen Gruppen verwalten. Fr diese Methode ist ein Anmeldungsfeld notwendig, das die Benutzer auf einer Webseite ausfllen knnen. Am einfachsten lsst sich dieses Feld auf einer Master-Seite platzieren. Sie knnen mehrere Benutzer zu derselben Benutzergruppe hinzufgen. Ein Benutzer kann ebenfalls zu mehreren Benutzergruppen gehren. Manuelles Hinzufgen von Benutzern 1. 2. Klicken Sie im Men Einfgen auf Smart-Objekt. Whlen Sie in dem Feld Meine Smart-Objektbibliothek das Objekt fr die Benutzerliste aus, und klicken Sie auf die Schaltflche Verwalten, um das Dialogfeld fr die Benutzer zu ffnen.

Externe/Verwaltete Inhalte

175

3.

Geben Sie unter Neuen Benutzer hinzufgen die E-MailAdresse des Benutzers in das Feld E-Mail ein.

Wenn Sie die Option Aktivierung anfordern auswhlen, werden ein Aktivierungslink und ein automatisch erstelltes Kennwort per E-Mail an den Benutzer geschickt. Ist diese Option deaktiviert, wird lediglich das automatisch erstellte Kennwort per E-Mail zugesendet. Ist die Option Benutzer per E-Mail benachrichtigen aktiviert, wird eine E-Mail an den Benutzer gesendet. Wenn Sie diese Option deaktivieren, wird der Benutzer zwar in die Liste eingetragen, jedoch nicht per E-Mail informiert. Sie mssen dem Benutzer dann sein Kennwort auf andere Weise zukommen lassen (per Fax, Telefon usw.). 4. Klicken Sie anschlieend auf die Schaltflche Benutzer hinzufgen. Der Benutzer wird nun unter Benutzer in die Benutzerliste eingetragen. Wenn Sie Benutzer in eine Gruppe eintragen mchten, klicken Sie am oberen Rand des Dialogfelds auf die Option Gruppen. Fr die Zuweisung zu einer Gruppe whlen Sie die Gruppe in der Gruppen-Dropdownliste aus und klicken anschlieend auf die Schaltflche Hinzufgen, um den ausgewhlten Benutzer aus dem Feld Benutzer in das Feld Gruppe einzutragen (wenn Sie alle Benutzer

5.

6.

176

Externe/Verwaltete Inhalte

bertragen mchten, klicken Sie auf Alle hinzufgen). Der Benutzer gehrt nun zu der ausgewhlten Benutzergruppe. Um einen oder alle Benutzer aus einer Gruppe zu lschen, verwenden Sie die Schaltflchen Entfernen oder Alle entfernen. Wenn Sie die Benutzer nicht manuell hinzufgen und verwalten mchten (siehe oben), knnen Sie den Website-Besuchern auch die Mglichkeit einrumen, sich selbst anzumelden. Diese Anmeldung luft ber die Serif Webressourcen. Eintragen von Benutzern durch selbststndige Registrierung Fr diese Methode mssen Sie ein Anmeldungsfeld auf der Master-Seite platzieren. Jeder neue Besucher kann der Website beitreten, um sich als registrierter Benutzer anzumelden (per Klick auf den Beitreten-Link). 1. 2. Klicken Sie im Men Einfgen auf Smart-Objekt. Whlen Sie in dem Feld Meine Smart-Objektbibliothek das Objekt fr die Benutzerliste aus, und klicken Sie auf die Schaltflche Verwalten, um das Dialogfeld fr die Benutzer zu ffnen. Klicken Sie am oberen Rand des Dialogfelds auf Gruppen. Whlen Sie den Gruppennamen in dem Dropdownfeld Gruppe aus und klicken Sie dann auf Gruppe verwalten. Aktivieren Sie die Option Neue Benutzer bei Beitritt hinzufgen. Die Anmeldungsdaten des Benutzers werden dann in die Gruppe eingetragen, wenn der Benutzer sich auf Ihrer Website registriert. Aktivieren Sie diese Option, erhalten die Benutzer Zugriff auf alle Gruppen, fr die Sie die Anmeldung aktiviert haben. Alle auf andere Weise eingeschrnkten Seiten bleiben fr den Zugriff gesperrt.

3. 4. 5.

Externe/Verwaltete Inhalte

177

6.

Klicken Sie auf Gruppe aktualisieren und dann auf Fertig. Denken Sie daran, die Option Neue Benutzer bei Beitritt hinzufgen unter Neue Gruppe erstellen zu aktivieren, wenn Sie eine neue Gruppe anlegen. Wenn sich ein Benutzer anmeldet, wird er automatisch in jede Benutzergruppe eingetragen, fr die Sie die Benutzeranmeldung per Beitritt aktiviert haben.

Aktivieren der Zugangskontrolle


Aktivieren der Zugangskontrolle auf Ihrer Webseite 1. ffnen Sie die gewnschte Webseite im Arbeitsbereich und klicken Sie auf die Schaltflche Seitensicherheit der Standardkontextleiste. Aktivieren Sie die Option Seite mit Kennwort schtzen, um die Zugangskontrolle einzuschalten. Es wird nun die Schaltflche ndern/Verwalten verfgbar geschaltet. Klicken Sie auf diese Schaltflche, um die aktuell verfgbaren Gruppen (fett markiert) aufzulisten, sowie das Smart-Objekt Benutzerliste, zu dem die Gruppen gehren. Whlen Sie in dem Dialogfeld fr die Benutzergruppen die gewnschte Gruppe aus (z. B. Fotozugriff) und klicken Sie auf OK. Die Kategorie Seitensicherheit Ihrer Webseite sollte nun anzeigen, dass ein Kennwortschutz fr die Seite besteht und ihr eine Benutzergruppe zugewiesen wurde.

2.

3.

178 4.

Externe/Verwaltete Inhalte

Klicken Sie auf OK und dann erneut auf OK, um die Dialogfelder zu verlassen. In der Studio-Registerkarte Website wird nun ein Schlsselsymbol angezeigt. An diesem Symbol erkennen Sie, dass die Seitensicherheit fr die entsprechende Seite festgelegt ist.

Einfgen des Anmeldungsfeldes


Mit WebPlus lsst sich schnell und einfach ein Feld auf einer Webseite platzieren, mit dem sich die Besucher an- und abmelden knnen. Auf diese Weise knnen registrierte Website-Besucher per Anmeldung bei der Website auf eingeschrnkte Seiten zugreifen. Das Anmeldungsfeld reprsentiert das Smart-Objekt fr die Benutzerliste und wird sowohl auf der Seite als auch in den Serif Webressourcen erstellt. Sie knnen die Benutzer wahlweise manuell in den Serif Webressourcen hinzufgen oder auch den Benutzern die Mglichkeit geben, sich per Registrierung und Anmeldung einzutragen. Fgen Sie das Anmeldungsfeld in die Master-Seite der Website ein. Alle Webseiten, die auf dieser Master-Seite beruhen, enthalten dann das Anmeldungsfeld fr Ihre Website-Besucher. Einfgen des Anmeldungsfeldes fr Besucher 1. Folgen Sie den Schritten fr die Aktivierung der Zugangskontrolle (siehe Seite 177) und whlen Sie eine Seitenposition fr das Anmeldungsfeld aus, anstatt das

Externe/Verwaltete Inhalte

179

Dialogfeld zu schlieen. Klicken Sie anschlieend auf die Schaltflche Einfgen. 2. Einfgecursor an der Platzieren Sie den gewnschten Stelle und drcken Sie die linke Maustaste, um das Objekt mit einer Standardgre einzufgen. Aktivieren Sie die Selbstanmeldung fr die Benutzer wie zuvor beschrieben (siehe Seite 176).

3.

Erweiterte Optionen fr die Zugangskontrolle


Es gibt noch einige zustzliche Funktionen, mit denen Sie Benutzer einer Gruppe importieren, exportieren, ihren Zutritt einfrieren oder sogar Benutzer per Bann ausschlieen bzw. ihren Bann aufheben knnen. Ein per Bann ausgeschlossener Benutzer gilt global als gesperrt und hat somit auch keinen Zutritt zu einer Ihrer Benutzergruppen. Sie knnen Benutzer ebenfalls lschen oder einfrieren, wenn diese die Website-Regeln brechen (z. B. verleumderische Aussagen in einem ffentlich zugnglichen Forum posten). Wenn sich der eingefrorene Benutzer das nchste Mal anmeldet, wird automatisch die Nachricht Ihr Konto wurde eingefroren angezeigt. Sollten noch drastischere Methoden notwendig werden, knnen Sie die IP-Adresse eines Benutzers per Bann von dem Zugriff auf die Objekte der Serif Webressourcen (Foren usw.) ausschlieen. Als letzten Ausweg knnen Sie sogar den Internet-Dienstanbieter (ISP) oder die Organisation per Bann von dem Zugriff ausschlieen, denen der Besitzer der E-Mail-Adresse angehrt. Diese Option ist generell nicht empfehlenswert. Manchmal ist sie jedoch notwendig, um professionelle Strenfriede wie MassenSpamming zu unterbinden. Nhere Informationen hierzu finden Sie in der WebPlus-Hilfe.

180

Externe/Verwaltete Inhalte

Arbeiten mit Smart-Objekten


Fr verwaltete Inhalte Ihrer Webseiten knnen Sie in WebPlus die auf einem Server gespeicherten Smart-Objekte verwenden, die Daten von den Website-Besuchern auf einem sicheren Server namens Serif Webressourcen speichern. Sie knnen Ihre SmartObjekte direkt in WebPlus verwalten oder auch jederzeit ber die Seite www.serifwebresources.com, nachdem Sie Ihre Website im Internet publiziert haben. Werfen wir nun einen genaueren Blick auf die einzelnen SmartObjekte der Webressourcen und ihre verschiedenen Anwendungsmglichkeiten. Name Aktive Betrachter Blog Verwendungszweck Diese Ressource zeigt an, wie viele Besucher Ihre Webseite momentan betrachten. Ein Blog (Kurzform von Weblog) bernimmt die Funktion eines Tagebuchs/Nachrichtenblattes auf Ihrer Website, in dem Sie mit einem unkomplizierten Texteditor Ihre eigenen Artikel verffentlichen. Bei den Blogs ist es blich, dass die Besucher der Website die verschiedenen Artikel kommentieren knnen.

Sie knnen mithilfe der Studio-Registerkarte QuickBuild ebenfalls einen Blog auf Ihre Seiten ziehen. Nhere Informationen hierzu finden Sie unter dem Thema Einfgen eines Blogs (siehe Seite 157).

Externe/Verwaltete Inhalte

181

Content Management System (CMS)

Mit diesem Objekt knnen Sie verschiedene Artikel-basierende Inhalte per Remote-Verbindung hinzufgen, bearbeiten, lschen oder in Kategorien sortieren, ohne dass Sie hierzu auf WebPlus zugreifen oder die Inhalte mit WebPlus publizieren mssen. Die Website-Besucher knnen die Artikel bewerten und kommentieren. Fr das CMS knnen Sie separate Farben festlegen.

Forum

Mit diesem Objekt erstellen Sie ein Forum fr Diskussionsbeitrge, das sich in verschiedene Kategorien und Unterkategorien einteilen lsst.

Sie knnen mithilfe der Studio-Registerkarte QuickBuild ebenfalls ein Forum auf Ihre Seiten ziehen. Nhere Informationen hierzu finden Sie unter dem Thema Einfgen eines Forums (siehe Seite 162). Dieses Objekt ermittelt die Anzahl der Treffer fr die aktuelle Seite, d. h. wie oft Besucher die aktuelle Seite in ihrem Browser aufgerufen haben. Diese Anzeige lsst sich jederzeit zurcksetzen. Sie knnen fr diese Zhler unterschiedliche Formate festlegen.

Trefferzhler

182

Externe/Verwaltete Inhalte

News

Mit diesem Objekt platzieren Sie ein News-Fenster auf Ihrer Seite.

Sie knnen mithilfe der Studio-Registerkarte QuickBuild ebenfalls ein News-Fenster auf Ihre Seiten ziehen. Nhere Informationen hierzu finden Sie unter dem Thema Einfgen eines News-Fensters (siehe Seite 160). Mit dieser Ressource knnen Sie online eine Umfrage durchfhren, um die Meinung der Website-Besucher zu einem bestimmten Thema einzuholen. Dieses Objekt ermglicht die Onlinebuchung von Hotelzimmern, Konferenzrumen, Theaterkarten usw. Objekte lassen sich fr Stunden oder Tage mieten, als sich wiederholende Buchungen durchfhren und mit Preisoptionen fr unterschiedliche Altersgruppen anbieten. Diese Ressource fungiert als interaktives Chat-Fenster (hnlich dem Windows Messenger). ber die Shoutbox knnen die Besucher Ihrer Website miteinander kommunizieren.

Abstimmung

Buchungsassistent

Shoutbox

Externe/Verwaltete Inhalte

183

Benutzerliste

Fr die Benutzerliste knnen Sie zwei verschiedene Modi ber ein PopupDialogfeld festlegen.

Modus fr Mailingliste: Mit diesen Objekten knnen Website-Besucher Newsletter abonnieren, Einladungen besttigen, Informationsmaterial anfordern usw. Die Listen lassen sich manuell kontrollieren oder mit einer Selbstanmeldung. E-Mail-Adressen lassen sich als per Trennzeichen getrennte Textdateien (CSV-Format) importieren sowie in einer breiten Palette von Formaten exportieren. Modus fr Zugangskontrolle: Dieses Objekt regelt den Zugriff auf Seiten, Foren, Blogs und CMS mithilfe von Benutzergruppen. Nhere Informationen hierzu finden Sie unter dem Thema Die Zugangskontrolle auf Seite 169.

Aktivieren des Spam-Schutzes CAPTCHA whrend der Benutzeranmeldung. Anlegen von Benutzergruppen (mit optionalem Beitritt, automatischer Anmeldung und Verbindung zu Smart-Objekten). Hinzufgen, Entfernen, Einfrieren oder Ausschlieen von Benutzern.

Da die Smart-Objekte in den Serif Webressourcen gespeichert werden, knnen Sie bei dem Erstellen und der Verwaltung der Objekte einfach auf die HilfeSchaltflche klicken, wenn Sie zustzliche Informationen zu einem Objekt bentigen. Aus Sicherheitsgrnden sind diese Objekte nur ber eine Anmeldung bei den Serif Webressourcen verfgbar, die Sie aus

184

Externe/Verwaltete Inhalte

WebPlus aktivieren knnen. Falls Sie noch keinen gltigen Benutzernamen sowie kein Kennwort besitzen, mssen Sie zuerst ein Konto bei den Webressourcen einrichten.

Falls Sie Ihre E-Mail-Adresse bereits bei Serif hinterlassen haben (z. B. im Zuge einer Produktregistrierung), mssen Sie nur einige Fragen beantworten, um die Kontoerstellung abzuschlieen. Wenn Sie sich als unregistrierter Neukunde an Serif wenden, mssen Sie den gesamten Anmeldevorgang einschlielich der sicherheitsrelevanten Aspekte durchfhren. Die verschiedenen Anmeldeseiten enthalten alle Informationen, die Sie fr das Ausfllen der Felder bentigen.

Anlegen eines Kontos bei den Serif Webressourcen 1. 2. Klicken Sie im Men Einfgen auf Smart-Objekt. Klicken Sie in dem Anmeldungsdialogfeld auf den Link Konto erstellen unter den Feldern fr Benutzername und Kennwort. Geben Sie in das nchste Dialogfeld Ihre aktuelle E-MailAdresse ein, den Benutzernamen und zweimal das Kennwort (zur Besttigung). Sie mssen die Nutzungsbedingungen von Serif lesen und diesen zustimmen (per Kontrollkstchen), um fortfahren zu knnen. Klicken Sie auf die Schaltflche Anmeldung. In dem nchsten Dialogfeld knnen Sie einige Angaben zu Ihrer Person eintragen und festlegen, ob Sie den Serif Newsletter sowie Informationen zu speziellen Angeboten von Serif und/oder Angeboten von Drittherstellern erhalten mchten.

3.

4. 5.

Externe/Verwaltete Inhalte

185

6.

Anschlieend wird eine Besttigungs-E-Mail an Ihre EMail-Adresse verschickt. Klicken Sie auf den Link in der E-Mail. Sie knnen sich nun bei den Serif Webressourcen anmelden, indem Sie auf Einfgen > Smart-Objekt klicken.

Lschen der Kontodetails

Klicken Sie auf den Menpunkt Extras > Optionen und dann in der Kategorie Optionen > Allgemein auf die Schaltflche Kontodetails lschen. Alle gespeicherten Details zu der Anmeldung bei den Serif Webressourcen werden nun gelscht, sodass Ihre automatische Anmeldung nicht mehr funktioniert. Bei der nchsten Anmeldung mssen Sie dann einige Details eingeben. Sie sollten sich Ihr Kennwort daher gut merken.

Zugreifen auf die Webressourcen 1. 2. Klicken Sie im Men Einfgen auf Smart-Objekt. Geben Sie in das Anmeldungsfenster Ihren Benutzernamen und das Kennwort ein. Wenn Sie in Zukunft direkt auf die Webressourcen zugreifen mchten, ohne sich vorher anzumelden, aktivieren Sie die Option Kontodetails speichern. Klicken Sie auf die Schaltflche Anmelden. Die Webressourcen ffnen nun das Dialogfeld fr die SmartObjekte. Nach der Erstellung knnen Sie die Kontodetails jederzeit aus dem Dialogfeld fr Smart-Objekte prfen, indem Sie auf Mein Konto klicken. Abmelden bei den Serif Webressourcen

3.

Klicken Sie im Men Einfgen auf Smart-Objekt. Klicken Sie auf Abmelden.

186

Externe/Verwaltete Inhalte

Erstellen von Smart-Objekten


Smart-Objekte lassen sich ber die Serif Webressourcen erstellen, indem Sie die Objekte zunchst in Ihre Smart-Objektbibliothek eintragen. In der Bibliothek knnen Sie alle Objekte verwalten und einzeln bearbeiten. Die Objekte lassen sich dann wahlweise sofort oder auch erst spter in eine Webseite einfgen. Einige Smart-Objekte, wie z. B. Foren, Blogs und NewsFenster lassen sich direkt durch Klicken und Ziehen aus der Studio-Registerkarte QuickBuild auf Ihren Seiten platzieren. Manche Smart-Objekte sind von anderen SmartObjekten abhngig. Wenn Sie z. B. ein Smart-Objekt fr ein Forum erstellen, wird automatisch auch ein SmartObjekt Benutzerliste angelegt, dass die Zugangskontrolle fr das Forum bernimmt. Hinzufgen von Objekten zu der Bibliothek 1. 2. 3. Klicken Sie in dem Hauptfenster fr Smart-Objekte auf die Schaltflche Neu. Blttern Sie in dem Dialogfeld Smart-Objekt erstellen durch die Liste und whlen Sie ein Smart-Objekt aus. (Optional) Wenn Ihr neues Smart-Objekt in einer anderen Sprache als Englisch arbeiten soll, whlen Sie den gewnschten Eintrag in dem Dropdownfeld Sprache aus. Klicken Sie auf die Schaltflche OK. Je nach ausgewhltem Objekt wird nun ein bestimmtes Dialogfeld fr die Erstellung des Objekts geffnet.

4.

Externe/Verwaltete Inhalte

187

5.

Gehen Sie in dem Dialogfeld wie folgt vor:

Geben Sie einen Namen fr das Objekt ein. (Optional) Whlen Sie ein zuvor angelegtes Profil in dem Dropdownfeld aus. (Optional) Legen Sie den String fr den OffsiteFilter fest. Hierdurch wird der Zugriff auf das Objekt auf die angegebene Domne beschrnkt und die URL lsst sich nicht kopieren. (Optional) Sie knnen ebenfalls einige der objektspezifischen Einstellungen ndern, wie z. B. den Titel, die Farben (Text, Umrandung usw.) oder die Umrandungsbreite.

6.

Klicken Sie auf die Schaltflche Erstellen.

Das benannte Objekt wird nun in einer Liste am linken Rand des Fensters Meine Smart-Objekte angezeigt. Das Beispiel zeigt eine Sammlung von Smart-Objekten, von denen einige unter einem selbst angelegten Profil namens 123 gruppiert sind.

188

Externe/Verwaltete Inhalte

Einfgen von Smart-Objekten in Ihre Webseite 1. Klicken Sie in dem linken Feld des Dialogfelds SmartObjekte auf das gewnschte Objekt und dann auf die Schaltflche Einfgen. Um das Objekt mit einer Standardgre einzufgen, platzieren Sie den Mauszeiger an der gewnschten Stelle der Seite und drcken die linke Maustaste. ODER Ziehen Sie den Cursor ber die Seite, um die Abmessungen des Smart-Objekts selbst zu bestimmen. Das Smart-Objekt wird auf der Dokumentseite automatisch mit einer Vorschau angezeigt, damit Sie sich einen berblick ber das Aussehen des publizierten Objekts verschaffen knnen.

2.

Bearbeiten von Smart-Objekten


Nachdem Sie ein Objekt erstellt haben, knnen Sie es entweder in dem Fenster Meine Smart-Objektbibliothek oder direkt auf der Seite bearbeiten. Hufig anfallende Arbeiten sind z. B. eine nderung der Abstimmungsfrage oder das Zurcksetzen des Trefferzhlers auf Null. Wenn Sie ein Objekt bearbeiten, verndern Sie nur das eigentliche Objekt und nicht die von dem Objekt gesammelten Daten. Die Optionen in dem Dialogfeld sind bei der Erstellung und Bearbeitung der Smart-Objekte identisch. Bearbeiten von Smart-Objekten in Ihrer Bibliothek

Klicken Sie in dem Hauptfenster fr Smart-Objekte unter dem Feld Meine Smart-Objektbibliothek auf Bearbeiten.

Externe/Verwaltete Inhalte

189

Bearbeiten von Smart-Objekten auf Ihrer Seite

Fhren Sie einen Doppelklick auf das Objekt aus, um sein Bearbeitungsfenster zu ffnen. Wenn Sie ein Objekt auf der Webseite bearbeiten, werden die nderungen ebenfalls in der Objektbibliothek umgesetzt. Eine Bearbeitung des Objekts in der Bibliothek verndert im Gegenzug auch das auf der Seite platzierte Objekt.

Verwalten von Smart-Objekten


Bei der Bearbeitung von Smart-Objekten legen Sie fest, wie die einzelnen Objekte arbeiten. Mit der Verwaltung bestimmen Sie, was nach dem Publizieren der Webseite mit den Daten geschehen soll, die von dem Smart-Objekt gesammelt werden. Fr einige Smart-Objekte, wie z. B. die Trefferzhler, ist die Verwaltung eher unntig, da sich dieser Zhler einfach nur mit jedem Aufruf der Webseite um den Wert 1 erhht (Sie knnen jedoch den Zhler zurcksetzen). Die komplexeren Smart-Objekte, wie z. B. Foren, Blogs, Buchungsassistenten, Benutzerlisten, Abstimmungen und Shoutboxen, speichern jedoch bestimmte Daten der WebsiteBesucher, wie Kommentare zu Artikeln, E-Mail-Adressen, Abstimmungsergebnisse und ein Nachrichten-Logbuch fr Chats. Bei den Smart-Objekten fr Blogs und Benutzerlisten ist das Anlegen und Verwalten von Artikeln oder Benutzern ein wichtiger Bestandteil der Objektverwaltung. Verwalten von Smart-Objekten in Ihrer Bibliothek

Klicken Sie in dem Hauptfenster fr Smart-Objekte auf Verwalten unter dem Feld Meine SmartObjektbibliothek. Die Verwaltungsoptionen variieren je nach ausgewhltem Smart-Objekt.

190

Externe/Verwaltete Inhalte

Verwalten von Smart-Objekten direkt ber das Internet

Melden Sie sich bei www.serifwebresources.com an, um Ihre Smart-Objekte unabhngig von der WebPlusWebsite zu verwalten. Fr die Anmeldung bei den Webressourcen verwenden Sie dieselben Benutzerdaten wie zuvor. Nhere Informationen sowie eine Beschreibung der einzelnen Optionen finden Sie in der Hilfe zu den Webressourcen. Klicken Sie einfach in einem SmartObjekt-Dialogfeld auf Hilfe. Das Smart-Objekt CMS lsst sich nur ber www.serifwebresources.com verwalten.

Soziale Netzwerke

192

Soziale Netzwerke

Soziale Netzwerke

193

Einfgen von Facebook-Objekten


Mit Facebook-Objekten knnen Sie verschiedene Live-Feeds per Streaming auf Ihren Webseiten anzeigen oder auch eine Gefllt mir-Schaltflche platzieren, ber die Website-Besucher Ihre Seiten mit Freunden teilen oder auf ihren eigenen Facebook-Seiten fr Sie die Werbetrommel rhren knnen. Wir mchten Ihnen empfehlen, selbst ein FacebookKonto anzulegen, wenn Sie mit diesen Objekten arbeiten mchten. Weitere Informationen zu Facebook finden Sie unter www.facebook.com.

Die verschiedenen Facebook-Objekttypen


Die Facebook-Objekte, die Sie auf Ihren Seiten platzieren knnen, unterscheiden sich stark in ihrer Funktionalitt und den Mglichkeiten, die sie Ihren Website-Besuchern bieten. Objekttyp AktivittenFeed Gefllt mirFeed Features Zeigt die zuletzt von dem Website-Besucher auf Ihrer Website vorgenommen Aktivitten. Hiermit knnen Besucher Ihre FacebookSeite mit dem Prdikat Gefllt mir versehen (die Seite also empfehlen). Der Feed zeigt ebenfalls die neuesten Postings an und wie vielen Benutzern Ihre Seite bereits gefllt. Dieser Feed zeigt personalisierte Vorschlge fr Inhalte auf Ihrer Website, die Ihren Besuchern gefallen knnten. Hiermit knnen Website-Besucher Seiten Ihrer Website empfehlen und deren Inhalte auf ihren eigenen Facebook-Seiten mit anderen teilen.

EmpfehlungenFeed Gefllt mir Schaltflche

194

Soziale Netzwerke

Einfgen von Facebook-Objekten


Diese Objekte lassen sich genau wie alle anderen Objekte direkt auf Ihren Seiten platzieren. Einfgen eines Facebook-Objekts 1. Klicken Sie in der Kategorie Soziale Netzwerke der Studio-Registerkarte QuickBuild auf das Symbol Facebook-Objekt und klicken Sie dann auf einen Punkt der Seite, um das Objekt zu platzieren. Whlen Sie in dem Dialogfeld ber die Dropdownliste Typ einen der Eintrge Aktivitten-Feed, Gefllt mirFeed, Empfehlungen-Feed oder Gefllt mirSchaltflche aus. Aktivieren oder deaktivieren Sie in dem Vorschaufeld die Option Aktualisieren. Hiermit knnen Sie per Vorschau prfen, wie sich die Darstellung des Objekts auf der Seite ndert, wenn Sie verschiedene Einstellungen vornehmen. Konfigurieren Sie die Funktionalitt des Objekts:

2.

3.

4.

Aktuelle Website-URL nutzen Aktivieren Sie diese Option, um die aktuelle URL Ihrer Website zu verwenden. Wenn Sie die Option deaktivieren, knnen Sie in dem darunter liegenden Feld selbst eine Webadresse eingeben. Fr den Gefllt mir-Feed geben Sie die exakte URL einer Facebook-Seite ein. Linkziel (nur fr Empfehlungen-Feed) Um Links in einem neuen Fenster zu ffnen, klicken Sie auf Leer. Um Links in demselben Fenster zu ffnen, klicken Sie auf bergeordnetes Element oder Oben.

Soziale Netzwerke

195

Diesen Text anzeigen (nur fr Gefllt mirSchaltflche) Whlen Sie aus, ob auf der Schaltflche der Text Gefllt mir oder Empfehlen stehen soll.

5.

(Optional) Konfigurieren Sie die Darstellung des Objekts mit den brigen Optionen (diese variieren je nach ausgewhltem Typ). Klicken Sie auf die Schaltflche OK.

6.

Bearbeiten von Facebook-Objekten


Nachdem Sie es auf einer Seite platziert haben, knnen Sie das Facebook-Objekt jederzeit bearbeiten. Bearbeiten eines Facebook-Objekts 1. Fhren Sie einen Doppelklick auf das Objekt aus. Es wird nun das Dialogfeld fr die Bearbeitung angezeigt. Die Optionen in diesem Dialogfeld sind identisch mit denen, die fr die Erstellung des Objekts verfgbar waren. 2. Nehmen Sie die gewnschten nderungen vor und klicken Sie auf OK. Sie knnen einen Anker fr Ihr Objekt festlegen, indem Sie in der Kontextleiste auf Anker klicken. Weitere Informationen zu Ankern finden Sie unter Einfgen von Ankern auf Seite 131.

196

Soziale Netzwerke

Einfgen von Twitter-Objekten


Mit Twitter-Objekten knnen Sie verschiedene Live-Feeds per Streaming auf Ihren Webseiten anzeigen oder auch eine Tweetoder Folgen-Schaltflche platzieren, die eine direkte Verbindung zu Twitter herstellt. Wir mchten Ihnen empfehlen, selbst ein TwitterKonto anzulegen, wenn Sie mit diesen Objekten arbeiten mchten. Weitere Informationen zu Twitter finden Sie unter www.twitter.com.

Die verschiedenen Twitter-Objekte


Die Twitter-Objekte, die Sie auf Ihren Seiten platzieren knnen, unterscheiden sich stark in ihrer Funktionalitt und den Mglichkeiten, die sie Ihren Website-Besuchern bieten. Objekttyp FavoritenFeed Listen-Feed Profil-Feed SuchenFeed TweetSchaltflche FolgenSchaltflche Features Anzeigen einzelner Tweets, die Sie als Favoriten markiert haben. Anzeigen der Tweets von Benutzern, die zu einer selbst erstellten Twitter-Liste gehren. Anzeigen der Tweets fr das Profil eines bestimmten Benutzers. Anzeigen aller Tweets, die auf einer ausgewhlten Suchanfrage basieren. Hiermit knnen Website-Besucher einen Tweet zu Ihrer Website auf dem eigenen Twitter-Profil posten. Hiermit knnen Website-Besucher Ihrem Benutzerkonto bei Twitter folgen.

Soziale Netzwerke

197

Einfgen von Twitter-Objekten


Die Twitter-Objekte lassen sich genau wie alle anderen Objekte direkt auf Ihren Seiten platzieren. Wie Sie die jeweiligen Objekte einfgen, hngt von der Art des Objekts ab. Einfgen von Favoriten-, Listen-, Profil- oder Suchen-Feeds 1. Klicken Sie in der Kategorie Soziale Netzwerke der Studio-Registerkarte QuickBuild auf das Symbol Twitter-Objekt und klicken Sie dann auf einen Punkt der Seite, um das Objekt zu platzieren. Whlen Sie in dem Dialogfeld ber die Dropdownliste Typ einen der Eintrge Favoriten-Feed, Listen-Feed, Profil-Feed oder Suchen-Feed aus. Aktivieren oder deaktivieren Sie in dem Vorschaufeld die Option Aktualisieren. Hiermit knnen Sie per Vorschau prfen, wie sich die Darstellung des Objekts auf der Seite ndert, wenn Sie verschiedene Einstellungen vornehmen. Konfigurieren Sie die Funktionalitt des Feeds:

2.

3.

4.

Titel (auer fr Profil-Feed) Geben Sie den Text ein, den Sie als Titel fr den Feed verwenden mchten. Wir mchten Ihnen empfehlen, Ihren Twitter-Benutzernamen in dieses Feld einzutragen. Bezeichnung (auer fr Profil-Feed) Geben Sie den Text ein, den Sie als Bezeichnung fr den Feed verwenden mchten. Wir mchten Ihnen empfehlen, den Feed-Typ in dieses Feld einzutragen.

198

Soziale Netzwerke

Benutzername (auer fr Suchen-Feed) Geben Sie den Namen des Twitter-Kontos an, das Sie fr den Stream abrufen mchten. Liste (nur fr Listen-Feed) Geben Sie den Namen der Liste an, die Sie fr den Stream abrufen mchten. Diese Liste muss in dem Twitter-Konto vorhanden sein, dessen Benutzernamen Sie zuvor in das entsprechende Feld eingetragen haben. Suchanfrage (nur fr Suchen-Feed) Geben Sie hier den Ausdruck an, nach dem gesucht werden soll. Alle aktuellen, ffentlichen Tweets, die diesen gesuchten Ausdruck enthalten, werden dann in dem Feed angezeigt. Anzahl der Tweets Hier legen Sie fest, wie viele Tweets in dem Feed angezeigt werden sollen (zwischen 1 und 100). Nach neuen Tweets suchen Aktivieren Sie diese Option, um auf Twitter nach neuen Tweets zu suchen. In Intervallen laden/Alles laden Aktivieren Sie diese Optionen, wenn Sie die Tweets in Intervallen laden mchten oder alle Tweets auf einmal. Der Wert fr das Intervall wird in Sekunden gemessen.

5. 6.

(Optional) Konfigurieren Sie die Darstellung des Feeds unter dem Abschnitt Darstellung. Klicken Sie auf die Schaltflche OK.

Soziale Netzwerke

199

Einfgen einer Tweet-Schaltflche 1. Klicken Sie in der Kategorie Soziale Netzwerke der Studio-Registerkarte QuickBuild auf das Symbol Twitter-Objekt und klicken Sie dann auf einen Punkt der Seite, um das Objekt zu platzieren. Whlen Sie in dem Dialogfeld ber das Dropdownfeld Typ die Option Tweet-Schaltflche aus. Aktivieren oder deaktivieren Sie in dem Vorschaufeld die Option Aktualisieren. Hiermit knnen Sie per Vorschau prfen, wie sich die Darstellung des Objekts auf der Seite ndert, wenn Sie verschiedene Einstellungen vornehmen. Konfigurieren Sie die Funktionalitt der Schaltflche:

2. 3.

4.

URL der aktuellen Seite verwenden Aktivieren Sie diese Option, um die aktuelle URL Ihrer Website zu verwenden. Wenn Sie die Option deaktivieren, knnen Sie in dem darunter liegenden Feld Benutzerdefinierte URL selbst eine Webadresse eingeben. Tweet-Text Geben Sie hier den Text fr den Tweet ein. Dieser Text wird in dem Tweet-Feld angezeigt und lsst sich vor bermittlung des Tweets noch bearbeiten. ber Geben Sie hier den Namen eines Twitter-Kontos ein, das am Ende des Tweets in der Form ber @<benutzername> angezeigt werden soll. Wir mchten Ihnen empfehlen, Ihren TwitterBenutzernamen in dieses Feld einzutragen.

200

Soziale Netzwerke

Empfehlen Hiermit empfehlen Sie Ihren Website-Besuchern einen Twitter-Benutzernamen, dem die Besucher folgen knnen. Diese Empfehlung wird nach der bermittlung des Tweets angezeigt. Hashtag Geben Sie einen Ausdruck als Hashtag (Stichwort) ein (dieser Ausdruck darf keine Leerzeichen enthalten). Die Tweets lassen sich dann anhand dieses Hashtags suchen.

5.

(Optional) Konfigurieren Sie die Darstellung des Objekts mit den brigen Optionen (diese variieren je nach ausgewhltem Typ). Klicken Sie auf die Schaltflche OK.

6.

Einfgen einer Folgen-Schaltflche 1. Klicken Sie in der Kategorie Soziale Netzwerke der Studio-Registerkarte QuickBuild auf das Symbol Twitter-Objekt und klicken Sie dann auf einen Punkt der Seite, um das Objekt zu platzieren. Whlen Sie in dem Dialogfeld ber das Dropdownfeld Typ die Option Folgen-Schaltflche aus. Geben Sie in das Feld Diesem Benutzer folgen einen Twitter-Benutzernamen ein. Ihre Website-Besucher knnen dann per Klick auf die Schaltflche diesem Konto auf Twitter folgen. (Optional) Konfigurieren Sie die Darstellung des Objekts mit den brigen Optionen (diese variieren je nach ausgewhltem Typ). Klicken Sie auf die Schaltflche OK.

2. 3.

4.

5.

Soziale Netzwerke

201

Bearbeiten von Twitter-Objekten


Nachdem Sie es auf einer Seite platziert haben, knnen Sie das Twitter-Objekt jederzeit bearbeiten. Bearbeiten eines Twitter-Objekts 1. 2. Whlen Sie das auf einer Seite platzierte Objekt aus. Fhren Sie einen Doppelklick auf das Objekt aus. Es wird nun das Dialogfeld fr die Bearbeitung angezeigt. Die Optionen in diesem Dialogfeld sind identisch mit denen, die fr die Erstellung des Objekts verfgbar waren. 3. Nehmen Sie die gewnschten nderungen vor und klicken Sie auf OK.

Nachdem Sie das Objekt auf der Seite platziert haben, knnen Sie es durch Klicken und Ziehen seiner Kanten oder Ecken (mit Ausnahme der Folgen-Schaltflche und der Tweet-Schaltflche) beliebig vergrern und verkleinern. Um das Seitenverhltnis des Objekts unverndert zu bernehmen, halten Sie whrend des Ziehens die Umschalttaste gedrckt. Sie knnen einen Anker fr Ihr Objekt festlegen, indem Sie in der Kontextleiste auf Anker klicken. Weitere Informationen zu Ankern finden Sie unter Einfgen von Ankern auf Seite 131.

Einfgen einer Google +1-Schaltflche


Wenn Sie eine Google +1-Schaltflche auf Ihren Seiten platzieren, knnen Website-Besucher die Inhalte Ihrer Website ber Google+ empfehlen. Mit einem Klick auf die Schaltflche knnen die Website-Besucher Ihre Webseiten als Postings in ihrem eigenen live Stream mit anderen Websurfern teilen oder auch in der +1-Registerkarte ihres Profils bei Google+ auffhren. Die +1-

202

Soziale Netzwerke

Registerkarte zeigt alle von einem Besucher empfohlenen Links an. Die Google +1-Schaltflche kann ebenfalls anzeigen, wie viele Personen Ihre Webseite bereits empfohlen haben. Wir mchten Ihnen empfehlen, selbst ein Konto bei Google+ anzulegen, wenn Sie mit diesen Schaltflchen arbeiten mchten. Nhere Informationen zu Google+ finden Sie unter plus.google.com. Einfgen einer Google +1-Schaltflche 1. Klicken Sie in der Kategorie Soziale Netzwerke der Studio-Registerkarte QuickBuild auf das Symbol Google +1-Schaltflche und klicken Sie dann auf einen Punkt der Seite, um die Schaltflche zu platzieren. Klicken Sie in dem Konfigurationsfeld auf die Option +1 Aktuelle Seite, um die aktuelle URL Ihrer Website zu verwenden. Wenn Sie die Option deaktivieren, knnen Sie in dem darunter liegenden Feld Benutzerdefinierte URL selbst eine Webadresse eingeben. (Optional) Whlen Sie in dem Feld Gre die Abmessungen fr das Objekt aus. (Optional) Whlen Sie in dem Feld Anmerkung eine Formatierung fr die Anmerkung aus. Klicken Sie auf die Schaltflche OK.

2.

3. 4. 5.

Bearbeiten einer Google +1-Schaltflche 1. 2. Whlen Sie die auf einer Seite platzierte Schaltflche aus. Fhren Sie einen Doppelklick auf die Schaltflche aus. Es wird nun das Dialogfeld fr die Bearbeitung angezeigt. Die Optionen in diesem Dialogfeld sind identisch mit denen, die fr die Erstellung der Schaltflche verfgbar waren.

Soziale Netzwerke

203

3.

Nehmen Sie die gewnschten nderungen vor und klicken Sie auf OK. Sie knnen einen Anker fr Ihre Schaltflche festlegen, indem Sie in der Kontextleiste auf Anker klicken. Weitere Informationen zu Ankern finden Sie unter Einfgen von Ankern auf Seite 131.

Einfgen eines LesezeichenSymbolstreifens fr soziale Netzwerke


Wenn Sie einen Lesezeichen-Symbolstreifen fr soziale Netzwerke auf einer Seite platzieren, knnen die Website-Besucher Ihre Website mit anderen Benutzern teilen oder fr Ihre Website auf einem sozialen Netzwerk die Werbetrommel rhren - schnell und einfach per Klick auf das entsprechende Symbol. In WebPlus knnen Sie diesen Streifen mit Symbolen fr die am hufigsten verwendeten sozialen Netzwerke bestcken einschlielich Facebook, Twitter, Reddit, Digg usw.

In diese Leiste knnen Sie auch Symbole einfgen, mit denen sich die Website-URL einfach per E-Mail verschicken oder aktuelle Seiten ausdrucken lassen. Master-Seiten sind ideal fr die Platzierung der Lesezeichen-Symbolstreifen. Hierdurch wird der Streifen auf allen Seiten verfgbar, denen Sie diese Master-Seite zugewiesen haben.

204

Soziale Netzwerke

Einfgen eines Lesezeichen-Symbolstreifens fr soziale Netzwerke 1. Klicken Sie in der Kategorie Soziale Netzwerke der Studio-Registerkarte QuickBuild auf das Symbol Lesezeichen-Symbolstreifen fr soziale Netzwerke und klicken Sie dann auf eine beliebige Stelle Ihrer Seite, um das Objekt zu platzieren. Um das Symbol fr eine Website in den Streifen einzutragen, klicken Sie auf den Namen der Website in der Liste Nicht im Streifen enthalten und dann auf Hinzufgen. Um ein Symbol aus dem Streifen zu lschen, klicken Sie in der Liste Im Streifen enthalten auf den Namen der Website und dann auf Entfernen. Whlen Sie eine Option unter Teilen aus: Website, damit Besucher Ihre ganze Website mit anderen teilen oder Seite, damit nur die aktuelle Seite geteilt wird. Klicken Sie auf die Schaltflche OK.

2.

3.

4.

Bearbeiten eines Lesezeichen-Symbolstreifens fr soziale Netzwerke 1. 2. Whlen Sie den auf einer Seite platzierten Symbolstreifen aus. Fhren Sie einen Doppelklick auf den Symbolstreifen aus. Es wird nun das Dialogfeld fr die Konfiguration angezeigt. Die Optionen in diesem Dialogfeld sind identisch mit denen, die fr die Erstellung des Streifens verfgbar waren. 3. Nehmen Sie die gewnschten nderungen vor und klicken Sie auf OK. Sie knnen einen Anker fr Ihren LesezeichenSymbolstreifen festlegen, indem Sie in der Kontextleiste auf Anker klicken. Weitere Informationen zu Ankern finden Sie unter Einfgen von Ankern auf Seite 131.

Multimedia

206

Multimedia

Multimedia

207

Hinzufgen von Sounds und Videos


In WebPlus knnen Sie Ihre Webseiten mit Sound- und Videodateien in vielen unterschiedlichen Formaten ergnzen. Hierzu gehren sowohl Streaming-Mediadateien als auch Standardformate (non-streaming). Darber hinaus lassen sich mit WebPlus auch Videos von Dritten einfgen, die bereits auf YouTube gespeichert sind.

Audio
Sounddateien lassen sich entweder als Hintergrundsound wiedergeben (die Sounddatei wird automatisch geladen und wiedergegeben, sobald ein Webbrowser die entsprechende Seite ffnet) oder als verlinkter Sound. Die Wiedergabe von verlinkten Sounds wird fr gewhnlich durch einen Mausklick auf ein Symbol oder ein Objekt mit Hyperlink gestartet. WebPlus untersttzt die folgenden Audioformate: .WAV, .AIFF, .AU, MIDI (.mid, .midi), .MP3 und RealAudio (.ra, .ram).

Video
Verlinkte Videos lassen sich auf die gleiche Weise wiedergeben wie verlinkte Sounddateien. WebPlus untersttzt die folgenden Videoformate: .AVI, QuickTime (.mov, .qt), MPEG (.mpg, .mpeg, .mpe, .mpv) und RealVideo (.ram, .rv). Fr die Wiedergabe von Streaming-Dateien wird ein bestimmter Player bentigt, der die heruntergeladenen Daten in einem Puffer speichert. Der Player kann hierdurch mit der Wiedergabe beginnen, bevor die Datei vollstndig heruntergeladen ist. Mediadateien in Standardformaten mssen hingegen erst vollstndig auf den Computer des WebsiteBesuchers bertragen werden, bevor eine Wiedergabe mglich ist. Sie knnen sowohl die Sounddateien (verlinkt und Hintergrundsounds) als auch die Videodateien entweder von Ihrer Website getrennt halten oder die Multimediadateien in die Website

208

Multimedia

einbetten. Obwohl durch das Einbetten die Dateigre der Website ansteigt, wird diese Option als Standard verwendet, da Sie nach dem Einbetten nicht mehr auf viele verschiedene Dateien achten mssen. Somit verringert sich auch das Risiko, dass Sie eine der Dateien versehentlich lschen. Bei der Publikation Ihrer Webseite exportiert und kopiert WebPlus sowohl die eingebetteten als auch die nicht eingebetteten Dateien. Einfgen von Hintergrundsounds in eine Seite 1. Klicken Sie im Arbeitsbereich mit der rechten Maustaste auf die Seite und in ihrem Kontextmen auf Seiteneigenschaften Klicken Sie in dem Dialogfeld Seiteneigenschaften auf Sound und aktivieren Sie die Option Audiodatei verwenden. Klicken Sie in dem Dialogfeld Audiodatei auswhlen auf die gewnschte Audiodatei und dann auf OK. Wenn Sie die Datei nicht in Ihre Website einbetten mchten, deaktivieren Sie die Option Sounddatei in Website einbetten. Wenn Sie eine kontinuierliche Wiedergabe fr die Sounddatei festlegen mchten, aktivieren Sie die Option Sound in Endlosschleife wiedergeben. Ist diese Option deaktiviert, wird der Sound nur einmal abgespielt. (Optional) Legen Sie ber die Exportoptionen einen Dateinamen fr die exportierte Datei und eine Speicherposition fest. Nhere Informationen hierzu finden Sie unter dem Thema Einstellen der Bildexportoptionen in der WebPlus-Hilfe. Klicken Sie auf die Schaltflche OK.

2.

3. 4.

5.

6.

7.

Der Hintergrundsound wird automatisch heruntergeladen und wiedergegeben, sobald ein Webbrowser diese Webseite ffnet.

Multimedia

209

Erstellen eines Links von einem Symbol, Bild oder InlinePlayer 1. Klicken Sie in der Kategorie Mediadateien der Studio-Registerkarte QuickBuild auf das Symbol Audio oder Video und anschlieend auf Ihre Seite. Whlen Sie die Speicherposition fr die Mediadatei aus (entweder eine Datei auf Ihrem PC oder eine URL im Internet). Whlen Sie eine Anzeigeoption fr den Link aus (Symbol, Inline oder Bild). Klicken Sie auf OK, um das Dialogfeld zu schlieen, und platzieren Sie die Markierung, das Symbol oder das Bild mit einem Mausklick (oder durch Ziehen mit der Maus) auf Ihrer Seite.

2.

3. 4.

Verlinken von Audio- und Videodateien zu ausgewhlten Objekten und Hotspots 1. Fr ein Objekt mit Hyperlink whlen Sie einen Textbereich, ein Bild oder ein anderes Objekt auf der Seite aus und klicken in der Symbolleiste fr Webeigenschaften auf die Option Hyperlink. ODER Fr einen Hotspot klicken Sie im Men Einfgen auf Hotspot und legen den Hotspot dann durch Klicken und Ziehen auf Ihrer Seite fest. Klicken Sie in dem Dialogfeld auf die Option Datei, um einen Hyperlink zu einer Audio-/Videodatei auf Ihrer Festplatte zu erstellen. Klicken Sie auf Durchsuchen, whlen Sie die Mediadatei aus und klicken Sie auf ffnen.

2.

3.

210 4.

Multimedia

Wenn Sie die Datei nicht in Ihre Website einbetten mchten, deaktivieren Sie die Option Datei in Website einbetten. Je nach gewnschter Darstellungsart fr das Ziel knnen Sie ebenfalls in der Registerkarte Zielfenster des Dialogfelds eine Reihe von Zielfenstern oder Zielrahmen auswhlen. Nhere Informationen hierzu finden Sie unter dem Thema Einfgen von Hyperlinks und Aktionen auf Seite 126. Klicken Sie auf die Schaltflche OK.

5.

6.

Einfgen von Flash-Dateien (SWF)


Eine Flash-Datei (*.SWF) ist eine Moviedatei, die sich in dem Flash Player betrachten lsst. Flash ist ein vektorbasierendes Programm fr die Entwicklung und Wiedergabe kleiner Animationsdateien im Web. Sie knnen die Flash-Datei per Vorschau prfen und/oder ihren Effekt verndern. Nachdem Sie die Datei in Ihre Website eingefgt haben, erscheint sie lediglich als Standbild. Sie mssen die Seite zunchst exportieren und in einem Webbrowser ffnen, um die Animationsbewegung zu berprfen. Einfgen von Flash-Dateien 1. Klicken Sie in der Kategorie Mediadateien der Studio-Registerkarte QuickBuild auf das Symbol Flash und dann auf einen Punkt Ihrer Seite. Klicken Sie in dem nun geffneten Dialogfeld auf Durchsuchen, und whlen Sie die gewnschte SWFDatei aus. Mchten Sie einen anderen Dateinamen und eine andere Speicherposition verwenden, klicken Sie auf Exportoptionen und legen die gewnschten Angaben

2.

Multimedia

211

fest. Wenn Sie die Animation von der WebPlus-Datei getrennt halten, und lieber eine Verknpfung zu der Quelldatei in Ihre Seite einfgen mchten, deaktivieren Sie die Option Flash-Datei in Website einbetten. 3. Klicken Sie auf die Schaltflche OK.

Bearbeiten von Flash-Movies

Fhren Sie einen Doppelklick auf Ihr Flash-Movie aus.

Einfgen von YouTube-Videos


Bereits im Internet publizierte YouTube-Videos lassen sich ebenfalls auf Ihren Webseiten platzieren. Die eigentlichen Videos werden hierbei nicht in Ihre Website eingebettet. Stattdessen bettet das Programm eine spezielle YouTube-Video-ID in die Seite ein, wenn Sie das YouTube-Video auf der Seite platzieren. Es wird also ein Link von Ihrer Seite zu www.youtube.com erstellt. Auf diese Weise knnen Sie Medieninhalte auf Ihren Seiten anbieten, ohne mit Ihrer Website gleichzeitig groe Videodateien auf Ihren Server zu bertragen.

212

Multimedia

Einbetten von YouTube-Videos 1. ffnen Sie die Website www.youtube.com in Ihrem Browser und whlen Sie das YouTube-Video aus, zu dem Sie einen Link erstellen mchten. Kopieren Sie die URL-Adresse des Videos (oder den Einbettungscode). Der Code enthlt eine einzigartige, alphanumerische ID, die den Videoclip eindeutig identifiziert. Klicken Sie in der Kategorie Mediadateien der Studio-Registerkarte QuickBuild auf das Symbol YouTube und dann auf einen Punkt Ihrer Seite. Fgen Sie nun die zuvor kopierte URL des Videos in das Dialogfeld ein. (Optional) Aktivieren/Deaktivieren Sie die Kontrollkstchen fr die Videoeinstellungen. Klicken Sie auf die Schaltflche OK.

2.

3.

4. 5. 6.

Bei einigen Websites werden die YouTube-Videos gelegentlich (oder in festen Abstnden) durch neue Videos ersetzt. Eine Website knnte z. B. die Top-10 einer bestimmten Kategorie anbieten, die sich wchentlich ndert. WebPlus kann die Videos austauschen, ohne ihre Platzierung zu verndern. Wenn Sie ein YouTube-Video durch ein anderes ersetzen mchten, fhren Sie einfach einen Doppelklick auf ein bestehendes YouTube-Video aus. Fgen Sie nun die zuvor kopierte URL des Ersatzvideos in das Dialogfeld ein.

10

Formulare

214

Formulare

Formulare

215

Einfgen von Formularen


Mit Webformularen knnen Sie auf effiziente und moderne Weise neue Informationen von den Besuchern Ihrer Website erfragen. Zu den am hufigsten genutzten Formularen gehren FeedbackFormulare, Gstebcher und Anfrageformulare. Formulardaten lassen sich auf unterschiedliche Weise sammeln per E-Mail, in einer Skriptdatei (lokal oder auf einem RemoteServer) oder ber die Webressourcen von Serif.

Der Formularaufbau
Formulare bestehen aus Texten, Grafiken und den so genannten Formularelementen. Zu den Elementen gehren Buttons, Eingabe-, Text-, Listen- und Dropdownfelder sowie Kontrollkstchen, Auswahlsymbole, Datei-Browser und CAPTCHA-Objekte. Ein typisches Formular, z. B. fr Feedback per E-Mail, besteht fr gewhnlich aus mehreren dieser Elemente. Der Besucher der Website gibt dann spter Texte in die Textfelder ein, oder whlt Informationen aus den Listenfeldern, Dropdownfeldern oder mit den Optionssymbolen und Kontrollkstchen aus. Fr die direkte Texteingabe lassen sich je nach verwendetem Feldtyp sowohl numerische Werte oder Texte verwenden als auch eine Mischung aus beiden Informationstypen. Die Tab-Reihenfolge, in derdie Felder ausgefllt werden mssen, lsst sich genauso frei festlegen, wie die Validierung der eingegebenen Daten. Nhere Informationen zu der TabReihenfolge und der Validierung finden Sie in der WebPlus-Hilfe. Jedes Feld ist durch einen bestimmten Satz Formularfeldeigenschaften definiert, die sein Aussehen, seine Werte, die Validierungsmethode sowie die Aktion festlegen, die von dem Feld erwartet wird. Die verschiedenen Funktionen der Formularelemente werden erst verfgbar, nachdem Sie die Website im Internet publiziert haben.

216

Formulare

Sie knnen die Formulare natrlich ebenfalls in der WebPlusVorschau kontrollieren (siehe ffnen einer Website-Vorschau auf Seite 282). Nachdem ein Website-Besucher die Daten in ein Feld eingegeben oder eine Option ausgewhlt hat, werden die Daten bei der bertragung des Formulars an ein zuvor ausgewhltes Ziel verschickt. An welche Empfnger lassen sich Daten schicken? Nach dem Absenden des Formulars knnen Sie die Daten an einen der folgenden Empfnger verschicken.

Eine E-Mail-Adresse (z. B. die des Website-Designers) Eine Skriptdatei (entweder eine lokale oder auf einem Server gespeicherte). Dieses Skript knnte z. B. Text in eine Textdatei oder in eine Datenbank schreiben. An die Webressourcen von Serif fr eine weitere bermittlung der Formulardaten durch Serif an Ihre EMail-Adresse.

Nhere Informationen hierzu finden Sie unter dem Thema bertragen von Formularen auf Seite 219.

Formulare

217

Erstellen von Formularen


Wenn Sie ein Formular erstellen mchten, knnen Sie entweder ein vordefiniertes Standardformular (siehe Beispiel) verwenden, einzelne Formularelemente fr Ihr Formular platzieren oder ein Formular von Grund auf neu zusammenstellen. Fr die ersten beiden Methoden steht Ihnen ein Formularassistent zur Verfgung. Erstellen von Standardformularen 1. Whlen Sie in der Studio-Registerkarte QuickBuild das Symbol Formular der Kategorie Formulare aus und klicken Sie auf die Seite. Klicken Sie in dem Dialogfeld auf die Option Standardformular verwenden und anpassen und dann auf die Schaltflche Weiter>. Whlen Sie das gewnschte Formular in der Liste aus. Wenn Sie auf einen der Eintrge klicken, wird automatisch eine Darstellung des Formulars in dem Vorschaufeld angezeigt. Klicken Sie auf die Schaltflche Weiter>.

2.

3.

4.

218 5.

Formulare

Im nchsten Dialogfeld knnen Sie Formularelemente hinzufgen, bearbeiten und lschen.

Um ein Element einzufgen, klicken Sie in dem Feld Hinzufgen auf die entsprechende Schaltflche. Um ein Standardobjekt zu verndern, whlen Sie das Element in dem oberen Feld aus und klicken auf die Schaltflche Element bearbeiten. Um ein Standardobjekt zu entfernen, whlen Sie das Element in dem oberen Feld aus und klicken auf die Schaltflche Lschen oder drcken die Entf-Taste. Um die Reihenfolge der Elemente zu verndern, whlen Sie ein Element aus und klicken dann auf eines der Symbole Nach oben oder Nach unten.

6.

Klicken Sie auf Weiter > und im nchsten Dialogfeld auf eines der Symbole, um das Ziel fr die bermittlung der Formulardaten auszuwhlen. Nhere Informationen hierzu finden Sie unter dem Thema bertragen von Formularen auf Seite 219.

7.

Klicken Sie auf Fertig stellen, um den Assistenten zu schlieen.

Wenn Sie Ihr Formular sehr przise konfigurieren mchten, fgen Sie einfach ein leeres Formular ein und ergnzen es dann mit Formularelementen und/oder Standard-Formularobjekten. Sie knnen ebenfalls die Schaltflchen fr das Absenden und Zurcksetzen anpassen oder ersetzen . Nhere Informationen hierzu finden Sie in der WebPlus-Hilfe.

Formulare

219

bertragen von Formularen


Alle Webformulare mssen an einen bestimmten Empfnger versandt werden, damit ihre Daten ausgewertet werden knnen. Sie knnen zu diesem Zweck entweder manuell eine Schaltflche Absenden erstellen oder die vorgefertigte Version des Formularassistenten verwenden. Diese zwingend erforderliche Schaltflche wird hufig zusammen mit der Schaltflche Zurcksetzen in einem Formular platziert. ber die Schaltflche Zurcksetzen knnen die Website-Besucher alle Daten aus den Formularfeldern lschen. Fr die bermittlung der Formulardaten stehen Ihnen mehrere Mglichkeiten zur Verfgung. Keine bermittlung Es werden keine Formulardaten bertragen. Diese Option ist besonders hilfreich, wenn Sie fr einen bestimmten Zeitraum keine weiteren Daten mehr abfragen mchten oder Ihre Skripts bzw. die Serif Webressourcen noch nicht vollstndig konfiguriert haben. Sie knnen spter jederzeit mit der rechten Maustaste auf das Formular klicken und ber Formulareigenschaften bearbeiten... eine bertragungsmethode fr die Daten auswhlen. Sie sollten keine Formulare auf Ihrer Website publizieren, fr die Sie keine Absenden-Funktion festgelegt haben.

220

Formulare

Eine E-Mail Adresse Mit dieser Option knnen Sie die allgemein blichen POST- und GET-bertragungsmethoden umgehen. Sobald der WebsiteBesucher auf die Schaltflche Absenden klickt, wird sein E-MailStandardprogramm gestartet. Die Formulardaten werden dann als ein Textstring in den Textkrper der E-Mail eingefgt und lassen sich schnell und einfach an die vorkonfigurierte E-Mail-Adresse schicken. Diese Methode ist besonders hilfreich, wenn Sie keine lokalen oder Remote-Skripts verwenden mchten oder knnen. Diese bertragungsmethode ist jedoch nicht sicher, da die privaten oder vertraulichen Informationen nicht verschlsselt werden. Einrichten der direkten E-Mail-bertragung 1. 2. Klicken Sie auf das E-Mail-Symbol und geben Sie einen Formularnamen ein. Geben Sie eine E-Mail-Adresse als Ziel ein (oder whlen Sie eine bereits bekannte Adresse in dem Dropdownfeld aus). Skriptdatei von meiner Festplatte Diese Option ist speziell fr erfahrene Webdesigner konzipiert, die sich gut in der Erstellung von Skripten auskennen. Einrichten einer lokalen Skriptdatei 1. 2. Klicken Sie auf das Symbol Skriptdatei und geben Sie einen Formularnamen ein. Whlen Sie ber die Schaltflche Durchsuchen... die auf Ihrem Computer gespeicherte Skriptdatei (fr gewhnlich mit der Dateiendung .PHP, .JS, .CFM

Formulare

221

.CGI, .PL, .DLL oder .EXE) aus, die Sie verwenden mchten. 3. Aktivieren Sie die Option Datei einbetten, um die Skriptdatei in die WebPlus-Website zu integrieren. Ist diese Option deaktiviert, besteht keine Verbindung zwischen der Skriptdatei und der Website, sodass smtliche nderungen an der Skriptdatei von der Website nicht bercksichtigt werden. Optional knnen Sie noch ber die Schaltflche Exportoptionen... einen Webdateinamen und -ordner fr das Skript festlegen. Whlen Sie eine bertragungsmethode, einen Codierungstyp, einen Zeichensatz und ein Zielfenster oder einen Zielrahmen aus. Ein Remote-Skript Verwenden Sie diese Option, wenn Ihr ISP den Einsatz benutzerdefinierter Skripte auf seinen Webservern nicht gestattet. Viele Internetdienstanbieter stellen jedoch einige Grundskripte zur Verfgung, auf die Sie von Ihrer Website einfach einen Link erstellen. Fr gewhnlich senden diese Skripte dann die Formulardaten an die E-Mail-Adresse, die Sie bereits im Vorfeld bei dem ISP eingerichtet haben. Einrichten einer Remote-Skriptdatei 1. 2. 3. Klicken Sie auf das Symbol Remote-Skript, und geben Sie einen Formularnamen ein. Geben Sie die URL ein, die direkt auf die Skriptdatei verweist. Whlen Sie eine bertragungsmethode, einen Codierungstyp, einen Zeichensatz und ein Zielfenster oder einen Zielrahmen aus.

4.

5.

222

Formulare

Serif Webressourcen Wenn Sie den Webserver nicht selbst aufstellen und verwalten mchten, knnen Sie auch die Serif Webressourcen (siehe Seite 184) nutzen. Dieser kostenlose Service transferiert Ihre Formulardaten ber einen Server von Serif an eine beliebig konfigurierbare E-Mail-Adresse. Aus Sicherheitsgrnden mssen Sie zunchst ein Benutzerkonto bei den Serif Webressourcen anlegen, bevor Sie die E-Mail-Zieladresse fr die Formulardaten festlegen knnen. Konfigurieren der Serif Webressourcen 1. 2. Klicken Sie auf das Symbol Serif Webressourcen, und geben Sie einen Formularnamen ein. Klicken Sie auf Auswhlen. Falls Sie noch nicht bei den Serif Webressourcen angemeldet sind, holen Sie dies nun nach. Geben Sie in das Dialogfeld die Details zu der Zieladresse ein:

3.

Geben Sie die E-Mail-Zieladresse in das Feld EMail-Adresse ein. Geben Sie einen Benutzerdefinierten Betreff ein, der in den E-Mails Ihrer Website-Besucher verwendet werden soll (z. B. E-Mail-bermittlung von Rainbow_WWW: Kontaktdetails). Geben Sie eine Besttigungsnachricht ein, die dem Website-Besucher angezeigt werden soll, nachdem er auf die Absenden-Schaltflche geklickt hat. In dem Feld Sprache legen Sie die Sprache fest, in der die Besttigungsnachricht versendet werden soll.

Formulare

223

Wenn Sie ein Formularelement vom Typ Eingabefeld fr die E-Mail-Adresse erstellen, knnen Sie die Besttigungs-E-Mail auch direkt an den WebsiteBesucher senden. Hierzu mssen Sie in den Eigenschaften des Eingabefeldes die Option SWR: Besttigungs-E-Mail senden aktivieren. Wenn Sie ein CAPTCHA-Formularelement in dem Formular verwenden, wird dieses als Spam-Schutz eingesetzt. Ist dieses Element nicht vorhanden, wird die SpamPrfung ber den CAPTCHA-Gateway abgewickelt. Wenn Sie in das Feld Antwort an die E-Mail-Adresse Ihres Website-Entwicklers eintragen mchten, aktivieren Sie die Option Antwort an mich in dem obigen Dialogfeld. Auf diese Weise knnen die Website-Besucher sich direkt an den Entwickler der von ihnen aufgerufenen Seite wenden. 4. Klicken Sie auf Neu hinzufgen. Der E-Mail-Eintrag wird nun erstellt und in die Liste Verfgbare E-MailZieladressen eingetragen. Wie Sie sehen, wird der Eintrag als Nicht besttigt klassifiziert. Bevor der Dienst seine Arbeit aufnehmen kann, wird eine Besttigungs-EMail an Ihre E-Mail-Adresse geschickt. Klicken Sie auf den Link, um den Dienst zu aktivieren. Der entsprechende Eintrag wird nun als Besttigt angezeigt. (Optional) Wiederholen Sie die obigen Schritte, um weitere E-Mail-Zieladressen einzufgen, und whlen Sie die Eintrge aus, um sie zu aktivieren. Klicken Sie auf die Schaltflche OK.

5.

6.

Standardmig wird dem Website-Besucher ber eine einfache Besttigungsseite (erstellt von den Serif Webressourcen) angezeigt, dass die Formulardaten erfolgreich bermittelt wurden. Sie knnen statt dieser von den Webressourcen erstellten Standardseite auch Ihre eigene Besttigungsseite anzeigen lassen. Da es sich bei der Besttigungsseite um eine ganz normale Webseite handelt, knnen

224

Formulare

Sie auf ihr alle Designelemente verwenden, mit denen Sie auch die anderen Seiten Ihrer Website erstellt haben. Hinzufgen Ihrer eigenen Besttigungsseite 1. (Nur mglich bei der bertragung der Daten ber die Serif Webressourcen) Klicken Sie mit der rechten Maustaste auf das Formular und in seinem Kontextmen auf Formulareigenschaften bearbeiten. Klicken Sie auf die Schaltflche Auswhlen gegenber dem Feld Umleiten zu. Klicken Sie in dem Dialogfeld Formularumleitung bearbeiten auf Website-Seite und whlen Sie dann in dem Dropdownfeld einen Seitennamen aus. Klicken Sie zweimal auf die Schaltflche OK, um die Dialogfelder zu schlieen. Bei der nchsten bermittlung von Formulardaten wird nun Ihre Besttigungsseite angezeigt. Es werden keine persnlichen Daten auf den Serif Webservern gespeichert. Alle Formulardaten werden in Echtzeit weitergeleitet. CAPTCHA-Gateway Als Schutz gegen Spam-Mails verwenden die Serif Webressourcen einen CAPTCHA-Gateway, wenn Sie kein CAPTCHAFormularelement direkt in Ihr Formular einfgen (siehe Die Formularelemente in der WebPlus-Hilfe). Bei der Formularbermittlung muss dann der Website-Besucher eine willkrlich zusammengestellte Zeichenfolge in ein Textfeld eingeben.

2. 3.

4.

Wird der Test bestanden, initiiert das Objekt automatisch die Formularbermittlung.

11

E-Commerce-Objekte

226

E-Commerce-Objekte

E-Commerce-Objekte

227

Was bedeutet E-Commerce?


Als E-Commerce bezeichnet man den Kauf und Verkauf von Waren ber das Internet. Heutzutage ist der Einzelhandel ber Online-Shops ein normaler Bestandteil unserer Internetaktivitten geworden. Sicher haben Sie auch schon einmal Bcher, CDs, Konzertkarten oder Flugtickets ber das Internet gekauft. Alle auf E-Commerce ausgerichteten Websites benutzen fr gewhnlich ein System fr ihren Warenkorb sowie ein System fr die Verarbeitung der Zahlungsmethoden. Der Warenkorb entspricht in seiner Funktion dem realen Warenkorb in einem Supermarkt und dient als Container fr die Waren, die Sie in einem Internet-Shop ausgesucht haben. Mit diesem Korb begeben Sie sich dann zu der virtuellen Kasse, an der das Verarbeitungssystem fr die Zahlungsmethoden den finanziellen Teil des Einkaufs abwickelt. Groe Unternehmen verwenden fr gewhnlich eine eigene Warenkorbfunktion, die speziell auf die Anforderungen ihrer Produkte zugeschnitten wurde. Die Abwicklung der Zahlungsmodalitten wird hufig von Drittanbietern bernommen. Da Sonderanfertigungen sehr teuer sind, setzen kleine Unternehmen und Organisationen hufig auf vorgefertigte Lsungen von Drittherstellern. Im Internet finden Sie eine Reihe Unternehmen, die verschiedene Warenkorbfunktionen anbieten. Alle diese Funktionen laufen ber ein Benutzerkonto und wickeln die Zahlung ber verschiedene Kreditkarten ab, anstatt auf die herkmmlichen Zahlungswege zu setzen. Welche Rolle bernimmt WebPlus nun in dieser Struktur? Mit WebPlus knnen Sie den Anbieter fr Warenkorbsysteme bequem auswhlen und ber einen Link oder ein Formular auf Ihrer mit WebPlus erstellten Webseite zu dem Dienstanbieter Kontakt aufnehmen. In den Formularen knnen Sie verschiedene Kaufoptionen (z. B. Farbe und Menge) einstellen sowie Steuern, Versandkosten, Mengenrabatte usw. berechnen. ber Links lassen sich die Waren mit nur einem Mausklick erwerben. Hierbei knnen Sie jedoch keine Kaufoptionen auswhlen. Die Art und der

228

E-Commerce-Objekte

Umfang der Funktionen variieren je nach Dienstanbieter. Schauen Sie sich einfach um, welches Unternehmen Ihren Vorstellungen entspricht.

Konfigurieren des Warenkorbsystems Ihres Dienstanbieters


ber WebPlus lassen sich Warenkorbsysteme sehr flexibel konfigurieren. Als Kunde bei eBay kennen Sie wahrscheinlich bereits das System PayPal. Whrend der Konfiguration werden Sie zu der Website des Dienstanbieters geleitet, auf der Sie sich als registrierter Benutzer anmelden knnen. Nhere Informationen zu den einzelnen Mglichkeiten der Warenkorbsysteme finden Sie auf den Websites der Drittanbieter. Einrichten des Dienstanbieters fr einen Websiteumfassenden Warenkorb 1. Klicken Sie in der Kategorie E-Commerce der Studio-Registerkarte QuickBuild auf das Symbol ECommerce und klicken Sie dann auf einen Punkt der Seite, um das Objekt zu platzieren. In dem Dialogfeld E-Commerce konfigurieren stehen Ihnen nun zwei Optionen zur Verfgung. Welche Sie verwenden knnen, hngt davon ab, ob Sie bereits Kunde bei einem Dienstanbieter sind oder sich als Neukunde anmelden mchten:

2.

Als Neukunde whlen Sie zunchst das Symbol fr den Dienstanbieter aus und klicken dann auf die Schaltflche Jetzt anmelden. Die Website des Dienstanbieters wird nun in einem neuen Browserfenster geffnet, sodass Sie sich als registrierter Kunde bei dem Warenkorbdienstanbieter anmelden knnen.

E-Commerce-Objekte

229

Wenn Sie bereits Kunde bei einem Dienstanbieter sind, whlen Sie das Symbol Ihres Dienstanbieters aus und klicken dann auf Weiter>. Mit dieser Option legen Sie den standardmig verwendeten Dienstanbieter fr Ihre Website fest. Da Sie bereits Kunde sind, mssen Sie kein neues Benutzerkonto anlegen.

3.

Die Zusammensetzung dieses Dialogfelds variiert je nach verwendetem Warenkorb-Anbieter. Fr PayPal knnen Sie z. B. ber ein Dialogfeld eine E-Mail-Adresse festlegen, die alle Zahlungen empfangen soll, eine Bearbeitungsgebhr fr den Warenkorb festlegen und mit der Sandbox Ihren Warenkorb testen, bevor Sie ihn live ins Internet stellen. Klicken Sie auf die Schaltflche Weiter>. Fr den Sandbox-Test finden Sie auf der PayPal-Website ber die Suchfunktion oder unter den Hndler-Tools alle Informationen, um eine Sandbox-Anmeldung zustzlich zu Ihrer normalen PayPal-Anmeldung zu erstellen.

4.

(Optional, nur fr PayPal) Klicken Sie in dem nchsten Dialogfeld auf PayPal-Minicart verwenden, um einen Popup-Warenkorb als Overlay einzublenden, wenn Ihre Website-Besucher Artikel in ihren Warenkorb legen. Der Warenkorb wird anschlieend in der linken oberen Browserecke minimiert und die Artikel bleiben bis zu dem Checkout an der Kasse in dem Warenkorb.

230

E-Commerce-Objekte

Sie knnen ber das Dialogfeld ebenfalls die Position des Minicarts im Browserfenster festlegen und den im Minicart angezeigten Standardtext ndern oder lschen. 5. Nachdem Sie alle Einstellungen vorgenommen haben, klicken Sie auf Fertig stellen, um die Konfiguration abzuschlieen.

Nachdem Sie das Warenkorbsystem konfiguriert haben, mssen Sie ein E-Commerce-Objekt einfgen.

Einfgen von E-Commerce-Objekten (PayPal)


E-Commerce-Objekte lassen sich in WebPlus schnell und einfach mithilfe von Assistenten erstellen. Whlen Sie einfach die gewnschten Optionen in den verschiedenen Dialogfeldern aus, um ein E-Commerce-Objekt als Formular oder Link (d. h. als einfache Schaltflche oder als Hyperlink eines beliebigen Objekts) in eine Seite einzufgen. Je nach Eigenschaften der Waren, die Sie verkaufen mchten, und Ihrer bevorzugten Abwicklungsweise fr die Transaktion, bieten sich in einigen Fllen eher die Formulare und in anderen die Links als beste Methode an.

E-Commerce-Objekte

231

Wenn Sie z. B. eine bestimmte Menge Ziegelsteine verkaufen mchten, knnten Sie eine E-CommerceSchaltflche (als Jetzt kaufen-Link) erstellen. Bei dieser Option wird jedoch angenommen, dass die Menge, Gre, die Variation und die Farbe des Artikels festgelegt sind (sich von dem Kunden also nicht ndern lassen). Da der Link nur ber die Schaltflche erstellt wird, sind keine weiteren interaktiven Kaufoptionen (z. B. Farbe, Gre, Anzahl usw.) verfgbar, die hufig fr komplexere Transaktionen bentigt werden. Mit seinem Mausklick kann der Kufer also nur die festgelegte Standardmenge kaufen - nicht mehr und nicht weniger. In einigen Fllen mag dies gengen, in anderen ist eine solch eingeschrnkte Auswahl vllig unzureichend. Hufig werden daher E-Commerce-Formulare fr Online-Shops verwendet, da die Kufer hier selbst einige Optionen bestimmen knnen (Menge, Gre usw.). Wenn Sie sehr viele Artikel ber eine E-Commerce-Seite anbieten mchten, knnen Sie die Verkaufsartikel in einer SerifDatenbankdatei (*.SDB) speichern, die speziell fr den Einsatz mit E-Commerce-Lsungen strukturiert ist. Indem Sie Wiederholungsbereiche oder Wiederholungsformulare auf Ihren Seiten platzieren, lassen sich die Eintrge aus der Datenbank nach dem Zusammenfhren der Daten bequem anzeigen und als Artikel verkaufen. Nhere Informationen hierzu finden Sie unter dem Abschnitt Arbeiten mit der Datenbankzusammenfhrung fr ECommerce in der WebPlus-Hilfe. Das nach dem Einfgen eines E-Commerce-Objekts angezeigte Dialogfeld variiert je nach Dienstanbieter, den Sie fr Ihre Warenkorbfunktion ausgewhlt haben. Nhere Informationen hierzu finden Sie unter dem Abschnitt Konfigurieren des Warenkorb-Anbieters auf Seite 228.

232

E-Commerce-Objekte

Die nachfolgenden Schritte beziehen Sie auf das Einfgen von Objekten mit PayPal als Dienstanbieter fr Ihren Warenkorb. Einfgen von E-Commerce-Formularen und -Schaltflchen 1. Klicken Sie in der Kategorie E-Commerce der Studio-Registerkarte QuickBuild auf das Symbol ECommerce und klicken Sie dann auf einen Punkt der Seite, um das Objekt zu platzieren. Whlen Sie in dem Dialogfeld PayPal-Objekt hinzufgen die E-Mail-Adresse aus, an die Sie die Zahlungsinformationen schicken mchten. WebPlus geht davon aus, dass Sie die E-Mail-Adresse verwenden, die Sie whrend der Konfiguration des Warenkorbs festgelegt haben. Alternativ knnen Sie auch die Option Standardkonto der Website verwenden deaktivieren und eine andere E-Mail-Adresse angeben, um die Standardvorgabe zu umgehen. Whlen Sie den gewnschten Objekttyp aus dem Feld PayPal-Formular aus. Wenn Sie fr Ihre Artikel mehrere Kaufoptionen (z. B. Farbe oder Menge) zur Verfgung stellen mchten, klicken Sie auf die Option fr ein E-Commerce-Formular. Knnen Sie auf zustzliche Optionen verzichten, whlen Sie eine Linkvariante aus, um eine klickbare E-CommerceSchaltflche zu erstellen. Mit Wiederholungsbereichen und -formularen knnen Sie Artikel aus einer Datenbank einfgen und mssen sie nicht einzeln mit dem Dialogfeld Artikeldetails definieren (siehe Arbeiten mit der Datenbankzusammenfhrung fr E-Commerce in der Hilfe zu WebPlus). Klicken Sie auf die Schaltflche Weiter>.

2.

3.

E-Commerce-Objekte

233

(Optional) Wenn Sie kein Formular oder eine Schaltflche verwenden mchten, aktivieren Sie die letzte Option und fgen dann den entsprechenden Code in das nchste Dialogfeld ein. Sie knnen hierfr z. B. einen Code verwenden, der von der PayPal-Website erstellt wurde. Diese Codevarianten finden Sie nach der Anmeldung unter den Hndler-Tools. Klicken Sie auf Weiter>, um den Assistenten zu beenden und fgen Sie das HTML-Codefragment in Ihre Seite ein. 4. In dem nchsten Dialogfeld legen Sie die Schaltflche fest, die fr das Objekt verwendet werden soll. Sie knnen hierfr eine Textschaltflche verwenden (aktivieren Sie einfach die Option und geben Sie den Text ein) oder eine Bildschaltflche (aktivieren Sie die Option und legen Sie eine Vorlage in dem scrollbaren Fenster fest). Einige Bilder bieten auch automatische Rollovereffekte.

Klicken Sie auf die Schaltflche Weiter. 5. In dem Dialogfeld Artikeldetails legen Sie die ID und den Namen des Artikels sowie den Preis und die anfallende Steuer fest. Hierbei stehen Ihnen die folgenden Optionen zur Verfgung:

Artikelname: Die Bezeichnung des zum Verkauf angebotenen Artikels. Dieser Name wird auf dem Formular und im Warenkorb angezeigt.

234

E-Commerce-Objekte

Festlegen des Artikelnamens durch Kunde ermglichen: Wenn Sie diese Option aktivieren, wird der obige Artikelname gegen ein Textfeld ausgetauscht, in das der Kunde seine eigene Bezeichnung eingeben kann. Diese Mglichkeit eignet sich ebenfalls gut fr die Angabe von Spendendetails. Artikel-ID: Hier knnen Sie den Textstring eingeben, mit dem PayPal den Artikel verarbeiten soll. Whrung: Einstellen der Whrung, die fr die Transaktion verwendet werden soll. Preis: Der Preis des Artikels. Diese Option wird standardmig auf dem Bildschirm angezeigt. Festlegen der Summe durch Kunde ermglichen: Wenn Sie diese Option aktivieren, wird der obige Artikelpreis gegen ein Textfeld ausgetauscht, in das der Kunde seine eigene Summe eingeben kann. Dieses Feld eignet sich besonders gut fr Spendenformulare, in denen der Spender den Betrag selbst festlegen soll. Steuereinstellungen berschreiben: Wenn Sie den von dem Dienstanbieter in Ihrem Profil vordefinierten Steuersatz fr den Artikel ndern mchten, aktivieren Sie diese Option. Legen Sie anschlieend einen festen Steuersatz fr den Artikel fest (z. B. 0 % fr steuerbefreite Spenden).

E-Commerce-Objekte

235

Gewicht: Hier legen Sie ein Artikelgewicht fest, wenn Sie mit einer gewichtsbasierenden Versandmethode (nur fr USA) arbeiten, die in Ihrem PayPal-Profil festgelegt ist. Fr gewhnlich werden Pfund (lb) als Maeinheit verwendet, Sie knnen jedoch auch Kilogramm (kg) benutzen.

Nachdem Sie alle gewnschten Einstellungen vorgenommen haben, klicken sie auf Weiter>. Wenn Sie mit der Datenbankzusammenfhrung fr ECommerce arbeiten, whlen Sie in dem Dialogfeld Artikeldetails die E-Commerce-Datenbank aus, die Sie mit Ihrem Warenkorbsystem verwenden mchten. Denken Sie stets daran, die Whrung festzulegen, die Sie fr Ihre Transaktionen verwenden mchten. 6. Fr E-Commerce-Formulare werden zustzlich die zwei folgenden Dialogfelder angezeigt:

In dem Dialogfeld fr die Artikelbeschreibung knnen Sie optional ein Bild angeben (z. B. eine Vorschau auf das zum Verkauf angebotene Produkt) sowie eine kurze und lange Beschreibung, die in dem Formular angezeigt werden. Klicken Sie auf die Schaltflche Weiter>. In dem Dialogfeld fr die Artikeloptionen knnen Sie Eingabefelder, Kombinationsfelder, Auswahlsymbole und feste Namen festlegen (pro Formular sind bei PayPal bis zu 10 Optionen mglich; jedoch nur eine Option zur Preisnderung). Sie knnen diese Elemente entweder von Grund auf neu entwerfen oder auch zuvor gespeicherte Varianten einsetzen. Klicken Sie

236

E-Commerce-Objekte

auf die Schaltflche Weiter>. Diese Option ist fr Wiederholungsformulare nicht verfgbar. 7. Legen Sie in dem Dialogfeld Artikeldetails entweder eine Standardmenge fr den Artikel in dem entsprechenden Feld fest, oder aktivieren Sie das Kontrollkstchen, um dem Kufer die Eingabe der Artikelmenge an der Kasse zu ermglichen (nicht fr Wiederholungsformulare verfgbar). ODER Aktivieren Sie die zweite Option Eingabefeld hinzufgen, damit der Kunde die Artikelmenge direkt bei der Artikelauswahl festlegen kann. Fr Versand und Bearbeitung knnen Sie zustzliche Kosten festlegen. Wenn Sie diese Felder nicht ausfllen, wird das Standardprofil von PayPal verwendet. Diese Option ist fr Wiederholungsformulare nicht verfgbar. Klicken Sie auf die Schaltflche Weiter>. 8. In dem Dialogfeld Zustzliche Kundeninformationen knnen Sie festlegen, ob der Kunde nach einer Adresse gefragt werden soll, oder die Adresse selbst eingeben muss. Wenn Sie noch eine weitere Frage an den Kunden stellen mchten, geben Sie einfach den entsprechenden Text in das zweite Feld ein. Klicken Sie auf die Schaltflche Weiter>.

E-Commerce-Objekte

237

9.

In dem letzten Dialogfeld legen Sie die Zahlungseinstellungen fest:

Wenn Sie ber Ihre PayPal-Anmeldung bereits eine besondere Formatierung fr Ihre Checkout-Seite festgelegt haben, knnen Sie die entsprechende Bezeichnung in das oberste Feld eingeben. Legen Sie ber das Dropdownfeld eine Sprache fr die PayPal-Anmeldungsseite fest. ndern Sie den Text fr die Schaltflche Fortsetzen auf der Website Zahlung erfolgreich. Legen Sie, falls gewnscht, eine bestimmte Webadresse fr die Seiten Zahlung erfolgreich und Zahlungsvorgang abgebrochen fest. Geben Sie hierzu einfach die URL in das Dropdownfeld ein, oder whlen Sie einen bereits vorhandenen Eintrag aus.

10. (Nur fr E-Commerce-Formulare) Whlen Sie ein Formularlayout in dem Fenster aus. Mit den Kontrollkstchen knnen Sie genau festlegen, welche Informationen in dem Formular angezeigt werden. Sie knnen hier auch den Preis deaktivieren, bei der Arbeit mit Wiederholungsformularen das Artikelbild ein/ausblenden, lange oder kurze Beschreibungen verwenden, feste Optionen einstellen sowie ein DummyBearbeitungsfeld fr die Artikelmenge auswhlen. Alle Formulare lassen sich mit dem Kontrollkstchen Formular jetzt neu formatieren neu aufbauen.

238

E-Commerce-Objekte

11. Klicken Sie anschlieend auf die Schaltflche Fertig stellen. 12. Um das Formular oder eine Schaltflche einzufgen, platzieren Sie den Mauszeiger auf der gewnschten Seitenposition und drcken die linke Maustaste.

Bearbeiten von E-Commerce-Formularen und -Schaltflchen 1. 2. Fhren Sie einen Doppelklick auf das Formular oder die Schaltflche aus. Stellen Sie ber die verschiedenen Dialogfelder die gewnschten Optionen fr das E-Commerce-Objekt neu ein.

Umwandeln in Standardformulare

Klicken Sie mit der rechten Maustaste auf ein bestehendes E-Commerce-Formular und in dem Kontextmen auf In Formular umwandeln.

12

Text

240 Text

Text

241

Importieren von Texten aus einer Datei


Das Importieren von Texten aus einer bestehenden Datei ist eine der einfachsten Mglichkeiten, den Text fr eine Website zu erstellen. Alternativ knnen Sie den Text natrlich auch mit WritePlus neu verfassen. Wenn Sie Ihre Texte fr gewhnlich mit einer Textverarbeitung wie Microsoft Word erstellen, lassen sich die einzelnen Dateien schnell und unkompliziert in eine Website importieren. Neben dem WritePlus-Format *.stt knnen Sie auch eine Reihe anderer beliebter Dateiformate importieren. Fr die Formate von Microsoft Word, die unter einem beliebigen Windows-Betriebssystem erstellt wurden, mssen Sie Microsoft Word nicht erst auf Ihrem Computer installieren. Auf diese Weise knnen Sie Texte von anderen Autoren in WebPlus einsetzen, ohne auf das Programm angewiesen zu sein, mit dem die Dokumente erstellt wurden. WebPlus importiert den Text in einen ausgewhlten HTMLTextrahmen oder erstellt automatisch einen neuen HTMLTextrahmen, wenn Sie keinen ausgewhlt haben. Nhere Informationen finden Sie unter Einfgen von Textrahmen auf Seite 75. WebPlus bernimmt stets die Formatierung aus Texten, die in einer Textverarbeitung erstellt wurden. Wenn Sie mit Ihrer Textverarbeitung jedoch Texte speziell fr den Einsatz in WebPlus schreiben, sollten Sie diese als Nur Text speichern und die Formatierung spter in WebPlus festlegen. Tabellen lassen sich nicht importieren.

242 Text Importieren von Texten aus einer Datei 1. (Optional) Wenn Sie den Text in einen bestehenden leeren Rahmen einfgen mchten, whlen Sie den Rahmen zunchst aus. Um den Text in einen Rahmen einzufgen, in dem bereits Text vorhanden ist, klicken Sie auf die Position, an der Sie den Text einfgen mchten, oder whlen den Textbereich aus, der durch den Dateiinhalt ersetzt werden soll. Klicken Sie im Men Text > Einfgen auf den Eintrag Textdatei. Whlen Sie in dem Dialogfeld ffnen das Dateiformat der Textdatei aus und dann die gewnschte Textdatei. Um die Formatvorlagen der Textdatei zu bernehmen, aktivieren Sie die Option Format beibehalten. Wenn Sie die Formatierung nicht bentigen, entfernen Sie einfach das Hkchen aus dieser Option. WebPlus bernimmt in beiden Fllen die grundlegenden Zeichenformatierungen wie kursiv, fett oder unterstrichen sowie auch Absatzattribute, wie z. B. die Ausrichtung (links, zentriert, rechts, Blocksatz). Klicken Sie anschlieend auf die Schaltflche ffnen. Der Text wird nun in das zuvor ausgewhlte Textobjekt oder in einen neuen Textrahmen importiert. Bei Textrahmen entsteht eventuell ein Textberlauf. Um diesen berlauf zu beseitigen, fhren Sie die unter Anpassen von berlauftext auf Seite 81 beschriebenen Schritte aus.

2. 3. 4.

5. 6.

Text

243

Arbeiten mit knstlerischen Texten


Knstlerische Texte sind separate Textobjekte, die Sie direkt auf der Seite eingeben und beliebig platzieren knnen. Diese Texte sind besonders praktisch fr berschriften, Zitate oder Spezialtexte und lassen sich mit den Standardwerkzeugen fr Texte schnell und einfach formatieren.

Erstellen von knstlerischen Texten 1. 2. Whlen Sie das Objekt aus und klicken Sie in der Zeichnungsleiste auf das Symbol Knstlerischer Text. Klicken Sie auf einen beliebigen Punkt der Seite, um eine Einfgemarke fr den Text in einer Standardgre zu erstellen. Alternativ knnen Sie auch mit gedrckter Maustaste die Textgre wie in dieser Abbildung beliebig festlegen.

3.

Bevor Sie mit der Texteingabe beginnen, sollten Sie ber die Textkontextleiste oder das Men Text die wichtigsten Grundeinstellungen wie Schriftart, Formatvorlage usw. festlegen. Alternativ knnen Sie diese Optionen auch ber das Kontextmen festlegen. Klicken Sie hierzu mit der rechten Maustaste auf die Einfgemarke und dann auf die gewnschte Option des Untermens Textformat.

244 Text 4. Tippen Sie den Text direkt auf der Seite ein, um ein knstlerisches Textobjekt zu erstellen.

Nach der Erstellung lassen sich knstlerische Textobjekte genau wie Textrahmen beliebig auswhlen, verschieben, kopieren, vergrern und verkleinern oder lschen. Sie knnen sowohl einfarbige Varianten (Volltonfarben), Farbverlaufs- und BitmapFllungen als auch Transparenzen fr die Formatierung verwenden. Vergrern und Verkleinern von knstlerischen Textobjekten

Verschieben Sie die Eckziehpunkte mit gedrckter Maustaste, um die Objektgre zu verndern und die ursprnglichen Proportionen zu bernehmen.

Um die Objektgre frei zu verndern, halten Sie die Umschalttaste gedrckt, whrend Sie die Ziehpunkte verschieben.

Bearbeiten von knstlerischen Texten

Ziehen Sie den Cursor ber einen Textbereich, um eine blaue Auswahl zu erstellen.

Text

245

Alternativ knnen Sie auch ein Wort per Doppelklick auswhlen. Sie knnen jetzt entweder einen neuen Text eingeben oder die Buchstaben und Abstze mit den entsprechenden Optionen formatieren, die Rechtschreibung prfen, den Text in WritePlus bearbeiten usw.

Platzieren von Texten auf einem Pfad


Normale, geradlinige knstlerische Texte bieten zwar wesentlich mehr Optionen fr die kreative Textgestaltung als einfache Rahmentexte, die Wirkung dieser Texte lsst sich jedoch noch steigern, indem Sie die Wrter entlang eines geschwungenen Pfades verlaufen lassen.

Das resultierende Objekt verfgt dann ber alle Eigenschaften eines knstlerischen Textes und sein Pfad in Form einer Bzierkurve lsst sich mit dem Zeigerwerkzeug ebenso einfach bearbeiten wie jede andere gezeichnete Linie. Darber hinaus bieten diese Textvariationen noch eine Reihe einzigartiger Optionen, die in den folgenden Abschnitten nher erlutert werden.

246 Text Platzieren von Texten auf einem vordefinierten Kurvenpfad 1. 2. Erstellen Sie einen knstlerischen Text. Whlen Sie den Text aus und klicken Sie in der Textkontextleiste auf den Pfeil des Symbols Vordefinierte Textpfade und dann auf die gewnschte Pfadvariante.

Der Text verluft nun entlang der ausgewhlten Pfadlinie. Hinzufgen von knstlerischen Texten zu einer bestehenden Linie oder Form 1. Zeichnen Sie eine gerade, kurvenfrmige oder Freihandlinie oder eine Form (siehe auch Zeichnen und Bearbeiten von Linien und Zeichnen und Bearbeiten von Formen in der WebPlus-Hilfe). Whlen Sie das Objekt aus und klicken Sie in der Zeichnungsleiste auf das Symbol Knstlerischer Text. Bewegen Sie den Mauszeiger nahe an die Linie. Wenn der Mauszeiger eine kleine Kurve anzeigt, klicken Sie auf den Punkt, an dem Sie mit der Texteingabe beginnen mchten. Ihre Linie wird nun als gestrichelter Pfad mit einer Einfgemarke am Anfang angezeigt.

2. 3.

4.

Tippen Sie den Text an der Einfgemarke ein. Das Programm wandelt die Linie nun in einen Pfad um und platziert die einzelnen Wrter genau auf seiner Verlaufsbahn.

Text

247

Anpassen bestehender Texte an bestehende Linien oder Formen 1. 2. 3. Erstellen Sie einen knstlerischen Text. Zeichnen Sie eine Freihandlinie, Gerade, Kurve oder Form. Whlen Sie beide Objekte aus. Klicken Sie im Men Text auf Text an Pfad anpassen. Der Text verluft nun entlang der ausgewhlten Pfadlinie.

Entfernen von Textpfaden 1. 2. Whlen Sie das Textpfadobjekt aus. Klicken Sie in der Textkontextleiste auf den nach unten zeigenden Pfeil des Pfadsymbols und dann auf die Option Kein Pfad.

Der Pfad wird permanent gelscht, und der Text bleibt als geradliniger knstlerischer Text auf der Seite erhalten.

Bearbeiten von Texten auf einer Seite


Mit dem Zeigerwerkzeug lassen sich Rahmentexte, Tabellentexte und knstlerische Texte direkt auswhlen und bearbeiten. Auf den einzelnen Seiten knnen Sie die Attribute fr die Zeichen und Abstze von Texten verndern, Tabstopps und Einzge einstellen, Formatvorlagen festlegen und neue Texte eingeben. Alle Seitentexte lassen sich darber hinaus mit der Funktion Suchen und Ersetzen (siehe Seite 262) bearbeiten. Wenn Sie eine lngere Story bearbeiten oder noch einige zustzliche Optionen einstellen mchten, wechseln Sie einfach zu WritePlus (Text > Story bearbeiten...).

248 Text

Auswhlen und Eingeben von Texten


Die Auswahl von Rahmentexten, knstlerischen Texten und Tabellentext funktioniert wie bei den meisten modernen Textverarbeitungen. Um die Bearbeitung zu vereinfachen, wird ein ausgewhlter Bereich immer mit einer halbtransparenten, blauen Schattierung gekennzeichnet.

Um ein Wort, einen Absatz oder den gesamten Text auszuwhlen, fhren Sie einen Doppel-, Dreifach- oder Vierfachklick aus. Wenn Sie mehrere nicht aufeinander folgende Wrter markieren mchten, halten Sie die Strg-Taste gedrckt und ziehen den Mauszeiger mit gedrckter Maustaste ber die gewnschten Begriffe. Wenn Sie einen zusammenhngenden Textbereich auswhlen mssen, halten Sie die Umschalttaste gedrckt und markieren den Text dann durch Klicken und Ziehen. Bearbeiten von Texten auf einer Seite 1. Aktivieren Sie das Zeigerwerkzeug und whlen Sie den gewnschten Text durch Klicken oder Klicken und Ziehen aus. Das Programm platziert nun eine Einfgemarke an der Position, die Sie angeklickt haben (siehe unten). ODER Whlen Sie ein Wort, einen Absatz oder einen Textbereich aus.

Text

249

2.

Tippen Sie den neuen Text ein. Der Text wird nun entweder an der Einfgemarke platziert oder ersetzt den zuvor markierten Text.

Starten neuer Abstze

Drcken Sie die Eingabetaste.

Starten einer neuen Zeile (Einfgen eines manuellen Zeilenwechsels)

Drcken Sie die Tastenkombination Umschalttaste + Eingabetaste.

Umschalten zwischen den Modi Einfgen und berschreiben

Drcken Sie die Taste Einfg.

Kopieren, Einfgen und Verschieben von Texten


Sie knnen Texte wahlweise mit den Standardbefehlen kopieren und einfgen oder auch die Texte durch Klicken und Ziehen verndern. Wenn Sie keine Einfgemarke platzieren, wird der Text direkt in einen neuen Textrahmen eingesetzt.

250 Text

Einstellen von Texteigenschaften


WebPlus bietet Ihnen fr die Arbeit mit Rahmentexten, Tabellentexten und knstlerischen Texten eine breite Palette an Optionen und Werkzeugen, mit denen sich die Zeichen und Abstze Ihrer Texte komfortabel bearbeiten lassen. Einstellen der grundlegenden Textformatierung 1. 2. Whlen Sie den gewnschten Text aus. Stellen Sie in der Textkontextleiste Formatvorlage, Schriftart, Schriftgre, Schriftschnitt, Attribute und/oder die Ausrichtung und Stufe fr den Text ein.

Entfernen lokaler Formatierungen und Wiederherstellen der Standardeigenschaften 1. 2. Whlen Sie einen Textbereich mit lokaler Formatierung aus. Drcken Sie auf Ihrer Tastatur die Kombination Strg + Leertaste.

Text

251

Arbeiten mit verschiedenen Schriftoptionen


Eines der wirkungsvollsten Stilmittel bei der Arbeit mit Websites ist die Auswahl der Schriftart fr Ihre Rahmentexte, knstlerischen Texte und Tabellentexte. Durch die Auswahl bestimmter Schriftarten lsst sich die Aussage der Texte hufig noch verstrken, und Sie knnen Ihren Lesern gezielt unterschiedliche Eindrcke vermitteln (z. B. mit sehr klaren oder extrem verspielten Schriftarten).

Das Zuweisen von Schriftarten ist in WebPlus denkbar einfach. Whlen Sie einfach die gewnschte Schriftart in der Studio-Registerkarte Schriften, der Textkontextleiste oder ber den Menbefehl Text > Zeichen aus. Alternativ klicken Sie mit der rechten Maustaste auf einen Text und dann in dem Kontextmen auf Textformat > Zeichen. Die Studio-Registerkarte Schriften ist standardmig ausgeblendet. Sie knnen sie jedoch jederzeit ber die Option Registerkarte Schriften anzeigen der Studioleiste einblenden. Die Studio-Registerkarte Schriften wird dann standardmig am linken Rand des Arbeitsbereiches geffnet. Websichere Schriftarten sind speziell ausgewhlte Schriften. Mit diesen Schriften knnen Sie relativ sicher sein, dass die von Ihnen whrend des Website-Designs festgelegte Schriftdarstellung auch genau so in den Browsern Ihrer Website-Besucher angezeigt wird. Im Allgemeinen sollten Sie sich bei der Textformatierung auf die websicheren Schriftarten beschrnken, wenn Sie nicht absolut sicher sind, ob eine von Ihnen verwendete Schriftart auch auf den Computern Ihrer bevorzugten Zielgruppe installiert ist.

252 Text Zuweisen einer Schriftart

Whlen Sie den gewnschten Text aus und klicken Sie in der Registerkarte Schriften auf die gewnschte Schrift, um den Text entsprechend zu formatieren.

Arbeiten mit Textformatvorlagen


In WebPlus lassen sich Texte flexibel mit Textformatvorlagen (vordefiniert oder selbst erstellt) formatieren. Sie whlen diese Vorlagen einfach ber ihre Namen aus und knnen sie dann auf Rahmentexte, Tabellentexte und knstlerische Texte anwenden. Eine Textformatvorlage ist eine Zusammenstellung bestimmter Zeichen- und/oder Absatzattribute, die als Gruppe gespeichert wurden. Wenn Sie mit dieser Formatvorlage einen Text formatieren, werden alle Attribute der Gruppe in einem Arbeitsschritt fr die Zeichen und Abstze im Text eingestellt. Sie knnen z. B. verschiedene Absatzformatierungen fr Layoutelemente wie berschrift, Textkrper und Zitat oder Zeichenformatierungen fr bestimmte Aussagen wie Hervorhebung, Code, Querverweis definieren. Formatvorlagen lassen sich sowohl fr Zeichen als auch fr Abstze mit der Textkontextleiste oder der Studio-Registerkarte Textformatvorlagen festlegen. Mit der TextformatvorlagenPalette knnen Sie alle Zeichen- und Absatzformatvorlagen beliebig bearbeiten. Mit der Studio-Registerkarte Textformatvorlagen knnen Sie Vorlagen von Grund auf neu definieren sowie aus bestehenden Texteigenschaften erstellen und sogar in einem Schritt eine Textvorlage in der gesamten Website gegen eine andere austauschen. Jede Textformatvorlage lsst sich per Vorschau fr den aktuell auf der Seite ausgewhlten Absatz prfen. Nhere Informationen hierzu finden Sie in der Programmhilfe.

Text

253

Vorlagen fr Absatz- und Zeichenformatierungen


Eine Absatzformatvorlage ist ein vollstndiger Konstruktionsplan fr den Aufbau und die Darstellung eines ganzen Absatzes und enthlt alle Formatierungsattribute fr die Schriftart und den Absatzkrper. Jedem Absatz wird in WebPlus automatisch eine Absatzformatvorlage zugewiesen. Eine Zeichenformatvorlage enthlt nur Schrifteigenschaften (Name, Gre, Fett, Kursiv usw.) und wird nur auf Zeichen angewendet d. h., auf ausgewhlte Buchstaben oder Wrter und nicht auf einen ganzen Absatz.

Arbeiten mit benannten Formatvorlagen


Die fr den aktuell ausgewhlten Text verwendete Formatvorlage wird automatisch in der Studio-Registerkarte Textformatvorlagen oder dem Dropdownfeld Formatvorlagen der Textkontextleiste aufgefhrt. In diesem Feld zeigt das Programm entweder eine lokal verwendete Zeichenformatvorlage an oder die aktuell verwendete Absatzformatvorlage. Anwenden benannter Formatvorlagen 1. Um eine Absatzformatvorlage anzuwenden, klicken Sie mit dem Zeigerwerkzeug in den gewnschten Absatz. Mchten Sie eine Zeichenformatvorlage einsetzen, whlen Sie zunchst mit gedrckter Maustaste den zu formatierenden Textbereich aus. ffnen Sie die Studio-Registerkarte Textformatvorlagen und whlen Sie eine Vorlage in der Liste aus. ODER Klicken Sie in der Textkontextleiste auf den Pfeil des Dropdownfeldes Formatvorlagen und whlen Sie eine Vorlage aus.

2.

254 Text In der Studio-Registerkarte Textformatvorlagen wird automatisch die Absatz- oder Zeichenformatvorlage angezeigt, mit der Sie den ausgewhlten Text formatiert haben. Da Textbereiche sowohl mit Absatz- als auch mit Zeichenformatierungen formatiert werden knnen, zeigt das Feld Aktuelles Format der Registerkarte alle Formatierungsoptionen fr den aktuellen Text an. Bearbeiten bestehender Formatvorlagen 1. Gehen Sie in der Studio-Registerkarte Textformatvorlagen wie folgt vor:

Klicken Sie mit der rechten Maustaste auf den Namen einer Zeichen- oder Absatzformatvorlage, die Sie ndern mchten, und in ihrem Kontextmen auf <Name der Vorlage> bearbeiten. ODER Whlen Sie in der Studio-Registerkarte Textformatvorlagen eine Vorlage aus und klicken Sie auf die Schaltflche Palette. Klicken Sie in dem nun geffneten Dialogfeld auf die Schaltflche ndern.

2.

ndern Sie in dem Dialogfeld Textformatierung den Namen der Formatvorlage, die als Basis verwendete Vorlage sowie alle Attribute fr Zeichen, Abstze und Hyperlinks, Tabstopps, Aufzhlungszeichen und Initialen, die Sie fr die aktuelle Formatvorlage modifizieren mchten. Klicken Sie auf OK, um Ihre nderungen zu bernehmen, oder auf Abbrechen, um die neuen Einstellungen wieder zu verwerfen.

3.

Text

255

4.

Klicken Sie auf Anwenden, um den Text zu aktualisieren oder auf Schlieen, um lediglich die Formatvorlage zu speichern.

Alternativ klicken Sie im Men Text auf TextformatvorlagenPalette, um die Formatvorlagen und Standardeinstellungen fr Text (siehe WebPlus-Hilfe) zu ndern. Lschen von Textformatvorlagen 1. Klicken Sie mit der rechten Maustaste auf eine Textformatvorlage und in dem Kontextmen auf <Name der Vorlage> lschen. Klicken Sie in dem nun geffneten Dialogfeld auf Entfernen. Wenn Sie mehrere Formatvorlagen lschen mchten, aktivieren Sie die entsprechenden Kontrollkstchen neben den Vorlagennamen per Mausklick mit einem Hkchen. ber die entsprechenden Schaltflchen knnen Sie auch alle Formatvorlagen oder alle unbenutzten Formatvorlagen markieren und anschlieend entfernen. Kontrollieren Sie die Vorlagenliste genau, bevor Sie eine Vorlage lschen. Wenn Sie eine Vorlage fr das Lschen auswhlen, werden alle Vorlagen, die auf dieser Vorlage basieren, ebenfalls fr den Lschvorgang markiert.

2.

ndern hufig verwendeter Formatvorlagen


Fr einzelne Textbereiche lassen sich die Zeichen- oder Absatzformatvorlagen sehr unkompliziert ndern. In WebPlus knnen Sie auerdem eine Formatvorlage schnell und einfach durch eine andere ersetzen, indem Sie die entsprechenden Textstellen der alten Vorlage markieren und dann mit der Vorschau eine Alternativvorlage auswhlen. Hierdurch wird die

256 Text Formatvorlage in allen Textstellen der Abstze und Storys automatisch ersetzt. Auswhlen und ndern von Formatvorlagen in der gesamten Website 1. 2. Klicken Sie in der Registerkarte Textformatvorlagen mit der rechten Maustaste auf eine angezeigte Vorlage. Wenn die Formatvorlage bereits in der Website verwendet wird, enthlt das Kontextmen einen Eintrag Alle n Instanz(en) auswhlen, wobei n der Anzahl der Texte entspricht, die mit der Vorlage formatiert sind. Wird die Formatvorlage nirgendwo verwendet, ist die Option grau dargestellt und somit nicht verfgbar. Klicken Sie auf die Option, um alle mit der ausgewhlten Vorlage formatierten Texte auszuwhlen. 3. Bewegen Sie den Mauszeiger ber die anderen Vorlagen der Liste, um nach einem Ersatz zu suchen. Klicken Sie anschlieend auf die gewnschte Formatvorlage, um den ausgewhlten Text entsprechend zu formatieren.

Erstellen von Nummerierungen und Aufzhlungen


Fr jeden Textrahmen knnen Sie Listen und Abstze als Nummerierungen und Aufzhlungen formatieren. Aufzhlungen sind besonders hilfreich, wenn Sie einige Punkte ohne eine feste Sortierung auflisten mchten. Die Nummerierungen (mit Ziffern oder Buchstaben) eignen sich besonders gut fr die Erluterung von Arbeitsschritten, die in einer bestimmten Reihenfolge durchgefhrt werden mssen. Mit WebPlus knnen Sie die Listenformatierung sowohl fr normalen Text (als lokale

Text

257

Formatierung) verwenden als auch fr Textformatvorlagen einsetzen. Erstellen einer Aufzhlung oder nummerierten Liste 1. Whlen Sie einen oder mehrere Abstze aus. ODER Setzen Sie per Mausklick eine Einfgemarke in einen Absatztext. Klicken Sie in der Textkontextleiste auf Aufzhlung oder Nummerierung.

2.

Wenn Sie anschlieend in dem Absatz einen Zeilenumbruch einfgen, beginnt die neue Zeile automatisch mit dem entsprechenden Symbol oder der Nummer. Um die Aufzhlung oder Nummerierung zu beenden, geben Sie einfach zwei aufeinander folgende Zeilenumbrche ein, indem Sie zweimal die Eingabetaste drcken. Das Programm kehrt nun wieder zu der alten Absatzformatierung zurck. Aktualisieren einer Aufzhlung oder nummerierten Liste 1. Whlen Sie einen oder mehrere Abstze aus. ODER Setzen Sie per Mausklick eine Einfgemarke in einen Absatztext. Klicken Sie auf den Menpunkt Text > Nummerierung & Aufzhlungszeichen oder in dem per Rechtsklick geffneten Kontextmen auf Textformat > Nummerierung & Aufzhlungszeichen. Whlen Sie ein Aufzhlungszeichen oder eine Nummernformatierung aus der angezeigten Palette aus. Sie knnen hier ebenfalls die Einzugswerte fr den Text, die Farbe und andere Eigenschaften festlegen.

2.

3.

258 Text 4. Um die Nummerierung an der aktuellen Position des Cursors neu zu beginnen, aktivieren Sie die Option Nummerierung neu starten. Klicken Sie auf OK, um die Listenformatierung zu bernehmen.

5.

Entfernen der Formatierung fr eine Aufzhlung oder Nummerierung 1. 2. Whlen Sie den Absatz mit Listenformatierung aus. Klicken Sie auf das Symbol Textkontextleiste. oder der

Mit WebPlus knnen Sie Nummerierungen und Aufzhlungen ebenfalls fr Textformatvorlagen einstellen. Nhere Informationen hierzu finden Sie in der WebPlus-Hilfe.

Einfgen von Benutzerdetails


Mit dem Dialogfeld Benutzerdetails knnen Sie schnell und einfach Informationen eingeben, die Sie sehr oft verwenden oder die sich hufig ndern. Alle Felder fr diese Informationen mssen in Ihren Seiten bereits vorhanden sein wenn Sie die Aktualisierungsfunktion nutzen. Eventuell mssen Sie einzelne Felder von Hand einfgen (Text > Einfgen > Informationen > Benutzerdetails). Beachten Sie, dass viele Designvorlagen bereits Felder fr Benutzerdetails verwenden (z. B. in den Kontaktseiten). Mit dem Dialogfeld Benutzerdetails knnen Sie ebenfalls Website-spezifische und globale Variablen definieren, die nur in der aktuellen Website bzw. in allen Websites verwendet werden sollen. Nhere Informationen hierzu finden Sie unter dem Thema Einfgen von Variablen auf Seite 260.

Text

259

Hinzufgen und Bearbeiten von Benutzerdetails 1. 2. Klicken Sie in der Standardkontextleiste (angezeigt, wenn kein Objekt ausgewhlt ist) auf Benutzerdetails. Mchten Sie geschftliche Benutzerinformationen festlegen, tragen Sie diese in die Registerkarte Geschftliche Sets ein. Mchten Sie nur ein Set von Informationen verwenden, stellen Sie in der Dropdownliste Set auswhlen die Option Standard ein. Mit dieser Dropdownliste knnen Sie alle selbst angelegten Sets von geschftlichen Benutzerdetails auswhlen. Nhere Informationen hierzu finden Sie unter dem Abschnitt Festlegen geschftlicher Sets in der WebPlus-Hilfe. Mchten Sie Details fr eine private Homepage festlegen, klicken Sie auf die Registerkarte Privat. Diese Felder unterscheiden sich von denen der Registerkarte Geschftliche Sets und werden daher auch getrennt behandelt und gespeichert. Enthlt Ihre Website einen Kalender, wird in diesem Dialogfeld auch die Registerkarte Kalender angezeigt. Hier knnen Sie das Kalenderjahr auswhlen sowie private Termine und ffentliche Feiertage einfgen.

3.

Einfgen und Aktualisieren von Benutzerdetails


Sie knnen jederzeit ein oder mehrere Felder mit Benutzerdetails in Ihre Website einfgen. Einfgen von Feldern mit Benutzerdetails 1. Aktivieren Sie das Zeigerwerkzeug und klicken Sie auf die Textposition, an der Sie die Einfgemarke platzieren mchten.

260 Text 2. Klicken Sie im Men Text > Einfgen auf den Eintrag Informationen und in dem nun geffneten Untermen auf Benutzerdetails. Whlen Sie eines der Benutzerdetails aus und geben Sie ber Prfix oder Suffix die zustzlichen Informationen ein, die Sie mit den Benutzerdetails anzeigen mchten, wie z. B. Name:. Klicken Sie auf die Schaltflche OK.

3.

4.

In einer bestehenden Website lassen sich die Felder nach der Bearbeitung mit nur einem Mausklick aktualisieren. Aktualisieren der Felder

Klicken Sie auf den Menpunkt Extras > Benutzerdetails festlegen... und geben Sie neue Informationen in das Dialogfeld Benutzerdetails ein. Klicken Sie auf die Schaltflche Aktualisieren, um alle vernderten Felder in Ihrer Website auf den neuesten Stand zu bringen. Diese Felder bleiben mit den Benutzerdetails verknpft, bis Sie sie lschen oder in statischen Text umwandeln (siehe WebPlus-Hilfe)

Einfgen von Variablen


Wenn Sie hufig den gleichen Text an verschiedenen Stellen Ihrer Website verwenden, und diesen gegen einen anderen Text austauschen mchten, knnen Sie den Text als Variablen definieren. Die Arbeit mit Variablen funktioniert im Grunde wie die mit den Benutzerdetails (siehe Seite 258). Sie lassen sich wie die Felder fr Benutzerdetails einfgen und dann auch mit dem Dialogfeld Benutzerdetails aktualisieren.

Text

261

Einfgen, Bearbeiten und Lschen von Variablen 1. 2. Klicken Sie in der Standardkontextleiste (angezeigt, wenn kein Objekt ausgewhlt ist) auf Benutzerdetails. Wechseln Sie zu der Registerkarte Global oder Website, um die Variablen fr alle Websites bzw. nur fr die aktuell geffnete Website festzulegen. Klicken Sie in einer der Registerkarten auf die Schaltflche Hinzufgen. berschreiben Sie in der Variablenliste den standardmig festgelegten Namen der Spalte Variable mit einer einzigartigen Bezeichnung, an der Sie die Variable leicht identifizieren knnen.

3. 4.

5.

Klicken Sie in die nchste Spalte und geben Sie den Wert fr die Variable ein (d. h. den Text, der auf der Seite angezeigt werden soll).

6. 7.

Tragen Sie auf diese Weise alle gewnschten Variablen in die Registerkarte Website oder Global ein. Klicken Sie auf Aktualisieren.

Nachdem Sie die gewnschten Variablen definiert haben, knnen Sie die Variablen anstelle einfacher Texte als Felder auf Ihren Seiten platzieren Einfgen von Variablenfeldern 1. Klicken Sie in einen Text, um eine Einfgemarke zu platzieren, oder whlen Sie einen Textteil aus.

262 Text 2. Klicken Sie im Men Text auf den Eintrag Einfgen > Informationen und in dem nun geffneten Untermen auf Variable. Whlen Sie in dem nun geffneten Dialogfeld den Variablentyp (Global oder Website) der gewnschten Variable aus den Benutzerdetails aus. Klicken Sie auf den Eintrag einer Variable und legen Sie optional einen Text als Prfix oder Suffix fest, der zusammen mit der Variablen angezeigt werden soll. Klicken Sie auf die Schaltflche OK.

3.

4.

5.

Wenn Sie eine Variable ndern mchten, mssen Sie lediglich den Wert der Variable bearbeiten und dann aktualisieren. Aktualisieren der Variablen 1. 2. Klicken Sie in der Standardkontextleiste (angezeigt, wenn kein Objekt ausgewhlt ist) auf Benutzerdetails. Bearbeiten Sie den Wert fr eine bestehende Variable.

3.

Klicken Sie auf Aktualisieren.

Suchen und Ersetzen


ber Text > Suchen und Ersetzen knnen Sie Ihre Websites nicht nur nach bestimmten Wrtern oder Wortteilen durchsuchen, sondern auch eine Reihe von Zeichen- und Absatzattributen als Suchparameter verwenden, wie z. B. Schriftarten, Formatierungen, Ausrichtung, Aufzhlungszeichen und Nummerierungen, fehlende Schriftarten, hngende Initialen, integrierte Grafiken und vieles mehr! Nhere Informationen hierzu finden Sie in der WebPlus-Hilfe.

13

Quelldateien fr kreative Designs

264

Quelldateien fr kreative Designs

Quelldateien fr kreative Designs

265

Arbeiten mit Quelldateien


Quelldatei ist der Oberbegriff fr alle Objekte oder Seitenelemente, die Sie auf Ihren Dokumentseiten platzieren knnen, um deren Layout, Wirkung und Funktionalitt genau an Ihre Vorstellungen anzupassen. Die Quelldateien reichen von Grafiken, Bildern, Bildrahmen, Schaltflchen, Slidern und Panels sowie Hintergrnden zu komplexen Seiteninhalten und auch ganzen Seiten.

Fr die Arbeit mit den verschiedenen Quelldateien in WebPlus nutzen Sie die Studio-Registerkarte Quelldateien mit dem Quelldatei-Browser und dem Quelldatei-Manager (siehe Seite 268 und WebPlus-Hilfe). Mit dem Browser knnen Sie gezielt nach einzelnen Quelldateien suchen, und mit dem Manager knnen Sie Quelldatei-Pakete selbst zusammenstellen und verwalten. Die Designvorlagen der Themenlayouts enthalten bereits einige Quelldateien, die genau auf das jeweilige Design der Website abgestimmt sind. Wenn Sie Ihre Arbeit mit einem Themenlayout beginnen, wird die Studio-Registerkarte Quelldateien automatisch mit diesen Objekten gefllt!

266

Quelldateien fr kreative Designs

Arbeiten mit der Registerkarte Quelldateien


Die Studio-Registerkarte Quelldateien ist wie eine umfangreiche Ressourcenbibliothek, aus der Sie einfach die verschiedenen Layoutelemente fr Ihre Webseiten ausleihen. Die Quelldateien lassen sich in folgende Kategorien einteilen.

Eigene Designs: Hier werden die Quelldateien gespeichert, die Sie als Objekte von der Seite in die Registerkarte gezogen haben. Grafiken: Hier finden Sie die professionell entworfenen Cliparts aus Quelldatei-Paketen. Bilder: Hier werden Bilder von Ihrer Festplatte gespeichert sowie Bilder aus einem Quelldatei-Paket (nicht alle diese Pakete enthalten auch Bilder). Schaltflchen: Hier finden Sie eine breite Palette vordefinierter Schaltflchen aus den Quelldatei-Paketen. Slider/Panels: Hier werden die Slider (jeder Slider enthlt ein animiertes Set an Panels) sowie einzelne Panels aus den Quelldatei-Paketen gespeichert.

Quelldateien fr kreative Designs

267

Bildrahmen: Hier finden Sie die Bildrahmen aus Quelldatei-Paketen. Seiteninhalt: Hier finden Sie Seiteninhalte (die aus unterschiedlichen Seitenobjekten zusammengesetzt sind) aus den Quelldatei-Paketen. Zu dieser Kategorie gehren Navigationsleisten, Gruppen aus Textrahmen, Formen und Spaltenhintergrnde. Hintergrnde: Hier sind die Hintergrnde aus den Quelldatei-Paketen gespeichert. Seiten: Hier finden Sie komplette Seitenlayouts aus den Quelldatei-Paketen.

Mit dieser Registerkarte knnen Sie auch selbst Designs speichern entweder nur fr die aktuelle Website oder auch als globale Quelldateien, sodass sie auch fr andere Website-Projekte verfgbar sind. Hierzu stehen Ihnen die folgenden Mglichkeiten zur Verfgung:

Speichern Ihrer eigenen Designs in der Kategorie Eigene Designs, sodass sie global verfgbar sind. Speichern Ihrer eigenen Designs in einer anderen Kategorie der Registerkarte, sodass sie nur fr die aktuell verwendete Website verfgbar sind. Erstellen eigener Bildrahmen aus gezeichneten Objekten. Entwerfen eigener Seitenhintergrnde aus Bildern oder gefllten Seitenobjekten. Entwerfen eigener Seiteninhalte (kombiniert aus verschiedenen Quelldateien).

268

Quelldateien fr kreative Designs

Die zu Beginn noch leere Registerkarte lsst sich schnell und einfach ber den Quelldatei-Browser mit Layoutelementen Ihrer Wahl fllen. Der Quelldatei-Browser Mit dem Quelldatei-Browser knnen Sie die gewnschten Elemente gezielt nach Quelldatei-Kategorien und Quelldatei-Paketen (Paketdateien) sowie auch nach Markern (Tags) suchen. Whlen Sie einfach in der entsprechenden Anzeige die Elemente aus, die Sie in die Studio-Registerkarte Quelldateien aufnehmen mchten. Nhere Informationen hierzu finden Sie unter dem Themenabschnitt Arbeiten mit dem Quelldatei-Browser. Der Quelldatei-Manager Mit dem Quelldatei-Manager knnen Sie eigene Quelldatei-Pakete zusammenstellen. Kombinieren Sie hierzu einfach Elemente aus anderen Quelldatei-Paketen und/oder importieren Sie Bilder, Grafiken oder Hintergrnde. Sie knnen die Quelldateien mit Markern versehen und dann Ihr eigenes Quelldatei-Paket speichern oder exportieren. Nhere Informationen hierzu finden Sie in der WebPlus-Hilfe.

Arbeiten mit dem Quelldatei-Browser


Der Quelldatei-Browser bietet eine breite Palette professionell entworfener Designs, die Sie direkt fr Ihre Website einsetzen knnen. Diese Designs sind in den kategorisierten Quelldatei-Paketen (den so genannten Asset Packs) gespeichert, die zusammen mit WebPlus installiert wurden. Sie knnen diese Elemente bequem durchsuchen, bevor Sie die Quelldateien in Ihren Arbeitsbereich einfgen - wahlweise nach Kategorie oder nach Paketdatei. Sie knnen mit den Suchoptionen oben rechts in dem Dialogfeld ebenfalls Ihre Suche eingrenzen oder nach einem ganz bestimmten Element in den Paketdateien suchen.

Quelldateien fr kreative Designs

269

Durchsuchen von Quelldateien nach Kategorie 1. 2. Klicken Sie in der Studio-Registerkarte Quelldateien auf Durchsuchen. Whlen Sie in dem Quelldatei-Browser eine Kategorie in dem Abschnitt Kategorien aus. Die installierten Paketdateien werden nun in dem Hauptfeld angezeigt (z. B. fr Aktiv). Blttern Sie einfach durch die Liste der Pakete, um die Elemente in jedem Paket zu betrachten.

3.

Durchsuchen von Quelldateien nach Paketdatei 1. 2. Klicken Sie in der Studio-Registerkarte Quelldateien auf Durchsuchen. Whlen Sie auf der linken Seite des Quelldatei-Browsers unter Paketdateien eine Kategorie fr Paketdateien aus (z. B. Hintergrnde) oder den Namen einer Paketdatei. Um die Namen der Paketdateien einzublenden, mssen Sie eventuell neben dem Kategorienamen auf das Symbol klicken. Die Quelldatei-Pakete werden nun in dem Hauptfeld angezeigt. 3. Blttern Sie einfach durch die Liste, um die Elemente in jedem Paket zu betrachten. Die Anzeige der Pakete lsst sich beliebig erweitern und reduzieren, sodass Sie stets den berblick ber die Elemente behalten. (Optional) Um die Suche einzugrenzen, filtern Sie die Anzeige durch Eingabe eines Quelldatei-Namens in das Feld Suchen in der rechten oberen Ecke des Hauptfeldes.

4.

270

Quelldateien fr kreative Designs

Suchen nach Quelldateien


Die Suchfunktion filtert die Quelldateien nach vordefinierten und selbst angelegten Markern, die fr alle im Quelldatei-Browser angezeigten Quelldatei-Pakete festgelegt sind. Anwenden von Suchfiltern

Fr eine einfache Suche geben Sie einfach das gewnschte Wort oder den gewnschten Buchstaben in das Textfeld Suchen oben rechts in dem Dialogfeld ein. Diese Methode ist ideal fr alle Marker, Sie selbst angelegt haben.

Filtern von Quelldateien


Durch die Filterung knnen Sie festlegen, wie viele Quelldateien auf Ihrem Monitor angezeigt werden.

Um nach einer Kategorie und/oder Paketdatei zu filtern, whlen Sie eine Kategorie oder Paketdatei aus. Mchten Sie mehrere dieser Kriterien vorgeben, klicken Sie mit gedrckter Strg-Taste auf ihre Namen. Sie knnen ebenfalls nach einer Kombination aus Kategorie und Paketdateien suchen. Whlen Sie zum Beispiel die Kategorie Schaltflchen und dann ein Themenlayout aus, werden nur die Schaltflchen aus diesem Themenlayout angezeigt. Fr die Filterung nach SmartMarkern whlen Sie einen Marker unter SmartMarker aus (blttern Sie einfach durch das linke Feld). Mit den SmartMarkern knnen Sie die Quelldateien nach bestimmten Themen in einer hierarchisch und alphabetisch geordneten Struktur auflisten. Whlen Sie z. B. den Marker Tiere & Natur aus, werden alle Quelldateien aufgelistet, denen dieser Marker zugewiesen ist. Mchten Sie z. B. nur Elemente

Quelldateien fr kreative Designs

271

mit Tieren suchen, whlen Sie den Marker Tier dieser Markerkategorie.

Um nach einem bestimmten Marker zu filtern, whlen Sie dem Markernamen in der Liste Marker des Quelldatei-Browsers aus. Diese Liste finden sie unter der Liste SmartMarker. Um mehrere Marker auszuwhlen, klicken Sie mit gedrckter Strg-Taste auf ihre Namen.

Einfgen von Quelldateien in die Registerkarte Quelldateien


Einfgen einer bestimmten Quelldatei

Whlen Sie die Kategorie oder die Paketdatei in dem Quelldatei-Browser aus und klicken Sie einfach auf die Quelldatei. Die Miniaturansicht wird nun mit einem Hkchen markiert.

Einfgen aller Quelldateien

Klicken Sie in der rechten oberen Ecke der Miniaturgalerie des Quelldatei-Pakets auf Alles hinzufgen. Alle Miniaturen werden nun mit Hkchen markiert.

Nachdem Sie mit einer dieser Methoden die gewnschten Elemente ausgewhlt haben, sind die Quelldateien automatisch in der Studio-Registerkarte Quelldateien verfgbar, sobald Sie den Quelldatei-Browser schlieen.

272

Quelldateien fr kreative Designs

Alle in der Studio-Registerkarte Quelldateien gespeicherten Elemente, die Sie noch nicht auf einer Seite platziert haben, stehen Ihnen das nchste Mal automatisch zur Verfgung, wenn Sie die Website ffnen. Sie knnen Quelldateien auch fr alle WebsiteProjekte verfgbar schalten, indem Sie die Quelldateien in ihren Kategorien arretieren. Mchten Sie selbst entworfene Elemente fr alle Websites verfgbar schalten, ziehen Sie diese Designobjekte in die Kategorie Eigene Designs der Registerkarte.

Einfgen von Quelldateien in Ihre Seite


Platzieren einer Quelldatei auf Ihrer Seite

Klicken Sie auf die Miniaturansicht in der Designkategorie und ziehen Sie sie mit der Maus auf die gewnschte Seite.

Speichern von Designs


Mit WebPlus knnen Sie selbst Quelldateien anlegen, die sich dann immer wieder fr Ihre aktuelle Website oder auch fr andere Projekte einsetzen lassen. Diese Quelldateien lassen sich aus Objekten erstellen, die bereits auf Ihrer Seite platziert sind, und anschlieend bequem speichern. Unter anderem lassen sich die folgenden Designtypen speichern:

Grafiken (aus gezeichneten Vektorformen, Strichzeichnungen und knstlerischen sowie Rahmentexten) Bilder (aus korrigierten Fotos oder Bildausschnitten) Slider/Panels Schaltflchen

Quelldateien fr kreative Designs

273

Bildrahmen Ausgewhlte Layouts verschiedener Seitenobjekte Hintergrnde Seiten

Um ein Design zu speichern, kopieren Sie es durch Ziehen aus seiner Seite in die Studio-Registerkarte Quelldateien. Aus dieser Registerkarte lsst es sich dann jederzeit wieder auf andere Seiten ziehen. Hintergrnde und Seiten lassen sich jedoch nicht aus Ihrem Arbeitsbereich ziehen. Sie mssen diese Elemente direkt ber die Kategorien der Registerkarte importieren.

Speichern in der Kategorie Eigene Designs


Wenn Sie Ihre Designs global speichern mchten, sodass sie auch in Zukunft fr andere Website-Projekte verfgbar sind, legen Sie die Designs in der Kategorie Eigene Designs der StudioRegisterkarte Quelldateien ab.

Nach der Installation von WebPlus ist die Galerie Eigene Designs leer. Sie knnen jederzeit Ihre eigenen Objekte in dieser Kategorie speichern. Ziehen Sie ein Objekt in eine andere Kategorie, ist das gespeicherte Design nur fr die aktuelle Website verfgbar.

274

Quelldateien fr kreative Designs

Speichern Ihrer Designs in der Kategorie Eigene Designs

Ziehen Sie ein Objekt von der Seite und legen Sie es in der Kategorie Eigene Designs der Studio-Registerkarte Quelldateien ab. Sie mssen die Kategorie hierfr nicht extra erweitern, WebPlus bernimmt diesen Schritt automatisch fr Sie.

Speichern der Kategorie Eigene Designs Alle Designs, die Sie in der Kategorie Eigene Designs speichern, werden als Paketdatei namens Eigene Designs.wpack in dem Ordner Anwendungsdaten von Windows gespeichert, sobald Sie WebPlus beenden.

Speichern von Seiten


Alle Seiten Ihrer Website lassen sich in der Kategorie Seiten der Studio-Registerkarte Quelldateien speichern. Speichern einer Seite 1. Whlen Sie die Kategorie Seiten der StudioRegisterkarte Quelldateien aus und klicken Sie auf Hinzufgen. Whlen Sie in dem Dialogfeld eine Seite oder MasterSeite Ihrer Website aus.

2.

Quelldateien fr kreative Designs

275

3.

Klicken Sie auf die Schaltflche OK. Die Seite wird nun in der Kategorie Seiten angezeigt.

Speichern von Hintergrnden


Genau wie Seiten knnen Sie auch selbst definierte Hintergrnde aus Ihrer Website in der Studio-Registerkarte Quelldateien speichern. Diese Elemente werden dann in der Kategorie Hintergrnde abgelegt. Speichern eines Hintergrunds 1. Whlen Sie die Kategorie Hintergrnde der StudioRegisterkarte Quelldateien aus und klicken Sie auf Hinzufgen. Whlen Sie in dem Dialogfeld den Hintergrund fr eine bestimmte Seite oder die gesamte Website aus. Klicken Sie auf die Schaltflche OK. Der Hintergrund wird nun in der Kategorie Hintergrnde angezeigt.

2. 3.

Speichern in anderen Kategorien


Designs lassen sich ebenfalls in andere Kategorien einfgen, sind dann jedoch nur in der aktuellen Website verfgbar (sofern sie nicht wie auf Seite 276 beschrieben arretiert sind). Fr gewhnlich knnen Sie Vektorformen, Strichzeichnungen, knstlerische Texte und Textrahmen in der Kategorie Grafiken speichern, sofern Sie diese Elemente nicht ber die Kategorie Eigene Designs fr alle Projekte zugnglich machen mchten. Wenn Sie Ihre Website schlieen, mssen alle selbst angelegten Designs gespeichert werden, die Sie fr dieses Projekt in der Registerkarte eingelagert haben. Sie werden automatisch aufgefordert, das Design in einem benutzerdefinierten Quelldatei-Paket fr speziell diese Website zu speichern.

276

Quelldateien fr kreative Designs

Speichern eines Designs in anderen Kategorien

Ziehen Sie das Objekt von der Seite und legen Sie es in einer anderen Kategorie ab.

Arretieren von Kategorien und einzelnen Quelldateien


Sie knnen einzelne Quelldateien und ganze Kategorien der Studio-Registerkarte Quelldateien fr alle Websites zugnglich machen (d. h. sie global verfgbar schalten), indem Sie die Objekte/Kategorien arretieren. Quelldateien lassen sich nur arretieren, wenn Sie diese Elemente als Teil eines Quelldatei-Pakets gespeichert haben. Wenn Sie versuchen, eine ungespeicherte Quelldatei zu arretieren, wird automatisch eine Speicherungsaufforderung fr das Quelldatei-Paket eingeblendet. Arretieren und Freischalten von Quelldateien

Um alle Quelldateien einer Kategorie zu arretieren, klicken Sie auf die Option Alles arretieren des Kategorietitels. ODER Um einzelne Quelldateien zu arretieren, klicken Sie auf das Symbol der entsprechenden Miniaturen.

Um alle Quelldateien einer Kategorie freizugeben, klicken Sie auf die Option Nichts arretieren des Kategorietitels. ODER Um einzelne Quelldateien freizugeben, klicken Sie auf das Symbol der entsprechenden Miniaturen.

14

Vorschau und Publizieren

278

Vorschau und Publizieren

Vorschau und Publizieren

279

Arbeiten mit der Website-Prfung


Die Website-Prfung durchsucht Ihre Website nach hufig auftretenden Layoutproblemen, die bei der Seitennavigation, Textformatierung, Formularen, E-Commerce-Objekten und anderen Elementen auftreten, und zeigt diese Probleme anschlieend an. Die Funktion sucht nach einer breiten Palette von Problemen. Zu den typischen Fehlerquellen gehren:

Doppelt vorhandene HTML-IDs fr Objekte. Ungltige Anker oder Hyperlinks. Webformulare: Die Schaltflche Absenden fehlt oder mehrere Formularobjekte tragen dieselben Namen. Fehlermeldungen fr die W3C-Gltigkeitsprfung. Groe JPG-Bilder, die als PNG-Dateien exportiert werden. berlappende, gedrehte oder zugeschnittene Texte. Fr Webseiten ungeeignete Schriften (keine websicheren Schriften). Wenn Sie die komplette Liste der Prfungen einsehen mchten, klicken Sie in dem Dialogfeld der WebsitePrfung auf Filter Website-Probleme.

Ermittelte Probleme werden von der Website-Prfung automatisch in einer Liste angezeigt (einschlielich Optionen zur Korrektur der Probleme). WebPlus kann wahlweise versuchen, alle aufgelisteten Probleme zu beheben, oder Sie knnen die Probleme auch manuell bearbeiten. Je nach Problem werden primre und eventuell auch sekundre Korrekturmglichkeiten angeboten. Die primre Korrektur ist die

280

Vorschau und Publizieren

von WebPlus bevorzugte erste Wahl fr das jeweilige Layoutproblem. Wurde einem Text z. B. eine Schrift zugeordnet, die nicht als websicher eingestuft ist, knnen Sie fr den Text einfach eine websichere Schrift einstellen. Wenn Sie bestimmte Problemtypen ignorieren oder sich erst spter mit den Lsungsmglichkeiten befassen mchten, knnen Sie die Problemanzeige filtern. Nhere Informationen hierzu finden Sie in der WebPlus-Hilfe. Prfen auf Website-Probleme 1. Klicken Sie in der Standardkontextleiste auf die Schaltflche Website-Manager und dann auf die Option Website-Prfung. Der Website-Manager wird nun mit aktivierter Kategorie Website-Prfung geffnet. 2. (Optional) Legen Sie mit dem Dropdownfeld Seite fest, ob Sie die Probleme fr alle Seiten oder bestimmte Seiten auflisten mchten. Legen Sie in dem Feld Typ fest, ob sie Alle WebsiteProbleme oder nur bestimmte Problemtypen anzeigen lassen mchten:

3.


4.

Website-Navigation Textformatierung Formulare und E-Commerce

Um die Website nach Problemen zu durchsuchen, klicken Sie auf die Schaltflche Start. Die Probleme werden dann automatisch in dem Listenfeld aufgefhrt.

Vorschau und Publizieren

281

Standardmig werden Ressourcen nach der Spalte fr die Seiten geordnet. Sie knnen die Sortierung der Liste jedoch beliebig verndern, indem Sie auf die Kopfzelle einer Spalte klicken. Um die primre oder sekundre Korrekturlsung fr ein Problem in dem unteren Textfeld einzublenden, klicken Sie auf den Eintrag des Problems. Automatische Korrektur mehrerer Probleme 1. 2. Um alle Probleme auszuwhlen, aktivieren Sie die Option Seite in der linken oberen Ecke der Problemliste. Klicken Sie in der rechten unteren Ecke der Liste auf die Zelle Alle korrigieren. Am Anfang der untersten Zeile wird die Anzahl der Probleme angezeigt (z. B. 6/6 Ausgewhlt). Klicken Sie in dem Dialogfeld Mehrere Korrekturen anwenden auf die gewnschte Schaltflche, um eine primre Korrektur (empfohlen) oder eine sekundre Korrektur einzusetzen. Nachdem Sie auf eine der Schaltflchen geklickt haben, werden alle Probleme beseitigt und aus der Liste entfernt, die sich mit dieser Methode beheben lassen. Fr einige Korrekturen mssen Sie eventuell zustzliche Optionen ber ein separates Dialogfeld festlegen. Um den Website-Manager zu beenden, klicken Sie auf Schlieen. Wenn Sie ein Problem korrigieren, wird in der Statusspalte ein grnes Hkchen fr den entsprechenden Eintrag eingefgt.

3.

4.

282

Vorschau und Publizieren

Manuelle Problemkorrektur 1. 2. Fhren Sie einen Doppelklick auf den Eintrag eines Problems in der Spalte Korrektur aus. Fhren Sie die in dem Dialogfeld vorgeschlagenen Schritte aus. Mit der Schaltflche Anzeigen knnen Sie direkt zu dem problematischen Objekt (z. B. einem Formular) auf der betroffenen Webseite umschalten. Ist die Schaltflche Bearbeiten verfgbar, knnen Sie mit einem Klick das Dialogfeld ffnen, das fr die Korrektur des Problems bentigt wird. Ist diese Schaltflche grau angezeigt und somit nicht verfgbar, folgen Sie einfach den Vorschlgen zur Problembehebung. Klicken Sie als Letztes auf die Schaltflche Schlieen. Wenn Sie zeitweilig (oder permanent) bestimmte Probleme bergehen mchten, klicken Sie auf Probleme dieses Typs ignorieren. Nhere Informationen hierzu finden Sie unter Filtern von Website-Problemen in der WebPlus-Hilfe.

3.

4.

ffnen einer Website-Vorschau


Bevor Sie eine Website im World Wide Web verffentlichen, sollten Sie die Seiten als Vorschau in Ihrem eigenen Webbrowser ffnen. Auf diese Weise knnen Sie genau feststellen, ob wirklich alle Seiten so angezeigt werden, wie Sie es whrend der Designphase der Website geplant hatten. Fr die Vorschau einzelner Webseiten oder einer ganzen Website knnen Sie entweder ein internes Fenster von WebPlus verwenden, das auf dem Internet Explorer basiert, oder auch einen anderen auf Ihrem System installierten Browser einsetzen.

Vorschau und Publizieren

283

Prfen Ihrer Website per Vorschau 1. Klicken Sie in der Standardsymbolleiste auf den nach unten zeigenden Pfeil des Symbols WebsiteVorschau. Whlen Sie eine der folgenden Optionen aus dem Men aus:

2.

Vorschau im Fenster (Internet Explorer) (Tastaturkrzel: Alt+P): Dieser Befehl ffnet die Website in einem neuen internen WebPlus-Fenster, sodass Sie ber die Reiter der Fensterregisterkarten bequem zwischen Vorschau- und Bearbeitungsfenster umschalten knnen. Um einen externen Browser zu verwenden, klicken Sie auf einen der Eintrge Seitenvorschau im... oder Website-Vorschau im.... Der genaue Name dieser Menpunkte richtet sich nach den Browserversionen, die auf Ihrem System installiert sind. Eine Mglichkeit wre z. B. Seitenvorschau im Internet Explorer. Die Webseite oder Website wird anschlieend in einen temporren Ordner exportiert und dann in dem ausgewhlten Browser geffnet.

Mit WebPlus knnen Sie die geschtzte Downloadzeit fr jede Seite Ihrer Website prfen. Zustzlich finden Sie hier auch Informationen ber die Anzahl der Dateien auf jeder einzelnen Seite sowie die Gesamtgre der Dateien. All diese Optionen finden Sie in dem Symbolmen Website-Vorschau der Standardsymbolleiste.

284

Vorschau und Publizieren

Publizieren im Web
Wenn Sie Ihre Website im World Wide Web publizieren mchten, mssen Sie die fertige WebPlus-Website an einen Server bertragen, der Ihnen von einem Internetdienstanbieter fr das so genannte Hosting der Seiten zur Verfgung gestellt wird. Sie knnen wahlweise alle Webseiten publizieren oder nur die Seiten, die seit dem letzten Publikationsvorgang aktualisiert wurden. Vor dem Publizieren sollten Sie Ihre Dateien mit der Website-Prfung (Extras > Website-Manager > Website-Prfung) auf mgliche Probleme untersuchen. Nhere Informationen hierzu finden Sie in der WebPlus-Hilfe. Publizieren Ihrer Website im World Wide Web

Klicken Sie in der Standardsymbolleiste auf den Pfeil des Symbols Website publizieren und in dem Men auf Im Web publizieren.

Wenn Sie mindestens ein FTP-Konto eingerichtet haben, wird das Dialogfeld Im Web publizieren geffnet, und das Programm trgt den Namen sowie die Einstellungen des zuletzt verwendeten Kontos automatisch in die entsprechenden Felder ein. Nhere Informationen hierzu finden Sie unter "bertragen Ihrer Website per Upload" auf Seite 287. Falls Sie noch keine Kontoinformationen fr eine FTP-Verbindung festgelegt haben, mssen Sie zunchst mindestens ein FTP-Konto konfigurieren. Diese Konfiguration wird dann automatisch gespeichert und standardmig fr alle zuknftigen Publikationsvorgnge verwendet.

Vorschau und Publizieren

285

Festlegen der FTP-Kontoinformationen 1. 2. 3. Klicken Sie auf die Schaltflche Konten, um das Dialogfeld Upload an Server zu ffnen. Klicken Sie auf Hinzufgen. Gehen Sie in dem Dialogfeld Kontodetails wie folgt vor:

Kontoname: Geben Sie einfach eine beliebige Bezeichnung Ihrer Wahl ein. Diese Bezeichnung dient nur der leichteren Identifikation des Kontos in WebPlus, falls Sie mit mehreren Konten arbeiten. FTP-Adresse: Diese URL fr Ihren Webspace erhalten Sie von dem Dienstanbieter, der das Hosting Ihrer Website bernimmt. Portnummer: Falls Sie von Ihrem Dienstanbieter keine andere Vorgabe erhalten haben, knnen Sie die Portnummer auf 21 belassen. Wenn Ihr Dienstanbieter keinen bestimmten Ordner vorgeschrieben hat, oder Sie nicht unbedingt alle Dateien in ein spezielles Verzeichnis kopieren mssen, lassen Sie das Feld Ordner einfach leer. Anschlieend geben Sie den Benutzernamen und das Kennwort ein, die Sie von Ihrem Dienstanbieter erhalten haben. Diese beiden Angaben entsprechen hchstwahrscheinlich den Anmeldungsdaten (Login) fr Ihre E-Mail-Adresse. Geben Sie das Kennwort exakt so ein, wie Sie es von Ihrem Dienstanbieter erhalten haben. Wenn Sie einen Fehler bei der Gro-/Kleinschreibung machen, verweigert der Host-Server Ihnen mglicherweise den Zutritt.

286

Vorschau und Publizieren

Wenn Sie das Kennwort nicht bei jeder Dateibertragung neu eingeben mchten, aktivieren Sie einfach die Option Kennwort speichern. Das Kennwort wird nun auf Ihrem Computer gespeichert. Passiver Modus: Sofern keine FTPVerbindungsprobleme auftreten, lassen sie diese Option aktiviert. Sollten Sie sicher sein, dass Ihre FTP-Details korrekt sind, lassen sich Ihre Verbindungsprobleme vielleicht durch eine Deaktivierung der Option Passiver Modus beseitigen. ISPs und WebhostingDienstleister arbeiten sowohl mit aktiven als auch passiven FTP-Modi. Eventuell kann Ihnen der Support des Unternehmens hierbei helfen.

Website-URL: Die URL-Adresse Ihrer Website. Nach dem FTP-Upload knnen Sie die Website mithilfe eines Dialogfelds und dieser URL anzeigen. Klicken Sie auf OK, um das Dialogfeld Kontodetails zu schlieen.

4.

Klicken Sie nun in dem Dialogfeld fr den Server-Upload auf Test, um Ihr FTP-Konto zu testen. Verluft der Test erfolgreich, wird ein Dialogfeld mit einem Hinweis zu der erstellten Verbindung angezeigt.

Vorschau und Publizieren

287

5.

Fr die Speicherung der FTP-Kontodetails stehen Ihnen zwei Optionen zur Verfgung:

auf Ihrem PC (die Kontodetails werden in WebPlus gespeichert und auch dann nicht gelscht, wenn Sie einen Programmstart mit gedrckter Strg-Taste durchfhren). ODER in der aktuellen Website (nhere Informationen hierzu finden Sie unter dem Thema Arbeiten mit FTP-Kontoinformationen in der WebPlus-Hilfe).

6.

Klicken Sie auf Konto aktualisieren, um zu dem Dialogfeld Im Web publizieren zurckzukehren.

bertragen Ihrer Website per Upload 1. 2. Whlen Sie in dem Dialogfeld Im Web publizieren das gewnschte FTP-Konto ber das Dropdownfeld aus. Arbeitet Ihre Website mit einer Datenbank, ist die Option Vor dem Publizieren zusammenfhren aktiviert. Wenn Sie eventuelle nderungen nicht bernehmen mchten, deaktivieren Sie einfach die Option. Diese Option wird grau dargestellt und ist somit nicht verfgbar, wenn das Programm keine Datenbank oder nderungen erkennt. Nhere Informationen zu Datenbanken finden Sie unter Arbeiten mit der Datenbankzusammenfhrung in der WebPlus-Hilfe. Wenn Sie den Publikationsvorgang genau berwachen mchten, deaktivieren Sie die Option Unbeaufsichtigter Upload. Hierdurch knnen Sie die nderungen prfen, die an Ihrer publizierten Website durchgefhrt werden mssen, bevor das Programm die nderungen umsetzt. Sollte ein Problem auftreten, lsst sich der Upload einfach abbrechen. Nhere Informationen hierzu finden

3.

288

Vorschau und Publizieren

Sie unter dem Abschnitt Der automatische Ablauf in der WebPlus-Hilfe. 4. Aktivieren Sie die Option Alle Seiten publizieren, oder klicken Sie auf die einzelnen Kstchen, um bestimmte Seiten fr die Publikation zu markieren. Wenn Sie eine Sicherheitskopie des WebPlus-Projekts anlegen mchten, aktivieren Sie die Option Backup des Dokuments auf Remote-Server erstellen. Falls Sie das Projekt noch nicht gespeichert haben, wird nun eine Speicheraufforderung eingeblendet. Klicken Sie auf die Schaltflche OK. Nachdem WebPlus eine Internetverbindung gefunden hat, geschieht Folgendes: 7. Wenn Sie das erste Mal eine Website bertragen, werden die ausgewhlten Dateien direkt an den Webserver bermittelt. ODER Wenn Sie die Dateien an eine bestehende Website bermitteln, wird ein Dialogfeld fr den Datei-Upload mit den verschiedenen Aktionen zu den Dateien angezeigt. Hinzufgen steht fr neu hinzugefgte Dateien, Ersetzen fr Dateien, die auf dem Webserver ersetzt werden und Nicht ndern fr Dateien, die nicht aktualisiert werden. Wenn Sie unbenutzte Grafiken und Seiten direkt von WebPlus entfernen lassen mchten, aktivieren Sie die Option fr das Lschen nicht verwendeter RemoteDateien.

5.

6.

Vorschau und Publizieren

289

Legen Sie in dem Dialogfeld fest, ob Sie einen Inkrementellen Upload oder einen Vollstndigen Upload durchfhren mchten. Mit dem inkrementellen Update werden nur die Dateien bertragen, die Sie seit dem letzten Upload verndert haben. Bei inkrementellen Updates knnen Sie WebPlus anweisen, fehlende Dateien zu suchen, indem Sie die entsprechende Option aktivieren. Standardmig ist diese Option jedoch deaktiviert, da diese Suche sehr zeitintensiv ist und den Upload eventuell deutlich in die Lnge zieht. Nach erfolgreicher bertragung aller Dateien zeigt das Programm eine entsprechende Hinweismeldung an. Klicken Sie als Letztes auf die Schaltflche Schlieen. 8. Whlen Sie in dem Dialogfeld fr die WebsitePublikation den Browser aus, in dem Sie die LiveWebsite anzeigen mchten und klicken Sie auf Diese URL anzeigen. Sie knnen Ihre Website nun live ber einen Webbrowser testen.

Wenn Sie Dateien umbenennen oder lschen und dann eine oder mehrere Seiten neu im Web publizieren, werden die alten Dateien nicht automatisch gelscht. Sie mssen diese Dateien manuell ber den Befehl Datei > Website publizieren > Website warten entfernen. Wenn Sie jedoch die gesamte Website automatisch neu im Web publizieren lassen (mit dem automatischen Ablauf), knnen Sie ber die Option Nicht verwendete Dateien lschen direkt die unbenutzten Dateien entfernen.

290

Vorschau und Publizieren

Anzeigen der publizierten Website


Nachdem Sie die Webseiten publiziert haben, knnen Sie Ihr Werk mit der Option Website online prfen im Men Website-Vorschau der Standardsymbolleiste prfen. Die Website wird nun in ihrem zuletzt aktualisierten Status in Ihrem Standardwebbrowser angezeigt. Wenn Sie diese Funktion das erste Mal benutzen, wird ein Dialogfeld geffnet, in das Sie die Standardadresse (URL) der Website eingeben mssen. Sie knnen diese Einstellung auch noch spter festlegen (Bearbeiten > Website-Eigenschaften > Publizieren). Denken Sie stets daran, dass keine der nderungen, die Sie seit dem letzten Publikationsvorgang durchgefhrt haben, in der Browseranzeige sichtbar ist. Wenn Sie die noch nicht publizierten Seiten prfen mchten, klicken Sie auf das Symbol WebsiteVorschau. Nhere Informationen hierzu finden Sie unter ffnen einer Website-Vorschau auf Seite 282.

Einrichten Ihres Webhostings


Serif bietet verschiedene Webhosting-Pakete zu gnstigen Konditionen an, die auf die unterschiedlichen Bedrfnisse unserer Kunden zugeschnitten sind. Nhere Informationen finden Sie unter go.serif.com/hosting. Beachten Sie bitte, dass dieses Angebot momentan nur in englischer Sprache verfgbar ist. Alternativ hat Ihnen Ihr Internet-Service, bei dem Sie Ihre E-MailAdresse angelegt haben, vielleicht schon einigen Speicherplatz fr eine Website oder andere Dateien zur Verfgung gestellt.

15

Website-Validerung und -Analyse

292

Website-Validerung und -Analyse

Website-Validerung und -Analyse

293

Validieren Ihrer Website


Wenn Sie mit den verschiedenen interaktiven Webdiensten von Google oder Bing arbeiten mchten, mssen Sie Ihre Website validieren lassen. Dieser Schritt ist notwendig, damit Sie als Besitzer der Website identifiziert werden knnen. Auf diese Weise sind vertrauliche Informationen nur fr Sie und Google bzw. Bing zugnglich.

Die Google-Validierung
ber Google knnen Sie verschiedene Webmaster Tools verwenden, wie z. B. AdSense und Analytics, mit denen sich Werbeflchen einblenden und die Nutzung Ihrer Webseiten analysieren lassen. Bevor Sie diese Features nutzen knnen, mssen Sie jedoch Ihre Website bei Google validieren. WebPlus bietet Ihnen zwei Mglichkeiten fr die Validierung: den HTML-Download (empfohlen) oder das Kopieren und Einfgen von Meta-Tags. Validieren Ihrer Website bei Google 1. Klicken Sie auf den Menpunkt Bearbeiten > WebsiteEigenschaften und dann auf die Kategorie Suchmaschine > Google-Validierung. Klicken Sie auf die Option Website fr Google Webmaster Tools aufrufen. Nachdem die Google-Seite in Ihrem Browser geffnet ist, folgen Sie einfach online den Anweisungen fr die Verifizierung und laden entweder eine dort erstellte HTML-Verifikationsdatei herunter oder kopieren den Meta-Tag (z. B. <meta name=google-site-verification content=NFGHRVfcdfDFBFVC).

2. 3.

294 4.

Website-Validerung und -Analyse

In WebPlus aktivieren Sie in dem immer noch geffneten Dialogfeld die Option Diese Website mit Google Webmaster Tools validieren. Aktivieren Sie je nach der zuvor ausgewhlten Validierungsmethode eine der Optionen Mit einer Datei... oder Mit einem Meta-Tag.... Im ersten Fall whlen Sie die heruntergeladene HTML-Datei aus und klicken auf ffnen. Im zweiten Fall klicken Sie auf die Schaltflche Einfgen, um den Meta-Tag einzufgen. Klicken Sie auf die Schaltflche OK. Publizieren Sie Ihre Website. Klicken Sie auf der in Ihrem Browser geffneten GoogleSeite auf die Schaltflche fr die Verifizierung, um die Verifizierung der Seite durch Google zu besttigen.

5.

6. 7. 8.

Die Bing-Validierung
Bing (ehemals Live Search und MSN Search) ist eine Suchmaschine fr das World Wide Web, die von Microsoft entwickelt wurde und auch Webdienste fr Webmaster bietet. Genau wie bei Google mssen Sie Ihre WebPlus-Website validieren, um diese Dienste nutzen zu knnen. Validieren Ihrer Website bei Bing 1. Klicken Sie auf den Menpunkt Bearbeiten > WebsiteEigenschaften und dann auf die Kategorie Suchmaschine > Bing-Validierung. Folgen Sie den Anweisungen fr die Google-Validierung. Anstelle einer HTML-Datei laden Sie bei dieser Validierung eine XML-Datei herunter.

2.

Website-Validerung und -Analyse

295

Analysieren der Webstatistik


Mit der Statistik fr Ihre Website knnen Sie die Nutzung der verschiedenen Seiten berwachen und feststellen, ob Ihre Website die in sie gesetzten Erwartungen erfllt. Anhand der vielen verschiedenen Daten knnen Sie dann einfacher entscheiden, wo und wie sich Ihre Website noch verbessern lsst. In WebPlus werden die Informationen mit Google Analytics zusammengetragen. Sie mssen zuerst die Webanalyse in WebPlus aktivieren und dann den von der Website www.google.com/analytics erstellten Code in Ihre Website einfgen. Anmelden bei Google Analytics 1. ffnen Sie die Website www.google.com/analytics, um sich anzumelden oder ein Konto zu erffnen. Um sich mit ihren bestehenden Benutzerdetails anzumelden, klicken Sie auf Zugriff auf Analytics. Als neuer Benutzer mssen Sie zunchst ber den Link Melden Sie sich jetzt an ein Konto erstellen. Folgen Sie den Anleitungen auf Ihrem Bildschirm, um ein neues Profil anzulegen. Kopieren Sie den von dem Profil erstellten Code aus dem Fenster Fgen Sie diesen Code in Ihre Website ein. Diesen Code mssen Sie in WebPlus einfgen. Klicken Sie anschlieend auf die Schaltflche Fertig stellen.

2. 3.

4.

Aktivieren von Google Analytics 1. 2. Klicken Sie im Men Bearbeiten auf den Eintrag Website-Eigenschaften. Klicken Sie auf die Kategorie Feature > Analytics und whlen Sie die Option Webanalyse aktivieren aus.

296 3.

Website-Validerung und -Analyse

Klicken Sie auf die Schaltflche Aus Zwischenablage einfgen, um den zuvor von der Google AnalyticsWebsite kopierten Code einzufgen. Der Code wird nun in Ihrem Dialogfeld angezeigt und lsst sich nicht bearbeiten. Klicken Sie auf die Schaltflche OK. Damit die Analyse korrekt funktioniert, muss der Code in Ihrem Profil bei Google Analytics dieselbe Webeigenschafts-ID (z. B. UA-10378445-7) besitzen wie Ihre WebPlus-Website. Sie finden diese Angabe in dem Code. Wenn Sie den Analytics-Code fr Ihre Website ndern, sollten Sie anschlieend mit einem vollstndigen Upload alle Seiten erneut im Web publizieren.

4.

Analysieren Ihrer Statistik

Melden Sie sich bei Google Analytics an und klicken Sie in Ihrem Website-Profil auf die Option zur Anzeige des Berichts.

16

Anhnge

298

Anhnge

Anhnge

299

Serif-Kontaktinformationen
Technischer Support
Information dazu, wie Sie technische Untersttzung und Antworten auf produktspezifische Fragen erhalten sowie zur Kontaktaufnahme mit Serif finden Sie unter www.serif.com/de/kontakt. Serif-Hauptniederlassung: The Software Centre PO Box 2000, Nottingham, NG11 7GW, Grobritannien Telefon +44 115 914 2000 Fax +44 115 914 2020

Online
Webadresse: http://www.serif.com/de

Internationale Anfragen
Bitte wenden Sie sich an unseren Firmenhauptsitz.

300

Anhnge

Warenzeichen und Copyright-Vermerke


Dieses Handbuch und die darin beschriebene Software werden im Rahmen eines Endbenutzer-Lizenzabkommens zur Verfgung gestellt, das dem Produkt beiliegt. Angaben zur erlaubten und untersagten Verwendung sind in dem Lizenzabkommen enthalten.

Warenzeichen
Serif ist ein eingetragenes Warenzeichen von Serif (Europe) Ltd. WebPlus ist ein eingetragenes Warenzeichen von Serif (Europe) Ltd. Alle anderen Serif-Produktnamen sind Warenzeichen von Serif (Europe) Ltd. Microsoft, Windows und das Windows-Logo sind eingetragene Warenzeichen der Microsoft Corporation. Alle anderen Warenzeichen unterliegen dem Urheberrecht und den Lizenzbestimmungen der entsprechenden Patent- und Lizenzhalter. Windows Vista und die Windows Vista Start-Schaltflche sind Warenzeichen oder eingetragene Warenzeichen der Microsoft Corporation in den USA und/oder anderen Lndern. Google+ fr soziale Netzwerke, Google Analytics fr Website-Analysen und Google AdSense fr Werbeeinblendungen sind Warenzeichen von Google Inc.

Copyright
Digitale Bilder 2008 Hemera Technologies Inc. Alle Rechte vorbehalten. Digitale Bilder 2008 Jupiterimages Corporation. Alle Rechte vorbehalten. Digitale Bilder 2008 Jupiterimages France SAS. Alle Rechte vorbehalten. Inhalt 2008 Jupiterimages Corporation. Alle Rechte vorbehalten. Bildmaterial teilweise 1997-2002 Nova Development Corporation; 1995 Expressions Computer Software; 1996-98 CreatiCom, Inc.; 1996 Cliptoart; 1997 Multimedia Agency Corporation; 1997-98 Seattle Support Group. Die Rechte aller Parteien bleiben vorbehalten. Dieses Programm wurde mit den LEADTOOLS entwickelt, Copyright 19912007 LEAD Technologies, Inc. Alle Rechte vorbehalten. THE PROXIMITY HYPHENATION SYSTEM 1989 Proximity Technology Inc. Alle Rechte vorbehalten.

Anhnge

301

THE PROXIMITY/COLLINS DATABASE 1990 William Collins Sons & Co. Ltd.; 1990 Proximity Technology Inc. Alle Rechte vorbehalten. THE PROXIMITY/MERRIAM-WEBSTER DATABASE 1990 MerriamWebster Inc.; 1990 Proximity Technology Inc. Alle Rechte vorbehalten. The Sentry Spelling-Checker Engine 2000 Wintertree Software Inc. WGrammar Grammar-Checker Engine 1998 Wintertree Software Inc. Andrei Stcherbatchenko, Ferdinand Prantl PayPal 1999-2012 PayPal. Alle Rechte vorbehalten. Roman Cart 2008 Roman Interactive Ltd. Alle Rechte vorbehalten. Mal's 1998 bis 2003 Mal's e-commerce Ltd. Alle Rechte vorbehalten. iTunes 2000 bis 2008 Apple, Inc. Alle Rechte vorbehalten. YouTube 2008 YouTube, LLC Facebook 2008 Facebook Inc. Twitter 2012 Twitter Inc. phpBB 2000, 2002, 2003, 2007 phpBB Group FontForge 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008 von George Williams. Teile dieser Software unterliegen dem Copyright-Schutz von 2008 The FreeType Project (www.freetype.org). Alle Rechte vorbehalten. ODF Translator 2006-2008, Clever Age, DIaLOGIKa, Sonata Software Ltd. Alle Rechte vorbehalten. Office Binary Translator to OpenXML Copyright 2008-2009, DIaLOGIKa. Alle Rechte vorbehalten. Anti-Grain Geometry - Version 2.4 Copyright 2002-2005 Maxim Shemanarev (McSeem) SlideShowPro Dominey Design Inc. Alle Rechte vorbehalten. Cliparts aus den Serif ArtPacks Serif (Europe) Ltd. & Paul Harris TrueType-Beispielschriftarten aus den Serif FontPacks Serif (Europe) Ltd. 2012 Serif (Europe) Ltd. Alle Rechte vorbehalten. Dieses Handbuch darf in jeglicher Form, ob ganz oder teilweise, nur mit ausdrcklicher schriftlicher Genehmigung von Serif (Europe) Ltd. reproduziert werden. Serif WebPlus X6 2012 Serif (Europe) Ltd. Alle Rechte vorbehalten. Die in den Beispielen verwendeten Namen und Firmen sind frei erfunden.

302

Anhnge

17

Index

304

Index

Index

305

Abstze, 250 Textformatvorlagen fr Abstze, 253 Abstimmung (SmartObjekt), 182 AdSense, 150 Aktionen, 129 Aktive Betrachter (Smart Objekt), 180 Anhngen von MasterSeiten, 49 Anker, 131 Anmeldung (Zugangskontrolle), 178 Antispam (CAPTCHA), 224 Audiodateien, 207 Aufzhlungen, 256 Banner (animiert), 109 Beitritt (Zugangskontrolle), 176 Benannte Formatvorlagen, 253 fr Text (siehe auch Textformatvorlagen), 253 Benutzer (fr Zugangskontrolle), 173 Ausschlieen per Bann, 179 Einfrieren, 179 Benutzerdetails, 258 Aktualisieren, 259 Einfgen, 259 Benutzergruppen (fr Zugangskontrolle), 173 Anmelden, 176 Beitreten, 178

Benutzerliste (SmartObjekt), 169, 183 Bilder als Hintergrund, 62 Bildeffekte, 87 Bildkorrekturen, 87 Einfgen, 82 in Lightboxen, 133 Rollover-Popup, 143 Bing-Validierung, 294 Blogs, 157 Einfgen, 158 Verwalten, 159 Zugriff ber OffsiteLinks, 59 Browservorschau, 282 Button Studio, 125 CAPTCHA (Antispam), 224 Copyright-Vermerke, 300 Design Studio, 94 Designvorlage, 30 Dokumentrahmen (iFrames), 155 Durchsuchen von Websites, 146 Dynamische Fhrungslinien, 71 E-Commerce, 227 Formulare und Schaltflchen einfgen (PayPal), 230 Effekte (fr Bilder), 87 Einkaufswagen, 227 Entfernen von Seiten/Master-Seiten, 55 Facebook (Objekte), 193

306

Index

Farbe Farbschemata, 67 Hintergrund, 64 Seitenfarbe, 64 Features, 5 Neue Features, 5 Feiertage (ffentlich), 107 Flash, 96, 210 Movies, 210 Foren, 162 Einfgen, 163 Sicherheit, 165 Verwalten, 165 Zugriff ber OffsiteLinks, 59 Formatieren von Text Probleme auf Webseiten, 279 Formatvorlagen, 252 fr Text (siehe auch Textformatvorlagen), 252 Formen Text anpassen an, 247 Formulare, 215 Erstellen, 217 bertragen von Formulardaten, 219 Besttigen, 223 Fotogalerie, 96 aus Flickr-Fotos, 101 aus SlideShowPro Director, 101 Freistellen (Bildmotive), 86 FTP, 284 Kontodetails, 285

Fhrungslinien dynamisch, 71 Google AdSense, 150 Google+ (Objekt), 201 Maps, 148 Validierung, 293 Gruppen Benutzerlisten (fr Zugangskontrolle), 173 Hintergrund, 61, 265 Benutzerdefiniert, 65 Bild, 62 Mehrere, 63 Farbe, 64 Sound, 208 Speichern, 275 Homepage, 42 ndern, 60 HTML-Seiten, 53, 56 Hyperlinks, 126 Anker fr, 131 fr Lightboxen, 135 fr Zielfenster/-rahmen, 128 iFrames, 155 Importieren Text, 241 Internet Service Provider (ISP), 284 Kalender, 105 ffentliche Feiertage fr, 107 Termine fr, 108 Kalender/Termin-Manager, 108

Index

307

Kalenderassistent, 105 Kontodetails (FTP), 285 Korrigieren (von Bildern), 87 Knstlerischer Text, 243 auf einem Pfad, 246 Knstlerischer Text (Werkzeug), 243, 246 Layouthilfen, 71 Dynamische Fhrungslinien, 71 Lesezeichen-Symbolstreifen fr soziale Netzwerke, 203 Lightboxen, 132 Einstellungen, 136 fr Bilder, 86 Linien Text anpassen an, 247 Listen, 256 Aufzhlungen, 256 Nummerierungen, 256 Mailinglisten, 183 Maps (Google), 148 Master-Seiten, 47, 61 Anhngen, 49 Mehrere, 49 Eigenschaften, 61 Entfernen, 55 Hinzufgen, 55 Mehrere, 49 Objekte, 51 Mobile Websites, 38 Umleiten zu, 41 Navigationsleisten, 117 Erstellen, 117

Konfigurieren, 120 Schaltflchen fr, 123 Neue Features, 5 News-Fenster, 160 Nummerierungen, 256 Objekte (Erneut verwenden in Websites), 272 Objekte fr soziale Netzwerke, 193, 196, 201 Facebook, 193 Google+, 201 Twitter, 196 ffnen bestehender Websites, 34 Offsite-Links, 59 Panels, 89 Eigene entwerfen, 94 Festlegen von Aktionen fr, 129 in Slidern, 109 PayPal, 230 Formulare und Schaltflchen einfgen, 230 Konfigurieren, 228 Minicart, 228 Pfadtexte, 245 PhotoLab, 87 Popup-Mens, 122 Profile Smart-Objekte, 186 Prffunktionen, 279 Website-Prfung, 279 Publizieren, 284 im Web, 284 Quelldatei-Browser, 268

308

Index

Quelldateien, 265, 268 Arretieren, 276 Durchsuchen, 269 Quelldateien (StudioRegisterkarte) fr Seitenhintergrnde, 62 Speichern eigener Designs in, 272 Quelldatei-Manager, 268 Quelldatei-Paket, 265, 269 Rahmen (iFrames), 155 Rahmentext, 77 Rnder (HTMLTextrahmen), 81 Rollover, 139 Popups, 143 RSS-Feeds Abonnieren von Drittanbietern, 167 RSS-Reader, 167 Schaltflchen (Buttons), 117, 123 Eigene entwerfen, 125 Schemata (Farb-), 67 Voreinstellungen, 69 Schriftarten, 251 Websicher, 251 Seiten, 47 Eigenschaften, 61 Hintergrnde fr, 61 Hinzufgen und Entfernen, 53 Klonen, 53 Neuordnen, 56 Seitenfarbe, 64

Benutzerdefiniert, 64 Sicherheit, 169 Speichern, 274 ber- und untergeordnete Seiten, 42, 56, 118 Seiten umleiten an mobile Seiten, 41 Seitenfarbe, 64 Benutzerdefiniert, 65 Global, 64 Serif, 299 Kontaktinformationen, 299 Webressourcen, 180, 215 Anmelden, 184 Lschen der Kontodetails, 185 Shoutbox (Smart-Objekt), 182 Slider, 109 Aktionen fr, 129 SlideShowPro Director, 101 Smart-Objekte, 180 Erstellen, 186 Konto fr, 184 Profile fr, 186 Verwalten, 189 Smartphones, 38 Sound, 207 Einfgen in Seiten, 207 Speichern von Designs, 272 Startassistent, 29 Statistik (Webseite), 295 Storytext, 77 Studio fr Bildausschnitte, 86

Index

309

Suchen und Ersetzen, 262 Support, 299 SWF-Dateien, 210 Tabellen, 103 bersicht, 103 Technischer Support, 299 Termine (Kalender), 108 Text, 77, 243, 247, 250 Anpassen an Rahmen, 81 auf einem Pfad, 245 Bearbeiten auf einer Seite, 247 Formatierung, 250 Formatierungsprobleme auf Webseiten, 279 Importieren aus Dateien, 241 Knstlerische (freie) Texte, 243 Nummerierung und Aufzhlungszeichen, 256 Rahmentexte, 77 Hinzufgen zu, 78 HTML-Tabellen, 103 Rnder, 81 berlauf (in Rahmen), 81 Text (Speichern), 272 Text an Pfad anpassen, 247 Textformatvorlagen, 252 Textformatvorlagen-Palette, 252 Textrahmen, 78 Anpassen von Textberlauf, 81 Einrichten, 80

Erstellen, 78 Rnder fr, 81 Text anpassen an, 81 Textrahmenwerkzeug, 78 Textverarbeitungsdateien, 241 Themenlayouts, 30 Trefferzhler (SmartObjekt), 181 TrueType-Schriften, 251 Twitter (Objekte), 196 ber-/Untergeordnete Seiten, 42, 56, 118 bertragung (von Formularen), 219 Upgrades, 4 Validierung, 293 Bing, 294 Google, 293 Variablen, 260 Video, 207 Einfgen von YouTubeVideos, 211 Hinzufgen, 207 Vorlage (Designvorlage), 30 Erstellen von Websites, 30 Webseiten und Websites, 34 Website (StudioRegisterkarte), 42, 47, 53 Website-Eigenschaften, 46 Website-Manager Prfen des Layouts, 279 Website-Prfung, 279 Websites, 34, 36

310

Index

Erstellen aus einer leeren Seite, 36 ffnen bestehender Dokumente, 34 Website-Struktur, 42 Anzeigen, 44 Website-Strukturansicht, 44 Website-Suche, 146 Website-Vorschau, 282 Werbung, 150 Werkzeuge Knstlerischer Text, 243

Textrahmenwerkzeug, 78 Wiederherstellen einer gespeicherten Version, 36 Willkommen, 3 YouTube-Video, 211 Zhler Aktive Betrachter, 188 Trefferzhler, 188 Zeichen Formatvorlagen, 253 Zugangskontrolle, 169, 183