WebPlus X6 Benutzerhandbuch - Serif
WebPlus X6 Benutzerhandbuch - Serif
WebPlus X6 Benutzerhandbuch - Serif
Erfolgreiche ePaper selbst erstellen
Machen Sie aus Ihren PDF Publikationen ein blätterbares Flipbook mit unserer einzigartigen Google optimierten e-Paper Software.
Inhaltsverzeichnis<br />
1. Willkommen ............................................. 1<br />
Willkommen! .................................................................. 3<br />
Neue Features ............................................................... 5<br />
Installieren der Software .............................................. 10<br />
2. Präsentieren Ihrer Website online ......... 13<br />
Starten von <strong>WebPlus</strong> ................................................... 15<br />
Arbeiten mit dem <strong>Serif</strong> Webhosting .............................. 15<br />
Auswählen eines Designs ............................................ 18<br />
Einfügen einer Grafik „Website im Aufbau“ .................. 20<br />
Publizieren Ihrer Website ............................................. 22<br />
Bearbeiten von Titel und Text ...................................... 23<br />
Einfügen von Bildern .................................................... 24<br />
Einfügen einer neuen leeren Seite ............................... 26<br />
3. Einrichten von Websites und Seiten ...... 27<br />
Der Startassistent ........................................................ 29<br />
Erstellen einer Website mit einer Designvorlage .......... 30<br />
Öffnen einer bestehenden Website .............................. 34<br />
Aufbauen einer vollständig neuen Website .................... 36<br />
Entwerfen mobiler Websites und Seiten ...................... 38<br />
Arbeiten mit der Website-Struktur ................................ 42<br />
Festlegen der Website-Eigenschaften ......................... 46
Inhaltsverzeichnis<br />
Arbeiten mit Seiten und Master-Seiten ........................ 47<br />
Hinzufügen, Entfernen und Neuordnen von Seiten ...... 53<br />
Festlegen der Seiteneigenschaften .............................. 61<br />
Einfügen von Hintergründen ........................................ 61<br />
Arbeiten mit Farbschemata .......................................... 67<br />
Die dynamischen Führungslinien ................................. 71<br />
4. Die Layoutelemente ............................... 75<br />
Einfügen von Textrahmen ............................................ 77<br />
Einfügen von Bildern .................................................... 82<br />
Einfügen von Panels .................................................... 89<br />
Einfügen einer Fotogalerie ........................................... 96<br />
Einfügen von Tabellen ............................................... 103<br />
Einfügen eines Kalenders .......................................... 105<br />
Arbeiten mit Slidern .................................................... 109<br />
5. Die Navigationselemente ..................... 115<br />
Einfügen von Navigationsleisten ................................ 117<br />
Einfügen von Popup-Menüs ....................................... 122<br />
Einfügen von Schaltflächen ....................................... 123<br />
Einfügen von Hyperlinks und Aktionen ...................... 126<br />
Einfügen von Ankern .................................................. 131<br />
Arbeiten mit Lightboxen ............................................. 132
Inhaltsverzeichnis<br />
6. Interaktive Objekte ............................... 137<br />
Einfügen eines Rollovers ........................................... 139<br />
Die Rolloveroptionen .................................................. 139<br />
Einfügen von Rollover-Popups ................................... 143<br />
Einfügen einer Website-Suche ................................... 146<br />
Einfügen von Google Maps ........................................ 148<br />
Einfügen einer Werbung ............................................ 150<br />
7. Externe/Verwaltete Inhalte .................. 153<br />
Einfügen von Dokumentrahmen ................................. 155<br />
Einfügen eines Blogs ................................................. 157<br />
Einfügen eines News-Fensters .................................. 160<br />
Einfügen eines Forums .............................................. 162<br />
Einfügen eines RSS-Readers .................................... 167<br />
Die Zugangskontrolle ................................................. 169<br />
Arbeiten mit Smart-Objekten ...................................... 180<br />
8. Soziale Netzwerke ............................... 191<br />
Einfügen von Facebook-Objekten .............................. 193<br />
Einfügen von Twitter-Objekten ................................... 196<br />
Einfügen einer „Google +1“-Schaltfläche ................... 201<br />
Einfügen eines Lesezeichen-Symbolstreifens für soziale<br />
Netzwerke .................................................................. 203<br />
9. Multimedia ........................................... 205<br />
Hinzufügen von Sounds und Videos .......................... 207<br />
Einfügen von Flash-Dateien (SWF)............................ 210<br />
Einfügen von YouTube-Videos .................................. 211
Inhaltsverzeichnis<br />
10. Formulare ............................................. 213<br />
Einfügen von Formularen ........................................... 215<br />
Übertragen von Formularen ....................................... 219<br />
11. E-Commerce-Objekte .......................... 225<br />
Was bedeutet E-Commerce? ..................................... 227<br />
Einfügen von E-Commerce-Objekten (PayPal) .......... 230<br />
12. Text ...................................................... 239<br />
Importieren von Texten aus einer Datei ..................... 241<br />
Arbeiten mit künstlerischen Texten ............................ 243<br />
Platzieren von Texten auf einem Pfad ....................... 245<br />
Bearbeiten von Texten auf einer Seite ....................... 247<br />
Einstellen von Texteigenschaften .............................. 250<br />
Arbeiten mit verschiedenen Schriftoptionen .................... 251<br />
Arbeiten mit Textformatvorlagen ................................ 252<br />
Erstellen von Nummerierungen und Aufzählungen .... 256<br />
Einfügen von Benutzerdetails .................................... 258<br />
Einfügen von Variablen .............................................. 260<br />
Suchen und Ersetzen ................................................. 262<br />
13. Quelldateien für kreative Designs ........ 263<br />
Arbeiten mit Quelldateien ........................................... 265<br />
Arbeiten mit dem Quelldatei-Browser ........................... 268<br />
Speichern von Designs .............................................. 272
Inhaltsverzeichnis<br />
14. Vorschau und Publizieren .................... 277<br />
Arbeiten mit der Website-Prüfung .............................. 279<br />
Öffnen einer Website-Vorschau ................................. 282<br />
Publizieren im Web .................................................... 284<br />
15. Website-Validerung und -Analyse ....... 291<br />
Validieren Ihrer Website ............................................. 293<br />
Analysieren der Webstatistik ...................................... 295<br />
16. Anhänge .............................................. 297<br />
<strong>Serif</strong>-Kontaktinformationen ......................................... 299<br />
Warenzeichen und Copyright-Vermerke .................... 300<br />
17. Index .................................................... 303
Inhaltsverzeichnis
1<br />
Willkommen
2 Willkommen
Willkommen!<br />
Willkommen 3<br />
Willkommen zu <strong>WebPlus</strong> <strong>X6</strong> von <strong>Serif</strong>, der unkomplizierten<br />
Komplettlösung für private und geschäftliche Websites.<br />
Um Ihnen die tägliche Arbeit zu erleichtern, enthält <strong>WebPlus</strong> eine<br />
breite Palette vordefinierter Designvorlagen, flexibler<br />
Navigationsleisten, kreativer Quelldateien und Formatvorlagen,<br />
die Sie flexibel anpassen und als Grundstein für Ihre Projekte<br />
einsetzen können. Für Einsteiger in das Webdesign ist es daher<br />
überhaupt kein Problem, professionelle Ergebnisse mit unserer<br />
Software zu erzielen. Sie können ebenfalls Dokumente aus<br />
Textverarbeitungen importieren, um bereits vorhandene Inhalte in<br />
Ihren Projekten zu verwenden.<br />
Mit dem Studiofenster für Bildausschnitte können Sie<br />
Fotomotive von ihrem Hintergrund lösen, und das neue PhotoLab<br />
ist ideal, wenn Sie Bilder korrigieren oder mit kreativen<br />
Effektkombinationen versehen möchten. Diese Funktionsvielfalt<br />
sollte sich wirklich niemand entgehen lassen!<br />
<strong>WebPlus</strong> <strong>X6</strong> bietet jedoch noch mehr als „statische“ Webinhalte.<br />
Mit unserem Programm können Sie auch dynamische Inhalte in<br />
Ihre Webseiten einfügen und flexibel verwalten, wie z. B. Blogs,<br />
Foren, und RSS-Feeds von anderen Websites. Moderne und<br />
unverzichtbare Webelemente, wie Panels, Slider und Google Maps<br />
dürfen natürlich ebenso wenig fehlen wie Objekte für Facebook,<br />
Twitter und Google+. Sie können sogar mit den E-Commerce-<br />
Werkzeugen einen Warenkorb in Ihre Website integrieren und<br />
bequem verschiedene Artikel über das Internet vertreiben.<br />
Nachdem Sie Ihr Seitendesign abgeschlossen haben, können Sie die<br />
Website schnell und einfach im Web publizieren und Ihren<br />
Kunden, Kollegen, Freunden und Familienmitgliedern<br />
präsentieren.
4 Willkommen<br />
Upgrades von älteren Programmversionen<br />
Wenn Sie ein Upgrade von einer Vorgängerversion von <strong>WebPlus</strong><br />
durchgeführt haben, werden Sie überrascht sein, wie viele<br />
fantastische neue Features (siehe Seite 5) die aktuelle Version<br />
zusätzlich bietet - und das zu einem unglaublichen Preis-Leistungs-<br />
Verhältnis, das <strong>WebPlus</strong> weit von der Masse der<br />
Konkurrenzprodukte abhebt. Wir wünschen Ihnen viel Vergnügen<br />
und Erfolg bei der Arbeit mit Ihrem neuen Webdesign-Profi.<br />
Registrierung<br />
Vergessen Sie nicht, Ihre Kopie des Programms mit dem<br />
Registrierungsassistenten aus dem Menü Hilfe bei uns zu<br />
registrieren. Wir halten Sie dann automatisch über neue<br />
Entwicklungen und verfügbare Upgrades auf dem Laufenden.<br />
Eine Anmerkung zu diesem Handbuch<br />
Das Handbuch zu <strong>WebPlus</strong> <strong>X6</strong> wurde als „Starthilfe“ für neue<br />
Kunden oder Einsteiger in die Welt des Webdesigns entwickelt,<br />
damit Sie sich schnell in <strong>WebPlus</strong> zurechtfinden. Da unser<br />
Programm über eine ausgesprochen breite Palette an Features<br />
verfügt, können wir in diesem Handbuch nicht auf alle<br />
Möglichkeiten unseres Produkts eingehen und konzentrieren uns<br />
daher auf die wichtigsten Funktionen und die am häufigsten<br />
verwendeten Features. Eine umfangreiche Erläuterung zu den<br />
Programmfunktionen finden Sie in der Hilfe zu <strong>WebPlus</strong>. Um<br />
diese Hilfe zu öffnen, drücken Sie in unserem Programm einfach<br />
die F1-Taste.
Neue Features<br />
Willkommen 5<br />
• Präzise Verwaltung aller Webseiten mit der Website-<br />
Strukturansicht (siehe Seite 44)<br />
Die Übersicht in Vollbilddarstellung ist besonders<br />
praktisch für komplexe Websites. Endlich können Sie mit<br />
einem Blick die Zusammenhänge zwischen den<br />
Webseiten prüfen. Anhand der Seitenminiaturen in der<br />
Baumstruktur lässt sich genau erkennen, wie die Seiten<br />
miteinander in Verbindung stehen. Alle Seiten lassen<br />
sich durch einfaches Klicken und Ziehen neu sortieren<br />
und auch anderen Seiten über- oder unterordnen.<br />
• Slider mit animierten Panels (siehe Seite 109)<br />
Perfekt für Werbebanner, News, besondere Inhalte und<br />
ähnliche Elemente! Endlich können Sie Ihren Panels<br />
„Beine machen“ mit verschiedenen Übergängen, wie z.<br />
B. Von Links/Rechts/Oben/Unten, Gemischt,<br />
Akkordeon, Overlay, Bildlauf und noch vielen weiteren<br />
Varianten. Dank der Zeitvorgabe für die Panels können<br />
Sie genau festlegen, wann und welche Inhalte angezeigt<br />
werden sollen.<br />
• Themenlayouts für mobile Websites (siehe Seite 38)<br />
Mit den speziell für mobile Websites entworfenen<br />
Themenvorlagen können Sie mobile Webseiten direkt in<br />
eine bestehende Website integrieren oder auch eine<br />
eigenständige mobile Website entwerfen. Alle Layouts<br />
wurden für die Betrachtung auf Mobilgeräten optimiert!<br />
Endlich können alle Smartphone-Besitzer schnell und<br />
einfach von unterwegs auf Ihre Webseiten zugreifen!
6 Willkommen<br />
• Umleitung von Desktop zu Mobil (siehe Seite 41)<br />
Leiten Sie Smartphone-Benutzer direkt von Ihrer für die<br />
Desktop-Darstellung optimierten Website auf die<br />
mobilen Seiten - wahlweise innerhalb einer Website mit<br />
Desktop- und Mobil-Seiten als auch zu einer völlig<br />
separaten Mobil-Website! Diese Umleitung erkennt<br />
sowohl Telefone als auch die Betrachtung mit<br />
bestimmten Bildschirmabmessungen.<br />
• QuickBuild-Registerkarte für ein unkompliziertes<br />
Webdesign (siehe <strong>WebPlus</strong>-Hilfe)<br />
Mit der Studio-Registerkarte QuickBuild können Sie<br />
schnell und einfach auf eine breite Palette wichtiger<br />
Objekte zugreifen, die in verschiedene Kategorien<br />
unterteilt sind, wie z. B. Layoutelemente,<br />
Navigationselemente, Soziale Netzwerke und<br />
Interaktive Objekte sowie auch Externe/Verwaltete<br />
Inhalte und noch vieles mehr. Anhand der großen<br />
Symbole lassen sich alle Objekte mit einem Blick<br />
identifizieren. Ziehen Sie einfach ein Symbol auf die<br />
gewünschte Position Ihrer Seite. Dank dieser<br />
kinderleichten Designmethode finden sich auch<br />
Einsteiger schnell mit unserem Programm zurecht!<br />
• Zusätzliche Aktionen für noch mehr<br />
Objektinteraktivität (siehe Seite 129)<br />
Blenden Sie Objekte aus, bis sie von einer Maus berührt<br />
werden. Elemente können ebenfalls ihre Positionen<br />
ändern! Für Slider stehen Ihnen Schaltflächen für die<br />
Wiedergabesteuerung zur Verfügung sowie<br />
Schaltflächen, deren Darstellung sich je nach Slider-<br />
Aktivität ändert.
Willkommen 7<br />
• Validierung Ihrer Website mit Google und Bing (siehe<br />
Seite 293)<br />
Durch einen einfachen Nachweis, dass Sie der Besitzer<br />
der Website sind, können Sie wichtige Informationen zur<br />
Suchmaschinenoptimierung Ihrer Website einsehen und<br />
eine breite Palette von Webmaster-Tools einsetzen<br />
(Analytics und AdSense).<br />
Programmoberfläche & Bedienkomfort<br />
• Erweiterte Benutzeroberfläche<br />
Um die Bedienung zu vereinfachen, haben wir die<br />
Symbolleisten entschlackt und die Menüs und per<br />
Rechtsklick zu öffnenden Kontextmenüs neu<br />
strukturiert.<br />
• Das Entwerfen neuer Websites ist jetzt noch einfacher<br />
als je zuvor! (siehe Seite 36)<br />
Die Funktion Neue Website anlegen im Startassistenten<br />
führt Sie nun durch die wichtigsten Schritte für den<br />
Aufbau einer komplett neuen Website. Wählen Sie<br />
schnell und einfach die Webadresse, Seitengröße, Anzahl<br />
der Seiten, ein Farbschema und die Navigationsleisten<br />
direkt am Anfang des Projekts aus und ersparen Sie sich<br />
lästige Designänderungen am Ende.<br />
• Präzise Steuerung der Registerkarten mit der neuen<br />
Studioleiste<br />
Mit dieser neuen Symbolleiste können Sie die Studio-<br />
Registerkarte „Quelldateien“, die Studio-Registerkarte<br />
„Schriften“, die Studio-Registerkarte „QuickStart“ sowie<br />
alle anderen Registerkarten gezielt ein- und ausblenden.
8 Willkommen<br />
Kreatives Design<br />
• Kreatives Arbeiten mit Quelldateien (siehe Seite 263)<br />
Mit der neuen Studio-Registerkarte „Quelldateien“<br />
können Sie von Profis entworfene Seiteninhalte<br />
durchsuchen und bequem auf Ihren Seiten verteilen.<br />
Diese Quelldateien lassen sich sogar mit einer flexiblen<br />
Textsuche durchstöbern! Hier finden Sie sowohl<br />
webspezifische Kategorien, wie Slider/Panels und<br />
Schaltflächen, als auch allgemeine Kategorien, wie<br />
Grafiken, Bilder, Bildrahmen, Hintergründe,<br />
Seiteninhalte und sogar ganze Seiten. Einfach Klicken,<br />
Ziehen und Absetzen - schon ist Ihr Layout fertig! In<br />
dieser Registerkarte können Sie auch selbst definierte<br />
Designs speichern - sowohl für den Einsatz in der<br />
aktuellen Website als auch zur späteren Verwendung in<br />
allen anderen Projekten. Sogar Paketdateien aus PagePlus<br />
lassen sich hier in <strong>WebPlus</strong> importieren!<br />
• Unkomplizierte Farbzuweisungen mit der Farbleiste<br />
Über diese neue Symbolleiste können Sie die Farben für<br />
Füllung, Linie und Text aus Ihrem aktuellen<br />
Farbschema oder der Website-Palette auswählen.<br />
• Hintergründe mit mehreren Bildern (siehe Seite 61)<br />
Kombinieren Sie mehrere Bilder im Hintergrund zu<br />
fantastischen Designs. Jedes Bild lässt sich einzeln<br />
positionieren, sodass Sie vollkommen frei und flexibel<br />
arbeiten können. Diese Methode ist perfekt, wenn Sie die<br />
Designs für Kopfzeilen, Fußzeilen, Kachellayouts und<br />
Logos separat entwerfen möchten!
Willkommen 9<br />
• Benannte Schemafarben (siehe Seite 70)<br />
Verlieren Sie bei der Farbgestaltung der verschiedenen<br />
Seitenelemente auch hin und wieder die Übersicht?<br />
Geben Sie Ihren Farben doch einfach aussagekräftige<br />
Namen, wie z. B. „Hintergrund“ oder „Text - html“,<br />
sodass Sie mit einem Blick erkennen, für welchen Zweck<br />
Sie die Farben eingesetzt haben.<br />
Soziale Netzwerke<br />
• Feeds und Schaltflächen für soziale Netzwerke (siehe<br />
Seite 191)<br />
Mit den Objekten für Facebook, Twitter und Google+<br />
lassen sich Feeds und Schaltflächen in Ihre Webseiten<br />
integrieren. Ihre Website-Besucher können dann Ihre<br />
Website (oder jede andere URL) auf den Seiten eines<br />
sozialen Netzwerkes ihrer Wahl anderen Websurfern<br />
empfehlen.<br />
• Lesezeichen-Symbolstreifen für soziale Netzwerke<br />
(siehe Seite 203)<br />
Mit dem Lesezeichen-Symbolstreifen für soziale<br />
Netzwerke können Website-Besucher für Ihre Website<br />
über Facebook, Twitter, Delicious, Digg und Google<br />
Lesezeichen die „Werbetrommel rühren“. Und dies ist<br />
nur eine Auswahl der verfügbaren Möglichkeiten.<br />
Natürlich lassen sich Ihre Webseiten bzw. URLs über<br />
diesen Symbolstreifen auch per E-Mail versenden und<br />
drucken.<br />
Multimedia<br />
• Zugriff auf Multimedia-Streams aus dem Internet<br />
(siehe Seite 209)<br />
Integrieren Sie schnell und einfach Streaming-Movies<br />
(MPEG, MP4, Shockwave, FLV und QuickTime) oder<br />
Audioclips von URLs in Ihre Webseiten.
10 Willkommen<br />
Installieren der Software<br />
Systemanforderungen<br />
Minimale Systemanforderungen:<br />
• Windows-basierender PC mit DVD-Laufwerk und Maus<br />
• Eines der Betriebssysteme Microsoft Windows® XP (32<br />
Bit), Windows® Vista oder Windows® 7<br />
• 512 MB RAM (Arbeitsspeicher)<br />
• 434 MB freie Festplattenkapazität<br />
• Monitor und Grafikkarte, die eine Auflösung von 1024 x<br />
768 ermöglichen<br />
• Internet Explorer 7<br />
• Für den Zugriff auf die Onlineressourcen und das<br />
Publizieren der Projektdateien im World Wide Web<br />
werden ein Internetzugang und ein Benutzerkonto bei<br />
einem Internet Service Provider benötigt<br />
Für die Bearbeitung großer oder komplexer Websites werden<br />
zusätzliche Festplattenkapazität und mehr Arbeitsspeicher<br />
benötigt.
Optional:<br />
• Windows-kompatibler Drucker<br />
Willkommen 11<br />
• TWAIN-kompatibler Scanner und-/oder TWAINkompatible<br />
Digitalkamera<br />
• .NET 2.0 für die Textimportfilter von Word 2007/2010 +<br />
OpenOffice (Bestandteil der Standardinstallation)<br />
Die Erstinstallation<br />
Um <strong>Serif</strong> <strong>WebPlus</strong> <strong>X6</strong> zu installieren, legen Sie einfach die<br />
Programm-Disc von <strong>WebPlus</strong> <strong>X6</strong> in Ihr Disc-Laufwerk ein. Die<br />
AutoRun-Funktion sollte nun automatisch das Setup starten.<br />
Führen Sie einfach die auf dem Bildschirm angezeigten Schritte<br />
aus, um das Programm zu installieren.<br />
Reparieren oder Ändern der Installation<br />
Wenn Sie die Software erneut installieren oder die Installation<br />
ändern möchten, klicken Sie im Startmenü von Windows auf<br />
Systemsteuerung und dann auf das Symbol Software/Programme<br />
deinstallieren. Stellen Sie sicher, dass die Programm-Disc in Ihr<br />
Disc-Laufwerk eingelegt ist und klicken Sie auf den Eintrag <strong>Serif</strong><br />
<strong>WebPlus</strong> <strong>X6</strong>. Klicken Sie dann auf eine der Schaltflächen Ändern<br />
oder Reparieren und folgen Sie den Anweisungen auf Ihrem<br />
Bildschirm.
12 Willkommen
2<br />
Präsentieren Ihrer<br />
Website online
14 Präsentieren Ihrer Website online
Starten von <strong>WebPlus</strong><br />
Präsentieren Ihrer Website online 15<br />
Nach dem ersten Programmstart wird automatisch der<br />
Startassistent eingeblendet, der Ihnen folgende<br />
Einstiegsmöglichkeiten in <strong>WebPlus</strong> bietet:<br />
Arbeiten mit dem <strong>Serif</strong> Webhosting<br />
Mit dem <strong>Serif</strong> Webhosting können Sie Ihre Website auf einem von<br />
<strong>Serif</strong> angebotenen Webspace publizieren. Ihre Website ist dann für alle<br />
Websurfer erreichbar. Indem Sie sich bei dem Hosting-Dienst<br />
anmelden, können Sie sich das Publizieren Ihrer Websites im Internet<br />
enorm vereinfachen. Das Hosting-Paket lässt sich jederzeit erweitern,<br />
sodass der Platz auf Ihrem Webspace stets ausreicht.<br />
Wenn Sie sich als Kunde anmelden, können Sie je nach ausgewähltem<br />
Paket den Namen festlegen, den Sie für Ihre Webadresse verwenden<br />
möchten. Diese Adresse müssen die Websurfer dann in ihren Browser<br />
eingeben, um die Homepage Ihrer Website zu besuchen. Je nach<br />
ausgewähltem Paket lassen sich die Webadressen wie folgt formatieren:<br />
.webplus.net<br />
ODER<br />
.com<br />
Den -Teil der Adresse legen Sie bei Ihrer Anmeldung fest.
16 Präsentieren Ihrer Website online<br />
Die neuesten Informationen zu den verfügbaren<br />
Hosting-Paketen finden Sie unter<br />
www.serif.com/hosting/. Beachten Sie bitte, dass unser<br />
Hosting-Angebot momentan nur in englischer Sprache<br />
verfügbar ist.<br />
Einrichten eines Kontos für das <strong>Serif</strong> Webhosting<br />
Nach dem Start von <strong>WebPlus</strong> lässt sich das <strong>Serif</strong> Webhosting<br />
problemlos konfigurieren.<br />
1. Klicken Sie im Menü Hilfe auf Webhosting-Anbieter<br />
suchen.<br />
2. Folgen Sie online den Schritten für die Anmeldung zu<br />
dem Hosting-Paket Ihrer Wahl. Hierzu müssen Sie:<br />
• Eine gültige E-Mail-Adresse und gültige<br />
Kontaktinformationen eingeben.<br />
• Auf den Aktivierungslink der E-Mail klicken, die<br />
Ihnen <strong>Serif</strong> nach der Anmeldung zuschickt.<br />
• Das Webhosting-Konto mit Ihrer E-Mail-Adresse<br />
und Ihrem Kennwort anlegen. Sie müssen ebenfalls<br />
Ihr ausgewähltes für Ihre Webadresse<br />
eingeben.<br />
• Wählen Sie in dem Detailbildschirm zu den<br />
Hosting-Angeboten das gewünschte Hosting-Paket<br />
aus.<br />
Vergessen Sie nicht den Hosting-Gutschein einzulösen,<br />
den Sie mit Ihrer Version von <strong>WebPlus</strong> erhalten haben.<br />
Geben Sie einfach den Gutschein-Code ein, wenn Sie<br />
das Paket auswählen, um Ihren Gutschein einzulösen.<br />
• Geben Sie die Zahlungsinformationen ein.
Präsentieren Ihrer Website online 17<br />
3. Drucken Sie im letzten Bildschirm die FTP-Kontodetails<br />
für Ihr Webhosting aus (oder archivieren Sie diese Daten<br />
auf eine andere Weise). Sie müssen diese Daten später<br />
noch per Kopieren und Einfügen nach <strong>WebPlus</strong><br />
übertragen. Außerdem sollten Sie stets eine<br />
Sicherheitskopie für Notfälle griffbereit haben.<br />
Übertragen Ihrer Kontodetails<br />
<strong>WebPlus</strong> prüft automatisch, ob Sie in dem Programm Kontodetails<br />
zu Ihrem Webhosting eingetragen haben. Sollten keine Daten<br />
vorhanden sein, wird automatisch ein Dialogfeld eingeblendet,<br />
damit Sie die Informationen eingeben können.<br />
1. Klicken Sie in <strong>WebPlus</strong> auf die Option Website<br />
publizieren der Standardsymbolleiste.<br />
2. Wählen Sie in dem Dialogfeld unter Bestehendes<br />
Hosting & Domänennamen verwenden die Option<br />
Details hinzufügen aus.<br />
3. Tragen Sie durch Kopieren und Einfügen die<br />
Kontodetails Ihres Webhosting-Kontos (das Sie zuvor<br />
online erstellt haben) in die entsprechenden Felder ein.<br />
4. Klicken Sie auf die Schaltfläche OK.<br />
Möchten Sie anstelle des Webhostings von <strong>Serif</strong> Ihr<br />
eigenes Hosting-Paket und einen zuvor festgelegten<br />
Domänennamen verwenden, gehen Sie wie unter<br />
"Publizieren Ihrer Website" (siehe Seite 22) beschrieben<br />
vor.<br />
Bevor Sie fortfahren, sollten Sie in dem Dialogfeld für<br />
den Server-Upload auf Test klicken. Sollte keine<br />
Verbindung zu dem Server erstellt werden, prüfen Sie<br />
bitte Ihre Kontodetails und Ihre Internetverbindung<br />
und versuchen es dann erneut.
18 Präsentieren Ihrer Website online<br />
Auswählen eines Designs<br />
Mit <strong>WebPlus</strong> müssen Sie Ihre Projekte nicht von Grund auf selbst<br />
aufbauen. Sie können auch eine vollständige Website basierend auf<br />
einem Themenlayout zusammenstellen. Themenlayouts enthalten<br />
mehrere Vorlagenseiten, die alle einen ähnlichen Look aufweisen.<br />
Um ein Design zu bestimmen, wählen Sie einfach ein<br />
Themenlayout und ein Farbschema aus.<br />
Auswählen von Themenlayout und Farbschema<br />
1. Starten Sie <strong>WebPlus</strong>.<br />
2. Klicken Sie im Startassistenten auf Designvorlage<br />
verwenden.<br />
3. Wählen Sie in dem Dialogfeld ein Themenlayout aus. Für<br />
unser Beispiel nehmen wir die Variante „Verspielt“.<br />
4. Wählen Sie am oberen Rand des Dialogfelds ein<br />
Farbschema aus. Die ersten drei Optionen in diesem<br />
Dropdownfeld sind speziell auf die ausgewählte Vorlage<br />
zugeschnitten. Die Seitenminiaturansichten werden nun<br />
automatisch aktualisiert, um den neuen Look der Seiten<br />
widerzuspiegeln.<br />
5. Entfernen Sie in dem rechten Feld die Häkchen aller<br />
Seiten - außer dem für die Homepage.
Präsentieren Ihrer Website online 19<br />
Mit den Pfeiltasten Aufwärts/Abwärts können Sie jedes<br />
einzelne Schema bequem für eine Vorschau<br />
auswählen.<br />
6. Klicken Sie anschließend auf die Schaltfläche Öffnen.<br />
Ihre Webseite wird nun in die Studio-Registerkarte<br />
Website eingefügt.<br />
Auswählen einer Pro-Vorlage<br />
Anstelle eines Themenlayouts können Sie auch Pro-Vorlagen<br />
verwenden. Diese mehrseitigen Vorlagen sind bereits mit<br />
Lizenzgebühr freien Bildern gefüllt. Das Design dieser Vorlagen<br />
wurde gezielt auf bestimmte Berufe und Branchen abgestimmt (z.<br />
B. Maler) und nicht auf ein bestimmtes Designthema.<br />
1. Klicken Sie im Startassistenten auf Designvorlage<br />
verwenden.<br />
2. Blättern Sie in dem Dialogfeld die Vorlagenliste nach<br />
unten, bis Sie die Kategorien der <strong>WebPlus</strong> <strong>X6</strong> Pro-<br />
Vorlagen erreichen, und wählen Sie eine Vorlage aus.<br />
3. Klicken Sie anschließend auf die Schaltfläche Öffnen.<br />
Ihre Webseiten werden nun in die Studio-Registerkarte<br />
Website eingefügt.
20 Präsentieren Ihrer Website online<br />
Einfügen einer Grafik „Website im<br />
Aufbau“<br />
Bevor Sie Ihre fertige Website „live“ im<br />
Internet präsentieren, sollten Sie mindestens<br />
eine Seite Ihrer geplanten Website<br />
publizieren, die eine Grafik „Website im<br />
Aufbau“ zeigt. Wenn Sie diese Seite<br />
publizieren und Ihre Website-Besucher die<br />
URL Ihrer Website aufrufen, stehen sie nicht<br />
„völlig im Dunkeln“, sondern sehen an dieser<br />
Grafik, dass Sie noch an Ihrer Website<br />
arbeiten und die Inhalte erst später verfügbar<br />
sind.<br />
Alle Grafiken, die Sie auf allen Seiten Ihrer Website anzeigen<br />
möchten, lassen sich bequem auf der Master-Seite der Seiten<br />
ablegen.<br />
1. Klicken Sie in der Studio-Registerkarte Website auf<br />
Master-Seiten>.<br />
2. Führen Sie einen Doppelklick auf die Miniatur der<br />
Master-Seite aus, die von Ihren Seiten verwendet wird.<br />
Master-Seiten werden stets als Seitensymbol mit einem<br />
Buchstaben (z. B. ) gekennzeichnet.<br />
3. Klicken Sie in der Studio-Registerkarte Quelldateien auf<br />
Durchsuchen.<br />
4. Geben Sie oben links in das Feld „Suchen“ des<br />
Quelldatei-Browsers den Begriff „Bauarbeiten“ ein.
Präsentieren Ihrer Website online 21<br />
5. Wählen Sie eine „Im Aufbau“-Grafik aus.<br />
6. Klicken Sie auf die Schaltfläche Schließen.<br />
7. Ziehen Sie die Grafik aus der Studio-Registerkarte<br />
Quelldateien unten auf Ihre Master-Seite.<br />
8. Klicken Sie mit der rechten Maustaste auf die Grafik und<br />
in ihrem Kontextmenü auf Anordnen > An unterer<br />
Seitenkante festlegen.<br />
Nach dem Publizieren wird die<br />
Grafik „Website im Aufbau“ immer<br />
am unteren Rand der Seite(n)<br />
angezeigt, der bzw. denen Sie diese<br />
Master-Seite zuweisen.
22 Präsentieren Ihrer Website online<br />
Publizieren Ihrer Website<br />
Um Ihre Website online präsentieren zu können, müssen Sie die<br />
einzelnen Dateien an Ihren Webspace (Speicherplatz für Webseiten<br />
auf einem Internetserver) übertragen.<br />
1. Öffnen Sie in der Standardsymbolleiste das<br />
Menü Website publizieren und klicken Sie auf Im Web<br />
publizieren.<br />
2. Geben Sie in das Dialogfeld die URL dieser Website ein<br />
und wählen Sie den FTP-Kontonamen in dem<br />
Dropdownfeld FTP-Konto aus. Die Kontoeinstellungen<br />
werden nun angezeigt<br />
3. Klicken Sie auf die Schaltfläche OK. Ihre Dateien werden<br />
nun an Ihre Website übertragen und sind somit live im<br />
World Wide Web erreichbar!<br />
Nachdem Sie Ihre Website online gestellt haben, können Sie weiter<br />
an Ihrem Projekt arbeiten. Wir konzentrieren uns zunächst auf die<br />
Bearbeitung von Texten, das Einfügen von Bildern sowie das<br />
Einfügen neuer Seiten.
Bearbeiten von Titel und Text<br />
Bearbeiten des Seitentitels<br />
Präsentieren Ihrer Website online 23<br />
1. Führen Sie in der Studio-Registerkarte Website einen<br />
Doppelklick auf den Eintrag der Seite Home aus.<br />
2. Führen Sie einen Doppelklick auf den Titeltext aus und<br />
geben Sie einen neuen Titel ein, wie z. B. den Namen<br />
Ihrer Firma.<br />
Bearbeiten des Textkörpers<br />
1. Führen Sie auf der Seite einen Dreifachklick auf einen<br />
Textrahmen aus, um einen Absatz zu markieren.<br />
2. Geben Sie den gewünschten Text ein.<br />
Anstatt einen bestehenden Textrahmen zu<br />
bearbeiten, können Sie auch einen neuen Textrahmen<br />
über die Option Textrahmen der Studio-Registerkarte<br />
QuickBuild erstellen.
24 Präsentieren Ihrer Website online<br />
Einfügen von Bildern<br />
Einfügen von Bildern in <strong>WebPlus</strong><br />
1. Klicken Sie in der Kategorie „Bilder“ der Studio-<br />
Registerkarte Quelldateien auf Hinzufügen.<br />
2. Öffnen Sie in dem Dialogfeld einen Ordner mit Bildern<br />
und wählen Sie die gewünschten Bilder aus.<br />
3. Klicken Sie anschließend auf die Schaltfläche Öffnen.<br />
Ihre Bilder werden nun als Miniaturen in der Kategorie<br />
„Bilder“ angezeigt.
Einfügen von Bildern in eine Seite<br />
Präsentieren Ihrer Website online 25<br />
• Ziehen Sie aus der Kategorie „Bilder“ der Studio-<br />
Registerkarte Quelldateien eine Bildminiatur direkt auf<br />
die Seite, in einen Rahmentext oder künstlerischen Text<br />
(das Bild wird dann an der Position der Einfügemarke<br />
platziert) oder in einen Bildplatzhalter (siehe unten).<br />
ODER<br />
• Führen Sie einen Doppelklick auf einen Platzhalter aus,<br />
um ein Bild direkt aus einem Ihrer PC-Laufwerke<br />
einzufügen.
26 Präsentieren Ihrer Website online<br />
Einfügen einer neuen leeren Seite<br />
1. Wählen Sie in der Studio-Registerkarte Website die Seite<br />
aus, nach der die neue Seite eingefügt werden soll.<br />
2. Klicken Sie auf den Pfeil des Symbols Neue Seite<br />
oder neuen Link hinzufügen. Klicken Sie in dem nun<br />
geöffneten Menü auf Neue leere Seite.<br />
3. Legen Sie in dem Dialogfeld „Seiteneigenschaften“ einen<br />
Seitennamen für Ihre neue Seite fest.<br />
4. Klicken Sie auf die Schaltfläche OK.<br />
Vergessen Sie nicht, die Website erneut zu publizieren,<br />
um die neuen Änderungen auf ihre „live“ Website zu<br />
übertragen.
3<br />
Einrichten von<br />
Websites und Seiten
28 Einrichten von Websites und Seiten
Der Startassistent<br />
Einrichten von Websites und Seiten 29<br />
Nach dem ersten Programmstart wird automatisch der<br />
Startassistent eingeblendet, der Ihnen folgende<br />
Einstiegsmöglichkeiten in <strong>WebPlus</strong> bietet:<br />
Die einzelnen Bezeichnungen der Optionen sind weitgehend<br />
selbsterklärend. Mit dem ersten Menü können Sie Websites von<br />
Grund auf neu erstellen oder mithilfe einer Designvorlage<br />
aufbauen. Bereits gespeicherte Websites lassen sich mit dem<br />
Assistenten ebenfalls öffnen.<br />
• Neue Datei anlegen > Neue Website anlegen: Aufbauen<br />
einer neuen Website aus einer leeren Seite.<br />
• Neue Datei anlegen > Designvorlage verwenden:<br />
Erstellen einer neuen Website mithilfe einer<br />
vordefinierten Layoutvorlage, die bereits einige<br />
Designelemente enthält.<br />
• Weitere Ressourcen: Hier finden Sie Links zu<br />
kostenlosen Designelementen und kostenpflichtigen<br />
Designvorlagen.
30 Einrichten von Websites und Seiten<br />
• Datei öffnen: Hier finden Sie eine Liste der zuletzt<br />
geöffneten Websites. Um eine Vorschau für eine Website<br />
einzublenden, bewegen Sie einfach den Mauszeiger auf<br />
ihren Dateinamen!<br />
• Studienmaterial: Öffnen der Website mit Videos,<br />
Tutorials, Support und anderen Informationen. Bitte<br />
beachten Sie, dass dieses Material teilweise nur in<br />
englischer Sprache verfügbar ist.<br />
Standardmäßig wird der Startassistent automatisch bei jedem<br />
Programmstart von <strong>WebPlus</strong> aktiviert. Sie können den Assistenten<br />
auch über die Option Diesen Assistenten nicht mehr anzeigen<br />
deaktivieren. Sollten Sie später Ihre Meinung ändern, klicken Sie<br />
auf den Menüpunkt Extras > Optionen und aktivieren in der<br />
Kategorie „Optionen > Allgemein“ die Option Startassistent<br />
verwenden.<br />
Erstellen einer Website mit einer<br />
Designvorlage<br />
<strong>WebPlus</strong> enthält eine breite Palette kategorisierter Designvorlagen,<br />
mit denen Sie schnell und einfach die unterschiedlichsten Websites<br />
aufbauen können.<br />
Die Vorlagen bieten:<br />
• Ergänzende Designs mit professionell entworfenen<br />
Layouts und starker visueller Wirkung.<br />
• Schemata: Wählen Sie einfach ein Farbschema aus, um<br />
der gesamten Website einen bestimmten Look zu<br />
verleihen.
Einrichten von Websites und Seiten 31<br />
• Seitenauswahl: Hier können Sie einige oder auch alle<br />
Vorlagenseiten auswählen (z. B. Homepage, Produkte,<br />
Downloads usw.), die Sie als Grundstein für Ihre Website<br />
verwenden möchten.<br />
Generell gibt es zwei Arten von Designvorlagen - Themenlayouts<br />
und Pro-Vorlagen.<br />
Themenlayouts<br />
Hier können Sie verschiedene<br />
Themen (z. B. „Arktis“) als<br />
Grundlage für Ihre Website<br />
auswählen. Die Seiten dieser<br />
Vorlagen enthalten jedoch<br />
keine Bilder, sondern<br />
Platzhalterrahmen. Fügen Sie<br />
einfach Ihre eigenen Bilder in<br />
die Platzhalter ein, ändern Sie<br />
den Platzhaltertext, und<br />
schon ist Ihre Website zur<br />
Publikation bereit.<br />
Als Ergänzung zu den Vorlagen für normale Websites<br />
steht Ihnen auch eine breite Palette an Vorlagen für<br />
mobile Websites zur Verfügung. Die<br />
Seitenabmessungen dieser Vorlagen wurden für die<br />
Darstellung auf Smartphones optimiert. Nähere<br />
Informationen hierzu finden Sie unter dem Thema<br />
„Entwerfen mobiler Websites und Seiten“ auf<br />
Seite 38.
32 Einrichten von Websites und Seiten<br />
Pro-Vorlagen<br />
Diese in Kategorien<br />
unterteilten Vorlagen<br />
enthalten Lizenzgebühr freie<br />
Bilder, sodass Sie schnell und<br />
einfach Ihre eigenen<br />
Websites zusammenstellen<br />
können. Sie müssen nur noch<br />
den Platzhaltertext durch<br />
Ihren eigenen Text ersetzen<br />
und anschließend die<br />
Website publizieren.<br />
Erstellen einer Website mit einer Designvorlage<br />
1. Starten Sie <strong>WebPlus</strong>, oder klicken Sie im Menü Datei auf<br />
Startassistent..., um den Startassistenten zu aktivieren.<br />
2. Klicken Sie auf die Option Neue Datei anlegen ><br />
Designvorlage verwenden.<br />
3. Wählen Sie in dem Dialogfeld ein Themenlayout<br />
(Normal- oder Mobil-Variante) oder eine Pro-Vorlage<br />
aus.<br />
Themenlayouts
Einrichten von Websites und Seiten 33<br />
Pro-Designvorlagen<br />
Mit der Bildlaufleiste können Sie bequem durch alle<br />
verfügbaren Designs blättern. Um eine Kategorie zu<br />
reduzieren oder zu erweitern, klicken Sie auf das Symbol<br />
neben dem Kategorienamen. In dem rechten Feld werden<br />
automatisch die Miniaturansichten für die Seiten der<br />
ausgewählten Vorlage angezeigt.<br />
4. Legen Sie in dem rechten<br />
Feld fest, welche Seiten Sie<br />
für Ihre Website<br />
verwenden möchten. Sie<br />
können entweder die<br />
einzelnen Seiten per<br />
Mausklick mit einem<br />
Häkchen versehen oder mit<br />
der Schaltfläche Alle<br />
auswählen alle Seiten<br />
markieren. Um die aktuelle<br />
Auswahl zu widerrufen,<br />
klicken Sie auf Nichts<br />
auswählen.
34 Einrichten von Websites und Seiten<br />
5. Wählen Sie am oberen Rand des Dialogfelds ein<br />
Farbschema aus. Die ersten drei Optionen in diesem<br />
Dropdownfeld sind speziell auf die ausgewählte Vorlage<br />
zugeschnitten. Bei geöffneter Dropdownliste können Sie<br />
einfach mit den Pfeiltasten „Aufwärts“ und „Abwärts“<br />
Ihrer Tastatur durch die Farbschemata schalten und<br />
direkt die Auswirkung der neuen Farbkombinationen auf<br />
die Seitenvorschau prüfen. Die Seitenminiaturansichten<br />
werden automatisch aktualisiert, um den neuen Look der<br />
Seiten widerzuspiegeln.<br />
6. Klicken Sie anschließend auf die Schaltfläche Öffnen.<br />
Die Website wird nun automatisch mit der Startseite (Homepage)<br />
geöffnet. Auf der rechten Seite des Arbeitsbereiches finden Sie eine<br />
vollständige Baumstruktur der Website in der Studio-Registerkarte<br />
„Website“.<br />
Einige Hinweise<br />
Über die Kategorie Weitere Vorlagen können Sie<br />
zusätzliche Vorlagen von <strong>Serif</strong> erwerben.<br />
Alle Themenlayouts enthalten so genannte<br />
Quelldateien, wie z. B. einzelne von Profis entworfene<br />
Grafiken, Bilder, Schaltflächen, Symbole, Bildrahmen<br />
oder Hintergründe, als Ergänzung zu den<br />
Seitenelementen des Themenlayouts.<br />
Öffnen einer bestehenden Website<br />
Um eine gespeicherte <strong>WebPlus</strong>-Website zu öffnen, können Sie den<br />
Startassistenten, die Standardsymbolleiste oder das Menü Datei<br />
verwenden. Mit dem Menü Datei lassen sich darüber hinaus auch<br />
Webseiten importieren die zu bestehenden Websites gehören.<br />
Nähere Informationen hierzu finden Sie in der <strong>WebPlus</strong>-Hilfe.
Einrichten von Websites und Seiten 35<br />
Öffnen einer bestehenden <strong>WebPlus</strong>-Website mit dem<br />
Startassistenten<br />
1. In dem Startassistenten werden unter „Datei öffnen“ Ihre<br />
zuletzt verwendeten Websites aufgelistet. Die als Letztes<br />
geöffnete Website steht hierbei ganz oben in der Liste.<br />
Um eine Miniaturvorschau der Website einzublenden,<br />
bevor Sie die entsprechende Datei öffnen, platzieren Sie<br />
den Mauszeiger einfach auf ihrem Listeneintrag.<br />
2. Um eine Datei zu öffnen, klicken Sie auf ihren Namen.<br />
Sollten Sie die gewünschte Website länger nicht<br />
geöffnet haben und die entsprechende Datei daher in<br />
der Liste fehlen, klicken Sie auf Durchsuchen und<br />
wählen die Datei manuell aus.<br />
Öffnen einer bestehenden <strong>WebPlus</strong>-Website während einer<br />
<strong>WebPlus</strong>-Arbeitssitzung<br />
1. Klicken Sie in der Standardsymbolleiste auf<br />
Öffnen.<br />
2. Wechseln Sie in dem Dialogfeld Öffnen zu dem Ordner<br />
der Datei und klicken Sie auf den oder die Dateinamen.<br />
Möchten Sie mehrere Websites öffnen, klicken Sie mit<br />
gedrückter Umschalttaste auf die nebeneinander<br />
liegenden Dateinamen oder mit gedrückter Strg-Taste<br />
auf nicht nebeneinander liegende Dateien.<br />
3. Klicken Sie auf die Schaltfläche Öffnen.<br />
Öffnen von Websites durch Klicken und Ziehen<br />
• Ziehen Sie die Miniaturvorschau der Website aus dem<br />
Windows Explorer in den Arbeitsbereich von <strong>WebPlus</strong>.
36 Einrichten von Websites und Seiten<br />
Zurückgreifen auf die gespeicherte Version einer geöffneten<br />
Website<br />
• Klicken Sie im Menü Datei auf den Eintrag<br />
Wiederherstellen.<br />
Ersetzen von Schriftarten<br />
<strong>WebPlus</strong> bietet Ihnen die Möglichkeit, alle Schriftarten einer<br />
<strong>WebPlus</strong>-Website zu ersetzen, die nicht auf Ihrem Computer<br />
gespeichert sind. Dies kann z. B. vorkommen, wenn Sie ein Projekt<br />
auf einem anderen Computer erstellt oder Ihr Betriebssystem<br />
zwischenzeitlich neu installiert haben. Mit dem in diesen Fällen<br />
angezeigten Dialogfeld können Sie die fehlenden Schriften bequem<br />
identifizieren und manuell gegen entsprechende Ersatzschriften<br />
austauschen. Nähere Informationen hierzu finden Sie in der<br />
<strong>WebPlus</strong>-Hilfe.<br />
Aufbauen einer vollständig neuen Website<br />
Obwohl die Designvorlagen (siehe Seite 30) sehr hilfreich sind,<br />
können Sie Ihre Websites auch von Grund auf neu gestalten,<br />
indem Sie mit einer leeren Seite beginnen. Folgen Sie einfach den<br />
verschiedenen Arbeitsschritten, die in dem Assistenten angezeigt<br />
werden, um die wichtigsten Aspekte für die neue Website<br />
einzustellen.<br />
Hierbei legen Sie unter anderem die folgenden Optionen fest:<br />
• Website-Name und Website-URL<br />
• Seitengröße und Seitenhöhe sowie die Anzahl der Seiten<br />
• Die Schemafarben<br />
• Die Navigationsleiste<br />
• Die Quelldateien
Einrichten von Websites und Seiten 37<br />
Sie können diese Einstellungen jederzeit ändern, nachdem Sie den<br />
Assistenten geschlossen haben.<br />
Die Seitengröße und -höhe ist für alle Seiten identisch -<br />
einschließlich einer Master-Seite, die automatisch<br />
angelegt und allen neuen Seiten zugewiesen wird. Ihre<br />
Navigationsleiste wird automatisch auf dieser Master-<br />
Seite platziert.<br />
Erstellen einer neuen Website ohne Vorlage mit dem<br />
Startassistenten<br />
1. Starten Sie <strong>WebPlus</strong>.<br />
ODER<br />
Klicken Sie in der Standardsymbolleiste auf Neue<br />
Website.<br />
2. Klicken Sie auf Datei anlegen > Neue Website anlegen.<br />
3. Führen Sie in dem Dialogfeld die einzelnen Schritte aus<br />
und klicken Sie anschließend auf Weiter>, um zu dem<br />
nächsten Fenster zu wechseln.<br />
4. Klicken Sie auf Fertig stellen, um den Assistenten zu<br />
schließen.<br />
Erstellen einer neuen, leeren Website während einer<br />
Arbeitssitzung in <strong>WebPlus</strong><br />
• Klicken Sie im Menü Datei auf den Eintrag Neu. Die<br />
neue Website wird nun mit einer leeren Seite geöffnet,<br />
die mit den standardmäßig verwendeten<br />
Seiteneigenschaften formatiert ist.<br />
Wenn Sie in dem Startassistenten auf Abbrechen<br />
klicken, wird ebenfalls eine neue Website mit einer<br />
leeren Standardseite angelegt.
38 Einrichten von Websites und Seiten<br />
Entwerfen mobiler Websites und Seiten<br />
Vor dem Boom der Mobiltelefone mit Internetzugang hießen Websites<br />
einfach nur Websites. Heutzutage werden Websites nicht länger nur<br />
auf normalen Computermonitoren betrachtet, sondern auch auf vielen<br />
Mobilgeräten, wie z. B. Apple iPhones, Blackberrys sowie Android-<br />
und Windows-Smartphones. Aus diesem Grund haben die<br />
Webdesigner als Ergänzung zu der „normalen“ Seitengröße auch ein<br />
Format geschaffen, das speziell für die Betrachtung auf den kleinen<br />
Bildschirmen der Mobilgeräte optimiert ist. Die für mobile Geräte<br />
entwickelten Designs werden häufig als mobile Websites und die im<br />
herkömmlichen Format als Desktop-Websites bezeichnet.<br />
Die mobilen Websites sind speziell so konzipiert, dass sich alle Texte<br />
und Seitenelemente trotz der wesentlich geringeren Abmessungen der<br />
Smartphone-Bildschirme gut erkennen lassen. Hierzu wurde nicht nur<br />
die Seitengröße reduziert, sondern auch das gesamte Design der Seiten<br />
vereinfacht. Die Seiten mobiler Websites passen sich automatisch auf<br />
die Größe des Telefons an, mit dem sie betrachtet werden.<br />
Mobile Websites in <strong>WebPlus</strong><br />
<strong>WebPlus</strong> bietet Ihnen mehrere Möglichkeiten, mobile Websites zu<br />
entwerfen:<br />
• Erstellen Sie eine eigenständige mobile Website.<br />
• Entwerfen Sie eine Hybrid-Website aus normalen<br />
Desktop-Seiten und mobilen Seiten inklusive<br />
Umleitung von den Desktop-Seiten zu den Mobil-Seiten<br />
(und umgekehrt), sodass alle Seiten in einem <strong>WebPlus</strong>-<br />
Projekt zusammengefasst sind.<br />
• Entwerfen Sie separate Desktop- und Mobil-Websites<br />
mit einer Umleitung von den Desktop-Seiten zu den<br />
separat gespeicherten Mobil-Seiten. Ihre Mobil-Website<br />
wird hierbei als eigenständiges <strong>WebPlus</strong>-Projekt erstellt.
Einrichten von Websites und Seiten 39<br />
Entwerfen mobiler Seiten innerhalb Ihrer Website<br />
Um mit der Seitenumleitung zu arbeiten, müssen Sie die mobilen<br />
Seiten erstellen und als Ziel angeben. In <strong>WebPlus</strong> können Sie<br />
mobile Seiten direkt mithilfe von Themenlayouts (siehe Seite 30)<br />
entwerfen, die speziell für mobile Websites konzipiert wurden und<br />
die „normalen“ Designs hervorragend ergänzen. Sie fügen diese<br />
Vorlagenseiten dann genau so in Ihre Website ein, wie die<br />
Vorlagenseiten für Desktop-Websites.<br />
Einfügen einer mobilen Seite<br />
1. Klicken Sie über dem Feld „Seiten“ der Studio-<br />
Registerkarte „Website“ auf den nach unten zeigenden<br />
Pfeil des Symbols Neue Seite oder neuen Link<br />
hinzufügen. Klicken Sie in dem nun geöffneten Menü<br />
auf Neue Vorlagenseite.<br />
2. Wählen Sie in dem Dialogfeld die Option Master-Seite<br />
vergleichen und kopieren des ersten Dropdownfeldes<br />
aus.<br />
3. Wählen Sie im linken Feld ein mobiles Themenlayout<br />
aus und markieren Sie per Mausklick die Seite(n), die Sie<br />
einfügen möchten. Die mobilen Themenlayouts wurden<br />
speziell als Ergänzung zu den normalen Desktop-Layouts<br />
entworfen. Wenn Sie also Ihre Website mit dem<br />
Themenlayout „Arktis“ entworfen haben, verwenden Sie<br />
einfach die Seiten des Themenlayouts „Arktis (mobil)“.<br />
4. Klicken Sie anschließend auf die Schaltfläche Öffnen.<br />
In der Studio-Registerkarte „Website“ werden die mobilen Seiten<br />
nun am Ende des Website-Strukturbaums eingefügt.<br />
Sie können natürlich auch jederzeit eine mobile<br />
Website von Grund auf neu erstellen (siehe Seite 36).
40 Einrichten von Websites und Seiten<br />
Verwalten der mobilen Dateien<br />
Einer der wichtigsten Punkte bei Hybrid-Websites ist die<br />
Trennung der mobilen Seiten von den Desktop-Seiten. Auf diese<br />
Weise lassen sich alle Seiten effizient verwalten und Sie können<br />
unabhängige Navigationsleisten für die Desktop- und Mobil-Seiten<br />
festlegen.<br />
Hier einige Tipps für Hybrid-Websites:<br />
• Ändern Sie die Dateinamen für mobile Seiten: Mobile<br />
Seiten erhalten einen anderen Namen, wenn Sie die<br />
Seiten in Ihre Website einfügen (z. B. index0.html<br />
anstelle von index.html), damit keine bestehenden<br />
Dateien überschrieben werden. Sie können für Ihre<br />
mobilen Seiten auch eine gemeinsame Vorsilbe festlegen,<br />
wie z. B. „m.“ („m.index0.htm“ anstelle von<br />
„index.html“), sodass sich die Dateinamen besonders<br />
leicht unterscheiden lassen. Klicken Sie hierzu mit der<br />
rechten Maustaste auf eine Seite und in dem<br />
Kontextmenü auf Seiteneigenschaften. Tragen Sie nun<br />
die Vorsilbe „m.“ in das Feld Dateiname ein.<br />
• Stellen Sie in der Studio-Registerkarte Website sicher,<br />
dass Ihre Desktop- und Mobil-Seiten untergeordnete<br />
Seiten der jeweiligen Homepage sind. Ziehen Sie hierzu<br />
die Einträge der Desktop-Seiten unter den Eintrag für die<br />
Desktop-Homepage und die Einträge der Mobil-Seiten<br />
unter den der Mobil-Homepage. Ihre Website hat dann<br />
also zwei Homepages - eine für die Desktop- und eine für<br />
die Mobil-Darstellung.<br />
• Um die Seitennavigation genau zu steuern, bearbeiten Sie<br />
die Navigationsleisten auf der Master-Seite für die<br />
Desktop-Seiten sowie auf der Master-Seite für die Mobil-<br />
Seiten. Klicken Sie mit der rechten Maustaste auf die<br />
Navigationsleiste und in dem Kontextmenü auf
Einrichten von Websites und Seiten 41<br />
Navigationsleiste bearbeiten. Klicken Sie auf<br />
Untergeordnete Seiten von... und wählen Sie die<br />
entsprechende Homepage in dem unteren Dropdownfeld<br />
aus. Stellen Sie hierbei sicher, dass die Optionen<br />
Untergeordnete Seiten einbeziehen und Homepage<br />
einbeziehen ebenfalls aktiviert sind.<br />
Umleiten zu/von Mobil-Seiten<br />
Für die Umleitung benötigen Sie eine Seite, auf der die Umleitung<br />
startet und eine „Zielseite“, zu der die Website-Besucher geleitet<br />
werden. Für gewöhnlich werden die Umleitungen auf Desktop-<br />
Seiten erstellt, um Website-Besucher zu den mobilen Seiten zu<br />
führen. Die umgekehrte Variante ist natürlich auch denkbar. Alle<br />
Umleitungen werden von der aktuell angezeigten Seite gestartet und<br />
benötigen einen speziellen Auslöser. Hierzu könnte die Website z. B.<br />
ein Mobilgerät oder einen Desktop-Computer erkennen oder auch<br />
die Abmessungen des Bildschirms, auf dem die Seite gerade<br />
betrachtet wird. Für die Erkennung des Browsers wird der Wert<br />
UserAgent des Browsers verwendet.<br />
Umleiten von/zu Seiten oder Websites<br />
1. Klicken Sie mit der rechten Maustaste auf eine Seite und in<br />
ihrem Kontextmenü auf Seiteneigenschaften.<br />
2. Wechseln Sie in dem Dialogfeld „Seiteneigenschaften“ zu<br />
der Kategorie Weiterleitung.<br />
3. Klicken Sie auf die Schaltfläche Link, um eine Liste mit<br />
möglichen Zielen für die Weiterleitung zu öffnen. Nähere<br />
Informationen hierzu finden Sie unter „Auswählen eines<br />
Hyperlinkziels“ in der <strong>WebPlus</strong>-Hilfe. Wählen Sie die<br />
Option Website-Seite für eine mobile Seite innerhalb<br />
Ihrer Website aus oder die Option Internet-Seite für den<br />
Link zu einer Seite einer separaten mobilen Website (z. B.<br />
m.mywebsite.com/products/productX).
42 Einrichten von Websites und Seiten<br />
4. Aktivieren Sie die Option Umleiten unter der<br />
Bedingung, damit die Umleitung nur erfolgt, wenn ein<br />
Mobiltelefon oder ein Desktop-Computer auf die<br />
publizierte Webseite zugreifen. Standardmäßig wird die<br />
Umleitung aktiviert, wenn die Website ein mobiles Gerät<br />
erkennt. Sie können die Umleitung aber auch von<br />
mobilen auf Desktop-Seiten festlegen oder dann<br />
durchführen lassen, wenn bestimmte<br />
Bildschirmabmessungen erkannt werden.<br />
5. Legen Sie eine passende Verzögerungszeit fest.<br />
Hierdurch können die Website-Besucher die Desktop-<br />
Seite kurz betrachten, bevor die Umleitung zu der<br />
mobilen Seite gestartet wird.<br />
6. Klicken Sie auf die Schaltfläche OK.<br />
Standardmäßig wird die Umleitung dadurch aktiviert,<br />
dass die Website den Browser ihrer Besucher erkennt<br />
(z. B. Firefox oder Firefox Mobile).<br />
Um die Suchmaschinenoptimierung möglichst effizient<br />
zu gestalten, sollten Sie stets die Website-Besucher<br />
zwischen Seiten mit gleichen Inhalten umleiten.<br />
Erstellen Sie als die Umleitung von der Desktop-Seite<br />
für Produkt X auf die mobile Seite für Produkt X.<br />
Arbeiten mit der Website-Struktur<br />
Bei der Struktur einer Website sind die physikalische Position der<br />
Seiten oder ihr Speicherplatz völlig unwichtig. Bei der Website-<br />
Struktur kommt es auf die logische Anordnung der verschiedenen<br />
Website-Inhalte an, sodass die Besucher der Website einfacher<br />
durch die für sie interessanten Themengebiete navigieren können.<br />
Eines der wichtigsten Organisationsprinzipien, das Sie auch mit<br />
<strong>WebPlus</strong> beherzigen sollten, ist die „umgekehrte Baumstruktur“,<br />
die mit der Startseite (Homepage) beginnt und sich dann weiter in
Einrichten von Websites und Seiten 43<br />
die anderen Seiten verzweigt. Dem Besucher Ihrer Website<br />
präsentieren sich die Inhalte dann in einer gewohnten,<br />
hierarchischen Anordnung, die in Sektionen und Strukturebenen<br />
unterteilt ist.<br />
• Eine Sektion ist eine Inhaltskategorie, die durch eine<br />
eigenständige Seite in Ihrer Website repräsentiert wird,<br />
wie z. B. „Home“, „Kontakt“, „Galerie“, „Produkte“ usw.<br />
Die wichtigen Hauptsektionen werden für gewöhnlich<br />
auf der Homepage einer Website und den anderen<br />
Sektionsseiten in Form einer Navigationsleiste<br />
präsentiert.<br />
• Die Strukturebene entspricht der Anzahl Stufen (d. h.<br />
Links), die eine Seite von ihrer übergeordneten Seite in<br />
der Website entfernt ist. Die Homepage liegt immer auf<br />
der Strukturebene 1, für gewöhnlich zusammen mit den<br />
Menüseiten der verschiedenen Sektionen. Durch diese<br />
hierarchische Anordnung können die Navigationsleisten<br />
eine einfache „Klickstruktur“ für die Website festlegen.<br />
Die Seiten eine Stufe „unter“ den Menüseiten für die<br />
Sektionen liegen auf Stufe 2 und sind somit<br />
untergeordnete Seiten; die Sektionsseiten sind in diesem<br />
Fall die übergeordneten Seiten. Eine übergeordnete Seite<br />
namens „Produkte“ könnten z. B. zwei untergeordnete<br />
Seiten namens „Produkt1“ und „Produkt2“ besitzen.<br />
Anzeigen der Website-Struktur<br />
Die Website-Struktur lässt sich über zwei Optionen einblenden: die<br />
Studio-Registerkarte „Website“ und die Website-Strukturansicht.<br />
Die zweite Variante ist ideal für die Darstellung großer Websites.<br />
Prüfen der Struktur über die Studio-Registerkarte „Website“<br />
In <strong>WebPlus</strong> können Sie mit dem Website-Strukturbaum der<br />
Studio-Registerkarte „Website“ die Inhalte Ihrer Website bequem
44 Einrichten von Websites und Seiten<br />
in Sektionen und Stufen aufteilen. Eine Struktur könnte zum<br />
Beispiel wie folgt aussehen:<br />
Mit dem Website-Strukturbaum können Sie die verschiedenen<br />
Bezüge zwischen den Seiten auf unkomplizierte, visuelle Weise<br />
erstellen und eine Struktur schaffen, die den Inhalten Ihrer Website<br />
genau entspricht. Bei einer Website finden sich natürlich immer<br />
auch Linkverzweigungen von einer Seite auf beliebige andere<br />
Seiten, sodass ein dichtes Netzwerk von Verknüpfungen entsteht.<br />
In dem Strukturbaum legen Sie nur die wichtigsten Bezüge fest<br />
(horizontal und vertikal) - alle anderen Links können Sie später<br />
gezielt auf den einzelnen Seiten erstellen. Durch einen logischen<br />
Aufbau der Sektionen und Strukturebenen wird die Website<br />
wesentlich übersichtlicher, sodass Sie die einzelnen Inhalte leichter<br />
verwalten, und die Besucher den Themen leichter folgen können.<br />
Mit <strong>WebPlus</strong> lassen sich schnell und einfach Navigationsleisten<br />
einfügen, die genau an Ihre Website-Struktur angepasst sind und<br />
als Wegweiser für die Website-Besucher dienen.<br />
Prüfen der Struktur über die Website-Strukturansicht<br />
Für große Websites ist die Website-Strukturansicht eine gute<br />
Alternative zur Studio-Registerkarte „Website“ und bietet eine<br />
Vollbilddarstellung aller Sektionen und Strukturebenen Ihrer<br />
Website. Die Seiten werden hierbei als Miniaturen in einer<br />
Baumstruktur angezeigt.
Anzeigen der Website-Struktur<br />
Einrichten von Websites und Seiten 45<br />
• Klicken Sie in der Standardsymbolleiste auf die<br />
Option Website-Struktur.<br />
Für eine ausgewählte Seite können Sie nun die üblichen<br />
Verwaltungsaufgaben erledigen, wie z. B. Einfügen, Klonen und<br />
Löschen oder die Bearbeitung der Seiteneigenschaften. Verwenden<br />
Sie hierzu einfach die Kontextleiste der Website-Struktur oder<br />
klicken Sie mit der rechten Maustaste auf eine Seitenminiatur.<br />
Über die Symbolleiste können Sie ebenfalls Seiten anzeigen und per<br />
Vorschau prüfen, in die Navigation einschließen oder von der<br />
Navigation ausschließen sowie die ausgewählte(n) Seite(n) per<br />
QuickPublish publizieren.<br />
Besonders praktisch an dieser Strukturansicht ist, dass Sie durch<br />
einfaches Ziehen einer oder mehrerer ausgewählter Seiten ihre<br />
Position innerhalb einer Strukturebene verändern oder die Seiten<br />
auch auf andere Strukturebenen verschieben können. Um mehrere<br />
Seiten auszuwählen, markieren Sie die Seiten (auf einer oder<br />
unterschiedlichen Strukturebenen) durch Ziehen mit der Maus.<br />
Möchten Sie nicht aufeinander folgenden Miniaturen auswählen,<br />
klicken Sie mit gedrückter Strg-Taste auf die Miniaturen.
46 Einrichten von Websites und Seiten<br />
Für die Sortierung können Sie eine Seite auf eine „Zielseite“ ziehen,<br />
an der dann quadratische Marker eingeblendet werden. Ziehen Sie<br />
einfach die Seite auf einen Marker, um die Seite entsprechend zu<br />
platzieren.<br />
Ziehen Sie die Seite auf A, wird die Seite vor der Zielseite in derselben<br />
Strukturebene eingefügt; bei B wird die Seite nach der Zielseite auf derselben<br />
Strukturebene platziert; bei C wird die Seite der Zielseite untergeordnet.<br />
Wenn Sie eine übergeordnete Seite verschieben,<br />
bewegen Sie gleichzeitig auch ihre untergeordneten<br />
Seiten.<br />
Festlegen der Website-Eigenschaften<br />
In den Website-Eigenschaften legen Sie die Optionen fest, die für<br />
die gesamte Website gelten sollen. Im Allgemeinen werden die<br />
wichtigsten Website-Eigenschaften (Seitenbreite, Seitenhöhe usw.)<br />
automatisch festgelegt, wenn Sie eine Vorlage auswählen oder eine<br />
Website von Grund auf neu entwerfen. Die anderen Einstellungen<br />
müssen Sie häufig nicht ändern. Dies ist jedoch jederzeit möglich.<br />
Einige Optionen aus den Website-Eigenschaften, wie die<br />
Seitendarstellung und Einstellungen für die<br />
Suchmaschinenoptimierung, sind über das Dialogfeld
Einrichten von Websites und Seiten 47<br />
„Seiteneigenschaften“ (siehe Seite 61) auch für einzelne Seiten<br />
verfügbar. Hier können Sie die „globalen“ Vorgaben der Website-<br />
Eigenschaften ergänzen oder auch vollständig durch „lokale“<br />
Werte für einzelne Seiten außer Kraft setzen.<br />
Die Website-Eigenschaften lassen sich wie folgt prüfen oder<br />
bearbeiten:<br />
• Klicken Sie im Menü Bearbeiten auf den Eintrag<br />
Website-Eigenschaften. Es wird nun das Dialogfeld<br />
„Website-Eigenschaften“ geöffnet. Klicken Sie in der<br />
linken Liste einfach auf eine Kategorie, um in der rechten<br />
Fensterhälfte die entsprechenden Optionen<br />
einzublenden.<br />
Arbeiten mit Seiten und Master-Seiten<br />
Vom Designstandpunkt aus betrachtet besteht jede <strong>WebPlus</strong>-Seite<br />
aus einer Seite im „Vordergrund“ und einer Master-Seite im<br />
„Hintergrund“.<br />
Die Master-Seiten sind ein wichtiger Strukturbaustein Ihrer<br />
<strong>WebPlus</strong>-Website, da Sie auf diesen Seiten alle Objekte und<br />
Layoutelemente platzieren können, die auf mehr als einer Seite<br />
verwendet werden, wie z. B. Logos, Hintergrundbilder,<br />
Navigationsleisten oder Umrandungen. Der wichtigste Punkt bei
48 Einrichten von Websites und Seiten<br />
der Arbeit mit Master-Seiten ist, dass sich diese Seiten mehreren<br />
Seiten zuweisen lassen (siehe folgende Abbildung). Die Elemente<br />
auf den Master-Seiten werden dann auch auf allen Seiten<br />
eingeblendet, die sich auf diese Master-Seite beziehen. Zusätzlich<br />
zu diesen gemeinsam genutzten „Hintergrundelementen“ legen Sie<br />
dann für jede einzelne Seite die individuellen Layoutbausteine wie<br />
Texte, Bilder usw. fest.<br />
Die Studio-Registerkarte Website besteht aus einem oberen Feld<br />
für Master-Seiten und einem unteren Feld für die Website-Struktur<br />
Ihrer Standardseiten. Für jede in diesem Feld aufgelistete Seite wird<br />
ebenfalls die Master-Seite angezeigt, die Sie der Seite zugewiesen<br />
haben.<br />
Um das Design der Seiten Ihrer Website zu variieren, können Sie<br />
ebenfalls mehr als eine Master-Seite erstellen (siehe „Hinzufügen,<br />
Entfernen und Neuordnen von Seiten“ auf Seite 53). Nachdem Sie<br />
mehrere Master-Seiten angelegt haben, können Sie diese den<br />
Webseiten einzeln zuweisen oder auch mehrere Master-Seiten für<br />
eine Seite festlegen.
Zuweisen anderer Master-Seiten<br />
Einrichten von Websites und Seiten 49<br />
Standardmäßig werden alle für eine Website neu angelegten Seiten<br />
mit der Master-Seite A erstellt. Möchten Sie jedoch eine andere<br />
Master-Seite verwenden, weisen Sie der Seite einfach Ihre<br />
gewünschte Master-Seite zu und ersetzen die ursprüngliche<br />
Master-Seite.<br />
Zuweisen anderer Master-Seiten zu Seiten<br />
1. Klicken Sie in der Studio-Registerkarte Website mit der<br />
rechten Maustaste auf den Eintrag einer Seite und in dem<br />
Kontextmenü auf Seiteneigenschaften.<br />
2. Deaktivieren Sie in der Kategorie „Master-Seiten“ des<br />
nun geöffneten Dialogfeldes die Option der<br />
ursprünglichen Master-Seite und wählen Sie die<br />
gewünschte Master-Seite per Mausklick aus.<br />
3. Klicken Sie auf die Schaltfläche OK.<br />
Aufheben der Zuweisung einer Master-Seite<br />
• Deaktivieren Sie den Eintrag der Master-Seite in der<br />
Kategorie „Master-Seite“ des Dialogfelds<br />
„Seiteneigenschaften“.<br />
Wenn Sie alle Master-Seiten deaktivieren, verwendet<br />
die Seite die Website-Darstellung, die Sie in den<br />
Website-Eigenschaften (Bearbeiten > Website-<br />
Eigenschaften) festgelegt haben.<br />
Zuweisen mehrerer Master-Seiten<br />
Mit <strong>WebPlus</strong> können Sie für eine Webseite auch mehrere Master-<br />
Seiten festlegen, um das Design der Seite modular aus mehreren<br />
Bereichen aufzubauen. Hierbei können Sie auch die Reihenfolge<br />
der Master-Seiten relativ zueinander und zu der Webseite festlegen
50 Einrichten von Websites und Seiten<br />
und somit die Abfolge bestimmen, in der die entsprechenden<br />
Objekte auf der Seite platziert werden.<br />
Ein Beispiel: Ihre Website verwendet zwei Designs aus den Seiten<br />
„Master A“ und „Master B“. Mit dem Dialogfeld<br />
„Seiteneigenschaften“ können Sie „Master B“ mit dem IPSUM-<br />
Text vor der ausgewählten Seite platzieren, sodass „Master A“ als<br />
Seitenhintergrund fungiert.<br />
Zuweisen mehrerer Master-Seiten zu einer Webseite<br />
1. Klicken Sie in der Studio-Registerkarte Website mit der<br />
rechten Maustaste auf den Eintrag einer Seite und in dem<br />
Kontextmenü auf Seiteneigenschaften.<br />
2. Klicken Sie in der Kategorie „Master-Seiten“ des<br />
Dialogfelds auf die Einträge mehrerer Master-Seiten.<br />
3. Klicken Sie auf die Schaltfläche OK. Die Seite verwendet<br />
nun alle Seitenelemente der ausgewählten Master-Seiten.
Einrichten von Websites und Seiten 51<br />
In der Website-Struktur der Studio-Registerkarte „Website“<br />
werden alle Seiten mit einem Pluszeichen markiert (anstelle eines<br />
Buchstabens wie „A“, „B“ usw.), denen mehrere Master-Seiten<br />
zugewiesen sind.<br />
Neuordnen der Seiteninhalte und Master-Seiten<br />
• Wählen Sie den Seiteneintrag in der Kategorie „Master-<br />
Seiten“ des Dialogfelds „Seiteneigenschaften“ aus und<br />
klicken Sie auf eine der Schaltflächen Aufwärts oder<br />
Abwärts.<br />
Bearbeiten von Objekten auf Master-Seiten<br />
Wenn Sie mit Seiten arbeiten, denen Master-Seiten zugewiesen<br />
sind, tragen die Objekte der Master-Seite zu dem Aufbau der Seite<br />
bei. Sie können diese Objekte schnell und einfach von der Webseite<br />
aus bearbeiten, indem Sie ein Objekt auswählen und die darunter<br />
eingeblendeten Symbole verwenden.<br />
Bearbeiten von Objekten der Master-Seite<br />
1. Wählen Sie auf der normalen Seite das Objekt einer<br />
Master-Seite aus, um die entsprechende Symbolleiste<br />
einzublenden.<br />
2. Klicken Sie auf das Symbol Auf Master-Seite<br />
bearbeiten. Die Master-Seite wird nun zur Bearbeitung<br />
geöffnet.
52 Einrichten von Websites und Seiten<br />
Manchmal möchten Sie vielleicht die Seitenobjekte, die von der<br />
Master-Seite stammen, bearbeiten, ohne die Master-Seite zu<br />
verändern, sodass sich Ihre Änderung nur auf die aktuelle Seite<br />
auswirkt und nicht auch auf alle anderen Seiten, denen die Master-<br />
Seite zugewiesen ist. Sie können in diesen Fällen die Objekte von<br />
der Master-Seite auf die normale Webseite übernehmen. Hierbei<br />
wird das Objekt der Master-Seite im Grunde kopiert und das auf<br />
der Webseite platzierte „Original“ durch eine Kopie ersetzt, die Sie<br />
beliebig ändern können.<br />
Übernehmen der Objekte von einer Master-Seite<br />
1. Wählen Sie auf der normalen Seite das Objekt einer<br />
Master-Seite aus, um die entsprechende Symbolleiste<br />
einzublenden.<br />
2. Klicken Sie auf das Symbol Aus Master-Seite<br />
übernehmen. Das Original wird nun auf der Webseite<br />
durch eine Kopie ersetzt, die Sie beliebig verändern<br />
können, ohne die Master-Seite zu beeinflussen.<br />
Alle anderen Seiten, denen die Master-Seite<br />
zugewiesen ist, bleiben von dieser Änderung ebenfalls<br />
verschont.<br />
Wenn Sie Ihre Meinung später ändern, können Sie das geänderte<br />
Objekt jederzeit wieder durch die Originalversion der Master-Seite<br />
ersetzen.<br />
Zuweisen der ursprünglichen Objektversion<br />
1. Wählen Sie auf der normalen Seite das übernommene<br />
Objekt einer Master-Seite aus, um die entsprechende<br />
Symbolleiste einzublenden.<br />
2. Klicken Sie auf das Symbol Auf Master-Seite<br />
zurücksetzen.
Einrichten von Websites und Seiten 53<br />
Hinzufügen, Entfernen und Neuordnen<br />
von Seiten<br />
In der Studio-Registerkarte<br />
„Website“ stehen Ihnen die<br />
folgenden Optionen zur<br />
Verfügung.<br />
• Einfügen von Seiten<br />
• Löschen von Seiten.<br />
• Einfügen einer oder<br />
mehrerer Master-<br />
Seiten.<br />
• Anordnen der Seiten in der Website-Struktur durch<br />
Klicken und Ziehen.<br />
• Einfügen von Seiten aus einer installierten<br />
Designvorlage.<br />
• Einfügen von Offsite-Links.<br />
• Einfügen von HTML-Seiten.<br />
• Festlegen einer Seite als Homepage.<br />
In dem oberen Feld „Master-Seiten“ der Registerkarte arbeiten Sie<br />
mit den Master-Seiten. In dem unteren Feld „Seiten“ befindet sich<br />
der Strukturbaum der Website, mit dem Sie auf die normalen<br />
Seiten zugreifen können.<br />
Da <strong>WebPlus</strong> auch HTML-Seiten und Offsite-Links unterstützt,<br />
lassen sich diese Elemente genau so in dem Website-Strukturbaum<br />
platzieren wie normale Seiten. Die Symbole für HTML-Seiten und<br />
Offsite-Links unterscheiden sich von denen für Standardseiten,
54 Einrichten von Websites und Seiten<br />
sodass Sie auf einen Blick erkennen können, dass sich hinter diesen<br />
Einträgen reiner HTML-Code (siehe <strong>WebPlus</strong>-Hilfe) bzw. ein Link<br />
zu einer externen Webseite verbirgt.<br />
Einfügen von Seiten<br />
Hinzufügen einer neuen, leeren Seite<br />
1. Wählen Sie in dem unteren Feld „Seiten“ der Studio-<br />
Registerkarte „Website“ die Seite aus dem Website-<br />
Strukturbaum aus, nach der Sie die neue Seite einfügen<br />
möchten.<br />
2. Klicken Sie über dem Feld „Seiten“ der Studio-<br />
Registerkarte „Website“ auf den nach unten zeigenden<br />
Pfeil des Symbols Neue Seite oder neuen Link<br />
hinzufügen. Klicken Sie in dem nun geöffneten Menü<br />
auf Neue leere Seite.<br />
3. Wählen Sie in dem Dialogfeld „Seiteneigenschaften“ die<br />
Optionen für die neue Seite aus (siehe „Festlegen der<br />
Seiteneigenschaften“ auf Seite 61).<br />
4. Klicken Sie auf die Schaltfläche OK.<br />
Die neue Seite wird nun an der von Ihnen ausgewählten Position<br />
der Website-Struktur eingefügt. Die Abmessungen der Seite<br />
werden aus den Website-Eigenschaften (siehe Seite 46)<br />
übernommen. Sie können die Position und Hierarchiestufe der<br />
Seite jederzeit verändern oder der Seite eine andere Master-Seite<br />
zuweisen (siehe „Neuordnen von Seiten“ oder „Zuweisen anderer<br />
Master-Seiten“ auf Seite 56 und 49).<br />
Alle neu erstellten Seiten verwenden stets die aktuell in<br />
dem Dialogfeld „Website-Eigenschaften“ festgelegten<br />
Werte (Bearbeiten > Website-Eigenschaften), wie z.<br />
B. die Standardseitengröße und -ausrichtung, sofern
Einrichten von Websites und Seiten 55<br />
Sie diese Optionen nicht mit dem Dialogfeld<br />
„Seiteneigenschaften“ außer Kraft setzen.<br />
Leere Seiten können ebenfalls auf einer Master-Seite<br />
basieren (z. B. wenn Sie die Website mit einer Vorlage<br />
erstellt haben) und daher bereits die Seitenelemente<br />
enthalten, die auf der Master-Seite festgelegt sind.<br />
Einfügen von Master-Seiten<br />
Hinzufügen einer neuen Master-Seite<br />
1. Klicken Sie in der Studio-Registerkarte „Website“ auf die<br />
Schaltfläche Master Seiten >, um das Feld „Master-<br />
Seiten“ zu öffnen.<br />
2. Klicken Sie über dem Feld „Master-Seiten“ auf das<br />
Symbol Neue Master-Seite hinzufügen.<br />
In dem Feld „Master-Seiten“ der Studio-Registerkarte „Website“<br />
wird nun eine neue Master-Seite angezeigt.<br />
Wenn Sie bestimmte Master-Seiten für eine Seite<br />
festlegen möchten, gehen Sie wie unter „Arbeiten mit<br />
Seiten und Master-Seiten“ auf Seite 47 beschrieben vor.<br />
Löschen von Seiten<br />
Löschen einer Seite oder Master-Seite<br />
1. Wählen Sie in der Studio-Registerkarte „Website“ die zu<br />
löschende Seite oder Master-Seite mit einem Klick auf<br />
ihren Eintrag aus.<br />
2. Klicken Sie über dem entsprechenden Fenster auf<br />
die Option Ausgewählte Seite löschen, um die Seite zu<br />
entfernen.
56 Einrichten von Websites und Seiten<br />
Wenn Sie eine Seite löschen, können Sie wahlweise alle<br />
Hyperlinks löschen, die von Ihrer Website auf die<br />
gelöschte Seite verweisen, oder die Hyperlinks auf eine<br />
andere Seite umleiten. Alle Hyperlinks, die auf Anker<br />
der gelöschten Seite verweisen, lassen sich ebenfalls<br />
löschen.<br />
Hinzufügen von HTML-Seiten<br />
HTML-Seiten lassen sich in die Website-Struktur jeder Website<br />
einfügen. Genau wie Standardseiten können Sie diese Seiten auch<br />
in die Navigation einbinden.<br />
Einfügen einer HTML-Seite<br />
1. Wählen Sie in dem unteren Feld „Seiten“ der Studio-<br />
Registerkarte „Website“ die Seite aus, nach der Sie die<br />
neue Seite einfügen möchten.<br />
2. Klicken Sie über dem Feld „Seiten“ der Studio-<br />
Registerkarte „Website“ auf den nach unten zeigenden<br />
Pfeil des Symbols Neue Seite oder neuen Link<br />
hinzufügen. Klicken Sie in dem nun geöffneten Menü<br />
auf Neue HTML-Seite<br />
Die neue HTML-Seite wird nun zu der Registerkarte „Website“<br />
hinzugefügt. Nähere Informationen hierzu finden Sie unter dem<br />
Thema „Erstellen von HTML-Seiten“ in der <strong>WebPlus</strong>-Hilfe.<br />
Neuordnen von Seiten<br />
Mit der Studio-Registerkarte „Website“ können Sie Seiten nicht<br />
nur hinzufügen oder löschen, sondern auch innerhalb der Website<br />
an beliebige Positionen verschieben. Mithilfe der Hierarchie aus<br />
übergeordneten und untergeordneten Seiten lassen sich die<br />
einzelnen Seiten bequem durch einfaches Ziehen mit der Maus
Einrichten von Websites und Seiten 57<br />
oder über Schaltflächen verschieben. Für das Verschieben von<br />
Seiten stehen Ihnen unterschiedliche Ziele zur Verfügung:<br />
• Eine neue Position innerhalb der Reihenfolge (aufwärts<br />
oder abwärts) einer einzigen Strukturebene.<br />
• Eine übergeordnete Strukturebene<br />
• Eine untergeordnete Strukturebene<br />
Verschieben einer Seite<br />
1. Öffnen Sie die Studio-Registerkarte „Website“.<br />
2. Wählen Sie mit einem einfachen Mausklick die<br />
gewünschte Seite im Strukturbaum der Website aus.<br />
3. (Per Drag & Drop) Ziehen Sie den Seiteneintrag mit<br />
gedrückter Maustaste nach oben oder nach unten auf<br />
eine neue Position des Strukturbaums. Der Mauszeiger<br />
gibt Ihnen einen Anhaltspunkt zu der Positionierung der<br />
verschobenen Seite in Bezug auf die Seite, über der sich<br />
der Mauszeiger gerade befindet:<br />
Die Seite wird auf derselben Stufe eingefügt, wie<br />
die markierte Seite und direkt nach der markierten<br />
platziert.<br />
Die Seite wird als untergeordnete Seite der<br />
markierten Zielseite platziert.<br />
Einfügen von Vorlagenseiten<br />
Das Einfügen leerer Seiten ist sehr praktisch, wenn Sie eine<br />
Website von Grund auf neu entwerfen. Möchten Sie jedoch etwas<br />
Zeit sparen, können Sie auch eine vorgefertigte Seite aus einer der<br />
<strong>WebPlus</strong>-Vorlagen einfügen. Damit das Originaldesign der Seite<br />
erhalten bleibt, lässt sich die Master-Seite, die dieser Seite
58 Einrichten von Websites und Seiten<br />
zugewiesen ist, direkt zusammen mit der Seite in Ihr Projekt<br />
„importieren“.<br />
Einfügen einer neuen Seite aus einer Vorlage<br />
1. Wählen Sie in der Studio-Registerkarte „Website“ die<br />
Seite aus, nach der die neue Seite eingefügt werden soll.<br />
2. Klicken Sie über dem Feld „Seiten“ der Studio-<br />
Registerkarte „Website“ auf den nach unten zeigenden<br />
Pfeil des Symbols Neue Seite oder neuen Link<br />
hinzufügen. Klicken Sie in dem nun geöffneten Menü<br />
auf Neue Vorlagenseite.<br />
3. Wählen Sie in dem Dialogfeld Neue Vorlagenseite<br />
einfügen eine Vorlage in der linken Liste aus und<br />
markieren Sie dann die Seite mit einem Häkchen, die Sie<br />
einfügen möchten (Sie können ebenfalls mehrere Seiten<br />
auswählen).<br />
4. Mit <strong>WebPlus</strong> können Sie bequem festlegen, ob die mit<br />
einer Seite verknüpfte Master-Seite ebenfalls kopiert<br />
werden soll. Klicken Sie hierzu in der linken oberen Ecke<br />
auf einen der folgenden Einträge des Dropdownmenüs:<br />
• Master-Seite kopieren: Mit dieser Einstellung wird<br />
die Master-Seite immer in Ihre Website kopiert.<br />
• Master-Seite vergleichen und kopieren: Hierbei<br />
prüft das Programm, ob die Master-Seite bereits in
Einrichten von Websites und Seiten 59<br />
Ihrer Website vorhanden ist. Ist die Master-Seite<br />
noch nicht Teil Ihrer Website, wird sie kopiert.<br />
• Ohne Master-Seite: Die Master-Seite wird unter<br />
keinen Umständen in Ihre Website kopiert.<br />
5. Klicken Sie auf die Schaltfläche Öffnen. Die Seite wird<br />
nun in die Studio-Registerkarte „Website“ eingefügt.<br />
Einfügen von Offsite-Links<br />
Sie können ebenfalls einen Offsite-Link zu Ihrer Website-Struktur<br />
hinzufügen. Für gewöhnlich handelt es sich hierbei um Links zu<br />
Seiten oder Ressourcen, die kein Teil Ihrer Website, in der<br />
Navigationsstruktur Ihrer Website jedoch durchaus hilfreich sind.<br />
Der Offsite-Link wird in der Website-Struktur und in den<br />
Navigationselementen angezeigt, sodass Sie ihn genauso bearbeiten<br />
können, wie eine Seite aus Ihrer Website.<br />
Hinzufügen eines Offsite-Links<br />
1. Wählen Sie in der Studio-Registerkarte „Website“ die<br />
Seite aus, nach der die neue Seite eingefügt werden soll.<br />
2. Klicken Sie über dem Feld „Seiten“ der Studio-<br />
Registerkarte „Website“ auf den nach unten zeigenden<br />
Pfeil des Symbols Neue Seite oder neuen Link<br />
hinzufügen. Klicken Sie in dem nun geöffneten Menü<br />
auf Neuer Offsite-Link.<br />
3. In der Registerkarte „Offsite-Link“ stehen Ihnen<br />
verschiedene Linkoptionen zur Verfügung:<br />
• Geben Sie einen Menünamen ein, um den Offsite-<br />
Link in dem Strukturbaum der Website eindeutig zu<br />
identifizieren. Dieser Name übernimmt dieselbe<br />
Funktion wie ein Seitenname.
60 Einrichten von Websites und Seiten<br />
• Möchten Sie den Link in Ihre Website-Navigation<br />
integrieren, aktivieren Sie die Option In Navigation<br />
einbeziehen.<br />
• Möchten Sie die Seite als Untermenüeintrag in<br />
Navigationsleisten mit horizontalen Trennlinien<br />
unter oder über der Seite markieren, aktivieren Sie<br />
unter „Trennelemente“ die Option(en) Vor<br />
und/oder Nach.<br />
• Möchten Sie zusätzlichen Text zu der Seite in dem<br />
Untermenüelement der Navigationsleiste<br />
hinzufügen, geben Sie den Text in das Feld<br />
Beschreibung ein.<br />
4. Wählen Sie in der Registerkarte „Hyperlinks“ den Zieltyp<br />
für den Offsite-Link aus (z. B. Smart-Objekt) und das<br />
Ziel (z. B. ein zuvor erstelltes Forum). Nähere<br />
Informationen hierzu finden Sie unter „Auswählen eines<br />
Hyperlinkziels“ in der <strong>WebPlus</strong>-Hilfe.<br />
5. Wählen Sie in der Registerkarte „Zielfenster“ ein Fenster<br />
oder einen Rahmen aus, in dem das Ziel angezeigt<br />
werden soll.<br />
6. Klicken Sie auf die Schaltfläche OK.<br />
Festlegen der Homepage<br />
Festlegen einer Website als Homepage<br />
• Klicken Sie in der Studio-Registerkarte „Website“ mit der<br />
rechten Maustaste auf eine Standardseite und in dem<br />
Kontextmenü auf Als Homepage festlegen.
Einrichten von Websites und Seiten 61<br />
Festlegen der Seiteneigenschaften<br />
Ihre <strong>WebPlus</strong>-Website ist nach einer bestimmten Struktur<br />
aufgebaut und umfasst die eigentliche Website, eine oder mehrere<br />
Master-Seiten und einige einzelne Seiten. Für jeden Teil dieser<br />
Struktur können Sie unterschiedliche Eigenschaften festlegen, die<br />
entscheidend zu der Darstellung und Funktionalität der<br />
publizierten Website im Internet beitragen. Wenn Sie eine neue<br />
Website mit einer <strong>WebPlus</strong>-Vorlage oder von Grund auf neu<br />
erstellen, können Sie entweder die Standardeinstellungen<br />
übernehmen oder die einzelnen Werte flexibel anpassen.<br />
Die Eigenschaften für Seiten (Master-Seiten) lassen sich wie<br />
folgt prüfen oder bearbeiten:<br />
• Klicken Sie mit der rechten Maustaste auf die aktive Seite<br />
und in ihrem Kontextmenü auf Seiteneigenschaften.<br />
Einfügen von Hintergründen<br />
<strong>WebPlus</strong> enthält eine breite Palette an Hintergründen, die Sie<br />
sowohl für alle Seiten Ihrer Website als auch gezielt für einzelne<br />
Seiten festlegen können.<br />
Diese Hintergründe gehören zu den Quelldateien (siehe Seite 263),<br />
die in Form verschiedener Quelldatei-Pakete verfügbar sind, wie z.<br />
B. „Fußzeilen“, „Verläufe“, „Kopfzeilen“, „Muster“, „Foto“ und<br />
„Texturen“.
62 Einrichten von Websites und Seiten<br />
Darüber hinaus können Sie für den Hintergrund einzelner Seiten<br />
(oder aller Seiten Ihrer Website) auch bestimmte Farben über die<br />
Seiteneigenschaften und die Website-Eigenschaften (siehe Seite 61<br />
und 46) festlegen. Hierfür lassen sich sowohl normale Farben als<br />
auch Schemafarben verwenden.<br />
Legen Sie das Hintergrunddesign über die Website-<br />
Einstellungen fest, übernehmen alle Seiten, die Sie neu<br />
erstellen, automatisch diese Einstellungen. Sie können<br />
jedoch diese Vorgaben auch für einzelne Seiten<br />
umgehen und dann die Seiten- und<br />
Hintergrundeinstellungen individuell festlegen.<br />
Einfügen von Hintergrundbildern<br />
Einfügen eines Hintergrundbilds für Ihre Seite<br />
1. Klicken Sie in der Studio-Registerkarte<br />
Quelldateien auf Durchsuchen.<br />
2. Klicken Sie in dem Dialogfeld Quelldatei-Browser unter<br />
Kategorien auf Hintergründe.<br />
3. Durchsuchen Sie die Quelldatei-Pakete nach einem<br />
passenden Hintergrund. Klicken Sie entweder auf einen<br />
einzelnen Hintergrund oder auf Alles hinzufügen, wenn<br />
Sie alle Hintergründe des Pakets übernehmen möchten.<br />
Ausgewählte Miniaturansichten werden stets mit einem<br />
Häkchen markiert.<br />
4. Klicken Sie als Letztes auf die Schaltfläche Schließen. Die<br />
Hintergründe werden nun in der Kategorie<br />
„Hintergründe“ der Studio-Registerkarte aufgelistet.<br />
5. Öffnen Sie die gewünschte Seite im Arbeitsbereich und<br />
ziehen Sie die Miniatur des Hintergrunds direkt auf die<br />
Seite.
Einrichten von Websites und Seiten 63<br />
6. Wählen Sie in dem nun angezeigten Dialogfeld aus, ob<br />
der Hintergrund für alle Seiten gelten soll (d. h. als<br />
Standardhintergrund der Website festgelegt wird) oder<br />
nur für die aktuelle Seite. Mit der ersten Option ersetzen<br />
Sie alle Hintergründe in Seiten, die für die Verwendung<br />
der Website-Einstellungen konfiguriert sind.<br />
7. Klicken Sie auf die Schaltfläche OK.<br />
Alternativ können Sie auch ein Hintergrundbild über den<br />
Menüpunkt Bearbeiten > Website-Eigenschaften oder Bearbeiten<br />
> Seiteneigenschaften festlegen. Legen Sie einfach die gewünschte<br />
Einstellung über die Option Hintergrund fest.<br />
Arbeiten mit mehreren Bildern als Hintergrund<br />
Wenn Sie den Hintergrund Ihrer Seiten etwas aufwendiger<br />
gestalten möchten, können Sie mit <strong>WebPlus</strong> auch mehrere Bilder<br />
kombinieren. Jedes Bild lässt sich hierbei als Hintergrund für ein<br />
wichtiges Seitenelement festlegen, wie z. B. Kopfzeile, Fußzeile,<br />
Kachelung oder Logo.<br />
(A) Kopfzeile, (B) Fußzeile, (C) Gekachelter Hintergrund und (D) Firmenlogo.
64 Einrichten von Websites und Seiten<br />
Besonders professionelle Ergebnisse erzielen Sie, wenn<br />
Sie Hintergründe aus mehreren Bildern mit<br />
Bildtransparenzen und Objekten mit<br />
Verlaufstransparenzen kombinieren.<br />
Entwerfen von Hintergründen mit mehreren Bildern<br />
1. Klicken Sie auf den Menüpunkt Bearbeiten > Website-<br />
Eigenschaften und dann auf die Option „Hintergrund“.<br />
Klicken Sie auf Hinzufügen, um die Bilder in Ihren<br />
Hintergrund zu integrieren.<br />
2. Stellen Sie die Optionen für Wiederholung und Position<br />
ein. Die Bilder werden in Relation zu den Kanten des<br />
Browserfensters platziert.<br />
3. Klicken Sie auf die Schaltfläche OK.<br />
Alle Bilder werden nun in der Liste „Hintergrundbilder“<br />
aufgeführt.<br />
Mit den Schaltflächen neben der Liste<br />
können Sie ein ausgewähltes Bild in der Liste aufwärts<br />
und abwärts verschieben. Auf diese Weise lässt sich<br />
flexibel festlegen, wie jedes einzelne Bild in Relation zu<br />
den anderen Bildern angezeigt wird. Das Bild, dessen<br />
Eintrag am höchsten in der Liste steht, wird vor allen<br />
anderen Bildern in Ihrem Hintergrund angezeigt.<br />
Festlegen der Seiten- und Hintergrundfarbe<br />
Festlegen der Farben für Seiten und Hintergrund<br />
1. Klicken Sie auf den Menüpunkt Bearbeiten > Website-<br />
Eigenschaften.<br />
2. Klicken Sie in dem Dialogfeld auf die Option Seite ><br />
Hintergrund und dann auf den Pfeil der Option<br />
Seitenfarbe oder Hintergrundfarbe.
Einrichten von Websites und Seiten 65<br />
3. Wählen Sie einfach eine andere Farbe über die Farbfelder<br />
aus, die Schemafarben und andere Farben anzeigen. Mit<br />
dem Eintrag Weitere Farben... öffnen Sie das Dialogfeld<br />
„Farbauswahl“.<br />
4. Klicken Sie auf die Schaltfläche OK.<br />
Wenn Sie die Seitenfarbe als transparent festlegen,<br />
wird der darunter liegende Seitenhintergrund sichtbar,<br />
sodass die Seitenabmessungen unsichtbar scheinen.<br />
Der eigentliche Inhalt der Seite (Texte, Bilder usw.) wird<br />
nach wie vor nur innerhalb des Bereichs angezeigt, den<br />
Sie als Seitenabmessungen festgelegt haben.<br />
Wenn Sie ein Bild mit transparenten Bereichen als<br />
Hintergrund verwenden, ist die Hintergrundfarbe<br />
durch diese Bereiche sichtbar. Bilder ohne Transparenz<br />
verdecken die Hintergrundfarbe vollständig.<br />
Weitere Informationen zu den anderen Einstellungen finden Sie in<br />
der Hilfe zu <strong>WebPlus</strong>.<br />
Festlegen benutzerdefinierter Hintergründe<br />
Sie können für einzelne Standardseiten oder Master-Seiten die in<br />
den Website-Eigenschaften festgelegte Seitenfarbe,<br />
Hintergrundfarbe sowie das Hintergrundbild ignorieren und durch<br />
individuelle Vorgaben ersetzen. Wenn Sie die Einstellungen für<br />
eine Master-Seite ändern, beeinflussen Sie damit auch die<br />
Darstellung aller Standardseiten, denen diese Master-Seite<br />
zugewiesen ist. Seiten, denen Sie keine Master-Seite zugewiesen<br />
haben, verwenden standardmäßig die Einstellungen des Website-<br />
Hintergrunds. Sie können diese Einstellungen jedoch über die<br />
Kategorie „Hintergrund“ des Dialogfelds „Seiteneigenschaften“<br />
außer Kraft setzen.
66 Einrichten von Websites und Seiten<br />
Festlegen eigener Hintergründe<br />
1. Öffnen Sie in dem Dialogfeld die Kategorie Hintergrund<br />
und legen Sie in dem Dropdownfeld Hintergrund die<br />
Option Seitenhintergrund verwenden fest.<br />
2. Klicken Sie auf den nach unten zeigenden Pfeil der Tafel<br />
Seitenfarbe und wählen Sie eine Farbe aus. Die<br />
Schemafarben werden in diesem Menü mit ihren<br />
entsprechenden Nummern angezeigt.<br />
3. Wiederholen Sie den vorangehenden Schritt für die<br />
Hintergrundfarbe.<br />
ODER<br />
Für Hintergrundbilder klicken Sie auf Hinzufügen und<br />
wählen dann ein oder mehrere Bilder per Dialogfeld aus.<br />
4. Klicken Sie auf die Schaltfläche OK.
Arbeiten mit Farbschemata<br />
Einrichten von Websites und Seiten 67<br />
<strong>WebPlus</strong> bietet eine breite Palette an Farbschemata, die Sie<br />
bequem auswählen können, wenn Sie eine Website mit einer<br />
Designvorlage erstellen oder von Grund auf neu entwerfen. Bei der<br />
Arbeit mit Vorlagen-basierenden Websites bestimmt das<br />
Farbschema den Look Ihrer Seite und legt z. B. Farben für<br />
Hyperlinks fest. Alle Vorlagen verwenden ein Farbschema, sodass<br />
Sie durch Wechseln des Schemas mit nur einem Mausklick schnell<br />
und einfach die Stimmung der Website ändern können!<br />
Farbschemata: (A) Koralle, (B) Smoothie und (C) Standard<br />
Wenn Sie die Vorlage für eine neue Website auswählen, können<br />
Sie eines von drei Farbschemata festlegen, die speziell für die<br />
ausgewählte Vorlage entworfen wurden, oder auch eines der<br />
globalen Farbschemata verwenden. Nähere Informationen hierzu<br />
finden Sie unter „Erstellen einer Website mit einer Designvorlage“<br />
auf Seite 30.
68 Einrichten von Websites und Seiten<br />
Wie funktionieren Farbschemata?<br />
Farbschemata in <strong>WebPlus</strong> funktionieren ein wenig wie das Malen<br />
nach Zahlen. Sie weisen den verschiedenen Designelementen Ihrer<br />
Seite eine Schemafarbe zu, für die innerhalb des Farbschemas eine<br />
bestimmte Nummer festgelegt ist.<br />
Diese Farben werden in Farbfeldern gespeichert (nummeriert von 1<br />
bis 12), die in der Studio-Registerkarte „Farbfelder“ aufgelistet sind.<br />
Das Farbschema „Smoothie“<br />
Diese Farbfelder stehen für das Website-Farbschema. Von hier aus<br />
können Sie den verschiedenen Elementen Ihrer Webseiten die<br />
einzelnen Schemafarben zuweisen. Bei den Designvorlagen haben<br />
wir diese Zuordnung bereits für Sie durchgeführt.<br />
Wenn Sie nun ein anderes Farbschema auswählen, werden die<br />
aktuellen Schemafarben durch die entsprechenden Farben des<br />
neuen Schemas ausgetauscht, und die Website erhält einen völlig<br />
anderen Look.
Einrichten von Websites und Seiten 69<br />
Wenn Sie Ihren Schemafarben eigene Namen<br />
verleihen, können Sie später schnell mit einem Blick<br />
feststellen, welche Aufgabe die Farbe in Ihrer Website<br />
übernimmt. Sie können sich hierbei an den<br />
Beschreibungen auf der rechten Seite orientieren.<br />
Nähere Informationen hierzu finden Sie unter<br />
„Festlegen von Namen für Schemafarben“ auf Seite 70.<br />
Für die Hyperlinks in Textformatvorlagen können Sie ebenfalls<br />
Schemafarben festlegen, die dann in der gesamten Website<br />
verwendet werden. Dies ist besonders praktisch, wenn Sie die<br />
Hyperlinkfarben von Überschriften (z. B. Überschrift 1,<br />
Überschrift 2) anders färben möchten als die des Textkörpers.<br />
Auswählen von Farbschemata<br />
Auswählen eines vordefinierten Farbschemas<br />
1. Klicken Sie in der Standardkontextleiste auf<br />
Farbschema-Designer.<br />
2. Wählen Sie in der Registerkarte „Farbschemata“ des<br />
Dialogfelds ein anderes Farbschema in der Liste aus und<br />
klicken Sie auf OK.
70 Einrichten von Websites und Seiten<br />
Das Programm färbt nun alle Elemente der Website,<br />
denen eine der 12 Farbnummern des alten Schemas<br />
zugewiesen war, in der entsprechenden Farbe des neuen<br />
Schemas ein.<br />
Sie können für jede Website immer nur ein aktives Farbschema<br />
festlegen, das als Website-Farbschema bezeichnet und stets in der<br />
Studio-Registerkarte „Farbfelder“ angezeigt wird. Wenn Sie die<br />
Website speichern, wird ihr aktuelles Farbschema automatisch<br />
zusammen mit dem Dokument gespeichert.<br />
Mit dem Farbschema-Designer können Sie ebenfalls<br />
Schemafarben ändern oder Ihre eigenen Farbschemata<br />
zusammenstellen (siehe <strong>WebPlus</strong>-Hilfe).<br />
Festlegen von Namen für Schemafarben<br />
Bei 12 verschiedenen Schemafarben ist es manchmal schwierig,<br />
sich die Verwendungszwecke aller Farben zu merken. Sie können<br />
in dem Farbschema-Designer jedoch für jede Schemafarbe einen<br />
aussagekräftigen Namen festlegen.<br />
Festlegen von Namen für Schemafarben<br />
1. Klicken Sie in der Standardkontextleiste auf<br />
Farbschema-Designer.<br />
2. Geben Sie in die Registerkarte Website-Farbnamen<br />
einen Namen für die einzelnen Schemafarben ein, an<br />
denen Sie ihren Verwendungszweck gut erkennen<br />
können, und klicken Sie auf OK.<br />
Ihre selbst festgelegten Namen für die Schemafarben werden nun<br />
als QuickInfos angezeigt, wenn Sie den Mauszeiger in der Studio-<br />
Registerkarte Farbfelder auf eine Schemafarbe bewegen.
Einrichten von Websites und Seiten 71<br />
Weitere Informationen zu dem Festlegen von Schemafarben für<br />
Website-Hintergrund, Seitenfarbe, Hyperlinks,<br />
Textformatvorlagen und andere Seitenobjekte finden Sie in der<br />
<strong>WebPlus</strong>-Hilfe.<br />
Die dynamischen Führungslinien<br />
Anstatt für eine genaue Skalierung und Platzierung Ihrer Objekte<br />
manuell Seitenführungslinien festzulegen oder Objekte<br />
auszuwählen und dann mit Transformations- und<br />
Ausrichtungsoptionen zu bearbeiten, können Sie in <strong>WebPlus</strong> auch<br />
dynamische Führungslinien verwenden.<br />
Wenn Sie ein Objekt verändern, bietet Ihnen <strong>WebPlus</strong> „visuelle<br />
Vorschläge“ für die Ausrichtungsoptionen, wie z. B. an der linken,<br />
rechten, oberen oder unteren Kante eines Objekts sowie der Mitte<br />
des Objekts oder der Seitenmitte.<br />
Durch Ziehen über Objekte oder Auswählen platzierter Objekte<br />
können Sie diese Ausrichtungshilfen für maximal drei<br />
Seitenelemente anzeigen lassen.<br />
Standardmäßig sind die dynamischen Führungslinien<br />
aktiviert. Sie können diese Linien aber auch jederzeit<br />
deaktivieren und wieder reaktivieren.<br />
Aktivieren/Deaktivieren dynamischer Führungslinien<br />
1. Klicken Sie in der Standardkontextleiste auf die<br />
Schaltfläche Optionen.<br />
2. Klicken Sie auf den Menüpunkt Layout > Automatische<br />
Ausrichtung und aktivieren/deaktivieren Sie die Option<br />
Dynamische Führungslinien verwenden.<br />
Um die Ausrichtung auch für die Seitenmitte zu<br />
aktivieren, müssen Sie auch die Option Seitenmitte<br />
auswählen.
72 Einrichten von Websites und Seiten<br />
Ausrichten von Objekten<br />
Das folgende Beispiel zeigt die Arbeit mit dynamischen<br />
Führungslinien. Das dunkle Objekt ist bereits auf der Seite<br />
platziert, während das helle gerade an seine Position gezogen wird.<br />
Links Rechts<br />
Oben Unten<br />
Objektmitte
Seitenmitte<br />
Einrichten von Websites und Seiten 73<br />
Sie können je nach Position Ihres gezogenen Objekts<br />
auch die obigen Ausrichtungsoptionen kombinieren,<br />
um z. B. eine Ausrichtung rechts und unten<br />
vorzunehmen.<br />
Dynamische Führungslinien werden rot oder blau<br />
angezeigt - je nachdem, ob die Ausrichtung an<br />
anderen Objekten oder der Seite erfolgt.
74 Einrichten von Websites und Seiten<br />
Skalieren von Objekten<br />
Das folgende Beispiel zeigt die Größenänderung von Objekten mit<br />
dynamischen Führungslinien. Das dunkle Objekt ist bereits auf der<br />
Seite platziert, während das helle gerade an seine Position gezogen<br />
wird.
4<br />
Die Layoutelemente
76 Die Layoutelemente
Einfügen von Textrahmen<br />
Die Layoutelemente 77<br />
Für gewöhnlich werden die Texte in <strong>WebPlus</strong>-Projekten in HTML-<br />
Textrahmen platziert, da sich diese „Container“ sowohl für<br />
einzelne Wörter und Absätze eignen als auch für ganze Buchkapitel<br />
oder Zeitungsartikel. Neben den Rahmentexten können Sie auch<br />
künstlerische Texte für einzelne Überschriften und Spezialeffekte<br />
erstellen oder Tabellentexte für eine zeilen- oder spaltenweise<br />
Darstellung (siehe auch „Einfügen von Tabellen“ auf Seite 103).<br />
Was sind Textrahmen?<br />
Ein Textrahmen ist im Grund eine Miniaturseite, die Rahmentext<br />
enthält, der in einem oder mehreren Absätzen durch den Rahmen<br />
fließt. Der Text in einem Rahmen wird in <strong>WebPlus</strong> als Story<br />
bezeichnet.<br />
• Für ausgewählte Rahmen zeigt das Programm<br />
automatisch die Begrenzungsränder als Linie mit<br />
verschiedenen Ziehpunkten an. Um eine Einfügemarke<br />
für Texte oder Bilder in einem Rahmen zu platzieren,<br />
klicken Sie einfach mit dem Zeigerwerkzeug in das<br />
Rahmeninnere. Sie können nun wie in einer<br />
Textverarbeitung den Rahmentext mit dem Zeiger<br />
beliebig auswählen, kopieren usw. Nähere Informationen<br />
hierzu finden Sie unter dem Thema „Bearbeiten von<br />
Texten auf einer Seite“ auf Seite 247.<br />
• Wenn Sie einen Textrahmen verschieben, verändern Sie<br />
automatisch auch die Position seiner Story.<br />
• Bei einer Größenänderung des Textrahmens wird der<br />
Textfluss der Story automatisch an die neuen<br />
Abmessungen angepasst.
78 Die Layoutelemente<br />
Erstellen von HTML-Rahmen<br />
Rahmen lassen sich auf die gleiche Weise in Seiten einfügen, wie<br />
andere Objekte auch. Sie können alle Rahmen beliebig auswählen,<br />
verschieben und skalieren. Die Grundform der Rahmen lässt sich<br />
jedoch nicht ändern.<br />
Erstellen eines Rahmens<br />
1. Klicken Sie in der Kategorie „Layoutelemente“ der<br />
Studio-Registerkarte QuickBuild auf das Symbol<br />
Textrahmen.<br />
2. Ziehen Sie den Cursor mit gedrückter Maustaste über die<br />
Seite, um die Rahmenabmessungen selbst festzulegen.<br />
ODER<br />
Klicken Sie auf die Seite oder die Montagefläche, um<br />
einen Rahmen in Standardgröße zu erstellen.<br />
Löschen von Rahmen<br />
• Wählen Sie den Rahmen aus und drücken Sie die Taste<br />
Entf. Enthält der Rahmen eine Einfügemarke, löschen<br />
Sie mit der Taste Entf die Buchstaben nach dem<br />
Textcursor.<br />
Einfügen von Text in einen Rahmen<br />
Texte lassen sich auf unterschiedliche Weise in Rahmen einsetzen.<br />
Der Text wird dann automatisch in einen kompatiblen HTML-<br />
Code umgewandelt.<br />
Der integrierte<br />
Storyeditor<br />
WritePlus<br />
Wählen Sie einen Rahmen aus und<br />
klicken Sie in der Rahmenkontextleiste auf<br />
WritePlus.
Importieren<br />
von Texten<br />
Direkte<br />
Texteingabe in<br />
den Rahmen<br />
Einfügen über<br />
die<br />
Zwischenablage<br />
Die Layoutelemente 79<br />
Klicken Sie mit der rechten Maustaste auf<br />
einen Rahmen und in dem Kontextmenü<br />
auf Einfügen > Textdatei. Alternativ<br />
können Sie auch die Tastenkombination<br />
Strg+T drücken, um einen Text zu<br />
importieren.<br />
Aktivieren Sie das Zeigerwerkzeug, klicken<br />
Sie in den Rahmen, um eine Einfügemarke<br />
zu platzieren, und tippen Sie den Text über<br />
Ihre Tastatur ein. Alternativ können Sie<br />
auch zuerst eine Textstelle markieren und<br />
dann durch Tippen ersetzen. Nähere<br />
Informationen hierzu finden Sie unter dem<br />
Thema „Bearbeiten von Texten auf einer<br />
Seite“ auf Seite 247.<br />
Platzieren Sie eine Einfügemarke in dem<br />
Text und drücken Sie die<br />
Tastenkombination Strg+V.<br />
Drag & Drop Wählen Sie den gewünschten Text in<br />
einem anderen Programm (z. B. einer<br />
Textverarbeitung) aus und ziehen Sie ihn<br />
bei gedrückter Maustaste auf die in<br />
<strong>WebPlus</strong> angezeigte Seite.<br />
Wenn Sie den Text auf einen ausgewählten<br />
Rahmen ziehen, wird der Text im<br />
Anschluss an den vorhandenen Text<br />
platziert. Ist kein Rahmen ausgewählt,<br />
erstellt das Programm einen neuen<br />
Rahmen für den Text.
80 Die Layoutelemente<br />
Einrichten des Rahmenlayouts<br />
Das Rahmenlayout bestimmt, wie der Text durch den Rahmen<br />
fließt. Wenn Sie einen Rahmen auswählen und für den Rahmen<br />
Ränder eingestellt sind, werden die Rahmenränder als graue<br />
Strichlinien angezeigt. Diese Führungslinien bestimmen, wie der<br />
Text innerhalb des Rahmens fließt, indem sie den Abstand<br />
zwischen dem Text und der Rahmenkante vorgeben. Der Text<br />
eines Rahmens kann niemals außerhalb der Rahmenränder<br />
platziert werden.<br />
Festlegen der Rahmenränder<br />
• Wählen Sie den Rahmen aus und ziehen Sie die<br />
Spaltenführungslinien mit der Maus, um die<br />
Abmessungen der Rahmenspalte anzupassen.<br />
(1) (2) (3)<br />
Die obige Abbildung zeigt, wie sich der Mauszeiger verändert,<br />
wenn Sie ihn über dem Begrenzungsrahmen (1) platzieren; nach<br />
einer Verschiebung nach innen, können Sie die Rahmenränder (2)<br />
verändern; und nach einer Verschiebung nach unten lässt sich der<br />
obere Rahmenabstand (3) verschieben.<br />
Wenn Sie die Rahmenränder festlegen, müssen Sie<br />
immer den Rahmen auswählen und nicht den<br />
Rahmentext. Der Rahmen sollte nach dem Auswählen<br />
von einer gleichfarbigen Linie umgeben sein.<br />
Wenn Sie die Rahmenränder sehr exakt festlegen möchten, können<br />
Sie die gewünschten Werte für den linken, rechten, oberen und<br />
unteren Rahmenrand auch in ein Dialogfeld eintragen.
Festlegen der Rahmenränder<br />
Die Layoutelemente 81<br />
1. Wählen Sie den Rahmen aus und klicken Sie in der<br />
Rahmenkontextleiste auf das Symbol Textrahmen<br />
einrichten.<br />
2. Legen Sie in dem Dialogfeld unter „Rahmenränder“ die<br />
gewünschten Werte für Links, Rechts, Oben und Unten<br />
fest.<br />
Anpassen von Überlauftext<br />
Die genaue Aufteilung des gesamten Textes in Rahmen gehört zu<br />
den wichtigsten Punkten bei der Erstellung eines<br />
Webseitenlayouts. Enthält ein Rahmen zu viel Storytext, speichert<br />
<strong>WebPlus</strong> den „Überschuss“ in einem Überlaufbereich am unteren<br />
Ende des Rahmens. Der Text ist lediglich unsichtbar und wird<br />
nicht gelöscht!<br />
An dem Symbol Textüberlauf unter einem Rahmen erkennen<br />
Sie, dass zu viel Text vorhanden war und ein Teil in dem<br />
Überlaufspeicher liegt. Sie müssen also diesen Text wieder<br />
einblenden, damit Ihre Website-Besucher nicht mitten im Satz<br />
abgeschnitten werden.<br />
Hierzu stehen Ihnen verschiedene Optionen zur Verfügung:<br />
• Vergrößern Sie den Textrahmen, wenn die Seite<br />
genügend Platz bietet.<br />
• Kürzen Sie den Text. Vielleicht lassen sich ja einige Sätze<br />
knapper formulieren?<br />
• Ändern Sie die Textgröße (siehe unten).
82 Die Layoutelemente<br />
Um einen Rahmentext zu vergrößern oder zu<br />
verkleinern, nachdem Sie bereits die endgültige Größe und<br />
Position für den Rahmen festgelegt haben, stehen Ihnen in der<br />
Rahmenkontextleiste mehrere Optionen zur Verfügung.<br />
Einfügen von Bildern<br />
Die Kategorie „Bilder“ der Studio-Registerkarte Quelldateien lässt<br />
sich als „Sammelmappe“ für Bilder einsetzen, die Sie später auf den<br />
Seiten Ihrer Website platzieren möchten. Da in dieser Registerkarte<br />
alle Bilder jederzeit griffbereit sind, und Sie die Fotos einfach per<br />
Klicken und Ziehen auf den Seiten platzieren können (anstatt sie<br />
mühsam einzeln zu importieren), sparen Sie bei Ihrer Arbeit sehr<br />
viel Zeit. Gerade für Websites mit sehr vielen Bildern ist diese<br />
Registerkarte eine enorme Hilfe. Ziehen Sie einfach die Bilder auf<br />
einen Bildrahmen mit Umrandung oder einen Bildrahmen ohne<br />
Umrandung (oder ein Bild direkt auf der Seite, das Sie ersetzen<br />
möchten).<br />
Für Fotos aus Ihrer Digitalkamera öffnen Sie einfach den Ordner<br />
auf Ihrem PC, in den Sie die Fotos bereits kopiert haben, und fügen<br />
sie in die Studio-Registerkarte ein. Über einen Scanner eingelesene<br />
Bilder, die Sie bereits auf Ihrer Festplatte gespeichert haben, lassen<br />
sich auf diese Weise ebenfalls integrieren.<br />
In <strong>WebPlus</strong> können Sie für das Einfügen von Bildern ebenfalls die<br />
Studio-Registerkarte QuickBuild oder die Grundlagenleiste<br />
verwenden.
Die Layoutelemente 83<br />
Einfügen von Bildern in die Studio-Registerkarte<br />
„Quelldateien“<br />
Einsetzen von Bildern in die Registerkarte<br />
1. Klicken Sie in der Kategorie „Bilder“ der Studio-<br />
Registerkarte Quelldateien auf Hinzufügen.<br />
2. Öffnen Sie in dem Dialogfeld einen Ordner mit Bildern<br />
und wählen Sie die gewünschten Bilder aus.<br />
3. Klicken Sie anschließend auf die Schaltfläche Öffnen.<br />
Die Studio-Registerkarte Quelldateien zeigt Ihre Bilder<br />
nun als Miniaturen in der Kategorie „Bilder“ an.<br />
Sortieren von Bildern in der Registerkarte<br />
• Klicken Sie auf die Miniatur des gewünschten Bildes und<br />
ziehen Sie es in der Registerkarte an die gewünschte<br />
Position.<br />
Entfernen von Bildern aus der Studio-Registerkarte<br />
• Klicken Sie mit der rechten Maustaste auf ein<br />
ausgewähltes Bild und in seinem Kontextmenü auf<br />
Quelldatei entfernen.<br />
Einfügen von Bildern in eine Seite<br />
Sie können Bilder einfach mit gedrückter Maustaste auf eine Seite<br />
ziehen und dort absetzen.<br />
Einfügen einzelner Bilder in eine Seite<br />
• Ziehen Sie aus der Kategorie „Bilder“ der Studio-<br />
Registerkarte Quelldateien eine Bildminiatur direkt auf<br />
die Seite, in einen Rahmentext oder künstlerischen Text<br />
(das Bild wird dann an der Position der Einfügemarke<br />
platziert) oder in einen Bildrahmen. Nach dem Einfügen<br />
wird an der Bildminiatur ein Zähler ( ) eingeblendet,
84 Die Layoutelemente<br />
sodass Sie stets im Auge behalten können, wie oft Sie das<br />
Bild bereits in der Website eingesetzt haben.<br />
Wenn Sie Bilder auf einer Seite platzieren, werden diese<br />
Dateien standardmäßig mit Ihrer Website verknüpft<br />
und nicht eingebettet.<br />
Sie können Fotos über das Symbol Bild aus Datei<br />
einfügen der Grundlagenleiste einbetten (klicken Sie<br />
hierzu in dem Dialogfeld auf Bild einbetten) oder auch<br />
jederzeit den Ressourcen-Manager verwenden, um den<br />
Status verknüpfter Bilder in „Eingebettet“ zu ändern.<br />
Automatisches Einfügen von Inhalten mit AutoFlow<br />
Mit der Funktion AutoFlow können Sie die Bilder aus der<br />
Kategorie „Bilder“ direkt in die leeren Bildrahmen (siehe <strong>WebPlus</strong>-<br />
Hilfe) einfügen, die über Ihre Website verteilt sind. ACHTUNG:<br />
Nachdem Sie die Rahmen automatisch mit Bildern gefüllt haben,<br />
lässt sich dieser Schritt nicht noch einmal wiederholen.<br />
Automatisches Einfügen Ihrer Bilder<br />
• Klicken Sie in der Studio-Registerkarte Quelldateien am<br />
unteren Rand der Kategorie „Bilder“ auf AutoFlow.<br />
Die Bilder werden nun nacheinander in die verfügbaren<br />
Bildrahmen Ihrer Website eingefügt. Die Funktion geht hierbei<br />
nach der Reihenfolge vor, in der die Bilder in der Studio-<br />
Registerkarte sortiert sind. Eventuell müssen Sie die Bilder also<br />
zunächst neu ordnen.<br />
Suchen nach Bildern mithilfe von Markern<br />
In <strong>WebPlus</strong> können Sie Bilder mithilfe von Markern (auch „Tags“<br />
genannt) suchen, d. h. der XMP-Metadaten, die mit jedem Bild<br />
gespeichert sind. Möchten Sie selbst Marker für Ihre Bilder<br />
festlegen, verwenden Sie den Quelldatei-Manager.
Suchen von Bildern über ihre Marker<br />
Die Layoutelemente 85<br />
• Klicken Sie unten in der Studio-Registerkarte<br />
Quelldateien in das Suchen-Feld und geben Sie den<br />
gewünschten Begriff ein, wie z. B. „Urlaub“. Alle mit<br />
diesem Marker gekennzeichneten Bilder werden nun<br />
über dem Suchen-Feld in einer temporären Ergebnisliste<br />
angezeigt.<br />
Einfügen von Bildern mit Skalierung, Einbetten<br />
und Verknüpfen<br />
Sie können Bilder nicht nur durch Klicken und Ziehen von<br />
Miniaturen aus der Studio-Registerkarte Quelldateien einsetzen,<br />
sondern auch durch Kopieren und Einfügen über die<br />
Zwischenablage oder durch Ziehen einer Datei aus einem externen<br />
Windows-Ordner direkt auf eine Seite.<br />
Über die Option Bild importieren der Grundlagenleiste<br />
können Sie ebenfalls Bilder einfügen. Hierbei lässt sich auch die<br />
Bildgröße einstellen. Sie können ebenfalls festlegen, ob das Bild in<br />
die Website eingebettet oder mit dieser verknüpft wird.<br />
Ersetzen von Bildern<br />
Bilder lassen sich jederzeit austauschen. Dies ist besonders<br />
praktisch, wenn Sie die Position und Größe eines Fotos auf der<br />
Seite beibehalten und nur das eigentliche Bild selbst ändern<br />
möchten. Diese Funktion lässt sich für zugeschnittene und<br />
unbeschnittene Bilder einsetzen.<br />
Ersetzen eines Bildes<br />
• Klicken Sie direkt unter dem ausgewählten Bild auf<br />
Bild ersetzen und wählen Sie das neue Bild aus. Klicken<br />
Sie anschließend auf die Schaltfläche Öffnen.
86 Die Layoutelemente<br />
Anzeigen von Bildern in Lightboxen<br />
Lightboxen sind Popups, die sich unter anderem ideal für die<br />
Anzeige großer Bilder eignen. Um die große Bildversion<br />
einzublenden, müssen Ihre Website-Besucher lediglich auf eine<br />
Bildminiatur klicken. Der große Vorteil der Lightboxen besteht<br />
darin, dass die großen Bildversionen erst auf Wunsch des<br />
Betrachters mit einer Animation eingeblendet werden und nicht<br />
die ganze Zeit wertvollen Platz im Browserfenster belegen.<br />
Erstellen einer Lightbox für die Bilder auf Ihrer Webseite<br />
1. Wählen Sie ein Bild aus (vorzugsweise platziert als<br />
Bildminiatur).<br />
2. Erstellen Sie einen Hyperlink für das Objekt. Klicken Sie<br />
hierzu im Menü Format oder dem per Rechtsklick auf<br />
das Objekt geöffneten Kontextmenü auf den Eintrag<br />
Hyperlink.<br />
3. Klicken Sie in der linken Liste auf den Eintrag Bild und<br />
legen Sie in der Registerkarte „Zielfenster“ über das Feld<br />
Typ die Option „Lightbox“ fest.<br />
Freistellen von Bildmotiven<br />
Mit dem Studio für Bildausschnitte können Sie einzelne<br />
Bildobjekte bequem von ihrem Hintergrund trennen. Je nach<br />
Zusammenstellung Ihres Fotos lassen sich z. B. die wichtigen<br />
Objekte (Personen usw.) extrahieren oder die einfarbigen<br />
Hintergrundbereiche (z. B. Himmel, Leinwand eines Fotostudios)<br />
entfernen. In beiden Fällen ist der extrahierte Bildbereich ein<br />
echter Blickfang, der sich flexibel in Ihrer Website einsetzen lässt.
Öffnen des Studios für Ausschnitte<br />
1. Wählen Sie ein Bild aus.<br />
Die Layoutelemente 87<br />
2. Klicken Sie auf die Schaltfläche Studio für<br />
Bildausschnitte in der Bildkontextleiste. Es wird nun das<br />
Studiofenster für das Extrahieren von Bildbereichen<br />
geöffnet.<br />
3. Klicken Sie auf der linken Seite des<br />
Studiofensters auf das Werkzeug Bildbereich<br />
übernehmen oder Bildbereich entfernen und<br />
„übermalen“ Sie die Bereiche, die Sie entfernen bzw.<br />
behalten möchten. In der QuickStart-Hilfe des<br />
Studiofensters finden Sie eine genaue Anleitung zu der<br />
Arbeit mit diesen Werkzeugen.<br />
Bildkorrekturen und Effekte<br />
PhotoLab ist ein leistungsstarkes Studiofenster für die<br />
Bildbearbeitung, in dem Sie Ihre Bilder korrigieren und mit<br />
verschiedenen Effekten bearbeiten können. Alle Funktionen lassen<br />
sich einzeln oder auch in Kombination anwenden.
88 Die Layoutelemente<br />
(A) Hauptsymbolleiste, (B) Arbeitsbereich, (C) Filterstapel,<br />
(D) Filterregisterkarten, (E) Registerkarte „Bilder“<br />
Starten von PhotoLab<br />
1. Wählen Sie das Bild aus, auf das Sie einen Filter<br />
anwenden möchten.<br />
2. Klicken Sie auf die Schaltfläche PhotoLab der<br />
Bildkontextleiste.<br />
3. Wählen Sie einen Filter der Filterregisterkarten aus<br />
(„Favoriten“, „Korrekturen“ oder „Effekte“).<br />
4. Stellen Sie in dem Testfeld rechts unten die<br />
gewünschten Optionen für den Filter ein und klicken Sie<br />
auf Übernehmen.<br />
5. Wiederholen Sie diese Schritte für alle Filter, die Sie<br />
anwenden möchten.<br />
6. Klicken Sie auf die Schaltfläche OK.<br />
Weitere Informationen hierzu finden Sie in der <strong>WebPlus</strong>-Hilfe.
Einfügen von Panels<br />
Die Layoutelemente 89<br />
Panels sind „Schaukästen“ mit Informationen, die über Ihren<br />
Webseiten eingeblendet werden. Hier können Sie sowohl Bilder<br />
und Texte anzeigen (siehe unten) als auch Formen und<br />
Zeichnungen.<br />
Da die Panels über Ihren Webseiten in dem Browser der Website-<br />
Besucher angezeigt werden, können Sie den Informationsgehalt<br />
Ihrer Website schnell und einfach erweitern oder ändern, ohne das<br />
Layout der einzelnen Seiten modifizieren zu müssen. Panels lassen<br />
sich sowohl permanent als auch „auf Wunsch“ einblenden, wenn<br />
die Website-Besucher ihren Mauszeiger auf Schaltflächen, Bildern<br />
oder anderen Quelldateien platzieren. Die permanente Variante ist<br />
ebenfalls ideal für Navigationsleisten, da diese auch bei scrollbaren<br />
Seiteninhalten ständig auf dem Bildschirm erreichbar sind.<br />
Panels gehören zu den flexibelsten Elementen einer Website und<br />
eignen sich hervorragend zur Präsentation folgender<br />
Informationen:<br />
• Details zu bestimmten Events (Konzerte, Tagungen usw.)<br />
• Produkt- und Verkaufsinformationen<br />
• „Jetzt kaufen“-Formulare von PayPal
90 Die Layoutelemente<br />
• Hilfreiche Tipps und Tricks<br />
• Kontaktdetails, Tastaturkürzel sowie andere Infos, auf<br />
die Website-Besucher schnell zugreifen möchten.<br />
• Permanent sichtbare Navigationselemente (umgewandelt<br />
aus einer Navigationsleiste wie auf Seite 115 beschrieben)<br />
• Vergrößerte Bildversionen<br />
Panels werden auch als Bausteine für animierte Slider (siehe<br />
Seite 109) verwendet. Genau wie die Anzeigetafeln am<br />
Spielfeldrand in großen Fußballstadien ständig ihre Aufschrift<br />
ändern, können auch die Slider unterschiedliche Panels für<br />
bestimmte Zeitintervalle einblenden.<br />
<strong>WebPlus</strong> bietet eine breite Palette an modernen<br />
Hintergrunddesigns, mit denen Sie schnell und einfach<br />
ansprechende Panels entwerfen können. Alternativ können Sie<br />
auch eine Hintergrundvorlage anpassen oder in dem neuen Design<br />
Studio (siehe Seite 94) von <strong>WebPlus</strong> den Hintergrund selbst<br />
entwerfen.<br />
Einfügen eines Panels<br />
Um ein Panel einzufügen, gehen Sie wie folgt vor:<br />
1. Klicken Sie in der Kategorie „Layoutelemente“ der<br />
Studio-Registerkarte QuickBuild auf das Symbol Panel.<br />
2. Ziehen Sie den Mauszeiger mit gedrückter Maustaste<br />
über Ihre Seite, um den Bereich und die Größe für das<br />
Panel zu bestimmen.
Die Layoutelemente 91<br />
3. (Optional) Legen Sie in dem Dialogfeld eine HTML-ID<br />
für das Panel fest. Sie können die Vorgabe für<br />
gewöhnlich direkt übernehmen, da die ID immer als<br />
einzigartige Zeichenkette festgelegt wird.<br />
4. Klicken Sie in dem Dialogfeld auf die Panelvorschau.<br />
5. Wählen Sie eine Panelvorlage in dem Menü aus. Die<br />
Vorschau wird nun mit dem ausgewählten Paneldesign<br />
aktualisiert.<br />
6. (Optional) Stellen Sie den Schieber Transparenz neu ein,<br />
um die Transparenz des Panels vor seinem Hintergrund<br />
zu bestimmen. Um die Auswirkung dieser Änderung zu<br />
prüfen, müssen Sie die Webseite in einer Vorschau<br />
öffnen.<br />
7. (Optional) Um das Panel stets griffbereit an einer festen<br />
Position des Browserfensters zu verankern, wenn Ihre<br />
Website-Besucher den Seiteninhalt mit den<br />
Bildlaufleisten scrollen, klicken Sie auf Panel mit<br />
Browserfenster ausrichten. Legen Sie anschließend die<br />
Panelposition mit den Feldern Horizontale Ausrichtung<br />
und Vertikale Ausrichtung fest.<br />
8. (Optional) Aktivieren Sie die Option Verschieben des<br />
Panels mit der Maus auf der Seite möglich, wenn Sie<br />
Ihren Website-Besuchern die Möglichkeit geben<br />
möchten, das Panel frei in ihrem Browser zu verschieben.<br />
9. (Optional) Um das Panel direkt mit dem Schließen des<br />
Dialogfelds auszublenden, klicken Sie auf die Option
92 Die Layoutelemente<br />
Panel ist zu Beginn ausgeblendet. Für gewöhnlich<br />
werden Sie diese Option wahrscheinlich deaktivieren, um<br />
weiter an dem Design für Ihr Panel zu arbeiten.<br />
10. Klicken Sie auf die Schaltfläche OK.<br />
Sie können ein Panel in den Standardabmessungen<br />
erstellen, indem Sie es einfach aus der Studio-<br />
Registerkarte „QuickBuild“ direkt auf eine Seite ziehen.<br />
Alternativ können Sie ein einfaches Panel (ohne<br />
Konfiguration über das Dialogfeld) direkt auf der Seite<br />
platzieren, wenn Sie es mit gedrückter Strg-Taste auf<br />
die Seite ziehen.<br />
Bearbeiten eines Panels<br />
• Führen Sie einen Doppelklick auf das Panel aus und<br />
stellen Sie wie oben beschrieben die verschiedenen<br />
Optionen ein.<br />
Festlegen des Inhalts für ein Panel<br />
Sie können Ihr Panel wie einen leeren Baustein für Ihre Website<br />
behandeln und mit den Werkzeugen und Funktionen von <strong>WebPlus</strong><br />
vollenden. Wenn Sie Objekte in dem Panelbereich erstellen,<br />
gehören diese automatisch zu dem Panel. Dies gilt auch für<br />
Textrahmen, künstlerische Texte, Tabellen, QuickShapes und<br />
Bilder. Wenn Sie das Panel auf der Seite verschieben, ändern Sie<br />
auch die Position seiner Objekte.<br />
Ein-/Ausblenden eines Panels<br />
Nachdem Sie das Panel entworfen und mit dem gewünschten<br />
Inhalt gefüllt haben, können Sie es sichtbar lassen oder auch<br />
ausblenden. Ausgeblendete Panels lassen sich per Mausberührung<br />
oder Klick auf ein Seitenobjekt einblenden. Auf diese Weise<br />
können Sie schnell und einfach zusätzliche Optionen oder Details<br />
für Schaltflächen, Bilder und Galerieobjekte auf Ihren Webseiten
Die Layoutelemente 93<br />
anbieten. Die Website-Besucher blenden dann einfach nur die für<br />
sie interessanten Panels ein und werden nicht mit Informationen<br />
überfrachtet.<br />
Festlegen von Aktion und Panel<br />
Für diese Einblendung müssen Sie ein Objekt<br />
als „Auslöser“ konfigurieren, dessen Aktion<br />
(siehe Seite 129) bei Mausberührung oder<br />
Mausklick das entsprechende Panel öffnet.<br />
Die Aktion verbindet dann das bereits<br />
erstellte Panel mit dem Objekt.<br />
1. Klicken Sie mit der rechten Maustaste auf ein Objekt und<br />
in seinem Kontextmenü auf Aktionen.<br />
2. Klicken Sie in dem Dialogfeld auf Hinzufügen und dann<br />
auf die Menüoption Sichtbarkeit.<br />
3. Wählen Sie das gewünschte Panel in dem Feld Panel-ID<br />
aus und legen Sie dann ein Ereignis in dem<br />
gleichnamigen Dropdownfeld fest. Diese Ereignisse legen<br />
fest, was passiert wenn die Aktion stattfindet (d. h. der<br />
Mauszeiger sich auf das Objekt bewegt oder ein<br />
Mausklick stattfindet).<br />
4. Klicken Sie auf die Schaltfläche OK.<br />
Nachdem Sie nun Panel und Auslöser fertig konfiguriert haben,<br />
können Sie das Panel ausblenden.<br />
Ausblenden ausgewählter Panel<br />
• Klicken Sie in der Kontextleiste auf die Option<br />
Panel ausblenden.
94 Die Layoutelemente<br />
Das Panel wird nun auf der Seite durch das Symbol<br />
Ausgeblendetes Panel ersetzt. Das Panel ist immer noch<br />
vorhanden und lässt sich mit einem weiteren Klick auf die<br />
Schaltfläche „Panel ausblenden“ wieder sichtbar schalten. Die<br />
Schaltfläche „Panel ausblenden“ entspricht in Ihrer Funktion dem<br />
Kontrollkästchen Panel ist zu Beginn ausgeblendet.<br />
Wenn Sie nun Ihre Webseite publizieren und den Mauszeiger auf<br />
dem als Auslöser konfigurierten Seitenobjekt platzieren, wird das<br />
Panel per Rollover an der von Ihnen festgelegten Stelle<br />
eingeblendet.<br />
Entwerfen eigener Panelhintergründe<br />
Möchten Sie eine Hintergrundvorlage noch weiter anpassen oder<br />
den Hintergrund komplett selbst entwerfen, verwenden Sie einfach<br />
das Design Studio - eine spezielle Designumgebung, die dem<br />
Button Studio ähnelt. Der Hintergrund wird in diesem<br />
Studiofenster vollkommen isoliert angezeigt. Auf diese Weise<br />
können Sie sich ganz auf das Design konzentrieren und werden<br />
nicht von den anderen Elementen der Seite abgelenkt.
Entwerfen eigener Hintergrundvarianten<br />
Die Layoutelemente 95<br />
1. (Optional) Wählen Sie in dem Dialogfeld „Panel -<br />
Eigenschaften“ eine Vorlage aus, die Sie als<br />
Ausgangspunkt für Ihr Design verwenden möchten.<br />
2. Klicken Sie in dem Dialogfeld auf das Symbol<br />
Bearbeiten. Das Design Studio wird nun aktiviert und<br />
zeigt automatisch Ihren Hintergrund im Arbeitsbereich<br />
an.<br />
3. Sie können den Hintergrund nun mit den üblichen<br />
Werkzeugen und Registerkarten von <strong>WebPlus</strong> <strong>X6</strong><br />
anpassen. In der Registerkarte QuickStart des<br />
Studiofensters finden Sie einige nützliche Tipps und<br />
Hilfestellungen.<br />
4. Um das Studio zu beenden, klicken Sie in der<br />
Hauptsymbolleiste auf Änderungen übernehmen. Der<br />
Hintergrund wird nun an seiner ursprünglichen Position<br />
mit den neuen Einstellungen aktualisiert.<br />
Mit dem Design Studio können Sie exakt<br />
bestimmen, welche Objekte in dem Panel automatisch<br />
gedehnt oder gestaucht werden, wenn Sie die Größe<br />
des Panels verändern. Über die Symbolmenüs<br />
Horizontale Skalierung und Vertikale Skalierung<br />
können Sie das Verhalten der Objekte genau festlegen.<br />
Nähere Informationen hierzu finden Sie in der<br />
QuickStart-Registerkarte.
96 Die Layoutelemente<br />
Einfügen einer Fotogalerie<br />
In <strong>WebPlus</strong> können Sie eine auf Flash oder JavaScript basierende<br />
Fotogalerie in jede beliebige Webseite einfügen. Für die Galerien<br />
stehen Ihnen unterschiedliche Designs mit verschiedenen<br />
Navigationsmethoden für die enthaltenen Bilder zur Verfügung.<br />
Die Galerietypen<br />
Für Ihre Flash- oder JavaScript-Fotogalerien stehen Ihnen sehr<br />
unterschiedliche Galerieformate zur Verfügung.<br />
Galerietyp Features<br />
Professionelle Flash-Fotogalerie<br />
Diese Galerien enthalten über oder unter der<br />
Bildanzeige eine Steuerleiste mit<br />
Vorschauminiaturen, die alle mit einem<br />
Rollovereffekt versehen sind.
Die Layoutelemente 97<br />
Professionelle Flash-Fotogalerie (Live Feed)<br />
Diese Galerien bieten die gleichen Optionen wie<br />
Professionelle Fotogalerien. Die Fotos lassen sich<br />
jedoch als Fotostream (in Form eines RSS-Feeds)<br />
aus Ihrem Konto bei flickr einfügen sowie aus<br />
jedem anderen Bildhosting-Service, der RSS 2.0<br />
unterstützt, oder auch aus SlideShowPro Director.<br />
Flash-Fotogalerie<br />
Diese Galerien enthalten über oder unter der<br />
Bildanzeige eine Steuerleiste mit<br />
Navigationselementen und/oder<br />
Vorschauminiaturen, die sich horizontal/vertikal<br />
per Bildlauf verschieben lassen. Fotoraster und<br />
Fotostapel sind ebenfalls als Galerievorlagen<br />
verfügbar. Sie können für die Fotogalerie sogar<br />
eine Hintergrundmusik festlegen.<br />
JavaScript-Fotogalerie<br />
Diese Galerien bieten ähnliche Optionen wie die<br />
Flash-Galerie, basieren jedoch auf JavaScript.<br />
Zusätzlich zu den Fotorastern und Fotostapeln<br />
sind hier auch Lightboxen verfügbar.<br />
Einfügen einer Fotogalerie<br />
Fotogalerien lassen sich genau so auf Ihren Seiten einfügen, wie<br />
einzelne Fotos. Das aktuell angezeigte Foto ist hierbei lediglich von<br />
einem Hintergrund, einer Navigationsleiste und<br />
Vorschauminiaturen eingerahmt.
98 Die Layoutelemente<br />
Einfügen einer Fotogalerie<br />
1. Klicken Sie in der Kategorie „Layoutelemente“ der<br />
Studio-Registerkarte QuickBuild auf das Symbol<br />
Fotogalerie.<br />
2. Um die Galerie mit einer Standardgröße<br />
einzufügen, platzieren Sie den Mauszeiger an der<br />
gewünschten Stelle der Seite und drücken die linke<br />
Maustaste.<br />
ODER<br />
Um die Größe der Galerie selbst zu bestimmen, ziehen<br />
Sie bei gedrückter Maustaste den Cursor über die Seite<br />
und lassen die Maustaste wieder los, sobald der<br />
Begrenzungsrahmen die gewünschten Abmessungen<br />
erreicht hat.<br />
3. Wählen Sie einen Galerietyp aus (siehe obige<br />
Beschreibung).<br />
4. Klicken Sie auf die Schaltfläche Weiter>. Für alle<br />
Galerietypen (außer den Varianten mit Live Feed) legen<br />
Sie in dem Dialogfeld folgende Optionen fest:<br />
• Hinzufügen einzelner Dateien<br />
Klicken Sie auf Dateien hinzufügen, um die<br />
gewünschten Bilddateien auszuwählen. Wenn Sie<br />
mehrere Dateien auswählen möchten, halten Sie die<br />
Strg-Taste gedrückt (für nicht aufeinander folgende<br />
Dateien) oder die Umschalttaste (für aufeinander<br />
folgende Dateien), während Sie auf die Dateinamen<br />
klicken.<br />
ODER
Die Layoutelemente 99<br />
• Hinzufügen aller Fotos in einem Ordner<br />
Klicken Sie auf die Schaltfläche Ordner hinzufügen,<br />
um alle Bilder aus einem bestimmten Ordner zu<br />
importieren.<br />
ODER<br />
• Import aus Digitalkamera oder Scanner<br />
Klicken Sie auf die Schaltfläche TWAIN-Import.<br />
Falls Sie mehrere TWAIN-Geräte angeschlossen<br />
haben, klicken Sie zunächst auf den Pfeil der<br />
Schaltfläche und legen über den Menüpunkt Quelle<br />
auswählen... das gewünschte Modell fest. Wenn Sie<br />
den Ordner für die Speicherung der Bilder nach<br />
dem Einlesen festlegen möchten, klicken Sie in dem<br />
Symbolmenü auf Exportordner festlegen. Klicken<br />
Sie auf Import..., um Ihre Fotos einzulesen.<br />
• Um eine oder mehrere Miniaturansichten zu<br />
entfernen, wählen Sie sie aus und klicken auf<br />
Löschen.<br />
5. (Optional) Verwenden Sie die Optionen neben den<br />
Fotominiaturen, um die Bilder zu bearbeiten.<br />
• Um die Reihenfolge der Fotos zu ändern,<br />
klicken Sie auf Aufwärts und Abwärts am unteren<br />
Rand des Dialogfelds.<br />
• Um einen Titel einzufügen, klicken Sie in die Spalte<br />
Titel und geben den gewünschten Text ein. Sie<br />
können sowohl Zahlen als auch Buchstaben<br />
verwenden.
100 Die Layoutelemente<br />
• (Nur für professionelle Flash-Fotogalerien) Um<br />
die Fotos mit Hyperlinks zu versehen, klicken Sie<br />
auf Hyperlink bearbeiten. Wählen Sie in dem<br />
Dialogfeld einen Hyperlinktyp aus. Sie können hier<br />
die Verwendung von Hyperlinks deaktivieren,<br />
Hyperlinks zu den Originalbildern erstellen oder<br />
Hyperlinks zu anderen Hyperlinkzielen festlegen (z.<br />
B. Seiten Ihrer Website oder einer anderen<br />
Website).<br />
6. Wenn Sie die ausgewählten Bilder in die Website<br />
integrieren möchten, aktivieren Sie die Option Bilder<br />
einbetten. Standardmäßig werden die Fotos von der<br />
<strong>WebPlus</strong>-Datei getrennt gespeichert und mit einer<br />
Verknüpfung an die entsprechenden Webseiten<br />
gebunden.<br />
7. Klicken Sie auf die Schaltfläche Weiter.<br />
8. Wählen Sie am oberen Rand des Dialogfelds eine<br />
Galerieformatierung in der Liste Galerietyp aus.<br />
9. (Optional) Legen Sie für den ausgewählten Typ rechts die<br />
verschiedenen Galerieoptionen fest (Hintergrundmusik,<br />
Schriftfarbe, AutoPlay usw.).<br />
10. Klicken Sie anschließend auf die Schaltfläche Fertig<br />
stellen.
Bearbeiten der Fotogalerie<br />
Die Layoutelemente 101<br />
Nachdem Sie die Fotogalerie in eine Webseite eingefügt haben,<br />
lässt sie sich jederzeit bearbeiten.<br />
Bearbeiten einer Fotogalerie<br />
1. Wählen Sie die gewünschte Galerie auf der Webseite aus.<br />
2. Führen Sie einen Doppelklick auf die Galerie aus.<br />
Es wird nun das Dialogfeld „Fotogalerie“ angezeigt. Die<br />
Optionen in diesem Dialogfeld sind identisch mit denen,<br />
die für die Erstellung der Galerie verfügbar waren.<br />
3. Um die Attribute für alle Bilder gleichzeitig zu ändern,<br />
wählen Sie alle Fotos über das Kontrollkästchen oben in<br />
der Spalte „Bild“ aus und stellen dann die Optionen<br />
unter der Fotoliste neu ein.<br />
Nachdem Sie eine Galerie auf der Seite platziert haben, können Sie<br />
ihre Größe durch Ziehen eines Eckpunkts verändern. Wenn Sie das<br />
Seitenverhältnis der Galerie unverändert übernehmen möchten,<br />
halten Sie während des Ziehens die Strg-Taste gedrückt.<br />
Arbeiten mit Onlinefotoquellen<br />
Anstatt Ihre Fotos von einem lokalen Laufwerk auf Ihrem PC zu<br />
importieren, können Sie in Ihre Fotogalerie auch Bilder per Live<br />
Feed einfügen, die bereits online bei flickr oder SlideShowPro<br />
Director gespeichert sind.<br />
Der größte Vorteil dieser Galerien mit Live Feed liegt darin, dass<br />
Ihre publizierte Fotogalerie automatisch aktualisiert wird, sobald<br />
Sie neue Fotos außerhalb von <strong>WebPlus</strong> an flickr oder<br />
SlideShowPro Director übertragen. Auf diese Weise müssen Sie die<br />
Fotos nicht einzeln in Ihrer Galerie nachtragen und dann die<br />
Website erneut publizieren.
102 Die Layoutelemente<br />
Bevor Sie eine Fotogalerie mit Live Feed erstellen, müssen Sie Ihr<br />
Konto bei flickr oder der Website von SlideShowPro Director<br />
aufsuchen. Dieser Schritt ist notwendig, da Sie den Link zu Ihren<br />
Fotos kopieren und dann in <strong>WebPlus</strong> einfügen müssen.<br />
Kopieren Ihres Fotolinks von der flickr-Website<br />
1. Gehen Sie zu der Website flickr.com und melden Sie sich<br />
bei Ihrem Konto an.<br />
2. Klicken Sie auf die Option für Ihren Fotostream.<br />
3. Blättern Sie die Seite nach unten bis zu dem Symbol<br />
für den RSS-Feed, klicken Sie mit der rechten Maustaste<br />
auf das Symbol und in dem Kontextmenü auf<br />
Verknüpfung kopieren.<br />
Stellen Sie sicher, dass sich der kopierte Link immer<br />
noch in der Zwischenablage befindet, wenn Sie ihn in<br />
<strong>WebPlus</strong> einfügen möchten.<br />
Kopieren Ihres Fotolinks von SlideShowPro Director<br />
1. Gehen Sie zu der Website SlideShowPro Director und<br />
melden Sie sich bei Ihrem Konto an.<br />
2. Wählen Sie Ihr Album aus und klicken Sie unter<br />
„Publish“ auf die Kopieren-Schaltfläche (in der Option<br />
„Copy XML File Path“), um den Link in die<br />
Zwischenablage einzutragen.<br />
Einfügen einer Fotogalerie mit Live Feed<br />
1. Klicken Sie in dem Dialogfeld für Fotogalerien<br />
auf Professionelle Flash-Fotogalerie (Live Feed).<br />
2. Klicken Sie auf die Schaltfläche Weiter>.
Die Layoutelemente 103<br />
3. Aktiveren Sie je nach der Fotodatenquelle, die Sie<br />
verwenden möchten, eine der Optionen RSS 2.0 Medien<br />
oder SlideShowPro Director.<br />
• Für die erste Option fügen Sie den kopieren Link für<br />
den RSS-Feed (siehe obige Beschreibung) in das<br />
entsprechende Dropdownfeld ein.<br />
ODER<br />
• Für die zweite Option fügen Sie den kopierten<br />
XML-Dateipfad (siehe obige Beschreibung) ein.<br />
Die Optionen der anderen Dialogfelder lassen sich genau so<br />
konfigurieren wie für die „normalen“ Galerietypen.<br />
Einfügen von Tabellen<br />
Tabellen sind eine ideale Wahl, wenn Sie Ihre Texte oder Daten in<br />
übersichtlichen Zeilen und Spalten anordnen möchten. <strong>WebPlus</strong><br />
verfügt ebenfalls über eine Reihe von Rechenfunktionen, mit denen<br />
Sie die Werte einzelner Zellen wie in einer Tabellenkalkulation<br />
berechnen können.<br />
Jede Tabellenzelle übernimmt im Grunde die Aufgabe eines<br />
kleinen Textrahmens. Tabellentexte lassen sich wie Rahmentexte<br />
flexibel mit Zeichen- und Absatzattributen sowie<br />
Textformatvorlagen formatieren und durch integrierte Bilder und<br />
gleichmäßige Farbfüllungen erweitern. Mithilfe der<br />
Rechtschreibprüfung können Sie anschließend eventuelle Fehler<br />
beseitigen. Zu den Spezialfunktionen für Tabellen gehören die<br />
Zahlenformatierung und das Einfügen von Formeln.
104 Die Layoutelemente<br />
Anstatt Ihre Tabellen von Grund auf neu zu erstellen, können Sie<br />
eines der vordefinierten Tabellenformate (d. h. eine Vorlage) von<br />
<strong>WebPlus</strong> verwenden. Wählen Sie einfach eine Formatierung aus<br />
und füllen Sie die Zellen mit den gewünschten Inhalten.<br />
<strong>WebPlus</strong> bietet Ihnen die folgenden Möglichkeiten:<br />
• Bearbeiten vordefinierter Formate, bevor Sie die neue<br />
Tabelle auf der Seite platzieren.<br />
• Erstellen Ihrer eigenen Formate, ohne eine Tabelle<br />
einzufügen. Nähere Informationen hierzu finden Sie<br />
unter „Entwerfen eigener Tabellenformate“ in der<br />
<strong>WebPlus</strong>-Hilfe.<br />
• Bearbeiten bestehender Tabellen, um sie an ein anderes<br />
Format anzupassen (vordefiniert oder selbst angelegt).<br />
Einfügen einer Tabelle<br />
1. Klicken Sie in der Kategorie „Layoutelemente“ der<br />
Studio-Registerkarte QuickBuild auf das Symbol<br />
Tabelle.<br />
2. Klicken Sie auf Ihre Seite, oder ziehen Sie mit gedrückter<br />
Maustaste einen Rahmen in der gewünschten Größe für<br />
die Tabelle. In dem nun geöffneten Dialogfeld „Tabelle<br />
erstellen“ wählen Sie einfach eine Tabellenvariation aus<br />
dem Feld Format: aus.<br />
3. Klicken Sie auf die verschiedenen Einträge, um die<br />
jeweilige Formatierung in dem Vorschaufeld zu<br />
begutachten. Wenn Sie mit einer einfachen Tabelle ohne<br />
besondere Linienformatierungen und Farben beginnen<br />
möchten, klicken Sie auf den Eintrag (Standard).<br />
4. (Optional) Klicken Sie auf Bearbeiten, wenn Sie das<br />
ausgewählte Format noch weiter konfigurieren möchten.
Die Layoutelemente 105<br />
5. Legen Sie die Tabellengröße fest. Dies ist die Anzahl der<br />
Zeilen und Spalten, aus denen das Tabellenlayout<br />
besteht.<br />
6. Klicken Sie auf die Schaltfläche OK. Die neue Tabelle<br />
wird nun auf Ihrer Seite angezeigt.<br />
Um die Struktur und Zelleninhalte von Tabellen zu ändern, führen<br />
Sie die unter „Bearbeiten von Tabellen“ (siehe <strong>WebPlus</strong>-Hilfe)<br />
beschriebenen Schritte aus.<br />
Einfügen eines Kalenders<br />
Mit dem Kalenderassistenten lassen sich Kalender<br />
unterschiedlichster Formate schnell und einfach in Ihre Webseiten<br />
einsetzen.<br />
Der Assistent erstellt die Kalender als skalierbare textbasierende<br />
Tabellen. Sie können den Kalender also mit Standardfunktionen<br />
und -werkzeugen zur Textbearbeitung beliebig verändern. Die<br />
Eigenschaften eines ausgewählten Kalenders ähneln denen von<br />
Tabellen, sodass sich Kalender auch mit ähnlichen Handgriffen<br />
bearbeiten lassen (siehe „Bearbeiten von Tabellen“ in der <strong>WebPlus</strong>-<br />
Hilfe).
106 Die Layoutelemente<br />
Einfügen eines Kalenders<br />
1. Klicken Sie in der Kategorie „Layoutelemente“ der<br />
Studio-Registerkarte QuickBuild auf das Symbol<br />
Kalender.<br />
2. Klicken Sie auf Ihre Seite, oder ziehen Sie mit gedrückter<br />
Maustaste einen Begrenzungsrahmen in der<br />
gewünschten Größe für den Kalender.<br />
3. Wählen Sie in dem nun geöffneten Kalenderassistenten<br />
die Optionen für Jahr und Monat sowie die<br />
Kalenderformatierung (quadratisch oder in ein- bzw.<br />
doppelspaltigem Layout) aus. Legen Sie anschließend den<br />
Wochentag für den Kalenderanfang fest, die<br />
Anzeigeoptionen, das Kalenderformat, die Darstellung<br />
der Termine und Feiertage und stellen Sie ein, ob der<br />
Kalender zusätzlichen Platz für eigene Notizen bieten<br />
soll.<br />
Wenn Sie die gesetzlichen Feiertage in Ihrem Land<br />
anzeigen lassen möchten, aktivieren Sie in den<br />
Kalendereigenschaften die Option Öffentliche Feiertage<br />
einfügen und wählen Ihr Land in dem Dropdownfeld<br />
Region aus. Falls Sie eigene Termine eintragen möchten,<br />
aktivieren Sie die Option Persönliche Termine<br />
einfügen.<br />
4. Klicken Sie auf Fertig stellen, um den Assistenten zu<br />
schließen.<br />
Möchten Sie Ihren Kalender auch in Zukunft<br />
verwenden, aktualisieren Sie einfach die Einstellung für<br />
Jahr in den Kalenderdetails (Extras > Benutzerdetails<br />
festlegen).
Anzeigen und Bearbeiten der Eigenschaften eines<br />
ausgewählten Kalenders<br />
Die Layoutelemente 107<br />
1. Klicken Sie auf die Schaltfläche Kalender bearbeiten der<br />
Kalenderkontextleiste.<br />
2. Stellen Sie die gewünschten Optionen in den<br />
verschiedenen Registerkarten (Datum, Format, Termine<br />
usw.) ein und klicken Sie auf OK.<br />
Über das Untermenü Kalender des per Rechtsklick geöffneten<br />
Kalenderkontextmenüs können Sie auch einzelne Spalten und<br />
Zeilen auswählen, skalieren, an Inhalte anpassen, einfügen, löschen<br />
und neu verteilen. Achten Sie aber darauf, dass Sie hierbei nicht die<br />
Tabellenformatierung des Kalenders beschädigen.<br />
Einfügen öffentlicher Feiertage<br />
Wenn Sie einen Kalender anlegen, können Sie gleichzeitig die<br />
öffentlichen Feiertage in den Kalender eintragen lassen, die für Ihr<br />
Land gelten. Die Feiertage werden dann automatisch angezeigt,<br />
wenn Sie in den Kalendereigenschaften die Option Öffentliche<br />
Feiertage einfügen aktivieren.<br />
Aktivieren der öffentlichen Feiertage<br />
1. Wählen Sie den Begrenzungsrahmen des Kalenders<br />
aus und klicken Sie in der Kontextleiste auf Kalender<br />
bearbeiten.<br />
2. Klicken Sie in der Registerkarte „Termine“ auf<br />
Öffentliche Feiertage einfügen.<br />
3. (Optional) Um die Feiertage für ein anderes Land<br />
einzutragen, wählen Sie das gewünschte Land in dem<br />
Dropdownfeld Region aus.<br />
4. Klicken Sie auf die Schaltfläche OK.
108 Die Layoutelemente<br />
Anzeigen öffentlicher Feiertage<br />
1. Wählen Sie den Begrenzungsrahmen des Kalenders aus.<br />
2. Klicken Sie in der Kalenderkontextleiste auf die<br />
Schaltfläche Kalendertermine.<br />
3. Aktivieren Sie die Option Öffentliche Feiertage<br />
anzeigen.<br />
Einfügen persönlicher Termine<br />
Sie können die Liste der öffentlichen Feiertage (z. B. Osterferien)<br />
durch persönliche Termine wie Geburtstage, Jahrestage und<br />
geschäftliche Besprechungen erweitern, sodass die zusätzlichen<br />
Termine ebenfalls in Ihrem Kalender angezeigt werden. Klicken Sie<br />
hierzu einfach in der Kontextleiste des ausgewählten Kalenders auf<br />
die Schaltfläche Kalendertermine. Die Termine werden<br />
automatisch in Ihrem Kalender für das ausgewählte Datum<br />
angezeigt.<br />
Einfügen eines Termins<br />
1. Wählen Sie den Begrenzungsrahmen des Kalenders aus.<br />
2. Klicken Sie in der Kalenderkontextleiste auf die<br />
Schaltfläche Kalendertermine.<br />
3. (Optional) Aktivieren Sie die Option Termine nach<br />
Datum anzeigen, um Termine mit einem traditionellen<br />
Kalenderlayout zu bearbeiten, einzufügen oder zu<br />
löschen. Ist die Option deaktiviert, können Sie die<br />
Termine zeilenweise in einer Datum/Termin-Liste<br />
bearbeiten.<br />
4. Klicken Sie anschließend auf das Symbol Neuer<br />
Termin.
Die Layoutelemente 109<br />
5. Legen Sie in dem nun geöffneten Dialogfeld mit<br />
den Pfeilsymbolen oder dem Symbol Durchsuchen ein<br />
Datum fest.<br />
6. Geben Sie den gewünschten Termintext in das Textfeld<br />
ein. Dieser Text wird dann in dem Kalender für das<br />
entsprechende Datum angezeigt.<br />
7. Falls es sich bei dem Termin um einen Geburtstag oder<br />
einen ähnlichen Anlass handelt, der jedes Jahr anfällt,<br />
aktivieren Sie die Option Termin findet jedes Jahr statt.<br />
8. Klicken Sie auf die Schaltfläche OK. Das Ereignis wird<br />
nun in der Ereignisliste für das ausgewählte Datum<br />
angezeigt.<br />
9. Nachdem Sie alle gewünschten Termine festgelegt haben,<br />
klicken Sie auf die Schaltfläche Speichern.<br />
Um einen ausgewählten Termin zu ändern<br />
oder zu entfernen, verwenden Sie die Symbole Termin<br />
bearbeiten oder Termin löschen.<br />
Arbeiten mit Slidern<br />
Slider bieten elegante und flexible Möglichkeiten für die Animation<br />
von Panels und lassen sich unter anderem für Werbebanner, News-<br />
Ticker und Alternativen zu Navigationsleisten einsetzen.<br />
Jeder Slider besteht aus einer Reihe von Panels - es kann jedoch<br />
immer nur ein Panel gleichzeitig angezeigt werden.
110 Die Layoutelemente<br />
Sie können auf jedem Panel eine Mischung aus Bildern, Texten,<br />
Linien und Formen platzieren. Wie in einer Diashow lassen sich<br />
die Panels auch so konfigurieren, dass sie in bestimmten<br />
Intervallen automatisch ein- und ausgeblendet werden. Eine<br />
manuelle Umschaltung zwischen den Panels ist ebenso möglich<br />
wie die Steuerung über einen Timer.<br />
Für die Darstellung der Panels stehen Ihnen verschiedene<br />
Animationstypen zur Verfügung. Sie können einfache<br />
Richtungsänderungen (z. B. Links nach Rechts, Oben nach Unten<br />
usw.) sowie eine Gemischte Animation (bestehend aus mehreren<br />
Varianten) verwenden oder auch spezifische Vorgaben wie<br />
Akkordeon, Overlay oder Bildlauf-Varianten einsetzen. Bei der<br />
Steuerung über einen Timer können Sie das Start- und Enddatum<br />
(oder die Zeit) für jedes Panel präzise angeben.<br />
In der Studio-Registerkarte Quelldateien steht Ihnen eine breite<br />
Palette professioneller Slider zur Verfügung. Nach dem Platzieren<br />
auf der Seite können Sie jede dieser Slidervarianten flexibel<br />
anpassen. Auf diese Weise lassen sich Panels hinzufügen, neu<br />
ordnen und löschen, sodass der Slider am Ende genau Ihren<br />
Vorstellungen entspricht.
Einfügen eines Sliders<br />
Die Layoutelemente 111<br />
1. Klicken Sie in der Studio-Registerkarte Quelldateien auf<br />
Durchsuchen.<br />
2. Klicken Sie in dem Dialogfeld Quelldatei-Browser unter<br />
Kategorien auf Slider/Panels.<br />
3. Blättern Sie in dem Hauptfeld durch die<br />
verschiedenen Kategorien und klicken Sie auf die<br />
Miniatur eines Sliders. Möchten Sie alle Slider einer<br />
Unterkategorie verwenden, klicken Sie auf das Symbol<br />
Alles hinzufügen. Ausgewählte Miniaturansichten<br />
werden stets mit einem Häkchen markiert.<br />
4. Klicken Sie als Letztes auf die Schaltfläche Schließen. Die<br />
Slider werden nun in der Kategorie „Slider/Panels“ der<br />
Studio-Registerkarte Quelldateien angezeigt.<br />
5. Ziehen Sie die Miniatur des gewünschten Objekts auf<br />
Ihre Seite.<br />
Auswählen eines Sliders<br />
• Öffnen Sie die Studio-Registerkarte Objekte und klicken<br />
Sie auf den Slider. Über dem Arbeitsbereich im<br />
Programmfenster wird nun die Kontextleiste für den<br />
Slider eingeblendet, sodass Sie den Slider bearbeiten<br />
können.<br />
Wenn Sie ein Objekt bearbeiten, das auf einem Panel<br />
platziert ist, und das Panel selbst auswählen möchten,<br />
klicken Sie auf den Menüpunkt Bearbeiten ><br />
Übergeordnetes Element auswählen. Mit einem<br />
weiteren Klick auf diesen Menüpunkt wählen Sie dann<br />
den Slider aus, zum dem das Panel gehört.<br />
Der Quelldatei-Browser enthält ebenfalls einige Slider<br />
mit einer separaten Navigationsleiste, über die Ihre<br />
Website-Besucher zwischen den Panels umschalten
112 Die Layoutelemente<br />
können. Alle Slider-Panels lassen sich hierbei präzise<br />
anpassen.<br />
Bearbeiten Ihres Sliders<br />
Standardmäßig enthält jeder Slider ein Set von Panels. Sie können<br />
den Slider jedoch wie folgt konfigurieren:<br />
• Hinzufügen, Kopieren und Löschen von Panels in dem<br />
Slider.<br />
• Einfügen von Inhalten in das aktuell sichtbare Panel.<br />
Bedenken Sie stets, dass Sie für jedes Panel in einem<br />
Slider die Inhalte genauso frei festlegen können, wie für<br />
ein eigenständiges Panel auf einer Webseite.<br />
• Austauschen von Bildern gegen ein eigenes Foto.<br />
Klicken Sie hierzu unter dem Bild des Panels auf Bild<br />
ersetzen.<br />
• Hinzufügen von Hyperlinks zu den Bildern,<br />
Schaltflächen oder anderen Objekten, die pro Panel auf<br />
ein anderes Ziel verweisen, wie z. B. eine Produktseite.<br />
Diese Linkziele lassen sich dann in einem neuen Fenster<br />
oder einer Lightbox einblenden.<br />
• Ändern des Animationstyps in eine der folgenden<br />
Optionen:<br />
Einfach: Einfache Umschaltung zwischen den Panels<br />
ohne Animation.<br />
Deckkraft abblenden: Umschalten zwischen den Panels;<br />
jedes Panel wird hierbei in das nächste abgeblendet.<br />
Von Links/Rechts/Oben/Unten: Umschalten zwischen<br />
den Panels; jedes Panel wird hierbei aus der<br />
entsprechenden Richtung in den Slider geschoben.
Die Layoutelemente 113<br />
Gemischt: Eine Kombination der obigen Methoden.<br />
Akkordeon Horizontal/Vertikal: Die Panels werden<br />
aufeinander „gestapelt“, sodass immer nur eine Kante<br />
sichtbar ist.<br />
Overlay schieben/abblenden: Hierbei werden nur zwei<br />
Panels verwendet. Platziert ein Website-Besucher die<br />
Maus auf dem ersten Panel, wird das zweite über dem<br />
ersten eingeblendet.<br />
Bildlauf: Die Panels werden in einem Raster angeordnet,<br />
und die Ansicht wechselt von einem Panel zum nächsten.<br />
Datum & Uhrzeit: Mit dieser Option können Sie Panels<br />
an einem bestimmten Datum zu einer frei<br />
konfigurierbaren Uhrzeit ein- und ausblenden.<br />
Darüber hinaus können Sie auch die Reihenfolge der Panels und<br />
Steuersymbole für die Wiedergabe ändern.<br />
Hinzufügen neuer Panels<br />
1. Wählen Sie den Slider aus.<br />
2. Klicken Sie in der Kontextleiste auf die Option<br />
Panel hinzufügen.<br />
Es wird nun ein leeres Panel nach dem letzten Panel in Ihrem<br />
Slider eingefügt. Sie können den Inhalt für das neue Panel frei<br />
festlegen (siehe Seite 92).<br />
Die Reihenfolge der Panels in dem Slider lässt sich über<br />
die Option Slider bearbeiten der Symbolleiste ändern.<br />
Navigieren zwischen Panels<br />
• Klicken Sie auf die Navigationssymbole direkt<br />
unter dem ausgewählten Slider.<br />
ODER<br />
Klicken Sie in der Sliderkontextleiste auf die Panelliste.
114 Die Layoutelemente<br />
Jeder Slider verfügt über ein Vordergrundpanel, das seinen Inhalt<br />
permanent anzeigt. Dieses Panel ist daher perfekt für<br />
Kontaktinformationen, E-Commerce-Schaltflächen,<br />
Telefonnummern oder ein Bild, das Sie ständig eingeblendet halten<br />
möchten.<br />
Die Slidereigenschaften lassen sich jederzeit ändern, sodass Sie die<br />
Animationstypen und Wiedergabesteuerung genau an Ihre<br />
Vorstellungen anpassen können. Die Reihenfolge der Panels in dem<br />
Slider lässt sich ebenfalls ändern und Sie können die Panels sogar zu<br />
bestimmten Zeiten einblenden.<br />
Ändern der Slidereigenschaften<br />
1. Führen Sie einen Doppelklick auf den Slider aus.<br />
2. Wählen Sie in der Registerkarte Optionen einen<br />
Animationstyp aus. In dem unteren Feld wird<br />
automatisch eine Vorschau für den ausgewählten Typ<br />
angezeigt.<br />
3. Legen Sie die anderen Steueroptionen für die Wiedergabe<br />
über die Kontrollkästchen und Dropdownfelder fest.<br />
4. Über die Registerkarte Panel können Sie Panel<br />
hinzufügen, Panel kopieren, Panel löschen oder die<br />
Reihenfolge der Panels durch Klicken und Ziehen ändern.<br />
Alternativ verwenden Sie die Optionen Panel Links und<br />
Panel Rechts. Geben Sie für jedes Panel einen<br />
einzigartigen Namen ein und/oder ändern Sie seine<br />
Hintergrundfarbe.<br />
5. Wenn Sie für den Animationstyp in der Registerkarte<br />
„Optionen“ die Einstellung „Datum & Uhrzeit“ festgelegt<br />
haben, können Sie für jedes ausgewählte Panel (mit<br />
Ausnahme des Vordergrundpanels) ein Startdatum und<br />
Enddatum sowie eine Startzeit und Endzeit festlegen.<br />
6. Klicken Sie auf die Schaltfläche OK.
5<br />
Die<br />
Navigationselemente
116 Die Navigationselemente
Einfügen von Navigationsleisten<br />
Die Navigationselemente 117<br />
Mit den Navigationsleisten können Ihre Website-Besucher bequem<br />
zu den verschiedenen Seiten umschalten, wie z. B. Homepage,<br />
Galerie, Produkte und Kontakt. Die Navigationsleisten in <strong>WebPlus</strong><br />
sind so programmiert, dass sie die Struktur Ihrer Website (siehe<br />
Seite 42) erkennen und automatisch berücksichtigen, sodass sich<br />
Website-Besucher später schnell zurechtfinden und problemlos<br />
durch die verschiedenen Seiten navigieren können.<br />
Navigationsleisten ermöglichen den Wechsel zwischen<br />
verschiedenen Sektionen und Stufen einer Website (siehe Seite 42)<br />
und enthalten Links zu der Homepage und den anderen Seiten der<br />
obersten Stufe für jede Sektion. Über Popup-Menüs lassen sich<br />
dann die untergeordneten Seiten der einzelnen Sektionen aufrufen.<br />
Die Navigationselemente lassen sich schnell und einfach auf jeder<br />
Strukturebene Ihrer Website platzieren und beliebig anpassen,<br />
sodass Sie Links zu einzelnen Seiten erstellen, die Darstellung der<br />
Navigationsleiste verändern oder auch bestimmte Seiten von der<br />
Website-Navigation ausschließen können.<br />
Einfügen von Navigationsleisten<br />
Navigationsleisten lassen sich zwar in jede Seite einfügen, werden<br />
aber für gewöhnlich auf der Master-Seite platziert. Hierdurch<br />
müssen Sie dasselbe Element nicht in alle Seiten einfügen, auf<br />
denen die Leiste später erscheinen soll.<br />
Wenn Sie eine Navigationsleiste einfügen, können Sie mit den<br />
folgenden Optionen festlegen, wie die Leiste auf der Seite angezeigt<br />
wird:<br />
• Typ: Hier legen Sie das grundlegende Design der<br />
Navigationsleiste fest (z. B. Block, Sprechblase,<br />
Traditionell).
118 Die Navigationselemente<br />
• Navigationstyp: Hier legen Sie fest, ob die<br />
Navigationsleiste auf der Website-Struktur oder einer<br />
von Ihnen selbst festgelegten Struktur basieren soll.<br />
• Darstellung: Hier bestimmen Sie das Design für<br />
Schaltflächen, Trennelemente und den Hintergrund der<br />
Navigationsleiste. Sie können wahlweise eine Vorlage<br />
verwenden oder die Designs auch selbst entwerfen.<br />
• Popup-Menüs: Hier legen Sie die Designs für<br />
Schaltflächen, Trennelemente und den Hintergrund aller<br />
Popup-Menüs fest, die über die Navigationsleiste<br />
aktiviert werden (falls Ihre Website-Struktur<br />
untergeordnete Seiten enthält).<br />
Hinzufügen einer Navigationsleiste<br />
1. Wählen Sie eine Seite (oder Master-Seite) aus.<br />
2. Klicken Sie in der Kategorie „Navigationselemente“<br />
der Studio-Registerkarte QuickBuild auf das Symbol<br />
Navigationsleiste.<br />
3. Platzieren Sie den Mauszeiger auf der gewünschten<br />
Seitenposition und klicken Sie einmal, um die Leiste zu<br />
platzieren. Die Leiste wird mit ihrem Mittelpunkt an der<br />
von Ihnen festgelegten Stelle positioniert.<br />
4. Blättern Sie in der Registerkarte Typ des nun geöffneten<br />
Dialogfelds durch die verschiedenen Kategorien. Um eine<br />
Kategorie zu erweitern, klicken Sie auf das Symbol .<br />
5. Prüfen Sie die einzelnen Navigationsleisten. Mit den<br />
Pfeiltasten Ihrer Tastatur können Sie bequem durch die<br />
Liste blättern. Klicken Sie einfach auf die gewünschte<br />
Designvariante, wie z. B. Traditionell 2.
Die Navigationselemente 119<br />
6. Wählen Sie in der Registerkarte Navigationstyp aus, ob<br />
der Aufbau der Navigationsleiste direkt aus der Website-<br />
Struktur Ihrer Website abgeleitet werden soll. Klicken Sie<br />
hierzu auf Basierend auf Website-Struktur.<br />
ODER<br />
Aktivieren Sie die Option Benutzerdefiniert und ändern<br />
Sie die Optionen der Navileiste (siehe auch „Anpassen<br />
der Navigationsstruktur“ auf Seite 120).<br />
Wenn Sie die Option „Website-Struktur“ verwenden,<br />
stehen Ihnen folgende Optionen zur Verfügung:<br />
• Wählen Sie die Strukturstufe aus, deren Seiten in<br />
der Navigationsleiste aufgelistet werden sollen:<br />
Oberste Stufe, Übergeordnete Stufe, Gleiche Stufe<br />
usw.<br />
• Je nach der Hauptauswahl können Sie nun noch<br />
untergeordnete Seiten, Anker, die Homepage<br />
sowie übergeordnete Seiten einschließen und/oder<br />
die aktuelle Seite ausblenden sowie deaktivierte<br />
Links ausblenden.<br />
• Legen Sie das Zielfenster oder den Zielrahmen fest,<br />
in dem die neue Seite geöffnet werden soll. Wählen<br />
Sie hierzu eine der Optionen Gleiches Fenster (die<br />
am häufigsten verwendete Variante), Neues Fenster<br />
(besonders hilfreich für Offsite-Seiten), Oben im<br />
aktuellen Fenster, Übergeordneter Rahmen,<br />
Benanntes Fenster, Dokumentrahmen oder<br />
Lightbox aus.<br />
7. Klicken Sie auf die Schaltfläche OK. Die<br />
Navigationsleiste wird nun auf Ihrer Seite angezeigt.
120 Die Navigationselemente<br />
Über den Quelldatei-Browser können Sie<br />
Navigationsleisten aus den Quelldatei-Paketen<br />
auswählen. Klicken Sie hierzu einfach in der Studio-<br />
Registerkarte Quelldateien auf Durchsuchen und<br />
wählen Sie die Kategorie „Seiteninhalt“ aus. Unter den<br />
nun angezeigten Quelldateien finden Sie auch eine<br />
breite Palette an Navigationsleisten.<br />
Einige Navigationsleisten folgen dem aktuell<br />
verwendeten Farbschema, sodass Sie ihre Darstellung<br />
noch weiter anpassen können. Nähere Informationen<br />
hierzu finden Sie unter „Arbeiten mit Farbschemata“<br />
auf Seite 67.<br />
Bearbeiten einer Navigationsleiste<br />
1. Führen Sie einen Doppelklick auf die Navigationsleiste<br />
aus.<br />
2. Sie können nun die verschiedenen Optionen der<br />
Registerkarten neu einstellen (siehe oben).<br />
Anpassen der Navigationsstruktur für eine Leiste<br />
Standardmäßig basiert die Struktur der Navigationsleiste auf Ihrer<br />
Website-Struktur. Möchten Sie für Ihre Navigationsleiste eine andere<br />
hierarchische Struktur verwenden als die Website-Struktur, können<br />
Sie mit <strong>WebPlus</strong> einen benutzerdefinierten Navigationsbaum<br />
zusammenstellen. Sie können einzelne Elemente beliebig hinzufügen,<br />
bearbeiten oder löschen und verschiedene Linkzieltypen festlegen<br />
(siehe auch „Einfügen von Hyperlinks und Aktionen“ auf Seite 126.)<br />
Wenn Sie mit einem benutzerdefinierten<br />
Navigationsbaum arbeiten, wird die Navigationsleiste<br />
nicht mehr automatisch aktualisiert, sobald Sie neue<br />
Seiten in Ihre Website einfügen. Möchten Sie auf diese<br />
Aktualisierung nicht verzichten, müssen Sie eine auf<br />
der Website-Struktur basierende Navigationsleiste<br />
verwenden.
Die Navigationselemente 121<br />
Anpassen einer ausgewählten Navigationsleiste<br />
1. Führen Sie einen Doppelklick auf die Navigationsleiste<br />
aus.<br />
2. Aktivieren Sie in der Registerkarte „Navigationstyp“ die<br />
Option Benutzerdefiniert.<br />
3. Ändern Sie die Reihenfolge der<br />
Navigationsleistenelemente durch Klicken und Ziehen<br />
mit der Maus oder mithilfe der Schaltflächen Aufwärts,<br />
Abwärts, Überordnen oder Unterordnen.<br />
4. Um einen neuen Link am Ende des benutzerdefinierten<br />
Navigationsbaums zu erstellen (z. B. um eine Seite zu<br />
integrieren, die Sie nachträglich in Ihre Website<br />
eingefügt haben), klicken Sie auf Link hinzufügen.<br />
Wählen Sie in dem nun geöffneten Dialogfeld ein<br />
Hyperlinkziel, ein Zielfenster oder einen Zielrahmen<br />
sowie einen Titel aus. Klicken Sie auf die Schaltfläche<br />
OK.<br />
5. Klicken Sie erneut auf die Schaltfläche OK. Die<br />
Navigationsleiste verwendet nun für die Menüanzeige<br />
den benutzerdefinierten Navigationsbaum.<br />
Um den Navigationsbaum wieder auf die Website-Struktur<br />
einzustellen, klicken Sie auf Zurücksetzen. Mit Alles löschen<br />
entfernen Sie alle Einträge in dem selbst definierten<br />
Navigationsbaum.<br />
Benutzerdefinierte Navigationsbäume lassen sich ebenfalls<br />
innerhalb der Website speichern und dann in anderen<br />
Navigationsleisten erneut verwenden.<br />
Sie können ebenfalls die Schaltflächen, Trennelemente und<br />
Hintergründe Ihrer eigenen Navigationleistenformate ändern.<br />
Nähere Informationen hierzu finden Sie in der <strong>WebPlus</strong>-Hilfe.
122 Die Navigationselemente<br />
Einfügen von Popup-Menüs<br />
Popup-Menüs sind ein wichtiger Bestandteil mehrstufiger<br />
Navigationsleisten (siehe Seite 115) und werden erst angezeigt,<br />
wenn Ihre Website-Besucher den Mauszeiger auf der<br />
entsprechenden Schaltfläche platzieren. In den Popup-Menüs<br />
werden die untergeordneten Seiten Ihrer Website-Hierarchie<br />
aufgelistet.<br />
In <strong>WebPlus</strong> können Sie Popup-Menüs zu jedem beliebigen Objekt<br />
hinzufügen (QuickShapes, Bildern, Grafikobjekten), hauptsächlich<br />
werden diese Menüs jedoch für Schaltflächen festgelegt. Das Menü,<br />
das sich über dieses „selbstständige“ Objekt öffnen lässt, entspricht<br />
dann seinem Gegenstück aus der Navigationsleiste. Popup-Menüs<br />
lassen sich auf ähnliche Weise konfigurieren wie<br />
Navigationsleisten, sodass sie entweder Ihre Website-Struktur<br />
(oder einen Teil davon) wiedergeben oder eine von Ihnen selbst<br />
festgelegte Struktur.<br />
Erstellen von Popup-Menüs<br />
1. Wählen Sie das Objekt aus, an das Sie das Popup-Menü<br />
anhängen möchten.<br />
2. Klicken Sie im Menü Format auf Popup-Menü.<br />
3. Aktivieren Sie in der Registerkarte Navigationstyp die<br />
Option Popup-Menü anzeigen, um die Navigationslinks<br />
für das Objekt zu aktivieren.<br />
4. Klicken Sie auf eine der Optionen Basiert auf Website-<br />
Struktur oder Benutzerdefiniert, um die<br />
Navigationslinks Ihrer Website für das Menü zu<br />
verwenden oder Ihre eigene Struktur (siehe Seite 120)<br />
festzulegen. Mit der ersten Option können Sie z. B. die<br />
untergeordneten Seiten einer Seite „Produkte“ aus der<br />
obersten Strukturebene als Grundlage für Ihr Menü<br />
verwenden.
Die Navigationselemente 123<br />
5. Klicken Sie in der Registerkarte Menüdarstellung des<br />
Dialogfeldes auf eine der Optionen Popup-Textmenü<br />
oder Popup-Grafikmenü. Die Einträge der Grafikmenüs<br />
bestehen nicht aus reinen Texten, sondern aus<br />
beschrifteten Schaltflächen.<br />
6. Passen Sie das Design für Ihr Popup-Menü mit den<br />
Dropdownfeldern, Kontrollkästchen und<br />
Auswahlsymbolen an. Die Optionen für die<br />
Schaltflächen, Trennelemente und den Hintergrund von<br />
Popup-Grafikmenüs ähneln denen für<br />
Navigationsschaltflächen.<br />
Eine genaue Beschreibung der Optionen finden Sie unter<br />
„Ändern der Popup-Menüs“ in der <strong>WebPlus</strong>-Hilfe.<br />
7. Klicken Sie auf die Schaltfläche OK.<br />
Einfügen von Schaltflächen<br />
Schaltflächen sind ein wichtiger Bestandteil der Navigationsleisten<br />
(siehe Seite 115) von <strong>WebPlus</strong>, lassen sich jedoch auch „solo“ auf<br />
Ihren Webseiten platzieren - entweder als separate Schaltflächen<br />
oder als Teil eines Formulars. Die Schaltflächen lassen sich so<br />
konfigurieren, dass der Mausklick eines Website-Besuchers z. B.<br />
ein Hyperlinkziel aufruft, ein Popup-Menü öffnet oder eine Aktion<br />
auslöst.<br />
In <strong>WebPlus</strong> können Sie Schaltflächen mit einer Vorlage erstellen<br />
oder in dem Button Studio von Grund auf neu entwerfen. Um<br />
beide Ansätze zu verbinden, wählen Sie einfach eine Vorlage aus<br />
und passen dann die verschiedenen Optionen für die Schaltfläche<br />
(Farbe, Aufschrift usw.) an.
124 Die Navigationselemente<br />
Einfügen vordefinierter Schaltflächen<br />
1. Klicken Sie in der Kategorie „Navigationselemente“<br />
der Studio-Registerkarte QuickBuild auf das Symbol<br />
Schaltfläche.<br />
2. Platzieren Sie den Mauszeiger auf der gewünschten<br />
Seitenposition und drücken Sie die linke Maustaste, um<br />
die Schaltfläche zu platzieren. Um die Größe der<br />
Schaltfläche selbst zu bestimmen, ziehen Sie bei<br />
gedrückter Maustaste den Cursor über die Seite und<br />
lassen die Maustaste wieder los, sobald der Button die<br />
gewünschten Abmessungen erreicht hat.<br />
3. Klicken Sie in dem Dialogfeld Schaltfläche bearbeiten<br />
auf die Vorschaubox.<br />
4. Wählen Sie eine Schaltflächenvorlage in dem Menü aus.<br />
Die Vorschau wird nun mit dem ausgewählten<br />
Schaltflächendesign aktualisiert.<br />
5. Geben Sie den Schaltflächentext ein, den Sie als<br />
Beschriftung verwenden möchten, wie z. B: „Home“,<br />
„Hilfe“ oder „Bilder“.<br />
6. Wählen Sie in der Registerkarte „Hyperlinks“ das<br />
Hyperlinkziel aus. Hiermit können Sie die Website-<br />
Besucher per Hyperlink (siehe Seite 126) auf ein<br />
bestimmtes Ziel verweisen (Internetseite, eine Datei,<br />
andere Seite Ihrer Website usw.).<br />
7. Wählen Sie in der Registerkarte „Zielfenster“ ein Fenster<br />
oder einen Rahmen in dem Dropdownfeld „Typ“ aus. Sie<br />
könnten die Zielseite zum Beispiel in einem „Neuen<br />
Fenster“ öffnen.<br />
8. Klicken Sie auf die Schaltfläche OK.
Die Navigationselemente 125<br />
Über die Registerkarten „Erweitert“ und „Aktionen“<br />
legen Sie Optionen für die Barrierefreiheit Ihrer Website<br />
und Attribute für Suchmaschinen-Bezüge (REL) fest<br />
sowie eine breite Palette an Aktionen (siehe Seite 129),<br />
die bestimmen, was die Website-Besucher mit einem<br />
Klick auf die Schaltfläche auslösen können.<br />
Über den Quelldatei-Browser steht Ihnen eine Vielzahl<br />
an Website-Buttons und Schaltflächen aus<br />
Themenvorlagen zur Verfügung, die in verschiedenen<br />
Quelldatei-Paketen gespeichert sind. Klicken Sie hierzu<br />
einfach in der Studio-Registerkarte Quelldateien auf<br />
Durchsuchen und wählen Sie die Kategorie<br />
„Schaltflächen“ aus.<br />
Bearbeiten einer Schaltfläche<br />
• Führen Sie einen Doppelklick auf die Schaltfläche aus<br />
und stellen Sie wie oben beschrieben die verschiedenen<br />
Optionen ein.<br />
Entwerfen eigener Schaltflächen<br />
Möchten Sie eine Schaltflächenvorlage noch weiter anpassen oder<br />
das Design komplett selbst entwerfen, verwenden Sie einfach das<br />
Button Studio - eine spezielle Designumgebung, die direkt in<br />
<strong>WebPlus</strong> integriert ist. Die Schaltfläche wird in diesem<br />
Studiofenster vollkommen isoliert angezeigt. Auf diese Weise<br />
können Sie sich ganz auf das Design Ihrer Schaltfläche<br />
konzentrieren und werden nicht von den anderen Elementen der<br />
Seite abgelenkt.
126 Die Navigationselemente<br />
Nähere Informationen hierzu finden Sie in der Hilfe zu <strong>WebPlus</strong>.<br />
Bearbeiten des Schaltflächendesigns<br />
• Klicken Sie in der Kontextleiste auf das Symbol<br />
Schaltflächendesign bearbeiten.<br />
Einfügen von Hyperlinks und Aktionen<br />
Wenn Sie Objekte wie z. B. Wörter, Bilder usw. mit einem<br />
Hyperlink versehen, kann ein Besucher Ihrer Website mit einem<br />
Klick auf dieses Objekt ein frei definierbares Ereignis auslösen.<br />
Aktionen ähneln in sofern den Hyperlinks, als dass sie ebenfalls<br />
bestimmen, was bei einem Mausklick oder der Mausberührung<br />
eines Objekts geschieht. Der Unterschied zu den Hyperlinks liegt<br />
jedoch darin, dass ein Klick oder eine Mausberührung auf der<br />
aktuellen Seite ein Ereignis auslösen und den Website-Besucher<br />
nicht zu einem anderen Ziel leiten. Nähere Informationen hierzu<br />
finden Sie unter dem Thema „Anwenden von Aktionen“ auf<br />
Seite 129.
Einfügen von Hyperlinks<br />
Hinzufügen eines Hyperlinks<br />
Die Navigationselemente 127<br />
1. Wählen Sie mit dem Zeigerwerkzeug ein einzelnes<br />
Objekt, eine Objektgruppe oder einen Textabschnitt aus.<br />
2. Klicken Sie in der Symbolleiste für<br />
Webeigenschaften auf die Option Hyperlink.<br />
Das Programm öffnet nun das Dialogfeld „Hyperlinks“.<br />
3. Wählen Sie den Zieltyp für den Hyperlink aus, wie z. B.<br />
eine Website-Seite, Internetseite, ein Smart-Objekt usw.<br />
4. Je nach Linktyp können Sie in dem rechten Feld nun<br />
unterschiedliche Optionen für Ihr Hyperlinkziel<br />
festlegen.<br />
5. Klicken Sie auf die Schaltfläche OK.<br />
Alle Hyperlinks und Anker in Ihrer Website lassen<br />
sich bequem mit dem Website-Manager verwalten,<br />
der jederzeit über die Standardkontextleiste sowie das<br />
Menü Extras erreichbar ist.<br />
Entfernen und Bearbeiten von Hyperlinks<br />
1. Markieren Sie mit dem Zeigerwerkzeug das gewünschte<br />
Objekt, oder platzieren Sie per Mausklick eine<br />
Einfügemarke in dem Linktext. (Sie müssen nicht den<br />
gesamten Hyperlinktext markieren.)<br />
2. Klicken Sie in der Symbolleiste für<br />
Webeigenschaften auf die Option Hyperlink.<br />
Das Dialogfeld „Hyperlink bearbeiten“ wird nun geöffnet und zeigt<br />
das Hyperlinkziel des ausgewählten Objekts an.
128 Die Navigationselemente<br />
• Um den Hyperlink zu modifizieren, wählen Sie einen<br />
neuen Zieltyp, ein neues Ziel und/oder andere Optionen<br />
aus.<br />
• Um den Hyperlink zu löschen, klicken Sie auf die Option<br />
Kein Hyperlink.<br />
Auswählen des Zielfensters<br />
Über die Registerkarte „Zielfenster“ im Dialogfeld „Hyperlink“<br />
können Sie eine Reihe unterschiedlicher Fenster, Rahmen oder<br />
auch eine Lightbox festlegen, in denen das Linkziel angezeigt<br />
werden soll.<br />
Auswählen eines Zielfensters<br />
1. Klicken Sie in dem Dialogfeld „Hyperlink bearbeiten“ auf<br />
die Registerkarte „Zielfenster“.<br />
2. Wählen Sie eine Option in dem Dropdownfeld Typ aus.<br />
Für künstlerische Texte, Rahmentexte oder Tabellentexte können<br />
Sie in der Registerkarte „Darstellung“ des Dialogfelds verschiedene<br />
Farboptionen für den Hyperlinktext festlegen.<br />
Ändern der Hyperlinkdarstellung<br />
1. Legen Sie die gewünschten Eigenschaften fest (z. B. den<br />
Titel, der als QuickInfo angezeigt wird, wenn Sie den<br />
Mauszeiger auf dem Link platzieren).<br />
2. Mit der Dropdownliste Stil legen Sie fest, wie der<br />
Hyperlinktext formatiert wird (nur für Texthyperlinks).<br />
Anzeigen und Bearbeiten bestehender Hyperlinks<br />
• Klicken Sie im Menü Extras auf Website-Manager ><br />
Hyperlink-Manager, wenn Sie einen Hyperlink<br />
anzeigen, umbenennen oder entfernen möchten.
Anwenden von Aktionen<br />
Die Navigationselemente 129<br />
Aktionen lassen sich für Objekte (nicht für Texte) festlegen und<br />
bieten Ihren Website-Besuchern mehr Interaktionsmöglichkeiten.<br />
Hierfür stehen Ihnen die folgenden Aktionen zur Verfügung, die<br />
gewöhnlich durch einen Mausklick oder das Platzieren der Maus<br />
auf dem Objekt ausgelöst werden:<br />
• Hinweis: Anzeigen eines Popup-Hinweisfensters (bei<br />
Mausklick).<br />
• Sichtbarkeit: Anzeigen eines Panels (bei Mausberührung<br />
oder Klick).<br />
• Deckkraft: Schaltet das Objekt transparent (bis zu der<br />
Mausberührung), um z. B. nur bei der Mausberührung<br />
Navigationsschaltflächen in dem Panel einzublenden.<br />
• Z-Index: Ändern der Stapelfolge (Z-Index) des Objekts in<br />
Relation zu anderen Objekten (bei Mausberührung). Ein<br />
hoher Wert für den Z-Index (z. B. 150) stellt sicher, dass<br />
dieses Objekt bei der Mausberührung immer vor allen<br />
anderen Objekten angezeigt wird (also nicht verdeckt ist).<br />
Auf diese Weise lässt sich z. B. ein Foto weiter unten in<br />
einem Bilderstapel mit der Mausberührung oben auf den<br />
Stapel legen.<br />
• Drucken: Drucken der aktuellen Seite über ein Drucken-<br />
Dialogfeld (bei Mausklick).<br />
• Slider: Hinzufügen einer Aktion (Wiedergabe, Pause usw.)<br />
zu einer Navigationsschaltfläche, um die Wiedergabe des<br />
Sliders zu steuern. Sie können die entsprechende Aktion<br />
zu allen Navigationsschaltflächen zuordnen, d. h. die<br />
Wiedergabe-Aktion zu einer Wiedergabe-Schaltfläche<br />
usw. Nähere Informationen hierzu finden Sie unter<br />
„Arbeiten mit Slidern“ auf Seite 109.
130 Die Navigationselemente<br />
• Slider-Feedback: Hiermit bestimmt der aktuelle<br />
Wiedergabestatus des Sliders den Schaltflächenzustand.<br />
Der Schaltflächenzustand ändert sich also dynamisch je<br />
nach momentaner Aktivität des Sliders.<br />
• Benutzerdefiniert: Hiermit können Sie selbst ein<br />
JavaScript festlegen, das als Reaktion auf einen<br />
Mausklick, Tastendruck usw. gestartet werden soll.<br />
Die Registerkarte „Aktionen“ wird nur angezeigt, wenn<br />
Sie ein Objekt auswählen. Nach der Auswahl von Text<br />
ist diese Registerkarte nicht verfügbar.<br />
Bevor Sie eine Aktion für einPanel festlegen können,<br />
müssen Sie zunächst das Panel erstellen. Weitere<br />
Informationen hierzu finden Sie unter „Einfügen von<br />
Panels“ auf Seite 89.<br />
Festlegen einer Aktion<br />
1. Klicken Sie in der Symbolleiste für<br />
Webeigenschaften auf die Option Aktionen bearbeiten.<br />
2. Klicken Sie in dem Dialogfeld auf Hinzufügen und dann<br />
auf die gewünschte Menüoption.<br />
3. Konfigurieren Sie in dem Dialogfeld die gewünschte<br />
Aktion.<br />
4. Klicken Sie auf die Schaltfläche OK.<br />
Bei der Vorschau oder nach dem Publizieren der Webseite lässt<br />
sich die ausgewählte Aktion dann mit einem Mausklick oder der<br />
Platzierung des Mauszeigers auf dem Objekt auslösen.
Einfügen von Ankern<br />
Die Navigationselemente 131<br />
Ein Anker ist eine bestimmte Position auf einer Webseite, die als<br />
Ziel für einen Hyperlink (siehe Seite 126) fungieren kann. Diese für<br />
die Website-Besucher unsichtbaren Anker markieren für<br />
gewöhnlich den Anfang von Absätzen, interessante Textstellen<br />
oder Bilder auf einer Webseite.<br />
Einfügen eines neuen Ankers<br />
1. Markieren Sie mit dem Zeigerwerkzeug das gewünschte<br />
Objekt, oder platzieren Sie per Mausklick eine<br />
Einfügemarke in dem Zieltext.<br />
2. Klicken Sie in der Symbolleiste für<br />
Webeigenschaften auf die Option Anker.<br />
3. Geben Sie in das Dialogfeld einen Namen für den Anker<br />
ein.<br />
4. (Optional) Aktivieren Sie die Option Anker in<br />
Navigation einschließen, damit der Anker (für<br />
gewöhnlich ein ausgewähltes Objekt) über die<br />
Navigationsleiste angesteuert werden kann anstatt über<br />
einen Hyperlink. Zuvor müssen Sie für Ihre<br />
Navigationsleiste jedoch die Option Anker einschließen<br />
(in den Navigationsleisteneinstellungen) aktivieren.<br />
Geben Sie nun einen Titel für den Anker ein.<br />
5. Klicken Sie auf die Schaltfläche OK.<br />
Anzeigen und Bearbeiten bestehender Anker<br />
• Klicken Sie im Menü Extras auf Website-Manager ><br />
Anker-Manager, wenn Sie auf Ihren Seiten festgelegte<br />
Anker überprüfen, umbenennen oder entfernen<br />
möchten. Sie können Anker ebenfalls in die<br />
Seitennavigation einbeziehen.
132 Die Navigationselemente<br />
Arbeiten mit Lightboxen<br />
Lightboxen bieten elegante und moderne<br />
Präsentationsmöglichkeiten für verschiedene Webinhalte, die dann<br />
einfach über Ihren Seiten eingeblendet werden. Wenn Sie auf ein<br />
Objekt mit entsprechendem Auslöser klicken, wird automatisch<br />
ein Popup-Fenster für die Lightbox geöffnet und zeigt den<br />
entsprechenden Inhalt an. Diese Fenster sind daher ideal zur<br />
Präsentation zusätzlicher Informationen - Ihre Website-Besucher<br />
entscheiden einfach selbst, welche Inhalte sie sehen möchten.<br />
Lightboxen lassen sich für die Anzeige folgender Inhalte<br />
konfigurieren:<br />
• Bilder (als größere Variante einer Bildminiatur, die Sie<br />
bereits auf einer Webseite platziert haben).<br />
• Formulare Ihrer Website.<br />
• Ein Anmeldungsfeld für die Zugangskontrolle.<br />
• Seiten (Ihrer Website oder aus dem Internet).<br />
• Blogs, Foren oder RSS-Feeds.<br />
• Word-Dateien, PDFs oder andere Dateitypen.
Die Navigationselemente 133<br />
Erstellen einer Lightbox für die Bilder auf Ihrer Webseite<br />
1. Wählen Sie ein Bild aus (vorzugsweise platziert als<br />
Bildminiatur).<br />
2. Klicken Sie in der Symbolleiste für<br />
Webeigenschaften auf Hyperlink.<br />
3. Wählen Sie in der Registerkarte „Hyperlink“ die Option<br />
Bild aus.<br />
4. Legen Sie in der Registerkarte „Zielfenster“ die Option<br />
„Lightbox“ über das Feld Typ fest.<br />
5. (Optional) Um einen Titel für das Bild in der Lightbox<br />
einzublenden, geben Sie den Text in das Feld Titel ein.<br />
6. Klicken Sie auf die Schaltfläche OK.<br />
Um die Darstellungsgröße der verknüpften Lightbox-Bilder<br />
einzuschränken, skaliert <strong>WebPlus</strong> größere Bilder automatisch auf<br />
eine maximale Breite und Höhe (standardmäßig 800 x 600 Pixel).<br />
Das Seitenverhältnis der Bilder bleibt hierbei unverändert. Bilder,<br />
deren Abmessungen kleiner als die Standardwerte sind, werden<br />
nicht skaliert. Sie können die Maximalwerte für Breite und Höhe<br />
jederzeit anpassen. Nähere Informationen hierzu finden Sie unter<br />
„Einstellen der globalen Lightbox-Eigenschaften“ auf Seite 136.<br />
Erstellen einer Lightbox für ein lokal gespeichertes Bild<br />
• Gehen Sie wie oben beschrieben vor und wählen Sie in<br />
dem Hyperlink-Dialogfeld anstelle der Option „Bild“ die<br />
Option Datei aus.<br />
Sie können das Bild wahlweise einbetten oder verknüpfen. In<br />
beiden Fällen wird das Bild mit seinen ursprünglichen<br />
Bildabmessungen angezeigt.
134 Die Navigationselemente<br />
Lightbox-Diashows<br />
Sie können einfache Lightbox-Diashows aus den Bildern erstellen,<br />
die auf derselben Webseite platziert sind. In der Lightbox werden<br />
dann Steuersymbole eingeblendet, mit denen die Betrachter durch<br />
die Bilder navigieren können.<br />
Erstellen einer Lightbox-Diashow<br />
1. Erstellen Sie eine Lightbox für ein Bild auf Ihrer<br />
Webseite (siehe oben).<br />
2. Klicken Sie in dem Dialogfeld Hyperlink und Aktionen<br />
bearbeiten auf die Registerkarte „Zielfenster“.<br />
3. Geben Sie eine Bezeichnung für die Diashow in das Feld<br />
Name der Diashow ein. Dieser Name wird dann auch<br />
für andere Bilder verwendet, die Sie zu dieser Diashow<br />
hinzufügen. Klicken Sie auf die Schaltfläche OK.<br />
4. Wiederholen Sie den Schritt für das nächste Bild. Der<br />
zuvor festgelegte Name der Diashow wird nun für alle<br />
anderen Bilder in dem entsprechenden Dropdownfeld<br />
aufgelistet. Wählen Sie den Namen der Diashow aus, um<br />
das Bild zu integrieren.<br />
5. (Optional) Geben Sie einen Titeltext für die einzelnen<br />
Bilder ein.<br />
6. Klicken Sie auf die Schaltfläche OK.<br />
Die Lightbox-Diashow lässt sich nur für die Bilder<br />
festlegen, die auf derselben Webseite platziert sind.<br />
Wenn Sie Bilder aus unterschiedlichen Seiten in eine<br />
Diashow einfügen, wird für jede Seite eine separate<br />
Diashow erstellt.
Die Navigationselemente 135<br />
Anzeigen beliebiger Hyperlinkziele in Lightboxen<br />
Lightboxen lassen sich nicht nur für die Darstellung von Bildern<br />
einsetzen. Eine Lightbox ist im Grunde ein Fenster, in dem Sie jede<br />
Art von Hyperlinkziel (siehe <strong>WebPlus</strong>-Hilfe) einblenden können -<br />
von den Seiten Ihrer Website (z. B. ein Formular oder eine<br />
Anmeldungsseite) bis zu beliebigen Internetseiten, Blogs, Foren<br />
oder RSS-Feeds. Word-Dateien, PDFs und andere Dateitypen<br />
lassen sich mit der Option Datei ebenfalls in einer Lightbox öffnen.<br />
Erstellen einer Lightbox für ein beliebiges Hyperlinkziel<br />
1. Wählen Sie ein Objekt aus (Bild, Schaltfläche usw.).<br />
2. Klicken Sie in der Symbolleiste für<br />
Webeigenschaften auf Hyperlink.<br />
3. Wählen Sie in der Registerkarte „Hyperlink“ ein<br />
Hyperlinkziel aus.<br />
4. Konfigurieren Sie die Lightbox wie zuvor beschrieben<br />
über die Registerkarte „Zielfenster“.
136 Die Navigationselemente<br />
Einstellen der globalen Lightbox-Eigenschaften<br />
Genau wie bei den meisten Einstellungen in <strong>WebPlus</strong> können Sie<br />
auch die Lightbox-Einstellungen für die aktuelle Website anpassen.<br />
Zu den konfigurierbaren Optionen einer Lightbox gehören die<br />
allgemeine Lightbox-Steuerung (einschließlich Umrandungstyp),<br />
die Titelformatierung (Schriftart, -größe, -farbe und -deckkraft)<br />
sowie die Hintergrundoptionen (Farbe und Deckkraft).<br />
Ändern der Lightbox-Einstellungen für Ihre Website<br />
1. Klicken Sie auf den Menüpunkt Bearbeiten > Website-<br />
Eigenschaften und dann auf die Kategorie „Features ><br />
Lightbox“.<br />
2. Passen Sie die gewünschten Optionen der allgemeinen<br />
Einstellungen, Titeleinstellungen und<br />
Hintergrundeinstellungen an.<br />
3. (Optional) Öffnen Sie eine Test-Lightbox über Vorschau<br />
der Lightbox, um Ihre Einstellungen zu prüfen und zu<br />
verfeinern.<br />
Lightboxen für Fotogalerien<br />
Sie können ebenfalls eine Fotogalerie (siehe Seite 96) im Stil einer<br />
Lightbox erstellen, wenn Sie die Option „JavaScript-Fotogalerie“<br />
verwenden. Einer der hier verfügbaren Galerietypen wurde speziell<br />
für Lightboxen entworfen.<br />
Wenn Sie diese Formatierung auswählen, können Sie die Lightbox-<br />
Einstellungen separat anpassen und somit die globalen<br />
Einstellungen in den Website-Eigenschaften ignorieren.
6<br />
Interaktive Objekte
138 Interaktive Objekte
Einfügen eines Rollovers<br />
Interaktive Objekte 139<br />
Bilder, deren Darstellung sich durch ein Mausereignis verändert,<br />
werden als Rollovergrafiken bezeichnet. Zu diesen<br />
Mausereignissen gehören z. B. ein Mausklick oder das Platzieren<br />
des Mauszeigers auf einem Objekt.<br />
Sie können ebenfalls Rollovergrafiken importieren, die<br />
mit <strong>Serif</strong> DrawPlus erstellt wurden. Nähere<br />
Informationen hierzu finden Sie in der <strong>WebPlus</strong>-Hilfe.<br />
Die Rolloveroptionen<br />
Wenn Sie einen Rollovereffekt einrichten, legen Sie zunächst den<br />
Rolloverzustand oder die Zustände für ein Objekt fest und weisen<br />
dann jedem Zustand ein bestimmtes Bild zu. <strong>WebPlus</strong> bietet Ihnen<br />
für die Rolloverzustände vier Grundoptionen:<br />
Normal<br />
Dies ist der „Ruhezustand“ der<br />
Grafik vor Beginn des<br />
Rollovereffekts. Diesen Zustand<br />
müssen Sie für alle Objekte<br />
festlegen.
140 Interaktive Objekte<br />
Mouseover<br />
Dieser Zustand wird ausgelöst,<br />
wenn sich der Mauszeiger auf<br />
dem Objekt befindet.<br />
Klick<br />
Dieser Zustand wird durch<br />
einen Mausklick auf das Objekt<br />
ausgelöst (d. h. die Maustaste<br />
muss gedrückt werden, wenn<br />
sich der Mauszeiger auf dem<br />
Objekt befindet).<br />
Der hier nicht dargestellte Zustand Klick+Mouseover wird für ein<br />
Mouseover-Ereignis verwendet, das nach dem Klick auf das Objekt<br />
eintritt.<br />
Für jeden Rollovereffekt können Sie ebenfalls ein Hyperlink-<br />
Ereignis festlegen, wie z. B. den Wechsel zu einer anderen<br />
Webseite. Dieses Ereignis wird automatisch ausgelöst, wenn ein<br />
Webseitenbesucher auf das Rolloverobjekt klickt und dann die<br />
Maustaste loslässt. Darüber hinaus lassen sich auch verschiedene<br />
Schaltflächen zu einer Gruppe zusammenfassen, sodass immer nur<br />
eine Schaltfläche den Klick-Zustand aufweisen kann.
Erstellen einer Rollovergrafik<br />
Interaktive Objekte 141<br />
1. Erstellen Sie in einem Bildbearbeitungsprogramm die<br />
gewünschten Quellbilder für die verschiedenen Zustände<br />
des Effekts.<br />
2. Klicken Sie in der Kategorie „Interaktive Objekte“<br />
der Studio-Registerkarte QuickBuild auf das Symbol<br />
Rollover und ziehen Sie den Mauszeiger mit gedrückter<br />
Maustaste über Ihre Seite, um die Größe des<br />
Rolloverobjekts zu bestimmen.<br />
3. Gehen Sie in der Registerkarte Rollovergrafik des nun<br />
geöffneten Dialogfelds „Rollover bearbeiten“ wie folgt<br />
vor:<br />
• Legen Sie unter „Rolloverzustände“ die<br />
gewünschten Zustände (siehe oben) für die Grafik<br />
fest. Klicken Sie für jeden Zustand auf die<br />
Schaltfläche Durchsuchen..., wählen Sie die<br />
entsprechende Bilddatei aus, und legen Sie dann die<br />
Exportoptionen für das Bild fest (siehe „Einstellen<br />
der Bildexportoptionen“ in der <strong>WebPlus</strong>-Hilfe).<br />
• Wenn Sie die Bilder in Ihre <strong>WebPlus</strong>-Website<br />
integrieren möchten, aktivieren Sie die Option<br />
Dateien in Website einbetten.<br />
• Wählen Sie für den anfänglichen Zustand des<br />
Rollovereffekts eine der Optionen Normal oder<br />
Klick aus.
142 Interaktive Objekte<br />
• Möchten Sie dieses Rolloverobjekt mit anderen<br />
Rolloverobjekten auf der Seite so gruppieren, dass<br />
immer nur eines dieser Objekte im „Klick-Zustand“<br />
angezeigt werden kann, aktivieren Sie für dieses und<br />
die anderen Rolloverobjekte der Gruppe die<br />
Einstellung Optionsfeld.<br />
4. (Optional) Legen Sie in der Registerkarte Hyperlinks ein<br />
Hyperlinkziel für den Rollover fest.<br />
5. Klicken Sie auf die Schaltfläche OK.<br />
<strong>WebPlus</strong> zeigt für die ausgewählte Rollovergrafik immer das Bild<br />
des Normal-Zustands an. Sie sollten daher die Webseite in einer<br />
Vorschau öffnen, um die Rollovergrafiken zu testen. Anschließend<br />
können Sie dann die notwendigen Korrekturen in <strong>WebPlus</strong><br />
vornehmen.<br />
Bearbeiten einer Rollovergrafik<br />
• Führen Sie einen Doppelklick auf die Rollovergrafik aus,<br />
um das Dialogfeld „Rollover bearbeiten“ zu öffnen.<br />
Stellen Sie die gewünschten Werte ein.
Einfügen von Rollover-Popups<br />
Interaktive Objekte 143<br />
In <strong>WebPlus</strong> werden Rollover-Popups hauptsächlich für Bilder<br />
verwendet. Wenn ein Website-Besucher den Mauszeiger auf eine<br />
Bildminiaturansicht bewegt, wird automatisch eine vergrößerte<br />
Darstellung des entsprechenden Fotos eingeblendet (für<br />
gewöhnlich ein wenig gegen die Miniatur versetzt).<br />
Mit <strong>WebPlus</strong> können Sie die Position und Größe des Popups in<br />
Relation zu der Miniaturansicht festlegen und auch die<br />
Miniaturansicht jederzeit auswählen und vergrößern oder<br />
verkleinern.<br />
Bearbeiten von Rollover-Popups<br />
1. Klicken Sie in der Kategorie „Interaktive Objekte“<br />
der Studio-Registerkarte QuickBuild auf das Symbol<br />
Rollover-Popup und ziehen Sie den Mauszeiger mit<br />
gedrückter Maustaste über Ihre Seite, um die Größe des<br />
Rolloverobjekts zu bestimmen.<br />
2. Gehen Sie in der Registerkarte Rollovergrafik des nun<br />
geöffneten Dialogfelds „Rollover-Popup bearbeiten“ wie<br />
folgt vor:<br />
• Wählen Sie das Bild für den Zustand „Normal“ aus,<br />
indem Sie über die Schaltfläche Durchsuchen... die<br />
gewünschte Datei angeben. Klicken Sie<br />
anschließend auf die Schaltfläche Öffnen.
144 Interaktive Objekte<br />
• Standardmäßig wird das für „Normal“ ausgewählte<br />
Bild auch für die Mouseover-Variante verwendet (z.<br />
B. für Fotominiaturansichten). Mit der Schaltfläche<br />
Durchsuchen... können Sie aber auch ein völlig<br />
anderes Bild auswählen.<br />
• (Optional) Legen Sie für eines oder beide Bilder die<br />
Exportoptionen fest (siehe „Einstellen der<br />
Bildexportoptionen“ in der <strong>WebPlus</strong>-Hilfe).<br />
• (Optional) Wenn Sie die Bilder in Ihre <strong>WebPlus</strong>-<br />
Website integrieren möchten, aktivieren Sie die<br />
Option Bilddateien in Website einbetten.<br />
Für die Rollover-Popups können Sie zusätzlich einen Titel<br />
festlegen, der dann neben dem Mouseover-Bild eingeblendet wird.<br />
Nähere Informationen hierzu finden Sie in der <strong>WebPlus</strong>-Hilfe.<br />
Damit das Rollover-Popup möglichst effektiv ist, müssen Sie noch<br />
die Position der Normal- und Mouseover-Bilder auf der Seite<br />
festlegen. Die Position der Bilder lässt sich über ein Dialogfeld<br />
präzise einstellen, indem Sie die Bilder einfach durch Ziehen mit<br />
der Maus platzieren oder ihre Größe ändern. Alternativ lassen sich<br />
die Einstellungen auch als absolute Pixelwerte festlegen.<br />
Positionieren der Rolloverbilder<br />
1. Öffnen Sie in dem Dialogfeld „Rollover-Popup<br />
bearbeiten“ die Registerkarte Rollovergrafik und klicken<br />
Sie auf die Schaltfläche Rolloverposition.<br />
2. Wählen Sie in dem nun geöffneten Dialogfeld ein Bild<br />
aus. In dem Dropdownfeld wird der aktuelle<br />
Auswahlstatus angezeigt:<br />
• Normal Auswahl: Ein Bild für den Zustand<br />
„Normal“ wird ausgewählt und mit einem grünen<br />
Rand markiert.
Interaktive Objekte 145<br />
• Mouseover Auswahl: Ein Bild für den Zustand<br />
„Mouseover“ wird ausgewählt und mit einem<br />
blauen Rand markiert.<br />
• Wenn Sie kein Bild auswählen, wird in dem<br />
Dropdownfeld der Eintrag Nein Auswahl angezeigt.<br />
3. Sie können die Bilder nun durch Klicken und Ziehen neu<br />
positionieren. Um die Bildgröße zu ändern, ziehen Sie<br />
mit gedrückter Maustaste einen der Eckziehpunkte. Das<br />
Seitenverhältnis wird bei dieser Skalierung beibehalten.<br />
Alternativ können Sie auch genaue Werte in die Felder<br />
Oben und Links sowie Breite und Höhe eingeben, um<br />
die Position festzulegen. Über die nach unten zeigenden<br />
Pfeile dieser Felder können Sie die drei zuletzt<br />
verwendeten Werte auswählen, die Sie für Normal,<br />
Mouseover und Titel (von oben nach unten) festgelegt<br />
haben, sodass sich die Bilder präzise ausrichten lassen.<br />
4. (Optional) Um die Position der Mouseover-Grafik in<br />
Relation zu der normalen Grafik beizubehalten, wenn die<br />
normale Grafik vergrößert oder verkleinert wird,<br />
aktivieren Sie die Option Position relativ zum<br />
Normalbild.<br />
5. (Optional) Wenn Sie die Bilder für den Normal-<br />
und/oder Mouseover-Zustand frei skalieren möchten,<br />
deaktivieren Sie die Option Seitenverhältnis<br />
beibehalten. Anschließend müssen Sie die<br />
Bildabmessungen mit den Eingabefeldern (nicht durch<br />
Ziehen) festlegen.<br />
Das Bild für den Zustand „Normal“ wird nun auf Ihrer Seite<br />
platziert. Das Mouseover-Bild lässt sich erst in einer Vorschau oder<br />
auf einer publizierten Webseite anzeigen.
146 Interaktive Objekte<br />
Indem Sie zusätzliche Normalbilder als separate Rollover-Popups<br />
auf einer Webseite platzieren, können Sie schnell und einfach eine<br />
interessante Galerie zusammenstellen, bei der sich die vergrößerten<br />
Bilder einfach per Mausklick auf die Miniaturen öffnen lassen.<br />
Bearbeiten von Rollover-Popups<br />
• Führen Sie einen Doppelklick auf das Normalbild einer<br />
Seite aus, um das Dialogfeld „Rollover-Popup<br />
bearbeiten“ zu öffnen. Stellen Sie die gewünschten Werte<br />
ein.<br />
Einfügen einer Website-Suche<br />
<strong>WebPlus</strong> verwendet eine leistungsstarke Suchfunktion, mit der Sie<br />
oder Ihre Website-Besucher gezielt die Texte (künstlerische Texte<br />
sowie Textrahmen und Tabellen) nach bestimmten Begriffen<br />
durchsuchen können.<br />
Die Suchfunktion besteht aus zwei Teilen: einem Formular für die<br />
Website-Suche und einem Fenster für die Website-<br />
Suchergebnisse.<br />
Ergebnisse der Website-Suche:<br />
Hiermit erstellen Sie ein Fenster,<br />
in dem die Suchergebnisse<br />
angezeigt werden. Dieses Fenster<br />
wird für gewöhnlich auf einer<br />
separaten Seite platziert und ist<br />
nicht Teil der Navigationsstruktur<br />
Ihrer Website.<br />
Für gewöhnlich wird das Fenster für die Suchergebnisse vor dem<br />
Formular für die Website-Suche platziert.
Interaktive Objekte 147<br />
Formular für die Website-Suche: In dieses Textfeld geben die<br />
Website-Besucher den Begriff ein, nach dem die Webseiten<br />
durchsucht werden sollen. Sie fügen dieses Textfeld für gewöhnlich<br />
auf einer Master-Seite ein, damit es auf allen Seiten Ihrer Website<br />
verfügbar ist.<br />
In den Suchergebnissen werden dann ein Seitenname mit<br />
Hyperlink angezeigt sowie ein entsprechender Text der Webseite<br />
als Referenz. Klicken Sie einfach auf den Hyperlink, um zu der<br />
entsprechenden Seite umzuschalten.<br />
Einfügen des Objekts für die Website-Suchergebnisse<br />
1. Klicken Sie im Menü Einfügen auf den Eintrag Website-<br />
Suche und in dem nun geöffneten Untermenü auf<br />
Website-Suchergebnisse.<br />
2. Ziehen Sie den Einfügen-Cursor mit gedrückter<br />
Maustaste über die Seite, um das Fenster für die<br />
Suchergebnisse zu platzieren.<br />
Es empfiehlt sich außerdem, die Suchergebnisse auf<br />
einer separaten (eventuell neuen) Seite einzublenden.<br />
Für diese Seite können Sie dann z. B. auch ein anderes<br />
Design festlegen als für den Rest der Website. Um die<br />
Darstellung auf der Seite zu ändern, führen Sie einfach<br />
einen Doppelklick auf das Objekt für die<br />
Suchergebnisse aus.<br />
Einfügen eines Formularobjekts für die Website-Suche<br />
1. Klicken Sie im Menü Einfügen auf den Eintrag Website-<br />
Suche und in dem nun geöffneten Untermenü auf<br />
Website-Suche.<br />
2. Klicken Sie mit dem Einfügen-Cursor auf die Seite, um<br />
das Formularobjekt für die Website-Suche zu platzieren.<br />
Damit Ihre Website-Besucher möglichst von allen<br />
Seiten auf die Suchfunktion zugreifen können, sollten
148 Interaktive Objekte<br />
Sie das Funktionsobjekt am oberen Rand einer Master-<br />
Seite platzieren.<br />
Bearbeiten der Darstellung für ein Suchen-Objekt<br />
• Führen Sie einen Doppelklick auf das Suchen-Objekt aus,<br />
um sein Bearbeitungsfenster zu öffnen. Stellen Sie die<br />
gewünschten Werte ein.<br />
Einfügen von Google Maps<br />
Google Maps sind ideal, wenn Sie Ihren Website-Besuchern eine<br />
genaue Karte zu Ihrem Unternehmen oder den Anfahrtsweg zu<br />
einem besonderen Event zur Verfügung stellen möchten. Diese<br />
Karten eignen sich ebenfalls hervorragend, um Sehenswürdigkeiten<br />
zu markieren.<br />
Auf jeder Karte können Sie Marker platzieren, um bestimmte Orte<br />
zu kennzeichnen.
Einfügen einer Google Map<br />
Interaktive Objekte 149<br />
1. Klicken Sie in der Kategorie „Interaktive Objekte“<br />
der Studio-Registerkarte QuickBuild auf das Symbol<br />
Google Map und ziehen Sie den Mauszeiger mit<br />
gedrückter Maustaste über Ihre Seite, um die Größe der<br />
Karte zu bestimmen.<br />
2. Tragen Sie in dem Dialogfeld „Google Map“ Ihre<br />
Postleitzahl oder Adresse in das Feld Folgenden Ort<br />
suchen ein und klicken Sie anschließend auf Suchen.<br />
<strong>WebPlus</strong> sucht nun mit dem Geolocator von Google<br />
nach der von Ihnen angegebenen Position und zeigt die<br />
lokalen Adressen an.<br />
Einfügen von Markern<br />
Sie können Ihre Google Map mit einer unbegrenzten<br />
Anzahl von Markern versehen. Jeder Marker lässt sich so<br />
konfigurieren, dass er bei einer Mausberührung oder einem Klick<br />
zusätzliche Details einblendet.<br />
Hinzufügen von Markern<br />
1. Klicken Sie im Dialogfeld „Google Map“ auf<br />
Hinzufügen.<br />
2. Klicken Sie in dem Dialogfeld „Google Map Marker“ mit<br />
dem Mauszeiger auf die gewünschte Position.<br />
3. Geben Sie einen Namen für den Marker ein. Dieser<br />
Name wird als QuickInfo angezeigt, wenn ein Website-<br />
Besucher den Mauszeiger auf dem Marker platziert.<br />
Hier könnten Sie z. B. den Namen einer Firma eintippen.
150 Interaktive Objekte<br />
4. Legen Sie eine Klickaktion für den Marker fest. Diese<br />
bestimmt, welche Informationen bei einem Mausklick<br />
angezeigt werden.<br />
5. Klicken Sie auf die Schaltfläche OK. Der Marker wird in<br />
der Kartenvorschau nun grün angezeigt. Hieran<br />
erkennen Sie stets die aktuelle Auswahl. Wiederholen Sie<br />
diese Schritte, um nacheinander alle gewünschten<br />
Marker zu platzieren.<br />
Einfügen einer Werbung<br />
Google AdSense ist ein kostenloser Service von Google, mit dem<br />
Sie Werbeflächen auf Ihren Webseiten platzieren können. Ihren<br />
Website-Besuchern werden dann Werbungen gezeigt, die je nach<br />
Inhalt Ihrer Webseiten variieren.<br />
Für die Werbeflächen benötigen Sie als Webentwickler einen<br />
gültigen Account bei Google Adsense (www.google.com/adsense),<br />
mit dem Sie Werbungen auswählen und ihre Darstellung festlegen<br />
können. Jede Werbung wird als Einheit bezeichnet. Sie können<br />
den für jede Einheit von der Google Adsense Website generierten<br />
Code kopieren und einfach in das Google Adsense Dialogfeld von<br />
<strong>WebPlus</strong> einfügen.<br />
Anmelden bei Google Adsense<br />
• Öffnen Sie die Website www.google.com/adsense, um<br />
sich anzumelden oder ein Konto zu eröffnen. Klicken Sie<br />
auf die Schaltfläche Jetzt anmelden, um Ihre<br />
bestehenden Benutzerdetails einzugeben oder ein Konto<br />
bei Google Adsense zu eröffnen. Als neuer Benutzer<br />
müssen Sie zunächst die URL Ihrer Website sowie die<br />
Sprache angeben und den Nutzungsbedingungen von<br />
Google zustimmen.
Interaktive Objekte 151<br />
Nach der Registrierung müssen Sie einige Zeit warten,<br />
bis Google geprüft hat, ob Ihre Website die<br />
Bedingungen für AdSense-Werbungen erfüllt. Sie<br />
erhalten dann eine E-Mail mit der Antwort von Google.<br />
Besteht Ihre Website die Prüfung, können Sie Ihre<br />
eigenen Anzeigen erstellen und verwalten.<br />
Bei der Registrierung wird Ihre Website überprüft und<br />
Sie erhalten Werbungen, die zu dem Inhalt Ihrer<br />
Website passen.<br />
Erstellen und Verwalten von Anzeigen<br />
1. Melden Sie sich bei Google Adsense an.<br />
2. Wählen Sie in dem Adsense Setup die Option Adsense<br />
für Content-Seiten aus und folgen Sie den Anweisungen<br />
des Assistenten, um eine Anzeigeneinheit zu erstellen.<br />
Legen Sie anschließend Format und Farbgebung für die<br />
Anzeigen fest.<br />
3. Kopieren Sie nun den von Google generierten Code der<br />
Anzeigeneinheit. Diesen Code müssen Sie in <strong>WebPlus</strong><br />
einfügen.
152 Interaktive Objekte<br />
Einbetten von Anzeigen in Ihre Webseite<br />
1. Wählen Sie eine Webseite oder Master-Seite aus, auf der<br />
Sie die Anzeige platzieren möchten.<br />
2. Öffnen Sie die Kategorie „Interaktive Objekte“ der<br />
Studio-Registerkarte QuickBuild und ziehen Sie das<br />
Symbol Google AdSense direkt auf Ihre Seite, um die<br />
Werbung in der Standardgröße zu erstellen.<br />
Die Abmessungen der Werbung lassen sich nicht<br />
ändern. Sie müssen die Werbung immer mit der von<br />
Google AdSense festgelegten Originalgröße<br />
verwenden.<br />
3. Klicken Sie auf die Schaltfläche Aus Zwischenablage<br />
einfügen, um den zuvor kopierten Code einzufügen. Der<br />
Code wird nun in Ihrem Dialogfeld angezeigt und lässt<br />
sich nicht bearbeiten.<br />
4. Klicken Sie auf die Schaltfläche OK.<br />
Bearbeiten Ihrer Anzeige<br />
1. Um das Format und die Farbe Ihrer Anzeigeneinheit zu<br />
ändern, nehmen Sie die entsprechenden Änderungen in<br />
dem Adsense Setup auf der Website von Google Adsense<br />
vor und kopieren dann den neu erstellten Code.<br />
2. Führen Sie einen Doppelklick auf die Anzeige Ihrer Seite<br />
aus.<br />
3. Klicken Sie auf die Schaltfläche Aus Zwischenablage<br />
einfügen, um den zuvor kopierten Code einzufügen.<br />
4. Klicken Sie auf die Schaltfläche OK.
7<br />
Externe/Verwaltete<br />
Inhalte
154 Externe/Verwaltete Inhalte
Einfügen von Dokumentrahmen<br />
Externe/Verwaltete Inhalte 155<br />
Mit <strong>WebPlus</strong> können Sie einen oder mehrere Rahmen auf einer<br />
Seite platzieren, um in diesen Rahmen eine andere Seite Ihrer<br />
Website anzuzeigen. Diese auf einer Seite eingebetteten<br />
Dokumentrahmen werden auch als „Inline Frames“ oder IFrames<br />
bezeichnet. Dokumentrahmen lassen sich genau wie Bilder an jeder<br />
beliebigen Stelle einer Seite platzieren und flexibel skalieren.<br />
Obwohl das in diesen Rahmen per Link angezeigte Ziel häufig eine<br />
Seite ist, können Sie die Rahmenlinks auch auf beliebige andere<br />
Ziele erstellen, wie z. B. eine Seite im Internet, eine lokale Datei, ein<br />
Smart-Objekt oder gespeicherte Benutzerdaten.<br />
Wenn Sie einen Rahmen zu einer Master-Seite<br />
hinzufügen, sollten Sie sicherstellen, dass die Zielseite<br />
des Rahmens nicht dieselbe Master-Seite verwendet,<br />
damit kein unerwünschter „Seite-in-Seite“-Effekt<br />
auftritt.<br />
<strong>WebPlus</strong> unterstützt ebenfalls Aktive Dokumentrahmen. Dies ist<br />
besonders hilfreich, wenn Sie eine Website mit Rahmen aufgebaut<br />
haben und eine bestimmte Seite in einem Rahmen öffnen möchten.
156 Externe/Verwaltete Inhalte<br />
Der Name des aktiven Dokumentrahmens besteht aus einer<br />
Kombination von Seiten- und Rahmennamen. Die Bezeichnung<br />
„Home:ifrm_6“ steht z. B. für die Seite „Home“ (also die<br />
Homepage) und den automatisch generierten Frame „ifrm_6“. Die<br />
Seiten lassen sich mit einer Weiterleitung zu dem Rahmen<br />
ausstatten, in dem sie angezeigt werden sollen. Dies ist besonders<br />
praktisch, wenn die Seiten über eine Suchmaschinenabfrage<br />
aufgerufen werden. Um diese Möglichkeit für alle Seiten<br />
festzulegen, die in einem Rahmen angezeigt werden sollen,<br />
verwenden Sie die Seiteneigenschaften der Seite. Aktivieren Sie in<br />
dem Dialogfeld Seiteneigenschaften unter der Kategorie<br />
„Navigation“ die Optionen Im aktiven Dokumentrahmen öffnen<br />
und Falls notwendig zu diesem Rahmen weiterleiten.<br />
Erstellen einer Website mit Dokumentrahmen<br />
1. Wählen Sie die Seite aus, auf der Sie den Rahmen<br />
einfügen möchten.<br />
2. Klicken Sie in der Kategorie „Externe/Verwaltete<br />
Inhalte“ der Studio-Registerkarte QuickBuild auf das<br />
Symbol Dokumentrahmen.<br />
3. Ziehen Sie den Mauszeiger mit gedrückter Maustaste<br />
über Ihre Seite, um den Bereich und die Größe für den<br />
Rahmen zu bestimmen.<br />
4. Es wird nun ein Dialogfeld geöffnet, mit dem Sie<br />
verschiedene Einstellungen für den Dokumentrahmen<br />
konfigurieren können. Hierzu gehören:<br />
• HTML-ID: Diese einzigartige ID wird für jeden<br />
Rahmen festgelegt. Für gewöhnlich müssen Sie diese<br />
Einstellung nicht ändern.<br />
• Aktiver Dokumentrahmen: Aktivieren Sie diese<br />
Option, wenn Sie per Hyperlink die Seiten in einem<br />
Rahmen auf einer anderen Seite öffnen möchten.
Externe/Verwaltete Inhalte 157<br />
5. Wählen Sie in der Registerkarte „Inhalte“ ein Linkziel<br />
aus. Klicken Sie einfach auf eines der Symbole, um z. B.<br />
eine Seite Ihrer Website, eine Internet-Seite, ein Smart-<br />
Objekt, oder eine Datei auf Ihrer Festplatte als Ziel<br />
auszuwählen.<br />
6. Legen Sie die Informationen für den Inhalt des Rahmens<br />
(den Namen der Seite oder Internet-Seite usw.) fest. Je<br />
nach ausgewähltem Ziel können Sie in diesem Feld<br />
unterschiedliche Optionen einstellen.<br />
7. Klicken Sie auf die Schaltfläche OK.<br />
Absolute URLS<br />
Da Rahmen eine Webseite in unterschiedliche Felder teilen, die alle<br />
separate HTML-Dokumente anzeigen, müssen Sie sicherstellen,<br />
dass alle Teile des Rahmens mit absoluten URLs bezeichnet<br />
werden. Wenn Sie mit absoluten URLs arbeiten möchten, müssen<br />
Sie die Stamm-URL Ihrer Website festlegen, die ein fester<br />
Bestandteil aller URLs Ihrer Webseiten ist, z. B. www.serif.com.<br />
<strong>WebPlus</strong> verwendet dann diese Vorgabe, um den Rest der URL zu<br />
erstellen.<br />
Einfügen eines Blogs<br />
Ein Blog (Kurzform von „Weblog“) übernimmt die Funktion eines<br />
Tagebuchs/Nachrichtenblattes auf Ihrer Website, in dem Sie mit<br />
einem unkomplizierten RTF-Editor Ihre eigenen Artikel<br />
veröffentlichen. Bei den Blogs ist es üblich, dass die Besucher der<br />
Website die verschiedenen Artikel kommentieren können.<br />
In <strong>WebPlus</strong> gehören die Blogs zu den Smart-Objekten, einer<br />
besonderen Kategorie von Seitenelementen, die auf dem Server<br />
eines sicheren Onlinedienstes gespeichert werden - den <strong>Serif</strong><br />
Webressourcen. Wenn Sie also einen Blog oder ein anderes Smart-<br />
Objekt verwenden möchten, benötigen Sie ein gültiges
158 Externe/Verwaltete Inhalte<br />
Benutzerkonto für die <strong>Serif</strong> Webressourcen. Dieses Konto können<br />
Sie bequem anlegen, wenn Sie Ihren Blog erstellen.<br />
Als Besitzer des Blogs übernehmen Sie auch die Blogverwaltung.<br />
Sie können für den Blog z. B. Artikel hinzufügen, bearbeiten und<br />
entfernen sowie Kommentare löschen, die Website-Besucher zu<br />
den Artikeln hinterlassen haben. Blogs lassen sich ebenfalls so<br />
konfigurieren, dass mehrere Autoren Artikel zu dem Blog<br />
beisteuern können (siehe <strong>WebPlus</strong>-Hilfe).<br />
Wenn Sie viel unterwegs sind und häufig mit einem<br />
Laptop von unterschiedlichen geografischen<br />
Standorten arbeiten, können Sie diese verwalteten<br />
Inhalte jederzeit über die <strong>Serif</strong> Webressourcen<br />
aktualisieren. Sie müssen Ihre Website dann<br />
anschließend NICHT erneut publizieren.<br />
Einfügen von Blogs<br />
Blogs lassen sich genau wie alle anderen Objekte in <strong>WebPlus</strong><br />
behandeln, sodass Sie das gewünschte Objekt einfach an der<br />
passenden Stelle Ihrer Webseite absetzen können.<br />
Einfügen eines Blogs auf einer Seite<br />
1. Klicken Sie in der Kategorie „Externe/Verwaltete<br />
Inhalte“ der Studio-Registerkarte QuickBuild auf das<br />
Symbol Blog.<br />
2. Ziehen Sie den Mauszeiger mit gedrückter<br />
Maustaste über Ihre Seite, um den Bereich und die Größe<br />
für den Blog zu bestimmen.<br />
Sollten Sie noch kein Konto bei den <strong>Serif</strong> Webressourcen<br />
angelegt haben oder gerade nicht angemeldet sein, wird<br />
automatisch das Anmeldungsfenster für die <strong>Serif</strong><br />
Webressourcen geöffnet. Um sich anzumelden, klicken
Externe/Verwaltete Inhalte 159<br />
Sie unter Neuer Benutzer auf Konto anlegen.<br />
ODER<br />
Besitzen Sie bereits ein Konto und sind angemeldet, wird<br />
das Dialogfeld „Blog bearbeiten“ geöffnet.<br />
3. Geben Sie in das Dialogfeld einen Namen für Ihren Blog<br />
ein. Dieser Blogtitel wird auch am Anfang des im Web<br />
publizierten Blogs angezeigt.<br />
4. (Optional) Geben Sie eine Beschreibung ein, um den<br />
Inhalt Ihres Blogs zu umreißen. Benötigen Sie nähere<br />
Informationen zu den anderen Optionen, klicken Sie<br />
einfach auf die Hilfe-Schaltfläche des Dialogfelds.<br />
5. Klicken Sie auf die Schaltfläche Speichern. Der nun<br />
angezeigte hellblaue Bereich kennzeichnet den Blog.<br />
Bearbeiten Ihres Blogs<br />
• Führen Sie einen Doppelklick auf den Blog aus.<br />
Weitere Informationen zu den Kontooptionen der <strong>Serif</strong><br />
Webressourcen finden Sie unter dem Thema „Arbeiten<br />
mit Smart-Objekten“ (siehe Seite 180).<br />
Verwalten Ihres Blogs<br />
Über die Blogverwaltung können Sie Artikel hinzufügen,<br />
bearbeiten und entfernen sowie Kommentare löschen, die zu<br />
Artikeln abgegeben wurden. Mit den Editorgruppen lassen sich<br />
auch Artikel veröffentlichen, die aus der Feder mehrerer Autoren<br />
stammen. Um einen neuen Artikel zu erstellen oder einen<br />
bestehenden zu bearbeiten, geben Sie einfach den gewünschten<br />
Text in den RTF-Editor ein, wählen die Tags und den Poster des<br />
Artikels aus, aktivieren die Rückverfolgung oder geben einen<br />
Kommentar ein.
160 Externe/Verwaltete Inhalte<br />
Verwalten Ihres Blogs<br />
• Wählen Sie den Blog aus und klicken Sie in der<br />
Kontextleiste auf Verwalten.<br />
Nähere Informationen sowie eine Beschreibung der<br />
einzelnen Optionen finden Sie in der Hilfe zu den<br />
Webressourcen. Klicken Sie einfach in dem Smart-<br />
Objekt-Dialogfeld des Blogs auf „Hilfe“.<br />
Weitere Informationen zu den Smart-Objekten finden Sie in der<br />
<strong>WebPlus</strong>-Hilfe.<br />
Einfügen eines News-Fensters<br />
News-Fenster sind ideal, wenn Sie Ihren Website-Besuchern<br />
wichtige, aktuelle Informationen präsentieren möchten. Die<br />
Homepage ist daher der perfekte Platz für diese Objekte. Hier<br />
können Sie z. B. geänderte Zeitpläne auflisten oder andere Daten<br />
und Fakten, die nur für einen kurzen Zeitraum relevant sind.<br />
Dieses Objekt unterstützt neben der RTF-Bearbeitung auch<br />
Absatzformatvorlagen, Hyperlinks, integrierte Mediadateien sowie<br />
die Bearbeitung des HTML-Quellcodes.<br />
Wenn Sie viel unterwegs sind und häufig mit einem<br />
Laptop von unterschiedlichen geografischen<br />
Standorten arbeiten, können Sie diese verwalteten<br />
Inhalte jederzeit über die <strong>Serif</strong> Webressourcen<br />
aktualisieren. Sie müssen Ihre Website dann<br />
anschließend NICHT erneut publizieren.<br />
Einfügen eines News-Fensters<br />
1. Klicken Sie in der Kategorie „Externe/Verwaltete<br />
Inhalte“ der Studio-Registerkarte QuickBuild auf das<br />
Symbol News.
Externe/Verwaltete Inhalte 161<br />
2. Ziehen Sie den Mauszeiger mit gedrückter<br />
Maustaste über Ihre Seite, um den Bereich und die Größe<br />
für das News-Fenster zu bestimmen.<br />
Sollten Sie noch kein Konto bei den <strong>Serif</strong> Webressourcen<br />
angelegt haben oder gerade nicht angemeldet sein, wird<br />
automatisch das Anmeldungsfenster für die <strong>Serif</strong><br />
Webressourcen geöffnet. Um sich anzumelden, klicken<br />
Sie unter Neuer Benutzer auf Konto anlegen.<br />
ODER<br />
Besitzen Sie bereits ein Konto und sind angemeldet, wird<br />
das Dialogfeld für die Bearbeitung des Smart-Objekts<br />
geöffnet.<br />
3. Geben Sie in das Dialogfeld einen Namen für Ihr News-<br />
Fenster ein. Dieser Titel wird auch am Anfang des im<br />
Web publizierten Fensters angezeigt.<br />
4. Klicken Sie auf die Schaltfläche Speichern. Der nun<br />
angezeigte hellblaue Bereich kennzeichnet das Fenster.<br />
Bearbeiten Ihres News-Fensters<br />
• Führen Sie einen Doppelklick auf das News-Fenster aus.<br />
Weitere Informationen zu den Kontooptionen der <strong>Serif</strong><br />
Webressourcen finden Sie unter dem Thema „Arbeiten<br />
mit Smart-Objekten (siehe Seite 180).<br />
Verwalten Ihres News-Fensters<br />
• Wählen Sie das Fenster aus und klicken Sie in der<br />
Kontextleiste auf Verwalten.
162 Externe/Verwaltete Inhalte<br />
Einfügen eines Forums<br />
Mit <strong>WebPlus</strong> können Sie ein Smart-Objekt für ein Forum auf Ihren<br />
Webseiten platzieren. Dieses Forum lässt sich dann flexibel in<br />
verschiedene Kategorien mit einem oder mehreren Unterforen<br />
aufteilen.<br />
Besucher Ihrer Website können dann die in den Unterforen<br />
geposteten Themen sowie die Antworten, den Autor eines Beitrags<br />
und das zuletzt eingefügte Posting sehen. Website-Besucher<br />
können ebenfalls einen Beitrag zu einem Thema schreiben oder<br />
auch selbst ein völlig neues Diskussionsthema eröffnen.<br />
Das von Ihren Website-Besuchern in einem Unterforum neu<br />
erstellte Diskussionsthema steht dann auch für alle anderen<br />
Website-Besucher offen, sodass diese Ihre Meinung als Nachricht<br />
posten können; auf diese Weise entsteht ein Diskussionsfaden<br />
(auch „Thread“ genannt).<br />
Die Forum-Features<br />
• Anlegen mehrerer untergeordneter Foren (Plato,<br />
Aristoteles, Descartes usw.) in Kategorien (z. B.<br />
Philosophen).<br />
• Festlegen einer Zugangskontrolle für Benutzer und<br />
Moderatoren.<br />
• Einstellen des Datenschutzes per Forumzugang<br />
(öffentlich oder nur für ausgewählte Mitglieder).<br />
• Formatieren des Forums mit einem Thema (visueller Stil).<br />
• Anlegen, Bearbeiten und Zuweisen von Benutzerrängen.<br />
• Festlegen der Benutzerrechte.<br />
• Verwalten und Moderieren des Forums, ohne das Forum<br />
neu publizieren zu müssen.
Externe/Verwaltete Inhalte 163<br />
Wenn Sie viel unterwegs sind und häufig mit einem<br />
Laptop von unterschiedlichen geografischen<br />
Standorten arbeiten, können Sie diese verwalteten<br />
Inhalte jederzeit über die <strong>Serif</strong> Webressourcen<br />
aktualisieren. Sie müssen Ihre Website dann<br />
anschließend NICHT erneut publizieren.<br />
Einfügen eines Forums<br />
Foren lassen sich genau wie andere Objekte auf Seiten einfügen. Sie<br />
können jedoch das Forum auch über einen Offsite-Link als Fenster<br />
in voller Größe präsentieren.<br />
Einfügen eines Forums<br />
1. Klicken Sie in der Kategorie „Externe/Verwaltete<br />
Inhalte“ der Studio-Registerkarte QuickBuild auf das<br />
Symbol Forum.<br />
2. Ziehen Sie den Mauszeiger mit gedrückter<br />
Maustaste über Ihre Seite, um den Bereich und die Größe<br />
für das Forum zu bestimmen.<br />
Sollten Sie noch kein Konto bei den <strong>Serif</strong> Webressourcen<br />
angelegt haben oder gerade nicht angemeldet sein, wird<br />
automatisch das Anmeldungsfenster für die <strong>Serif</strong><br />
Webressourcen geöffnet. Um sich anzumelden, klicken<br />
Sie unter Neuer Benutzer auf Konto anlegen.<br />
ODER<br />
Besitzen Sie bereits ein Konto und sind angemeldet, wird<br />
das Dialogfeld „Forum bearbeiten“ geöffnet.<br />
3. Geben Sie in das Dialogfeld einen Namen für Ihr Forum<br />
ein. Dieser Forumtitel wird auch am Anfang des im Web<br />
publizierten Forums angezeigt.
164 Externe/Verwaltete Inhalte<br />
4. Geben Sie eine Forumbeschreibung ein, um Ihren<br />
Website-Besuchern einen Eindruck von den diskutierten<br />
Inhalten zu vermitteln.<br />
5. Klicken Sie auf die Schaltfläche Speichern. Das Forum<br />
wird nun auf Ihrer Seite platziert.<br />
Wenn Sie bereits ein Smart-Objekt für die<br />
Zugangskontrolle in den <strong>Serif</strong> Webressourcen angelegt<br />
haben und dieses verwenden möchten, wählen Sie den<br />
entsprechenden Eintrag in dem Dropdownfeld<br />
Zugangskontrolle (bestehend) aus. Alternativ legen<br />
Sie über die Option Zugangskontrolle (Neu) einfach<br />
ein neues Objekt für die Zugangskontrolle zu Ihrem<br />
neuen Forum an.<br />
Sie können über den Menüpunkt Einfügen > Smart-<br />
Objekt ebenfalls ein Forum anlegen.<br />
Bearbeiten Ihres Forums<br />
• Führen Sie einen Doppelklick auf das Forum aus.<br />
Wenn Sie ein neues Forum erstellen, wird automatisch<br />
ein damit verbundenes Smart-Objekt für die<br />
Zugangskontrolle angelegt. Möchten Sie ein Smart-<br />
Objekt für die Zugangskontrolle verwenden, das<br />
bereits in den <strong>Serif</strong> Webressourcen vorhanden ist,<br />
wählen Sie es in dem Dropdownfeld<br />
Zugangskontrolle aus.<br />
Weitere Informationen zu den Kontooptionen der <strong>Serif</strong><br />
Webressourcen finden Sie unter dem Thema „Arbeiten<br />
mit Smart-Objekten“ (siehe Seite 180).
Verwalten Ihres Forums<br />
Externe/Verwaltete Inhalte 165<br />
Bis jetzt haben Sie nur ein Unterforum innerhalb einer einzigen<br />
Kategorie angelegt. Möchten Sie den Namen einer Kategorie oder<br />
eines Unterforums ändern oder weitere Kategorien hinzufügen<br />
und/oder zusätzliche Unterforen in den Kategorien erstellen,<br />
müssen Sie die Forumverwaltung verwenden. Hier legen Sie<br />
ebenfalls die Optionen für den Datenschutz, die Moderation,<br />
Themen und Benutzerränge (nach Anzahl der Postings) fest.<br />
Verwalten Ihres Forums<br />
• Wählen Sie das Forum aus und klicken Sie in der<br />
Kontextleiste auf Verwalten.<br />
Die Forensicherheit<br />
Standardmäßig wird Ihr Forum mit aktivierter Option Neue<br />
Benutzer bei Beitritt hinzufügen angelegt. Auf diese Weise müssen<br />
Sie keine weiteren Schritte unternehmen und können sich auf die<br />
Moderation der Foreninhalte beschränken. Möchte sich einer Ihrer<br />
Website-Besucher an einer Forumsdiskussion beteiligen, gibt er<br />
einfach selbst die Anmeldungsdaten zu seiner Person ein und kann<br />
anschließend Beiträge in das Forum schreiben.<br />
Das Forum verwendet hierbei ein Smart-Objekt für Benutzerlisten<br />
als Zugangskontrolle, das automatisch zusammen mit Ihrem Forum<br />
angelegt wird. Bedenken Sie stets, dass Ihr Forum auch ein Smart-<br />
Objekt ist! Mit dem Smart-Objekt für Benutzerlisten können Sie die<br />
Benutzer Ihres Forums auf verschiedene Weise verwalten:<br />
• Manuelles Hinzufügen von Benutzern: Für private<br />
Foren können Sie z. B. eine begrenzte Liste von ganz<br />
bestimmten Benutzern festlegen. Nur diese Personen<br />
können sich dann an den Diskussionen beteiligen und<br />
alle anderen Website-Besucher können sich nicht selbst<br />
für dieses Forum anmelden.
166 Externe/Verwaltete Inhalte<br />
• Zugriffsrechte für Benutzer einfrieren und Benutzer<br />
per Bann ausschließen: Manchmal geht es in<br />
Forumsdiskussionen nicht weniger hitzig zu, als in<br />
„realen“ Streitgesprächen. Von Zeit zu Zeit müssen die<br />
Forumsmoderatoren dann eingreifen, um die Diskussion<br />
wieder in die Bahn des eigentlichen Themas zu lenken<br />
und die Teilnehmer ermahnen, sich an die „Hausregeln“<br />
zu halten. Zu diesem Zweck können Sie Benutzer<br />
einfrieren (zeitweilig ausschließen) oder per Bann<br />
komplett ausschließen.<br />
Manuelles Hinzufügen von Forumbenutzern<br />
1. Klicken Sie im Menü Einfügen auf Smart-Objekt.<br />
2. Wählen Sie in der Bibliothek für Smart-Objekte den<br />
Eintrag für eine Benutzerliste aus, die denselben Namen<br />
trägt wie Ihr Forum.<br />
3. Klicken Sie auf Verwalten.<br />
4. Mit den Registerkarten „Benutzer“ und „Gruppen“<br />
können Sie dann manuell neue Benutzer hinzufügen und<br />
bestehende Benutzer einfrieren oder per Bann „vor die<br />
Tür setzen“.<br />
5. Klicken Sie anschließend auf die Schaltfläche Beenden.<br />
Foren sind sehr komplexe Objekte. Benötigen Sie<br />
nähere Informationen zu den<br />
Konfigurationsmöglichkeiten oder eine Beschreibung<br />
der Optionen, klicken Sie in dem Dialogfeld für Smart-<br />
Objekte auf die Hilfe-Schaltfläche.
Einfügen eines RSS-Readers<br />
Externe/Verwaltete Inhalte 167<br />
Mit <strong>WebPlus</strong> können Sie RSS-Feeds von anderen Websites direkt<br />
auf Ihrer eigenen Webseite einblenden.<br />
Wenn Sie den Reader für den RSS-Feed auf Ihrer Seite einfügen,<br />
abonnieren Sie automatisch den entsprechenden RSS-Feed oder<br />
Podcast. Es gibt noch einige andere Methoden, um RSS-Feeds oder<br />
Podcasts über Webbrowser und iTunes zu abonnieren. An dieser<br />
Stelle beschäftigen wir uns mit dem Einbinden eines Feeds in Ihre<br />
Seite, sodass die Seite automatisch Artikel und Episoden empfängt.<br />
Das folgende Beispiel zeigt, wie ein RSS-Feed von Reuters auf einer<br />
<strong>WebPlus</strong>-Webseite aussieht:<br />
Einfügen eines RSS-Feed oder Podcast in Ihre Seite<br />
1. Wählen Sie im Internet einen RSS-Feed oder einen<br />
Podcast aus. Suchen Sie hierbei nach den folgenden<br />
Symbolen:
168 Externe/Verwaltete Inhalte<br />
2. Kopieren Sie die URL für den Feed oder Podcast in die<br />
Zwischenablage, indem Sie mit der rechten Maustaste auf<br />
das Symbol klicken.<br />
3. Klicken Sie in der Kategorie „Externe/Verwaltete<br />
Inhalte“ der Studio-Registerkarte QuickBuild auf das<br />
Symbol RSS-Reader.<br />
4. Das Programm zeigt nun den Platzierungscursor an. Um<br />
die Größe des Feed-Fensters selbst zu bestimmen, ziehen<br />
Sie bei gedrückter Maustaste den Cursor über die Seite<br />
und lassen die Maustaste wieder los, sobald der<br />
Begrenzungsrahmen die gewünschten Abmessungen<br />
erreicht hat. Möchten Sie das Fenster in der<br />
Standardgröße einfügen, drücken Sie einfach nur die<br />
linke Maustaste.<br />
5. Fügen Sie in dem Dialogfeld die kopierte URL in das Feld<br />
URL des RSS-Feeds ein.<br />
6. Klicken Sie auf die Schaltfläche OK.<br />
Das Feed-Fenster wird mit einer pfirsichfarbenen Füllung erstellt<br />
und zeigt automatisch die URL des Feeds an. Um den aktuellen<br />
Feed „live“ zu erleben, müssen Sie die Webseite publizieren.<br />
Beachten Sie stets, dass sich der Inhalt dieses Feed-Fensters<br />
automatisch ändert, sobald der Feed auf der ursprünglichen<br />
Website aktualisiert wird.<br />
Wenn ein Website-Besucher den Podcast ansieht, lässt sich jede<br />
Episode über den Audiolink wiedergeben, der für gewöhnlich auf<br />
eine MP3-Datei verweist. Nachdem die Datei heruntergeladen und<br />
gespeichert wurde, lässt sie sich mit dem aktuell festgelegten<br />
Standardplayer (z. B. Windows Media Player) abspielen.
Die Zugangskontrolle<br />
Externe/Verwaltete Inhalte 169<br />
Mit der Zugangskontrolle können Sie Sicherheitseinstellungen für<br />
Ihre Website festlegen, um z. B. nur bestimmten Personen Zugriff<br />
auf einzelne Webseiten zu gewähren oder den Zugang zu Ihren<br />
Foren oder anderen Features der <strong>Serif</strong> Webressourcen zu<br />
regulieren.<br />
• Für die Seitensicherheit: Hierbei können Sie Seiten mit<br />
einem Kennwort schützen oder ein Anmeldungsfeld auf<br />
einer Seite platzieren. Diese Methode wird häufig auf<br />
privaten Websites oder den Websites kleiner<br />
Unternehmen eingesetzt. Hierbei gewähren Sie den<br />
Besuchern freien Zugriff auf den Großteil Ihrer Website<br />
und beschränken nur für einige Seiten den Zugang auf<br />
ausgewählte Besucher. Eine Fotogalerie mit<br />
Schnappschüssen Ihrer Familie lässt sich z. B. als „privat“<br />
einstufen, sodass durch eine Kennwortkontrolle nur<br />
Mitglieder Ihrer Familie diese Seiten öffnen können. Die<br />
Anmeldungsdaten werden in einer Benutzergruppe<br />
gespeichert, die mit der Seite verknüpft ist. Diese Gruppe<br />
enthält eine Liste aller autorisierten Benutzer. Neue<br />
Mitglieder werden entweder manuell von dem Website-<br />
Verwalter in die Liste eingefügt oder können sich selbst<br />
über ein Anmeldungsfeld eintragen.<br />
• Für die Sicherheit von Smart-Objekten: Hierbei wird<br />
der Zugang zu Foren, Blogs und Content Management<br />
Systemen (CMS) reguliert.<br />
• Foren: für die Verwaltung von Benutzern und dem<br />
Moderieren von Gruppen.<br />
• Blogs: für das Hinzufügen und Entfernen von<br />
Artikeln über eine Editorengruppe.
170 Externe/Verwaltete Inhalte<br />
• CMS: für die Verwaltung von Artikeln in Ihrem<br />
CMS.<br />
Die Zugangskontrolle wird über die <strong>Serif</strong> Webressourcen in Form<br />
eines Smart-Objekts vom Typ Benutzerliste gesteuert. Mit diesem<br />
Objekt können Sie Benutzergruppen und Benutzer verwalten sowie<br />
festlegen, wie sich die Benutzer anmelden müssen.<br />
Bei den <strong>Serif</strong> Webressourcen handelt es sich um einen<br />
sicheren Onlinedienst, dessen Hosting von <strong>Serif</strong><br />
übernommen wird. Dieser Dienst ist für die sichere<br />
Speicherung von Smart-Objekten (siehe Seite 180)<br />
sowie allen erzeugten Daten zuständig. Sie können die<br />
Benutzerlisten genau wie alle anderen Smart-Objekte<br />
entweder aus <strong>WebPlus</strong> heraus oder über<br />
www.serifwebresources.com jederzeit verwalten.<br />
Damit die Zugangskontrolle für Ihre Website reibungslos<br />
funktioniert, müssen Sie die folgenden Schritte ausführen.<br />
• Einrichten des Smart-Objekts für die Benutzerliste<br />
• Eintragen von Benutzern (manuell oder über eine selbst<br />
durchgeführte Registrierung)<br />
• Aktivieren der Zugangskontrolle<br />
• Einfügen des Anmeldungsfeldes<br />
• Festlegen der erweiterten Optionen für die<br />
Zugangskontrolle
Einrichten des Smart-Objekts für die<br />
Benutzerliste<br />
Externe/Verwaltete Inhalte 171<br />
Sie müssen zunächst das Smart-Objekt für die Benutzerliste<br />
erstellen und dann eine oder mehrere Gruppen anlegen, die mit<br />
diesem Smart-Objekt verbunden sind. Für gewöhnlich benötigen<br />
Sie ein Smart-Objekt pro Website. Mithilfe der einzelnen Gruppen<br />
können Sie dann festlegen, wer auf bestimmte Seiten oder Smart-<br />
Objekt-Ressourcen zugreifen darf.<br />
Erstellen des Smart-Objekts für die Benutzerliste<br />
1. Klicken Sie im Menü Einfügen auf Smart-Objekt.<br />
2. Melden Sie sich bei den <strong>Serif</strong> Webressourcen an (siehe<br />
„Arbeiten mit Smart-Objekten“ auf Seite 180). Falls Sie<br />
noch keine gültigen Zugangsdaten für die<br />
Webressourcen besitzen, müssen Sie sich zunächst<br />
registrieren lassen.<br />
3. Klicken Sie am unteren Ende des Feldes „Meine Smart-<br />
Objektbibliothek“ auf die Schaltfläche Neu.<br />
4. Blättern Sie in dem Dialogfeld „Smart-Objekt erstellen“<br />
mit der Bildlaufleiste durch die Smart-Objekte, klicken<br />
Sie auf Benutzerliste und anschließend auf OK.<br />
5. Klicken Sie in dem Popup-Dialogfeld auf<br />
Zugangskontrolle.<br />
6. Legen Sie in dem Dialogfeld den Namen für Ihr Smart-<br />
Objekt fest, speichern Sie es in einem Profil und stellen<br />
Sie die Farben und Schriften für Titel, Text/Beschriftung,<br />
Schaltflächen und Umrandung ein.<br />
7. Klicken Sie auf die Schaltfläche Erstellen. Ihr neues<br />
Smart-Objekt wird nun in Ihrer Bibliothek für Smart-<br />
Objekte aufgelistet.
172 Externe/Verwaltete Inhalte<br />
8. Klicken Sie auf Beenden, um sich bei den <strong>Serif</strong><br />
Webressourcen abzumelden.<br />
Nachdem Sie das Smart-Objekt erstellt haben, können Sie mit der<br />
Funktion „Verwalten“ Benutzergruppen anlegen und dem Objekt<br />
zuweisen.<br />
Festlegen der Benutzeranmeldung und<br />
Sicherheitseinstellungen<br />
1. Klicken Sie im Menü Einfügen auf Smart-Objekt.<br />
2. Wählen Sie in dem Feld „Meine Smart-Objektbibliothek“<br />
das Objekt für die Benutzerliste aus, und klicken Sie auf<br />
die Schaltfläche Verwalten, um das Dialogfeld für die<br />
Benutzer zu öffnen.<br />
3. Wenn Sie Website-Besuchern die Möglichkeit geben<br />
möchten, sich selbst für das Smart-Objekt einzutragen,<br />
aktivieren Sie die Option Anmeldungen für<br />
Benutzerliste aktivieren. Hierdurch wird unter dem<br />
platzierten Anmeldungsfeld ein Link Beitreten<br />
eingeblendet.<br />
4. Wenn Sie für die Benutzeranmeldung eine zusätzliche<br />
Sicherheitskontrolle verwenden möchten, aktivieren Sie<br />
die Option CAPTCHA aktiviert. CAPTCHA ist ein<br />
Spam-Schutz, bei dem ein zufällig vom Server erstellter<br />
Text angezeigt wird, den der Benutzer dann als<br />
Bestätigung eingeben muss.<br />
5. Wenn Sie den Benutzer nach der Anmeldung direkt zu<br />
einer bestimmten Webseite führen möchten, geben Sie<br />
die entsprechende URL in das Feld Nach dem Anmelden<br />
umleiten ein.<br />
6. Klicken Sie auf Aktualisieren.
Erstellen von Benutzergruppen<br />
Externe/Verwaltete Inhalte 173<br />
1. Klicken Sie am oberen Rand des Dialogfelds auf die<br />
Option Gruppen.<br />
2. Geben Sie nun in dem Abschnitt „Neue Gruppe<br />
erstellen“ eine Bezeichnung für die Gruppe in das Feld<br />
Gruppenname ein. Dieser Name sollte den Zweck der<br />
Gruppe widerspiegeln, wie z. B. „Fotozugriff“.<br />
3. Klicken Sie auf die Schaltfläche Gruppe erstellen, prüfen<br />
Sie die Einstellungen in dem Dialogfeld und klicken Sie<br />
auf Fertig. Die Gruppe wird nun in die Dropdownliste<br />
Gruppe der Benutzergruppenverwaltung eingetragen.<br />
Verwalten von Benutzergruppen<br />
• Wählen Sie den Gruppennamen in dem Dropdownfeld<br />
Gruppe aus und klicken Sie dann auf Gruppe verwalten.<br />
In diesem Dialogfeld können Sie den Namen der Gruppe ändern<br />
und die Anzahl der Gruppenbenutzer prüfen. Um eine Änderung<br />
durchzuführen, klicken Sie auf Gruppe aktualisieren. Mit der<br />
Schaltfläche Gruppe löschen entfernen Sie die Gruppe.<br />
Eintragen von Benutzern (manuell oder über eine<br />
selbst durchgeführte Registrierung)<br />
Manuelles<br />
Eintragen<br />
von<br />
Benutzern<br />
Die manuelle Benutzerkontrolle eignet sich<br />
hervorragend für übersichtlich strukturierte<br />
Umgebungen wie kleine Unternehmen,<br />
Organisationen oder Vereine, bei denen die<br />
Benutzer „bekannt“ sind.<br />
Zu jeder angelegten Benutzergruppe können<br />
Sie Benutzer hinzufügen, indem Sie die Daten<br />
manuell eingeben oder aus einer mit<br />
Kommata getrennten Textdatei importieren.
174 Externe/Verwaltete Inhalte<br />
Eintragen<br />
von<br />
Benutzern<br />
durch<br />
selbstständige<br />
Registrierung<br />
Sie können wahlweise nur eine<br />
Benutzeranmeldung verwenden, sodass jeder<br />
Benutzer dieselben Anmeldungsdaten<br />
verwendet, oder auch jedem Benutzer eine<br />
bestimmte Anmeldung zuweisen (ideal für die<br />
Arbeit mit Mitgliederlisten).<br />
Die Anmeldung durch Benutzer ist für einen<br />
eher öffentlichen Zugang konzipiert, bei dem<br />
es zu aufwendig wäre, alle Benutzer manuell<br />
zu kontrollieren. Die Website-Besucher<br />
können sich dann einfach registrieren lassen<br />
und über einen Beitrittslink ihre<br />
Anmeldungsdaten eingeben. Der Verwalter<br />
Ihrer Website kann dann mit dem Smart-<br />
Objekt für die Benutzerliste die Benutzer in<br />
den verschiedenen Gruppen verwalten.<br />
Für diese Methode ist ein Anmeldungsfeld<br />
notwendig, das die Benutzer auf einer<br />
Webseite ausfüllen können. Am einfachsten<br />
lässt sich dieses Feld auf einer Master-Seite<br />
platzieren.<br />
Sie können mehrere Benutzer zu derselben<br />
Benutzergruppe hinzufügen. Ein Benutzer kann<br />
ebenfalls zu mehreren Benutzergruppen gehören.<br />
Manuelles Hinzufügen von Benutzern<br />
1. Klicken Sie im Menü Einfügen auf Smart-Objekt.<br />
2. Wählen Sie in dem Feld „Meine Smart-Objektbibliothek“<br />
das Objekt für die Benutzerliste aus, und klicken Sie auf<br />
die Schaltfläche Verwalten, um das Dialogfeld für die<br />
Benutzer zu öffnen.
Externe/Verwaltete Inhalte 175<br />
3. Geben Sie unter Neuen Benutzer hinzufügen die E-Mail-<br />
Adresse des Benutzers in das Feld E-Mail ein.<br />
Wenn Sie die Option Aktivierung anfordern auswählen,<br />
werden ein Aktivierungslink und ein automatisch erstelltes<br />
Kennwort per E-Mail an den Benutzer geschickt. Ist diese<br />
Option deaktiviert, wird lediglich das automatisch erstellte<br />
Kennwort per E-Mail zugesendet.<br />
Ist die Option Benutzer per E-Mail benachrichtigen<br />
aktiviert, wird eine E-Mail an den Benutzer gesendet.<br />
Wenn Sie diese Option deaktivieren, wird der Benutzer<br />
zwar in die Liste eingetragen, jedoch nicht per E-Mail<br />
informiert. Sie müssen dem Benutzer dann sein Kennwort<br />
auf andere Weise zukommen lassen (per Fax, Telefon<br />
usw.).<br />
4. Klicken Sie anschließend auf die Schaltfläche Benutzer<br />
hinzufügen. Der Benutzer wird nun unter Benutzer in<br />
die Benutzerliste eingetragen.<br />
5. Wenn Sie Benutzer in eine Gruppe eintragen möchten,<br />
klicken Sie am oberen Rand des Dialogfelds auf die Option<br />
Gruppen.<br />
6. Für die Zuweisung zu einer Gruppe wählen Sie die Gruppe<br />
in der Gruppen-Dropdownliste aus und klicken<br />
anschließend auf die Schaltfläche Hinzufügen, um den<br />
ausgewählten Benutzer aus dem Feld „Benutzer“ in das<br />
Feld „Gruppe“ einzutragen (wenn Sie alle Benutzer
176 Externe/Verwaltete Inhalte<br />
übertragen möchten, klicken Sie auf Alle hinzufügen).<br />
Der Benutzer gehört nun zu der ausgewählten<br />
Benutzergruppe. Um einen oder alle Benutzer aus einer<br />
Gruppe zu löschen, verwenden Sie die Schaltflächen<br />
Entfernen oder Alle entfernen.<br />
Wenn Sie die Benutzer nicht manuell hinzufügen und verwalten<br />
möchten (siehe oben), können Sie den Website-Besuchern auch die<br />
Möglichkeit einräumen, sich selbst anzumelden. Diese Anmeldung<br />
läuft über die <strong>Serif</strong> Webressourcen.<br />
Eintragen von Benutzern durch selbstständige Registrierung<br />
Für diese Methode müssen Sie ein Anmeldungsfeld auf<br />
der Master-Seite platzieren. Jeder neue Besucher kann<br />
der Website beitreten, um sich als registrierter Benutzer<br />
anzumelden (per Klick auf den Beitreten-Link).<br />
1. Klicken Sie im Menü Einfügen auf Smart-Objekt.<br />
2. Wählen Sie in dem Feld „Meine Smart-Objektbibliothek“<br />
das Objekt für die Benutzerliste aus, und klicken Sie auf die<br />
Schaltfläche Verwalten, um das Dialogfeld für die<br />
Benutzer zu öffnen.<br />
3. Klicken Sie am oberen Rand des Dialogfelds auf<br />
„Gruppen“.<br />
4. Wählen Sie den Gruppennamen in dem Dropdownfeld<br />
Gruppe aus und klicken Sie dann auf Gruppe verwalten.<br />
5. Aktivieren Sie die Option Neue Benutzer bei Beitritt<br />
hinzufügen. Die Anmeldungsdaten des Benutzers werden<br />
dann in die Gruppe eingetragen, wenn der Benutzer sich<br />
auf Ihrer Website registriert. Aktivieren Sie diese Option,<br />
erhalten die Benutzer Zugriff auf alle Gruppen, für die Sie<br />
die Anmeldung aktiviert haben. Alle auf andere Weise<br />
eingeschränkten Seiten bleiben für den Zugriff gesperrt.
Externe/Verwaltete Inhalte 177<br />
6. Klicken Sie auf Gruppe aktualisieren und dann auf<br />
Fertig.<br />
Denken Sie daran, die Option Neue Benutzer bei<br />
Beitritt hinzufügen unter „Neue Gruppe erstellen“ zu<br />
aktivieren, wenn Sie eine neue Gruppe anlegen.<br />
Wenn sich ein Benutzer anmeldet, wird er automatisch<br />
in jede Benutzergruppe eingetragen, für die Sie die<br />
Benutzeranmeldung per Beitritt aktiviert haben.<br />
Aktivieren der Zugangskontrolle<br />
Aktivieren der Zugangskontrolle auf Ihrer Webseite<br />
1. Öffnen Sie die gewünschte Webseite im Arbeitsbereich<br />
und klicken Sie auf die Schaltfläche Seitensicherheit der<br />
Standardkontextleiste.<br />
2. Aktivieren Sie die Option Seite mit Kennwort schützen,<br />
um die Zugangskontrolle einzuschalten. Es wird nun die<br />
Schaltfläche Ändern/Verwalten verfügbar geschaltet.<br />
Klicken Sie auf diese Schaltfläche, um die aktuell<br />
verfügbaren Gruppen (fett markiert) aufzulisten, sowie das<br />
Smart-Objekt „Benutzerliste“, zu dem die Gruppen<br />
gehören.<br />
3. Wählen Sie in dem Dialogfeld für die Benutzergruppen die<br />
gewünschte Gruppe aus (z. B. Fotozugriff) und klicken Sie<br />
auf OK. Die Kategorie „Seitensicherheit“ Ihrer Webseite<br />
sollte nun anzeigen, dass ein Kennwortschutz für die Seite<br />
besteht und ihr eine Benutzergruppe zugewiesen wurde.
178 Externe/Verwaltete Inhalte<br />
4. Klicken Sie auf OK und dann erneut auf OK, um die<br />
Dialogfelder zu verlassen.<br />
In der Studio-Registerkarte „Website“ wird nun<br />
ein Schlüsselsymbol angezeigt. An diesem Symbol<br />
erkennen Sie, dass die Seitensicherheit für die<br />
entsprechende Seite festgelegt ist.<br />
Einfügen des Anmeldungsfeldes<br />
Mit <strong>WebPlus</strong> lässt sich<br />
schnell und einfach ein Feld<br />
auf einer Webseite<br />
platzieren, mit dem sich die<br />
Besucher an- und abmelden<br />
können.<br />
Auf diese Weise können registrierte Website-Besucher per<br />
Anmeldung bei der Website auf eingeschränkte Seiten zugreifen.<br />
Das Anmeldungsfeld repräsentiert das Smart-Objekt für die<br />
Benutzerliste und wird sowohl auf der Seite als auch in den <strong>Serif</strong><br />
Webressourcen erstellt.<br />
Sie können die Benutzer wahlweise manuell in den <strong>Serif</strong><br />
Webressourcen hinzufügen oder auch den Benutzern die<br />
Möglichkeit geben, sich per Registrierung und Anmeldung<br />
einzutragen.<br />
Fügen Sie das Anmeldungsfeld in die Master-Seite der<br />
Website ein. Alle Webseiten, die auf dieser Master-Seite<br />
beruhen, enthalten dann das Anmeldungsfeld für Ihre<br />
Website-Besucher.<br />
Einfügen des Anmeldungsfeldes für Besucher<br />
1. Folgen Sie den Schritten für die Aktivierung der<br />
Zugangskontrolle (siehe Seite 177) und wählen Sie eine<br />
Seitenposition für das Anmeldungsfeld aus, anstatt das
Externe/Verwaltete Inhalte 179<br />
Dialogfeld zu schließen. Klicken Sie anschließend auf die<br />
Schaltfläche Einfügen.<br />
2. Platzieren Sie den Einfügecursor an der<br />
gewünschten Stelle und drücken Sie die linke Maustaste,<br />
um das Objekt mit einer Standardgröße einzufügen.<br />
3. Aktivieren Sie die Selbstanmeldung für die Benutzer wie<br />
zuvor beschrieben (siehe Seite 176).<br />
Erweiterte Optionen für die Zugangskontrolle<br />
Es gibt noch einige zusätzliche Funktionen, mit denen Sie Benutzer<br />
einer Gruppe importieren, exportieren, ihren Zutritt einfrieren<br />
oder sogar Benutzer per Bann ausschließen bzw. ihren Bann<br />
aufheben können. Ein per Bann ausgeschlossener Benutzer gilt<br />
global als gesperrt und hat somit auch keinen Zutritt zu einer Ihrer<br />
Benutzergruppen.<br />
Sie können Benutzer ebenfalls löschen oder „einfrieren“, wenn<br />
diese die Website-Regeln brechen (z. B. verleumderische Aussagen<br />
in einem öffentlich zugänglichen Forum posten). Wenn sich der<br />
eingefrorene Benutzer das nächste Mal anmeldet, wird automatisch<br />
die Nachricht „Ihr Konto wurde eingefroren“ angezeigt.<br />
Sollten noch drastischere Methoden notwendig werden, können<br />
Sie die IP-Adresse eines Benutzers per Bann von dem Zugriff auf<br />
die Objekte der <strong>Serif</strong> Webressourcen (Foren usw.) ausschließen.<br />
Als letzten Ausweg können Sie sogar den Internet-Dienstanbieter<br />
(ISP) oder die Organisation per Bann von dem Zugriff<br />
ausschließen, denen der Besitzer der E-Mail-Adresse angehört.<br />
Diese Option ist generell nicht empfehlenswert. Manchmal ist sie<br />
jedoch notwendig, um professionelle Störenfriede wie Massen-<br />
Spamming zu unterbinden.<br />
Nähere Informationen hierzu finden Sie in der <strong>WebPlus</strong>-Hilfe.
180 Externe/Verwaltete Inhalte<br />
Arbeiten mit Smart-Objekten<br />
Für verwaltete Inhalte Ihrer Webseiten können Sie in <strong>WebPlus</strong> die<br />
auf einem Server gespeicherten Smart-Objekte verwenden, die<br />
Daten von den Website-Besuchern auf einem sicheren Server<br />
namens <strong>Serif</strong> Webressourcen speichern. Sie können Ihre Smart-<br />
Objekte direkt in <strong>WebPlus</strong> verwalten oder auch jederzeit über die<br />
Seite www.serifwebresources.com, nachdem Sie Ihre Website im<br />
Internet publiziert haben.<br />
Werfen wir nun einen genaueren Blick auf die einzelnen Smart-<br />
Objekte der Webressourcen und ihre verschiedenen<br />
Anwendungsmöglichkeiten.<br />
Name Verwendungszweck<br />
Aktive<br />
Betrachter<br />
Blog<br />
Diese Ressource zeigt an, wie viele Besucher<br />
Ihre Webseite momentan betrachten.<br />
Ein Blog (Kurzform von „Weblog“)<br />
übernimmt die Funktion eines<br />
Tagebuchs/Nachrichtenblattes auf Ihrer<br />
Website, in dem Sie mit einem<br />
unkomplizierten Texteditor Ihre eigenen<br />
Artikel veröffentlichen. Bei den Blogs ist es<br />
üblich, dass die Besucher der Website die<br />
verschiedenen Artikel kommentieren<br />
können.<br />
Sie können mithilfe der Studio-Registerkarte<br />
„QuickBuild“ ebenfalls einen Blog auf Ihre Seiten<br />
ziehen. Nähere Informationen hierzu finden Sie unter<br />
dem Thema „Einfügen eines Blogs“ (siehe Seite 157).
Content<br />
Management<br />
System (CMS)<br />
Forum<br />
Trefferzähler<br />
Externe/Verwaltete Inhalte 181<br />
Mit diesem Objekt können Sie<br />
verschiedene Artikel-basierende Inhalte<br />
per Remote-Verbindung hinzufügen,<br />
bearbeiten, löschen oder in Kategorien<br />
sortieren, ohne dass Sie hierzu auf<br />
<strong>WebPlus</strong> zugreifen oder die Inhalte mit<br />
<strong>WebPlus</strong> publizieren müssen. Die<br />
Website-Besucher können die Artikel<br />
bewerten und kommentieren.<br />
Für das CMS können Sie separate<br />
Farben festlegen.<br />
Mit diesem Objekt erstellen Sie ein<br />
Forum für Diskussionsbeiträge, das sich<br />
in verschiedene Kategorien und<br />
Unterkategorien einteilen lässt.<br />
Sie können mithilfe der Studio-Registerkarte<br />
„QuickBuild“ ebenfalls ein Forum auf Ihre Seiten<br />
ziehen. Nähere Informationen hierzu finden Sie unter<br />
dem Thema „Einfügen eines Forums“ (siehe<br />
Seite 162).<br />
Dieses Objekt ermittelt die Anzahl der<br />
Treffer für die aktuelle Seite, d. h. wie oft<br />
Besucher die aktuelle Seite in ihrem<br />
Browser aufgerufen haben. Diese<br />
Anzeige lässt sich jederzeit<br />
zurücksetzen. Sie können für diese<br />
Zähler unterschiedliche Formate<br />
festlegen.
182 Externe/Verwaltete Inhalte<br />
News<br />
Abstimmung<br />
Mit diesem Objekt platzieren Sie ein<br />
News-Fenster auf Ihrer Seite.<br />
Sie können mithilfe der Studio-Registerkarte<br />
„QuickBuild“ ebenfalls ein News-Fenster auf Ihre<br />
Seiten ziehen. Nähere Informationen hierzu finden<br />
Sie unter dem Thema „Einfügen eines News-Fensters“<br />
(siehe Seite 160).<br />
Buchungsassistent<br />
Shoutbox<br />
Mit dieser Ressource können Sie online<br />
eine Umfrage durchführen, um die<br />
Meinung der Website-Besucher zu<br />
einem bestimmten Thema einzuholen.<br />
Dieses Objekt ermöglicht die<br />
Onlinebuchung von Hotelzimmern,<br />
Konferenzräumen, Theaterkarten usw.<br />
Objekte lassen sich für Stunden oder<br />
Tage mieten, als sich wiederholende<br />
Buchungen durchführen und mit<br />
Preisoptionen für unterschiedliche<br />
Altersgruppen anbieten.<br />
Diese Ressource fungiert als interaktives<br />
Chat-Fenster (ähnlich dem Windows<br />
Messenger). Über die Shoutbox können<br />
die Besucher Ihrer Website miteinander<br />
kommunizieren.
Benutzerliste<br />
Externe/Verwaltete Inhalte 183<br />
Für die Benutzerliste können Sie zwei<br />
verschiedene Modi über ein Popup-<br />
Dialogfeld festlegen.<br />
• Modus für Mailingliste: Mit diesen Objekten können<br />
Website-Besucher Newsletter abonnieren, Einladungen<br />
bestätigen, Informationsmaterial anfordern usw. Die<br />
Listen lassen sich manuell kontrollieren oder mit einer<br />
Selbstanmeldung. E-Mail-Adressen lassen sich als per<br />
Trennzeichen getrennte Textdateien (CSV-Format)<br />
importieren sowie in einer breiten Palette von Formaten<br />
exportieren.<br />
• Modus für Zugangskontrolle: Dieses Objekt regelt den<br />
Zugriff auf Seiten, Foren, Blogs und CMS mithilfe von<br />
Benutzergruppen. Nähere Informationen hierzu finden<br />
Sie unter dem Thema „Die Zugangskontrolle“ auf<br />
Seite 169.<br />
• Aktivieren des Spam-Schutzes CAPTCHA während<br />
der Benutzeranmeldung.<br />
• Anlegen von Benutzergruppen (mit optionalem<br />
Beitritt, automatischer Anmeldung und Verbindung<br />
zu Smart-Objekten).<br />
• Hinzufügen, Entfernen, Einfrieren oder<br />
Ausschließen von Benutzern.<br />
Da die Smart-Objekte in den <strong>Serif</strong> Webressourcen<br />
gespeichert werden, können Sie bei dem Erstellen und<br />
der Verwaltung der Objekte einfach auf die Hilfe-<br />
Schaltfläche klicken, wenn Sie zusätzliche<br />
Informationen zu einem Objekt benötigen.<br />
Aus Sicherheitsgründen sind diese Objekte nur über eine<br />
Anmeldung bei den <strong>Serif</strong> Webressourcen verfügbar, die Sie aus
184 Externe/Verwaltete Inhalte<br />
<strong>WebPlus</strong> aktivieren können. Falls Sie noch keinen gültigen<br />
Benutzernamen sowie kein Kennwort besitzen, müssen Sie zuerst<br />
ein Konto bei den Webressourcen einrichten.<br />
• Falls Sie Ihre E-Mail-Adresse bereits bei <strong>Serif</strong><br />
hinterlassen haben (z. B. im Zuge einer<br />
Produktregistrierung), müssen Sie nur einige Fragen<br />
beantworten, um die Kontoerstellung abzuschließen.<br />
• Wenn Sie sich als unregistrierter Neukunde an <strong>Serif</strong><br />
wenden, müssen Sie den gesamten Anmeldevorgang<br />
einschließlich der sicherheitsrelevanten Aspekte<br />
durchführen. Die verschiedenen Anmeldeseiten<br />
enthalten alle Informationen, die Sie für das Ausfüllen<br />
der Felder benötigen.<br />
Anlegen eines Kontos bei den <strong>Serif</strong> Webressourcen<br />
1. Klicken Sie im Menü Einfügen auf Smart-Objekt.<br />
2. Klicken Sie in dem Anmeldungsdialogfeld auf den Link<br />
Konto erstellen unter den Feldern für Benutzername<br />
und Kennwort.<br />
3. Geben Sie in das nächste Dialogfeld Ihre aktuelle E-Mail-<br />
Adresse ein, den Benutzernamen und zweimal das<br />
Kennwort (zur Bestätigung). Sie müssen die<br />
Nutzungsbedingungen von <strong>Serif</strong> lesen und diesen<br />
zustimmen (per Kontrollkästchen), um fortfahren zu<br />
können.<br />
4. Klicken Sie auf die Schaltfläche Anmeldung.<br />
5. In dem nächsten Dialogfeld können Sie einige Angaben<br />
zu Ihrer Person eintragen und festlegen, ob Sie den <strong>Serif</strong><br />
Newsletter sowie Informationen zu speziellen Angeboten<br />
von <strong>Serif</strong> und/oder Angeboten von Drittherstellern<br />
erhalten möchten.
Externe/Verwaltete Inhalte 185<br />
6. Anschließend wird eine Bestätigungs-E-Mail an Ihre E-<br />
Mail-Adresse verschickt. Klicken Sie auf den Link in der<br />
E-Mail. Sie können sich nun bei den <strong>Serif</strong> Webressourcen<br />
anmelden, indem Sie auf Einfügen > Smart-Objekt<br />
klicken.<br />
Löschen der Kontodetails<br />
• Klicken Sie auf den Menüpunkt Extras > Optionen und<br />
dann in der Kategorie Optionen > Allgemein auf die<br />
Schaltfläche Kontodetails löschen. Alle gespeicherten<br />
Details zu der Anmeldung bei den <strong>Serif</strong> Webressourcen<br />
werden nun gelöscht, sodass Ihre automatische<br />
Anmeldung nicht mehr funktioniert. Bei der nächsten<br />
Anmeldung müssen Sie dann einige Details eingeben. Sie<br />
sollten sich Ihr Kennwort daher gut merken.<br />
Zugreifen auf die Webressourcen<br />
1. Klicken Sie im Menü Einfügen auf Smart-Objekt.<br />
2. Geben Sie in das Anmeldungsfenster Ihren<br />
Benutzernamen und das Kennwort ein. Wenn Sie in<br />
Zukunft direkt auf die Webressourcen zugreifen<br />
möchten, ohne sich vorher anzumelden, aktivieren Sie<br />
die Option Kontodetails speichern.<br />
3. Klicken Sie auf die Schaltfläche Anmelden. Die<br />
Webressourcen öffnen nun das Dialogfeld für die Smart-<br />
Objekte.<br />
Nach der Erstellung können Sie die Kontodetails<br />
jederzeit aus dem Dialogfeld für Smart-Objekte prüfen,<br />
indem Sie auf Mein Konto klicken.<br />
Abmelden bei den <strong>Serif</strong> Webressourcen<br />
• Klicken Sie im Menü Einfügen auf Smart-Objekt.<br />
• Klicken Sie auf Abmelden.
186 Externe/Verwaltete Inhalte<br />
Erstellen von Smart-Objekten<br />
Smart-Objekte lassen sich über die <strong>Serif</strong> Webressourcen erstellen,<br />
indem Sie die Objekte zunächst in Ihre Smart-Objektbibliothek<br />
eintragen. In der Bibliothek können Sie alle Objekte verwalten und<br />
einzeln bearbeiten. Die Objekte lassen sich dann wahlweise sofort<br />
oder auch erst später in eine Webseite einfügen.<br />
Einige Smart-Objekte, wie z. B. Foren, Blogs und News-<br />
Fenster lassen sich direkt durch Klicken und Ziehen aus<br />
der Studio-Registerkarte „QuickBuild“ auf Ihren Seiten<br />
platzieren.<br />
Manche Smart-Objekte sind von anderen Smart-<br />
Objekten abhängig. Wenn Sie z. B. ein Smart-Objekt für<br />
ein Forum erstellen, wird automatisch auch ein Smart-<br />
Objekt „Benutzerliste“ angelegt, dass die<br />
Zugangskontrolle für das Forum übernimmt.<br />
Hinzufügen von Objekten zu der Bibliothek<br />
1. Klicken Sie in dem Hauptfenster für Smart-Objekte auf<br />
die Schaltfläche Neu.<br />
2. Blättern Sie in dem Dialogfeld Smart-Objekt erstellen<br />
durch die Liste und wählen Sie ein Smart-Objekt aus.<br />
3. (Optional) Wenn Ihr neues Smart-Objekt in einer<br />
anderen Sprache als Englisch arbeiten soll, wählen Sie<br />
den gewünschten Eintrag in dem Dropdownfeld Sprache<br />
aus.<br />
4. Klicken Sie auf die Schaltfläche OK. Je nach<br />
ausgewähltem Objekt wird nun ein bestimmtes<br />
Dialogfeld für die Erstellung des Objekts geöffnet.
5. Gehen Sie in dem Dialogfeld wie folgt vor:<br />
Externe/Verwaltete Inhalte 187<br />
• Geben Sie einen Namen für das Objekt ein.<br />
• (Optional) Wählen Sie ein zuvor angelegtes Profil<br />
in dem Dropdownfeld aus.<br />
• (Optional) Legen Sie den String für den Offsite-<br />
Filter fest. Hierdurch wird der Zugriff auf das<br />
Objekt auf die angegebene Domäne beschränkt und<br />
die URL lässt sich nicht kopieren.<br />
• (Optional) Sie können ebenfalls einige der<br />
objektspezifischen Einstellungen ändern, wie z. B.<br />
den Titel, die Farben (Text, Umrandung usw.) oder<br />
die Umrandungsbreite.<br />
6. Klicken Sie auf die Schaltfläche Erstellen.<br />
Das benannte Objekt wird nun in einer Liste am linken Rand des<br />
Fensters „Meine Smart-Objekte“ angezeigt. Das Beispiel zeigt eine<br />
Sammlung von Smart-Objekten, von denen einige unter einem<br />
selbst angelegten Profil namens „123“ gruppiert sind.
188 Externe/Verwaltete Inhalte<br />
Einfügen von Smart-Objekten in Ihre Webseite<br />
1. Klicken Sie in dem linken Feld des Dialogfelds „Smart-<br />
Objekte“ auf das gewünschte Objekt und dann auf die<br />
Schaltfläche Einfügen.<br />
2. Um das Objekt mit einer Standardgröße<br />
einzufügen, platzieren Sie den Mauszeiger an der<br />
gewünschten Stelle der Seite und drücken die linke<br />
Maustaste.<br />
ODER<br />
Ziehen Sie den Cursor über die Seite, um die<br />
Abmessungen des Smart-Objekts selbst zu bestimmen.<br />
Das Smart-Objekt wird auf der Dokumentseite automatisch mit<br />
einer Vorschau angezeigt, damit Sie sich einen Überblick über das<br />
Aussehen des publizierten Objekts verschaffen können.<br />
Bearbeiten von Smart-Objekten<br />
Nachdem Sie ein Objekt erstellt haben, können Sie es entweder in<br />
dem Fenster „Meine Smart-Objektbibliothek“ oder direkt auf der<br />
Seite bearbeiten. Häufig anfallende Arbeiten sind z. B. eine<br />
Änderung der Abstimmungsfrage oder das Zurücksetzen des<br />
Trefferzählers auf Null.<br />
Wenn Sie ein Objekt bearbeiten, verändern Sie nur das eigentliche<br />
Objekt und nicht die von dem Objekt gesammelten Daten.<br />
Die Optionen in dem Dialogfeld sind bei der Erstellung und<br />
Bearbeitung der Smart-Objekte identisch.<br />
Bearbeiten von Smart-Objekten in Ihrer Bibliothek<br />
• Klicken Sie in dem Hauptfenster für Smart-Objekte unter<br />
dem Feld „Meine Smart-Objektbibliothek“ auf<br />
Bearbeiten.
Bearbeiten von Smart-Objekten auf Ihrer Seite<br />
Externe/Verwaltete Inhalte 189<br />
• Führen Sie einen Doppelklick auf das Objekt aus, um<br />
sein Bearbeitungsfenster zu öffnen.<br />
Wenn Sie ein Objekt auf der Webseite bearbeiten,<br />
werden die Änderungen ebenfalls in der<br />
Objektbibliothek umgesetzt. Eine Bearbeitung des<br />
Objekts in der Bibliothek verändert im Gegenzug auch<br />
das auf der Seite platzierte Objekt.<br />
Verwalten von Smart-Objekten<br />
Bei der Bearbeitung von Smart-Objekten legen Sie fest, wie die<br />
einzelnen Objekte arbeiten. Mit der Verwaltung bestimmen Sie,<br />
was nach dem Publizieren der Webseite mit den Daten geschehen<br />
soll, die von dem Smart-Objekt gesammelt werden. Für einige<br />
Smart-Objekte, wie z. B. die Trefferzähler, ist die Verwaltung eher<br />
unnötig, da sich dieser Zähler einfach nur mit jedem Aufruf der<br />
Webseite um den Wert „1“ erhöht (Sie können jedoch den Zähler<br />
zurücksetzen). Die komplexeren Smart-Objekte, wie z. B. Foren,<br />
Blogs, Buchungsassistenten, Benutzerlisten, Abstimmungen und<br />
Shoutboxen, speichern jedoch bestimmte Daten der Website-<br />
Besucher, wie Kommentare zu Artikeln, E-Mail-Adressen,<br />
Abstimmungsergebnisse und ein Nachrichten-Logbuch für Chats.<br />
Bei den Smart-Objekten für Blogs und Benutzerlisten ist das<br />
Anlegen und Verwalten von Artikeln oder Benutzern ein wichtiger<br />
Bestandteil der Objektverwaltung.<br />
Verwalten von Smart-Objekten in Ihrer Bibliothek<br />
• Klicken Sie in dem Hauptfenster für Smart-Objekte auf<br />
Verwalten unter dem Feld „Meine Smart-<br />
Objektbibliothek“. Die Verwaltungsoptionen variieren je<br />
nach ausgewähltem Smart-Objekt.
190 Externe/Verwaltete Inhalte<br />
Verwalten von Smart-Objekten direkt über das Internet<br />
• Melden Sie sich bei www.serifwebresources.com an, um<br />
Ihre Smart-Objekte unabhängig von der <strong>WebPlus</strong>-<br />
Website zu verwalten. Für die Anmeldung bei den<br />
Webressourcen verwenden Sie dieselben Benutzerdaten<br />
wie zuvor.<br />
Nähere Informationen sowie eine Beschreibung der<br />
einzelnen Optionen finden Sie in der Hilfe zu den<br />
Webressourcen. Klicken Sie einfach in einem Smart-<br />
Objekt-Dialogfeld auf „Hilfe“.<br />
Das Smart-Objekt „CMS“ lässt sich nur über<br />
www.serifwebresources.com verwalten.
8<br />
Soziale Netzwerke
192 Soziale Netzwerke
Einfügen von Facebook-Objekten<br />
Soziale Netzwerke 193<br />
Mit Facebook-Objekten können Sie verschiedene Live-Feeds per<br />
Streaming auf Ihren Webseiten anzeigen oder auch eine „Gefällt<br />
mir“-Schaltfläche platzieren, über die Website-Besucher Ihre Seiten<br />
mit Freunden teilen oder auf ihren eigenen Facebook-Seiten für Sie<br />
„die Werbetrommel rühren“ können.<br />
Wir möchten Ihnen empfehlen, selbst ein Facebook-<br />
Konto anzulegen, wenn Sie mit diesen Objekten<br />
arbeiten möchten. Weitere Informationen zu Facebook<br />
finden Sie unter www.facebook.com.<br />
Die verschiedenen Facebook-Objekttypen<br />
Die Facebook-Objekte, die Sie auf Ihren Seiten platzieren können,<br />
unterscheiden sich stark in ihrer Funktionalität und den<br />
Möglichkeiten, die sie Ihren Website-Besuchern bieten.<br />
Objekttyp Features<br />
Aktivitäten-<br />
Feed<br />
„Gefällt mir“-<br />
Feed<br />
Empfehlungen-<br />
Feed<br />
„Gefällt mir“<br />
Schaltfläche<br />
Zeigt die zuletzt von dem Website-Besucher<br />
auf Ihrer Website vorgenommen Aktivitäten.<br />
Hiermit können Besucher Ihre Facebook-<br />
Seite mit dem Prädikat „Gefällt mir“ versehen<br />
(die Seite also empfehlen). Der Feed zeigt<br />
ebenfalls die neuesten Postings an und wie<br />
vielen Benutzern Ihre Seite bereits gefällt.<br />
Dieser Feed zeigt personalisierte Vorschläge<br />
für Inhalte auf Ihrer Website, die Ihren<br />
Besuchern gefallen könnten.<br />
Hiermit können Website-Besucher Seiten<br />
Ihrer Website empfehlen und deren Inhalte<br />
auf ihren eigenen Facebook-Seiten mit<br />
anderen teilen.
194 Soziale Netzwerke<br />
Einfügen von Facebook-Objekten<br />
Diese Objekte lassen sich genau wie alle anderen Objekte direkt auf<br />
Ihren Seiten platzieren.<br />
Einfügen eines Facebook-Objekts<br />
1. Klicken Sie in der Kategorie „Soziale Netzwerke“<br />
der Studio-Registerkarte QuickBuild auf das Symbol<br />
Facebook-Objekt und klicken Sie dann auf einen Punkt<br />
der Seite, um das Objekt zu platzieren.<br />
2. Wählen Sie in dem Dialogfeld über die Dropdownliste<br />
Typ einen der Einträge Aktivitäten-Feed, „Gefällt mir“-<br />
Feed, Empfehlungen-Feed oder „Gefällt mir“-<br />
Schaltfläche aus.<br />
3. Aktivieren oder deaktivieren Sie in dem Vorschaufeld die<br />
Option Aktualisieren. Hiermit können Sie per Vorschau<br />
prüfen, wie sich die Darstellung des Objekts auf der Seite<br />
ändert, wenn Sie verschiedene Einstellungen vornehmen.<br />
4. Konfigurieren Sie die Funktionalität des Objekts:<br />
• Aktuelle Website-URL nutzen<br />
Aktivieren Sie diese Option, um die aktuelle URL<br />
Ihrer Website zu verwenden. Wenn Sie die Option<br />
deaktivieren, können Sie in dem darunter liegenden<br />
Feld selbst eine Webadresse eingeben. Für den<br />
„Gefällt mir“-Feed geben Sie die exakte URL einer<br />
Facebook-Seite ein.<br />
• Linkziel (nur für Empfehlungen-Feed)<br />
Um Links in einem neuen Fenster zu öffnen, klicken<br />
Sie auf Leer. Um Links in demselben Fenster zu<br />
öffnen, klicken Sie auf Übergeordnetes Element<br />
oder Oben.
Soziale Netzwerke 195<br />
• Diesen Text anzeigen (nur für „Gefällt mir“-<br />
Schaltfläche)<br />
Wählen Sie aus, ob auf der Schaltfläche der Text<br />
Gefällt mir oder Empfehlen stehen soll.<br />
5. (Optional) Konfigurieren Sie die Darstellung des Objekts<br />
mit den übrigen Optionen (diese variieren je nach<br />
ausgewähltem Typ).<br />
6. Klicken Sie auf die Schaltfläche OK.<br />
Bearbeiten von Facebook-Objekten<br />
Nachdem Sie es auf einer Seite platziert haben, können Sie das<br />
Facebook-Objekt jederzeit bearbeiten.<br />
Bearbeiten eines Facebook-Objekts<br />
1. Führen Sie einen Doppelklick auf das Objekt aus.<br />
Es wird nun das Dialogfeld für die Bearbeitung angezeigt.<br />
Die Optionen in diesem Dialogfeld sind identisch mit<br />
denen, die für die Erstellung des Objekts verfügbar<br />
waren.<br />
2. Nehmen Sie die gewünschten Änderungen vor und<br />
klicken Sie auf OK.<br />
Sie können einen Anker für Ihr Objekt festlegen, indem<br />
Sie in der Kontextleiste auf Anker klicken. Weitere<br />
Informationen zu Ankern finden Sie unter „Einfügen<br />
von Ankern“ auf Seite 131.
196 Soziale Netzwerke<br />
Einfügen von Twitter-Objekten<br />
Mit Twitter-Objekten können Sie verschiedene Live-Feeds per<br />
Streaming auf Ihren Webseiten anzeigen oder auch eine „Tweet“-<br />
oder „Folgen“-Schaltfläche platzieren, die eine direkte Verbindung<br />
zu Twitter herstellt.<br />
Wir möchten Ihnen empfehlen, selbst ein Twitter-<br />
Konto anzulegen, wenn Sie mit diesen Objekten<br />
arbeiten möchten. Weitere Informationen zu Twitter<br />
finden Sie unter www.twitter.com.<br />
Die verschiedenen Twitter-Objekte<br />
Die Twitter-Objekte, die Sie auf Ihren Seiten platzieren können,<br />
unterscheiden sich stark in ihrer Funktionalität und den<br />
Möglichkeiten, die sie Ihren Website-Besuchern bieten.<br />
Objekttyp Features<br />
Favoriten-<br />
Feed<br />
Anzeigen einzelner Tweets, die Sie als Favoriten<br />
markiert haben.<br />
Listen-Feed Anzeigen der Tweets von Benutzern, die zu einer<br />
selbst erstellten Twitter-Liste gehören.<br />
Profil-Feed Anzeigen der Tweets für das Profil eines<br />
bestimmten Benutzers.<br />
Suchen-<br />
Feed<br />
Tweet-<br />
Schaltfläche<br />
Folgen-<br />
Schaltfläche<br />
Anzeigen aller Tweets, die auf einer<br />
ausgewählten Suchanfrage basieren.<br />
Hiermit können Website-Besucher einen Tweet<br />
zu Ihrer Website auf dem eigenen Twitter-Profil<br />
posten.<br />
Hiermit können Website-Besucher Ihrem<br />
Benutzerkonto bei Twitter folgen.
Einfügen von Twitter-Objekten<br />
Soziale Netzwerke 197<br />
Die Twitter-Objekte lassen sich genau wie alle anderen Objekte<br />
direkt auf Ihren Seiten platzieren. Wie Sie die jeweiligen Objekte<br />
einfügen, hängt von der Art des Objekts ab.<br />
Einfügen von Favoriten-, Listen-, Profil- oder Suchen-Feeds<br />
1. Klicken Sie in der Kategorie „Soziale Netzwerke“<br />
der Studio-Registerkarte QuickBuild auf das Symbol<br />
Twitter-Objekt und klicken Sie dann auf einen Punkt<br />
der Seite, um das Objekt zu platzieren.<br />
2. Wählen Sie in dem Dialogfeld über die Dropdownliste<br />
Typ einen der Einträge Favoriten-Feed, Listen-Feed,<br />
Profil-Feed oder Suchen-Feed aus.<br />
3. Aktivieren oder deaktivieren Sie in dem Vorschaufeld die<br />
Option Aktualisieren. Hiermit können Sie per Vorschau<br />
prüfen, wie sich die Darstellung des Objekts auf der Seite<br />
ändert, wenn Sie verschiedene Einstellungen vornehmen.<br />
4. Konfigurieren Sie die Funktionalität des Feeds:<br />
• Titel (außer für Profil-Feed)<br />
Geben Sie den Text ein, den Sie als Titel für den<br />
Feed verwenden möchten. Wir möchten Ihnen<br />
empfehlen, Ihren Twitter-Benutzernamen in dieses<br />
Feld einzutragen.<br />
• Bezeichnung (außer für Profil-Feed)<br />
Geben Sie den Text ein, den Sie als Bezeichnung für<br />
den Feed verwenden möchten. Wir möchten Ihnen<br />
empfehlen, den Feed-Typ in dieses Feld<br />
einzutragen.
198 Soziale Netzwerke<br />
• Benutzername (außer für Suchen-Feed)<br />
Geben Sie den Namen des Twitter-Kontos an, das<br />
Sie für den Stream abrufen möchten.<br />
• Liste (nur für Listen-Feed)<br />
Geben Sie den Namen der Liste an, die Sie für den<br />
Stream abrufen möchten. Diese Liste muss in dem<br />
Twitter-Konto vorhanden sein, dessen<br />
Benutzernamen Sie zuvor in das entsprechende Feld<br />
eingetragen haben.<br />
• Suchanfrage (nur für Suchen-Feed)<br />
Geben Sie hier den Ausdruck an, nach dem gesucht<br />
werden soll. Alle aktuellen, öffentlichen Tweets, die<br />
diesen gesuchten Ausdruck enthalten, werden dann<br />
in dem Feed angezeigt.<br />
• Anzahl der Tweets<br />
Hier legen Sie fest, wie viele Tweets in dem Feed<br />
angezeigt werden sollen (zwischen 1 und 100).<br />
• Nach neuen Tweets suchen<br />
Aktivieren Sie diese Option, um auf Twitter nach<br />
neuen Tweets zu suchen.<br />
• In Intervallen laden/Alles laden<br />
Aktivieren Sie diese Optionen, wenn Sie die Tweets<br />
in Intervallen laden möchten oder alle Tweets auf<br />
einmal. Der Wert für das Intervall wird in Sekunden<br />
gemessen.<br />
5. (Optional) Konfigurieren Sie die Darstellung des Feeds<br />
unter dem Abschnitt „Darstellung“.<br />
6. Klicken Sie auf die Schaltfläche OK.
Einfügen einer Tweet-Schaltfläche<br />
Soziale Netzwerke 199<br />
1. Klicken Sie in der Kategorie „Soziale Netzwerke“<br />
der Studio-Registerkarte QuickBuild auf das Symbol<br />
Twitter-Objekt und klicken Sie dann auf einen Punkt<br />
der Seite, um das Objekt zu platzieren.<br />
2. Wählen Sie in dem Dialogfeld über das Dropdownfeld<br />
Typ die Option Tweet-Schaltfläche aus.<br />
3. Aktivieren oder deaktivieren Sie in dem Vorschaufeld die<br />
Option Aktualisieren. Hiermit können Sie per Vorschau<br />
prüfen, wie sich die Darstellung des Objekts auf der Seite<br />
ändert, wenn Sie verschiedene Einstellungen vornehmen.<br />
4. Konfigurieren Sie die Funktionalität der Schaltfläche:<br />
• URL der aktuellen Seite verwenden<br />
Aktivieren Sie diese Option, um die aktuelle URL<br />
Ihrer Website zu verwenden. Wenn Sie die Option<br />
deaktivieren, können Sie in dem darunter liegenden<br />
Feld Benutzerdefinierte URL selbst eine<br />
Webadresse eingeben.<br />
• Tweet-Text<br />
Geben Sie hier den Text für den Tweet ein. Dieser<br />
Text wird in dem Tweet-Feld angezeigt und lässt<br />
sich vor Übermittlung des Tweets noch bearbeiten.<br />
• Über<br />
Geben Sie hier den Namen eines Twitter-Kontos<br />
ein, das am Ende des Tweets in der Form „über<br />
@„ angezeigt werden soll. Wir<br />
möchten Ihnen empfehlen, Ihren Twitter-<br />
Benutzernamen in dieses Feld einzutragen.
200 Soziale Netzwerke<br />
• Empfehlen<br />
Hiermit empfehlen Sie Ihren Website-Besuchern<br />
einen Twitter-Benutzernamen, dem die Besucher<br />
folgen können. Diese Empfehlung wird nach der<br />
Übermittlung des Tweets angezeigt.<br />
• Hashtag<br />
Geben Sie einen Ausdruck als Hashtag (Stichwort)<br />
ein (dieser Ausdruck darf keine Leerzeichen<br />
enthalten). Die Tweets lassen sich dann anhand<br />
dieses Hashtags suchen.<br />
5. (Optional) Konfigurieren Sie die Darstellung des Objekts<br />
mit den übrigen Optionen (diese variieren je nach<br />
ausgewähltem Typ).<br />
6. Klicken Sie auf die Schaltfläche OK.<br />
Einfügen einer Folgen-Schaltfläche<br />
1. Klicken Sie in der Kategorie „Soziale Netzwerke“<br />
der Studio-Registerkarte QuickBuild auf das Symbol<br />
Twitter-Objekt und klicken Sie dann auf einen Punkt<br />
der Seite, um das Objekt zu platzieren.<br />
2. Wählen Sie in dem Dialogfeld über das Dropdownfeld<br />
Typ die Option Folgen-Schaltfläche aus.<br />
3. Geben Sie in das Feld Diesem Benutzer folgen einen<br />
Twitter-Benutzernamen ein. Ihre Website-Besucher<br />
können dann per Klick auf die Schaltfläche diesem Konto<br />
auf Twitter folgen.<br />
4. (Optional) Konfigurieren Sie die Darstellung des Objekts<br />
mit den übrigen Optionen (diese variieren je nach<br />
ausgewähltem Typ).<br />
5. Klicken Sie auf die Schaltfläche OK.
Bearbeiten von Twitter-Objekten<br />
Soziale Netzwerke 201<br />
Nachdem Sie es auf einer Seite platziert haben, können Sie das<br />
Twitter-Objekt jederzeit bearbeiten.<br />
Bearbeiten eines Twitter-Objekts<br />
1. Wählen Sie das auf einer Seite platzierte Objekt aus.<br />
2. Führen Sie einen Doppelklick auf das Objekt aus.<br />
Es wird nun das Dialogfeld für die Bearbeitung angezeigt.<br />
Die Optionen in diesem Dialogfeld sind identisch mit<br />
denen, die für die Erstellung des Objekts verfügbar<br />
waren.<br />
3. Nehmen Sie die gewünschten Änderungen vor und<br />
klicken Sie auf OK.<br />
Nachdem Sie das Objekt auf der Seite platziert haben, können Sie<br />
es durch Klicken und Ziehen seiner Kanten oder Ecken (mit<br />
Ausnahme der Folgen-Schaltfläche und der Tweet-Schaltfläche)<br />
beliebig vergrößern und verkleinern. Um das Seitenverhältnis des<br />
Objekts unverändert zu übernehmen, halten Sie während des<br />
Ziehens die Umschalttaste gedrückt.<br />
Sie können einen Anker für Ihr Objekt festlegen, indem<br />
Sie in der Kontextleiste auf Anker klicken. Weitere<br />
Informationen zu Ankern finden Sie unter „Einfügen<br />
von Ankern“ auf Seite 131.<br />
Einfügen einer „Google +1“-Schaltfläche<br />
Wenn Sie eine „Google +1“-Schaltfläche auf Ihren Seiten<br />
platzieren, können Website-Besucher die Inhalte Ihrer Website<br />
über Google+ empfehlen. Mit einem Klick auf die Schaltfläche<br />
können die Website-Besucher Ihre Webseiten als Postings in ihrem<br />
eigenen live Stream mit anderen Websurfern teilen oder auch in<br />
der +1-Registerkarte ihres Profils bei Google+ aufführen. Die +1-
202 Soziale Netzwerke<br />
Registerkarte zeigt alle von einem Besucher empfohlenen Links an.<br />
Die „Google +1“-Schaltfläche kann ebenfalls anzeigen, wie viele<br />
Personen Ihre Webseite bereits empfohlen haben.<br />
Wir möchten Ihnen empfehlen, selbst ein Konto bei<br />
Google+ anzulegen, wenn Sie mit diesen Schaltflächen<br />
arbeiten möchten. Nähere Informationen zu Google+<br />
finden Sie unter plus.google.com.<br />
Einfügen einer „Google +1“-Schaltfläche<br />
1. Klicken Sie in der Kategorie „Soziale Netzwerke“<br />
der Studio-Registerkarte QuickBuild auf das Symbol<br />
„Google +1“-Schaltfläche und klicken Sie dann auf<br />
einen Punkt der Seite, um die Schaltfläche zu platzieren.<br />
2. Klicken Sie in dem Konfigurationsfeld auf die Option +1<br />
Aktuelle Seite, um die aktuelle URL Ihrer Website zu<br />
verwenden. Wenn Sie die Option deaktivieren, können<br />
Sie in dem darunter liegenden Feld Benutzerdefinierte<br />
URL selbst eine Webadresse eingeben.<br />
3. (Optional) Wählen Sie in dem Feld Größe die<br />
Abmessungen für das Objekt aus.<br />
4. (Optional) Wählen Sie in dem Feld Anmerkung eine<br />
Formatierung für die Anmerkung aus.<br />
5. Klicken Sie auf die Schaltfläche OK.<br />
Bearbeiten einer „Google +1“-Schaltfläche<br />
1. Wählen Sie die auf einer Seite platzierte Schaltfläche aus.<br />
2. Führen Sie einen Doppelklick auf die Schaltfläche aus.<br />
Es wird nun das Dialogfeld für die Bearbeitung angezeigt.<br />
Die Optionen in diesem Dialogfeld sind identisch mit<br />
denen, die für die Erstellung der Schaltfläche verfügbar<br />
waren.
Soziale Netzwerke 203<br />
3. Nehmen Sie die gewünschten Änderungen vor und<br />
klicken Sie auf OK.<br />
Sie können einen Anker für Ihre Schaltfläche festlegen,<br />
indem Sie in der Kontextleiste auf Anker klicken.<br />
Weitere Informationen zu Ankern finden Sie unter<br />
„Einfügen von Ankern“ auf Seite 131.<br />
Einfügen eines Lesezeichen-<br />
Symbolstreifens für soziale Netzwerke<br />
Wenn Sie einen Lesezeichen-Symbolstreifen für soziale Netzwerke<br />
auf einer Seite platzieren, können die Website-Besucher Ihre<br />
Website mit anderen Benutzern teilen oder für Ihre Website auf<br />
einem sozialen Netzwerk die Werbetrommel rühren - schnell und<br />
einfach per Klick auf das entsprechende Symbol. In <strong>WebPlus</strong><br />
können Sie diesen Streifen mit Symbolen für die am häufigsten<br />
verwendeten sozialen Netzwerke bestücken einschließlich<br />
Facebook, Twitter, Reddit, Digg usw.<br />
In diese Leiste können Sie auch Symbole einfügen, mit denen sich<br />
die Website-URL einfach per E-Mail verschicken oder aktuelle<br />
Seiten ausdrucken lassen.<br />
Master-Seiten sind ideal für die Platzierung der<br />
Lesezeichen-Symbolstreifen. Hierdurch wird der<br />
Streifen auf allen Seiten verfügbar, denen Sie diese<br />
Master-Seite zugewiesen haben.
204 Soziale Netzwerke<br />
Einfügen eines Lesezeichen-Symbolstreifens für soziale<br />
Netzwerke<br />
1. Klicken Sie in der Kategorie „Soziale Netzwerke“<br />
der Studio-Registerkarte QuickBuild auf das Symbol<br />
Lesezeichen-Symbolstreifen für soziale Netzwerke und<br />
klicken Sie dann auf eine beliebige Stelle Ihrer Seite, um<br />
das Objekt zu platzieren.<br />
2. Um das Symbol für eine Website in den Streifen<br />
einzutragen, klicken Sie auf den Namen der Website in<br />
der Liste Nicht im Streifen enthalten und dann auf<br />
Hinzufügen. Um ein Symbol aus dem Streifen zu<br />
löschen, klicken Sie in der Liste Im Streifen enthalten<br />
auf den Namen der Website und dann auf Entfernen.<br />
3. Wählen Sie eine Option unter Teilen aus: Website,<br />
damit Besucher Ihre ganze Website mit anderen teilen<br />
oder Seite, damit nur die aktuelle Seite geteilt wird.<br />
4. Klicken Sie auf die Schaltfläche OK.<br />
Bearbeiten eines Lesezeichen-Symbolstreifens für soziale<br />
Netzwerke<br />
1. Wählen Sie den auf einer Seite platzierten Symbolstreifen aus.<br />
2. Führen Sie einen Doppelklick auf den Symbolstreifen aus.<br />
Es wird nun das Dialogfeld für die Konfiguration angezeigt.<br />
Die Optionen in diesem Dialogfeld sind identisch mit<br />
denen, die für die Erstellung des Streifens verfügbar waren.<br />
3. Nehmen Sie die gewünschten Änderungen vor und klicken<br />
Sie auf OK.<br />
Sie können einen Anker für Ihren Lesezeichen-<br />
Symbolstreifen festlegen, indem Sie in der Kontextleiste<br />
auf Anker klicken. Weitere Informationen zu Ankern<br />
finden Sie unter „Einfügen von Ankern“ auf Seite 131.
9<br />
Multimedia
206 Multimedia
Hinzufügen von Sounds und Videos<br />
Multimedia 207<br />
In <strong>WebPlus</strong> können Sie Ihre Webseiten mit Sound- und<br />
Videodateien in vielen unterschiedlichen Formaten ergänzen.<br />
Hierzu gehören sowohl Streaming-Mediadateien als auch<br />
Standardformate (non-streaming). Darüber hinaus lassen sich<br />
mit <strong>WebPlus</strong> auch Videos von Dritten einfügen, die bereits auf<br />
YouTube gespeichert sind.<br />
Audio<br />
Sounddateien lassen sich entweder als Hintergrundsound<br />
wiedergeben (die Sounddatei wird automatisch geladen und<br />
wiedergegeben, sobald ein Webbrowser die entsprechende Seite<br />
öffnet) oder als verlinkter Sound. Die Wiedergabe von verlinkten<br />
Sounds wird für gewöhnlich durch einen Mausklick auf ein Symbol<br />
oder ein Objekt mit Hyperlink gestartet. <strong>WebPlus</strong> unterstützt die<br />
folgenden Audioformate: .WAV, .AIFF, .AU, MIDI (.mid, .midi),<br />
.MP3 und RealAudio (.ra, .ram).<br />
Video<br />
Verlinkte Videos lassen sich auf die gleiche Weise wiedergeben<br />
wie verlinkte Sounddateien. <strong>WebPlus</strong> unterstützt die folgenden<br />
Videoformate: .AVI, QuickTime (.mov, .qt), MPEG (.mpg, .mpeg,<br />
.mpe, .mpv) und RealVideo (.ram, .rv). Für die Wiedergabe von<br />
Streaming-Dateien wird ein bestimmter Player benötigt, der die<br />
heruntergeladenen Daten in einem Puffer speichert. Der Player<br />
kann hierdurch mit der Wiedergabe beginnen, bevor die Datei<br />
vollständig heruntergeladen ist. Mediadateien in Standardformaten<br />
müssen hingegen erst vollständig auf den Computer des Website-<br />
Besuchers übertragen werden, bevor eine Wiedergabe möglich ist.<br />
Sie können sowohl die Sounddateien (verlinkt und<br />
Hintergrundsounds) als auch die Videodateien entweder von Ihrer<br />
Website getrennt halten oder die Multimediadateien in die Website
208 Multimedia<br />
einbetten. Obwohl durch das Einbetten die Dateigröße der<br />
Website ansteigt, wird diese Option als Standard verwendet, da Sie<br />
nach dem Einbetten nicht mehr auf viele verschiedene Dateien<br />
achten müssen. Somit verringert sich auch das Risiko, dass Sie eine<br />
der Dateien versehentlich löschen. Bei der Publikation Ihrer<br />
Webseite exportiert und kopiert <strong>WebPlus</strong> sowohl die eingebetteten<br />
als auch die nicht eingebetteten Dateien.<br />
Einfügen von Hintergrundsounds in eine Seite<br />
1. Klicken Sie im Arbeitsbereich mit der rechten Maustaste<br />
auf die Seite und in ihrem Kontextmenü auf<br />
Seiteneigenschaften<br />
2. Klicken Sie in dem Dialogfeld „Seiteneigenschaften“ auf<br />
Sound und aktivieren Sie die Option Audiodatei<br />
verwenden.<br />
3. Klicken Sie in dem Dialogfeld „Audiodatei auswählen“<br />
auf die gewünschte Audiodatei und dann auf OK.<br />
4. Wenn Sie die Datei nicht in Ihre Website einbetten<br />
möchten, deaktivieren Sie die Option Sounddatei in<br />
Website einbetten.<br />
5. Wenn Sie eine kontinuierliche Wiedergabe für die<br />
Sounddatei festlegen möchten, aktivieren Sie die Option<br />
Sound in Endlosschleife wiedergeben. Ist diese Option<br />
deaktiviert, wird der Sound nur einmal abgespielt.<br />
6. (Optional) Legen Sie über die Exportoptionen einen<br />
Dateinamen für die exportierte Datei und eine<br />
Speicherposition fest. Nähere Informationen hierzu<br />
finden Sie unter dem Thema „Einstellen der<br />
Bildexportoptionen“ in der <strong>WebPlus</strong>-Hilfe.<br />
7. Klicken Sie auf die Schaltfläche OK.<br />
Der Hintergrundsound wird automatisch heruntergeladen und<br />
wiedergegeben, sobald ein Webbrowser diese Webseite öffnet.
Multimedia 209<br />
Erstellen eines Links von einem Symbol, Bild oder Inline-<br />
Player<br />
1. Klicken Sie in der Kategorie „Mediadateien“<br />
der Studio-Registerkarte QuickBuild auf das Symbol<br />
Audio oder Video und anschließend auf Ihre Seite.<br />
2. Wählen Sie die Speicherposition für die Mediadatei aus<br />
(entweder eine Datei auf Ihrem PC oder eine URL im<br />
Internet).<br />
3. Wählen Sie eine Anzeigeoption für den Link aus<br />
(Symbol, Inline oder Bild).<br />
4. Klicken Sie auf OK, um das Dialogfeld zu schließen, und<br />
platzieren Sie die Markierung, das Symbol oder das Bild<br />
mit einem Mausklick (oder durch Ziehen mit der Maus)<br />
auf Ihrer Seite.<br />
Verlinken von Audio- und Videodateien zu ausgewählten<br />
Objekten und Hotspots<br />
1. Für ein Objekt mit Hyperlink wählen Sie einen<br />
Textbereich, ein Bild oder ein anderes Objekt auf der<br />
Seite aus und klicken in der Symbolleiste für<br />
Webeigenschaften auf die Option Hyperlink.<br />
ODER<br />
Für einen Hotspot klicken Sie im Menü Einfügen auf<br />
Hotspot und legen den Hotspot dann durch Klicken und<br />
Ziehen auf Ihrer Seite fest.<br />
2. Klicken Sie in dem Dialogfeld auf die Option Datei, um<br />
einen Hyperlink zu einer Audio-/Videodatei auf Ihrer<br />
Festplatte zu erstellen.<br />
3. Klicken Sie auf Durchsuchen, wählen Sie die Mediadatei<br />
aus und klicken Sie auf Öffnen.
210 Multimedia<br />
4. Wenn Sie die Datei nicht in Ihre Website einbetten<br />
möchten, deaktivieren Sie die Option Datei in Website<br />
einbetten.<br />
5. Je nach gewünschter Darstellungsart für das Ziel können<br />
Sie ebenfalls in der Registerkarte Zielfenster des<br />
Dialogfelds eine Reihe von Zielfenstern oder Zielrahmen<br />
auswählen. Nähere Informationen hierzu finden Sie<br />
unter dem Thema „Einfügen von Hyperlinks und<br />
Aktionen“ auf Seite 126.<br />
6. Klicken Sie auf die Schaltfläche OK.<br />
Einfügen von Flash-Dateien (SWF)<br />
Eine Flash-Datei (*.SWF) ist eine Moviedatei, die sich in dem<br />
Flash Player betrachten lässt. Flash ist ein vektorbasierendes<br />
Programm für die Entwicklung und Wiedergabe kleiner<br />
Animationsdateien im Web.<br />
Sie können die Flash-Datei per Vorschau prüfen und/oder ihren<br />
Effekt verändern. Nachdem Sie die Datei in Ihre Website eingefügt<br />
haben, erscheint sie lediglich als „Standbild“. Sie müssen die Seite<br />
zunächst exportieren und in einem Webbrowser öffnen, um die<br />
Animationsbewegung zu überprüfen.<br />
Einfügen von Flash-Dateien<br />
1. Klicken Sie in der Kategorie „Mediadateien“ der<br />
Studio-Registerkarte QuickBuild auf das Symbol Flash<br />
und dann auf einen Punkt Ihrer Seite.<br />
2. Klicken Sie in dem nun geöffneten Dialogfeld auf<br />
Durchsuchen, und wählen Sie die gewünschte SWF-<br />
Datei aus. Möchten Sie einen anderen Dateinamen und<br />
eine andere Speicherposition verwenden, klicken Sie auf<br />
Exportoptionen und legen die gewünschten Angaben
Multimedia 211<br />
fest. Wenn Sie die Animation von der <strong>WebPlus</strong>-Datei<br />
getrennt halten, und lieber eine Verknüpfung zu der<br />
Quelldatei in Ihre Seite einfügen möchten, deaktivieren<br />
Sie die Option Flash-Datei in Website einbetten.<br />
3. Klicken Sie auf die Schaltfläche OK.<br />
Bearbeiten von Flash-Movies<br />
• Führen Sie einen Doppelklick auf Ihr Flash-Movie aus.<br />
Einfügen von YouTube-Videos<br />
Bereits im Internet publizierte YouTube-Videos lassen sich<br />
ebenfalls auf Ihren Webseiten platzieren. Die eigentlichen Videos<br />
werden hierbei nicht in Ihre Website eingebettet. Stattdessen bettet<br />
das Programm eine spezielle YouTube-Video-ID in die Seite ein,<br />
wenn Sie das YouTube-Video auf der Seite platzieren. Es wird also<br />
ein Link von Ihrer Seite zu www.youtube.com erstellt. Auf diese<br />
Weise können Sie Medieninhalte auf Ihren Seiten anbieten, ohne<br />
mit Ihrer Website gleichzeitig große Videodateien auf Ihren Server<br />
zu übertragen.
212 Multimedia<br />
Einbetten von YouTube-Videos<br />
1. Öffnen Sie die Website www.youtube.com in Ihrem<br />
Browser und wählen Sie das YouTube-Video aus, zu dem<br />
Sie einen Link erstellen möchten.<br />
2. Kopieren Sie die URL-Adresse des Videos (oder den<br />
Einbettungscode). Der Code enthält eine einzigartige,<br />
alphanumerische ID, die den Videoclip eindeutig<br />
identifiziert.<br />
3. Klicken Sie in der Kategorie „Mediadateien“ der<br />
Studio-Registerkarte QuickBuild auf das Symbol<br />
YouTube und dann auf einen Punkt Ihrer Seite.<br />
4. Fügen Sie nun die zuvor kopierte URL des Videos in das<br />
Dialogfeld ein.<br />
5. (Optional) Aktivieren/Deaktivieren Sie die<br />
Kontrollkästchen für die Videoeinstellungen.<br />
6. Klicken Sie auf die Schaltfläche OK.<br />
Bei einigen Websites werden die YouTube-Videos gelegentlich<br />
(oder in festen Abständen) durch neue Videos ersetzt. Eine<br />
Website könnte z. B. die Top-10 einer bestimmten Kategorie<br />
anbieten, die sich wöchentlich ändert. <strong>WebPlus</strong> kann die Videos<br />
austauschen, ohne ihre Platzierung zu verändern.<br />
Wenn Sie ein YouTube-Video durch ein anderes ersetzen<br />
möchten, führen Sie einfach einen Doppelklick auf ein bestehendes<br />
YouTube-Video aus. Fügen Sie nun die zuvor kopierte URL des<br />
Ersatzvideos in das Dialogfeld ein.
10<br />
Formulare
214 Formulare
Einfügen von Formularen<br />
Formulare 215<br />
Mit Webformularen können Sie auf effiziente und moderne Weise<br />
neue Informationen von den Besuchern Ihrer Website erfragen. Zu<br />
den am häufigsten genutzten Formularen gehören Feedback-<br />
Formulare, Gästebücher und Anfrageformulare.<br />
Formulardaten lassen sich auf unterschiedliche Weise sammeln -<br />
per E-Mail, in einer Skriptdatei (lokal oder auf einem Remote-<br />
Server) oder über die Webressourcen von <strong>Serif</strong>.<br />
Der Formularaufbau<br />
Formulare bestehen aus Texten, Grafiken und den so genannten<br />
Formularelementen. Zu den Elementen gehören Buttons, Eingabe-,<br />
Text-, Listen- und Dropdownfelder sowie Kontrollkästchen,<br />
Auswahlsymbole, Datei-Browser und CAPTCHA-Objekte. Ein<br />
typisches Formular, z. B. für Feedback per E-Mail, besteht für<br />
gewöhnlich aus mehreren dieser Elemente.<br />
Der Besucher der Website gibt dann später Texte in die Textfelder<br />
ein, oder wählt Informationen aus den Listenfeldern,<br />
Dropdownfeldern oder mit den Optionssymbolen und<br />
Kontrollkästchen aus. Für die direkte Texteingabe lassen sich je<br />
nach verwendetem Feldtyp sowohl numerische Werte oder Texte<br />
verwenden als auch eine Mischung aus beiden Informationstypen.<br />
Die Tab-Reihenfolge, in derdie Felder ausgefüllt werden müssen,<br />
lässt sich genauso frei festlegen, wie die Validierung der<br />
eingegebenen Daten. Nähere Informationen zu der Tab-<br />
Reihenfolge und der Validierung finden Sie in der <strong>WebPlus</strong>-Hilfe.<br />
Jedes Feld ist durch einen bestimmten Satz<br />
Formularfeldeigenschaften definiert, die sein Aussehen, seine<br />
Werte, die Validierungsmethode sowie die Aktion festlegen, die<br />
von dem Feld erwartet wird.<br />
Die verschiedenen Funktionen der Formularelemente werden erst<br />
verfügbar, nachdem Sie die Website im Internet publiziert haben.
216 Formulare<br />
Sie können die Formulare natürlich ebenfalls in der <strong>WebPlus</strong>-<br />
Vorschau kontrollieren (siehe „Öffnen einer Website-Vorschau“<br />
auf Seite 282). Nachdem ein Website-Besucher die Daten in ein<br />
Feld eingegeben oder eine Option ausgewählt hat, werden die<br />
Daten bei der Übertragung des Formulars an ein zuvor<br />
ausgewähltes Ziel verschickt.<br />
An welche Empfänger lassen sich Daten schicken?<br />
Nach dem Absenden des Formulars können Sie die Daten an einen<br />
der folgenden Empfänger verschicken.<br />
• Eine E-Mail-Adresse (z. B. die des Website-Designers)<br />
• Eine Skriptdatei (entweder eine lokale oder auf einem<br />
Server gespeicherte). Dieses Skript könnte z. B. Text in<br />
eine Textdatei oder in eine Datenbank schreiben.<br />
• An die Webressourcen von <strong>Serif</strong> für eine weitere<br />
Übermittlung der Formulardaten durch <strong>Serif</strong> an Ihre E-<br />
Mail-Adresse.<br />
Nähere Informationen hierzu finden Sie unter dem Thema<br />
„Übertragen von Formularen“ auf Seite 219.
Erstellen von Formularen<br />
Erstellen von Standardformularen<br />
Formulare 217<br />
Wenn Sie ein Formular<br />
erstellen möchten,<br />
können Sie entweder ein<br />
vordefiniertes<br />
Standardformular (siehe<br />
Beispiel) verwenden,<br />
einzelne<br />
Formularelemente für<br />
Ihr Formular platzieren<br />
oder ein Formular von<br />
Grund auf neu<br />
zusammenstellen. Für<br />
die ersten beiden<br />
Methoden steht Ihnen<br />
ein Formularassistent zur<br />
Verfügung.<br />
1. Wählen Sie in der Studio-Registerkarte QuickBuild<br />
das Symbol Formular der Kategorie „Formulare“ aus<br />
und klicken Sie auf die Seite.<br />
2. Klicken Sie in dem Dialogfeld auf die Option<br />
Standardformular verwenden und anpassen und dann<br />
auf die Schaltfläche Weiter>.<br />
3. Wählen Sie das gewünschte Formular in der Liste aus.<br />
Wenn Sie auf einen der Einträge klicken, wird<br />
automatisch eine Darstellung des Formulars in dem<br />
Vorschaufeld angezeigt.<br />
4. Klicken Sie auf die Schaltfläche Weiter>.
218 Formulare<br />
5. Im nächsten Dialogfeld können Sie Formularelemente<br />
hinzufügen, bearbeiten und löschen.<br />
• Um ein Element einzufügen, klicken Sie in dem Feld<br />
Hinzufügen auf die entsprechende Schaltfläche.<br />
• Um ein Standardobjekt zu verändern, wählen Sie<br />
das Element in dem oberen Feld aus und klicken auf<br />
die Schaltfläche Element bearbeiten.<br />
• Um ein Standardobjekt zu entfernen, wählen Sie das<br />
Element in dem oberen Feld aus und klicken auf die<br />
Schaltfläche Löschen oder drücken die Entf-Taste.<br />
• Um die Reihenfolge der Elemente zu<br />
verändern, wählen Sie ein Element aus und klicken<br />
dann auf eines der Symbole Nach oben oder Nach<br />
unten.<br />
6. Klicken Sie auf Weiter > und im nächsten Dialogfeld auf<br />
eines der Symbole, um das Ziel für die Übermittlung der<br />
Formulardaten auszuwählen.<br />
Nähere Informationen hierzu finden Sie unter dem<br />
Thema „Übertragen von Formularen“ auf Seite 219.<br />
7. Klicken Sie auf Fertig stellen, um den Assistenten zu<br />
schließen.<br />
Wenn Sie Ihr Formular sehr präzise konfigurieren möchten, fügen<br />
Sie einfach ein leeres Formular ein und ergänzen es dann mit<br />
Formularelementen und/oder Standard-Formularobjekten. Sie<br />
können ebenfalls die Schaltflächen für das Absenden und<br />
Zurücksetzen anpassen oder ersetzen . Nähere Informationen<br />
hierzu finden Sie in der <strong>WebPlus</strong>-Hilfe.
Übertragen von Formularen<br />
Formulare 219<br />
Alle Webformulare müssen an einen bestimmten Empfänger<br />
versandt werden, damit ihre Daten ausgewertet werden können.<br />
Sie können zu diesem Zweck entweder manuell eine Schaltfläche<br />
Absenden erstellen oder die vorgefertigte Version des<br />
Formularassistenten verwenden. Diese zwingend erforderliche<br />
Schaltfläche wird häufig zusammen mit der Schaltfläche<br />
„Zurücksetzen“ in einem Formular platziert. Über die Schaltfläche<br />
„Zurücksetzen“ können die Website-Besucher alle Daten aus den<br />
Formularfeldern löschen.<br />
Für die Übermittlung der Formulardaten stehen Ihnen mehrere<br />
Möglichkeiten zur Verfügung.<br />
Keine Übermittlung<br />
Es werden keine Formulardaten übertragen. Diese Option ist<br />
besonders hilfreich, wenn Sie für einen bestimmten Zeitraum keine<br />
weiteren Daten mehr abfragen möchten oder Ihre Skripts bzw. die<br />
<strong>Serif</strong> Webressourcen noch nicht vollständig konfiguriert haben. Sie<br />
können später jederzeit mit der rechten Maustaste auf das<br />
Formular klicken und über Formulareigenschaften bearbeiten...<br />
eine Übertragungsmethode für die Daten auswählen.<br />
Sie sollten keine Formulare auf Ihrer Website<br />
publizieren, für die Sie keine Absenden-Funktion<br />
festgelegt haben.
220 Formulare<br />
Eine E-Mail Adresse<br />
Mit dieser Option können Sie die allgemein üblichen POST- und<br />
GET-Übertragungsmethoden umgehen. Sobald der Website-<br />
Besucher auf die Schaltfläche „Absenden“ klickt, wird sein E-Mail-<br />
Standardprogramm gestartet. Die Formulardaten werden dann als<br />
ein Textstring in den Textkörper der E-Mail eingefügt und lassen<br />
sich schnell und einfach an die vorkonfigurierte E-Mail-Adresse<br />
schicken. Diese Methode ist besonders hilfreich, wenn Sie keine<br />
lokalen oder Remote-Skripts verwenden möchten oder können.<br />
Diese Übertragungsmethode ist jedoch nicht sicher, da<br />
die privaten oder vertraulichen Informationen nicht<br />
verschlüsselt werden.<br />
Einrichten der direkten E-Mail-Übertragung<br />
1. Klicken Sie auf das E-Mail-Symbol und geben Sie einen<br />
Formularnamen ein.<br />
2. Geben Sie eine E-Mail-Adresse als Ziel ein (oder wählen<br />
Sie eine bereits bekannte Adresse in dem Dropdownfeld<br />
aus).<br />
Skriptdatei von meiner Festplatte<br />
Diese Option ist speziell für erfahrene Webdesigner konzipiert, die<br />
sich gut in der Erstellung von Skripten auskennen.<br />
Einrichten einer lokalen Skriptdatei<br />
1. Klicken Sie auf das Symbol Skriptdatei und geben Sie<br />
einen Formularnamen ein.<br />
2. Wählen Sie über die Schaltfläche Durchsuchen... die auf<br />
Ihrem Computer gespeicherte Skriptdatei (für<br />
gewöhnlich mit der Dateiendung „.PHP“, „.JS“, „.CFM“
„.CGI“, „.PL“, „.DLL“ oder „.EXE“) aus, die Sie<br />
verwenden möchten.<br />
Formulare 221<br />
3. Aktivieren Sie die Option Datei einbetten, um die<br />
Skriptdatei in die <strong>WebPlus</strong>-Website zu integrieren. Ist<br />
diese Option deaktiviert, besteht keine Verbindung<br />
zwischen der Skriptdatei und der Website, sodass<br />
sämtliche Änderungen an der Skriptdatei von der<br />
Website nicht berücksichtigt werden.<br />
4. Optional können Sie noch über die Schaltfläche<br />
Exportoptionen... einen Webdateinamen und -ordner<br />
für das Skript festlegen.<br />
5. Wählen Sie eine Übertragungsmethode, einen<br />
Codierungstyp, einen Zeichensatz und ein Zielfenster<br />
oder einen Zielrahmen aus.<br />
Ein Remote-Skript<br />
Verwenden Sie diese Option, wenn Ihr ISP den Einsatz<br />
benutzerdefinierter Skripte auf seinen Webservern nicht gestattet.<br />
Viele Internetdienstanbieter stellen jedoch einige Grundskripte zur<br />
Verfügung, auf die Sie von Ihrer Website einfach einen Link<br />
erstellen. Für gewöhnlich senden diese Skripte dann die<br />
Formulardaten an die E-Mail-Adresse, die Sie bereits im Vorfeld<br />
bei dem ISP eingerichtet haben.<br />
Einrichten einer Remote-Skriptdatei<br />
1. Klicken Sie auf das Symbol Remote-Skript, und geben<br />
Sie einen Formularnamen ein.<br />
2. Geben Sie die URL ein, die direkt auf die Skriptdatei<br />
verweist.<br />
3. Wählen Sie eine Übertragungsmethode, einen<br />
Codierungstyp, einen Zeichensatz und ein Zielfenster<br />
oder einen Zielrahmen aus.
222 Formulare<br />
<strong>Serif</strong> Webressourcen<br />
Wenn Sie den Webserver nicht selbst aufstellen und verwalten<br />
möchten, können Sie auch die <strong>Serif</strong> Webressourcen (siehe<br />
Seite 184) nutzen. Dieser kostenlose Service transferiert Ihre<br />
Formulardaten über einen Server von <strong>Serif</strong> an eine beliebig<br />
konfigurierbare E-Mail-Adresse. Aus Sicherheitsgründen müssen<br />
Sie zunächst ein Benutzerkonto bei den <strong>Serif</strong> Webressourcen<br />
anlegen, bevor Sie die E-Mail-Zieladresse für die Formulardaten<br />
festlegen können.<br />
Konfigurieren der <strong>Serif</strong> Webressourcen<br />
1. Klicken Sie auf das Symbol <strong>Serif</strong> Webressourcen, und<br />
geben Sie einen Formularnamen ein.<br />
2. Klicken Sie auf Auswählen. Falls Sie noch nicht bei den<br />
<strong>Serif</strong> Webressourcen angemeldet sind, holen Sie dies nun<br />
nach.<br />
3. Geben Sie in das Dialogfeld die Details zu der Zieladresse<br />
ein:<br />
• Geben Sie die E-Mail-Zieladresse in das Feld E-<br />
Mail-Adresse ein.<br />
• Geben Sie einen Benutzerdefinierten Betreff ein,<br />
der in den E-Mails Ihrer Website-Besucher<br />
verwendet werden soll (z. B. E-Mail-Übermittlung<br />
von Rainbow_WWW: Kontaktdetails).<br />
• Geben Sie eine Bestätigungsnachricht ein, die dem<br />
Website-Besucher angezeigt werden soll, nachdem<br />
er auf die Absenden-Schaltfläche geklickt hat.<br />
• In dem Feld Sprache legen Sie die Sprache fest, in<br />
der die Bestätigungsnachricht versendet werden soll.
Formulare 223<br />
Wenn Sie ein Formularelement vom Typ „Eingabefeld“<br />
für die E-Mail-Adresse erstellen, können Sie die<br />
Bestätigungs-E-Mail auch direkt an den Website-<br />
Besucher senden. Hierzu müssen Sie in den<br />
Eigenschaften des Eingabefeldes die Option SWR:<br />
Bestätigungs-E-Mail senden aktivieren. Wenn Sie ein<br />
CAPTCHA-Formularelement in dem Formular<br />
verwenden, wird dieses als Spam-Schutz eingesetzt. Ist<br />
dieses Element nicht vorhanden, wird die Spam-<br />
Prüfung über den CAPTCHA-Gateway abgewickelt.<br />
Wenn Sie in das Feld „Antwort an“ die E-Mail-Adresse<br />
Ihres Website-Entwicklers eintragen möchten,<br />
aktivieren Sie die Option Antwort an mich in dem<br />
obigen Dialogfeld. Auf diese Weise können die<br />
Website-Besucher sich direkt an den Entwickler der von<br />
ihnen aufgerufenen Seite wenden.<br />
4. Klicken Sie auf Neu hinzufügen. Der E-Mail-Eintrag<br />
wird nun erstellt und in die Liste „Verfügbare E-Mail-<br />
Zieladressen“ eingetragen. Wie Sie sehen, wird der<br />
Eintrag als „Nicht bestätigt“ klassifiziert. Bevor der Dienst<br />
seine Arbeit aufnehmen kann, wird eine Bestätigungs-E-<br />
Mail an Ihre E-Mail-Adresse geschickt. Klicken Sie auf<br />
den Link, um den Dienst zu aktivieren. Der<br />
entsprechende Eintrag wird nun als „Bestätigt“ angezeigt.<br />
5. (Optional) Wiederholen Sie die obigen Schritte, um<br />
weitere E-Mail-Zieladressen einzufügen, und wählen Sie<br />
die Einträge aus, um sie zu aktivieren.<br />
6. Klicken Sie auf die Schaltfläche OK.<br />
Standardmäßig wird dem Website-Besucher über eine einfache<br />
Bestätigungsseite (erstellt von den <strong>Serif</strong> Webressourcen) angezeigt,<br />
dass die Formulardaten erfolgreich übermittelt wurden. Sie können<br />
statt dieser von den Webressourcen erstellten Standardseite auch<br />
Ihre eigene Bestätigungsseite anzeigen lassen. Da es sich bei der<br />
Bestätigungsseite um eine ganz normale Webseite handelt, können
224 Formulare<br />
Sie auf ihr alle Designelemente verwenden, mit denen Sie auch die<br />
anderen Seiten Ihrer Website erstellt haben.<br />
Hinzufügen Ihrer eigenen Bestätigungsseite<br />
1. (Nur möglich bei der Übertragung der Daten über die<br />
<strong>Serif</strong> Webressourcen) Klicken Sie mit der rechten<br />
Maustaste auf das Formular und in seinem Kontextmenü<br />
auf Formulareigenschaften bearbeiten.<br />
2. Klicken Sie auf die Schaltfläche Auswählen gegenüber<br />
dem Feld Umleiten zu.<br />
3. Klicken Sie in dem Dialogfeld „Formularumleitung<br />
bearbeiten“ auf Website-Seite und wählen Sie dann in<br />
dem Dropdownfeld einen Seitennamen aus.<br />
4. Klicken Sie zweimal auf die Schaltfläche OK, um die<br />
Dialogfelder zu schließen. Bei der nächsten Übermittlung<br />
von Formulardaten wird nun Ihre Bestätigungsseite<br />
angezeigt.<br />
Es werden keine persönlichen Daten auf den <strong>Serif</strong><br />
Webservern gespeichert. Alle Formulardaten werden in<br />
Echtzeit weitergeleitet.<br />
CAPTCHA-Gateway<br />
Als Schutz gegen Spam-Mails verwenden die <strong>Serif</strong> Webressourcen<br />
einen CAPTCHA-Gateway, wenn Sie kein CAPTCHA-<br />
Formularelement direkt in Ihr Formular einfügen (siehe „Die<br />
Formularelemente“ in der <strong>WebPlus</strong>-Hilfe). Bei der<br />
Formularübermittlung muss dann der Website-Besucher eine<br />
willkürlich zusammengestellte Zeichenfolge in ein Textfeld eingeben.<br />
Wird der Test bestanden, initiiert das Objekt automatisch die<br />
Formularübermittlung.
11<br />
E-Commerce-Objekte
226 E-Commerce-Objekte
Was bedeutet E-Commerce?<br />
E-Commerce-Objekte 227<br />
Als „E-Commerce“ bezeichnet man den Kauf und Verkauf von<br />
Waren über das Internet. Heutzutage ist der Einzelhandel über<br />
Online-Shops ein normaler Bestandteil unserer Internetaktivitäten<br />
geworden. Sicher haben Sie auch schon einmal Bücher, CDs,<br />
Konzertkarten oder Flugtickets über das Internet gekauft. Alle auf<br />
E-Commerce ausgerichteten Websites benutzen für gewöhnlich ein<br />
System für ihren Warenkorb sowie ein System für die Verarbeitung<br />
der Zahlungsmethoden. Der Warenkorb entspricht in seiner<br />
Funktion dem realen Warenkorb in einem Supermarkt und dient<br />
als Container für die Waren, die Sie in einem Internet-Shop<br />
ausgesucht haben. Mit diesem Korb begeben Sie sich dann zu der<br />
virtuellen Kasse, an der das Verarbeitungssystem für die<br />
Zahlungsmethoden den finanziellen Teil des Einkaufs abwickelt.<br />
Große Unternehmen verwenden für gewöhnlich eine eigene<br />
Warenkorbfunktion, die speziell auf die Anforderungen ihrer<br />
Produkte zugeschnitten wurde. Die Abwicklung der<br />
Zahlungsmodalitäten wird häufig von Drittanbietern<br />
übernommen. Da Sonderanfertigungen sehr teuer sind, setzen<br />
kleine Unternehmen und Organisationen häufig auf vorgefertigte<br />
Lösungen von Drittherstellern. Im Internet finden Sie eine Reihe<br />
Unternehmen, die verschiedene Warenkorbfunktionen anbieten.<br />
Alle diese Funktionen laufen über ein Benutzerkonto und wickeln<br />
die Zahlung über verschiedene Kreditkarten ab, anstatt auf die<br />
herkömmlichen Zahlungswege zu setzen.<br />
Welche Rolle übernimmt <strong>WebPlus</strong> nun in dieser Struktur? Mit<br />
<strong>WebPlus</strong> können Sie den Anbieter für Warenkorbsysteme bequem<br />
auswählen und über einen Link oder ein Formular auf Ihrer mit<br />
<strong>WebPlus</strong> erstellten Webseite zu dem Dienstanbieter Kontakt<br />
aufnehmen. In den Formularen können Sie verschiedene<br />
Kaufoptionen (z. B. Farbe und Menge) einstellen sowie Steuern,<br />
Versandkosten, Mengenrabatte usw. berechnen. Über Links lassen<br />
sich die Waren mit nur einem Mausklick erwerben. Hierbei<br />
können Sie jedoch keine Kaufoptionen auswählen. Die Art und der
228 E-Commerce-Objekte<br />
Umfang der Funktionen variieren je nach Dienstanbieter. Schauen<br />
Sie sich einfach um, welches Unternehmen Ihren Vorstellungen<br />
entspricht.<br />
Konfigurieren des Warenkorbsystems Ihres<br />
Dienstanbieters<br />
Über <strong>WebPlus</strong> lassen sich Warenkorbsysteme sehr flexibel<br />
konfigurieren. Als Kunde bei eBay® kennen Sie wahrscheinlich<br />
bereits das System PayPal®. Während der Konfiguration werden Sie<br />
zu der Website des Dienstanbieters geleitet, auf der Sie sich als<br />
registrierter Benutzer anmelden können.<br />
Nähere Informationen zu den einzelnen Möglichkeiten<br />
der Warenkorbsysteme finden Sie auf den Websites der<br />
Drittanbieter.<br />
Einrichten des Dienstanbieters für einen Websiteumfassenden<br />
Warenkorb<br />
1. Klicken Sie in der Kategorie „E-Commerce“ der<br />
Studio-Registerkarte QuickBuild auf das Symbol E-<br />
Commerce und klicken Sie dann auf einen Punkt der<br />
Seite, um das Objekt zu platzieren.<br />
2. In dem Dialogfeld E-Commerce konfigurieren stehen<br />
Ihnen nun zwei Optionen zur Verfügung. Welche Sie<br />
verwenden können, hängt davon ab, ob Sie bereits Kunde<br />
bei einem Dienstanbieter sind oder sich als Neukunde<br />
anmelden möchten:<br />
• Als Neukunde wählen Sie zunächst das Symbol für<br />
den Dienstanbieter aus und klicken dann auf die<br />
Schaltfläche Jetzt anmelden. Die Website des<br />
Dienstanbieters wird nun in einem neuen<br />
Browserfenster geöffnet, sodass Sie sich als<br />
registrierter Kunde bei dem<br />
Warenkorbdienstanbieter anmelden können.
E-Commerce-Objekte 229<br />
• Wenn Sie bereits Kunde bei einem Dienstanbieter<br />
sind, wählen Sie das Symbol Ihres Dienstanbieters<br />
aus und klicken dann auf Weiter>. Mit dieser<br />
Option legen Sie den standardmäßig verwendeten<br />
Dienstanbieter für Ihre Website fest. Da Sie bereits<br />
Kunde sind, müssen Sie kein neues Benutzerkonto<br />
anlegen.<br />
3. Die Zusammensetzung dieses Dialogfelds variiert je nach<br />
verwendetem Warenkorb-Anbieter. Für PayPal können<br />
Sie z. B. über ein Dialogfeld eine E-Mail-Adresse<br />
festlegen, die alle Zahlungen empfangen soll, eine<br />
Bearbeitungsgebühr für den Warenkorb festlegen und<br />
mit der „Sandbox“ Ihren Warenkorb testen, bevor Sie<br />
ihn live ins Internet stellen. Klicken Sie auf die<br />
Schaltfläche Weiter>.<br />
Für den Sandbox-Test finden Sie auf der PayPal-Website<br />
über die Suchfunktion oder unter den Händler-Tools<br />
alle Informationen, um eine Sandbox-Anmeldung<br />
zusätzlich zu Ihrer normalen PayPal-Anmeldung zu<br />
erstellen.<br />
4. (Optional, nur für PayPal) Klicken Sie in dem nächsten<br />
Dialogfeld auf PayPal-Minicart verwenden, um einen<br />
Popup-Warenkorb als Overlay einzublenden, wenn Ihre<br />
Website-Besucher Artikel in ihren Warenkorb legen. Der<br />
Warenkorb wird anschließend in der linken oberen<br />
Browserecke minimiert und die Artikel bleiben bis zu<br />
dem Checkout an der Kasse in dem Warenkorb.
230 E-Commerce-Objekte<br />
Sie können über das Dialogfeld ebenfalls die Position des<br />
Minicarts im Browserfenster festlegen und den im<br />
Minicart angezeigten Standardtext ändern oder löschen.<br />
5. Nachdem Sie alle Einstellungen vorgenommen haben,<br />
klicken Sie auf Fertig stellen, um die Konfiguration<br />
abzuschließen.<br />
Nachdem Sie das Warenkorbsystem konfiguriert haben, müssen<br />
Sie ein E-Commerce-Objekt einfügen.<br />
Einfügen von E-Commerce-Objekten<br />
(PayPal)<br />
E-Commerce-Objekte lassen sich in <strong>WebPlus</strong> schnell und einfach<br />
mithilfe von Assistenten erstellen. Wählen Sie einfach die<br />
gewünschten Optionen in den verschiedenen Dialogfeldern aus,<br />
um ein E-Commerce-Objekt als Formular oder Link (d. h. als<br />
einfache Schaltfläche oder als Hyperlink eines beliebigen Objekts)<br />
in eine Seite einzufügen. Je nach Eigenschaften der Waren, die Sie<br />
verkaufen möchten, und Ihrer bevorzugten Abwicklungsweise für<br />
die Transaktion, bieten sich in einigen Fällen eher die Formulare<br />
und in anderen die Links als beste Methode an.
E-Commerce-Objekte 231<br />
Wenn Sie z. B. eine bestimmte Menge<br />
Ziegelsteine verkaufen möchten,<br />
könnten Sie eine E-Commerce-<br />
Schaltfläche (als „Jetzt kaufen“-Link)<br />
erstellen.<br />
Bei dieser Option wird jedoch angenommen, dass die Menge,<br />
Größe, die Variation und die Farbe des Artikels festgelegt sind<br />
(sich von dem Kunden also nicht ändern lassen).<br />
Da der Link nur über die Schaltfläche erstellt wird, sind keine<br />
weiteren „interaktiven“ Kaufoptionen (z. B. Farbe, Größe, Anzahl<br />
usw.) verfügbar, die häufig für komplexere Transaktionen benötigt<br />
werden. Mit seinem Mausklick kann der Käufer also nur die<br />
festgelegte Standardmenge kaufen - nicht mehr und nicht weniger.<br />
In einigen Fällen mag dies genügen, in anderen ist eine solch<br />
eingeschränkte Auswahl völlig unzureichend.<br />
Häufig werden daher E-Commerce-Formulare für Online-Shops<br />
verwendet, da die Käufer hier selbst einige Optionen bestimmen<br />
können (Menge, Größe usw.).<br />
Wenn Sie sehr viele Artikel über eine E-Commerce-Seite anbieten<br />
möchten, können Sie die Verkaufsartikel in einer <strong>Serif</strong>-<br />
Datenbankdatei (*.SDB) speichern, die speziell für den Einsatz mit<br />
E-Commerce-Lösungen strukturiert ist. Indem Sie<br />
Wiederholungsbereiche oder Wiederholungsformulare auf Ihren<br />
Seiten platzieren, lassen sich die Einträge aus der Datenbank nach<br />
dem Zusammenführen der Daten bequem anzeigen und als Artikel<br />
verkaufen. Nähere Informationen hierzu finden Sie unter dem<br />
Abschnitt „Arbeiten mit der Datenbankzusammenführung für E-<br />
Commerce“ in der <strong>WebPlus</strong>-Hilfe.<br />
Das nach dem Einfügen eines E-Commerce-Objekts angezeigte<br />
Dialogfeld variiert je nach Dienstanbieter, den Sie für Ihre<br />
Warenkorbfunktion ausgewählt haben. Nähere Informationen<br />
hierzu finden Sie unter dem Abschnitt „Konfigurieren des<br />
Warenkorb-Anbieters“ auf Seite 228.
232 E-Commerce-Objekte<br />
Die nachfolgenden Schritte beziehen Sie auf das<br />
Einfügen von Objekten mit PayPal als Dienstanbieter<br />
für Ihren Warenkorb.<br />
Einfügen von E-Commerce-Formularen und -Schaltflächen<br />
1. Klicken Sie in der Kategorie „E-Commerce“ der<br />
Studio-Registerkarte QuickBuild auf das Symbol E-<br />
Commerce und klicken Sie dann auf einen Punkt der<br />
Seite, um das Objekt zu platzieren.<br />
2. Wählen Sie in dem Dialogfeld PayPal-Objekt<br />
hinzufügen die E-Mail-Adresse aus, an die Sie die<br />
Zahlungsinformationen schicken möchten. <strong>WebPlus</strong><br />
geht davon aus, dass Sie die E-Mail-Adresse verwenden,<br />
die Sie während der Konfiguration des Warenkorbs<br />
festgelegt haben. Alternativ können Sie auch die Option<br />
Standardkonto der Website verwenden deaktivieren<br />
und eine andere E-Mail-Adresse angeben, um die<br />
Standardvorgabe zu umgehen.<br />
3. Wählen Sie den gewünschten Objekttyp aus dem Feld<br />
„PayPal-Formular“ aus. Wenn Sie für Ihre Artikel<br />
mehrere Kaufoptionen (z. B. Farbe oder Menge) zur<br />
Verfügung stellen möchten, klicken Sie auf die Option<br />
für ein E-Commerce-Formular. Können Sie auf<br />
zusätzliche Optionen verzichten, wählen Sie eine<br />
Linkvariante aus, um eine klickbare E-Commerce-<br />
Schaltfläche zu erstellen. Mit Wiederholungsbereichen<br />
und -formularen können Sie Artikel aus einer Datenbank<br />
einfügen und müssen sie nicht einzeln mit dem<br />
Dialogfeld „Artikeldetails“ definieren (siehe „Arbeiten<br />
mit der Datenbankzusammenführung für E-Commerce“<br />
in der Hilfe zu <strong>WebPlus</strong>). Klicken Sie auf die Schaltfläche<br />
Weiter>.
E-Commerce-Objekte 233<br />
(Optional) Wenn Sie kein Formular oder eine<br />
Schaltfläche verwenden möchten, aktivieren Sie die letzte<br />
Option und fügen dann den entsprechenden Code in das<br />
nächste Dialogfeld ein. Sie können hierfür z. B. einen<br />
Code verwenden, der von der PayPal-Website erstellt<br />
wurde. Diese Codevarianten finden Sie nach der<br />
Anmeldung unter den Händler-Tools. Klicken Sie auf<br />
Weiter>, um den Assistenten zu beenden und fügen Sie<br />
das HTML-Codefragment in Ihre Seite ein.<br />
4. In dem nächsten Dialogfeld legen Sie die Schaltfläche<br />
fest, die für das Objekt verwendet werden soll. Sie<br />
können hierfür eine Textschaltfläche verwenden<br />
(aktivieren Sie einfach die Option und geben Sie den<br />
Text ein) oder eine Bildschaltfläche (aktivieren Sie die<br />
Option und legen Sie eine Vorlage in dem scrollbaren<br />
Fenster fest). Einige Bilder bieten auch automatische<br />
Rollovereffekte.<br />
Klicken Sie auf die Schaltfläche Weiter.<br />
5. In dem Dialogfeld Artikeldetails legen Sie die ID und<br />
den Namen des Artikels sowie den Preis und die<br />
anfallende Steuer fest. Hierbei stehen Ihnen die<br />
folgenden Optionen zur Verfügung:<br />
• Artikelname: Die Bezeichnung des zum Verkauf<br />
angebotenen Artikels. Dieser Name wird auf dem<br />
Formular und im Warenkorb angezeigt.
234 E-Commerce-Objekte<br />
• Festlegen des Artikelnamens durch Kunde<br />
ermöglichen: Wenn Sie diese Option aktivieren,<br />
wird der obige Artikelname gegen ein Textfeld<br />
ausgetauscht, in das der Kunde seine eigene<br />
Bezeichnung eingeben kann. Diese Möglichkeit<br />
eignet sich ebenfalls gut für die Angabe von<br />
Spendendetails.<br />
• Artikel-ID: Hier können Sie den Textstring<br />
eingeben, mit dem PayPal den Artikel verarbeiten<br />
soll.<br />
• Währung: Einstellen der Währung, die für die<br />
Transaktion verwendet werden soll.<br />
• Preis: Der Preis des Artikels. Diese Option wird<br />
standardmäßig auf dem Bildschirm angezeigt.<br />
• Festlegen der Summe durch Kunde ermöglichen:<br />
Wenn Sie diese Option aktivieren, wird der obige<br />
Artikelpreis gegen ein Textfeld ausgetauscht, in das<br />
der Kunde seine eigene Summe eingeben kann.<br />
Dieses Feld eignet sich besonders gut für<br />
Spendenformulare, in denen der Spender den<br />
Betrag selbst festlegen soll.<br />
• Steuereinstellungen überschreiben: Wenn Sie den<br />
von dem Dienstanbieter in Ihrem Profil<br />
vordefinierten Steuersatz für den Artikel ändern<br />
möchten, aktivieren Sie diese Option. Legen Sie<br />
anschließend einen festen Steuersatz für den Artikel<br />
fest (z. B. 0 % für steuerbefreite Spenden).
E-Commerce-Objekte 235<br />
• Gewicht: Hier legen Sie ein Artikelgewicht fest,<br />
wenn Sie mit einer gewichtsbasierenden<br />
Versandmethode (nur für USA) arbeiten, die in<br />
Ihrem PayPal-Profil festgelegt ist. Für gewöhnlich<br />
werden Pfund (lb) als Maßeinheit verwendet, Sie<br />
können jedoch auch Kilogramm (kg) benutzen.<br />
Nachdem Sie alle gewünschten Einstellungen<br />
vorgenommen haben, klicken sie auf Weiter>.<br />
Wenn Sie mit der Datenbankzusammenführung für E-<br />
Commerce arbeiten, wählen Sie in dem Dialogfeld<br />
„Artikeldetails“ die E-Commerce-Datenbank aus, die Sie<br />
mit Ihrem Warenkorbsystem verwenden möchten.<br />
Denken Sie stets daran, die Währung festzulegen, die Sie<br />
für Ihre Transaktionen verwenden möchten.<br />
6. Für E-Commerce-Formulare werden zusätzlich die zwei<br />
folgenden Dialogfelder angezeigt:<br />
• In dem Dialogfeld für die Artikelbeschreibung<br />
können Sie optional ein Bild angeben (z. B. eine<br />
Vorschau auf das zum Verkauf angebotene<br />
Produkt) sowie eine kurze und lange Beschreibung,<br />
die in dem Formular angezeigt werden. Klicken Sie<br />
auf die Schaltfläche Weiter>.<br />
• In dem Dialogfeld für die Artikeloptionen können<br />
Sie Eingabefelder, Kombinationsfelder,<br />
Auswahlsymbole und feste Namen festlegen (pro<br />
Formular sind bei PayPal bis zu 10 Optionen<br />
möglich; jedoch nur eine Option zur<br />
Preisänderung). Sie können diese Elemente<br />
entweder von Grund auf neu entwerfen oder auch<br />
zuvor gespeicherte Varianten einsetzen. Klicken Sie
236 E-Commerce-Objekte<br />
auf die Schaltfläche Weiter>. Diese Option ist für<br />
Wiederholungsformulare nicht verfügbar.<br />
7. Legen Sie in dem Dialogfeld Artikeldetails entweder eine<br />
Standardmenge für den Artikel in dem entsprechenden<br />
Feld fest, oder aktivieren Sie das Kontrollkästchen, um<br />
dem Käufer die Eingabe der Artikelmenge an der Kasse<br />
zu ermöglichen (nicht für Wiederholungsformulare<br />
verfügbar).<br />
ODER<br />
Aktivieren Sie die zweite Option Eingabefeld<br />
hinzufügen, damit der Kunde die Artikelmenge direkt<br />
bei der Artikelauswahl festlegen kann.<br />
Für Versand und Bearbeitung können Sie zusätzliche<br />
Kosten festlegen.<br />
Wenn Sie diese Felder nicht ausfüllen, wird das<br />
Standardprofil von PayPal verwendet. Diese Option ist<br />
für Wiederholungsformulare nicht verfügbar. Klicken Sie<br />
auf die Schaltfläche Weiter>.<br />
8. In dem Dialogfeld Zusätzliche Kundeninformationen<br />
können Sie festlegen, ob der Kunde nach einer Adresse<br />
gefragt werden soll, oder die Adresse selbst eingeben<br />
muss. Wenn Sie noch eine weitere Frage an den Kunden<br />
stellen möchten, geben Sie einfach den entsprechenden<br />
Text in das zweite Feld ein. Klicken Sie auf die<br />
Schaltfläche Weiter>.
9. In dem letzten Dialogfeld legen Sie die<br />
Zahlungseinstellungen fest:<br />
E-Commerce-Objekte 237<br />
• Wenn Sie über Ihre PayPal-Anmeldung bereits eine<br />
besondere Formatierung für Ihre Checkout-Seite<br />
festgelegt haben, können Sie die entsprechende<br />
Bezeichnung in das oberste Feld eingeben.<br />
• Legen Sie über das Dropdownfeld eine Sprache für<br />
die PayPal-Anmeldungsseite fest.<br />
• Ändern Sie den Text für die Schaltfläche<br />
„Fortsetzen“ auf der Website „Zahlung erfolgreich“.<br />
• Legen Sie, falls gewünscht, eine bestimmte<br />
Webadresse für die Seiten „Zahlung erfolgreich“<br />
und „Zahlungsvorgang abgebrochen“ fest. Geben<br />
Sie hierzu einfach die URL in das Dropdownfeld<br />
ein, oder wählen Sie einen bereits vorhandenen<br />
Eintrag aus.<br />
10. (Nur für E-Commerce-Formulare) Wählen Sie ein<br />
Formularlayout in dem Fenster aus. Mit den<br />
Kontrollkästchen können Sie genau festlegen, welche<br />
Informationen in dem Formular angezeigt werden. Sie<br />
können hier auch den Preis deaktivieren, bei der Arbeit<br />
mit Wiederholungsformularen das Artikelbild ein-<br />
/ausblenden, lange oder kurze Beschreibungen<br />
verwenden, feste Optionen einstellen sowie ein Dummy-<br />
Bearbeitungsfeld für die Artikelmenge auswählen. Alle<br />
Formulare lassen sich mit dem Kontrollkästchen<br />
Formular jetzt neu formatieren neu aufbauen.
238 E-Commerce-Objekte<br />
11. Klicken Sie anschließend auf die Schaltfläche Fertig<br />
stellen.<br />
12. Um das Formular oder eine Schaltfläche<br />
einzufügen, platzieren Sie den Mauszeiger auf der<br />
gewünschten Seitenposition und drücken die linke<br />
Maustaste.<br />
Bearbeiten von E-Commerce-Formularen und -Schaltflächen<br />
1. Führen Sie einen Doppelklick auf das Formular oder die<br />
Schaltfläche aus.<br />
2. Stellen Sie über die verschiedenen Dialogfelder die<br />
gewünschten Optionen für das E-Commerce-Objekt neu<br />
ein.<br />
Umwandeln in Standardformulare<br />
• Klicken Sie mit der rechten Maustaste auf ein<br />
bestehendes E-Commerce-Formular und in dem<br />
Kontextmenü auf In Formular umwandeln.
12<br />
Text
240 Text
Text 241<br />
Importieren von Texten aus einer Datei<br />
Das Importieren von Texten aus einer bestehenden Datei ist eine<br />
der einfachsten Möglichkeiten, den Text für eine Website zu<br />
erstellen. Alternativ können Sie den Text natürlich auch mit<br />
WritePlus neu verfassen. Wenn Sie Ihre Texte für gewöhnlich mit<br />
einer Textverarbeitung wie Microsoft Word erstellen, lassen sich<br />
die einzelnen Dateien schnell und unkompliziert in eine Website<br />
importieren.<br />
Neben dem WritePlus-Format „*.stt“ können Sie auch eine Reihe<br />
anderer beliebter Dateiformate importieren.<br />
Für die Formate von Microsoft Word, die unter einem beliebigen<br />
Windows-Betriebssystem erstellt wurden, müssen Sie Microsoft<br />
Word nicht erst auf Ihrem Computer installieren. Auf diese Weise<br />
können Sie Texte von anderen Autoren in <strong>WebPlus</strong> einsetzen,<br />
ohne auf das Programm angewiesen zu sein, mit dem die<br />
Dokumente erstellt wurden.<br />
<strong>WebPlus</strong> importiert den Text in einen ausgewählten HTML-<br />
Textrahmen oder erstellt automatisch einen neuen HTML-<br />
Textrahmen, wenn Sie keinen ausgewählt haben. Nähere<br />
Informationen finden Sie unter „Einfügen von Textrahmen“ auf<br />
Seite 75.<br />
<strong>WebPlus</strong> übernimmt stets die Formatierung aus<br />
Texten, die in einer Textverarbeitung erstellt wurden.<br />
Wenn Sie mit Ihrer Textverarbeitung jedoch Texte<br />
speziell für den Einsatz in <strong>WebPlus</strong> schreiben, sollten<br />
Sie diese als „Nur Text“ speichern und die<br />
Formatierung später in <strong>WebPlus</strong> festlegen.<br />
Tabellen lassen sich nicht importieren.
242 Text<br />
Importieren von Texten aus einer Datei<br />
1. (Optional) Wenn Sie den Text in einen bestehenden<br />
leeren Rahmen einfügen möchten, wählen Sie den<br />
Rahmen zunächst aus. Um den Text in einen Rahmen<br />
einzufügen, in dem bereits Text vorhanden ist, klicken<br />
Sie auf die Position, an der Sie den Text einfügen<br />
möchten, oder wählen den Textbereich aus, der durch<br />
den Dateiinhalt ersetzt werden soll.<br />
2. Klicken Sie im Menü Text > Einfügen auf den Eintrag<br />
Textdatei.<br />
3. Wählen Sie in dem Dialogfeld Öffnen das Dateiformat<br />
der Textdatei aus und dann die gewünschte Textdatei.<br />
4. Um die Formatvorlagen der Textdatei zu übernehmen,<br />
aktivieren Sie die Option Format beibehalten. Wenn Sie<br />
die Formatierung nicht benötigen, entfernen Sie einfach<br />
das Häkchen aus dieser Option. <strong>WebPlus</strong> übernimmt in<br />
beiden Fällen die grundlegenden Zeichenformatierungen<br />
wie kursiv, fett oder unterstrichen sowie auch<br />
Absatzattribute, wie z. B. die Ausrichtung (links,<br />
zentriert, rechts, Blocksatz).<br />
5. Klicken Sie anschließend auf die Schaltfläche Öffnen.<br />
6. Der Text wird nun in das zuvor ausgewählte Textobjekt<br />
oder in einen neuen Textrahmen importiert. Bei<br />
Textrahmen entsteht eventuell ein Textüberlauf. Um<br />
diesen Überlauf zu beseitigen, führen Sie die unter<br />
„Anpassen von Überlauftext“ auf Seite 81 beschriebenen<br />
Schritte aus.
Arbeiten mit künstlerischen Texten<br />
Text 243<br />
Künstlerische Texte sind separate Textobjekte, die Sie direkt auf<br />
der Seite eingeben und beliebig platzieren können. Diese Texte sind<br />
besonders praktisch für Überschriften, Zitate oder Spezialtexte und<br />
lassen sich mit den Standardwerkzeugen für Texte schnell und<br />
einfach formatieren.<br />
Erstellen von künstlerischen Texten<br />
1. Wählen Sie das Objekt aus und klicken Sie in der<br />
Zeichnungsleiste auf das Symbol Künstlerischer Text.<br />
2. Klicken Sie auf einen beliebigen Punkt der Seite, um eine<br />
Einfügemarke für den Text in einer Standardgröße zu<br />
erstellen. Alternativ können Sie auch mit gedrückter<br />
Maustaste die Textgröße wie in dieser Abbildung beliebig<br />
festlegen.<br />
3. Bevor Sie mit der Texteingabe beginnen, sollten Sie über<br />
die Textkontextleiste oder das Menü Text die wichtigsten<br />
Grundeinstellungen wie Schriftart, Formatvorlage usw.<br />
festlegen. Alternativ können Sie diese Optionen auch<br />
über das Kontextmenü festlegen. Klicken Sie hierzu mit<br />
der rechten Maustaste auf die Einfügemarke und dann<br />
auf die gewünschte Option des Untermenüs Textformat.
244 Text<br />
4. Tippen Sie den Text direkt auf der Seite ein, um ein<br />
künstlerisches Textobjekt zu erstellen.<br />
Nach der Erstellung lassen sich künstlerische Textobjekte genau<br />
wie Textrahmen beliebig auswählen, verschieben, kopieren,<br />
vergrößern und verkleinern oder löschen. Sie können sowohl<br />
einfarbige Varianten (Volltonfarben), Farbverlaufs- und Bitmap-<br />
Füllungen als auch Transparenzen für die Formatierung<br />
verwenden.<br />
Vergrößern und Verkleinern von künstlerischen<br />
Textobjekten<br />
• Verschieben Sie die Eckziehpunkte mit gedrückter<br />
Maustaste, um die Objektgröße zu verändern und die<br />
ursprünglichen Proportionen zu übernehmen.<br />
• Um die Objektgröße frei zu verändern, halten Sie die<br />
Umschalttaste gedrückt, während Sie die Ziehpunkte<br />
verschieben.<br />
Bearbeiten von künstlerischen Texten<br />
• Ziehen Sie den Cursor über einen Textbereich, um eine<br />
blaue Auswahl zu erstellen.
Text 245<br />
Alternativ können Sie auch ein Wort per Doppelklick<br />
auswählen.<br />
Sie können jetzt entweder einen neuen Text eingeben<br />
oder die Buchstaben und Absätze mit den<br />
entsprechenden Optionen formatieren, die<br />
Rechtschreibung prüfen, den Text in WritePlus<br />
bearbeiten usw.<br />
Platzieren von Texten auf einem Pfad<br />
„Normale“, geradlinige künstlerische Texte bieten zwar wesentlich<br />
mehr Optionen für die kreative Textgestaltung als einfache<br />
Rahmentexte, die Wirkung dieser Texte lässt sich jedoch noch<br />
steigern, indem Sie die Wörter entlang eines geschwungenen<br />
Pfades verlaufen lassen.<br />
Das resultierende Objekt verfügt dann über alle Eigenschaften<br />
eines künstlerischen Textes und sein Pfad in Form einer<br />
Bézierkurve lässt sich mit dem Zeigerwerkzeug ebenso einfach<br />
bearbeiten wie jede andere gezeichnete Linie. Darüber hinaus<br />
bieten diese Textvariationen noch eine Reihe einzigartiger<br />
Optionen, die in den folgenden Abschnitten näher erläutert<br />
werden.
246 Text<br />
Platzieren von Texten auf einem vordefinierten Kurvenpfad<br />
1. Erstellen Sie einen künstlerischen Text.<br />
2. Wählen Sie den Text aus und klicken Sie in der<br />
Textkontextleiste auf den Pfeil des Symbols Vordefinierte<br />
Textpfade und dann auf die gewünschte Pfadvariante.<br />
Der Text verläuft nun entlang der ausgewählten Pfadlinie.<br />
Hinzufügen von künstlerischen Texten zu einer bestehenden<br />
Linie oder Form<br />
1. Zeichnen Sie eine gerade, kurvenförmige oder<br />
Freihandlinie oder eine Form (siehe auch „Zeichnen und<br />
Bearbeiten von Linien“ und „Zeichnen und Bearbeiten von<br />
Formen“ in der <strong>WebPlus</strong>-Hilfe).<br />
2. Wählen Sie das Objekt aus und klicken Sie in der<br />
Zeichnungsleiste auf das Symbol Künstlerischer Text.<br />
3. Bewegen Sie den Mauszeiger nahe an die Linie. Wenn der<br />
Mauszeiger eine kleine Kurve anzeigt, klicken Sie auf den<br />
Punkt, an dem Sie mit der Texteingabe beginnen möchten.<br />
Ihre Linie wird nun als gestrichelter Pfad mit einer<br />
Einfügemarke am Anfang angezeigt.<br />
4. Tippen Sie den Text an der Einfügemarke ein. Das<br />
Programm wandelt die Linie nun in einen Pfad um und<br />
platziert die einzelnen Wörter genau auf seiner<br />
Verlaufsbahn.
Anpassen bestehender Texte an bestehende Linien oder<br />
Formen<br />
1. Erstellen Sie einen künstlerischen Text.<br />
Text 247<br />
2. Zeichnen Sie eine Freihandlinie, Gerade, Kurve oder<br />
Form.<br />
3. Wählen Sie beide Objekte aus. Klicken Sie im Menü Text<br />
auf Text an Pfad anpassen. Der Text verläuft nun<br />
entlang der ausgewählten Pfadlinie.<br />
Entfernen von Textpfaden<br />
1. Wählen Sie das Textpfadobjekt aus.<br />
2. Klicken Sie in der Textkontextleiste auf den nach<br />
unten zeigenden Pfeil des Pfadsymbols und dann auf die<br />
Option Kein Pfad.<br />
Der Pfad wird permanent gelöscht, und der Text bleibt als<br />
geradliniger künstlerischer Text auf der Seite erhalten.<br />
Bearbeiten von Texten auf einer Seite<br />
Mit dem Zeigerwerkzeug lassen sich Rahmentexte, Tabellentexte<br />
und künstlerische Texte direkt auswählen und bearbeiten. Auf den<br />
einzelnen Seiten können Sie die Attribute für die Zeichen und<br />
Absätze von Texten verändern, Tabstopps und Einzüge einstellen,<br />
Formatvorlagen festlegen und neue Texte eingeben. Alle<br />
Seitentexte lassen sich darüber hinaus mit der Funktion „Suchen<br />
und Ersetzen“ (siehe Seite 262) bearbeiten. Wenn Sie eine längere<br />
Story bearbeiten oder noch einige zusätzliche Optionen einstellen<br />
möchten, wechseln Sie einfach zu WritePlus (Text > Story<br />
bearbeiten...).
248 Text<br />
Auswählen und Eingeben von Texten<br />
Die Auswahl von Rahmentexten, künstlerischen Texten und<br />
Tabellentext funktioniert wie bei den meisten modernen<br />
Textverarbeitungen. Um die Bearbeitung zu vereinfachen, wird ein<br />
ausgewählter Bereich immer mit einer halbtransparenten, blauen<br />
Schattierung gekennzeichnet.<br />
Um ein Wort, einen Absatz oder den gesamten Text auszuwählen,<br />
führen Sie einen Doppel-, Dreifach- oder Vierfachklick aus. Wenn<br />
Sie mehrere nicht aufeinander folgende Wörter markieren<br />
möchten, halten Sie die Strg-Taste gedrückt und ziehen den<br />
Mauszeiger mit gedrückter Maustaste über die gewünschten<br />
Begriffe. Wenn Sie einen zusammenhängenden Textbereich<br />
auswählen müssen, halten Sie die Umschalttaste gedrückt und<br />
markieren den Text dann durch Klicken und Ziehen.<br />
Bearbeiten von Texten auf einer Seite<br />
1. Aktivieren Sie das Zeigerwerkzeug und wählen Sie den<br />
gewünschten Text durch Klicken oder Klicken und<br />
Ziehen aus. Das Programm platziert nun eine<br />
Einfügemarke an der Position, die Sie angeklickt haben<br />
(siehe unten).<br />
ODER<br />
Wählen Sie ein Wort, einen Absatz oder einen<br />
Textbereich aus.
Text 249<br />
2. Tippen Sie den neuen Text ein. Der Text wird nun<br />
entweder an der Einfügemarke platziert oder ersetzt den<br />
zuvor markierten Text.<br />
Starten neuer Absätze<br />
• Drücken Sie die Eingabetaste.<br />
Starten einer neuen Zeile (Einfügen eines manuellen<br />
Zeilenwechsels)<br />
• Drücken Sie die Tastenkombination Umschalttaste +<br />
Eingabetaste.<br />
Umschalten zwischen den Modi „Einfügen“ und<br />
„Überschreiben“<br />
• Drücken Sie die Taste Einfg.<br />
Kopieren, Einfügen und Verschieben von Texten<br />
Sie können Texte wahlweise mit den Standardbefehlen kopieren<br />
und einfügen oder auch die Texte durch Klicken und Ziehen<br />
verändern.<br />
Wenn Sie keine Einfügemarke platzieren, wird der Text<br />
direkt in einen neuen Textrahmen eingesetzt.
250 Text<br />
Einstellen von Texteigenschaften<br />
<strong>WebPlus</strong> bietet Ihnen für die Arbeit mit Rahmentexten,<br />
Tabellentexten und künstlerischen Texten eine breite Palette an<br />
Optionen und Werkzeugen, mit denen sich die Zeichen und<br />
Absätze Ihrer Texte komfortabel bearbeiten lassen.<br />
Einstellen der grundlegenden Textformatierung<br />
1. Wählen Sie den gewünschten Text aus.<br />
2. Stellen Sie in der Textkontextleiste Formatvorlage,<br />
Schriftart, Schriftgröße, Schriftschnitt, Attribute<br />
und/oder die Ausrichtung und Stufe für den Text ein.<br />
Entfernen lokaler Formatierungen und Wiederherstellen der<br />
Standardeigenschaften<br />
1. Wählen Sie einen Textbereich mit lokaler Formatierung<br />
aus.<br />
2. Drücken Sie auf Ihrer Tastatur die Kombination Strg +<br />
Leertaste.
Text 251<br />
Arbeiten mit verschiedenen Schriftoptionen<br />
Eines der wirkungsvollsten Stilmittel bei der Arbeit mit Websites ist die<br />
Auswahl der Schriftart für Ihre Rahmentexte, künstlerischen Texte und<br />
Tabellentexte. Durch die Auswahl bestimmter Schriftarten lässt sich die<br />
Aussage der Texte häufig noch verstärken, und Sie können Ihren Lesern<br />
gezielt unterschiedliche Eindrücke vermitteln (z. B. mit sehr klaren oder<br />
extrem verspielten Schriftarten).<br />
Das Zuweisen von Schriftarten ist in <strong>WebPlus</strong> denkbar einfach. Wählen<br />
Sie einfach die gewünschte Schriftart in der Studio-Registerkarte<br />
Schriften, der Textkontextleiste oder über den Menübefehl Text ><br />
Zeichen aus. Alternativ klicken Sie mit der rechten Maustaste auf einen<br />
Text und dann in dem Kontextmenü auf Textformat > Zeichen.<br />
Die Studio-Registerkarte „Schriften“ ist standardmäßig<br />
ausgeblendet. Sie können sie jedoch jederzeit über die Option<br />
Registerkarte „Schriften“ anzeigen der Studioleiste einblenden.<br />
Die Studio-Registerkarte „Schriften“ wird dann standardmäßig am<br />
linken Rand des Arbeitsbereiches geöffnet.<br />
Websichere Schriftarten sind speziell ausgewählte Schriften. Mit diesen<br />
Schriften können Sie relativ sicher sein, dass die von Ihnen während des<br />
Website-Designs festgelegte Schriftdarstellung auch genau so in den<br />
Browsern Ihrer Website-Besucher angezeigt wird.<br />
Im Allgemeinen sollten Sie sich bei der Textformatierung auf die<br />
websicheren Schriftarten beschränken, wenn Sie nicht absolut sicher<br />
sind, ob eine von Ihnen verwendete Schriftart auch auf den Computern<br />
Ihrer bevorzugten Zielgruppe installiert ist.
252 Text<br />
Zuweisen einer Schriftart<br />
• Wählen Sie den gewünschten Text aus und klicken Sie in<br />
der Registerkarte „Schriften“ auf die gewünschte Schrift,<br />
um den Text entsprechend zu formatieren.<br />
Arbeiten mit Textformatvorlagen<br />
In <strong>WebPlus</strong> lassen sich Texte flexibel mit Textformatvorlagen<br />
(vordefiniert oder selbst erstellt) formatieren. Sie wählen diese<br />
Vorlagen einfach über ihre Namen aus und können sie dann auf<br />
Rahmentexte, Tabellentexte und künstlerische Texte anwenden.<br />
Eine Textformatvorlage ist eine Zusammenstellung bestimmter<br />
Zeichen- und/oder Absatzattribute, die als Gruppe gespeichert<br />
wurden. Wenn Sie mit dieser Formatvorlage einen Text<br />
formatieren, werden alle Attribute der Gruppe in einem<br />
Arbeitsschritt für die Zeichen und Absätze im Text eingestellt. Sie<br />
können z. B. verschiedene Absatzformatierungen für<br />
Layoutelemente wie „Überschrift“, „Textkörper“ und „Zitat“ oder<br />
Zeichenformatierungen für bestimmte Aussagen wie<br />
„Hervorhebung“, „Code“, „Querverweis“ definieren.<br />
Formatvorlagen lassen sich sowohl für Zeichen als auch für<br />
Absätze mit der Textkontextleiste oder der Studio-Registerkarte<br />
„Textformatvorlagen“ festlegen. Mit der Textformatvorlagen-<br />
Palette können Sie alle Zeichen- und Absatzformatvorlagen<br />
beliebig bearbeiten.<br />
Mit der Studio-Registerkarte „Textformatvorlagen“ können Sie<br />
Vorlagen von Grund auf neu definieren sowie aus bestehenden<br />
Texteigenschaften erstellen und sogar in einem Schritt eine<br />
Textvorlage in der gesamten Website gegen eine andere<br />
austauschen. Jede Textformatvorlage lässt sich per Vorschau für<br />
den aktuell auf der Seite ausgewählten Absatz prüfen. Nähere<br />
Informationen hierzu finden Sie in der Programmhilfe.
Text 253<br />
Vorlagen für Absatz- und Zeichenformatierungen<br />
Eine Absatzformatvorlage ist ein vollständiger<br />
„Konstruktionsplan“ für den Aufbau und die Darstellung eines<br />
ganzen Absatzes und enthält alle Formatierungsattribute für die<br />
Schriftart und den Absatzkörper. Jedem Absatz wird in <strong>WebPlus</strong><br />
automatisch eine Absatzformatvorlage zugewiesen.<br />
Eine Zeichenformatvorlage enthält nur Schrifteigenschaften<br />
(Name, Größe, Fett, Kursiv usw.) und wird nur auf Zeichen<br />
angewendet d. h., auf ausgewählte Buchstaben oder Wörter und<br />
nicht auf einen ganzen Absatz.<br />
Arbeiten mit benannten Formatvorlagen<br />
Die für den aktuell ausgewählten Text verwendete Formatvorlage<br />
wird automatisch in der Studio-Registerkarte<br />
„Textformatvorlagen“ oder dem Dropdownfeld Formatvorlagen<br />
der Textkontextleiste aufgeführt. In diesem Feld zeigt das<br />
Programm entweder eine lokal verwendete Zeichenformatvorlage<br />
an oder die aktuell verwendete Absatzformatvorlage.<br />
Anwenden benannter Formatvorlagen<br />
1. Um eine Absatzformatvorlage anzuwenden, klicken Sie<br />
mit dem Zeigerwerkzeug in den gewünschten Absatz.<br />
Möchten Sie eine Zeichenformatvorlage einsetzen,<br />
wählen Sie zunächst mit gedrückter Maustaste den zu<br />
formatierenden Textbereich aus.<br />
2. Öffnen Sie die Studio-Registerkarte Textformatvorlagen<br />
und wählen Sie eine Vorlage in der Liste aus.<br />
ODER<br />
Klicken Sie in der Textkontextleiste auf den Pfeil des<br />
Dropdownfeldes „Formatvorlagen“ und wählen Sie eine<br />
Vorlage aus.
254 Text<br />
In der Studio-Registerkarte „Textformatvorlagen“ wird<br />
automatisch die Absatz- oder Zeichenformatvorlage angezeigt, mit<br />
der Sie den ausgewählten Text formatiert haben.<br />
Da Textbereiche sowohl mit Absatz- als auch mit<br />
Zeichenformatierungen formatiert werden können, zeigt das Feld<br />
Aktuelles Format der Registerkarte alle Formatierungsoptionen<br />
für den aktuellen Text an.<br />
Bearbeiten bestehender Formatvorlagen<br />
1. Gehen Sie in der Studio-Registerkarte<br />
„Textformatvorlagen“ wie folgt vor:<br />
• Klicken Sie mit der rechten Maustaste auf den<br />
Namen einer Zeichen- oder Absatzformatvorlage,<br />
die Sie ändern möchten, und in ihrem Kontextmenü<br />
auf bearbeiten.<br />
ODER<br />
• Wählen Sie in der Studio-Registerkarte<br />
Textformatvorlagen eine Vorlage aus und klicken<br />
Sie auf die Schaltfläche Palette. Klicken Sie in dem<br />
nun geöffneten Dialogfeld auf die Schaltfläche<br />
Ändern.<br />
2. Ändern Sie in dem Dialogfeld „Textformatierung“ den<br />
Namen der Formatvorlage, die als Basis verwendete<br />
Vorlage sowie alle Attribute für Zeichen, Absätze und<br />
Hyperlinks, Tabstopps, Aufzählungszeichen und<br />
Initialen, die Sie für die aktuelle Formatvorlage<br />
modifizieren möchten.<br />
3. Klicken Sie auf OK, um Ihre Änderungen zu<br />
übernehmen, oder auf Abbrechen, um die neuen<br />
Einstellungen wieder zu verwerfen.
Text 255<br />
4. Klicken Sie auf Anwenden, um den Text zu aktualisieren<br />
oder auf Schließen, um lediglich die Formatvorlage zu<br />
speichern.<br />
Alternativ klicken Sie im Menü Text auf Textformatvorlagen-<br />
Palette, um die Formatvorlagen und Standardeinstellungen für<br />
Text (siehe <strong>WebPlus</strong>-Hilfe) zu ändern.<br />
Löschen von Textformatvorlagen<br />
1. Klicken Sie mit der rechten Maustaste auf eine<br />
Textformatvorlage und in dem Kontextmenü auf löschen.<br />
2. Klicken Sie in dem nun geöffneten Dialogfeld auf<br />
Entfernen. Wenn Sie mehrere Formatvorlagen löschen<br />
möchten, aktivieren Sie die entsprechenden<br />
Kontrollkästchen neben den Vorlagennamen per<br />
Mausklick mit einem Häkchen. Über die entsprechenden<br />
Schaltflächen können Sie auch alle Formatvorlagen oder<br />
alle unbenutzten Formatvorlagen markieren und<br />
anschließend entfernen.<br />
Kontrollieren Sie die Vorlagenliste genau, bevor Sie<br />
eine Vorlage löschen. Wenn Sie eine Vorlage für das<br />
Löschen auswählen, werden alle Vorlagen, die auf<br />
dieser Vorlage basieren, ebenfalls für den<br />
Löschvorgang markiert.<br />
Ändern häufig verwendeter Formatvorlagen<br />
Für einzelne Textbereiche lassen sich die Zeichen- oder<br />
Absatzformatvorlagen sehr unkompliziert ändern. In <strong>WebPlus</strong><br />
können Sie außerdem eine Formatvorlage schnell und einfach<br />
durch eine andere ersetzen, indem Sie die entsprechenden<br />
Textstellen der alten Vorlage markieren und dann mit der<br />
Vorschau eine Alternativvorlage auswählen. Hierdurch wird die
256 Text<br />
Formatvorlage in allen Textstellen der Absätze und Storys<br />
automatisch ersetzt.<br />
Auswählen und Ändern von Formatvorlagen in der<br />
gesamten Website<br />
1. Klicken Sie in der Registerkarte Textformatvorlagen mit<br />
der rechten Maustaste auf eine angezeigte Vorlage.<br />
2. Wenn die Formatvorlage bereits in der Website<br />
verwendet wird, enthält das Kontextmenü einen Eintrag<br />
„Alle n Instanz(en) auswählen“, wobei n der Anzahl der<br />
Texte entspricht, die mit der Vorlage formatiert sind.<br />
Wird die Formatvorlage nirgendwo verwendet, ist die<br />
Option grau dargestellt und somit nicht verfügbar.<br />
Klicken Sie auf die Option, um alle mit der ausgewählten<br />
Vorlage formatierten Texte auszuwählen.<br />
3. Bewegen Sie den Mauszeiger über die anderen Vorlagen<br />
der Liste, um nach einem Ersatz zu suchen. Klicken Sie<br />
anschließend auf die gewünschte Formatvorlage, um den<br />
ausgewählten Text entsprechend zu formatieren.<br />
Erstellen von Nummerierungen und<br />
Aufzählungen<br />
Für jeden Textrahmen können Sie Listen und Absätze als<br />
Nummerierungen und Aufzählungen formatieren. Aufzählungen<br />
sind besonders hilfreich, wenn Sie einige Punkte ohne eine feste<br />
Sortierung auflisten möchten. Die Nummerierungen (mit Ziffern<br />
oder Buchstaben) eignen sich besonders gut für die Erläuterung<br />
von Arbeitsschritten, die in einer bestimmten Reihenfolge<br />
durchgeführt werden müssen. Mit <strong>WebPlus</strong> können Sie die<br />
Listenformatierung sowohl für normalen Text (als lokale
Formatierung) verwenden als auch für Textformatvorlagen<br />
einsetzen.<br />
Erstellen einer Aufzählung oder nummerierten Liste<br />
Text 257<br />
1. Wählen Sie einen oder mehrere Absätze aus.<br />
ODER<br />
Setzen Sie per Mausklick eine Einfügemarke in einen<br />
Absatztext.<br />
2. Klicken Sie in der Textkontextleiste auf<br />
Aufzählung oder Nummerierung.<br />
Wenn Sie anschließend in dem Absatz einen Zeilenumbruch<br />
einfügen, beginnt die neue Zeile automatisch mit dem<br />
entsprechenden Symbol oder der Nummer. Um die Aufzählung<br />
oder Nummerierung zu beenden, geben Sie einfach zwei<br />
aufeinander folgende Zeilenumbrüche ein, indem Sie zweimal die<br />
Eingabetaste drücken. Das Programm kehrt nun wieder zu der<br />
alten Absatzformatierung zurück.<br />
Aktualisieren einer Aufzählung oder nummerierten Liste<br />
1. Wählen Sie einen oder mehrere Absätze aus.<br />
ODER<br />
Setzen Sie per Mausklick eine Einfügemarke in einen<br />
Absatztext.<br />
2. Klicken Sie auf den Menüpunkt Text > Nummerierung<br />
& Aufzählungszeichen oder in dem per Rechtsklick<br />
geöffneten Kontextmenü auf Textformat ><br />
Nummerierung & Aufzählungszeichen.<br />
3. Wählen Sie ein Aufzählungszeichen oder eine<br />
Nummernformatierung aus der angezeigten Palette aus.<br />
Sie können hier ebenfalls die Einzugswerte für den Text,<br />
die Farbe und andere Eigenschaften festlegen.
258 Text<br />
4. Um die Nummerierung an der aktuellen Position des<br />
Cursors neu zu beginnen, aktivieren Sie die Option<br />
Nummerierung neu starten.<br />
5. Klicken Sie auf OK, um die Listenformatierung zu<br />
übernehmen.<br />
Entfernen der Formatierung für eine Aufzählung oder<br />
Nummerierung<br />
1. Wählen Sie den Absatz mit Listenformatierung aus.<br />
2. Klicken Sie auf das Symbol oder der<br />
Textkontextleiste.<br />
Mit <strong>WebPlus</strong> können Sie Nummerierungen und Aufzählungen<br />
ebenfalls für Textformatvorlagen einstellen. Nähere Informationen<br />
hierzu finden Sie in der <strong>WebPlus</strong>-Hilfe.<br />
Einfügen von Benutzerdetails<br />
Mit dem Dialogfeld Benutzerdetails können Sie schnell und<br />
einfach Informationen eingeben, die Sie sehr oft verwenden oder<br />
die sich häufig ändern.<br />
Alle Felder für diese Informationen müssen in Ihren Seiten bereits<br />
vorhanden sein wenn Sie die Aktualisierungsfunktion nutzen.<br />
Eventuell müssen Sie einzelne Felder von Hand einfügen (Text ><br />
Einfügen > Informationen > Benutzerdetails). Beachten Sie, dass<br />
viele Designvorlagen bereits Felder für Benutzerdetails verwenden<br />
(z. B. in den Kontaktseiten).<br />
Mit dem Dialogfeld „Benutzerdetails“ können Sie ebenfalls<br />
Website-spezifische und globale Variablen definieren, die nur in<br />
der aktuellen Website bzw. in allen Websites verwendet werden<br />
sollen. Nähere Informationen hierzu finden Sie unter dem Thema<br />
„Einfügen von Variablen“ auf Seite 260.
Hinzufügen und Bearbeiten von Benutzerdetails<br />
Text 259<br />
1. Klicken Sie in der Standardkontextleiste (angezeigt,<br />
wenn kein Objekt ausgewählt ist) auf Benutzerdetails.<br />
2. Möchten Sie geschäftliche Benutzerinformationen<br />
festlegen, tragen Sie diese in die Registerkarte<br />
Geschäftliche Sets ein. Möchten Sie nur ein Set von<br />
Informationen verwenden, stellen Sie in der<br />
Dropdownliste Set auswählen die Option „Standard“<br />
ein. Mit dieser Dropdownliste können Sie alle selbst<br />
angelegten Sets von geschäftlichen Benutzerdetails<br />
auswählen. Nähere Informationen hierzu finden Sie<br />
unter dem Abschnitt „Festlegen geschäftlicher Sets“ in<br />
der <strong>WebPlus</strong>-Hilfe.<br />
3. Möchten Sie Details für eine private Homepage festlegen,<br />
klicken Sie auf die Registerkarte Privat. Diese Felder<br />
unterscheiden sich von denen der Registerkarte<br />
„Geschäftliche Sets“ und werden daher auch getrennt<br />
behandelt und gespeichert.<br />
Enthält Ihre Website einen Kalender, wird in diesem<br />
Dialogfeld auch die Registerkarte Kalender angezeigt.<br />
Hier können Sie das Kalenderjahr auswählen sowie<br />
private Termine und öffentliche Feiertage einfügen.<br />
Einfügen und Aktualisieren von Benutzerdetails<br />
Sie können jederzeit ein oder mehrere Felder mit Benutzerdetails<br />
in Ihre Website einfügen.<br />
Einfügen von Feldern mit Benutzerdetails<br />
1. Aktivieren Sie das Zeigerwerkzeug und klicken Sie auf<br />
die Textposition, an der Sie die Einfügemarke platzieren<br />
möchten.
260 Text<br />
2. Klicken Sie im Menü Text > Einfügen auf den Eintrag<br />
Informationen und in dem nun geöffneten Untermenü<br />
auf Benutzerdetails.<br />
3. Wählen Sie eines der Benutzerdetails aus und geben Sie<br />
über Präfix oder Suffix die zusätzlichen Informationen<br />
ein, die Sie mit den Benutzerdetails anzeigen möchten,<br />
wie z. B. Name:.<br />
4. Klicken Sie auf die Schaltfläche OK.<br />
In einer bestehenden Website lassen sich die Felder nach der<br />
Bearbeitung mit nur einem Mausklick aktualisieren.<br />
Aktualisieren der Felder<br />
• Klicken Sie auf den Menüpunkt Extras ><br />
Benutzerdetails festlegen... und geben Sie neue<br />
Informationen in das Dialogfeld „Benutzerdetails“ ein.<br />
• Klicken Sie auf die Schaltfläche Aktualisieren, um alle<br />
veränderten Felder in Ihrer Website auf den neuesten<br />
Stand zu bringen. Diese Felder bleiben mit den<br />
Benutzerdetails verknüpft, bis Sie sie löschen oder in<br />
„statischen“ Text umwandeln (siehe <strong>WebPlus</strong>-Hilfe)<br />
Einfügen von Variablen<br />
Wenn Sie häufig den gleichen Text an verschiedenen Stellen Ihrer<br />
Website verwenden, und diesen gegen einen anderen Text<br />
austauschen möchten, können Sie den Text als Variablen<br />
definieren.<br />
Die Arbeit mit Variablen funktioniert im Grunde wie die mit den<br />
Benutzerdetails (siehe Seite 258). Sie lassen sich wie die Felder für<br />
Benutzerdetails einfügen und dann auch mit dem Dialogfeld<br />
„Benutzerdetails“ aktualisieren.
Einfügen, Bearbeiten und Löschen von Variablen<br />
Text 261<br />
1. Klicken Sie in der Standardkontextleiste (angezeigt,<br />
wenn kein Objekt ausgewählt ist) auf Benutzerdetails.<br />
2. Wechseln Sie zu der Registerkarte Global oder Website,<br />
um die Variablen für alle Websites bzw. nur für die<br />
aktuell geöffnete Website festzulegen.<br />
3. Klicken Sie in einer der Registerkarten auf die<br />
Schaltfläche Hinzufügen.<br />
4. Überschreiben Sie in der Variablenliste den<br />
standardmäßig festgelegten Namen der Spalte Variable<br />
mit einer einzigartigen Bezeichnung, an der Sie die<br />
Variable leicht identifizieren können.<br />
5. Klicken Sie in die nächste Spalte und geben Sie den Wert<br />
für die Variable ein (d. h. den Text, der auf der Seite<br />
angezeigt werden soll).<br />
6. Tragen Sie auf diese Weise alle gewünschten Variablen in<br />
die Registerkarte „Website“ oder „Global“ ein.<br />
7. Klicken Sie auf Aktualisieren.<br />
Nachdem Sie die gewünschten Variablen definiert haben, können<br />
Sie die Variablen anstelle einfacher Texte als Felder auf Ihren<br />
Seiten platzieren<br />
Einfügen von Variablenfeldern<br />
1. Klicken Sie in einen Text, um eine Einfügemarke zu<br />
platzieren, oder wählen Sie einen Textteil aus.
262 Text<br />
2. Klicken Sie im Menü Text auf den Eintrag Einfügen ><br />
Informationen und in dem nun geöffneten Untermenü<br />
auf Variable.<br />
3. Wählen Sie in dem nun geöffneten Dialogfeld den<br />
Variablentyp (Global oder Website) der gewünschten<br />
Variable aus den Benutzerdetails aus.<br />
4. Klicken Sie auf den Eintrag einer Variable und legen Sie<br />
optional einen Text als Präfix oder Suffix fest, der<br />
zusammen mit der Variablen angezeigt werden soll.<br />
5. Klicken Sie auf die Schaltfläche OK.<br />
Wenn Sie eine Variable ändern möchten, müssen Sie lediglich den<br />
Wert der Variable bearbeiten und dann aktualisieren.<br />
Aktualisieren der Variablen<br />
1. Klicken Sie in der Standardkontextleiste (angezeigt,<br />
wenn kein Objekt ausgewählt ist) auf Benutzerdetails.<br />
2. Bearbeiten Sie den Wert für eine bestehende Variable.<br />
3. Klicken Sie auf Aktualisieren.<br />
Suchen und Ersetzen<br />
Über Text > Suchen und Ersetzen können Sie Ihre Websites nicht<br />
nur nach bestimmten Wörtern oder Wortteilen durchsuchen,<br />
sondern auch eine Reihe von Zeichen- und Absatzattributen als<br />
Suchparameter verwenden, wie z. B. Schriftarten, Formatierungen,<br />
Ausrichtung, Aufzählungszeichen und Nummerierungen, fehlende<br />
Schriftarten, hängende Initialen, integrierte Grafiken und vieles<br />
mehr! Nähere Informationen hierzu finden Sie in der <strong>WebPlus</strong>-Hilfe.
13<br />
Quelldateien für<br />
kreative Designs
264 Quelldateien für kreative Designs
Arbeiten mit Quelldateien<br />
Quelldateien für kreative Designs 265<br />
Quelldatei ist der Oberbegriff für alle Objekte oder Seitenelemente,<br />
die Sie auf Ihren Dokumentseiten platzieren können, um deren<br />
Layout, Wirkung und Funktionalität genau an Ihre Vorstellungen<br />
anzupassen. Die Quelldateien reichen von Grafiken, Bildern,<br />
Bildrahmen, Schaltflächen, Slidern und Panels sowie<br />
Hintergründen zu komplexen Seiteninhalten und auch ganzen<br />
Seiten.<br />
Für die Arbeit mit den verschiedenen Quelldateien in <strong>WebPlus</strong><br />
nutzen Sie die Studio-Registerkarte Quelldateien mit dem<br />
Quelldatei-Browser und dem Quelldatei-Manager (siehe Seite 268<br />
und <strong>WebPlus</strong>-Hilfe). Mit dem Browser können Sie gezielt nach<br />
einzelnen Quelldateien suchen, und mit dem Manager können Sie<br />
Quelldatei-Pakete selbst zusammenstellen und verwalten.<br />
Die Designvorlagen der Themenlayouts enthalten<br />
bereits einige Quelldateien, die genau auf das jeweilige<br />
Design der Website abgestimmt sind. Wenn Sie Ihre<br />
Arbeit mit einem Themenlayout beginnen, wird die<br />
Studio-Registerkarte Quelldateien automatisch mit<br />
diesen Objekten gefüllt!
266 Quelldateien für kreative Designs<br />
Arbeiten mit der Registerkarte „Quelldateien“<br />
Die Studio-Registerkarte<br />
Quelldateien ist wie eine<br />
umfangreiche<br />
Ressourcenbibliothek, aus<br />
der Sie einfach die<br />
verschiedenen<br />
Layoutelemente für Ihre<br />
Webseiten „ausleihen“.<br />
Die Quelldateien lassen sich<br />
in folgende Kategorien<br />
einteilen.<br />
• Eigene Designs: Hier werden die Quelldateien<br />
gespeichert, die Sie als Objekte von der Seite in die<br />
Registerkarte gezogen haben.<br />
• Grafiken: Hier finden Sie die professionell entworfenen<br />
Cliparts aus Quelldatei-Paketen.<br />
• Bilder: Hier werden Bilder von Ihrer Festplatte<br />
gespeichert sowie Bilder aus einem Quelldatei-Paket<br />
(nicht alle diese Pakete enthalten auch Bilder).<br />
• Schaltflächen: Hier finden Sie eine breite Palette<br />
vordefinierter Schaltflächen aus den Quelldatei-Paketen.<br />
• Slider/Panels: Hier werden die Slider (jeder Slider<br />
enthält ein animiertes Set an Panels) sowie einzelne<br />
Panels aus den Quelldatei-Paketen gespeichert.
Quelldateien für kreative Designs 267<br />
• Bildrahmen: Hier finden Sie die Bildrahmen aus<br />
Quelldatei-Paketen.<br />
• Seiteninhalt: Hier finden Sie Seiteninhalte (die aus<br />
unterschiedlichen Seitenobjekten zusammengesetzt sind)<br />
aus den Quelldatei-Paketen. Zu dieser Kategorie gehören<br />
Navigationsleisten, Gruppen aus Textrahmen, Formen<br />
und Spaltenhintergründe.<br />
• Hintergründe: Hier sind die Hintergründe aus den<br />
Quelldatei-Paketen gespeichert.<br />
• Seiten: Hier finden Sie komplette Seitenlayouts aus den<br />
Quelldatei-Paketen.<br />
Mit dieser Registerkarte können Sie auch selbst Designs speichern -<br />
entweder nur für die aktuelle Website oder auch als globale<br />
Quelldateien, sodass sie auch für andere Website-Projekte<br />
verfügbar sind. Hierzu stehen Ihnen die folgenden Möglichkeiten<br />
zur Verfügung:<br />
• Speichern Ihrer eigenen Designs in der Kategorie „Eigene<br />
Designs“, sodass sie global verfügbar sind.<br />
• Speichern Ihrer eigenen Designs in einer anderen<br />
Kategorie der Registerkarte, sodass sie nur für die aktuell<br />
verwendete Website verfügbar sind.<br />
• Erstellen eigener Bildrahmen aus gezeichneten Objekten.<br />
• Entwerfen eigener Seitenhintergründe aus Bildern oder<br />
gefüllten Seitenobjekten.<br />
• Entwerfen eigener Seiteninhalte (kombiniert aus<br />
verschiedenen Quelldateien).
268 Quelldateien für kreative Designs<br />
Die zu Beginn noch leere Registerkarte lässt sich schnell und einfach<br />
über den Quelldatei-Browser mit Layoutelementen Ihrer Wahl füllen.<br />
Der Quelldatei-Browser<br />
Mit dem Quelldatei-Browser können Sie die gewünschten Elemente<br />
gezielt nach Quelldatei-Kategorien und Quelldatei-Paketen<br />
(Paketdateien) sowie auch nach Markern (Tags) suchen. Wählen Sie<br />
einfach in der entsprechenden Anzeige die Elemente aus, die Sie in die<br />
Studio-Registerkarte Quelldateien aufnehmen möchten. Nähere<br />
Informationen hierzu finden Sie unter dem Themenabschnitt<br />
„Arbeiten mit dem Quelldatei-Browser“.<br />
Der Quelldatei-Manager<br />
Mit dem Quelldatei-Manager können Sie eigene Quelldatei-Pakete<br />
zusammenstellen. Kombinieren Sie hierzu einfach Elemente aus<br />
anderen Quelldatei-Paketen und/oder importieren Sie Bilder, Grafiken<br />
oder Hintergründe. Sie können die Quelldateien mit Markern versehen<br />
und dann Ihr eigenes Quelldatei-Paket speichern oder exportieren.<br />
Nähere Informationen hierzu finden Sie in der <strong>WebPlus</strong>-Hilfe.<br />
Arbeiten mit dem Quelldatei-Browser<br />
Der Quelldatei-Browser bietet eine breite Palette professionell<br />
entworfener Designs, die Sie direkt für Ihre Website einsetzen können.<br />
Diese Designs sind in den kategorisierten Quelldatei-Paketen (den so<br />
genannten „Asset Packs“) gespeichert, die zusammen mit <strong>WebPlus</strong><br />
installiert wurden.<br />
Sie können diese Elemente bequem durchsuchen, bevor Sie die<br />
Quelldateien in Ihren Arbeitsbereich einfügen - wahlweise nach<br />
Kategorie oder nach Paketdatei.<br />
Sie können mit den Suchoptionen oben rechts in dem Dialogfeld<br />
ebenfalls Ihre Suche eingrenzen oder nach einem ganz bestimmten<br />
Element in den Paketdateien suchen.
Quelldateien für kreative Designs 269<br />
Durchsuchen von Quelldateien nach Kategorie<br />
1. Klicken Sie in der Studio-Registerkarte<br />
Quelldateien auf Durchsuchen.<br />
2. Wählen Sie in dem Quelldatei-Browser eine Kategorie<br />
in dem Abschnitt Kategorien aus. Die installierten<br />
Paketdateien werden nun in dem Hauptfeld angezeigt (z.<br />
B. für „Aktiv“).<br />
3. Blättern Sie einfach durch die Liste der Pakete, um die<br />
Elemente in jedem Paket zu betrachten.<br />
Durchsuchen von Quelldateien nach Paketdatei<br />
1. Klicken Sie in der Studio-Registerkarte<br />
Quelldateien auf Durchsuchen.<br />
2. Wählen Sie auf der linken Seite des Quelldatei-Browsers<br />
unter Paketdateien eine Kategorie für Paketdateien aus<br />
(z. B. Hintergründe) oder den Namen einer Paketdatei.<br />
Um die Namen der Paketdateien einzublenden, müssen<br />
Sie eventuell neben dem Kategorienamen auf das Symbol<br />
klicken. Die Quelldatei-Pakete werden nun in dem<br />
Hauptfeld angezeigt.<br />
3. Blättern Sie einfach durch die Liste, um die Elemente in<br />
jedem Paket zu betrachten. Die Anzeige der Pakete lässt<br />
sich beliebig erweitern und reduzieren, sodass Sie stets<br />
den Überblick über die Elemente behalten.<br />
4. (Optional) Um die Suche einzugrenzen, filtern Sie die<br />
Anzeige durch Eingabe eines Quelldatei-Namens in das<br />
Feld „Suchen“ in der rechten oberen Ecke des<br />
Hauptfeldes.
270 Quelldateien für kreative Designs<br />
Suchen nach Quelldateien<br />
Die Suchfunktion filtert die Quelldateien nach vordefinierten und<br />
selbst angelegten Markern, die für alle im Quelldatei-Browser<br />
angezeigten Quelldatei-Pakete festgelegt sind.<br />
Anwenden von Suchfiltern<br />
• Für eine einfache Suche geben Sie einfach das<br />
gewünschte Wort oder den gewünschten Buchstaben in<br />
das Textfeld Suchen oben rechts in dem Dialogfeld ein.<br />
Diese Methode ist ideal für alle Marker, Sie selbst<br />
angelegt haben.<br />
Filtern von Quelldateien<br />
Durch die Filterung können Sie festlegen, wie viele Quelldateien<br />
auf Ihrem Monitor angezeigt werden.<br />
• Um nach einer Kategorie und/oder Paketdatei zu<br />
filtern, wählen Sie eine Kategorie oder Paketdatei aus.<br />
Möchten Sie mehrere dieser Kriterien vorgeben, klicken<br />
Sie mit gedrückter Strg-Taste auf ihre Namen. Sie<br />
können ebenfalls nach einer Kombination aus Kategorie<br />
und Paketdateien suchen. Wählen Sie zum Beispiel die<br />
Kategorie „Schaltflächen“ und dann ein Themenlayout<br />
aus, werden nur die Schaltflächen aus diesem<br />
Themenlayout angezeigt.<br />
• Für die Filterung nach SmartMarkern wählen Sie einen<br />
Marker unter SmartMarker aus (blättern Sie einfach<br />
durch das linke Feld). Mit den SmartMarkern können Sie<br />
die Quelldateien nach bestimmten Themen in einer<br />
hierarchisch und alphabetisch geordneten Struktur<br />
auflisten. Wählen Sie z. B. den Marker „Tiere & Natur“<br />
aus, werden alle Quelldateien aufgelistet, denen dieser<br />
Marker zugewiesen ist. Möchten Sie z. B. nur Elemente
Quelldateien für kreative Designs 271<br />
mit Tieren suchen, wählen Sie den Marker „Tier“ dieser<br />
Markerkategorie.<br />
• Um nach einem bestimmten Marker zu filtern, wählen<br />
Sie dem Markernamen in der Liste Marker des<br />
Quelldatei-Browsers aus. Diese Liste finden sie unter der<br />
Liste „SmartMarker“. Um mehrere Marker auszuwählen,<br />
klicken Sie mit gedrückter Strg-Taste auf ihre Namen.<br />
Einfügen von Quelldateien in die Registerkarte<br />
„Quelldateien“<br />
Einfügen einer bestimmten Quelldatei<br />
• Wählen Sie die Kategorie oder die Paketdatei in dem<br />
Quelldatei-Browser aus und klicken Sie einfach auf die<br />
Quelldatei. Die Miniaturansicht wird nun mit einem<br />
Häkchen markiert.<br />
Einfügen aller Quelldateien<br />
• Klicken Sie in der rechten oberen Ecke der<br />
Miniaturgalerie des Quelldatei-Pakets auf Alles<br />
hinzufügen. Alle Miniaturen werden nun mit Häkchen<br />
markiert.<br />
Nachdem Sie mit einer dieser Methoden die gewünschten<br />
Elemente ausgewählt haben, sind die Quelldateien automatisch in<br />
der Studio-Registerkarte Quelldateien verfügbar, sobald Sie den<br />
Quelldatei-Browser schließen.
272 Quelldateien für kreative Designs<br />
Alle in der Studio-Registerkarte Quelldateien<br />
gespeicherten Elemente, die Sie noch nicht auf einer<br />
Seite platziert haben, stehen Ihnen das nächste Mal<br />
automatisch zur Verfügung, wenn Sie die Website<br />
öffnen. Sie können Quelldateien auch für alle Website-<br />
Projekte verfügbar schalten, indem Sie die<br />
Quelldateien in ihren Kategorien arretieren. Möchten<br />
Sie selbst entworfene Elemente für alle Websites<br />
verfügbar schalten, ziehen Sie diese Designobjekte in<br />
die Kategorie „Eigene Designs“ der Registerkarte.<br />
Einfügen von Quelldateien in Ihre Seite<br />
Platzieren einer Quelldatei auf Ihrer Seite<br />
• Klicken Sie auf die Miniaturansicht in der<br />
Designkategorie und ziehen Sie sie mit der Maus auf die<br />
gewünschte Seite.<br />
Speichern von Designs<br />
Mit <strong>WebPlus</strong> können Sie selbst Quelldateien anlegen, die sich dann<br />
immer wieder für Ihre aktuelle Website oder auch für andere<br />
Projekte einsetzen lassen. Diese Quelldateien lassen sich aus<br />
Objekten erstellen, die bereits auf Ihrer Seite platziert sind, und<br />
anschließend bequem speichern. Unter anderem lassen sich die<br />
folgenden Designtypen speichern:<br />
• Grafiken (aus gezeichneten Vektorformen,<br />
Strichzeichnungen und künstlerischen sowie<br />
Rahmentexten)<br />
• Bilder (aus korrigierten Fotos oder Bildausschnitten)<br />
• Slider/Panels<br />
• Schaltflächen
• Bildrahmen<br />
Quelldateien für kreative Designs 273<br />
• Ausgewählte Layouts verschiedener Seitenobjekte<br />
• Hintergründe<br />
• Seiten<br />
Um ein Design zu speichern, kopieren Sie es durch Ziehen aus<br />
seiner Seite in die Studio-Registerkarte Quelldateien. Aus dieser<br />
Registerkarte lässt es sich dann jederzeit wieder auf andere Seiten<br />
ziehen. Hintergründe und Seiten lassen sich jedoch nicht aus<br />
Ihrem Arbeitsbereich ziehen. Sie müssen diese Elemente direkt<br />
über die Kategorien der Registerkarte importieren.<br />
Speichern in der Kategorie „Eigene Designs“<br />
Wenn Sie Ihre Designs global speichern möchten, sodass sie auch<br />
in Zukunft für andere Website-Projekte verfügbar sind, legen Sie<br />
die Designs in der Kategorie Eigene Designs der Studio-<br />
Registerkarte Quelldateien ab.<br />
Nach der Installation von <strong>WebPlus</strong> ist die Galerie „Eigene Designs“<br />
leer. Sie können jederzeit Ihre eigenen Objekte in dieser Kategorie<br />
speichern.<br />
Ziehen Sie ein Objekt in eine andere Kategorie, ist das gespeicherte<br />
Design nur für die aktuelle Website verfügbar.
274 Quelldateien für kreative Designs<br />
Speichern Ihrer Designs in der Kategorie „Eigene Designs“<br />
• Ziehen Sie ein Objekt von der Seite und legen Sie es in<br />
der Kategorie „Eigene Designs“ der Studio-Registerkarte<br />
Quelldateien ab. Sie müssen die Kategorie hierfür nicht<br />
extra erweitern, <strong>WebPlus</strong> übernimmt diesen Schritt<br />
automatisch für Sie.<br />
Speichern der Kategorie „Eigene Designs“<br />
Alle Designs, die Sie in der Kategorie „Eigene Designs“ speichern,<br />
werden als Paketdatei namens „Eigene Designs.wpack“ in dem<br />
Ordner „Anwendungsdaten“ von Windows gespeichert, sobald Sie<br />
<strong>WebPlus</strong> beenden.<br />
Speichern von Seiten<br />
Alle Seiten Ihrer Website lassen sich in der Kategorie „Seiten“ der<br />
Studio-Registerkarte Quelldateien speichern.<br />
Speichern einer Seite<br />
1. Wählen Sie die Kategorie „Seiten“ der Studio-<br />
Registerkarte Quelldateien aus und klicken Sie auf<br />
Hinzufügen.<br />
2. Wählen Sie in dem Dialogfeld eine Seite oder Master-<br />
Seite Ihrer Website aus.
Quelldateien für kreative Designs 275<br />
3. Klicken Sie auf die Schaltfläche OK. Die Seite wird nun<br />
in der Kategorie „Seiten“ angezeigt.<br />
Speichern von Hintergründen<br />
Genau wie Seiten können Sie auch selbst definierte Hintergründe<br />
aus Ihrer Website in der Studio-Registerkarte Quelldateien<br />
speichern. Diese Elemente werden dann in der Kategorie<br />
„Hintergründe“ abgelegt.<br />
Speichern eines Hintergrunds<br />
1. Wählen Sie die Kategorie „Hintergründe“ der Studio-<br />
Registerkarte Quelldateien aus und klicken Sie auf<br />
Hinzufügen.<br />
2. Wählen Sie in dem Dialogfeld den Hintergrund für eine<br />
bestimmte Seite oder die gesamte Website aus.<br />
3. Klicken Sie auf die Schaltfläche OK. Der Hintergrund<br />
wird nun in der Kategorie „Hintergründe“ angezeigt.<br />
Speichern in anderen Kategorien<br />
Designs lassen sich ebenfalls in andere Kategorien einfügen, sind<br />
dann jedoch nur in der aktuellen Website verfügbar (sofern sie<br />
nicht wie auf Seite 276 beschrieben arretiert sind). Für gewöhnlich<br />
können Sie Vektorformen, Strichzeichnungen, künstlerische Texte<br />
und Textrahmen in der Kategorie „Grafiken“ speichern, sofern Sie<br />
diese Elemente nicht über die Kategorie „Eigene Designs“ für alle<br />
Projekte zugänglich machen möchten.<br />
Wenn Sie Ihre Website schließen, müssen alle selbst<br />
angelegten Designs gespeichert werden, die Sie für<br />
dieses Projekt in der Registerkarte eingelagert haben.<br />
Sie werden automatisch aufgefordert, das Design in<br />
einem benutzerdefinierten Quelldatei-Paket für speziell<br />
diese Website zu speichern.
276 Quelldateien für kreative Designs<br />
Speichern eines Designs in anderen Kategorien<br />
• Ziehen Sie das Objekt von der Seite und legen Sie es in<br />
einer anderen Kategorie ab.<br />
Arretieren von Kategorien und einzelnen<br />
Quelldateien<br />
Sie können einzelne Quelldateien und ganze Kategorien der<br />
Studio-Registerkarte Quelldateien für alle Websites zugänglich<br />
machen (d. h. sie global verfügbar schalten), indem Sie die<br />
Objekte/Kategorien arretieren.<br />
Quelldateien lassen sich nur arretieren, wenn Sie diese<br />
Elemente als Teil eines Quelldatei-Pakets gespeichert<br />
haben. Wenn Sie versuchen, eine ungespeicherte<br />
Quelldatei zu arretieren, wird automatisch eine<br />
Speicherungsaufforderung für das Quelldatei-Paket<br />
eingeblendet.<br />
Arretieren und Freischalten von Quelldateien<br />
• Um alle Quelldateien einer Kategorie zu arretieren,<br />
klicken Sie auf die Option Alles arretieren des<br />
Kategorietitels.<br />
ODER<br />
Um einzelne Quelldateien zu arretieren, klicken Sie<br />
auf das Symbol der entsprechenden Miniaturen.<br />
• Um alle Quelldateien einer Kategorie freizugeben,<br />
klicken Sie auf die Option Nichts arretieren des<br />
Kategorietitels.<br />
ODER<br />
Um einzelne Quelldateien freizugeben, klicken Sie<br />
auf das Symbol der entsprechenden Miniaturen.
14<br />
Vorschau und<br />
Publizieren
278 Vorschau und Publizieren
Vorschau und Publizieren 279<br />
Arbeiten mit der Website-Prüfung<br />
Die Website-Prüfung durchsucht Ihre Website nach häufig<br />
auftretenden Layoutproblemen, die bei der Seitennavigation,<br />
Textformatierung, Formularen, E-Commerce-Objekten und<br />
anderen Elementen auftreten, und zeigt diese Probleme<br />
anschließend an. Die Funktion sucht nach einer breiten Palette von<br />
Problemen. Zu den typischen Fehlerquellen gehören:<br />
• Doppelt vorhandene HTML-IDs für Objekte.<br />
• Ungültige Anker oder Hyperlinks.<br />
• Webformulare: Die Schaltfläche „Absenden“ fehlt oder<br />
mehrere Formularobjekte tragen dieselben Namen.<br />
• Fehlermeldungen für die W3C-Gültigkeitsprüfung.<br />
• Große JPG-Bilder, die als PNG-Dateien exportiert<br />
werden.<br />
• Überlappende, gedrehte oder zugeschnittene Texte.<br />
• Für Webseiten ungeeignete Schriften (keine websicheren<br />
Schriften).<br />
Wenn Sie die komplette Liste der Prüfungen einsehen<br />
möchten, klicken Sie in dem Dialogfeld der Website-<br />
Prüfung auf Filter Website-Probleme.<br />
Ermittelte Probleme werden von der Website-Prüfung automatisch<br />
in einer Liste angezeigt (einschließlich Optionen zur Korrektur der<br />
Probleme).<br />
<strong>WebPlus</strong> kann wahlweise versuchen, alle aufgelisteten Probleme zu<br />
beheben, oder Sie können die Probleme auch manuell bearbeiten.<br />
Je nach Problem werden primäre und eventuell auch sekundäre<br />
Korrekturmöglichkeiten angeboten. Die primäre Korrektur ist die
280 Vorschau und Publizieren<br />
von <strong>WebPlus</strong> bevorzugte erste Wahl für das jeweilige<br />
Layoutproblem. Wurde einem Text z. B. eine Schrift zugeordnet,<br />
die nicht als websicher eingestuft ist, können Sie für den Text<br />
einfach eine websichere Schrift einstellen.<br />
Wenn Sie bestimmte Problemtypen ignorieren oder sich erst später<br />
mit den Lösungsmöglichkeiten befassen möchten, können Sie die<br />
Problemanzeige filtern. Nähere Informationen hierzu finden Sie in<br />
der <strong>WebPlus</strong>-Hilfe.<br />
Prüfen auf Website-Probleme<br />
1. Klicken Sie in der Standardkontextleiste auf die<br />
Schaltfläche Website-Manager und dann auf die Option<br />
Website-Prüfung.<br />
Der Website-Manager wird nun mit aktivierter<br />
Kategorie „Website-Prüfung“ geöffnet.<br />
2. (Optional) Legen Sie mit dem Dropdownfeld Seite fest,<br />
ob Sie die Probleme für alle Seiten oder bestimmte<br />
Seiten auflisten möchten.<br />
3. Legen Sie in dem Feld Typ fest, ob sie Alle Website-<br />
Probleme oder nur bestimmte Problemtypen anzeigen<br />
lassen möchten:<br />
• Website-Navigation<br />
• Textformatierung<br />
• Formulare und E-Commerce<br />
4. Um die Website nach Problemen zu durchsuchen,<br />
klicken Sie auf die Schaltfläche Start. Die Probleme<br />
werden dann automatisch in dem Listenfeld aufgeführt.
Vorschau und Publizieren 281<br />
Standardmäßig werden Ressourcen nach der Spalte für die Seiten<br />
geordnet. Sie können die Sortierung der Liste jedoch beliebig<br />
verändern, indem Sie auf die Kopfzelle einer Spalte klicken.<br />
Um die primäre oder sekundäre Korrekturlösung für ein<br />
Problem in dem unteren Textfeld einzublenden,<br />
klicken Sie auf den Eintrag des Problems.<br />
Automatische Korrektur mehrerer Probleme<br />
1. Um alle Probleme auszuwählen, aktivieren Sie die<br />
Option Seite in der linken oberen Ecke der Problemliste.<br />
2. Klicken Sie in der rechten unteren Ecke der Liste auf die<br />
Zelle Alle korrigieren. Am Anfang der untersten Zeile<br />
wird die Anzahl der Probleme angezeigt (z. B. 6/6<br />
Ausgewählt).<br />
3. Klicken Sie in dem Dialogfeld Mehrere Korrekturen<br />
anwenden auf die gewünschte Schaltfläche, um eine<br />
primäre Korrektur (empfohlen) oder eine sekundäre<br />
Korrektur einzusetzen. Nachdem Sie auf eine der<br />
Schaltflächen geklickt haben, werden alle Probleme<br />
beseitigt und aus der Liste entfernt, die sich mit dieser<br />
Methode beheben lassen. Für einige Korrekturen müssen<br />
Sie eventuell zusätzliche Optionen über ein separates<br />
Dialogfeld festlegen.<br />
4. Um den Website-Manager zu beenden, klicken Sie auf<br />
Schließen.<br />
Wenn Sie ein Problem korrigieren, wird in der<br />
Statusspalte ein grünes Häkchen für den<br />
entsprechenden Eintrag eingefügt.
282 Vorschau und Publizieren<br />
Manuelle Problemkorrektur<br />
1. Führen Sie einen Doppelklick auf den Eintrag eines<br />
Problems in der Spalte Korrektur aus.<br />
2. Führen Sie die in dem Dialogfeld vorgeschlagenen<br />
Schritte aus. Mit der Schaltfläche Anzeigen können Sie<br />
direkt zu dem problematischen Objekt (z. B. einem<br />
Formular) auf der betroffenen Webseite umschalten.<br />
3. Ist die Schaltfläche Bearbeiten verfügbar, können Sie mit<br />
einem Klick das Dialogfeld öffnen, das für die Korrektur<br />
des Problems benötigt wird. Ist diese Schaltfläche grau<br />
angezeigt und somit nicht verfügbar, folgen Sie einfach<br />
den Vorschlägen zur Problembehebung.<br />
4. Klicken Sie als Letztes auf die Schaltfläche Schließen.<br />
Wenn Sie zeitweilig (oder permanent) bestimmte<br />
Probleme übergehen möchten, klicken Sie auf<br />
Probleme dieses Typs ignorieren. Nähere<br />
Informationen hierzu finden Sie unter „Filtern von<br />
Website-Problemen“ in der <strong>WebPlus</strong>-Hilfe.<br />
Öffnen einer Website-Vorschau<br />
Bevor Sie eine Website im World Wide Web veröffentlichen,<br />
sollten Sie die Seiten als Vorschau in Ihrem eigenen Webbrowser<br />
öffnen. Auf diese Weise können Sie genau feststellen, ob wirklich<br />
alle Seiten so angezeigt werden, wie Sie es während der<br />
Designphase der Website geplant hatten. Für die Vorschau<br />
einzelner Webseiten oder einer ganzen Website können Sie<br />
entweder ein internes Fenster von <strong>WebPlus</strong> verwenden, das auf<br />
dem Internet Explorer basiert, oder auch einen anderen auf Ihrem<br />
System installierten Browser einsetzen.
Prüfen Ihrer Website per Vorschau<br />
Vorschau und Publizieren 283<br />
1. Klicken Sie in der Standardsymbolleiste auf den<br />
nach unten zeigenden Pfeil des Symbols Website-<br />
Vorschau.<br />
2. Wählen Sie eine der folgenden Optionen aus dem Menü<br />
aus:<br />
• Vorschau im Fenster (Internet Explorer)<br />
(Tastaturkürzel: Alt+P): Dieser Befehl öffnet die<br />
Website in einem neuen internen <strong>WebPlus</strong>-Fenster,<br />
sodass Sie über die Reiter der Fensterregisterkarten<br />
bequem zwischen Vorschau- und<br />
Bearbeitungsfenster umschalten können.<br />
• Um einen externen Browser zu verwenden, klicken<br />
Sie auf einen der Einträge Seitenvorschau im... oder<br />
Website-Vorschau im.... Der genaue Name dieser<br />
Menüpunkte richtet sich nach den<br />
Browserversionen, die auf Ihrem System installiert<br />
sind. Eine Möglichkeit wäre z. B. „Seitenvorschau<br />
im Internet Explorer“. Die Webseite oder Website<br />
wird anschließend in einen temporären Ordner<br />
exportiert und dann in dem ausgewählten Browser<br />
geöffnet.<br />
Mit <strong>WebPlus</strong> können Sie die geschätzte Downloadzeit für<br />
jede Seite Ihrer Website prüfen. Zusätzlich finden Sie hier auch<br />
Informationen über die Anzahl der Dateien auf jeder einzelnen<br />
Seite sowie die Gesamtgröße der Dateien. All diese Optionen<br />
finden Sie in dem Symbolmenü Website-Vorschau der<br />
Standardsymbolleiste.
284 Vorschau und Publizieren<br />
Publizieren im Web<br />
Wenn Sie Ihre Website im World Wide Web publizieren möchten,<br />
müssen Sie die fertige <strong>WebPlus</strong>-Website an einen Server<br />
übertragen, der Ihnen von einem Internetdienstanbieter für das so<br />
genannte „Hosting“ der Seiten zur Verfügung gestellt wird. Sie<br />
können wahlweise alle Webseiten publizieren oder nur die Seiten,<br />
die seit dem letzten Publikationsvorgang aktualisiert wurden.<br />
Vor dem Publizieren sollten Sie Ihre Dateien mit der<br />
Website-Prüfung (Extras > Website-Manager ><br />
Website-Prüfung) auf mögliche Probleme<br />
untersuchen. Nähere Informationen hierzu finden Sie<br />
in der <strong>WebPlus</strong>-Hilfe.<br />
Publizieren Ihrer Website im World Wide Web<br />
• Klicken Sie in der Standardsymbolleiste auf den<br />
Pfeil des Symbols Website publizieren und in dem<br />
Menü auf Im Web publizieren.<br />
Wenn Sie mindestens ein FTP-Konto eingerichtet haben, wird das<br />
Dialogfeld Im Web publizieren geöffnet, und das Programm trägt<br />
den Namen sowie die Einstellungen des zuletzt verwendeten<br />
Kontos automatisch in die entsprechenden Felder ein. Nähere<br />
Informationen hierzu finden Sie unter "Übertragen Ihrer Website<br />
per Upload" auf Seite 287.<br />
Falls Sie noch keine Kontoinformationen für eine FTP-Verbindung<br />
festgelegt haben, müssen Sie zunächst mindestens ein FTP-Konto<br />
konfigurieren. Diese Konfiguration wird dann automatisch<br />
gespeichert und standardmäßig für alle zukünftigen<br />
Publikationsvorgänge verwendet.
Festlegen der FTP-Kontoinformationen<br />
Vorschau und Publizieren 285<br />
1. Klicken Sie auf die Schaltfläche Konten, um das<br />
Dialogfeld Upload an Server zu öffnen.<br />
2. Klicken Sie auf Hinzufügen.<br />
3. Gehen Sie in dem Dialogfeld Kontodetails wie folgt vor:<br />
• Kontoname: Geben Sie einfach eine beliebige<br />
Bezeichnung Ihrer Wahl ein. Diese Bezeichnung<br />
dient nur der leichteren Identifikation des Kontos in<br />
<strong>WebPlus</strong>, falls Sie mit mehreren Konten arbeiten.<br />
• FTP-Adresse: Diese URL für Ihren Webspace<br />
erhalten Sie von dem Dienstanbieter, der das<br />
Hosting Ihrer Website übernimmt.<br />
• Portnummer: Falls Sie von Ihrem Dienstanbieter<br />
keine andere Vorgabe erhalten haben, können Sie<br />
die Portnummer auf „21“ belassen.<br />
• Wenn Ihr Dienstanbieter keinen bestimmten<br />
Ordner vorgeschrieben hat, oder Sie nicht<br />
unbedingt alle Dateien in ein spezielles Verzeichnis<br />
kopieren müssen, lassen Sie das Feld Ordner<br />
einfach leer.<br />
• Anschließend geben Sie den Benutzernamen und<br />
das Kennwort ein, die Sie von Ihrem Dienstanbieter<br />
erhalten haben. Diese beiden Angaben entsprechen<br />
höchstwahrscheinlich den Anmeldungsdaten<br />
(Login) für Ihre E-Mail-Adresse. Geben Sie das<br />
Kennwort exakt so ein, wie Sie es von Ihrem<br />
Dienstanbieter erhalten haben. Wenn Sie einen<br />
Fehler bei der Groß-/Kleinschreibung machen,<br />
verweigert der Host-Server Ihnen möglicherweise<br />
den Zutritt.
286 Vorschau und Publizieren<br />
• Wenn Sie das Kennwort nicht bei jeder<br />
Dateiübertragung neu eingeben möchten, aktivieren<br />
Sie einfach die Option Kennwort speichern. Das<br />
Kennwort wird nun auf Ihrem Computer<br />
gespeichert.<br />
• Passiver Modus: Sofern keine FTP-<br />
Verbindungsprobleme auftreten, lassen sie diese<br />
Option aktiviert.<br />
Sollten Sie sicher sein, dass Ihre FTP-Details korrekt<br />
sind, lassen sich Ihre Verbindungsprobleme<br />
vielleicht durch eine Deaktivierung der Option<br />
Passiver Modus beseitigen. ISPs und Webhosting-<br />
Dienstleister arbeiten sowohl mit aktiven als auch<br />
passiven FTP-Modi. Eventuell kann Ihnen der<br />
Support des Unternehmens hierbei helfen.<br />
• Website-URL: Die URL-Adresse Ihrer Website.<br />
Nach dem FTP-Upload können Sie die Website<br />
mithilfe eines Dialogfelds und dieser URL anzeigen.<br />
• Klicken Sie auf OK, um das Dialogfeld<br />
„Kontodetails“ zu schließen.<br />
4. Klicken Sie nun in dem Dialogfeld für den Server-Upload<br />
auf Test, um Ihr FTP-Konto zu testen. Verläuft der Test<br />
erfolgreich, wird ein Dialogfeld mit einem Hinweis zu<br />
der erstellten Verbindung angezeigt.
Vorschau und Publizieren 287<br />
5. Für die Speicherung der FTP-Kontodetails stehen Ihnen<br />
zwei Optionen zur Verfügung:<br />
• auf Ihrem PC (die Kontodetails werden in <strong>WebPlus</strong><br />
gespeichert und auch dann nicht gelöscht, wenn Sie<br />
einen Programmstart mit gedrückter Strg-Taste<br />
durchführen).<br />
ODER<br />
• in der aktuellen Website (nähere Informationen<br />
hierzu finden Sie unter dem Thema „Arbeiten mit<br />
FTP-Kontoinformationen“ in der <strong>WebPlus</strong>-Hilfe).<br />
6. Klicken Sie auf Konto aktualisieren, um zu dem<br />
Dialogfeld „Im Web publizieren“ zurückzukehren.<br />
Übertragen Ihrer Website per Upload<br />
1. Wählen Sie in dem Dialogfeld „Im Web publizieren“ das<br />
gewünschte FTP-Konto über das Dropdownfeld aus.<br />
2. Arbeitet Ihre Website mit einer Datenbank, ist die<br />
Option Vor dem Publizieren zusammenführen<br />
aktiviert. Wenn Sie eventuelle Änderungen nicht<br />
übernehmen möchten, deaktivieren Sie einfach die<br />
Option. Diese Option wird grau dargestellt und ist somit<br />
nicht verfügbar, wenn das Programm keine Datenbank<br />
oder Änderungen erkennt. Nähere Informationen zu<br />
Datenbanken finden Sie unter „Arbeiten mit der<br />
Datenbankzusammenführung“ in der <strong>WebPlus</strong>-Hilfe.<br />
3. Wenn Sie den Publikationsvorgang genau überwachen<br />
möchten, deaktivieren Sie die Option Unbeaufsichtigter<br />
Upload. Hierdurch können Sie die Änderungen prüfen,<br />
die an Ihrer publizierten Website durchgeführt werden<br />
müssen, bevor das Programm die Änderungen umsetzt.<br />
Sollte ein Problem auftreten, lässt sich der Upload<br />
einfach abbrechen. Nähere Informationen hierzu finden
288 Vorschau und Publizieren<br />
Sie unter dem Abschnitt „Der automatische Ablauf“ in<br />
der <strong>WebPlus</strong>-Hilfe.<br />
4. Aktivieren Sie die Option Alle Seiten publizieren, oder<br />
klicken Sie auf die einzelnen Kästchen, um bestimmte<br />
Seiten für die Publikation zu markieren.<br />
5. Wenn Sie eine Sicherheitskopie des <strong>WebPlus</strong>-Projekts<br />
anlegen möchten, aktivieren Sie die Option Backup des<br />
Dokuments auf Remote-Server erstellen. Falls Sie das<br />
Projekt noch nicht gespeichert haben, wird nun eine<br />
Speicheraufforderung eingeblendet.<br />
6. Klicken Sie auf die Schaltfläche OK.<br />
Nachdem <strong>WebPlus</strong> eine Internetverbindung gefunden<br />
hat, geschieht Folgendes:<br />
7. Wenn Sie das erste Mal eine Website übertragen, werden<br />
die ausgewählten Dateien direkt an den Webserver<br />
übermittelt.<br />
ODER<br />
Wenn Sie die Dateien an eine bestehende Website<br />
übermitteln, wird ein Dialogfeld für den Datei-Upload<br />
mit den verschiedenen Aktionen zu den Dateien<br />
angezeigt. „Hinzufügen“ steht für neu hinzugefügte<br />
Dateien, „Ersetzen“ für Dateien, die auf dem Webserver<br />
ersetzt werden und „Nicht ändern“ für Dateien, die nicht<br />
aktualisiert werden.<br />
Wenn Sie unbenutzte Grafiken und Seiten direkt von<br />
<strong>WebPlus</strong> entfernen lassen möchten, aktivieren Sie die<br />
Option für das Löschen nicht verwendeter Remote-<br />
Dateien.
Vorschau und Publizieren 289<br />
Legen Sie in dem Dialogfeld fest, ob Sie einen<br />
Inkrementellen Upload oder einen Vollständigen<br />
Upload durchführen möchten. Mit dem inkrementellen<br />
Update werden nur die Dateien übertragen, die Sie seit<br />
dem letzten Upload verändert haben. Bei inkrementellen<br />
Updates können Sie <strong>WebPlus</strong> anweisen, fehlende<br />
Dateien zu suchen, indem Sie die entsprechende Option<br />
aktivieren. Standardmäßig ist diese Option jedoch<br />
deaktiviert, da diese Suche sehr zeitintensiv ist und den<br />
Upload eventuell deutlich in die Länge zieht.<br />
Nach erfolgreicher Übertragung aller Dateien zeigt das<br />
Programm eine entsprechende Hinweismeldung an.<br />
Klicken Sie als Letztes auf die Schaltfläche Schließen.<br />
8. Wählen Sie in dem Dialogfeld für die Website-<br />
Publikation den Browser aus, in dem Sie die Live-<br />
Website anzeigen möchten und klicken Sie auf Diese<br />
URL anzeigen. Sie können Ihre Website nun live über<br />
einen Webbrowser testen.<br />
Wenn Sie Dateien umbenennen oder löschen und dann eine oder<br />
mehrere Seiten neu im Web publizieren, werden die alten Dateien<br />
nicht automatisch gelöscht. Sie müssen diese Dateien manuell über<br />
den Befehl Datei > Website publizieren > Website warten<br />
entfernen. Wenn Sie jedoch die gesamte Website automatisch neu<br />
im Web publizieren lassen (mit dem automatischen Ablauf),<br />
können Sie über die Option Nicht verwendete Dateien löschen<br />
direkt die unbenutzten Dateien entfernen.
290 Vorschau und Publizieren<br />
Anzeigen der publizierten Website<br />
Nachdem Sie die Webseiten publiziert haben, können<br />
Sie Ihr Werk mit der Option Website online prüfen im Menü<br />
Website-Vorschau der Standardsymbolleiste prüfen. Die Website<br />
wird nun in ihrem zuletzt aktualisierten Status in Ihrem<br />
Standardwebbrowser angezeigt. Wenn Sie diese Funktion das erste<br />
Mal benutzen, wird ein Dialogfeld geöffnet, in das Sie die<br />
Standardadresse (URL) der Website eingeben müssen. Sie können<br />
diese Einstellung auch noch später festlegen (Bearbeiten ><br />
Website-Eigenschaften > Publizieren).<br />
Denken Sie stets daran, dass keine der Änderungen, die Sie<br />
seit dem letzten Publikationsvorgang durchgeführt haben, in der<br />
Browseranzeige sichtbar ist. Wenn Sie die noch nicht publizierten<br />
Seiten prüfen möchten, klicken Sie auf das Symbol Website-<br />
Vorschau. Nähere Informationen hierzu finden Sie unter „Öffnen<br />
einer Website-Vorschau“ auf Seite 282.<br />
Einrichten Ihres Webhostings<br />
<strong>Serif</strong> bietet verschiedene Webhosting-Pakete zu günstigen<br />
Konditionen an, die auf die unterschiedlichen Bedürfnisse unserer<br />
Kunden zugeschnitten sind. Nähere Informationen finden Sie<br />
unter go.serif.com/hosting. Beachten Sie bitte, dass dieses Angebot<br />
momentan nur in englischer Sprache verfügbar ist.<br />
Alternativ hat Ihnen Ihr Internet-Service, bei dem Sie Ihre E-Mail-<br />
Adresse angelegt haben, vielleicht schon einigen Speicherplatz für<br />
eine Website oder andere Dateien zur Verfügung gestellt.
15<br />
Website-Validerung<br />
und -Analyse
292 Website-Validerung und -Analyse
Validieren Ihrer Website<br />
Website-Validerung und -Analyse 293<br />
Wenn Sie mit den verschiedenen interaktiven Webdiensten von<br />
Google oder Bing arbeiten möchten, müssen Sie Ihre Website<br />
validieren lassen. Dieser Schritt ist notwendig, damit Sie als<br />
Besitzer der Website identifiziert werden können. Auf diese Weise<br />
sind vertrauliche Informationen nur für Sie und Google bzw. Bing<br />
zugänglich.<br />
Die Google-Validierung<br />
Über Google können Sie verschiedene Webmaster Tools<br />
verwenden, wie z. B. AdSense und Analytics, mit denen sich<br />
Werbeflächen einblenden und die Nutzung Ihrer Webseiten<br />
analysieren lassen. Bevor Sie diese Features nutzen können, müssen<br />
Sie jedoch Ihre Website bei Google validieren.<br />
<strong>WebPlus</strong> bietet Ihnen zwei Möglichkeiten für die Validierung: den<br />
HTML-Download (empfohlen) oder das Kopieren und Einfügen<br />
von Meta-Tags.<br />
Validieren Ihrer Website bei Google<br />
1. Klicken Sie auf den Menüpunkt Bearbeiten > Website-<br />
Eigenschaften und dann auf die Kategorie<br />
Suchmaschine > Google-Validierung.<br />
2. Klicken Sie auf die Option Website für Google<br />
Webmaster Tools aufrufen.<br />
3. Nachdem die Google-Seite in Ihrem Browser geöffnet ist,<br />
folgen Sie einfach online den Anweisungen für die<br />
Verifizierung und laden entweder eine dort erstellte<br />
HTML-Verifikationsdatei herunter oder kopieren den<br />
Meta-Tag (z. B.
294 Website-Validerung und -Analyse<br />
4. In <strong>WebPlus</strong> aktivieren Sie in dem immer noch geöffneten<br />
Dialogfeld die Option Diese Website mit Google<br />
Webmaster Tools validieren.<br />
5. Aktivieren Sie je nach der zuvor ausgewählten<br />
Validierungsmethode eine der Optionen Mit einer<br />
Datei... oder Mit einem Meta-Tag.... Im ersten Fall<br />
wählen Sie die heruntergeladene HTML-Datei aus und<br />
klicken auf Öffnen. Im zweiten Fall klicken Sie auf die<br />
Schaltfläche Einfügen, um den Meta-Tag einzufügen.<br />
6. Klicken Sie auf die Schaltfläche OK.<br />
7. Publizieren Sie Ihre Website.<br />
8. Klicken Sie auf der in Ihrem Browser geöffneten Google-<br />
Seite auf die Schaltfläche für die Verifizierung, um die<br />
Verifizierung der Seite durch Google zu bestätigen.<br />
Die Bing-Validierung<br />
Bing (ehemals Live Search und MSN Search) ist eine Suchmaschine<br />
für das World Wide Web, die von Microsoft entwickelt wurde und<br />
auch Webdienste für Webmaster bietet. Genau wie bei Google<br />
müssen Sie Ihre <strong>WebPlus</strong>-Website validieren, um diese Dienste<br />
nutzen zu können.<br />
Validieren Ihrer Website bei Bing<br />
1. Klicken Sie auf den Menüpunkt Bearbeiten > Website-<br />
Eigenschaften und dann auf die Kategorie<br />
Suchmaschine > Bing-Validierung.<br />
2. Folgen Sie den Anweisungen für die Google-Validierung.<br />
Anstelle einer HTML-Datei laden Sie bei dieser<br />
Validierung eine XML-Datei herunter.
Analysieren der Webstatistik<br />
Website-Validerung und -Analyse 295<br />
Mit der Statistik für Ihre Website können Sie die Nutzung der<br />
verschiedenen Seiten überwachen und feststellen, ob Ihre Website<br />
die in sie gesetzten Erwartungen erfüllt. Anhand der vielen<br />
verschiedenen Daten können Sie dann einfacher entscheiden, wo<br />
und wie sich Ihre Website noch verbessern lässt.<br />
In <strong>WebPlus</strong> werden die Informationen mit Google Analytics<br />
zusammengetragen. Sie müssen zuerst die Webanalyse in <strong>WebPlus</strong><br />
aktivieren und dann den von der Website<br />
www.google.com/analytics erstellten Code in Ihre Website<br />
einfügen.<br />
Anmelden bei Google Analytics<br />
1. Öffnen Sie die Website www.google.com/analytics, um<br />
sich anzumelden oder ein Konto zu eröffnen. Um sich<br />
mit ihren bestehenden Benutzerdetails anzumelden,<br />
klicken Sie auf Zugriff auf Analytics. Als neuer Benutzer<br />
müssen Sie zunächst über den Link Melden Sie sich jetzt<br />
an ein Konto erstellen.<br />
2. Folgen Sie den Anleitungen auf Ihrem Bildschirm, um<br />
ein neues Profil anzulegen.<br />
3. Kopieren Sie den von dem Profil erstellten Code aus dem<br />
Fenster Fügen Sie diesen Code in Ihre Website ein.<br />
Diesen Code müssen Sie in <strong>WebPlus</strong> einfügen.<br />
4. Klicken Sie anschließend auf die Schaltfläche Fertig<br />
stellen.<br />
Aktivieren von Google Analytics<br />
1. Klicken Sie im Menü Bearbeiten auf den Eintrag<br />
Website-Eigenschaften.<br />
2. Klicken Sie auf die Kategorie Feature > Analytics und<br />
wählen Sie die Option Webanalyse aktivieren aus.
296 Website-Validerung und -Analyse<br />
3. Klicken Sie auf die Schaltfläche Aus Zwischenablage<br />
einfügen, um den zuvor von der „Google Analytics“-<br />
Website kopierten Code einzufügen. Der Code wird nun<br />
in Ihrem Dialogfeld angezeigt und lässt sich nicht<br />
bearbeiten.<br />
4. Klicken Sie auf die Schaltfläche OK.<br />
Damit die Analyse korrekt funktioniert, muss der Code<br />
in Ihrem Profil bei Google Analytics dieselbe<br />
Webeigenschafts-ID (z. B. UA-10378445-7) besitzen wie<br />
Ihre <strong>WebPlus</strong>-Website. Sie finden diese Angabe in dem<br />
Code.<br />
Wenn Sie den Analytics-Code für Ihre Website ändern,<br />
sollten Sie anschließend mit einem vollständigen<br />
Upload alle Seiten erneut im Web publizieren.<br />
Analysieren Ihrer Statistik<br />
• Melden Sie sich bei Google Analytics an und klicken Sie<br />
in Ihrem Website-Profil auf die Option zur Anzeige des<br />
Berichts.
16<br />
Anhänge
298 Anhänge
<strong>Serif</strong>-Kontaktinformationen<br />
Technischer Support<br />
Anhänge 299<br />
Information dazu, wie Sie technische Unterstützung und<br />
Antworten auf produktspezifische Fragen erhalten sowie zur<br />
Kontaktaufnahme mit <strong>Serif</strong> finden Sie unter<br />
www.serif.com/de/kontakt.<br />
<strong>Serif</strong>-Hauptniederlassung:<br />
Online<br />
The Software Centre<br />
PO Box 2000, Nottingham, NG11 7GW, Großbritannien<br />
Telefon +44 115 914 2000<br />
Fax +44 115 914 2020<br />
Webadresse: http://www.serif.com/de<br />
Internationale Anfragen<br />
Bitte wenden Sie sich an unseren Firmenhauptsitz.
300 Anhänge<br />
Warenzeichen und Copyright-Vermerke<br />
Dieses Handbuch und die darin beschriebene Software werden im Rahmen eines<br />
Endbenutzer-Lizenzabkommens zur Verfügung gestellt, das dem Produkt beiliegt.<br />
Angaben zur erlaubten und untersagten Verwendung sind in dem<br />
Lizenzabkommen enthalten.<br />
Warenzeichen<br />
<strong>Serif</strong> ist ein eingetragenes Warenzeichen von <strong>Serif</strong> (Europe) Ltd.<br />
<strong>WebPlus</strong> ist ein eingetragenes Warenzeichen von <strong>Serif</strong> (Europe) Ltd.<br />
Alle anderen <strong>Serif</strong>-Produktnamen sind Warenzeichen von <strong>Serif</strong> (Europe) Ltd.<br />
Microsoft, Windows und das Windows-Logo sind eingetragene Warenzeichen der<br />
Microsoft Corporation. Alle anderen Warenzeichen unterliegen dem Urheberrecht<br />
und den Lizenzbestimmungen der entsprechenden Patent- und Lizenzhalter.<br />
Windows Vista und die Windows Vista Start-Schaltfläche sind Warenzeichen<br />
oder eingetragene Warenzeichen der Microsoft Corporation in den USA und/oder<br />
anderen Ländern.<br />
Google+ für soziale Netzwerke, Google Analytics für Website-Analysen und<br />
Google AdSense für Werbeeinblendungen sind Warenzeichen von Google Inc.<br />
Copyright<br />
Digitale Bilder ©2008 Hemera Technologies Inc. Alle Rechte vorbehalten.<br />
Digitale Bilder ©2008 Jupiterimages Corporation. Alle Rechte vorbehalten.<br />
Digitale Bilder ©2008 Jupiterimages France SAS. Alle Rechte vorbehalten.<br />
Inhalt ©2008 Jupiterimages Corporation. Alle Rechte vorbehalten.<br />
Bildmaterial teilweise © 1997-2002 Nova Development Corporation; © 1995<br />
Expressions Computer Software; © 1996-98 CreatiCom, Inc.; 1996 Cliptoart; ©<br />
1997 Multimedia Agency Corporation; © 1997-98 Seattle Support Group. Die<br />
Rechte aller Parteien bleiben vorbehalten.<br />
Dieses Programm wurde mit den LEADTOOLS entwickelt, Copyright © 1991-<br />
2007 LEAD Technologies, Inc. Alle Rechte vorbehalten.<br />
THE PROXIMITY HYPHENATION SYSTEM © 1989 Proximity Technology Inc.<br />
Alle Rechte vorbehalten.
Anhänge 301<br />
THE PROXIMITY/COLLINS DATABASE® © 1990 William Collins Sons & Co.<br />
Ltd.; © 1990 Proximity Technology Inc. Alle Rechte vorbehalten.<br />
THE PROXIMITY/MERRIAM-WEBSTER DATABASE® © 1990 Merriam-<br />
Webster Inc.; © 1990 Proximity Technology Inc. Alle Rechte vorbehalten.<br />
The Sentry Spelling-Checker Engine © 2000 Wintertree Software Inc.<br />
WGrammar Grammar-Checker Engine © 1998 Wintertree Software Inc.<br />
Andrei Stcherbatchenko, Ferdinand Prantl<br />
PayPal © 1999-2012 PayPal. Alle Rechte vorbehalten.<br />
Roman Cart © 2008 Roman Interactive Ltd. Alle Rechte vorbehalten.<br />
Mal's © 1998 bis 2003 Mal's e-commerce Ltd. Alle Rechte vorbehalten.<br />
iTunes © 2000 bis 2008 Apple, Inc. Alle Rechte vorbehalten.<br />
YouTube © 2008 YouTube, LLC<br />
Facebook © 2008 Facebook Inc.<br />
Twitter © 2012 Twitter Inc.<br />
phpBB © 2000, 2002, 2003, 2007 phpBB Group<br />
FontForge © 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008 von George<br />
Williams.<br />
Teile dieser Software unterliegen dem Copyright-Schutz von © 2008 The FreeType<br />
Project (www.freetype.org). Alle Rechte vorbehalten.<br />
ODF Translator © 2006-2008, Clever Age, DIaLOGIKa, Sonata Software Ltd. Alle<br />
Rechte vorbehalten.<br />
Office Binary Translator to OpenXML Copyright © 2008-2009, DIaLOGIKa. Alle<br />
Rechte vorbehalten.<br />
Anti-Grain Geometry - Version 2.4<br />
Copyright © 2002-2005 Maxim Shemanarev (McSeem)<br />
SlideShowPro © Dominey Design Inc. Alle Rechte vorbehalten.<br />
Cliparts aus den <strong>Serif</strong> ArtPacks © <strong>Serif</strong> (Europe) Ltd. & Paul Harris<br />
TrueType-Beispielschriftarten aus den <strong>Serif</strong> FontPacks © <strong>Serif</strong> (Europe) Ltd.<br />
© 2012 <strong>Serif</strong> (Europe) Ltd. Alle Rechte vorbehalten. Dieses Handbuch darf in<br />
jeglicher Form, ob ganz oder teilweise, nur mit ausdrücklicher schriftlicher<br />
Genehmigung von <strong>Serif</strong> (Europe) Ltd. reproduziert werden.<br />
<strong>Serif</strong> <strong>WebPlus</strong> <strong>X6</strong> © 2012 <strong>Serif</strong> (Europe) Ltd. Alle Rechte vorbehalten.<br />
Die in den Beispielen verwendeten Namen und Firmen sind frei erfunden.
302 Anhänge
17<br />
Index
304 Index
Absätze, 250<br />
Textformatvorlagen für<br />
Absätze, 253<br />
Abstimmung (Smart-<br />
Objekt), 182<br />
AdSense, 150<br />
Aktionen, 129<br />
Aktive Betrachter (Smart<br />
Objekt), 180<br />
Anhängen von Master-<br />
Seiten, 49<br />
Anker, 131<br />
Anmeldung<br />
(Zugangskontrolle), 178<br />
Antispam (CAPTCHA), 224<br />
Audiodateien, 207<br />
Aufzählungen, 256<br />
Banner (animiert), 109<br />
Beitritt (Zugangskontrolle),<br />
176<br />
Benannte Formatvorlagen,<br />
253<br />
für Text (siehe auch<br />
Textformatvorlagen),<br />
253<br />
Benutzer (für<br />
Zugangskontrolle), 173<br />
Ausschließen per Bann,<br />
179<br />
Einfrieren, 179<br />
Benutzerdetails, 258<br />
Aktualisieren, 259<br />
Einfügen, 259<br />
Benutzergruppen (für<br />
Zugangskontrolle), 173<br />
Anmelden, 176<br />
Beitreten, 178<br />
Index 305<br />
Benutzerliste (Smart-<br />
Objekt), 169, 183<br />
Bilder<br />
als Hintergrund, 62<br />
Bildeffekte, 87<br />
Bildkorrekturen, 87<br />
Einfügen, 82<br />
in Lightboxen, 133<br />
Rollover-Popup, 143<br />
Bing-Validierung, 294<br />
Blogs, 157<br />
Einfügen, 158<br />
Verwalten, 159<br />
Zugriff über Offsite-<br />
Links, 59<br />
Browservorschau, 282<br />
Button Studio, 125<br />
CAPTCHA (Antispam), 224<br />
Copyright-Vermerke, 300<br />
Design Studio, 94<br />
Designvorlage, 30<br />
Dokumentrahmen<br />
(iFrames), 155<br />
Durchsuchen von Websites,<br />
146<br />
Dynamische<br />
Führungslinien, 71<br />
E-Commerce, 227<br />
Formulare und<br />
Schaltflächen einfügen<br />
(PayPal), 230<br />
Effekte (für Bilder), 87<br />
Einkaufswagen, 227<br />
Entfernen von<br />
Seiten/Master-Seiten, 55<br />
Facebook (Objekte), 193
306 Index<br />
Farbe<br />
Farbschemata, 67<br />
Hintergrund, 64<br />
Seitenfarbe, 64<br />
Features, 5<br />
Neue Features, 5<br />
Feiertage (öffentlich), 107<br />
Flash, 96, 210<br />
Movies, 210<br />
Foren, 162<br />
Einfügen, 163<br />
Sicherheit, 165<br />
Verwalten, 165<br />
Zugriff über Offsite-<br />
Links, 59<br />
Formatieren von Text<br />
Probleme auf Webseiten,<br />
279<br />
Formatvorlagen, 252<br />
für Text (siehe auch<br />
Textformatvorlagen),<br />
252<br />
Formen<br />
Text anpassen an, 247<br />
Formulare, 215<br />
Erstellen, 217<br />
Übertragen von<br />
Formulardaten, 219<br />
Bestätigen, 223<br />
Fotogalerie, 96<br />
aus Flickr-Fotos, 101<br />
aus SlideShowPro<br />
Director, 101<br />
Freistellen (Bildmotive), 86<br />
FTP, 284<br />
Kontodetails, 285<br />
Führungslinien<br />
dynamisch, 71<br />
Google<br />
AdSense, 150<br />
Google+ (Objekt), 201<br />
Maps, 148<br />
Validierung, 293<br />
Gruppen<br />
Benutzerlisten (für<br />
Zugangskontrolle), 173<br />
Hintergrund, 61, 265<br />
Benutzerdefiniert, 65<br />
Bild, 62<br />
Mehrere, 63<br />
Farbe, 64<br />
Sound, 208<br />
Speichern, 275<br />
Homepage, 42<br />
Ändern, 60<br />
HTML-Seiten, 53, 56<br />
Hyperlinks, 126<br />
Anker für, 131<br />
für Lightboxen, 135<br />
für Zielfenster/-rahmen,<br />
128<br />
iFrames, 155<br />
Importieren<br />
Text, 241<br />
Internet Service Provider<br />
(ISP), 284<br />
Kalender, 105<br />
Öffentliche Feiertage für,<br />
107<br />
Termine für, 108<br />
Kalender/Termin-Manager,<br />
108
Kalenderassistent, 105<br />
Kontodetails (FTP), 285<br />
Korrigieren (von Bildern),<br />
87<br />
Künstlerischer Text, 243<br />
auf einem Pfad, 246<br />
Künstlerischer Text<br />
(Werkzeug), 243, 246<br />
Layouthilfen, 71<br />
Dynamische<br />
Führungslinien, 71<br />
Lesezeichen-Symbolstreifen<br />
für soziale Netzwerke,<br />
203<br />
Lightboxen, 132<br />
Einstellungen, 136<br />
für Bilder, 86<br />
Linien<br />
Text anpassen an, 247<br />
Listen, 256<br />
Aufzählungen, 256<br />
Nummerierungen, 256<br />
Mailinglisten, 183<br />
Maps (Google), 148<br />
Master-Seiten, 47, 61<br />
Anhängen, 49<br />
Mehrere, 49<br />
Eigenschaften, 61<br />
Entfernen, 55<br />
Hinzufügen, 55<br />
Mehrere, 49<br />
Objekte, 51<br />
Mobile Websites, 38<br />
Umleiten zu, 41<br />
Navigationsleisten, 117<br />
Erstellen, 117<br />
Index 307<br />
Konfigurieren, 120<br />
Schaltflächen für, 123<br />
Neue Features, 5<br />
News-Fenster, 160<br />
Nummerierungen, 256<br />
Objekte (Erneut verwenden<br />
in Websites), 272<br />
Objekte für soziale<br />
Netzwerke, 193, 196, 201<br />
Facebook, 193<br />
Google+, 201<br />
Twitter, 196<br />
Öffnen bestehender<br />
Websites, 34<br />
Offsite-Links, 59<br />
Panels, 89<br />
Eigene entwerfen, 94<br />
Festlegen von Aktionen<br />
für, 129<br />
in Slidern, 109<br />
PayPal, 230<br />
Formulare und<br />
Schaltflächen einfügen,<br />
230<br />
Konfigurieren, 228<br />
Minicart, 228<br />
Pfadtexte, 245<br />
PhotoLab, 87<br />
Popup-Menüs, 122<br />
Profile<br />
Smart-Objekte, 186<br />
Prüffunktionen, 279<br />
Website-Prüfung, 279<br />
Publizieren, 284<br />
im Web, 284<br />
Quelldatei-Browser, 268
308 Index<br />
Quelldateien, 265, 268<br />
Arretieren, 276<br />
Durchsuchen, 269<br />
Quelldateien (Studio-<br />
Registerkarte)<br />
für Seitenhintergründe,<br />
62<br />
Speichern eigener<br />
Designs in, 272<br />
Quelldatei-Manager, 268<br />
Quelldatei-Paket, 265, 269<br />
Rahmen (iFrames), 155<br />
Rahmentext, 77<br />
Ränder (HTML-<br />
Textrahmen), 81<br />
Rollover, 139<br />
Popups, 143<br />
RSS-Feeds<br />
Abonnieren von<br />
Drittanbietern, 167<br />
RSS-Reader, 167<br />
Schaltflächen (Buttons),<br />
117, 123<br />
Eigene entwerfen, 125<br />
Schemata (Farb-), 67<br />
Voreinstellungen, 69<br />
Schriftarten, 251<br />
Websicher, 251<br />
Seiten, 47<br />
Eigenschaften, 61<br />
Hintergründe für, 61<br />
Hinzufügen und<br />
Entfernen, 53<br />
Klonen, 53<br />
Neuordnen, 56<br />
Seitenfarbe, 64<br />
Benutzerdefiniert, 64<br />
Sicherheit, 169<br />
Speichern, 274<br />
Über- und untergeordnete<br />
Seiten, 42, 56, 118<br />
Seiten umleiten<br />
an mobile Seiten, 41<br />
Seitenfarbe, 64<br />
Benutzerdefiniert, 65<br />
Global, 64<br />
<strong>Serif</strong>, 299<br />
Kontaktinformationen,<br />
299<br />
Webressourcen, 180, 215<br />
Anmelden, 184<br />
Löschen der<br />
Kontodetails, 185<br />
Shoutbox (Smart-Objekt),<br />
182<br />
Slider, 109<br />
Aktionen für, 129<br />
SlideShowPro Director, 101<br />
Smart-Objekte, 180<br />
Erstellen, 186<br />
Konto für, 184<br />
Profile für, 186<br />
Verwalten, 189<br />
Smartphones, 38<br />
Sound, 207<br />
Einfügen in Seiten, 207<br />
Speichern von Designs, 272<br />
Startassistent, 29<br />
Statistik (Webseite), 295<br />
Storytext, 77<br />
Studio für Bildausschnitte,<br />
86
Suchen und Ersetzen, 262<br />
Support, 299<br />
SWF-Dateien, 210<br />
Tabellen, 103<br />
Übersicht, 103<br />
Technischer Support, 299<br />
Termine (Kalender), 108<br />
Text, 77, 243, 247, 250<br />
Anpassen an Rahmen, 81<br />
auf einem Pfad, 245<br />
Bearbeiten auf einer<br />
Seite, 247<br />
Formatierung, 250<br />
Formatierungsprobleme<br />
auf Webseiten, 279<br />
Importieren aus Dateien,<br />
241<br />
Künstlerische (freie)<br />
Texte, 243<br />
Nummerierung und<br />
Aufzählungszeichen,<br />
256<br />
Rahmentexte, 77<br />
Hinzufügen zu, 78<br />
HTML-Tabellen, 103<br />
Ränder, 81<br />
Überlauf (in Rahmen), 81<br />
Text (Speichern), 272<br />
Text an Pfad anpassen, 247<br />
Textformatvorlagen, 252<br />
Textformatvorlagen-Palette,<br />
252<br />
Textrahmen, 78<br />
Anpassen von<br />
Textüberlauf, 81<br />
Einrichten, 80<br />
Index 309<br />
Erstellen, 78<br />
Ränder für, 81<br />
Text anpassen an, 81<br />
Textrahmenwerkzeug, 78<br />
Textverarbeitungsdateien,<br />
241<br />
Themenlayouts, 30<br />
Trefferzähler (Smart-<br />
Objekt), 181<br />
TrueType-Schriften, 251<br />
Twitter (Objekte), 196<br />
Über-/Untergeordnete<br />
Seiten, 42, 56, 118<br />
Übertragung (von<br />
Formularen), 219<br />
Upgrades, 4<br />
Validierung, 293<br />
Bing, 294<br />
Google, 293<br />
Variablen, 260<br />
Video, 207<br />
Einfügen von YouTube-<br />
Videos, 211<br />
Hinzufügen, 207<br />
Vorlage (Designvorlage), 30<br />
Erstellen von Websites,<br />
30<br />
Webseiten und Websites, 34<br />
Website (Studio-<br />
Registerkarte), 42, 47, 53<br />
Website-Eigenschaften, 46<br />
Website-Manager<br />
Prüfen des Layouts, 279<br />
Website-Prüfung, 279<br />
Websites, 34, 36
310 Index<br />
Erstellen aus einer leeren<br />
Seite, 36<br />
Öffnen bestehender<br />
Dokumente, 34<br />
Website-Struktur, 42<br />
Anzeigen, 44<br />
Website-Strukturansicht, 44<br />
Website-Suche, 146<br />
Website-Vorschau, 282<br />
Werbung, 150<br />
Werkzeuge<br />
Künstlerischer Text, 243<br />
Textrahmenwerkzeug, 78<br />
Wiederherstellen einer<br />
gespeicherten Version, 36<br />
Willkommen, 3<br />
YouTube-Video, 211<br />
Zähler<br />
Aktive Betrachter, 188<br />
Trefferzähler, 188<br />
Zeichen<br />
Formatvorlagen, 253<br />
Zugangskontrolle, 169, 183
Change language