Inhaltsverzeichnis 1. Willkommen ............................................. 1 Willkommen! .................................................................. 3 Neue Features ............................................................... 5 Installieren der Software .............................................. 10 2. Präsentieren Ihrer Website online ......... 13 Starten von WebPlus ................................................... 15 Arbeiten mit dem Serif Webhosting ..............................
Inhaltsverzeichnis Arbeiten mit Seiten und Master-Seiten ........................ 47 Hinzufügen, Entfernen und Neuordnen von Seiten ...... 53 Festlegen der Seiteneigenschaften.............................. 61 Einfügen von Hintergründen ........................................ 61 Arbeiten mit Farbschemata .......................................... 67 Die dynamischen Führungslinien ................................. 71 4. Die Layoutelemente ............................... 75 Einfügen von Textrahmen .........
Inhaltsverzeichnis 6. Interaktive Objekte............................... 137 Einfügen eines Rollovers ........................................... 139 Die Rolloveroptionen .................................................. 139 Einfügen von Rollover-Popups ................................... 143 Einfügen einer Website-Suche ................................... 146 Einfügen von Google Maps ........................................ 148 Einfügen einer Werbung ............................................ 150 7.
Inhaltsverzeichnis 10. Formulare ............................................. 213 Einfügen von Formularen ........................................... 215 Übertragen von Formularen ....................................... 219 11. E-Commerce-Objekte .......................... 225 Was bedeutet E-Commerce? ..................................... 227 Einfügen von E-Commerce-Objekten (PayPal) .......... 230 12. Text ......................................................
Inhaltsverzeichnis 14. Vorschau und Publizieren.................... 277 Arbeiten mit der Website-Prüfung .............................. 279 Öffnen einer Website-Vorschau ................................. 282 Publizieren im Web .................................................... 284 15. Website-Validerung und -Analyse ....... 291 Validieren Ihrer Website ............................................. 293 Analysieren der Webstatistik ...................................... 295 16. Anhänge ..................
Inhaltsverzeichnis
1 Willkommen
2 Willkommen
Willkommen 3 Willkommen! Willkommen zu WebPlus X6 von Serif, der unkomplizierten Komplettlösung für private und geschäftliche Websites. Um Ihnen die tägliche Arbeit zu erleichtern, enthält WebPlus eine breite Palette vordefinierter Designvorlagen, flexibler Navigationsleisten, kreativer Quelldateien und Formatvorlagen, die Sie flexibel anpassen und als Grundstein für Ihre Projekte einsetzen können.
4 Willkommen Upgrades von älteren Programmversionen Wenn Sie ein Upgrade von einer Vorgängerversion von WebPlus durchgeführt haben, werden Sie überrascht sein, wie viele fantastische neue Features (siehe Seite 5) die aktuelle Version zusätzlich bietet - und das zu einem unglaublichen Preis-LeistungsVerhältnis, das WebPlus weit von der Masse der Konkurrenzprodukte abhebt. Wir wünschen Ihnen viel Vergnügen und Erfolg bei der Arbeit mit Ihrem neuen Webdesign-Profi.
Willkommen 5 Neue Features • Präzise Verwaltung aller Webseiten mit der WebsiteStrukturansicht (siehe Seite 44) Die Übersicht in Vollbilddarstellung ist besonders praktisch für komplexe Websites. Endlich können Sie mit einem Blick die Zusammenhänge zwischen den Webseiten prüfen. Anhand der Seitenminiaturen in der Baumstruktur lässt sich genau erkennen, wie die Seiten miteinander in Verbindung stehen.
6 Willkommen • Umleitung von Desktop zu Mobil (siehe Seite 41) Leiten Sie Smartphone-Benutzer direkt von Ihrer für die Desktop-Darstellung optimierten Website auf die mobilen Seiten - wahlweise innerhalb einer Website mit Desktop- und Mobil-Seiten als auch zu einer völlig separaten Mobil-Website! Diese Umleitung erkennt sowohl Telefone als auch die Betrachtung mit bestimmten Bildschirmabmessungen.
Willkommen • 7 Validierung Ihrer Website mit Google und Bing (siehe Seite 293) Durch einen einfachen Nachweis, dass Sie der Besitzer der Website sind, können Sie wichtige Informationen zur Suchmaschinenoptimierung Ihrer Website einsehen und eine breite Palette von Webmaster-Tools einsetzen (Analytics und AdSense).
8 Willkommen Kreatives Design • Kreatives Arbeiten mit Quelldateien (siehe Seite 263) Mit der neuen Studio-Registerkarte „Quelldateien“ können Sie von Profis entworfene Seiteninhalte durchsuchen und bequem auf Ihren Seiten verteilen.
Willkommen • Benannte Schemafarben (siehe Seite 70) Verlieren Sie bei der Farbgestaltung der verschiedenen Seitenelemente auch hin und wieder die Übersicht? Geben Sie Ihren Farben doch einfach aussagekräftige Namen, wie z. B. „Hintergrund“ oder „Text - html“, sodass Sie mit einem Blick erkennen, für welchen Zweck Sie die Farben eingesetzt haben.
10 Willkommen Installieren der Software Systemanforderungen Minimale Systemanforderungen: • Windows-basierender PC mit DVD-Laufwerk und Maus • Eines der Betriebssysteme Microsoft Windows® XP (32 Bit), Windows® Vista oder Windows® 7 • 512 MB RAM (Arbeitsspeicher) • 434 MB freie Festplattenkapazität • Monitor und Grafikkarte, die eine Auflösung von 1024 x 768 ermöglichen • Internet Explorer 7 • Für den Zugriff auf die Onlineressourcen und das Publizieren der Projektdateien im World Wide Web we
Willkommen 11 Optional: • Windows-kompatibler Drucker • TWAIN-kompatibler Scanner und-/oder TWAINkompatible Digitalkamera • .NET 2.0 für die Textimportfilter von Word 2007/2010 + OpenOffice (Bestandteil der Standardinstallation) Die Erstinstallation Um Serif WebPlus X6 zu installieren, legen Sie einfach die Programm-Disc von WebPlus X6 in Ihr Disc-Laufwerk ein. Die AutoRun-Funktion sollte nun automatisch das Setup starten.
12 Willkommen
2 Präsentieren Ihrer Website online
14 Präsentieren Ihrer Website online
Präsentieren Ihrer Website online 15 Starten von WebPlus Nach dem ersten Programmstart wird automatisch der Startassistent eingeblendet, der Ihnen folgende Einstiegsmöglichkeiten in WebPlus bietet: Arbeiten mit dem Serif Webhosting Mit dem Serif Webhosting können Sie Ihre Website auf einem von Serif angebotenen Webspace publizieren. Ihre Website ist dann für alle Websurfer erreichbar.
16 Präsentieren Ihrer Website online Die neuesten Informationen zu den verfügbaren Hosting-Paketen finden Sie unter www.serif.com/hosting/. Beachten Sie bitte, dass unser Hosting-Angebot momentan nur in englischer Sprache verfügbar ist. Einrichten eines Kontos für das Serif Webhosting Nach dem Start von WebPlus lässt sich das Serif Webhosting problemlos konfigurieren. 1. Klicken Sie im Menü Hilfe auf Webhosting-Anbieter suchen. 2.
Präsentieren Ihrer Website online 3. 17 Drucken Sie im letzten Bildschirm die FTP-Kontodetails für Ihr Webhosting aus (oder archivieren Sie diese Daten auf eine andere Weise). Sie müssen diese Daten später noch per Kopieren und Einfügen nach WebPlus übertragen. Außerdem sollten Sie stets eine Sicherheitskopie für Notfälle griffbereit haben. Übertragen Ihrer Kontodetails WebPlus prüft automatisch, ob Sie in dem Programm Kontodetails zu Ihrem Webhosting eingetragen haben.
18 Präsentieren Ihrer Website online Auswählen eines Designs Mit WebPlus müssen Sie Ihre Projekte nicht von Grund auf selbst aufbauen. Sie können auch eine vollständige Website basierend auf einem Themenlayout zusammenstellen. Themenlayouts enthalten mehrere Vorlagenseiten, die alle einen ähnlichen Look aufweisen. Um ein Design zu bestimmen, wählen Sie einfach ein Themenlayout und ein Farbschema aus. Auswählen von Themenlayout und Farbschema 1. Starten Sie WebPlus. 2.
Präsentieren Ihrer Website online 19 Mit den Pfeiltasten Aufwärts/Abwärts können Sie jedes einzelne Schema bequem für eine Vorschau auswählen. 6. Klicken Sie anschließend auf die Schaltfläche Öffnen. Ihre Webseite wird nun in die Studio-Registerkarte Website eingefügt. Auswählen einer Pro-Vorlage Anstelle eines Themenlayouts können Sie auch Pro-Vorlagen verwenden. Diese mehrseitigen Vorlagen sind bereits mit Lizenzgebühr freien Bildern gefüllt.
20 Präsentieren Ihrer Website online Einfügen einer Grafik „Website im Aufbau“ Bevor Sie Ihre fertige Website „live“ im Internet präsentieren, sollten Sie mindestens eine Seite Ihrer geplanten Website publizieren, die eine Grafik „Website im Aufbau“ zeigt. Wenn Sie diese Seite publizieren und Ihre Website-Besucher die URL Ihrer Website aufrufen, stehen sie nicht „völlig im Dunkeln“, sondern sehen an dieser Grafik, dass Sie noch an Ihrer Website arbeiten und die Inhalte erst später verfügbar sind.
Präsentieren Ihrer Website online 21 5. Wählen Sie eine „Im Aufbau“-Grafik aus. 6. Klicken Sie auf die Schaltfläche Schließen. 7. Ziehen Sie die Grafik aus der Studio-Registerkarte Quelldateien unten auf Ihre Master-Seite. 8. Klicken Sie mit der rechten Maustaste auf die Grafik und in ihrem Kontextmenü auf Anordnen > An unterer Seitenkante festlegen. Nach dem Publizieren wird die Grafik „Website im Aufbau“ immer am unteren Rand der Seite(n) angezeigt, der bzw. denen Sie diese Master-Seite zuweisen.
22 Präsentieren Ihrer Website online Publizieren Ihrer Website Um Ihre Website online präsentieren zu können, müssen Sie die einzelnen Dateien an Ihren Webspace (Speicherplatz für Webseiten auf einem Internetserver) übertragen. 1. Öffnen Sie in der Standardsymbolleiste das Menü Website publizieren und klicken Sie auf Im Web publizieren. 2. Geben Sie in das Dialogfeld die URL dieser Website ein und wählen Sie den FTP-Kontonamen in dem Dropdownfeld FTP-Konto aus.
Präsentieren Ihrer Website online 23 Bearbeiten von Titel und Text Bearbeiten des Seitentitels 1. Führen Sie in der Studio-Registerkarte Website einen Doppelklick auf den Eintrag der Seite Home aus. 2. Führen Sie einen Doppelklick auf den Titeltext aus und geben Sie einen neuen Titel ein, wie z. B. den Namen Ihrer Firma. Bearbeiten des Textkörpers 1. Führen Sie auf der Seite einen Dreifachklick auf einen Textrahmen aus, um einen Absatz zu markieren. 2. Geben Sie den gewünschten Text ein.
24 Präsentieren Ihrer Website online Einfügen von Bildern Einfügen von Bildern in WebPlus 1. Klicken Sie in der Kategorie „Bilder“ der StudioRegisterkarte Quelldateien auf Hinzufügen. 2. Öffnen Sie in dem Dialogfeld einen Ordner mit Bildern und wählen Sie die gewünschten Bilder aus. 3. Klicken Sie anschließend auf die Schaltfläche Öffnen. Ihre Bilder werden nun als Miniaturen in der Kategorie „Bilder“ angezeigt.
Präsentieren Ihrer Website online 25 Einfügen von Bildern in eine Seite • Ziehen Sie aus der Kategorie „Bilder“ der StudioRegisterkarte Quelldateien eine Bildminiatur direkt auf die Seite, in einen Rahmentext oder künstlerischen Text (das Bild wird dann an der Position der Einfügemarke platziert) oder in einen Bildplatzhalter (siehe unten). ODER • Führen Sie einen Doppelklick auf einen Platzhalter aus, um ein Bild direkt aus einem Ihrer PC-Laufwerke einzufügen.
26 Präsentieren Ihrer Website online Einfügen einer neuen leeren Seite 1. Wählen Sie in der Studio-Registerkarte Website die Seite aus, nach der die neue Seite eingefügt werden soll. 2. Klicken Sie auf den Pfeil des Symbols Neue Seite oder neuen Link hinzufügen. Klicken Sie in dem nun geöffneten Menü auf Neue leere Seite. 3. Legen Sie in dem Dialogfeld „Seiteneigenschaften“ einen Seitennamen für Ihre neue Seite fest. 4. Klicken Sie auf die Schaltfläche OK.
3 Einrichten von Websites und Seiten
28 Einrichten von Websites und Seiten
Einrichten von Websites und Seiten 29 Der Startassistent Nach dem ersten Programmstart wird automatisch der Startassistent eingeblendet, der Ihnen folgende Einstiegsmöglichkeiten in WebPlus bietet: Die einzelnen Bezeichnungen der Optionen sind weitgehend selbsterklärend. Mit dem ersten Menü können Sie Websites von Grund auf neu erstellen oder mithilfe einer Designvorlage aufbauen. Bereits gespeicherte Websites lassen sich mit dem Assistenten ebenfalls öffnen.
30 Einrichten von Websites und Seiten • Datei öffnen: Hier finden Sie eine Liste der zuletzt geöffneten Websites. Um eine Vorschau für eine Website einzublenden, bewegen Sie einfach den Mauszeiger auf ihren Dateinamen! • Studienmaterial: Öffnen der Website mit Videos, Tutorials, Support und anderen Informationen. Bitte beachten Sie, dass dieses Material teilweise nur in englischer Sprache verfügbar ist. Standardmäßig wird der Startassistent automatisch bei jedem Programmstart von WebPlus aktiviert.
Einrichten von Websites und Seiten • 31 Seitenauswahl: Hier können Sie einige oder auch alle Vorlagenseiten auswählen (z. B. Homepage, Produkte, Downloads usw.), die Sie als Grundstein für Ihre Website verwenden möchten. Generell gibt es zwei Arten von Designvorlagen - Themenlayouts und Pro-Vorlagen. Themenlayouts Hier können Sie verschiedene Themen (z. B. „Arktis“) als Grundlage für Ihre Website auswählen. Die Seiten dieser Vorlagen enthalten jedoch keine Bilder, sondern Platzhalterrahmen.
32 Einrichten von Websites und Seiten Pro-Vorlagen Diese in Kategorien unterteilten Vorlagen enthalten Lizenzgebühr freie Bilder, sodass Sie schnell und einfach Ihre eigenen Websites zusammenstellen können. Sie müssen nur noch den Platzhaltertext durch Ihren eigenen Text ersetzen und anschließend die Website publizieren. Erstellen einer Website mit einer Designvorlage 1. Starten Sie WebPlus, oder klicken Sie im Menü Datei auf Startassistent..., um den Startassistenten zu aktivieren. 2.
Einrichten von Websites und Seiten 33 Pro-Designvorlagen Mit der Bildlaufleiste können Sie bequem durch alle verfügbaren Designs blättern. Um eine Kategorie zu reduzieren oder zu erweitern, klicken Sie auf das Symbol neben dem Kategorienamen. In dem rechten Feld werden automatisch die Miniaturansichten für die Seiten der ausgewählten Vorlage angezeigt. 4. Legen Sie in dem rechten Feld fest, welche Seiten Sie für Ihre Website verwenden möchten.
34 Einrichten von Websites und Seiten 5. Wählen Sie am oberen Rand des Dialogfelds ein Farbschema aus. Die ersten drei Optionen in diesem Dropdownfeld sind speziell auf die ausgewählte Vorlage zugeschnitten. Bei geöffneter Dropdownliste können Sie einfach mit den Pfeiltasten „Aufwärts“ und „Abwärts“ Ihrer Tastatur durch die Farbschemata schalten und direkt die Auswirkung der neuen Farbkombinationen auf die Seitenvorschau prüfen.
Einrichten von Websites und Seiten 35 Öffnen einer bestehenden WebPlus-Website mit dem Startassistenten 1. In dem Startassistenten werden unter „Datei öffnen“ Ihre zuletzt verwendeten Websites aufgelistet. Die als Letztes geöffnete Website steht hierbei ganz oben in der Liste. Um eine Miniaturvorschau der Website einzublenden, bevor Sie die entsprechende Datei öffnen, platzieren Sie den Mauszeiger einfach auf ihrem Listeneintrag. 2. Um eine Datei zu öffnen, klicken Sie auf ihren Namen.
36 Einrichten von Websites und Seiten Zurückgreifen auf die gespeicherte Version einer geöffneten Website • Klicken Sie im Menü Datei auf den Eintrag Wiederherstellen. Ersetzen von Schriftarten WebPlus bietet Ihnen die Möglichkeit, alle Schriftarten einer WebPlus-Website zu ersetzen, die nicht auf Ihrem Computer gespeichert sind. Dies kann z. B. vorkommen, wenn Sie ein Projekt auf einem anderen Computer erstellt oder Ihr Betriebssystem zwischenzeitlich neu installiert haben.
Einrichten von Websites und Seiten 37 Sie können diese Einstellungen jederzeit ändern, nachdem Sie den Assistenten geschlossen haben. Die Seitengröße und -höhe ist für alle Seiten identisch einschließlich einer Master-Seite, die automatisch angelegt und allen neuen Seiten zugewiesen wird. Ihre Navigationsleiste wird automatisch auf dieser MasterSeite platziert. Erstellen einer neuen Website ohne Vorlage mit dem Startassistenten 1. Starten Sie WebPlus.
38 Einrichten von Websites und Seiten Entwerfen mobiler Websites und Seiten Vor dem Boom der Mobiltelefone mit Internetzugang hießen Websites einfach nur Websites. Heutzutage werden Websites nicht länger nur auf normalen Computermonitoren betrachtet, sondern auch auf vielen Mobilgeräten, wie z. B. Apple iPhones, Blackberrys sowie Androidund Windows-Smartphones.
Einrichten von Websites und Seiten 39 Entwerfen mobiler Seiten innerhalb Ihrer Website Um mit der Seitenumleitung zu arbeiten, müssen Sie die mobilen Seiten erstellen und als Ziel angeben. In WebPlus können Sie mobile Seiten direkt mithilfe von Themenlayouts (siehe Seite 30) entwerfen, die speziell für mobile Websites konzipiert wurden und die „normalen“ Designs hervorragend ergänzen. Sie fügen diese Vorlagenseiten dann genau so in Ihre Website ein, wie die Vorlagenseiten für Desktop-Websites.
40 Einrichten von Websites und Seiten Verwalten der mobilen Dateien Einer der wichtigsten Punkte bei Hybrid-Websites ist die Trennung der mobilen Seiten von den Desktop-Seiten. Auf diese Weise lassen sich alle Seiten effizient verwalten und Sie können unabhängige Navigationsleisten für die Desktop- und Mobil-Seiten festlegen. Hier einige Tipps für Hybrid-Websites: • Ändern Sie die Dateinamen für mobile Seiten: Mobile Seiten erhalten einen anderen Namen, wenn Sie die Seiten in Ihre Website einfügen (z.
Einrichten von Websites und Seiten 41 Navigationsleiste bearbeiten. Klicken Sie auf Untergeordnete Seiten von... und wählen Sie die entsprechende Homepage in dem unteren Dropdownfeld aus. Stellen Sie hierbei sicher, dass die Optionen Untergeordnete Seiten einbeziehen und Homepage einbeziehen ebenfalls aktiviert sind. Umleiten zu/von Mobil-Seiten Für die Umleitung benötigen Sie eine Seite, auf der die Umleitung startet und eine „Zielseite“, zu der die Website-Besucher geleitet werden.
42 Einrichten von Websites und Seiten 4. Aktivieren Sie die Option Umleiten unter der Bedingung, damit die Umleitung nur erfolgt, wenn ein Mobiltelefon oder ein Desktop-Computer auf die publizierte Webseite zugreifen. Standardmäßig wird die Umleitung aktiviert, wenn die Website ein mobiles Gerät erkennt. Sie können die Umleitung aber auch von mobilen auf Desktop-Seiten festlegen oder dann durchführen lassen, wenn bestimmte Bildschirmabmessungen erkannt werden. 5.
Einrichten von Websites und Seiten 43 die anderen Seiten verzweigt. Dem Besucher Ihrer Website präsentieren sich die Inhalte dann in einer gewohnten, hierarchischen Anordnung, die in Sektionen und Strukturebenen unterteilt ist. • Eine Sektion ist eine Inhaltskategorie, die durch eine eigenständige Seite in Ihrer Website repräsentiert wird, wie z. B. „Home“, „Kontakt“, „Galerie“, „Produkte“ usw.
44 Einrichten von Websites und Seiten in Sektionen und Stufen aufteilen. Eine Struktur könnte zum Beispiel wie folgt aussehen: Mit dem Website-Strukturbaum können Sie die verschiedenen Bezüge zwischen den Seiten auf unkomplizierte, visuelle Weise erstellen und eine Struktur schaffen, die den Inhalten Ihrer Website genau entspricht. Bei einer Website finden sich natürlich immer auch Linkverzweigungen von einer Seite auf beliebige andere Seiten, sodass ein dichtes Netzwerk von Verknüpfungen entsteht.
Einrichten von Websites und Seiten 45 Anzeigen der Website-Struktur • Klicken Sie in der Standardsymbolleiste auf die Option Website-Struktur. Für eine ausgewählte Seite können Sie nun die üblichen Verwaltungsaufgaben erledigen, wie z. B. Einfügen, Klonen und Löschen oder die Bearbeitung der Seiteneigenschaften. Verwenden Sie hierzu einfach die Kontextleiste der Website-Struktur oder klicken Sie mit der rechten Maustaste auf eine Seitenminiatur.
46 Einrichten von Websites und Seiten Für die Sortierung können Sie eine Seite auf eine „Zielseite“ ziehen, an der dann quadratische Marker eingeblendet werden. Ziehen Sie einfach die Seite auf einen Marker, um die Seite entsprechend zu platzieren. Ziehen Sie die Seite auf A, wird die Seite vor der Zielseite in derselben Strukturebene eingefügt; bei B wird die Seite nach der Zielseite auf derselben Strukturebene platziert; bei C wird die Seite der Zielseite untergeordnet.
Einrichten von Websites und Seiten 47 „Seiteneigenschaften“ (siehe Seite 61) auch für einzelne Seiten verfügbar. Hier können Sie die „globalen“ Vorgaben der WebsiteEigenschaften ergänzen oder auch vollständig durch „lokale“ Werte für einzelne Seiten außer Kraft setzen. Die Website-Eigenschaften lassen sich wie folgt prüfen oder bearbeiten: • Klicken Sie im Menü Bearbeiten auf den Eintrag Website-Eigenschaften. Es wird nun das Dialogfeld „Website-Eigenschaften“ geöffnet.
48 Einrichten von Websites und Seiten der Arbeit mit Master-Seiten ist, dass sich diese Seiten mehreren Seiten zuweisen lassen (siehe folgende Abbildung). Die Elemente auf den Master-Seiten werden dann auch auf allen Seiten eingeblendet, die sich auf diese Master-Seite beziehen. Zusätzlich zu diesen gemeinsam genutzten „Hintergrundelementen“ legen Sie dann für jede einzelne Seite die individuellen Layoutbausteine wie Texte, Bilder usw. fest.
Einrichten von Websites und Seiten 49 Zuweisen anderer Master-Seiten Standardmäßig werden alle für eine Website neu angelegten Seiten mit der Master-Seite A erstellt. Möchten Sie jedoch eine andere Master-Seite verwenden, weisen Sie der Seite einfach Ihre gewünschte Master-Seite zu und ersetzen die ursprüngliche Master-Seite. Zuweisen anderer Master-Seiten zu Seiten 1.
50 Einrichten von Websites und Seiten und somit die Abfolge bestimmen, in der die entsprechenden Objekte auf der Seite platziert werden. Ein Beispiel: Ihre Website verwendet zwei Designs aus den Seiten „Master A“ und „Master B“. Mit dem Dialogfeld „Seiteneigenschaften“ können Sie „Master B“ mit dem IPSUMText vor der ausgewählten Seite platzieren, sodass „Master A“ als Seitenhintergrund fungiert. Zuweisen mehrerer Master-Seiten zu einer Webseite 1.
Einrichten von Websites und Seiten 51 In der Website-Struktur der Studio-Registerkarte „Website“ werden alle Seiten mit einem Pluszeichen markiert (anstelle eines Buchstabens wie „A“, „B“ usw.), denen mehrere Master-Seiten zugewiesen sind. Neuordnen der Seiteninhalte und Master-Seiten • Wählen Sie den Seiteneintrag in der Kategorie „MasterSeiten“ des Dialogfelds „Seiteneigenschaften“ aus und klicken Sie auf eine der Schaltflächen Aufwärts oder Abwärts.
52 Einrichten von Websites und Seiten Manchmal möchten Sie vielleicht die Seitenobjekte, die von der Master-Seite stammen, bearbeiten, ohne die Master-Seite zu verändern, sodass sich Ihre Änderung nur auf die aktuelle Seite auswirkt und nicht auch auf alle anderen Seiten, denen die MasterSeite zugewiesen ist. Sie können in diesen Fällen die Objekte von der Master-Seite auf die normale Webseite übernehmen.
Einrichten von Websites und Seiten 53 Hinzufügen, Entfernen und Neuordnen von Seiten In der Studio-Registerkarte „Website“ stehen Ihnen die folgenden Optionen zur Verfügung. • Einfügen von Seiten • Löschen von Seiten. • Einfügen einer oder mehrerer MasterSeiten. • Anordnen der Seiten in der Website-Struktur durch Klicken und Ziehen. • Einfügen von Seiten aus einer installierten Designvorlage. • Einfügen von Offsite-Links. • Einfügen von HTML-Seiten. • Festlegen einer Seite als Homepage.
54 Einrichten von Websites und Seiten sodass Sie auf einen Blick erkennen können, dass sich hinter diesen Einträgen reiner HTML-Code (siehe WebPlus-Hilfe) bzw. ein Link zu einer externen Webseite verbirgt. Einfügen von Seiten Hinzufügen einer neuen, leeren Seite 1. Wählen Sie in dem unteren Feld „Seiten“ der StudioRegisterkarte „Website“ die Seite aus dem WebsiteStrukturbaum aus, nach der Sie die neue Seite einfügen möchten. 2.
Einrichten von Websites und Seiten 55 Sie diese Optionen nicht mit dem Dialogfeld „Seiteneigenschaften“ außer Kraft setzen. Leere Seiten können ebenfalls auf einer Master-Seite basieren (z. B. wenn Sie die Website mit einer Vorlage erstellt haben) und daher bereits die Seitenelemente enthalten, die auf der Master-Seite festgelegt sind. Einfügen von Master-Seiten Hinzufügen einer neuen Master-Seite 1.
56 Einrichten von Websites und Seiten Wenn Sie eine Seite löschen, können Sie wahlweise alle Hyperlinks löschen, die von Ihrer Website auf die gelöschte Seite verweisen, oder die Hyperlinks auf eine andere Seite umleiten. Alle Hyperlinks, die auf Anker der gelöschten Seite verweisen, lassen sich ebenfalls löschen. Hinzufügen von HTML-Seiten HTML-Seiten lassen sich in die Website-Struktur jeder Website einfügen. Genau wie Standardseiten können Sie diese Seiten auch in die Navigation einbinden.
Einrichten von Websites und Seiten 57 oder über Schaltflächen verschieben. Für das Verschieben von Seiten stehen Ihnen unterschiedliche Ziele zur Verfügung: • Eine neue Position innerhalb der Reihenfolge (aufwärts oder abwärts) einer einzigen Strukturebene. • Eine übergeordnete Strukturebene • Eine untergeordnete Strukturebene Verschieben einer Seite 1. Öffnen Sie die Studio-Registerkarte „Website“. 2. Wählen Sie mit einem einfachen Mausklick die gewünschte Seite im Strukturbaum der Website aus.
58 Einrichten von Websites und Seiten zugewiesen ist, direkt zusammen mit der Seite in Ihr Projekt „importieren“. Einfügen einer neuen Seite aus einer Vorlage 1. Wählen Sie in der Studio-Registerkarte „Website“ die Seite aus, nach der die neue Seite eingefügt werden soll. 2. Klicken Sie über dem Feld „Seiten“ der StudioRegisterkarte „Website“ auf den nach unten zeigenden Pfeil des Symbols Neue Seite oder neuen Link hinzufügen. Klicken Sie in dem nun geöffneten Menü auf Neue Vorlagenseite. 3.
Einrichten von Websites und Seiten 59 Ihrer Website vorhanden ist. Ist die Master-Seite noch nicht Teil Ihrer Website, wird sie kopiert. • 5. Ohne Master-Seite: Die Master-Seite wird unter keinen Umständen in Ihre Website kopiert. Klicken Sie auf die Schaltfläche Öffnen. Die Seite wird nun in die Studio-Registerkarte „Website“ eingefügt. Einfügen von Offsite-Links Sie können ebenfalls einen Offsite-Link zu Ihrer Website-Struktur hinzufügen.
60 Einrichten von Websites und Seiten • Möchten Sie den Link in Ihre Website-Navigation integrieren, aktivieren Sie die Option In Navigation einbeziehen. • Möchten Sie die Seite als Untermenüeintrag in Navigationsleisten mit horizontalen Trennlinien unter oder über der Seite markieren, aktivieren Sie unter „Trennelemente“ die Option(en) Vor und/oder Nach.
Einrichten von Websites und Seiten 61 Festlegen der Seiteneigenschaften Ihre WebPlus-Website ist nach einer bestimmten Struktur aufgebaut und umfasst die eigentliche Website, eine oder mehrere Master-Seiten und einige einzelne Seiten. Für jeden Teil dieser Struktur können Sie unterschiedliche Eigenschaften festlegen, die entscheidend zu der Darstellung und Funktionalität der publizierten Website im Internet beitragen.
62 Einrichten von Websites und Seiten Darüber hinaus können Sie für den Hintergrund einzelner Seiten (oder aller Seiten Ihrer Website) auch bestimmte Farben über die Seiteneigenschaften und die Website-Eigenschaften (siehe Seite 61 und 46) festlegen. Hierfür lassen sich sowohl normale Farben als auch Schemafarben verwenden. Legen Sie das Hintergrunddesign über die WebsiteEinstellungen fest, übernehmen alle Seiten, die Sie neu erstellen, automatisch diese Einstellungen.
Einrichten von Websites und Seiten 63 6. Wählen Sie in dem nun angezeigten Dialogfeld aus, ob der Hintergrund für alle Seiten gelten soll (d. h. als Standardhintergrund der Website festgelegt wird) oder nur für die aktuelle Seite. Mit der ersten Option ersetzen Sie alle Hintergründe in Seiten, die für die Verwendung der Website-Einstellungen konfiguriert sind. 7. Klicken Sie auf die Schaltfläche OK.
64 Einrichten von Websites und Seiten Besonders professionelle Ergebnisse erzielen Sie, wenn Sie Hintergründe aus mehreren Bildern mit Bildtransparenzen und Objekten mit Verlaufstransparenzen kombinieren. Entwerfen von Hintergründen mit mehreren Bildern 1. Klicken Sie auf den Menüpunkt Bearbeiten > WebsiteEigenschaften und dann auf die Option „Hintergrund“. Klicken Sie auf Hinzufügen, um die Bilder in Ihren Hintergrund zu integrieren. 2. Stellen Sie die Optionen für Wiederholung und Position ein.
Einrichten von Websites und Seiten 65 3. Wählen Sie einfach eine andere Farbe über die Farbfelder aus, die Schemafarben und andere Farben anzeigen. Mit dem Eintrag Weitere Farben... öffnen Sie das Dialogfeld „Farbauswahl“. 4. Klicken Sie auf die Schaltfläche OK. Wenn Sie die Seitenfarbe als transparent festlegen, wird der darunter liegende Seitenhintergrund sichtbar, sodass die Seitenabmessungen unsichtbar scheinen. Der eigentliche Inhalt der Seite (Texte, Bilder usw.
66 Einrichten von Websites und Seiten Festlegen eigener Hintergründe 1. Öffnen Sie in dem Dialogfeld die Kategorie Hintergrund und legen Sie in dem Dropdownfeld Hintergrund die Option Seitenhintergrund verwenden fest. 2. Klicken Sie auf den nach unten zeigenden Pfeil der Tafel Seitenfarbe und wählen Sie eine Farbe aus. Die Schemafarben werden in diesem Menü mit ihren entsprechenden Nummern angezeigt. 3. Wiederholen Sie den vorangehenden Schritt für die Hintergrundfarbe.
Einrichten von Websites und Seiten 67 Arbeiten mit Farbschemata WebPlus bietet eine breite Palette an Farbschemata, die Sie bequem auswählen können, wenn Sie eine Website mit einer Designvorlage erstellen oder von Grund auf neu entwerfen. Bei der Arbeit mit Vorlagen-basierenden Websites bestimmt das Farbschema den Look Ihrer Seite und legt z. B. Farben für Hyperlinks fest.
68 Einrichten von Websites und Seiten Wie funktionieren Farbschemata? Farbschemata in WebPlus funktionieren ein wenig wie das Malen nach Zahlen. Sie weisen den verschiedenen Designelementen Ihrer Seite eine Schemafarbe zu, für die innerhalb des Farbschemas eine bestimmte Nummer festgelegt ist. Diese Farben werden in Farbfeldern gespeichert (nummeriert von 1 bis 12), die in der Studio-Registerkarte „Farbfelder“ aufgelistet sind.
Einrichten von Websites und Seiten 69 Wenn Sie Ihren Schemafarben eigene Namen verleihen, können Sie später schnell mit einem Blick feststellen, welche Aufgabe die Farbe in Ihrer Website übernimmt. Sie können sich hierbei an den Beschreibungen auf der rechten Seite orientieren. Nähere Informationen hierzu finden Sie unter „Festlegen von Namen für Schemafarben“ auf Seite 70.
70 Einrichten von Websites und Seiten Das Programm färbt nun alle Elemente der Website, denen eine der 12 Farbnummern des alten Schemas zugewiesen war, in der entsprechenden Farbe des neuen Schemas ein. Sie können für jede Website immer nur ein aktives Farbschema festlegen, das als Website-Farbschema bezeichnet und stets in der Studio-Registerkarte „Farbfelder“ angezeigt wird. Wenn Sie die Website speichern, wird ihr aktuelles Farbschema automatisch zusammen mit dem Dokument gespeichert.
Einrichten von Websites und Seiten 71 Weitere Informationen zu dem Festlegen von Schemafarben für Website-Hintergrund, Seitenfarbe, Hyperlinks, Textformatvorlagen und andere Seitenobjekte finden Sie in der WebPlus-Hilfe.
72 Einrichten von Websites und Seiten Ausrichten von Objekten Das folgende Beispiel zeigt die Arbeit mit dynamischen Führungslinien. Das dunkle Objekt ist bereits auf der Seite platziert, während das helle gerade an seine Position gezogen wird.
Einrichten von Websites und Seiten 73 Seitenmitte Sie können je nach Position Ihres gezogenen Objekts auch die obigen Ausrichtungsoptionen kombinieren, um z. B. eine Ausrichtung rechts und unten vorzunehmen. Dynamische Führungslinien werden rot oder blau angezeigt - je nachdem, ob die Ausrichtung an anderen Objekten oder der Seite erfolgt.
74 Einrichten von Websites und Seiten Skalieren von Objekten Das folgende Beispiel zeigt die Größenänderung von Objekten mit dynamischen Führungslinien. Das dunkle Objekt ist bereits auf der Seite platziert, während das helle gerade an seine Position gezogen wird.
4 Die Layoutelemente
76 Die Layoutelemente
Die Layoutelemente 77 Einfügen von Textrahmen Für gewöhnlich werden die Texte in WebPlus-Projekten in HTMLTextrahmen platziert, da sich diese „Container“ sowohl für einzelne Wörter und Absätze eignen als auch für ganze Buchkapitel oder Zeitungsartikel. Neben den Rahmentexten können Sie auch künstlerische Texte für einzelne Überschriften und Spezialeffekte erstellen oder Tabellentexte für eine zeilen- oder spaltenweise Darstellung (siehe auch „Einfügen von Tabellen“ auf Seite 103).
78 Die Layoutelemente Erstellen von HTML-Rahmen Rahmen lassen sich auf die gleiche Weise in Seiten einfügen, wie andere Objekte auch. Sie können alle Rahmen beliebig auswählen, verschieben und skalieren. Die Grundform der Rahmen lässt sich jedoch nicht ändern. Erstellen eines Rahmens 1. Klicken Sie in der Kategorie „Layoutelemente“ der Studio-Registerkarte QuickBuild auf das Symbol Textrahmen. 2. Ziehen Sie den Cursor mit gedrückter Maustaste über die Seite, um die Rahmenabmessungen selbst festzulegen.
Die Layoutelemente 79 Importieren von Texten Klicken Sie mit der rechten Maustaste auf einen Rahmen und in dem Kontextmenü auf Einfügen > Textdatei. Alternativ können Sie auch die Tastenkombination Strg+T drücken, um einen Text zu importieren. Direkte Texteingabe in den Rahmen Aktivieren Sie das Zeigerwerkzeug, klicken Sie in den Rahmen, um eine Einfügemarke zu platzieren, und tippen Sie den Text über Ihre Tastatur ein.
80 Die Layoutelemente Einrichten des Rahmenlayouts Das Rahmenlayout bestimmt, wie der Text durch den Rahmen fließt. Wenn Sie einen Rahmen auswählen und für den Rahmen Ränder eingestellt sind, werden die Rahmenränder als graue Strichlinien angezeigt. Diese Führungslinien bestimmen, wie der Text innerhalb des Rahmens fließt, indem sie den Abstand zwischen dem Text und der Rahmenkante vorgeben. Der Text eines Rahmens kann niemals außerhalb der Rahmenränder platziert werden.
Die Layoutelemente 81 Festlegen der Rahmenränder 1. Wählen Sie den Rahmen aus und klicken Sie in der Rahmenkontextleiste auf das Symbol Textrahmen einrichten. 2. Legen Sie in dem Dialogfeld unter „Rahmenränder“ die gewünschten Werte für Links, Rechts, Oben und Unten fest. Anpassen von Überlauftext Die genaue Aufteilung des gesamten Textes in Rahmen gehört zu den wichtigsten Punkten bei der Erstellung eines Webseitenlayouts.
82 Die Layoutelemente Um einen Rahmentext zu vergrößern oder zu verkleinern, nachdem Sie bereits die endgültige Größe und Position für den Rahmen festgelegt haben, stehen Ihnen in der Rahmenkontextleiste mehrere Optionen zur Verfügung. Einfügen von Bildern Die Kategorie „Bilder“ der Studio-Registerkarte Quelldateien lässt sich als „Sammelmappe“ für Bilder einsetzen, die Sie später auf den Seiten Ihrer Website platzieren möchten.
Die Layoutelemente 83 Einfügen von Bildern in die Studio-Registerkarte „Quelldateien“ Einsetzen von Bildern in die Registerkarte 1. Klicken Sie in der Kategorie „Bilder“ der StudioRegisterkarte Quelldateien auf Hinzufügen. 2. Öffnen Sie in dem Dialogfeld einen Ordner mit Bildern und wählen Sie die gewünschten Bilder aus. 3. Klicken Sie anschließend auf die Schaltfläche Öffnen. Die Studio-Registerkarte Quelldateien zeigt Ihre Bilder nun als Miniaturen in der Kategorie „Bilder“ an.
84 Die Layoutelemente sodass Sie stets im Auge behalten können, wie oft Sie das Bild bereits in der Website eingesetzt haben. Wenn Sie Bilder auf einer Seite platzieren, werden diese Dateien standardmäßig mit Ihrer Website verknüpft und nicht eingebettet.
Die Layoutelemente 85 Suchen von Bildern über ihre Marker • Klicken Sie unten in der Studio-Registerkarte Quelldateien in das Suchen-Feld und geben Sie den gewünschten Begriff ein, wie z. B. „Urlaub“. Alle mit diesem Marker gekennzeichneten Bilder werden nun über dem Suchen-Feld in einer temporären Ergebnisliste angezeigt.
86 Die Layoutelemente Anzeigen von Bildern in Lightboxen Lightboxen sind Popups, die sich unter anderem ideal für die Anzeige großer Bilder eignen. Um die große Bildversion einzublenden, müssen Ihre Website-Besucher lediglich auf eine Bildminiatur klicken. Der große Vorteil der Lightboxen besteht darin, dass die großen Bildversionen erst auf Wunsch des Betrachters mit einer Animation eingeblendet werden und nicht die ganze Zeit wertvollen Platz im Browserfenster belegen.
Die Layoutelemente 87 Öffnen des Studios für Ausschnitte 1. Wählen Sie ein Bild aus. 2. Klicken Sie auf die Schaltfläche Studio für Bildausschnitte in der Bildkontextleiste. Es wird nun das Studiofenster für das Extrahieren von Bildbereichen geöffnet. 3. Klicken Sie auf der linken Seite des Studiofensters auf das Werkzeug Bildbereich übernehmen oder Bildbereich entfernen und „übermalen“ Sie die Bereiche, die Sie entfernen bzw. behalten möchten.
88 Die Layoutelemente (A) Hauptsymbolleiste, (B) Arbeitsbereich, (C) Filterstapel, (D) Filterregisterkarten, (E) Registerkarte „Bilder“ Starten von PhotoLab 1. Wählen Sie das Bild aus, auf das Sie einen Filter anwenden möchten. 2. Klicken Sie auf die Schaltfläche PhotoLab der Bildkontextleiste. 3. Wählen Sie einen Filter der Filterregisterkarten aus („Favoriten“, „Korrekturen“ oder „Effekte“). 4.
Die Layoutelemente 89 Einfügen von Panels Panels sind „Schaukästen“ mit Informationen, die über Ihren Webseiten eingeblendet werden. Hier können Sie sowohl Bilder und Texte anzeigen (siehe unten) als auch Formen und Zeichnungen. Da die Panels über Ihren Webseiten in dem Browser der WebsiteBesucher angezeigt werden, können Sie den Informationsgehalt Ihrer Website schnell und einfach erweitern oder ändern, ohne das Layout der einzelnen Seiten modifizieren zu müssen.
90 Die Layoutelemente • Hilfreiche Tipps und Tricks • Kontaktdetails, Tastaturkürzel sowie andere Infos, auf die Website-Besucher schnell zugreifen möchten. • Permanent sichtbare Navigationselemente (umgewandelt aus einer Navigationsleiste wie auf Seite 115 beschrieben) • Vergrößerte Bildversionen Panels werden auch als Bausteine für animierte Slider (siehe Seite 109) verwendet.
Die Layoutelemente 91 3. (Optional) Legen Sie in dem Dialogfeld eine HTML-ID für das Panel fest. Sie können die Vorgabe für gewöhnlich direkt übernehmen, da die ID immer als einzigartige Zeichenkette festgelegt wird. 4. Klicken Sie in dem Dialogfeld auf die Panelvorschau. 5. Wählen Sie eine Panelvorlage in dem Menü aus. Die Vorschau wird nun mit dem ausgewählten Paneldesign aktualisiert. 6.
92 Die Layoutelemente Panel ist zu Beginn ausgeblendet. Für gewöhnlich werden Sie diese Option wahrscheinlich deaktivieren, um weiter an dem Design für Ihr Panel zu arbeiten. 10. Klicken Sie auf die Schaltfläche OK. Sie können ein Panel in den Standardabmessungen erstellen, indem Sie es einfach aus der StudioRegisterkarte „QuickBuild“ direkt auf eine Seite ziehen.
Die Layoutelemente 93 anbieten. Die Website-Besucher blenden dann einfach nur die für sie interessanten Panels ein und werden nicht mit Informationen überfrachtet. Für diese Einblendung müssen Sie ein Objekt als „Auslöser“ konfigurieren, dessen Aktion (siehe Seite 129) bei Mausberührung oder Mausklick das entsprechende Panel öffnet. Die Aktion verbindet dann das bereits erstellte Panel mit dem Objekt. Festlegen von Aktion und Panel 1.
94 Die Layoutelemente Das Panel wird nun auf der Seite durch das Symbol Ausgeblendetes Panel ersetzt. Das Panel ist immer noch vorhanden und lässt sich mit einem weiteren Klick auf die Schaltfläche „Panel ausblenden“ wieder sichtbar schalten. Die Schaltfläche „Panel ausblenden“ entspricht in Ihrer Funktion dem Kontrollkästchen Panel ist zu Beginn ausgeblendet.
Die Layoutelemente 95 Entwerfen eigener Hintergrundvarianten 1. (Optional) Wählen Sie in dem Dialogfeld „Panel Eigenschaften“ eine Vorlage aus, die Sie als Ausgangspunkt für Ihr Design verwenden möchten. 2. Klicken Sie in dem Dialogfeld auf das Symbol Bearbeiten. Das Design Studio wird nun aktiviert und zeigt automatisch Ihren Hintergrund im Arbeitsbereich an. 3. Sie können den Hintergrund nun mit den üblichen Werkzeugen und Registerkarten von WebPlus X6 anpassen.
96 Die Layoutelemente Einfügen einer Fotogalerie In WebPlus können Sie eine auf Flash™ oder JavaScript basierende Fotogalerie in jede beliebige Webseite einfügen. Für die Galerien stehen Ihnen unterschiedliche Designs mit verschiedenen Navigationsmethoden für die enthaltenen Bilder zur Verfügung. Die Galerietypen Für Ihre Flash- oder JavaScript-Fotogalerien stehen Ihnen sehr unterschiedliche Galerieformate zur Verfügung.
Die Layoutelemente 97 Professionelle Flash-Fotogalerie (Live Feed) Diese Galerien bieten die gleichen Optionen wie Professionelle Fotogalerien. Die Fotos lassen sich jedoch als Fotostream (in Form eines RSS-Feeds) aus Ihrem Konto bei flickr einfügen sowie aus jedem anderen Bildhosting-Service, der RSS 2.0 unterstützt, oder auch aus SlideShowPro Director.
98 Die Layoutelemente Einfügen einer Fotogalerie 1. Klicken Sie in der Kategorie „Layoutelemente“ der Studio-Registerkarte QuickBuild auf das Symbol Fotogalerie. 2. Um die Galerie mit einer Standardgröße einzufügen, platzieren Sie den Mauszeiger an der gewünschten Stelle der Seite und drücken die linke Maustaste.
Die Layoutelemente 5. 99 • Hinzufügen aller Fotos in einem Ordner Klicken Sie auf die Schaltfläche Ordner hinzufügen, um alle Bilder aus einem bestimmten Ordner zu importieren. ODER • Import aus Digitalkamera oder Scanner Klicken Sie auf die Schaltfläche TWAIN-Import. Falls Sie mehrere TWAIN-Geräte angeschlossen haben, klicken Sie zunächst auf den Pfeil der Schaltfläche und legen über den Menüpunkt Quelle auswählen... das gewünschte Modell fest.
100 Die Layoutelemente • (Nur für professionelle Flash-Fotogalerien) Um die Fotos mit Hyperlinks zu versehen, klicken Sie auf Hyperlink bearbeiten. Wählen Sie in dem Dialogfeld einen Hyperlinktyp aus. Sie können hier die Verwendung von Hyperlinks deaktivieren, Hyperlinks zu den Originalbildern erstellen oder Hyperlinks zu anderen Hyperlinkzielen festlegen (z. B. Seiten Ihrer Website oder einer anderen Website). 6.
Die Layoutelemente 101 Bearbeiten der Fotogalerie Nachdem Sie die Fotogalerie in eine Webseite eingefügt haben, lässt sie sich jederzeit bearbeiten. Bearbeiten einer Fotogalerie 1. Wählen Sie die gewünschte Galerie auf der Webseite aus. 2. Führen Sie einen Doppelklick auf die Galerie aus. Es wird nun das Dialogfeld „Fotogalerie“ angezeigt. Die Optionen in diesem Dialogfeld sind identisch mit denen, die für die Erstellung der Galerie verfügbar waren. 3.
102 Die Layoutelemente Bevor Sie eine Fotogalerie mit Live Feed erstellen, müssen Sie Ihr Konto bei flickr oder der Website von SlideShowPro Director aufsuchen. Dieser Schritt ist notwendig, da Sie den Link zu Ihren Fotos kopieren und dann in WebPlus einfügen müssen. Kopieren Ihres Fotolinks von der flickr-Website 1. Gehen Sie zu der Website flickr.com und melden Sie sich bei Ihrem Konto an. 2. Klicken Sie auf die Option für Ihren Fotostream. 3.
Die Layoutelemente 3. 103 Aktiveren Sie je nach der Fotodatenquelle, die Sie verwenden möchten, eine der Optionen RSS 2.0 Medien oder SlideShowPro Director. • Für die erste Option fügen Sie den kopieren Link für den RSS-Feed (siehe obige Beschreibung) in das entsprechende Dropdownfeld ein. ODER • Für die zweite Option fügen Sie den kopierten XML-Dateipfad (siehe obige Beschreibung) ein. Die Optionen der anderen Dialogfelder lassen sich genau so konfigurieren wie für die „normalen“ Galerietypen.
104 Die Layoutelemente Anstatt Ihre Tabellen von Grund auf neu zu erstellen, können Sie eines der vordefinierten Tabellenformate (d. h. eine Vorlage) von WebPlus verwenden. Wählen Sie einfach eine Formatierung aus und füllen Sie die Zellen mit den gewünschten Inhalten. WebPlus bietet Ihnen die folgenden Möglichkeiten: • Bearbeiten vordefinierter Formate, bevor Sie die neue Tabelle auf der Seite platzieren. • Erstellen Ihrer eigenen Formate, ohne eine Tabelle einzufügen.
Die Layoutelemente 105 5. Legen Sie die Tabellengröße fest. Dies ist die Anzahl der Zeilen und Spalten, aus denen das Tabellenlayout besteht. 6. Klicken Sie auf die Schaltfläche OK. Die neue Tabelle wird nun auf Ihrer Seite angezeigt. Um die Struktur und Zelleninhalte von Tabellen zu ändern, führen Sie die unter „Bearbeiten von Tabellen“ (siehe WebPlus-Hilfe) beschriebenen Schritte aus.
106 Die Layoutelemente Einfügen eines Kalenders 1. Klicken Sie in der Kategorie „Layoutelemente“ der Studio-Registerkarte QuickBuild auf das Symbol Kalender. 2. Klicken Sie auf Ihre Seite, oder ziehen Sie mit gedrückter Maustaste einen Begrenzungsrahmen in der gewünschten Größe für den Kalender. 3. Wählen Sie in dem nun geöffneten Kalenderassistenten die Optionen für Jahr und Monat sowie die Kalenderformatierung (quadratisch oder in ein- bzw. doppelspaltigem Layout) aus.
Die Layoutelemente 107 Anzeigen und Bearbeiten der Eigenschaften eines ausgewählten Kalenders 1. Klicken Sie auf die Schaltfläche Kalender bearbeiten der Kalenderkontextleiste. 2. Stellen Sie die gewünschten Optionen in den verschiedenen Registerkarten (Datum, Format, Termine usw.) ein und klicken Sie auf OK.
108 Die Layoutelemente Anzeigen öffentlicher Feiertage 1. Wählen Sie den Begrenzungsrahmen des Kalenders aus. 2. Klicken Sie in der Kalenderkontextleiste auf die Schaltfläche Kalendertermine. 3. Aktivieren Sie die Option Öffentliche Feiertage anzeigen. Einfügen persönlicher Termine Sie können die Liste der öffentlichen Feiertage (z. B.
Die Layoutelemente 109 5. Legen Sie in dem nun geöffneten Dialogfeld mit den Pfeilsymbolen oder dem Symbol Durchsuchen ein Datum fest. 6. Geben Sie den gewünschten Termintext in das Textfeld ein. Dieser Text wird dann in dem Kalender für das entsprechende Datum angezeigt. 7. Falls es sich bei dem Termin um einen Geburtstag oder einen ähnlichen Anlass handelt, der jedes Jahr anfällt, aktivieren Sie die Option Termin findet jedes Jahr statt. 8. Klicken Sie auf die Schaltfläche OK.
110 Die Layoutelemente Sie können auf jedem Panel eine Mischung aus Bildern, Texten, Linien und Formen platzieren. Wie in einer Diashow lassen sich die Panels auch so konfigurieren, dass sie in bestimmten Intervallen automatisch ein- und ausgeblendet werden. Eine manuelle Umschaltung zwischen den Panels ist ebenso möglich wie die Steuerung über einen Timer. Für die Darstellung der Panels stehen Ihnen verschiedene Animationstypen zur Verfügung. Sie können einfache Richtungsänderungen (z. B.
Die Layoutelemente 111 Einfügen eines Sliders 1. Klicken Sie in der Studio-Registerkarte Quelldateien auf Durchsuchen. 2. Klicken Sie in dem Dialogfeld Quelldatei-Browser unter Kategorien auf Slider/Panels. 3. Blättern Sie in dem Hauptfeld durch die verschiedenen Kategorien und klicken Sie auf die Miniatur eines Sliders. Möchten Sie alle Slider einer Unterkategorie verwenden, klicken Sie auf das Symbol Alles hinzufügen. Ausgewählte Miniaturansichten werden stets mit einem Häkchen markiert. 4.
112 Die Layoutelemente können. Alle Slider-Panels lassen sich hierbei präzise anpassen. Bearbeiten Ihres Sliders Standardmäßig enthält jeder Slider ein Set von Panels. Sie können den Slider jedoch wie folgt konfigurieren: • Hinzufügen, Kopieren und Löschen von Panels in dem Slider. • Einfügen von Inhalten in das aktuell sichtbare Panel. Bedenken Sie stets, dass Sie für jedes Panel in einem Slider die Inhalte genauso frei festlegen können, wie für ein eigenständiges Panel auf einer Webseite.
Die Layoutelemente 113 Gemischt: Eine Kombination der obigen Methoden. Akkordeon Horizontal/Vertikal: Die Panels werden aufeinander „gestapelt“, sodass immer nur eine Kante sichtbar ist. Overlay schieben/abblenden: Hierbei werden nur zwei Panels verwendet. Platziert ein Website-Besucher die Maus auf dem ersten Panel, wird das zweite über dem ersten eingeblendet. Bildlauf: Die Panels werden in einem Raster angeordnet, und die Ansicht wechselt von einem Panel zum nächsten.
114 Die Layoutelemente Jeder Slider verfügt über ein Vordergrundpanel, das seinen Inhalt permanent anzeigt. Dieses Panel ist daher perfekt für Kontaktinformationen, E-Commerce-Schaltflächen, Telefonnummern oder ein Bild, das Sie ständig eingeblendet halten möchten. Die Slidereigenschaften lassen sich jederzeit ändern, sodass Sie die Animationstypen und Wiedergabesteuerung genau an Ihre Vorstellungen anpassen können.
5 Die Navigationselemente
116 Die Navigationselemente
Die Navigationselemente 117 Einfügen von Navigationsleisten Mit den Navigationsleisten können Ihre Website-Besucher bequem zu den verschiedenen Seiten umschalten, wie z. B. Homepage, Galerie, Produkte und Kontakt. Die Navigationsleisten in WebPlus sind so programmiert, dass sie die Struktur Ihrer Website (siehe Seite 42) erkennen und automatisch berücksichtigen, sodass sich Website-Besucher später schnell zurechtfinden und problemlos durch die verschiedenen Seiten navigieren können.
118 Die Navigationselemente • Navigationstyp: Hier legen Sie fest, ob die Navigationsleiste auf der Website-Struktur oder einer von Ihnen selbst festgelegten Struktur basieren soll. • Darstellung: Hier bestimmen Sie das Design für Schaltflächen, Trennelemente und den Hintergrund der Navigationsleiste. Sie können wahlweise eine Vorlage verwenden oder die Designs auch selbst entwerfen.
Die Navigationselemente 6. 119 Wählen Sie in der Registerkarte Navigationstyp aus, ob der Aufbau der Navigationsleiste direkt aus der WebsiteStruktur Ihrer Website abgeleitet werden soll. Klicken Sie hierzu auf Basierend auf Website-Struktur. ODER Aktivieren Sie die Option Benutzerdefiniert und ändern Sie die Optionen der Navileiste (siehe auch „Anpassen der Navigationsstruktur“ auf Seite 120). Wenn Sie die Option „Website-Struktur“ verwenden, stehen Ihnen folgende Optionen zur Verfügung: 7.
120 Die Navigationselemente Über den Quelldatei-Browser können Sie Navigationsleisten aus den Quelldatei-Paketen auswählen. Klicken Sie hierzu einfach in der StudioRegisterkarte Quelldateien auf Durchsuchen und wählen Sie die Kategorie „Seiteninhalt“ aus. Unter den nun angezeigten Quelldateien finden Sie auch eine breite Palette an Navigationsleisten. Einige Navigationsleisten folgen dem aktuell verwendeten Farbschema, sodass Sie ihre Darstellung noch weiter anpassen können.
Die Navigationselemente 121 Anpassen einer ausgewählten Navigationsleiste 1. Führen Sie einen Doppelklick auf die Navigationsleiste aus. 2. Aktivieren Sie in der Registerkarte „Navigationstyp“ die Option Benutzerdefiniert. 3. Ändern Sie die Reihenfolge der Navigationsleistenelemente durch Klicken und Ziehen mit der Maus oder mithilfe der Schaltflächen Aufwärts, Abwärts, Überordnen oder Unterordnen. 4. Um einen neuen Link am Ende des benutzerdefinierten Navigationsbaums zu erstellen (z. B.
122 Die Navigationselemente Einfügen von Popup-Menüs Popup-Menüs sind ein wichtiger Bestandteil mehrstufiger Navigationsleisten (siehe Seite 115) und werden erst angezeigt, wenn Ihre Website-Besucher den Mauszeiger auf der entsprechenden Schaltfläche platzieren. In den Popup-Menüs werden die untergeordneten Seiten Ihrer Website-Hierarchie aufgelistet.
Die Navigationselemente 123 5. Klicken Sie in der Registerkarte Menüdarstellung des Dialogfeldes auf eine der Optionen Popup-Textmenü oder Popup-Grafikmenü. Die Einträge der Grafikmenüs bestehen nicht aus reinen Texten, sondern aus beschrifteten Schaltflächen. 6. Passen Sie das Design für Ihr Popup-Menü mit den Dropdownfeldern, Kontrollkästchen und Auswahlsymbolen an. Die Optionen für die Schaltflächen, Trennelemente und den Hintergrund von Popup-Grafikmenüs ähneln denen für Navigationsschaltflächen.
124 Die Navigationselemente Einfügen vordefinierter Schaltflächen 1. Klicken Sie in der Kategorie „Navigationselemente“ der Studio-Registerkarte QuickBuild auf das Symbol Schaltfläche. 2. Platzieren Sie den Mauszeiger auf der gewünschten Seitenposition und drücken Sie die linke Maustaste, um die Schaltfläche zu platzieren.
Die Navigationselemente 125 Über die Registerkarten „Erweitert“ und „Aktionen“ legen Sie Optionen für die Barrierefreiheit Ihrer Website und Attribute für Suchmaschinen-Bezüge (REL) fest sowie eine breite Palette an Aktionen (siehe Seite 129), die bestimmen, was die Website-Besucher mit einem Klick auf die Schaltfläche auslösen können.
126 Die Navigationselemente Nähere Informationen hierzu finden Sie in der Hilfe zu WebPlus. Bearbeiten des Schaltflächendesigns • Klicken Sie in der Kontextleiste auf das Symbol Schaltflächendesign bearbeiten. Einfügen von Hyperlinks und Aktionen Wenn Sie Objekte wie z. B. Wörter, Bilder usw. mit einem Hyperlink versehen, kann ein Besucher Ihrer Website mit einem Klick auf dieses Objekt ein frei definierbares Ereignis auslösen.
Die Navigationselemente 127 Einfügen von Hyperlinks Hinzufügen eines Hyperlinks 1. Wählen Sie mit dem Zeigerwerkzeug ein einzelnes Objekt, eine Objektgruppe oder einen Textabschnitt aus. 2. Klicken Sie in der Symbolleiste für Webeigenschaften auf die Option Hyperlink. Das Programm öffnet nun das Dialogfeld „Hyperlinks“. 3. Wählen Sie den Zieltyp für den Hyperlink aus, wie z. B. eine Website-Seite, Internetseite, ein Smart-Objekt usw. 4.
128 Die Navigationselemente • Um den Hyperlink zu modifizieren, wählen Sie einen neuen Zieltyp, ein neues Ziel und/oder andere Optionen aus. • Um den Hyperlink zu löschen, klicken Sie auf die Option Kein Hyperlink. Auswählen des Zielfensters Über die Registerkarte „Zielfenster“ im Dialogfeld „Hyperlink“ können Sie eine Reihe unterschiedlicher Fenster, Rahmen oder auch eine Lightbox festlegen, in denen das Linkziel angezeigt werden soll. Auswählen eines Zielfensters 1.
Die Navigationselemente 129 Anwenden von Aktionen Aktionen lassen sich für Objekte (nicht für Texte) festlegen und bieten Ihren Website-Besuchern mehr Interaktionsmöglichkeiten. Hierfür stehen Ihnen die folgenden Aktionen zur Verfügung, die gewöhnlich durch einen Mausklick oder das Platzieren der Maus auf dem Objekt ausgelöst werden: • Hinweis: Anzeigen eines Popup-Hinweisfensters (bei Mausklick). • Sichtbarkeit: Anzeigen eines Panels (bei Mausberührung oder Klick).
130 Die Navigationselemente • Slider-Feedback: Hiermit bestimmt der aktuelle Wiedergabestatus des Sliders den Schaltflächenzustand. Der Schaltflächenzustand ändert sich also dynamisch je nach momentaner Aktivität des Sliders. • Benutzerdefiniert: Hiermit können Sie selbst ein JavaScript festlegen, das als Reaktion auf einen Mausklick, Tastendruck usw. gestartet werden soll. Die Registerkarte „Aktionen“ wird nur angezeigt, wenn Sie ein Objekt auswählen.
Die Navigationselemente 131 Einfügen von Ankern Ein Anker ist eine bestimmte Position auf einer Webseite, die als Ziel für einen Hyperlink (siehe Seite 126) fungieren kann. Diese für die Website-Besucher unsichtbaren Anker markieren für gewöhnlich den Anfang von Absätzen, interessante Textstellen oder Bilder auf einer Webseite. Einfügen eines neuen Ankers 1. Markieren Sie mit dem Zeigerwerkzeug das gewünschte Objekt, oder platzieren Sie per Mausklick eine Einfügemarke in dem Zieltext. 2.
132 Die Navigationselemente Arbeiten mit Lightboxen Lightboxen bieten elegante und moderne Präsentationsmöglichkeiten für verschiedene Webinhalte, die dann einfach über Ihren Seiten eingeblendet werden. Wenn Sie auf ein Objekt mit entsprechendem Auslöser klicken, wird automatisch ein Popup-Fenster für die Lightbox geöffnet und zeigt den entsprechenden Inhalt an.
Die Navigationselemente 133 Erstellen einer Lightbox für die Bilder auf Ihrer Webseite 1. Wählen Sie ein Bild aus (vorzugsweise platziert als Bildminiatur). 2. Klicken Sie in der Symbolleiste für Webeigenschaften auf Hyperlink. 3. Wählen Sie in der Registerkarte „Hyperlink“ die Option Bild aus. 4. Legen Sie in der Registerkarte „Zielfenster“ die Option „Lightbox“ über das Feld Typ fest. 5.
134 Die Navigationselemente Lightbox-Diashows Sie können einfache Lightbox-Diashows aus den Bildern erstellen, die auf derselben Webseite platziert sind. In der Lightbox werden dann Steuersymbole eingeblendet, mit denen die Betrachter durch die Bilder navigieren können. Erstellen einer Lightbox-Diashow 1. Erstellen Sie eine Lightbox für ein Bild auf Ihrer Webseite (siehe oben). 2. Klicken Sie in dem Dialogfeld Hyperlink und Aktionen bearbeiten auf die Registerkarte „Zielfenster“. 3.
Die Navigationselemente 135 Anzeigen beliebiger Hyperlinkziele in Lightboxen Lightboxen lassen sich nicht nur für die Darstellung von Bildern einsetzen. Eine Lightbox ist im Grunde ein Fenster, in dem Sie jede Art von Hyperlinkziel (siehe WebPlus-Hilfe) einblenden können von den Seiten Ihrer Website (z. B. ein Formular oder eine Anmeldungsseite) bis zu beliebigen Internetseiten, Blogs, Foren oder RSS-Feeds.
136 Die Navigationselemente Einstellen der globalen Lightbox-Eigenschaften Genau wie bei den meisten Einstellungen in WebPlus können Sie auch die Lightbox-Einstellungen für die aktuelle Website anpassen. Zu den konfigurierbaren Optionen einer Lightbox gehören die allgemeine Lightbox-Steuerung (einschließlich Umrandungstyp), die Titelformatierung (Schriftart, -größe, -farbe und -deckkraft) sowie die Hintergrundoptionen (Farbe und Deckkraft). Ändern der Lightbox-Einstellungen für Ihre Website 1.
6 Interaktive Objekte
138 Interaktive Objekte
Interaktive Objekte 139 Einfügen eines Rollovers Bilder, deren Darstellung sich durch ein Mausereignis verändert, werden als Rollovergrafiken bezeichnet. Zu diesen Mausereignissen gehören z. B. ein Mausklick oder das Platzieren des Mauszeigers auf einem Objekt. Sie können ebenfalls Rollovergrafiken importieren, die mit Serif DrawPlus erstellt wurden. Nähere Informationen hierzu finden Sie in der WebPlus-Hilfe.
140 Interaktive Objekte Mouseover Dieser Zustand wird ausgelöst, wenn sich der Mauszeiger auf dem Objekt befindet. Klick Dieser Zustand wird durch einen Mausklick auf das Objekt ausgelöst (d. h. die Maustaste muss gedrückt werden, wenn sich der Mauszeiger auf dem Objekt befindet). Der hier nicht dargestellte Zustand Klick+Mouseover wird für ein Mouseover-Ereignis verwendet, das nach dem Klick auf das Objekt eintritt. Für jeden Rollovereffekt können Sie ebenfalls ein HyperlinkEreignis festlegen, wie z.
Interaktive Objekte 141 Erstellen einer Rollovergrafik 1. Erstellen Sie in einem Bildbearbeitungsprogramm die gewünschten Quellbilder für die verschiedenen Zustände des Effekts. 2. Klicken Sie in der Kategorie „Interaktive Objekte“ der Studio-Registerkarte QuickBuild auf das Symbol Rollover und ziehen Sie den Mauszeiger mit gedrückter Maustaste über Ihre Seite, um die Größe des Rolloverobjekts zu bestimmen. 3.
142 Interaktive Objekte • Möchten Sie dieses Rolloverobjekt mit anderen Rolloverobjekten auf der Seite so gruppieren, dass immer nur eines dieser Objekte im „Klick-Zustand“ angezeigt werden kann, aktivieren Sie für dieses und die anderen Rolloverobjekte der Gruppe die Einstellung Optionsfeld. 4. (Optional) Legen Sie in der Registerkarte Hyperlinks ein Hyperlinkziel für den Rollover fest. 5. Klicken Sie auf die Schaltfläche OK.
Interaktive Objekte 143 Einfügen von Rollover-Popups In WebPlus werden Rollover-Popups hauptsächlich für Bilder verwendet. Wenn ein Website-Besucher den Mauszeiger auf eine Bildminiaturansicht bewegt, wird automatisch eine vergrößerte Darstellung des entsprechenden Fotos eingeblendet (für gewöhnlich ein wenig gegen die Miniatur versetzt).
144 Interaktive Objekte • Standardmäßig wird das für „Normal“ ausgewählte Bild auch für die Mouseover-Variante verwendet (z. B. für Fotominiaturansichten). Mit der Schaltfläche Durchsuchen... können Sie aber auch ein völlig anderes Bild auswählen. • (Optional) Legen Sie für eines oder beide Bilder die Exportoptionen fest (siehe „Einstellen der Bildexportoptionen“ in der WebPlus-Hilfe).
Interaktive Objekte 145 • Mouseover Auswahl: Ein Bild für den Zustand „Mouseover“ wird ausgewählt und mit einem blauen Rand markiert. • Wenn Sie kein Bild auswählen, wird in dem Dropdownfeld der Eintrag Nein Auswahl angezeigt. 3. Sie können die Bilder nun durch Klicken und Ziehen neu positionieren. Um die Bildgröße zu ändern, ziehen Sie mit gedrückter Maustaste einen der Eckziehpunkte. Das Seitenverhältnis wird bei dieser Skalierung beibehalten.
146 Interaktive Objekte Indem Sie zusätzliche Normalbilder als separate Rollover-Popups auf einer Webseite platzieren, können Sie schnell und einfach eine interessante Galerie zusammenstellen, bei der sich die vergrößerten Bilder einfach per Mausklick auf die Miniaturen öffnen lassen. Bearbeiten von Rollover-Popups • Führen Sie einen Doppelklick auf das Normalbild einer Seite aus, um das Dialogfeld „Rollover-Popup bearbeiten“ zu öffnen. Stellen Sie die gewünschten Werte ein.
Interaktive Objekte 147 Formular für die Website-Suche: In dieses Textfeld geben die Website-Besucher den Begriff ein, nach dem die Webseiten durchsucht werden sollen. Sie fügen dieses Textfeld für gewöhnlich auf einer Master-Seite ein, damit es auf allen Seiten Ihrer Website verfügbar ist. In den Suchergebnissen werden dann ein Seitenname mit Hyperlink angezeigt sowie ein entsprechender Text der Webseite als Referenz. Klicken Sie einfach auf den Hyperlink, um zu der entsprechenden Seite umzuschalten.
148 Interaktive Objekte Sie das Funktionsobjekt am oberen Rand einer MasterSeite platzieren. Bearbeiten der Darstellung für ein Suchen-Objekt • Führen Sie einen Doppelklick auf das Suchen-Objekt aus, um sein Bearbeitungsfenster zu öffnen. Stellen Sie die gewünschten Werte ein. Einfügen von Google Maps Google Maps sind ideal, wenn Sie Ihren Website-Besuchern eine genaue Karte zu Ihrem Unternehmen oder den Anfahrtsweg zu einem besonderen Event zur Verfügung stellen möchten.
Interaktive Objekte 149 Einfügen einer Google Map 1. Klicken Sie in der Kategorie „Interaktive Objekte“ der Studio-Registerkarte QuickBuild auf das Symbol Google Map und ziehen Sie den Mauszeiger mit gedrückter Maustaste über Ihre Seite, um die Größe der Karte zu bestimmen. 2. Tragen Sie in dem Dialogfeld „Google Map“ Ihre Postleitzahl oder Adresse in das Feld Folgenden Ort suchen ein und klicken Sie anschließend auf Suchen.
150 Interaktive Objekte 4. Legen Sie eine Klickaktion für den Marker fest. Diese bestimmt, welche Informationen bei einem Mausklick angezeigt werden. 5. Klicken Sie auf die Schaltfläche OK. Der Marker wird in der Kartenvorschau nun grün angezeigt. Hieran erkennen Sie stets die aktuelle Auswahl. Wiederholen Sie diese Schritte, um nacheinander alle gewünschten Marker zu platzieren.
Interaktive Objekte 151 Nach der Registrierung müssen Sie einige Zeit warten, bis Google geprüft hat, ob Ihre Website die Bedingungen für AdSense-Werbungen erfüllt. Sie erhalten dann eine E-Mail mit der Antwort von Google. Besteht Ihre Website die Prüfung, können Sie Ihre eigenen Anzeigen erstellen und verwalten. Bei der Registrierung wird Ihre Website überprüft und Sie erhalten Werbungen, die zu dem Inhalt Ihrer Website passen. Erstellen und Verwalten von Anzeigen 1.
152 Interaktive Objekte Einbetten von Anzeigen in Ihre Webseite 1. Wählen Sie eine Webseite oder Master-Seite aus, auf der Sie die Anzeige platzieren möchten. 2. Öffnen Sie die Kategorie „Interaktive Objekte“ der Studio-Registerkarte QuickBuild und ziehen Sie das Symbol Google AdSense direkt auf Ihre Seite, um die Werbung in der Standardgröße zu erstellen. Die Abmessungen der Werbung lassen sich nicht ändern. Sie müssen die Werbung immer mit der von Google AdSense festgelegten Originalgröße verwenden.
7 Externe/Verwaltete Inhalte
154 Externe/Verwaltete Inhalte
Externe/Verwaltete Inhalte 155 Einfügen von Dokumentrahmen Mit WebPlus können Sie einen oder mehrere Rahmen auf einer Seite platzieren, um in diesen Rahmen eine andere Seite Ihrer Website anzuzeigen. Diese auf einer Seite eingebetteten Dokumentrahmen werden auch als „Inline Frames“ oder IFrames bezeichnet. Dokumentrahmen lassen sich genau wie Bilder an jeder beliebigen Stelle einer Seite platzieren und flexibel skalieren.
156 Externe/Verwaltete Inhalte Der Name des aktiven Dokumentrahmens besteht aus einer Kombination von Seiten- und Rahmennamen. Die Bezeichnung „Home:ifrm_6“ steht z. B. für die Seite „Home“ (also die Homepage) und den automatisch generierten Frame „ifrm_6“. Die Seiten lassen sich mit einer Weiterleitung zu dem Rahmen ausstatten, in dem sie angezeigt werden sollen. Dies ist besonders praktisch, wenn die Seiten über eine Suchmaschinenabfrage aufgerufen werden.
Externe/Verwaltete Inhalte 157 5. Wählen Sie in der Registerkarte „Inhalte“ ein Linkziel aus. Klicken Sie einfach auf eines der Symbole, um z. B. eine Seite Ihrer Website, eine Internet-Seite, ein SmartObjekt, oder eine Datei auf Ihrer Festplatte als Ziel auszuwählen. 6. Legen Sie die Informationen für den Inhalt des Rahmens (den Namen der Seite oder Internet-Seite usw.) fest. Je nach ausgewähltem Ziel können Sie in diesem Feld unterschiedliche Optionen einstellen. 7.
158 Externe/Verwaltete Inhalte Benutzerkonto für die Serif Webressourcen. Dieses Konto können Sie bequem anlegen, wenn Sie Ihren Blog erstellen. Als Besitzer des Blogs übernehmen Sie auch die Blogverwaltung. Sie können für den Blog z. B. Artikel hinzufügen, bearbeiten und entfernen sowie Kommentare löschen, die Website-Besucher zu den Artikeln hinterlassen haben. Blogs lassen sich ebenfalls so konfigurieren, dass mehrere Autoren Artikel zu dem Blog beisteuern können (siehe WebPlus-Hilfe).
Externe/Verwaltete Inhalte 159 Sie unter Neuer Benutzer auf Konto anlegen. ODER Besitzen Sie bereits ein Konto und sind angemeldet, wird das Dialogfeld „Blog bearbeiten“ geöffnet. 3. Geben Sie in das Dialogfeld einen Namen für Ihren Blog ein. Dieser Blogtitel wird auch am Anfang des im Web publizierten Blogs angezeigt. 4. (Optional) Geben Sie eine Beschreibung ein, um den Inhalt Ihres Blogs zu umreißen.
160 Externe/Verwaltete Inhalte Verwalten Ihres Blogs • Wählen Sie den Blog aus und klicken Sie in der Kontextleiste auf Verwalten. Nähere Informationen sowie eine Beschreibung der einzelnen Optionen finden Sie in der Hilfe zu den Webressourcen. Klicken Sie einfach in dem SmartObjekt-Dialogfeld des Blogs auf „Hilfe“. Weitere Informationen zu den Smart-Objekten finden Sie in der WebPlus-Hilfe.
Externe/Verwaltete Inhalte 2. 161 Ziehen Sie den Mauszeiger mit gedrückter Maustaste über Ihre Seite, um den Bereich und die Größe für das News-Fenster zu bestimmen. Sollten Sie noch kein Konto bei den Serif Webressourcen angelegt haben oder gerade nicht angemeldet sein, wird automatisch das Anmeldungsfenster für die Serif Webressourcen geöffnet. Um sich anzumelden, klicken Sie unter Neuer Benutzer auf Konto anlegen.
162 Externe/Verwaltete Inhalte Einfügen eines Forums Mit WebPlus können Sie ein Smart-Objekt für ein Forum auf Ihren Webseiten platzieren. Dieses Forum lässt sich dann flexibel in verschiedene Kategorien mit einem oder mehreren Unterforen aufteilen. Besucher Ihrer Website können dann die in den Unterforen geposteten Themen sowie die Antworten, den Autor eines Beitrags und das zuletzt eingefügte Posting sehen.
Externe/Verwaltete Inhalte 163 Wenn Sie viel unterwegs sind und häufig mit einem Laptop von unterschiedlichen geografischen Standorten arbeiten, können Sie diese verwalteten Inhalte jederzeit über die Serif Webressourcen aktualisieren. Sie müssen Ihre Website dann anschließend NICHT erneut publizieren. Einfügen eines Forums Foren lassen sich genau wie andere Objekte auf Seiten einfügen. Sie können jedoch das Forum auch über einen Offsite-Link als Fenster in voller Größe präsentieren.
164 Externe/Verwaltete Inhalte 4. Geben Sie eine Forumbeschreibung ein, um Ihren Website-Besuchern einen Eindruck von den diskutierten Inhalten zu vermitteln. 5. Klicken Sie auf die Schaltfläche Speichern. Das Forum wird nun auf Ihrer Seite platziert. Wenn Sie bereits ein Smart-Objekt für die Zugangskontrolle in den Serif Webressourcen angelegt haben und dieses verwenden möchten, wählen Sie den entsprechenden Eintrag in dem Dropdownfeld Zugangskontrolle (bestehend) aus.
Externe/Verwaltete Inhalte 165 Verwalten Ihres Forums Bis jetzt haben Sie nur ein Unterforum innerhalb einer einzigen Kategorie angelegt. Möchten Sie den Namen einer Kategorie oder eines Unterforums ändern oder weitere Kategorien hinzufügen und/oder zusätzliche Unterforen in den Kategorien erstellen, müssen Sie die Forumverwaltung verwenden. Hier legen Sie ebenfalls die Optionen für den Datenschutz, die Moderation, Themen und Benutzerränge (nach Anzahl der Postings) fest.
166 Externe/Verwaltete Inhalte • Zugriffsrechte für Benutzer einfrieren und Benutzer per Bann ausschließen: Manchmal geht es in Forumsdiskussionen nicht weniger hitzig zu, als in „realen“ Streitgesprächen. Von Zeit zu Zeit müssen die Forumsmoderatoren dann eingreifen, um die Diskussion wieder in die Bahn des eigentlichen Themas zu lenken und die Teilnehmer ermahnen, sich an die „Hausregeln“ zu halten.
Externe/Verwaltete Inhalte 167 Einfügen eines RSS-Readers Mit WebPlus können Sie RSS-Feeds von anderen Websites direkt auf Ihrer eigenen Webseite einblenden. Wenn Sie den Reader für den RSS-Feed auf Ihrer Seite einfügen, abonnieren Sie automatisch den entsprechenden RSS-Feed oder Podcast. Es gibt noch einige andere Methoden, um RSS-Feeds oder Podcasts über Webbrowser und iTunes zu abonnieren.
168 Externe/Verwaltete Inhalte 2. Kopieren Sie die URL für den Feed oder Podcast in die Zwischenablage, indem Sie mit der rechten Maustaste auf das Symbol klicken. 3. Klicken Sie in der Kategorie „Externe/Verwaltete Inhalte“ der Studio-Registerkarte QuickBuild auf das Symbol RSS-Reader. 4. Das Programm zeigt nun den Platzierungscursor an.
Externe/Verwaltete Inhalte 169 Die Zugangskontrolle Mit der Zugangskontrolle können Sie Sicherheitseinstellungen für Ihre Website festlegen, um z. B. nur bestimmten Personen Zugriff auf einzelne Webseiten zu gewähren oder den Zugang zu Ihren Foren oder anderen Features der Serif Webressourcen zu regulieren. • Für die Seitensicherheit: Hierbei können Sie Seiten mit einem Kennwort schützen oder ein Anmeldungsfeld auf einer Seite platzieren.
170 Externe/Verwaltete Inhalte • CMS: für die Verwaltung von Artikeln in Ihrem CMS. Die Zugangskontrolle wird über die Serif Webressourcen in Form eines Smart-Objekts vom Typ Benutzerliste gesteuert. Mit diesem Objekt können Sie Benutzergruppen und Benutzer verwalten sowie festlegen, wie sich die Benutzer anmelden müssen. Bei den Serif Webressourcen handelt es sich um einen sicheren Onlinedienst, dessen Hosting von Serif übernommen wird.
Externe/Verwaltete Inhalte 171 Einrichten des Smart-Objekts für die Benutzerliste Sie müssen zunächst das Smart-Objekt für die Benutzerliste erstellen und dann eine oder mehrere Gruppen anlegen, die mit diesem Smart-Objekt verbunden sind. Für gewöhnlich benötigen Sie ein Smart-Objekt pro Website. Mithilfe der einzelnen Gruppen können Sie dann festlegen, wer auf bestimmte Seiten oder SmartObjekt-Ressourcen zugreifen darf. Erstellen des Smart-Objekts für die Benutzerliste 1.
172 Externe/Verwaltete Inhalte 8. Klicken Sie auf Beenden, um sich bei den Serif Webressourcen abzumelden. Nachdem Sie das Smart-Objekt erstellt haben, können Sie mit der Funktion „Verwalten“ Benutzergruppen anlegen und dem Objekt zuweisen. Festlegen der Benutzeranmeldung und Sicherheitseinstellungen 1. Klicken Sie im Menü Einfügen auf Smart-Objekt. 2.
Externe/Verwaltete Inhalte 173 Erstellen von Benutzergruppen 1. Klicken Sie am oberen Rand des Dialogfelds auf die Option Gruppen. 2. Geben Sie nun in dem Abschnitt „Neue Gruppe erstellen“ eine Bezeichnung für die Gruppe in das Feld Gruppenname ein. Dieser Name sollte den Zweck der Gruppe widerspiegeln, wie z. B. „Fotozugriff“. 3. Klicken Sie auf die Schaltfläche Gruppe erstellen, prüfen Sie die Einstellungen in dem Dialogfeld und klicken Sie auf Fertig.
174 Externe/Verwaltete Inhalte Sie können wahlweise nur eine Benutzeranmeldung verwenden, sodass jeder Benutzer dieselben Anmeldungsdaten verwendet, oder auch jedem Benutzer eine bestimmte Anmeldung zuweisen (ideal für die Arbeit mit Mitgliederlisten). Eintragen von Benutzern durch selbstständige Registrierung Die Anmeldung durch Benutzer ist für einen eher öffentlichen Zugang konzipiert, bei dem es zu aufwendig wäre, alle Benutzer manuell zu kontrollieren.
Externe/Verwaltete Inhalte 3. 175 Geben Sie unter Neuen Benutzer hinzufügen die E-MailAdresse des Benutzers in das Feld E-Mail ein. Wenn Sie die Option Aktivierung anfordern auswählen, werden ein Aktivierungslink und ein automatisch erstelltes Kennwort per E-Mail an den Benutzer geschickt. Ist diese Option deaktiviert, wird lediglich das automatisch erstellte Kennwort per E-Mail zugesendet. Ist die Option Benutzer per E-Mail benachrichtigen aktiviert, wird eine E-Mail an den Benutzer gesendet.
176 Externe/Verwaltete Inhalte übertragen möchten, klicken Sie auf Alle hinzufügen). Der Benutzer gehört nun zu der ausgewählten Benutzergruppe. Um einen oder alle Benutzer aus einer Gruppe zu löschen, verwenden Sie die Schaltflächen Entfernen oder Alle entfernen. Wenn Sie die Benutzer nicht manuell hinzufügen und verwalten möchten (siehe oben), können Sie den Website-Besuchern auch die Möglichkeit einräumen, sich selbst anzumelden. Diese Anmeldung läuft über die Serif Webressourcen.
Externe/Verwaltete Inhalte 6. 177 Klicken Sie auf Gruppe aktualisieren und dann auf Fertig. Denken Sie daran, die Option Neue Benutzer bei Beitritt hinzufügen unter „Neue Gruppe erstellen“ zu aktivieren, wenn Sie eine neue Gruppe anlegen. Wenn sich ein Benutzer anmeldet, wird er automatisch in jede Benutzergruppe eingetragen, für die Sie die Benutzeranmeldung per Beitritt aktiviert haben. Aktivieren der Zugangskontrolle Aktivieren der Zugangskontrolle auf Ihrer Webseite 1.
178 Externe/Verwaltete Inhalte 4. Klicken Sie auf OK und dann erneut auf OK, um die Dialogfelder zu verlassen. In der Studio-Registerkarte „Website“ wird nun ein Schlüsselsymbol angezeigt. An diesem Symbol erkennen Sie, dass die Seitensicherheit für die entsprechende Seite festgelegt ist. Einfügen des Anmeldungsfeldes Mit WebPlus lässt sich schnell und einfach ein Feld auf einer Webseite platzieren, mit dem sich die Besucher an- und abmelden können.
Externe/Verwaltete Inhalte 179 Dialogfeld zu schließen. Klicken Sie anschließend auf die Schaltfläche Einfügen. 2. Einfügecursor an der Platzieren Sie den gewünschten Stelle und drücken Sie die linke Maustaste, um das Objekt mit einer Standardgröße einzufügen. 3. Aktivieren Sie die Selbstanmeldung für die Benutzer wie zuvor beschrieben (siehe Seite 176).
180 Externe/Verwaltete Inhalte Arbeiten mit Smart-Objekten Für verwaltete Inhalte Ihrer Webseiten können Sie in WebPlus die auf einem Server gespeicherten Smart-Objekte verwenden, die Daten von den Website-Besuchern auf einem sicheren Server namens Serif Webressourcen speichern. Sie können Ihre SmartObjekte direkt in WebPlus verwalten oder auch jederzeit über die Seite www.serifwebresources.com, nachdem Sie Ihre Website im Internet publiziert haben.
Externe/Verwaltete Inhalte Content Management System (CMS) 181 Mit diesem Objekt können Sie verschiedene Artikel-basierende Inhalte per Remote-Verbindung hinzufügen, bearbeiten, löschen oder in Kategorien sortieren, ohne dass Sie hierzu auf WebPlus zugreifen oder die Inhalte mit WebPlus publizieren müssen. Die Website-Besucher können die Artikel bewerten und kommentieren. Für das CMS können Sie separate Farben festlegen.
182 Externe/Verwaltete Inhalte News Mit diesem Objekt platzieren Sie ein News-Fenster auf Ihrer Seite. Sie können mithilfe der Studio-Registerkarte „QuickBuild“ ebenfalls ein News-Fenster auf Ihre Seiten ziehen. Nähere Informationen hierzu finden Sie unter dem Thema „Einfügen eines News-Fensters“ (siehe Seite 160). Abstimmung Buchungsassistent Shoutbox Mit dieser Ressource können Sie online eine Umfrage durchführen, um die Meinung der Website-Besucher zu einem bestimmten Thema einzuholen.
Externe/Verwaltete Inhalte Benutzerliste 183 Für die Benutzerliste können Sie zwei verschiedene Modi über ein PopupDialogfeld festlegen. • Modus für Mailingliste: Mit diesen Objekten können Website-Besucher Newsletter abonnieren, Einladungen bestätigen, Informationsmaterial anfordern usw. Die Listen lassen sich manuell kontrollieren oder mit einer Selbstanmeldung.
184 Externe/Verwaltete Inhalte WebPlus aktivieren können. Falls Sie noch keinen gültigen Benutzernamen sowie kein Kennwort besitzen, müssen Sie zuerst ein Konto bei den Webressourcen einrichten. • Falls Sie Ihre E-Mail-Adresse bereits bei Serif hinterlassen haben (z. B. im Zuge einer Produktregistrierung), müssen Sie nur einige Fragen beantworten, um die Kontoerstellung abzuschließen.
Externe/Verwaltete Inhalte 6. 185 Anschließend wird eine Bestätigungs-E-Mail an Ihre EMail-Adresse verschickt. Klicken Sie auf den Link in der E-Mail. Sie können sich nun bei den Serif Webressourcen anmelden, indem Sie auf Einfügen > Smart-Objekt klicken. Löschen der Kontodetails • Klicken Sie auf den Menüpunkt Extras > Optionen und dann in der Kategorie Optionen > Allgemein auf die Schaltfläche Kontodetails löschen.
186 Externe/Verwaltete Inhalte Erstellen von Smart-Objekten Smart-Objekte lassen sich über die Serif Webressourcen erstellen, indem Sie die Objekte zunächst in Ihre Smart-Objektbibliothek eintragen. In der Bibliothek können Sie alle Objekte verwalten und einzeln bearbeiten. Die Objekte lassen sich dann wahlweise sofort oder auch erst später in eine Webseite einfügen. Einige Smart-Objekte, wie z. B.
Externe/Verwaltete Inhalte 5. 6. 187 Gehen Sie in dem Dialogfeld wie folgt vor: • Geben Sie einen Namen für das Objekt ein. • (Optional) Wählen Sie ein zuvor angelegtes Profil in dem Dropdownfeld aus. • (Optional) Legen Sie den String für den OffsiteFilter fest. Hierdurch wird der Zugriff auf das Objekt auf die angegebene Domäne beschränkt und die URL lässt sich nicht kopieren. • (Optional) Sie können ebenfalls einige der objektspezifischen Einstellungen ändern, wie z. B.
188 Externe/Verwaltete Inhalte Einfügen von Smart-Objekten in Ihre Webseite 1. Klicken Sie in dem linken Feld des Dialogfelds „SmartObjekte“ auf das gewünschte Objekt und dann auf die Schaltfläche Einfügen. 2. Um das Objekt mit einer Standardgröße einzufügen, platzieren Sie den Mauszeiger an der gewünschten Stelle der Seite und drücken die linke Maustaste. ODER Ziehen Sie den Cursor über die Seite, um die Abmessungen des Smart-Objekts selbst zu bestimmen.
Externe/Verwaltete Inhalte 189 Bearbeiten von Smart-Objekten auf Ihrer Seite • Führen Sie einen Doppelklick auf das Objekt aus, um sein Bearbeitungsfenster zu öffnen. Wenn Sie ein Objekt auf der Webseite bearbeiten, werden die Änderungen ebenfalls in der Objektbibliothek umgesetzt. Eine Bearbeitung des Objekts in der Bibliothek verändert im Gegenzug auch das auf der Seite platzierte Objekt.
190 Externe/Verwaltete Inhalte Verwalten von Smart-Objekten direkt über das Internet • Melden Sie sich bei www.serifwebresources.com an, um Ihre Smart-Objekte unabhängig von der WebPlusWebsite zu verwalten. Für die Anmeldung bei den Webressourcen verwenden Sie dieselben Benutzerdaten wie zuvor. Nähere Informationen sowie eine Beschreibung der einzelnen Optionen finden Sie in der Hilfe zu den Webressourcen. Klicken Sie einfach in einem SmartObjekt-Dialogfeld auf „Hilfe“.
8 Soziale Netzwerke
192 Soziale Netzwerke
Soziale Netzwerke 193 Einfügen von Facebook-Objekten Mit Facebook-Objekten können Sie verschiedene Live-Feeds per Streaming auf Ihren Webseiten anzeigen oder auch eine „Gefällt mir“-Schaltfläche platzieren, über die Website-Besucher Ihre Seiten mit Freunden teilen oder auf ihren eigenen Facebook-Seiten für Sie „die Werbetrommel rühren“ können. Wir möchten Ihnen empfehlen, selbst ein FacebookKonto anzulegen, wenn Sie mit diesen Objekten arbeiten möchten.
194 Soziale Netzwerke Einfügen von Facebook-Objekten Diese Objekte lassen sich genau wie alle anderen Objekte direkt auf Ihren Seiten platzieren. Einfügen eines Facebook-Objekts 1. Klicken Sie in der Kategorie „Soziale Netzwerke“ der Studio-Registerkarte QuickBuild auf das Symbol Facebook-Objekt und klicken Sie dann auf einen Punkt der Seite, um das Objekt zu platzieren. 2.
Soziale Netzwerke • 195 Diesen Text anzeigen (nur für „Gefällt mir“Schaltfläche) Wählen Sie aus, ob auf der Schaltfläche der Text Gefällt mir oder Empfehlen stehen soll. 5. (Optional) Konfigurieren Sie die Darstellung des Objekts mit den übrigen Optionen (diese variieren je nach ausgewähltem Typ). 6. Klicken Sie auf die Schaltfläche OK. Bearbeiten von Facebook-Objekten Nachdem Sie es auf einer Seite platziert haben, können Sie das Facebook-Objekt jederzeit bearbeiten.
196 Soziale Netzwerke Einfügen von Twitter-Objekten Mit Twitter-Objekten können Sie verschiedene Live-Feeds per Streaming auf Ihren Webseiten anzeigen oder auch eine „Tweet“oder „Folgen“-Schaltfläche platzieren, die eine direkte Verbindung zu Twitter herstellt. Wir möchten Ihnen empfehlen, selbst ein TwitterKonto anzulegen, wenn Sie mit diesen Objekten arbeiten möchten. Weitere Informationen zu Twitter finden Sie unter www.twitter.com.
Soziale Netzwerke 197 Einfügen von Twitter-Objekten Die Twitter-Objekte lassen sich genau wie alle anderen Objekte direkt auf Ihren Seiten platzieren. Wie Sie die jeweiligen Objekte einfügen, hängt von der Art des Objekts ab. Einfügen von Favoriten-, Listen-, Profil- oder Suchen-Feeds 1. Klicken Sie in der Kategorie „Soziale Netzwerke“ der Studio-Registerkarte QuickBuild auf das Symbol Twitter-Objekt und klicken Sie dann auf einen Punkt der Seite, um das Objekt zu platzieren. 2.
198 Soziale Netzwerke • Benutzername (außer für Suchen-Feed) Geben Sie den Namen des Twitter-Kontos an, das Sie für den Stream abrufen möchten. • Liste (nur für Listen-Feed) Geben Sie den Namen der Liste an, die Sie für den Stream abrufen möchten. Diese Liste muss in dem Twitter-Konto vorhanden sein, dessen Benutzernamen Sie zuvor in das entsprechende Feld eingetragen haben. • Suchanfrage (nur für Suchen-Feed) Geben Sie hier den Ausdruck an, nach dem gesucht werden soll.
Soziale Netzwerke 199 Einfügen einer Tweet-Schaltfläche 1. Klicken Sie in der Kategorie „Soziale Netzwerke“ der Studio-Registerkarte QuickBuild auf das Symbol Twitter-Objekt und klicken Sie dann auf einen Punkt der Seite, um das Objekt zu platzieren. 2. Wählen Sie in dem Dialogfeld über das Dropdownfeld Typ die Option Tweet-Schaltfläche aus. 3. Aktivieren oder deaktivieren Sie in dem Vorschaufeld die Option Aktualisieren.
200 Soziale Netzwerke • Empfehlen Hiermit empfehlen Sie Ihren Website-Besuchern einen Twitter-Benutzernamen, dem die Besucher folgen können. Diese Empfehlung wird nach der Übermittlung des Tweets angezeigt. • Hashtag Geben Sie einen Ausdruck als Hashtag (Stichwort) ein (dieser Ausdruck darf keine Leerzeichen enthalten). Die Tweets lassen sich dann anhand dieses Hashtags suchen. 5.
Soziale Netzwerke 201 Bearbeiten von Twitter-Objekten Nachdem Sie es auf einer Seite platziert haben, können Sie das Twitter-Objekt jederzeit bearbeiten. Bearbeiten eines Twitter-Objekts 1. Wählen Sie das auf einer Seite platzierte Objekt aus. 2. Führen Sie einen Doppelklick auf das Objekt aus. Es wird nun das Dialogfeld für die Bearbeitung angezeigt. Die Optionen in diesem Dialogfeld sind identisch mit denen, die für die Erstellung des Objekts verfügbar waren. 3.
202 Soziale Netzwerke Registerkarte zeigt alle von einem Besucher empfohlenen Links an. Die „Google +1“-Schaltfläche kann ebenfalls anzeigen, wie viele Personen Ihre Webseite bereits empfohlen haben. Wir möchten Ihnen empfehlen, selbst ein Konto bei Google+ anzulegen, wenn Sie mit diesen Schaltflächen arbeiten möchten. Nähere Informationen zu Google+ finden Sie unter plus.google.com. Einfügen einer „Google +1“-Schaltfläche 1.
Soziale Netzwerke 3. 203 Nehmen Sie die gewünschten Änderungen vor und klicken Sie auf OK. Sie können einen Anker für Ihre Schaltfläche festlegen, indem Sie in der Kontextleiste auf Anker klicken. Weitere Informationen zu Ankern finden Sie unter „Einfügen von Ankern“ auf Seite 131.
204 Soziale Netzwerke Einfügen eines Lesezeichen-Symbolstreifens für soziale Netzwerke 1. Klicken Sie in der Kategorie „Soziale Netzwerke“ der Studio-Registerkarte QuickBuild auf das Symbol Lesezeichen-Symbolstreifen für soziale Netzwerke und klicken Sie dann auf eine beliebige Stelle Ihrer Seite, um das Objekt zu platzieren. 2. Um das Symbol für eine Website in den Streifen einzutragen, klicken Sie auf den Namen der Website in der Liste Nicht im Streifen enthalten und dann auf Hinzufügen.
9 Multimedia
206 Multimedia
Multimedia 207 Hinzufügen von Sounds und Videos In WebPlus können Sie Ihre Webseiten mit Sound- und Videodateien in vielen unterschiedlichen Formaten ergänzen. Hierzu gehören sowohl Streaming-Mediadateien als auch Standardformate (non-streaming). Darüber hinaus lassen sich mit WebPlus auch Videos von Dritten einfügen, die bereits auf YouTube gespeichert sind.
208 Multimedia einbetten. Obwohl durch das Einbetten die Dateigröße der Website ansteigt, wird diese Option als Standard verwendet, da Sie nach dem Einbetten nicht mehr auf viele verschiedene Dateien achten müssen. Somit verringert sich auch das Risiko, dass Sie eine der Dateien versehentlich löschen. Bei der Publikation Ihrer Webseite exportiert und kopiert WebPlus sowohl die eingebetteten als auch die nicht eingebetteten Dateien. Einfügen von Hintergrundsounds in eine Seite 1.
Multimedia 209 Erstellen eines Links von einem Symbol, Bild oder InlinePlayer 1. Klicken Sie in der Kategorie „Mediadateien“ der Studio-Registerkarte QuickBuild auf das Symbol Audio oder Video und anschließend auf Ihre Seite. 2. Wählen Sie die Speicherposition für die Mediadatei aus (entweder eine Datei auf Ihrem PC oder eine URL im Internet). 3. Wählen Sie eine Anzeigeoption für den Link aus (Symbol, Inline oder Bild). 4.
210 Multimedia 4. Wenn Sie die Datei nicht in Ihre Website einbetten möchten, deaktivieren Sie die Option Datei in Website einbetten. 5. Je nach gewünschter Darstellungsart für das Ziel können Sie ebenfalls in der Registerkarte Zielfenster des Dialogfelds eine Reihe von Zielfenstern oder Zielrahmen auswählen. Nähere Informationen hierzu finden Sie unter dem Thema „Einfügen von Hyperlinks und Aktionen“ auf Seite 126. 6. Klicken Sie auf die Schaltfläche OK.
Multimedia 211 fest. Wenn Sie die Animation von der WebPlus-Datei getrennt halten, und lieber eine Verknüpfung zu der Quelldatei in Ihre Seite einfügen möchten, deaktivieren Sie die Option Flash-Datei in Website einbetten. 3. Klicken Sie auf die Schaltfläche OK. Bearbeiten von Flash-Movies • Führen Sie einen Doppelklick auf Ihr Flash-Movie aus. Einfügen von YouTube-Videos Bereits im Internet publizierte YouTube-Videos lassen sich ebenfalls auf Ihren Webseiten platzieren.
212 Multimedia Einbetten von YouTube-Videos 1. Öffnen Sie die Website www.youtube.com in Ihrem Browser und wählen Sie das YouTube-Video aus, zu dem Sie einen Link erstellen möchten. 2. Kopieren Sie die URL-Adresse des Videos (oder den Einbettungscode). Der Code enthält eine einzigartige, alphanumerische ID, die den Videoclip eindeutig identifiziert. 3. Klicken Sie in der Kategorie „Mediadateien“ der Studio-Registerkarte QuickBuild auf das Symbol YouTube und dann auf einen Punkt Ihrer Seite. 4.
10 Formulare
214 Formulare
Formulare 215 Einfügen von Formularen Mit Webformularen können Sie auf effiziente und moderne Weise neue Informationen von den Besuchern Ihrer Website erfragen. Zu den am häufigsten genutzten Formularen gehören FeedbackFormulare, Gästebücher und Anfrageformulare. Formulardaten lassen sich auf unterschiedliche Weise sammeln per E-Mail, in einer Skriptdatei (lokal oder auf einem RemoteServer) oder über die Webressourcen von Serif.
216 Formulare Sie können die Formulare natürlich ebenfalls in der WebPlusVorschau kontrollieren (siehe „Öffnen einer Website-Vorschau“ auf Seite 282). Nachdem ein Website-Besucher die Daten in ein Feld eingegeben oder eine Option ausgewählt hat, werden die Daten bei der Übertragung des Formulars an ein zuvor ausgewähltes Ziel verschickt. An welche Empfänger lassen sich Daten schicken? Nach dem Absenden des Formulars können Sie die Daten an einen der folgenden Empfänger verschicken.
Formulare 217 Erstellen von Formularen Wenn Sie ein Formular erstellen möchten, können Sie entweder ein vordefiniertes Standardformular (siehe Beispiel) verwenden, einzelne Formularelemente für Ihr Formular platzieren oder ein Formular von Grund auf neu zusammenstellen. Für die ersten beiden Methoden steht Ihnen ein Formularassistent zur Verfügung. Erstellen von Standardformularen 1.
218 Formulare 5. 6. Im nächsten Dialogfeld können Sie Formularelemente hinzufügen, bearbeiten und löschen. • Um ein Element einzufügen, klicken Sie in dem Feld Hinzufügen auf die entsprechende Schaltfläche. • Um ein Standardobjekt zu verändern, wählen Sie das Element in dem oberen Feld aus und klicken auf die Schaltfläche Element bearbeiten. • Um ein Standardobjekt zu entfernen, wählen Sie das Element in dem oberen Feld aus und klicken auf die Schaltfläche Löschen oder drücken die Entf-Taste.
Formulare 219 Übertragen von Formularen Alle Webformulare müssen an einen bestimmten Empfänger versandt werden, damit ihre Daten ausgewertet werden können. Sie können zu diesem Zweck entweder manuell eine Schaltfläche Absenden erstellen oder die vorgefertigte Version des Formularassistenten verwenden. Diese zwingend erforderliche Schaltfläche wird häufig zusammen mit der Schaltfläche „Zurücksetzen“ in einem Formular platziert.
220 Formulare Eine E-Mail Adresse Mit dieser Option können Sie die allgemein üblichen POST- und GET-Übertragungsmethoden umgehen. Sobald der WebsiteBesucher auf die Schaltfläche „Absenden“ klickt, wird sein E-MailStandardprogramm gestartet. Die Formulardaten werden dann als ein Textstring in den Textkörper der E-Mail eingefügt und lassen sich schnell und einfach an die vorkonfigurierte E-Mail-Adresse schicken.
Formulare 221 „.CGI“, „.PL“, „.DLL“ oder „.EXE“) aus, die Sie verwenden möchten. 3. Aktivieren Sie die Option Datei einbetten, um die Skriptdatei in die WebPlus-Website zu integrieren. Ist diese Option deaktiviert, besteht keine Verbindung zwischen der Skriptdatei und der Website, sodass sämtliche Änderungen an der Skriptdatei von der Website nicht berücksichtigt werden. 4. Optional können Sie noch über die Schaltfläche Exportoptionen... einen Webdateinamen und -ordner für das Skript festlegen. 5.
222 Formulare Serif Webressourcen Wenn Sie den Webserver nicht selbst aufstellen und verwalten möchten, können Sie auch die Serif Webressourcen (siehe Seite 184) nutzen. Dieser kostenlose Service transferiert Ihre Formulardaten über einen Server von Serif an eine beliebig konfigurierbare E-Mail-Adresse. Aus Sicherheitsgründen müssen Sie zunächst ein Benutzerkonto bei den Serif Webressourcen anlegen, bevor Sie die E-Mail-Zieladresse für die Formulardaten festlegen können.
Formulare 223 Wenn Sie ein Formularelement vom Typ „Eingabefeld“ für die E-Mail-Adresse erstellen, können Sie die Bestätigungs-E-Mail auch direkt an den WebsiteBesucher senden. Hierzu müssen Sie in den Eigenschaften des Eingabefeldes die Option SWR: Bestätigungs-E-Mail senden aktivieren. Wenn Sie ein CAPTCHA-Formularelement in dem Formular verwenden, wird dieses als Spam-Schutz eingesetzt. Ist dieses Element nicht vorhanden, wird die SpamPrüfung über den CAPTCHA-Gateway abgewickelt.
224 Formulare Sie auf ihr alle Designelemente verwenden, mit denen Sie auch die anderen Seiten Ihrer Website erstellt haben. Hinzufügen Ihrer eigenen Bestätigungsseite 1. (Nur möglich bei der Übertragung der Daten über die Serif Webressourcen) Klicken Sie mit der rechten Maustaste auf das Formular und in seinem Kontextmenü auf Formulareigenschaften bearbeiten. 2. Klicken Sie auf die Schaltfläche Auswählen gegenüber dem Feld Umleiten zu. 3.
11 E-Commerce-Objekte
226 E-Commerce-Objekte
E-Commerce-Objekte 227 Was bedeutet E-Commerce? Als „E-Commerce“ bezeichnet man den Kauf und Verkauf von Waren über das Internet. Heutzutage ist der Einzelhandel über Online-Shops ein normaler Bestandteil unserer Internetaktivitäten geworden. Sicher haben Sie auch schon einmal Bücher, CDs, Konzertkarten oder Flugtickets über das Internet gekauft. Alle auf E-Commerce ausgerichteten Websites benutzen für gewöhnlich ein System für ihren Warenkorb sowie ein System für die Verarbeitung der Zahlungsmethoden.
228 E-Commerce-Objekte Umfang der Funktionen variieren je nach Dienstanbieter. Schauen Sie sich einfach um, welches Unternehmen Ihren Vorstellungen entspricht. Konfigurieren des Warenkorbsystems Ihres Dienstanbieters Über WebPlus lassen sich Warenkorbsysteme sehr flexibel konfigurieren. Als Kunde bei eBay® kennen Sie wahrscheinlich bereits das System PayPal®. Während der Konfiguration werden Sie zu der Website des Dienstanbieters geleitet, auf der Sie sich als registrierter Benutzer anmelden können.
E-Commerce-Objekte • 3. 229 Wenn Sie bereits Kunde bei einem Dienstanbieter sind, wählen Sie das Symbol Ihres Dienstanbieters aus und klicken dann auf Weiter>. Mit dieser Option legen Sie den standardmäßig verwendeten Dienstanbieter für Ihre Website fest. Da Sie bereits Kunde sind, müssen Sie kein neues Benutzerkonto anlegen. Die Zusammensetzung dieses Dialogfelds variiert je nach verwendetem Warenkorb-Anbieter. Für PayPal können Sie z. B.
230 E-Commerce-Objekte Sie können über das Dialogfeld ebenfalls die Position des Minicarts im Browserfenster festlegen und den im Minicart angezeigten Standardtext ändern oder löschen. 5. Nachdem Sie alle Einstellungen vorgenommen haben, klicken Sie auf Fertig stellen, um die Konfiguration abzuschließen. Nachdem Sie das Warenkorbsystem konfiguriert haben, müssen Sie ein E-Commerce-Objekt einfügen.
E-Commerce-Objekte 231 Wenn Sie z. B. eine bestimmte Menge Ziegelsteine verkaufen möchten, könnten Sie eine E-CommerceSchaltfläche (als „Jetzt kaufen“-Link) erstellen. Bei dieser Option wird jedoch angenommen, dass die Menge, Größe, die Variation und die Farbe des Artikels festgelegt sind (sich von dem Kunden also nicht ändern lassen). Da der Link nur über die Schaltfläche erstellt wird, sind keine weiteren „interaktiven“ Kaufoptionen (z. B. Farbe, Größe, Anzahl usw.
232 E-Commerce-Objekte Die nachfolgenden Schritte beziehen Sie auf das Einfügen von Objekten mit PayPal als Dienstanbieter für Ihren Warenkorb. Einfügen von E-Commerce-Formularen und -Schaltflächen 1. Klicken Sie in der Kategorie „E-Commerce“ der Studio-Registerkarte QuickBuild auf das Symbol ECommerce und klicken Sie dann auf einen Punkt der Seite, um das Objekt zu platzieren. 2.
E-Commerce-Objekte 233 (Optional) Wenn Sie kein Formular oder eine Schaltfläche verwenden möchten, aktivieren Sie die letzte Option und fügen dann den entsprechenden Code in das nächste Dialogfeld ein. Sie können hierfür z. B. einen Code verwenden, der von der PayPal-Website erstellt wurde. Diese Codevarianten finden Sie nach der Anmeldung unter den Händler-Tools. Klicken Sie auf Weiter>, um den Assistenten zu beenden und fügen Sie das HTML-Codefragment in Ihre Seite ein. 4.
234 E-Commerce-Objekte • Festlegen des Artikelnamens durch Kunde ermöglichen: Wenn Sie diese Option aktivieren, wird der obige Artikelname gegen ein Textfeld ausgetauscht, in das der Kunde seine eigene Bezeichnung eingeben kann. Diese Möglichkeit eignet sich ebenfalls gut für die Angabe von Spendendetails. • Artikel-ID: Hier können Sie den Textstring eingeben, mit dem PayPal den Artikel verarbeiten soll. • Währung: Einstellen der Währung, die für die Transaktion verwendet werden soll.
E-Commerce-Objekte • 235 Gewicht: Hier legen Sie ein Artikelgewicht fest, wenn Sie mit einer gewichtsbasierenden Versandmethode (nur für USA) arbeiten, die in Ihrem PayPal-Profil festgelegt ist. Für gewöhnlich werden Pfund (lb) als Maßeinheit verwendet, Sie können jedoch auch Kilogramm (kg) benutzen. Nachdem Sie alle gewünschten Einstellungen vorgenommen haben, klicken sie auf Weiter>.
236 E-Commerce-Objekte auf die Schaltfläche Weiter>. Diese Option ist für Wiederholungsformulare nicht verfügbar. 7. Legen Sie in dem Dialogfeld Artikeldetails entweder eine Standardmenge für den Artikel in dem entsprechenden Feld fest, oder aktivieren Sie das Kontrollkästchen, um dem Käufer die Eingabe der Artikelmenge an der Kasse zu ermöglichen (nicht für Wiederholungsformulare verfügbar).
E-Commerce-Objekte 9. 237 In dem letzten Dialogfeld legen Sie die Zahlungseinstellungen fest: • Wenn Sie über Ihre PayPal-Anmeldung bereits eine besondere Formatierung für Ihre Checkout-Seite festgelegt haben, können Sie die entsprechende Bezeichnung in das oberste Feld eingeben. • Legen Sie über das Dropdownfeld eine Sprache für die PayPal-Anmeldungsseite fest. • Ändern Sie den Text für die Schaltfläche „Fortsetzen“ auf der Website „Zahlung erfolgreich“.
238 E-Commerce-Objekte 11. Klicken Sie anschließend auf die Schaltfläche Fertig stellen. 12. Um das Formular oder eine Schaltfläche einzufügen, platzieren Sie den Mauszeiger auf der gewünschten Seitenposition und drücken die linke Maustaste. Bearbeiten von E-Commerce-Formularen und -Schaltflächen 1. Führen Sie einen Doppelklick auf das Formular oder die Schaltfläche aus. 2. Stellen Sie über die verschiedenen Dialogfelder die gewünschten Optionen für das E-Commerce-Objekt neu ein.
12 Text
240 Text
Text 241 Importieren von Texten aus einer Datei Das Importieren von Texten aus einer bestehenden Datei ist eine der einfachsten Möglichkeiten, den Text für eine Website zu erstellen. Alternativ können Sie den Text natürlich auch mit WritePlus neu verfassen. Wenn Sie Ihre Texte für gewöhnlich mit einer Textverarbeitung wie Microsoft Word erstellen, lassen sich die einzelnen Dateien schnell und unkompliziert in eine Website importieren. Neben dem WritePlus-Format „*.
242 Text Importieren von Texten aus einer Datei 1. (Optional) Wenn Sie den Text in einen bestehenden leeren Rahmen einfügen möchten, wählen Sie den Rahmen zunächst aus. Um den Text in einen Rahmen einzufügen, in dem bereits Text vorhanden ist, klicken Sie auf die Position, an der Sie den Text einfügen möchten, oder wählen den Textbereich aus, der durch den Dateiinhalt ersetzt werden soll. 2. Klicken Sie im Menü Text > Einfügen auf den Eintrag Textdatei. 3.
Text 243 Arbeiten mit künstlerischen Texten Künstlerische Texte sind separate Textobjekte, die Sie direkt auf der Seite eingeben und beliebig platzieren können. Diese Texte sind besonders praktisch für Überschriften, Zitate oder Spezialtexte und lassen sich mit den Standardwerkzeugen für Texte schnell und einfach formatieren. Erstellen von künstlerischen Texten 1. Wählen Sie das Objekt aus und klicken Sie in der Zeichnungsleiste auf das Symbol Künstlerischer Text. 2.
244 Text 4. Tippen Sie den Text direkt auf der Seite ein, um ein künstlerisches Textobjekt zu erstellen. Nach der Erstellung lassen sich künstlerische Textobjekte genau wie Textrahmen beliebig auswählen, verschieben, kopieren, vergrößern und verkleinern oder löschen. Sie können sowohl einfarbige Varianten (Volltonfarben), Farbverlaufs- und BitmapFüllungen als auch Transparenzen für die Formatierung verwenden.
Text 245 Alternativ können Sie auch ein Wort per Doppelklick auswählen. Sie können jetzt entweder einen neuen Text eingeben oder die Buchstaben und Absätze mit den entsprechenden Optionen formatieren, die Rechtschreibung prüfen, den Text in WritePlus bearbeiten usw.
246 Text Platzieren von Texten auf einem vordefinierten Kurvenpfad 1. Erstellen Sie einen künstlerischen Text. 2. Wählen Sie den Text aus und klicken Sie in der Textkontextleiste auf den Pfeil des Symbols Vordefinierte Textpfade und dann auf die gewünschte Pfadvariante. Der Text verläuft nun entlang der ausgewählten Pfadlinie. Hinzufügen von künstlerischen Texten zu einer bestehenden Linie oder Form 1.
Text 247 Anpassen bestehender Texte an bestehende Linien oder Formen 1. Erstellen Sie einen künstlerischen Text. 2. Zeichnen Sie eine Freihandlinie, Gerade, Kurve oder Form. 3. Wählen Sie beide Objekte aus. Klicken Sie im Menü Text auf Text an Pfad anpassen. Der Text verläuft nun entlang der ausgewählten Pfadlinie. Entfernen von Textpfaden 1. Wählen Sie das Textpfadobjekt aus. 2.
248 Text Auswählen und Eingeben von Texten Die Auswahl von Rahmentexten, künstlerischen Texten und Tabellentext funktioniert wie bei den meisten modernen Textverarbeitungen. Um die Bearbeitung zu vereinfachen, wird ein ausgewählter Bereich immer mit einer halbtransparenten, blauen Schattierung gekennzeichnet. Um ein Wort, einen Absatz oder den gesamten Text auszuwählen, führen Sie einen Doppel-, Dreifach- oder Vierfachklick aus.
Text 2. 249 Tippen Sie den neuen Text ein. Der Text wird nun entweder an der Einfügemarke platziert oder ersetzt den zuvor markierten Text. Starten neuer Absätze • Drücken Sie die Eingabetaste. Starten einer neuen Zeile (Einfügen eines manuellen Zeilenwechsels) • Drücken Sie die Tastenkombination Umschalttaste + Eingabetaste. Umschalten zwischen den Modi „Einfügen“ und „Überschreiben“ • Drücken Sie die Taste Einfg.
250 Text Einstellen von Texteigenschaften WebPlus bietet Ihnen für die Arbeit mit Rahmentexten, Tabellentexten und künstlerischen Texten eine breite Palette an Optionen und Werkzeugen, mit denen sich die Zeichen und Absätze Ihrer Texte komfortabel bearbeiten lassen. Einstellen der grundlegenden Textformatierung 1. Wählen Sie den gewünschten Text aus. 2.
Text 251 Arbeiten mit verschiedenen Schriftoptionen Eines der wirkungsvollsten Stilmittel bei der Arbeit mit Websites ist die Auswahl der Schriftart für Ihre Rahmentexte, künstlerischen Texte und Tabellentexte. Durch die Auswahl bestimmter Schriftarten lässt sich die Aussage der Texte häufig noch verstärken, und Sie können Ihren Lesern gezielt unterschiedliche Eindrücke vermitteln (z. B. mit sehr klaren oder extrem verspielten Schriftarten). Das Zuweisen von Schriftarten ist in WebPlus denkbar einfach.
252 Text Zuweisen einer Schriftart • Wählen Sie den gewünschten Text aus und klicken Sie in der Registerkarte „Schriften“ auf die gewünschte Schrift, um den Text entsprechend zu formatieren. Arbeiten mit Textformatvorlagen In WebPlus lassen sich Texte flexibel mit Textformatvorlagen (vordefiniert oder selbst erstellt) formatieren. Sie wählen diese Vorlagen einfach über ihre Namen aus und können sie dann auf Rahmentexte, Tabellentexte und künstlerische Texte anwenden.
Text 253 Vorlagen für Absatz- und Zeichenformatierungen Eine Absatzformatvorlage ist ein vollständiger „Konstruktionsplan“ für den Aufbau und die Darstellung eines ganzen Absatzes und enthält alle Formatierungsattribute für die Schriftart und den Absatzkörper. Jedem Absatz wird in WebPlus automatisch eine Absatzformatvorlage zugewiesen. Eine Zeichenformatvorlage enthält nur Schrifteigenschaften (Name, Größe, Fett, Kursiv usw.) und wird nur auf Zeichen angewendet d. h.
254 Text In der Studio-Registerkarte „Textformatvorlagen“ wird automatisch die Absatz- oder Zeichenformatvorlage angezeigt, mit der Sie den ausgewählten Text formatiert haben. Da Textbereiche sowohl mit Absatz- als auch mit Zeichenformatierungen formatiert werden können, zeigt das Feld Aktuelles Format der Registerkarte alle Formatierungsoptionen für den aktuellen Text an. Bearbeiten bestehender Formatvorlagen 1.
Text 4. 255 Klicken Sie auf Anwenden, um den Text zu aktualisieren oder auf Schließen, um lediglich die Formatvorlage zu speichern. Alternativ klicken Sie im Menü Text auf TextformatvorlagenPalette, um die Formatvorlagen und Standardeinstellungen für Text (siehe WebPlus-Hilfe) zu ändern. Löschen von Textformatvorlagen 1. Klicken Sie mit der rechten Maustaste auf eine Textformatvorlage und in dem Kontextmenü auf löschen. 2. Klicken Sie in dem nun geöffneten Dialogfeld auf Entfernen.
256 Text Formatvorlage in allen Textstellen der Absätze und Storys automatisch ersetzt. Auswählen und Ändern von Formatvorlagen in der gesamten Website 1. Klicken Sie in der Registerkarte Textformatvorlagen mit der rechten Maustaste auf eine angezeigte Vorlage. 2. Wenn die Formatvorlage bereits in der Website verwendet wird, enthält das Kontextmenü einen Eintrag „Alle n Instanz(en) auswählen“, wobei n der Anzahl der Texte entspricht, die mit der Vorlage formatiert sind.
Text 257 Formatierung) verwenden als auch für Textformatvorlagen einsetzen. Erstellen einer Aufzählung oder nummerierten Liste 1. Wählen Sie einen oder mehrere Absätze aus. ODER Setzen Sie per Mausklick eine Einfügemarke in einen Absatztext. 2. Klicken Sie in der Textkontextleiste auf Aufzählung oder Nummerierung. Wenn Sie anschließend in dem Absatz einen Zeilenumbruch einfügen, beginnt die neue Zeile automatisch mit dem entsprechenden Symbol oder der Nummer.
258 Text 4. Um die Nummerierung an der aktuellen Position des Cursors neu zu beginnen, aktivieren Sie die Option Nummerierung neu starten. 5. Klicken Sie auf OK, um die Listenformatierung zu übernehmen. Entfernen der Formatierung für eine Aufzählung oder Nummerierung 1. Wählen Sie den Absatz mit Listenformatierung aus. 2. Klicken Sie auf das Symbol Textkontextleiste. oder der Mit WebPlus können Sie Nummerierungen und Aufzählungen ebenfalls für Textformatvorlagen einstellen.
Text 259 Hinzufügen und Bearbeiten von Benutzerdetails 1. Klicken Sie in der Standardkontextleiste (angezeigt, wenn kein Objekt ausgewählt ist) auf Benutzerdetails. 2. Möchten Sie geschäftliche Benutzerinformationen festlegen, tragen Sie diese in die Registerkarte Geschäftliche Sets ein. Möchten Sie nur ein Set von Informationen verwenden, stellen Sie in der Dropdownliste Set auswählen die Option „Standard“ ein.
260 Text 2. Klicken Sie im Menü Text > Einfügen auf den Eintrag Informationen und in dem nun geöffneten Untermenü auf Benutzerdetails. 3. Wählen Sie eines der Benutzerdetails aus und geben Sie über Präfix oder Suffix die zusätzlichen Informationen ein, die Sie mit den Benutzerdetails anzeigen möchten, wie z. B. Name:. 4. Klicken Sie auf die Schaltfläche OK. In einer bestehenden Website lassen sich die Felder nach der Bearbeitung mit nur einem Mausklick aktualisieren.
Text 261 Einfügen, Bearbeiten und Löschen von Variablen 1. Klicken Sie in der Standardkontextleiste (angezeigt, wenn kein Objekt ausgewählt ist) auf Benutzerdetails. 2. Wechseln Sie zu der Registerkarte Global oder Website, um die Variablen für alle Websites bzw. nur für die aktuell geöffnete Website festzulegen. 3. Klicken Sie in einer der Registerkarten auf die Schaltfläche Hinzufügen. 4.
262 Text 2. Klicken Sie im Menü Text auf den Eintrag Einfügen > Informationen und in dem nun geöffneten Untermenü auf Variable. 3. Wählen Sie in dem nun geöffneten Dialogfeld den Variablentyp (Global oder Website) der gewünschten Variable aus den Benutzerdetails aus. 4. Klicken Sie auf den Eintrag einer Variable und legen Sie optional einen Text als Präfix oder Suffix fest, der zusammen mit der Variablen angezeigt werden soll. 5. Klicken Sie auf die Schaltfläche OK.
13 Quelldateien für kreative Designs
264 Quelldateien für kreative Designs
Quelldateien für kreative Designs 265 Arbeiten mit Quelldateien Quelldatei ist der Oberbegriff für alle Objekte oder Seitenelemente, die Sie auf Ihren Dokumentseiten platzieren können, um deren Layout, Wirkung und Funktionalität genau an Ihre Vorstellungen anzupassen. Die Quelldateien reichen von Grafiken, Bildern, Bildrahmen, Schaltflächen, Slidern und Panels sowie Hintergründen zu komplexen Seiteninhalten und auch ganzen Seiten.
266 Quelldateien für kreative Designs Arbeiten mit der Registerkarte „Quelldateien“ Die Studio-Registerkarte Quelldateien ist wie eine umfangreiche Ressourcenbibliothek, aus der Sie einfach die verschiedenen Layoutelemente für Ihre Webseiten „ausleihen“. Die Quelldateien lassen sich in folgende Kategorien einteilen. • Eigene Designs: Hier werden die Quelldateien gespeichert, die Sie als Objekte von der Seite in die Registerkarte gezogen haben.
Quelldateien für kreative Designs 267 • Bildrahmen: Hier finden Sie die Bildrahmen aus Quelldatei-Paketen. • Seiteninhalt: Hier finden Sie Seiteninhalte (die aus unterschiedlichen Seitenobjekten zusammengesetzt sind) aus den Quelldatei-Paketen. Zu dieser Kategorie gehören Navigationsleisten, Gruppen aus Textrahmen, Formen und Spaltenhintergründe. • Hintergründe: Hier sind die Hintergründe aus den Quelldatei-Paketen gespeichert.
268 Quelldateien für kreative Designs Die zu Beginn noch leere Registerkarte lässt sich schnell und einfach über den Quelldatei-Browser mit Layoutelementen Ihrer Wahl füllen. Der Quelldatei-Browser Mit dem Quelldatei-Browser können Sie die gewünschten Elemente gezielt nach Quelldatei-Kategorien und Quelldatei-Paketen (Paketdateien) sowie auch nach Markern (Tags) suchen. Wählen Sie einfach in der entsprechenden Anzeige die Elemente aus, die Sie in die Studio-Registerkarte Quelldateien aufnehmen möchten.
Quelldateien für kreative Designs 269 Durchsuchen von Quelldateien nach Kategorie 1. Klicken Sie in der Studio-Registerkarte Quelldateien auf Durchsuchen. 2. Wählen Sie in dem Quelldatei-Browser eine Kategorie in dem Abschnitt Kategorien aus. Die installierten Paketdateien werden nun in dem Hauptfeld angezeigt (z. B. für „Aktiv“). 3. Blättern Sie einfach durch die Liste der Pakete, um die Elemente in jedem Paket zu betrachten. Durchsuchen von Quelldateien nach Paketdatei 1.
270 Quelldateien für kreative Designs Suchen nach Quelldateien Die Suchfunktion filtert die Quelldateien nach vordefinierten und selbst angelegten Markern, die für alle im Quelldatei-Browser angezeigten Quelldatei-Pakete festgelegt sind. Anwenden von Suchfiltern • Für eine einfache Suche geben Sie einfach das gewünschte Wort oder den gewünschten Buchstaben in das Textfeld Suchen oben rechts in dem Dialogfeld ein. Diese Methode ist ideal für alle Marker, Sie selbst angelegt haben.
Quelldateien für kreative Designs 271 mit Tieren suchen, wählen Sie den Marker „Tier“ dieser Markerkategorie. • Um nach einem bestimmten Marker zu filtern, wählen Sie dem Markernamen in der Liste Marker des Quelldatei-Browsers aus. Diese Liste finden sie unter der Liste „SmartMarker“. Um mehrere Marker auszuwählen, klicken Sie mit gedrückter Strg-Taste auf ihre Namen.
272 Quelldateien für kreative Designs Alle in der Studio-Registerkarte Quelldateien gespeicherten Elemente, die Sie noch nicht auf einer Seite platziert haben, stehen Ihnen das nächste Mal automatisch zur Verfügung, wenn Sie die Website öffnen. Sie können Quelldateien auch für alle WebsiteProjekte verfügbar schalten, indem Sie die Quelldateien in ihren Kategorien arretieren.
Quelldateien für kreative Designs • Bildrahmen • Ausgewählte Layouts verschiedener Seitenobjekte • Hintergründe • Seiten 273 Um ein Design zu speichern, kopieren Sie es durch Ziehen aus seiner Seite in die Studio-Registerkarte Quelldateien. Aus dieser Registerkarte lässt es sich dann jederzeit wieder auf andere Seiten ziehen. Hintergründe und Seiten lassen sich jedoch nicht aus Ihrem Arbeitsbereich ziehen. Sie müssen diese Elemente direkt über die Kategorien der Registerkarte importieren.
274 Quelldateien für kreative Designs Speichern Ihrer Designs in der Kategorie „Eigene Designs“ • Ziehen Sie ein Objekt von der Seite und legen Sie es in der Kategorie „Eigene Designs“ der Studio-Registerkarte Quelldateien ab. Sie müssen die Kategorie hierfür nicht extra erweitern, WebPlus übernimmt diesen Schritt automatisch für Sie. Speichern der Kategorie „Eigene Designs“ Alle Designs, die Sie in der Kategorie „Eigene Designs“ speichern, werden als Paketdatei namens „Eigene Designs.
Quelldateien für kreative Designs 3. 275 Klicken Sie auf die Schaltfläche OK. Die Seite wird nun in der Kategorie „Seiten“ angezeigt. Speichern von Hintergründen Genau wie Seiten können Sie auch selbst definierte Hintergründe aus Ihrer Website in der Studio-Registerkarte Quelldateien speichern. Diese Elemente werden dann in der Kategorie „Hintergründe“ abgelegt. Speichern eines Hintergrunds 1.
276 Quelldateien für kreative Designs Speichern eines Designs in anderen Kategorien • Ziehen Sie das Objekt von der Seite und legen Sie es in einer anderen Kategorie ab. Arretieren von Kategorien und einzelnen Quelldateien Sie können einzelne Quelldateien und ganze Kategorien der Studio-Registerkarte Quelldateien für alle Websites zugänglich machen (d. h. sie global verfügbar schalten), indem Sie die Objekte/Kategorien arretieren.
14 Vorschau und Publizieren
278 Vorschau und Publizieren
Vorschau und Publizieren 279 Arbeiten mit der Website-Prüfung Die Website-Prüfung durchsucht Ihre Website nach häufig auftretenden Layoutproblemen, die bei der Seitennavigation, Textformatierung, Formularen, E-Commerce-Objekten und anderen Elementen auftreten, und zeigt diese Probleme anschließend an. Die Funktion sucht nach einer breiten Palette von Problemen. Zu den typischen Fehlerquellen gehören: • Doppelt vorhandene HTML-IDs für Objekte. • Ungültige Anker oder Hyperlinks.
280 Vorschau und Publizieren von WebPlus bevorzugte erste Wahl für das jeweilige Layoutproblem. Wurde einem Text z. B. eine Schrift zugeordnet, die nicht als websicher eingestuft ist, können Sie für den Text einfach eine websichere Schrift einstellen. Wenn Sie bestimmte Problemtypen ignorieren oder sich erst später mit den Lösungsmöglichkeiten befassen möchten, können Sie die Problemanzeige filtern. Nähere Informationen hierzu finden Sie in der WebPlus-Hilfe. Prüfen auf Website-Probleme 1.
Vorschau und Publizieren 281 Standardmäßig werden Ressourcen nach der Spalte für die Seiten geordnet. Sie können die Sortierung der Liste jedoch beliebig verändern, indem Sie auf die Kopfzelle einer Spalte klicken. Um die primäre oder sekundäre Korrekturlösung für ein Problem in dem unteren Textfeld einzublenden, klicken Sie auf den Eintrag des Problems. Automatische Korrektur mehrerer Probleme 1. Um alle Probleme auszuwählen, aktivieren Sie die Option Seite in der linken oberen Ecke der Problemliste.
282 Vorschau und Publizieren Manuelle Problemkorrektur 1. Führen Sie einen Doppelklick auf den Eintrag eines Problems in der Spalte Korrektur aus. 2. Führen Sie die in dem Dialogfeld vorgeschlagenen Schritte aus. Mit der Schaltfläche Anzeigen können Sie direkt zu dem problematischen Objekt (z. B. einem Formular) auf der betroffenen Webseite umschalten. 3. Ist die Schaltfläche Bearbeiten verfügbar, können Sie mit einem Klick das Dialogfeld öffnen, das für die Korrektur des Problems benötigt wird.
Vorschau und Publizieren 283 Prüfen Ihrer Website per Vorschau 1. Klicken Sie in der Standardsymbolleiste auf den nach unten zeigenden Pfeil des Symbols WebsiteVorschau. 2. Wählen Sie eine der folgenden Optionen aus dem Menü aus: • Vorschau im Fenster (Internet Explorer) (Tastaturkürzel: Alt+P): Dieser Befehl öffnet die Website in einem neuen internen WebPlus-Fenster, sodass Sie über die Reiter der Fensterregisterkarten bequem zwischen Vorschau- und Bearbeitungsfenster umschalten können.
284 Vorschau und Publizieren Publizieren im Web Wenn Sie Ihre Website im World Wide Web publizieren möchten, müssen Sie die fertige WebPlus-Website an einen Server übertragen, der Ihnen von einem Internetdienstanbieter für das so genannte „Hosting“ der Seiten zur Verfügung gestellt wird. Sie können wahlweise alle Webseiten publizieren oder nur die Seiten, die seit dem letzten Publikationsvorgang aktualisiert wurden.
Vorschau und Publizieren 285 Festlegen der FTP-Kontoinformationen 1. Klicken Sie auf die Schaltfläche Konten, um das Dialogfeld Upload an Server zu öffnen. 2. Klicken Sie auf Hinzufügen. 3. Gehen Sie in dem Dialogfeld Kontodetails wie folgt vor: • Kontoname: Geben Sie einfach eine beliebige Bezeichnung Ihrer Wahl ein. Diese Bezeichnung dient nur der leichteren Identifikation des Kontos in WebPlus, falls Sie mit mehreren Konten arbeiten.
286 Vorschau und Publizieren • Wenn Sie das Kennwort nicht bei jeder Dateiübertragung neu eingeben möchten, aktivieren Sie einfach die Option Kennwort speichern. Das Kennwort wird nun auf Ihrem Computer gespeichert. • Passiver Modus: Sofern keine FTPVerbindungsprobleme auftreten, lassen sie diese Option aktiviert. Sollten Sie sicher sein, dass Ihre FTP-Details korrekt sind, lassen sich Ihre Verbindungsprobleme vielleicht durch eine Deaktivierung der Option Passiver Modus beseitigen.
Vorschau und Publizieren 5. 6. 287 Für die Speicherung der FTP-Kontodetails stehen Ihnen zwei Optionen zur Verfügung: • auf Ihrem PC (die Kontodetails werden in WebPlus gespeichert und auch dann nicht gelöscht, wenn Sie einen Programmstart mit gedrückter Strg-Taste durchführen). ODER • in der aktuellen Website (nähere Informationen hierzu finden Sie unter dem Thema „Arbeiten mit FTP-Kontoinformationen“ in der WebPlus-Hilfe).
288 Vorschau und Publizieren Sie unter dem Abschnitt „Der automatische Ablauf“ in der WebPlus-Hilfe. 4. Aktivieren Sie die Option Alle Seiten publizieren, oder klicken Sie auf die einzelnen Kästchen, um bestimmte Seiten für die Publikation zu markieren. 5. Wenn Sie eine Sicherheitskopie des WebPlus-Projekts anlegen möchten, aktivieren Sie die Option Backup des Dokuments auf Remote-Server erstellen. Falls Sie das Projekt noch nicht gespeichert haben, wird nun eine Speicheraufforderung eingeblendet. 6.
Vorschau und Publizieren 289 Legen Sie in dem Dialogfeld fest, ob Sie einen Inkrementellen Upload oder einen Vollständigen Upload durchführen möchten. Mit dem inkrementellen Update werden nur die Dateien übertragen, die Sie seit dem letzten Upload verändert haben. Bei inkrementellen Updates können Sie WebPlus anweisen, fehlende Dateien zu suchen, indem Sie die entsprechende Option aktivieren.
290 Vorschau und Publizieren Anzeigen der publizierten Website Nachdem Sie die Webseiten publiziert haben, können Sie Ihr Werk mit der Option Website online prüfen im Menü Website-Vorschau der Standardsymbolleiste prüfen. Die Website wird nun in ihrem zuletzt aktualisierten Status in Ihrem Standardwebbrowser angezeigt. Wenn Sie diese Funktion das erste Mal benutzen, wird ein Dialogfeld geöffnet, in das Sie die Standardadresse (URL) der Website eingeben müssen.
15 Website-Validerung und -Analyse
292 Website-Validerung und -Analyse
Website-Validerung und -Analyse 293 Validieren Ihrer Website Wenn Sie mit den verschiedenen interaktiven Webdiensten von Google oder Bing arbeiten möchten, müssen Sie Ihre Website validieren lassen. Dieser Schritt ist notwendig, damit Sie als Besitzer der Website identifiziert werden können. Auf diese Weise sind vertrauliche Informationen nur für Sie und Google bzw. Bing zugänglich. Die Google-Validierung Über Google können Sie verschiedene Webmaster Tools verwenden, wie z. B.
294 Website-Validerung und -Analyse 4. In WebPlus aktivieren Sie in dem immer noch geöffneten Dialogfeld die Option Diese Website mit Google Webmaster Tools validieren. 5. Aktivieren Sie je nach der zuvor ausgewählten Validierungsmethode eine der Optionen Mit einer Datei... oder Mit einem Meta-Tag.... Im ersten Fall wählen Sie die heruntergeladene HTML-Datei aus und klicken auf Öffnen. Im zweiten Fall klicken Sie auf die Schaltfläche Einfügen, um den Meta-Tag einzufügen. 6.
Website-Validerung und -Analyse 295 Analysieren der Webstatistik Mit der Statistik für Ihre Website können Sie die Nutzung der verschiedenen Seiten überwachen und feststellen, ob Ihre Website die in sie gesetzten Erwartungen erfüllt. Anhand der vielen verschiedenen Daten können Sie dann einfacher entscheiden, wo und wie sich Ihre Website noch verbessern lässt. In WebPlus werden die Informationen mit Google Analytics zusammengetragen.
296 Website-Validerung und -Analyse 3. Klicken Sie auf die Schaltfläche Aus Zwischenablage einfügen, um den zuvor von der „Google Analytics“Website kopierten Code einzufügen. Der Code wird nun in Ihrem Dialogfeld angezeigt und lässt sich nicht bearbeiten. 4. Klicken Sie auf die Schaltfläche OK. Damit die Analyse korrekt funktioniert, muss der Code in Ihrem Profil bei Google Analytics dieselbe Webeigenschafts-ID (z. B. UA-10378445-7) besitzen wie Ihre WebPlus-Website.
16 Anhänge
298 Anhänge
Anhänge Serif-Kontaktinformationen Technischer Support Information dazu, wie Sie technische Unterstützung und Antworten auf produktspezifische Fragen erhalten sowie zur Kontaktaufnahme mit Serif finden Sie unter www.serif.com/de/kontakt. Serif-Hauptniederlassung: The Software Centre PO Box 2000, Nottingham, NG11 7GW, Großbritannien Telefon +44 115 914 2000 Fax +44 115 914 2020 Online Webadresse: http://www.serif.com/de Internationale Anfragen Bitte wenden Sie sich an unseren Firmenhauptsitz.
300 Anhänge Warenzeichen und Copyright-Vermerke Dieses Handbuch und die darin beschriebene Software werden im Rahmen eines Endbenutzer-Lizenzabkommens zur Verfügung gestellt, das dem Produkt beiliegt. Angaben zur erlaubten und untersagten Verwendung sind in dem Lizenzabkommen enthalten. Warenzeichen Serif ist ein eingetragenes Warenzeichen von Serif (Europe) Ltd. WebPlus ist ein eingetragenes Warenzeichen von Serif (Europe) Ltd. Alle anderen Serif-Produktnamen sind Warenzeichen von Serif (Europe) Ltd.
Anhänge 301 THE PROXIMITY/COLLINS DATABASE © 1990 William Collins Sons & Co. Ltd.; © 1990 Proximity Technology Inc. Alle Rechte vorbehalten. THE PROXIMITY/MERRIAM-WEBSTER DATABASE © 1990 MerriamWebster Inc.; © 1990 Proximity Technology Inc. Alle Rechte vorbehalten. The Sentry Spelling-Checker Engine © 2000 Wintertree Software Inc. WGrammar Grammar-Checker Engine © 1998 Wintertree Software Inc. Andrei Stcherbatchenko, Ferdinand Prantl PayPal © 1999-2012 PayPal. Alle Rechte vorbehalten.
302 Anhänge
17 Index
304 Index
Index Absätze, 250 Textformatvorlagen für Absätze, 253 Abstimmung (SmartObjekt), 182 AdSense, 150 Aktionen, 129 Aktive Betrachter (Smart Objekt), 180 Anhängen von MasterSeiten, 49 Anker, 131 Anmeldung (Zugangskontrolle), 178 Antispam (CAPTCHA), 224 Audiodateien, 207 Aufzählungen, 256 Banner (animiert), 109 Beitritt (Zugangskontrolle), 176 Benannte Formatvorlagen, 253 für Text (siehe auch Textformatvorlagen), 253 Benutzer (für Zugangskontrolle), 173 Ausschließen per Bann, 179 Einfrieren, 179 Benutzerdetails
306 Index Farbe Farbschemata, 67 Hintergrund, 64 Seitenfarbe, 64 Features, 5 Neue Features, 5 Feiertage (öffentlich), 107 Flash, 96, 210 Movies, 210 Foren, 162 Einfügen, 163 Sicherheit, 165 Verwalten, 165 Zugriff über OffsiteLinks, 59 Formatieren von Text Probleme auf Webseiten, 279 Formatvorlagen, 252 für Text (siehe auch Textformatvorlagen), 252 Formen Text anpassen an, 247 Formulare, 215 Erstellen, 217 Übertragen von Formulardaten, 219 Bestätigen, 223 Fotogalerie, 96 aus Flickr-Fotos, 101 aus SlideShow
Index Kalenderassistent, 105 Kontodetails (FTP), 285 Korrigieren (von Bildern), 87 Künstlerischer Text, 243 auf einem Pfad, 246 Künstlerischer Text (Werkzeug), 243, 246 Layouthilfen, 71 Dynamische Führungslinien, 71 Lesezeichen-Symbolstreifen für soziale Netzwerke, 203 Lightboxen, 132 Einstellungen, 136 für Bilder, 86 Linien Text anpassen an, 247 Listen, 256 Aufzählungen, 256 Nummerierungen, 256 Mailinglisten, 183 Maps (Google), 148 Master-Seiten, 47, 61 Anhängen, 49 Mehrere, 49 Eigenschaften, 61 Entfernen
308 Index Quelldateien, 265, 268 Arretieren, 276 Durchsuchen, 269 Quelldateien (StudioRegisterkarte) für Seitenhintergründe, 62 Speichern eigener Designs in, 272 Quelldatei-Manager, 268 Quelldatei-Paket, 265, 269 Rahmen (iFrames), 155 Rahmentext, 77 Ränder (HTMLTextrahmen), 81 Rollover, 139 Popups, 143 RSS-Feeds Abonnieren von Drittanbietern, 167 RSS-Reader, 167 Schaltflächen (Buttons), 117, 123 Eigene entwerfen, 125 Schemata (Farb-), 67 Voreinstellungen, 69 Schriftarten, 251 Websicher, 251 Seiten, 47 Eig
Index Suchen und Ersetzen, 262 Support, 299 SWF-Dateien, 210 Tabellen, 103 Übersicht, 103 Technischer Support, 299 Termine (Kalender), 108 Text, 77, 243, 247, 250 Anpassen an Rahmen, 81 auf einem Pfad, 245 Bearbeiten auf einer Seite, 247 Formatierung, 250 Formatierungsprobleme auf Webseiten, 279 Importieren aus Dateien, 241 Künstlerische (freie) Texte, 243 Nummerierung und Aufzählungszeichen, 256 Rahmentexte, 77 Hinzufügen zu, 78 HTML-Tabellen, 103 Ränder, 81 Überlauf (in Rahmen), 81 Text (Speichern), 272
310 Index Erstellen aus einer leeren Seite, 36 Öffnen bestehender Dokumente, 34 Website-Struktur, 42 Anzeigen, 44 Website-Strukturansicht, 44 Website-Suche, 146 Website-Vorschau, 282 Werbung, 150 Werkzeuge Künstlerischer Text, 243 Textrahmenwerkzeug, 78 Wiederherstellen einer gespeicherten Version, 36 Willkommen, 3 YouTube-Video, 211 Zähler Aktive Betrachter, 188 Trefferzähler, 188 Zeichen Formatvorlagen, 253 Zugangskontrolle, 169, 183
