Inhaltsverzeichnis 1. Willkommen ..........................................................1 Willkommen! .......................................................................3 Neue Features....................................................................5 Installieren der Software......................................................9 2. Einrichten von Websites und Seiten ........... 13 Der Startassistent .............................................................
Inhaltsverzeichnis 4. Die Navigationselemente ................................67 Einfügen von Navigationsleisten ......................................69 Einfügen von Popup-Menüs .............................................73 Einfügen von Schaltflächen..............................................75 Einfügen von Hyperlinks und Aktionen..............................78 Einfügen von Ankern ........................................................84 5. Interaktive Objekte .....................................
Inhaltsverzeichnis 8. Multimedia ........................................................ 123 Einfügen von Videos ......................................................125 Einfügen von YouTube-Videos .......................................127 Einfügen von Vimeo-Videos ............................................129 Einfügen von Flash-Dateien (SWF) ................................130 9. Formulare.......................................................... 133 Einfügen von Formularen..........................
Inhaltsverzeichnis 12. Vorschau und Publizieren ........................... 169 Arbeiten mit der Website-Prüfung ................................. 171 Öffnen einer Website-Vorschau .................................... 174 Publizieren im Web (mit WebPlus.net) ......................... 175 Publizieren im Web (über andere Hosts) ...................... 182 QuickPublish.................................................................. 183 13. Inhalte für Fortgeschrittene .......................
Willkommen
2 Willkommen
Willkommen 3 Willkommen! Willkommen zu WebPlus X7 von Serif, der unkomplizierten Komplettlösung für private und geschäftliche Websites. WebPlus vereinfacht das Design professioneller und ansprechender Websites enorm – Sie konzentrieren sich einfach auf die visuellen Aspekte, und unsere Software erledigt die ganze Programmierarbeit.
4 Willkommen Mit den unkomplizierten E-Commerce-Tools können Sie sogar Schritt für Schritt Ihren eigenen Onlineshop mit Warenkorb oder eine Spenden-Website einrichten. Nachdem Sie Ihr Seitendesign abgeschlossen haben, können Sie die Website schnell und einfach im Web publizieren und Ihren Kunden, Kollegen, Freunden und Familienmitgliedern präsentieren.
Willkommen 5 Eine Anmerkung zu diesem Handbuch Das Handbuch zu WebPlus X7 wurde als „Starthilfe“ für neue Kunden oder Einsteiger in die Welt des Webdesigns entwickelt, damit Sie sich schnell in WebPlus zurechtfinden. Da unser Programm über eine ausgesprochen breite Palette an Features verfügt, können wir in diesem Handbuch nicht auf alle Möglichkeiten unseres Produkts eingehen und konzentrieren uns daher auf die wichtigsten Funktionen und die am häufigsten verwendeten Features.
6 Willkommen Programmoberfläche & Bedienkomfort • Startassistent mit integrierten Feeds Diese neue Einstiegshilfe für Ihre Webdesigns bietet eine Fülle von ständig aktualisierten Informationen und News sowie WebPlus-spezifisches Studienmaterial (Videotutorials, Texttutorials, Tipps und Tricks). Der Assistent kennzeichnet automatisch alle Artikel, die Sie noch nicht gelesen haben, sodass Ihnen nichts Interessantes entgeht.
Willkommen 7 Multimedia und Interaktivität • Video-Player Präsentieren Sie Videos, die mit all den neuesten Browsern und Mobilgeräten kompatibel sind, ohne dass Ihre Website-Besucher ein Flash Plugin oder eine Wiedergabe-Software für Multimediadateien benötigen! • Formular-Designer Entwerfen Sie Ihre eigenen Formulare durch einfaches Klicken und Ziehen – ganz ohne Programmierarbeit.
8 Willkommen • YouTube-Playlisten- und Vimeo-Videos Sie können nun Ihre Website um Streaming-Videos von Vimeo sowie ganze Playlisten von YouTube erweitern. Ob Sie nun einfache YouTube-Playlisten verwenden möchten, eine Liste aus speziellen Suchergebnissen, die Uploads eines Kanals oder eine selbst zusammengestellte Liste – alles ist möglich.
Willkommen 9 Installieren der Software Die Schritte zur Installation von WebPlus variieren je nach der von Ihnen erworbenen Version (Produkt-Disc oder Download). Sie können die neue Version auf demselben PC installieren wie Vorgängerversionen und diese unterschiedlichen Programmversionen unabhängig voneinander verwenden. Die 32-Bit- bzw. 64-Bit-Version von WebPlus X7 wird automatisch auf den Computern mit entsprechendem Betriebssystem (32 Bit oder 64 Bit) installiert.
10 Willkommen Installieren der Software mit einer Download-Version • Melden Sie sich auf Serif.com bei Ihrem Benutzerkonto an und führen Sie die auf dem Bildschirm angezeigten Schritte aus.
Willkommen 11 Für die Bearbeitung großer oder komplexer Websites werden zusätzliche Festplattenkapazität und mehr Arbeitsspeicher benötigt. Optional: • Windows-kompatibler Drucker • TWAIN-kompatibler Scanner und/oder TWAIN-kompatible Digitalkamera • .NET 2.
Willkommen 12
Einrichten von Websites und Seiten 13 Einrichten von Websites und Seiten
14 Einrichten von Websites und Seiten
Einrichten von Websites und Seiten 15 Der Startassistent Nach der Installation von WebPlus können Sie direkt mit Ihrer Arbeit beginnen. • Für Windows Vista/7: Das Installationsprogramm fügt automatisch einen Eintrag Serif WebPlus X7 in dem Menüpunkt Alle Programme des Start-Menüs von Windows hinzu. Klicken Sie auf die Schaltfläche Start in Windows, um das Startmenü zu öffnen, klicken Sie auf Alle Programme und dann auf Serif WebPlus X7.
16 Einrichten von Websites und Seiten Die verschiedenen Optionen im Überblick: Über die normale Startseite erhalten Sie Informationen von Serif zu Sonderaktionen und können verschiedene Artikel lesen (z. B. Tutorials). Hier finden Sie auch das Übersichts- und QuickStart-Video zu WebPlus. Mit dieser Option greifen Sie auf die zuletzt verwendeten WebPlus-Dateien sowie eine Verlaufsliste der in letzter Zeit benutzten Dateien zu.
Einrichten von Websites und Seiten 17 Wenn Sie den Startassistenten aufrufen, wird automatisch die Anzahl der neuen Artikel in den Schaltflächen „Studienmaterial“ und „News“ angezeigt. Lesen Sie einen dieser Artikel in dem entsprechenden Feld, verringert sich die angezeigte Zahl in der Schaltfläche automatisch. Treffen neue Artikel ein, werden diese automatisch angezeigt, sobald Sie den Startassistenten das nächste Mal öffnen.
18 Einrichten von Websites und Seiten Erstellen einer Website mit einer Designvorlage WebPlus enthält eine breite Palette kategorisierter Designvorlagen, mit denen Sie schnell und einfach die unterschiedlichsten Websites aufbauen können. Die Vorlagen bieten: • Ergänzende Designs mit professionell entworfenen Layouts und starker visueller Wirkung. • Schemata: Wählen Sie einfach ein Farbschema aus, um der gesamten Website einen bestimmten Look zu verleihen.
Einrichten von Websites und Seiten 19 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. Als Ergänzung zu den Vorlagen für normale Websites steht Ihnen auch eine breite Palette an Vorlagen für mobile Websites zur Verfügung.
20 Einrichten von Websites und Seiten Erstellen einer Website mit einer Designvorlage 1. Starten Sie WebPlus, oder klicken Sie im Menü Datei auf Startassistent. 2. Klicken Sie auf die Option Vorlagen. 3. Wählen Sie in dem farbigen Feld eine der Desktop- oder Mobil-Optionen aus den Kategorien der Themenlayouts oder den Pro-Vorlagen von WebPlus X7 aus. 4. Blättern Sie mit der rechten Bildlaufleiste durch das Hauptfeld. 5.
Einrichten von Websites und Seiten 21 6. Legen Sie in dem rechten Feld fest, welche Seiten Sie für Ihre Website verwenden möchten. Wählen Sie die einzelnen Seiten per Mausklick mit einem Häkchen aus, oder entfernen Sie die Häkchen der unerwünschten Seiten. 7. 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.
22 Einrichten von Websites und Seiten Aufbauen einer vollständig neuen Website Obwohl die Designvorlagen (siehe Seite 18) sehr hilfreich sind, können Sie Ihre Websites auch von Grund auf neu gestalten, indem Sie mit einer leeren Seite beginnen. Folgen Sie einfach den verschiedenen Arbeitsschritten, die in dem Startassistenten angezeigt werden, um die wichtigsten Aspekte für die neue Website einzustellen. Sie können diese Einstellungen jederzeit ändern, nachdem Sie den Startassistenten geschlossen haben.
Einrichten von Websites und Seiten 23 Erstellen einer neuen Website ohne Vorlage mit dem Startassistenten 1. Starten Sie WebPlus, um den Startassistenten zu aktivieren. ODER Klicken Sie in einer laufenden Arbeitssitzung im Menü Datei auf Startassistent. 2. Klicken Sie auf Neue Website. 3. Vervollständigen Sie die im Hauptfeld eingeblendeten Details. 4. Klicken Sie auf Neue Website anlegen. Ihre Website wird nun erstellt und lässt sich flexibel bearbeiten.
24 Einrichten von Websites und Seiten Öffnen einer bestehenden Website Um eine gespeicherte WebPlus-Website zu öffnen, können Sie den Startassistenten, die Standardsymbolleiste oder das Menü Datei verwenden. Mit dem Menü Datei lassen sich darüber hinaus auch Webseiten importieren die zu bestehenden Websites gehören. Nähere Informationen hierzu finden Sie in der WebPlus-Hilfe. Öffnen einer bestehenden Website über den Startassistenten 1. Starten Sie WebPlus, um den Startassistenten zu aktivieren.
Einrichten von Websites und Seiten i. Für andere WebPlus-Websites klicken Sie in dem Feld „Computer durchsuchen“ auf WebPlus-Dateien. ii. Wählen Sie in dem Dialogfeld die gewünschte Datei aus und klicken auf Öffnen. 25 Öffnen einer bestehenden WebPlus-Website während einer WebPlus-Arbeitssitzung 1. Klicken Sie in der Standardsymbolleiste auf Öffnen. 2. Wechseln Sie in dem Dialogfeld Öffnen zu dem Ordner der Datei und klicken Sie auf den oder die Dateinamen.
26 Einrichten von Websites und Seiten Arbeiten mit der WebsiteStruktur Bei der Struktur einer Website sind die physikalische Position der Seiten oder ihr Speicherplatz völlig unwichtig. Bei der WebsiteStruktur kommt es auf die logische Anordnung der verschiedenen Website-Inhalte an, sodass die Besucher der Website einfacher durch die für sie interessanten Themengebiete navigieren können.
Einrichten von Websites und Seiten 27 Anzeigen der Website-Struktur Die Website-Struktur lässt sich über zwei Optionen einblenden: die Registerkarte „Website“ und die Website-Strukturansicht. Die zweite Variante ist ideal für die Darstellung großer Websites. Prüfen der Struktur über die Registerkarte „Website“ In WebPlus können Sie mit dem Website-Strukturbaum der Registerkarte „Website“ die Inhalte Ihrer Website bequem in Sektionen und Stufen aufteilen.
28 Einrichten von Websites und Seiten Prüfen der Struktur über die WebsiteStrukturansicht Für große Websites ist die Website-Strukturansicht eine gute Alternative zur Registerkarte „Website“ und bietet eine Vollbilddarstellung aller Sektionen und Strukturebenen Ihrer Website. Die Seiten werden hierbei als Miniaturen in einer Baumstruktur angezeigt. Anzeigen der Website-Struktur • Klicken Sie in der Standardsymbolleiste auf die Option Website-Strukturansicht.
Einrichten von Websites und Seiten 29 Festlegen der WebsiteEigenschaften In den Website-Eigenschaften legen Sie die Optionen fest, die für die gesamte Website gelten sollen. Im Allgemeinen werden die wichtigsten Website-Eigenschaften (Seitenbreite, Seitenhöhe usw.) automatisch festgelegt, wenn Sie eine Vorlage auswählen oder eine Website von Grund auf neu entwerfen. Die anderen Einstellungen müssen Sie häufig nicht ändern. Dies ist jedoch jederzeit möglich.
30 Einrichten von Websites und Seiten 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.
Einrichten von Websites und Seiten 31 Die Master-Seiten sind ein wichtiger Strukturbaustein Ihrer WebPlusWebsite, da Sie auf diesen Seiten alle Objekte und Layoutelemente platzieren können, die auf mehr als einer Seite verwendet werden, wie z. B. Logos, Hintergrundbilder, Kopf- und Fußzeilen, Navigationsleisten oder Umrandungen. Der wichtigste Punkt bei der Arbeit mit Master-Seiten ist, dass sich diese Seiten mehreren Seiten zuweisen lassen (siehe folgende Abbildung).
32 Einrichten von Websites und Seiten Zuweisen anderer Master-Seiten Standardmäßig werden alle für eine Website neu angelegten Seiten mit einer Master-Seite erstellt (z. B. Master A). Wenn Sie für Ihre Website jedoch mehr als eine Master-Seite definiert haben, können Sie auch eine andere Master-Seite für die Seiten festlegen. Zuweisen anderer Master-Seiten zu Seiten 1.
Einrichten von Websites und Seiten 33 Hinzufügen, Entfernen und Neuordnen von Seiten In der Registerkarte „Website“ stehen Ihnen die folgenden Optionen zur Verfügung. • Einfügen von Seiten • Löschen von Seiten. • Einfügen einer oder mehrerer Master-Seiten. • Anordnen der Seiten in der Website-Struktur durch Klicken und Ziehen. • Einfügen von Seiten aus installierten Designvorlagen. • Einfügen von OffsiteLinks. • Einfügen von HTMLSeiten. • Festlegen einer Seite als Homepage.
34 Einrichten von Websites und Seiten In dem oberen Feld „Master-Seiten“ der Registerkarte arbeiten Sie mit den Master-Seiten. In dem unteren Feld „Seiten“ befindet sich der Strukturbaum der Website, mit dem Sie auf die normalen Seiten zugreifen können. Da WebPlus auch HTML-Seiten und Offsite-Links unterstützt, lassen sich diese Elemente genau so in dem Website-Strukturbaum platzieren wie normale Seiten.
Einrichten von Websites und Seiten 35 Alle neu erstellten Seiten verwenden stets die aktuell in den Website-Eigenschaften festgelegten Werte (Eigenschaften > Website-Eigenschaften), wie z. B. die Standardseitengröße und -ausrichtung, sofern Sie diese Optionen nicht mit dem Dialogfeld „Seiteneigenschaften“ außer Kraft setzen. Einfügen von Master-Seiten Hinzufügen einer neuen Master-Seite 1.
36 Einrichten von Websites und Seiten Löschen von Seiten Löschen einer Seite oder Master-Seite 1. Wählen Sie in der Registerkarte „Website“ die zu löschende Seite oder Master-Seite mit einem Klick auf ihren Eintrag aus. 2. Klicken Sie über dem entsprechenden Fenster auf die Option Ausgewählte Seite löschen, um die Seite zu entfernen. Erstellen von HTML-Seiten HTML-Seiten lassen sich in die Website-Struktur jeder Website einfügen.
Einrichten von Websites und Seiten 37 Der Mauszeiger gibt Ihnen einen Anhaltspunkt zu der Positionierung der verschobenen Seite in Bezug auf die Seite, über der sich der Mauszeiger gerade befindet: Die Seite wird auf derselben Stufe eingefügt, wie die markierte Seite und direkt nach der markierten platziert. Die Seite wird als untergeordnete Seite der markierten Zielseite platziert. Einfügen von Offsite-Links Sie können ebenfalls einen Offsite-Link zu Ihrer Website-Struktur hinzufügen.
38 Einrichten von Websites und Seiten
Willkommen 39 Die Layoutelemente
40 Die Layoutelemente
Die Layoutelemente 41 Einfügen von Textrahmen Für gewöhnlich werden die Texte in WebPlus-Projekten in Textrahmen platziert, da sich diese „Container“ sowohl für einzelne Wörter und Absätze eignen als auch für ganze Zeitungsartikel. Neben den Rahmentexten können Sie auch künstlerische Texte (siehe Seite 150) für einzelne Überschriften und Spezialeffekte erstellen oder Tabellentexte für eine zeilen- oder spaltenweise Darstellung (siehe auch „Einfügen von Tabellen“ auf Seite 61).
42 Die Layoutelemente Löschen von Rahmen • Wählen Sie den Rahmen aus und drücken Sie die Taste Entf. Enthält der Rahmen eine Einfügemarke, löschen Sie mit der Taste Entf die Buchstaben nach dem Textcursor. Einfügen von Text in einen Rahmen Texte lassen sich auf unterschiedliche Weise in Rahmen einsetzen. Der integrierte Storyeditor WritePlus Wählen Sie einen Rahmen aus und klicken Sie in der Rahmenkontextleiste auf WritePlus.
Die Layoutelemente 43 Anpassen von Überlauftext Die genaue Aufteilung des gesamten Textes in Rahmen gehört zu den wichtigsten Punkten bei der Erstellung eines Webseitenlayouts. Enthält ein Rahmen zu viel Storytext, speichert WebPlus den „Überschuss“ in einem Überlaufbereich am unteren Ende des Rahmens. Der Text ist lediglich unsichtbar und wird nicht gelöscht! An dem Symbol Textüberlauf unter einem Rahmen erkennen Sie, dass zu viel Text vorhanden war und ein Teil in dem Überlaufspeicher liegt.
44 Die Layoutelemente Einfügen von Bildern Die Kategorie „Bilder“ der Registerkarte Quelldateien lässt sich als „Sammelmappe“ für Bilder einsetzen, die Sie später auf den Seiten Ihrer Website platzieren möchten. Da in dieser Registerkarte alle Bilder jederzeit griffbereit sind, und Sie die Fotos einfach per Klicken und Ziehen auf den Seiten platzieren können (anstatt sie mühsam einzeln zu importieren), sparen Sie bei Ihrer Arbeit sehr viel Zeit.
Die Layoutelemente 45 Entfernen von Bildern aus der Registerkarte • Klicken Sie mit der rechten Maustaste auf ein ausgewähltes Bild und in seinem Kontextmenü auf Quelldatei entfernen. Einfügen von Bildern in eine Seite Sie können Bilder einfach mit gedrückter Maustaste auf eine Seite ziehen und dort absetzen.
46 Die Layoutelemente Ersetzen von Bildern Bilder lassen sich jederzeit austauschen. Dies ist besonders praktisch, wenn Sie die Position und Größe eines Fotos auf der Seite beibehalten und nur das eigentliche Bild selbst ändern möchten. Diese Funktion lässt sich für zugeschnittene und unbeschnittene Bilder einsetzen. Ersetzen von Bildern 1. Klicken Sie direkt unter dem ausgewählten Bild auf die Option Bild aus Festplatte ersetzen oder Bild aus Quelldateien ersetzen. 2.
Die Layoutelemente 47 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.
48 Die Layoutelemente Freistellen von Bildmotiven Mit dem Studio für Ausschnitte können Sie einzelne Bildobjekte bequem von ihrem Hintergrund trennen (dies wird auch als "Freistellen" bezeichnet). Je nach Zusammenstellung Ihres Fotos lassen sich z. B. die wichtigen Objekte (Personen usw.) extrahieren oder die einfarbigen Hintergrundbereiche (z. B. Himmel, Leinwand eines Fotostudios) entfernen.
Die Layoutelemente 49 Bildkorrekturen und Effekte PhotoLab ist ein leistungsstarkes Studiofenster für die Bildbearbeitung, in dem Sie Ihre Bilder korrigieren und mit verschiedenen Effekten bearbeiten können. Alle Funktionen lassen sich einzeln oder auch in Kombination anwenden. 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.
50 Die Layoutelemente 4. Stellen Sie in dem Testfeld rechts unten die gewünschten Optionen für den Filter ein und klicken Sie auf Übernehmen. 5. Wiederholen Sie diese Schritte für alle Filter, die Sie anwenden möchten. 6. Klicken Sie auf die Schaltfläche OK. 7. Weitere Informationen hierzu finden Sie in der WebPlusHilfe. Einfügen von Panels Panels sind „Schaukästen“ mit Informationen, die über Ihren Webseiten eingeblendet werden.
Die Layoutelemente 51 Die permanente Variante ist ebenfalls ideal für Navigationsleisten, da diese auch bei scrollbaren Seiteninhalten ständig auf dem Bildschirm erreichbar sind. Panels werden auch als Bausteine für animierte Slider (siehe Seite 63) verwendet. Genau wie die Anzeigetafeln am Spielfeldrand in großen Fußballstadien ständig ihre Aufschrift ändern, können auch die Slider unterschiedliche Panels für bestimmte Zeitintervalle einblenden.
52 3. Die Layoutelemente Gehen Sie in der Registerkarte Panel wie folgt vor: • Klicken Sie in das Vorschaufeld. • Wählen Sie in dem Quelldatei-Browser ein vordefiniertes Hintergrunddesign aus und klicken Sie auf OK. Die Vorschau wird nun mit dem ausgewählten Paneldesign aktualisiert. Sie können ein Panel in den Standardabmessungen erstellen, indem Sie es einfach aus der Registerkarte „QuickBuild“ direkt auf eine Seite ziehen.
Die Layoutelemente 53 Ein-/Ausblenden eines Panels Nachdem Sie das Panel entworfen und mit dem gewünschten Inhalt gefüllt haben, können Sie es sichtbar lassen oder auch ausblenden. Ausgeblendete Panels lassen sich per Mausberührung oder Klick auf ein Seitenobjekt einblenden. Auf diese Weise können Sie schnell und einfach zusätzliche Optionen oder Details für Schaltflächen, Bilder und Galerieobjekte auf Ihren Webseiten anbieten.
54 Die Layoutelemente Ausblenden ausgewählter Panels • Klicken Sie in der Kontextleiste auf die Option Objekt ein/ausblenden. Um während der Designarbeit unsichtbare Objekte einzublenden, klicken Sie im Menü Ansicht auf Unsichtbare Objekte. Wenn Sie nun Ihre Webseite publizieren und den Mauszeiger auf dem als Auslöser konfigurierten Seitenobjekt platzieren, wird das Panel per Rollover an der von Ihnen festgelegten Stelle eingeblendet.
Die Layoutelemente 55 Die Galerietypen Für Ihre Flash- oder JavaScript-Fotogalerien stehen Ihnen sehr unterschiedliche Galerieformate zur Verfügung. Galerietyp Features Professionelle Flash-Fotogalerie Diese Galerien enthalten über oder unter der Bildanzeige eine Steuerleiste mit Vorschauminiaturen, die alle mit einem Rollovereffekt versehen sind. Professionelle Flash-Fotogalerie (Live Feed) Diese Galerien bieten die gleichen Optionen wie Professionelle Flash-Fotogalerien.
56 Die Layoutelemente Einfügen einer Fotogalerie Fotogalerien lassen sich genau so auf Ihren Seiten einfügen, wie einzelne Fotos. Das aktuell angezeigte Foto ist hierbei lediglich von einem Hintergrund, einer Navigationsleiste und Vorschauminiaturen eingerahmt. Einfügen einer Fotogalerie 1. Klicken Sie in der Kategorie „Layoutelemente“ der Registerkarte QuickBuild auf das Symbol Fotogalerie. 2.
Die Layoutelemente 57 ODER Klicken Sie auf Quelldateien hinzufügen, um die gewünschten Bilddateien auszuwählen. ODER • Hinzufügen aller Fotos aus einem Ordner Klicken Sie auf die Schaltfläche Ordner hinzufügen, um alle Bilder aus einem bestimmten Ordner zu importieren. ODER • 2. Einfügen aus Digitalkamera oder Scanner Klicken Sie auf die Schaltfläche TWAIN-Import.
58 Die Layoutelemente Auswählen und Ändern des Typs einer Fotogalerie 1. Wählen Sie am oberen Rand des Dialogfelds eine Galerieformatierung in der Liste Galerietyp aus. 2. (Optional) Legen Sie für den ausgewählten Typ rechts die verschiedenen Galerieoptionen fest (Hintergrundmusik, Schriftfarbe, AutoPlay usw.). 3. Klicken Sie auf die Schaltfläche Fertig stellen. Bearbeiten der Fotogalerie Nachdem Sie die Fotogalerie in eine Webseite eingefügt haben, lässt sie sich jederzeit bearbeiten.
Die Layoutelemente 59 Arbeiten mit Onlinefotoquellen Anstatt Ihre Fotos von einem lokalen Laufwerk auf Ihrem PC zu importieren, können Sie in Ihre Fotogalerie auch Bilder per Live Feed einfügen, die bereits online bei Flickr oder SlideShowPro Director gespeichert sind. Der größte Vorteil dieser Galerien mit Live Feed liegt darin, dass Ihre publizierte Fotogalerie automatisch aktualisiert wird, sobald Sie neue Fotos außerhalb von WebPlus an Flickr oder SlideShowPro Director übertragen.
60 Die Layoutelemente Kopieren Ihres Fotolinks von SlideShowPro Director 1. Gehen Sie zu der Website SlideShowPro Director und melden Sie sich bei Ihrem Konto an. 2. Wählen Sie Ihr Album aus und klicken Sie unter „Publish“ auf die Kopieren-Schaltfläche (in der Option „Copy XML File Path“), um den Link in die Zwischenablage einzutragen. Einfügen einer Fotogalerie mit Live Feed 1. Klicken Sie in dem Dialogfeld für Fotogalerien auf Professionelle Flash-Fotogalerie (Live Feed). 2.
Die Layoutelemente 61 Einfügen von Tabellen Tabellen sind eine ideale Wahl, wenn Sie Ihre Texte oder Daten in übersichtlichen Zeilen und Spalten anordnen möchten. WebPlus verfügt ebenfalls über eine Reihe von Rechenfunktionen, mit denen Sie die Werte einzelner Zellen wie in einer Tabellenkalkulation berechnen können. Jede Tabellenzelle übernimmt im Grunde die Aufgabe eines kleinen Textrahmens.
62 Die Layoutelemente Einfügen einer Tabelle 1. Klicken Sie in der Kategorie „Layoutelemente“ der Registerkarte QuickBuild auf das Symbol Tabelle. 2. Klicken Sie auf Ihre Seite, oder ziehen Sie mit gedrückter Maustaste einen Begrenzungsrahmen in der gewünschten Größe für die Tabelle. In dem nun geöffneten Dialogfeld Tabelle erstellen wählen Sie einfach eine Tabellenvariation aus dem Feld Format aus. 3.
Die Layoutelemente 63 Einfügen von Slidern Slider bieten elegante und flexible Möglichkeiten für die Animation von Panels und lassen sich unter anderem für Werbebanner, NewsTicker und Alternativen zu Navigationsleisten einsetzen. Jeder Slider besteht aus einer Reihe von Panels – es kann jedoch immer nur ein Panel gleichzeitig angezeigt werden. Sie können auf jedem Panel eine Mischung aus Bildern, Texten, Linien und Formen platzieren.
64 Die Layoutelemente Für die Darstellung der Panels stehen Ihnen verschiedene Animationstypen zur Verfügung. Sie können einfache Richtungsänderungen (z. B. Links nach Rechts, Oben nach Unten usw.) sowie eine Gemischte Animation (bestehend aus mehreren Varianten) verwenden oder auch spezifische Vorgaben wie Akkordeon, Overlay oder Bildlauf-Varianten einsetzen. Bei der Steuerung über einen Timer können Sie das Start- und Enddatum (oder die Zeit) für jedes Panel präzise angeben.
Die Layoutelemente 65 Wenn Sie den Inhalt eines Panels bearbeiten und das Panel selbst auswählen möchten, klicken Sie auf den Menüpunkt Bearbeiten > Auswählen > Übergeordnetes Element auswählen oder drücken die Tastenkombination Strg + R. Möchten Sie anschließend den Slider auswählen, klicken Sie einfach erneut auf den Menüpunkt Bearbeiten > Auswählen > Übergeordnetes Element auswählen. Bearbeiten Ihres Sliders Standardmäßig enthält jeder Slider ein Set von Panels.
66 Die Layoutelemente Hinzufügen neuer Panels 1. Wählen Sie den Slider aus. 2. Klicken Sie in der Kontextleiste auf die Option Panel hinzufügen. Es wird nun ein leeres Panel nach dem letzten Panel in Ihrem Slider eingefügt. Sie können den Inhalt für das neue Panel frei festlegen (siehe Seite 52). Die Reihenfolge der Panels in dem Slider lässt sich über die Option Slider bearbeiten der Symbolleiste ändern.
Willkommen 67 Die Navigationselemente
68 Die Navigationselemente
Die Navigationselemente 69 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 26) erkennen und automatisch berücksichtigen, sodass sich Website-Besucher später schnell zurechtfinden und problemlos durch die verschiedenen Seiten navigieren können.
70 Die Navigationselemente Wenn Sie eine Navigationsleiste einfügen, können Sie mit den folgenden Optionen festlegen, wie die Leiste auf der Seite angezeigt wird: • Typ: Hier legen Sie das grundlegende Design der Navigationsleiste fest (z. B. Designer, Grafisch, Einfach). • Navigationstyp: Hier legen Sie fest, ob die Navigationsleiste auf der Website-Struktur oder einer von Ihnen selbst festgelegten Struktur basieren soll.
Die Navigationselemente 71 Hinzufügen einer Navigationsleiste 1. Wählen Sie eine Seite (oder Master-Seite) aus. 2. Klicken Sie in der Kategorie „Navigationselemente“ der Registerkarte QuickBuild auf das Symbol Navigationsleiste. 3. Platzieren Sie den Mauszeiger auf der gewünschten Seitenposition und klicken Sie einmal, um die Leiste zu platzieren. Die Leiste wird nun rechtsbündig an der von Ihnen festgelegten Stelle positioniert. 4.
72 Die Navigationselemente Wenn Sie die Option Basierend auf Website-Struktur verwenden, stehen Ihnen folgende Optionen zur Verfügung: • Wählen Sie die Strukturstufe aus, deren Seiten in der Navigationsleiste aufgelistet werden sollen: Oberste Stufe, Übergeordnete Stufe, Gleiche Stufe usw. • Je nach der Hauptauswahl können Sie nun noch untergeordnete Seiten, Anker, die Homepage sowie übergeordnete Seiten einschließen und/oder die aktuelle Seite ausblenden sowie deaktivierte Links ausblenden.
Die Navigationselemente 73 Sie können ebenfalls die Navigationsleisten, Schaltflächen, Trennelemente und Hintergründe Ihrer eigenen Navigationleistenformate ändern. Nähere Informationen hierzu finden Sie in der WebPlus-Hilfe. Einfügen von Popup-Menüs Popup-Menüs sind ein wichtiger Bestandteil mehrstufiger Navigationsleisten (siehe Seite 69) und werden erst angezeigt, wenn Ihre Website-Besucher den Mauszeiger auf der entsprechenden Schaltfläche platzieren.
74 Die Navigationselemente ODER Klicken Sie mit der rechten Maustaste auf ein Objekt und in seinem Kontextmenü auf Popup-Menü. 3. Aktivieren Sie in der Registerkarte Navigationstyp des Dialogfelds die Option Popup-Menü mit Navigationslinks für dieses Objekt anzeigen, um die Navigation von diesem Objekt aus zu aktivieren. 4.
Die Navigationselemente 75 Einfügen von Schaltflächen Schaltflächen sind ein wichtiger Bestandteil der Navigationsleisten (siehe Seite 69) von WebPlus, lassen sich jedoch auch „solo“ auf Ihren Webseiten platzieren – entweder als separate Schaltflächen oder als Teil eines Formulars. Die Schaltflächen lassen sich so konfigurieren, dass der Mausklick eines Website-Besuchers z. B. ein Hyperlinkziel aufruft, ein Popup-Menü öffnet oder eine Aktion auslöst.
76 Die Navigationselemente Einfügen vordefinierter Schaltflächen 1. Klicken Sie in der Kategorie „Navigationselemente“ der 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 77 Über die Registerkarten Erweitert (in der Registerkarte „Hyperlink“) 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 82), die bestimmen, was die Website-Besucher mit einem Klick auf die Schaltfläche auslösen können. Über die Registerkarten ID/Anker und CSS-Eigenschaften können Sie verschiedene Steuer- und Darstellungsoptionen einstellen.
78 Die Navigationselemente 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 79 Aktionen ähneln in sofern den Hyperlinks, als dass sie ebenfalls bestimmen, was bei einem Mausklick oder der Mausberührung eines Objekts geschieht. Der Unterschied zu den Hyperlinks liegt jedoch darin, dass ein Klick oder eine Mausberührung auf der aktuellen Seite ein Ereignis auslösen und den Website-Besucher nicht zu einem anderen Ziel leiten. Nähere Informationen hierzu finden Sie unter dem Thema „Anwenden von Aktionen“ auf Seite 82.
80 Die Navigationselemente Bearbeiten und Entfernen von Hyperlinks 1. Markieren Sie mit dem Zeigerwerkzeug das gewünschte Objekt, oder platzieren Sie per Mausklick eine Einfügemarke in dem Linktext. (Sie müssen nicht den gesamten Hyperlinktext markieren.) 2. Klicken Sie in der Eigenschaftsleiste auf die Option Hyperlink. Das Dialogfeld „Objekteigenschaften“ wird nun geöffnet und zeigt das Hyperlinkziel des ausgewählten Objekts an.
Die Navigationselemente 81 Auswählen der Hyperlinkdarstellung Für künstlerische Texte, Rahmentexte oder Tabellentexte können Sie in der Registerkarte „Darstellung“ des Dialogfelds verschiedene Farboptionen für den Hyperlinktext festlegen. Ändern der Hyperlinkdarstellung • Legen Sie in der Registerkarte Darstellung über die Dropdownliste Format die gewünschte Formatierung für den Hyperlinktext fest. Über die Registerkarte Erweitert können Sie Optionen für die Barrierefreiheit festlegen, wie z. B.
82 Die Navigationselemente 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).
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. 83 Die Registerkarte „Aktionen“ wird nur angezeigt, wenn Sie ein Objekt auswählen.
84 Die Navigationselemente Einfügen von Ankern Ein Anker ist eine bestimmte Position auf einer Webseite, die als Ziel für einen Hyperlink (siehe Seite 80) 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. Anhängen von Ankern an einen Textbereich 1. Führen Sie einen der folgenden Schritte aus: i.
Die Navigationselemente 85 Anhängen von Ankern an Objekte 1. Wählen Sie das Zielobjekt mit dem Zeigerwerkzeug aus. 2. Klicken Sie in der Eigenschaftsleiste auf die Option ID und Anker. 3. Aktivieren Sie in dem Dialogfeld die Option Dieses Objekt als Anker behandeln. 4. (Optional) Um anstelle der HMTL-ID des Objekts eine bestimmte ID für den Anker festzulegen, deaktivieren Sie die Option Objekt-ID verwenden und geben einen Namen in das Feld Anker-ID ein. 5.
86 Die Navigationselemente
Willkommen 87 Interaktive Objekte
88 Interaktive Objekte
Interaktive Objekte 89 Einfügen von Rollovergrafiken 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. Einfügen von Rollover-Popups In WebPlus werden Rollover-Popups hauptsächlich für Bilder verwendet.
90 Interaktive Objekte Mit WebPlus können Sie die Position und Größe des Popups in Relation zu der Miniaturansicht festlegen und auch die Miniaturansicht jederzeit auswählen und vergrößern oder verkleinern. Einfügen von Rollover-Popups 1. Klicken Sie in der Kategorie „Interaktive Objekte“ der Registerkarte QuickBuild auf das Symbol Rollover-Popup und ziehen Sie den Mauszeiger mit gedrückter Maustaste über Ihre Seite, um die Größe des Rolloverobjekts zu bestimmen. 2.
Interaktive Objekte 91 • (Optional) Legen Sie für eines oder beide Bilder die Exportoptionen fest (siehe „Einstellen der Bildexportoptionen“ in der WebPlus-Hilfe). • (Optional) Wenn Sie die Bilder in Ihre Website integrieren möchten, aktivieren Sie die Option Bilddateien in Website einbetten. 3. (Optional) Legen Sie in der Registerkarte Hyperlinks ein Hyperlinkziel für den Rollover fest. 4. Klicken Sie auf die Schaltfläche OK.
92 Interaktive Objekte Einfügen einer Website-Suche WebPlus verwendet eine leistungsstarke Suchfunktion, mit der Sie oder Ihre Website-Besucher gezielt die Textrahmen und Tabellentexte nach bestimmten Begriffen durchsuchen können. Die Suchfunktion besteht aus zwei Teilen: einem Formular für die Website-Suche und einem Rahmen für die WebsiteSuchergebnisse. Ergebnisse der Website-Suche: Hiermit erstellen Sie einen Rahmen, in dem die Suchergebnisse angezeigt werden.
Interaktive Objekte 93 In den Suchergebnissen werden dann ein Seitenname mit Hyperlink angezeigt sowie ein entsprechender Text der Webseite als Referenz. Website-Besucher klicken einfach auf den Hyperlink, um zu der entsprechenden Seite umzuschalten. Einfügen des Objekts für die WebsiteSuchergebnisse 1. Klicken Sie im Menü Einfügen auf Website-Suche und dann auf Website-Suchergebnisse, um den Rahmen für die Suchergebnisse nach seiner Konfiguration auf Ihrer Seite zu platzieren. ODER 2.
94 Interaktive Objekte Einfügen eines Formularobjekts für die WebsiteSuche 1. Klicken Sie im Menü Einfügen auf den Eintrag WebsiteSuche und in dem nun geöffneten Untermenü auf WebsiteSuche. 2. Klicken Sie mit dem Einfügen-Cursor auf die Seite, um das Formularobjekt für die Website-Suche zu platzieren. Damit Ihre Website-Besucher möglichst von allen Seiten auf die Suchfunktion zugreifen können, sollten Sie das Funktionsobjekt am oberen Rand einer Master-Seite platzieren.
Interaktive Objekte 95 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. Diese Karten eignen sich ebenfalls hervorragend, um Sehenswürdigkeiten zu markieren. Auf jeder Karte können Sie Marker platzieren, um bestimmte Orte zu kennzeichnen. Einfügen einer Google Map 1.
96 Interaktive Objekte Einfügen von Markern Sie können Ihre Google Map mit einer unbegrenzten Anzahl von Markern versehen. Jeder Marker lässt sich so konfigurieren, dass er bei einer Mausberührung oder einem Klick zusätzliche Details einblendet. Hinzufügen von Markern 1. Klicken Sie im Dialogfeld „Google Map“ auf Hinzufügen. 2. Klicken Sie in dem Dialogfeld „Google Maps - Marker“ mit dem Mauszeiger auf die gewünschte Position. 3. Geben Sie einen Namen für den Marker ein.
Interaktive Objekte 97 Animierte Textlaufbänder Animierte Textlaufbänder sind perfekt für horizontal scrollende Texte (z. B. Nachrichten-Ticker) und werden auf Websites häufig für Überschriften oder besondere Hingucker verwendet. Sie können die Hintergrundfarbe festlegen, bis zu drei Zeilen Text eingeben, die Texteigenschaften konfigurieren (wählen Sie einfach einer der auf Ihrem Computer installierten Schriften aus) und die Laufgeschwindigkeit, Richtung und Ausrichtung für jede Textzeile einstellen.
98 Interaktive Objekte Erstellen animierter Textlaufbänder 1. Klicken Sie im Menü Einfügen auf den Eintrag Interaktives Objekt und in dem nun geöffneten Untermenü auf Animiertes Textlaufband. 2. Legen Sie die Anzahl der Textzeilen fest und formatieren Sie jede Zeile mit den Optionen der Registerkarte Animiertes Textlaufband. 3. (Optional) Möchten Sie die automatisch erzeugte HTML-ID für das Objekt bearbeiten oder einen Anker konfigurieren, öffnen Sie die Registerkarte ID/Anker. 4.
Willkommen 99 Externe / Verwaltete Inhalte
100 Externe / Verwaltete Inhalte
Externe / Verwaltete Inhalte 101 Einfügen eines Blogs Ein Blog (Kurzform von „Weblog“) übernimmt die Funktion eines Tagebuchs/Nachrichtenblattes auf Ihrer Website, in dem Sie mit einem unkomplizierten Texteditor Ihre eigenen Artikel veröffentlichen. Bei den Blogs ist es üblich, dass die Besucher der Website die verschiedenen Artikel kommentieren können.
102 Externe / Verwaltete Inhalte Einfügen eines Blogs auf einer Seite 1. Klicken Sie in der Kategorie „Externe/Verwaltete Inhalte“ der Registerkarte QuickBuild auf das Symbol Blog. 2. Ziehen Sie den Mauszeiger mit gedrückter Maustaste über Ihre Seite, um den Bereich und die Größe für den Blog 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.
Externe / Verwaltete Inhalte 103 Verwalten Ihres Blogs Über die Blogverwaltung können Sie Artikel hinzufügen, bearbeiten und entfernen sowie Kommentare löschen, die zu Artikeln abgegeben wurden. Mit den Editorgruppen lassen sich auch Artikel veröffentlichen, die aus der Feder mehrerer Autoren stammen.
104 Externe / Verwaltete Inhalte Einfügen eines Forums WebPlus beinhaltet ein Smart-Objekt, mit dem Sie ein Forum auf Ihren Webseiten platzieren können. 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 105 • Festlegen der Benutzerrechte. • Verwalten und Moderieren des Forums, ohne das Forum neu publizieren zu müssen. 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.
106 Externe / Verwaltete Inhalte 3. Geben Sie in das Dialogfeld einen Namen für Ihr Forum ein. Dieser Forumtitel wird auch am Anfang des im Web publizierten Forums angezeigt. 4. Geben Sie eine Forumbeschreibung ein, um Ihren WebsiteBesuchern einen Eindruck von den diskutierten Inhalten zu vermitteln. 5. Klicken Sie auf die Schaltfläche Speichern. Das Forum wird nun auf Ihrer Seite angezeigt.
Externe / Verwaltete Inhalte 107 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. Verwalten Ihres Forums • Wählen Sie das Forum aus und klicken Sie in der Kontextleiste auf Verwalten.
108 Externe / Verwaltete Inhalte Bedenken Sie stets, dass Ihr Forum auch ein Smart-Objekt ist! Mit dem Smart-Objekt für Benutzerlisten können Sie die Benutzer Ihres Forums auf verschiedene Weise verwalten: • Manuelles Hinzufügen von Benutzern: Für private Foren können Sie z. B. eine begrenzte Liste von ganz bestimmten Benutzern festlegen. Nur diese Personen können sich dann an den Diskussionen beteiligen und alle anderen Website-Besucher können sich nicht selbst für dieses Forum anmelden.
Externe / Verwaltete Inhalte 109 Foren sind sehr komplexe Objekte. Benötigen Sie nähere Informationen zu den Konfigurationsmöglichkeiten oder eine Beschreibung der Optionen, klicken Sie in dem Dialogfeld für Smart-Objekte auf die Hilfe-Schaltfläche. Einfügen eines RSS-Readers Mit WebPlus können Sie RSS-Feeds von anderen Websites direkt auf Ihrer eigenen Webseite einblenden.
110 Externe / Verwaltete Inhalte Wenn Sie den Reader für den RSS-Feed auf Ihrer Seite einfügen, wird automatisch der ausgewählte RSS-Feed oder Podcast abonniert. Es gibt noch einige andere Methoden, um RSS-Feeds oder Podcasts über Webbrowser und iTunes zu abonnieren. An dieser Stelle beschäftigen wir uns mit dem Einbinden eines Feeds in Ihre Seite, sodass die Seite automatisch neue Artikel und Episoden empfängt.
Externe / Verwaltete Inhalte 111 5. Fügen Sie in dem Dialogfeld die kopierte URL in das Feld URL des RSS-Feeds ein. 6. (Optional) Stellen Sie über die anderen Registerkarten des Dialogfelds die HTML-ID (ID/Anker), die Browserbasierenden Darstellungsoptionen (CSS-Eigenschaften) sowie die Bildexportoptionen ein. 7. Klicken Sie auf die Schaltfläche OK. Das Feed-Fenster wird mit einer pfirsichfarbenen Füllung erstellt und zeigt automatisch die URL des Feeds an.
112 Externe / Verwaltete Inhalte
Willkommen 113 Soziale Netzwerke
114 Soziale Netzwerke
Soziale Netzwerke 115 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.
116 3. Soziale Netzwerke Konfigurieren Sie die Funktionalität des Objekts: • Aktuelle Website-URL nutzen Aktivieren Sie diese Option, um die aktuelle URL Ihrer Website zu verwenden. Wenn Sie die Option deaktivieren, können Sie in dem darunter liegenden Feld selbst eine Webadresse eingeben. Für den „Gefällt mir“-Feed geben Sie die exakte URL einer Facebook-Seite ein. • Linkziel (nur für den Empfehlungen-Feed) Um Links in einem neuen Fenster zu öffnen, klicken Sie auf Leer.
Soziale Netzwerke 117 Bearbeiten eines Facebook-Objekts 1. 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. 2. Nehmen Sie die gewünschten Änderungen vor und klicken Sie auf OK.
118 Soziale Netzwerke Die verschiedenen Twitter-Objekte Die Twitter-Objekte, die Sie auf Ihren Seiten platzieren können, unterscheiden sich stark in ihrer Funktionalität und den Möglichkeiten, die sie Ihren Website-Besuchern bieten. Objekttyp Features Hiermit können Website-Besucher einen Tweet zu Ihrer TweetSchaltfläche Website auf dem eigenen Twitter-Profil posten. Hiermit können Website-Besucher Ihrem FolgenSchaltfläche Benutzerkonto bei Twitter folgen.
Soziale Netzwerke 3. 119 Konfigurieren Sie die Funktionalität der Schaltfläche: • Aktuelle Website-URL nutzen Aktivieren Sie diese Option, um die aktuelle URL Ihrer Website zu verwenden. Wenn Sie die Option deaktivieren, können Sie in dem Feld URL für Tweet selbst eine Webadresse eingeben. • Tweet-Text Hier geben Sie den Tweet-Text ein. Dieser Text wird in dem Tweet-Feld angezeigt und lässt sich vor Übermittlung des Tweets noch bearbeiten.
120 Soziale Netzwerke Einfügen einer Folgen-Schaltfläche 1. Klicken Sie in der Kategorie „Soziale Netzwerke“ der 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 Folgen-Schaltfläche aus. 3. Geben Sie in das Feld Diesem User folgen einen TwitterBenutzernamen ein.
Soziale Netzwerke 121 Einfügen eines LesezeichenSymbolstreifens für soziale Netzwerke Wenn Sie einen Lesezeichen-Symbolstreifen für soziale Netzwerke auf einer Seite platzieren, können die Website-Besucher Ihre Website mit anderen Benutzern teilen oder für Ihre Website auf einem sozialen Netzwerk die Werbetrommel rühren – schnell und einfach per Klick auf das entsprechende Symbol.
122 Soziale Netzwerke 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 die Schaltfläche +. Um ein Symbol aus dem Streifen zu löschen, klicken Sie in der Liste Im Streifen enthalten auf den Namen der Website und dann auf die Schaltfläche . 3. (Optional) Klicken Sie auf die Schaltflächen Aufwärts und Abwärts, um die Reihenfolge der Symbole in dem Streifen zu ändern. 4.
Willkommen 123 Multimedia
124 Multimedia
Multimedia 125 Einfügen von Videos WebPlus enthält einen optimierten Video-Player von Flowplayer, der zu vielen Dateiformaten kompatibel ist und mit dem Sie einzelne Videos und Playlisten direkt auf Ihren Seiten platzieren können. Hierfür lassen sich sowohl Videos von Ihrem Computer verwenden als auch Streaming-Videos aus dem Internet. Unterstützte Videoformate Das primär unterstützte Videoformat ist MP4 (*.mp4). Für ein Höchstmaß an Kompatibilität kann der Flowplayer MP4-Videos mit WebM- (*.
126 3. Multimedia Wählen Sie das Format für den Video-Player aus: • HTML5 und MP4-Video HTML5 bietet die beste Kompatibilität für die Wiedergabe. Hierfür werden keine Browser-Plugins und keine WiedergabeSoftware benötigt. ODER • Flash-Video Möchten Sie Flash-Videos verwenden, wählen Sie den älteren Flash Player aus. Damit die Website-Besucher die Flash-Videos auf Ihren Seiten sehen können, muss auf ihrem Computer das Plugin für den Flash Player installiert sein. 4.
Multimedia 127 Einfügen von YouTube-Videos Bereits im Internet publizierte YouTube-Videos lassen sich ebenfalls auf Ihren Webseiten platzieren. Die eigentlichen YouTube-Videos werden hierbei nicht in Ihre Website eingebettet. Stattdessen bettet das Programm eine spezielle YouTube-Video-ID in die Seite ein, wenn Sie das YouTube-Video auf der Seite platzieren. Einbetten einzelner YouTube-Videos 1. Öffnen Sie die Website www.youtube.
128 Multimedia 3. Klicken Sie in der Kategorie „Mediadateien“ der Registerkarte QuickBuild auf das Symbol YouTube und dann auf einen Punkt Ihrer Seite. 4. Legen Sie in dem Dialogfenster über das Dropdownfeld Ausgewählte Videos die Option „Einzelnes Video“ fest. Fügen Sie die Video-URL, seine ID oder den Einbettungscode in das Eingabefeld ein. 5. (Optional) Wenn Sie nur einen Teil des Videos anzeigen lassen möchten, geben Sie die Start- und Endzeit (in Sekunden) an. 6.
Multimedia 129 Einfügen von Vimeo-Videos Bereits im Internet publizierte Vimeo-Videos lassen sich ebenfalls auf Ihren Webseiten platzieren. Die eigentlichen Videos werden hierbei nicht in Ihre Website eingebettet. Stattdessen bettet das Programm eine spezielle Vimeo-Video-ID in die Seite ein, wenn Sie das Vimeo-Video auf der Seite platzieren. Einbetten von Vimeo-Videos 1. Öffnen Sie die Website www.vimeo.com in Ihrem Browser und wählen Sie das Vimeo-Video aus, zu dem Sie einen Link erstellen möchten.
130 Multimedia 4. Fügen Sie nun die zuvor kopierte URL des Videos in das Dialogfeld ein. 5. (Optional) Legen Sie über das Feld Farbe der Videosteuerung eine Farbe für die Steuerelemente und sichtbaren Texte des Players fest, die gut zu Ihrer Website passt. 6. (Optional) Aktivieren/Deaktivieren Sie die Kontrollkästchen für die Videoeinstellungen. 7. Klicken Sie auf die Schaltfläche OK. Einfügen von Flash-Dateien (SWF) Flash-Dateien (*.
Multimedia 131 Wenn Sie die Animation von der WebPlus-Datei getrennt halten, und lieber eine Verknüpfung zu der Flash-Datei in Ihre Seite einfügen möchten, deaktivieren Sie die Option Flash-Datei in Website einbetten. 3. (Optional) Legen Sie in dem Feld Zusätzliche Dateien eine kleine Liste mit Dateien (z. B. Bildern) an, aus denen Ihr Flash-Movie besteht. Mit dieser lokalen „Bibliothek“ haben Sie die zusätzlichen Dateien stets griffbereit und können schnell einen Verweis auf die Dateien erstellen.
132 Multimedia
Willkommen 133 Formulare
134 Formulare
Formulare 135 Einfügen von Formularen Mit Webformularen können Sie auf effiziente und moderne Weise neue Informationen von den Besuchern Ihrer Website erfragen. Formulardaten lassen sich auf unterschiedliche Weise sammeln – per E-Mail, in einer Skriptdatei (lokal oder auf einem Remote-Server) oder über die Webressourcen von Serif. Nähere Informationen hierzu finden Sie unter dem Thema „Übertragen von Formularen“ auf Seite 143.
136 Formulare Die verschiedenen Funktionen der Formulare werden erst verfügbar, nachdem Sie die Website im Internet publiziert haben. Sie können die Formulare natürlich ebenfalls in der WebPlus-Vorschau kontrollieren (siehe „Öffnen einer Website-Vorschau“ auf Seite 174). 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.
Formulare 137 Die Formularvorlagen sind für häufig verwendete Formulare aus den Bereichen Registrierung, Kommentare und Anmeldung entworfen. Sie können natürlich auch selbst Formulare entwerfen, z. B. für die Übermittlung von Lebensläufen, Umfragen, Wettbewerbe oder Adressen. • Wenn Sie lieber alles von Grund auf selbst aufbauen, fügen Sie alternativ ein leeres Formular in eine Seite ein und füllen es dann mit Formularfeldern aus der Registerkarte QuickBuild.
138 Formulare 4. (Optional) Klicken Sie in der Registerkarte Felder (Feld hinzufügen) auf die zusätzlichen Felder, die Sie in Ihrem Formular verwenden möchten. Mithilfe der Schaltflächen unter der Vorschau können Sie unerwünschte Felder löschen und die Reihenfolge der Felder ändern. 5. Klicken Sie in der Registerkarte Formularübermittlung auf ein Symbol, um das Ziel auszuwählen, zu dem Sie die Formulardaten übertragen möchten, wie z. B.
Formulare 139 Bearbeiten von Feldern 1. Führen Sie in der Registerkarte Vorlagen des FormularDesigners einen Doppelklick auf das gewünschte Formularfeld in der Vorschau aus. 2. Bearbeiten Sie in der Registerkarte Felder die Feldeigenschaften. Je nach ausgewähltem Formularfeld sind hier unterschiedliche Optionen verfügbar. 3. Sie können den standardmäßig verwendeten Namen übernehmen (dieser dient nur zur eindeutigen Identifikation innerhalb des Formulars) oder auch abändern.
140 Formulare Möchten Sie ein vordefiniertes Kombinationsfeld verwenden (z. B. für Länder, die Grafschaften in Großbritannien, die USBundesstaaten usw.) klicken Sie auf Quelldatei einfügen und dann in dem Menü auf Feld aus einem Quelldatei-Paket laden. Wählen Sie anschließend einfach mit dem Quelldatei-Browser das gewünschte Feld der Kategorie „Kombinationsfelder“ aus.
Formulare 141 Wenn Sie ein Formularfeld in dem Formular platzieren, werden die Felder mit dem Formular verankert. Die Positionen des Formulars auf der Seite und der einzelnen Formularfelder in dem Formular lassen sich mithilfe der dynamischen Führungslinien sowie der Seitenführungslinien und Spalten-/Zeilenbegrenzungslinien genau wie bei alle anderen Objekten präzise verändern.
142 Formulare Bearbeiten von Formularen auf einer Seite Wenn Sie ein Formular mit einer Vorlage erstellen, können Sie es jederzeit im Formular-Designer bearbeiten. Alle Formulare, die Sie von Grund auf neu erstellen, lassen sich direkt auf der Seite anpassen. Bearbeiten von Vorlagen-basierenden Formularen 1. Führen Sie einen Doppelklick auf das Formular aus. 2. Wählen Sie im Formular-Designer ein Formularfeld zur Bearbeitung aus, oder legen Sie über die Registerkarte Thema ein anderes Thema fest.
Formulare 143 Alle freigegebenen oder von Grund auf neu erstellten Formulare lassen Sie mit den üblichen Objektwerkzeugen und -funktionen von WebPlus bearbeiten. Sie können z. B. die Formulargröße durch Ziehen seines Begrenzungsrahmens ändern, Bilder in das Formular einfügen sowie die Formularfelder neu ordnen und ausrichten. Außerhalb des Formular-Designers lassen sich auch die Formularfeldeigenschaften jederzeit frei bearbeiten.
144 Formulare 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. • An die Webressourcen von Serif für eine weitere Übermittlung der Formulardaten durch Serif an Ihre E-Mail-Adresse. • Eine E-Mail-Adresse (z. B. die des Website-Verwalters) • Eine Skriptdatei (entweder eine lokale oder auf einem Server gespeicherte). Dieses Skript könnte z. B. Text in eine Textdatei oder in eine Datenbank schreiben.
Willkommen 145 Text
146 Text
Text 147 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 „*.
148 Text WebPlus importiert den Text in einen ausgewählten Textrahmen oder erstellt automatisch einen neuen Textrahmen, wenn Sie keinen ausgewählt haben. Nähere Informationen hierzu finden Sie unter „Einfügen von Textrahmen“ auf Seite 41. WebPlus übernimmt stets die Formatierung aus Texten, die in einer Textverarbeitung erstellt wurden.
Text 4. Klicken Sie anschließend auf die Schaltfläche Öffnen. 5. Ziehen Sie den Cursor mit gedrückter Maustaste über die Seite, um die Rahmenabmessungen selbst festzulegen. 149 ODER Klicken Sie auf die Seite oder die Montagefläche, um einen Rahmen in Standardgröße zu erstellen. Sie können ebenfalls den Text in einen Rahmen importieren, der sich bereits auf einer Seite befindet. Importieren von Text in bestehende Textrahmen 1.
150 Text 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. Klicken Sie in der Zeichnungsleiste auf das Symbol Künstlerischer Text. 2.
Text 151 3. Bevor Sie mit der Texteingabe beginnen, sollten Sie über die Textkontextleiste oder das Menü Text die wichtigsten Grundeinstellungen wie Schriftart, Formatvorlage usw. festlegen. Alternativ können Sie diese Optionen auch über das Kontextmenü festlegen. Klicken Sie hierzu mit der rechten Maustaste auf die Einfügemarke und dann auf die gewünschte Option des Untermenüs Textformat. 4. Tippen Sie den Text direkt auf der Seite ein, um ein künstlerisches Textobjekt zu erstellen.
152 Text Bearbeiten von künstlerischen Texten • Ziehen Sie den Cursor über einen Textbereich, um eine blaue Auswahl zu erstellen. 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.
Text 153 Auswählen und Eingeben von Texten Das Auswählen 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.
154 2. Text 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.
Willkommen 155 Quelldateien für kreative Designs
156 Quelldateien für kreative Designs
Quelldateien für kreative Designs 157 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.
158 Quelldateien für kreative Designs Arbeiten mit der Registerkarte „Quelldateien“ Die Registerkarte Quelldateien ist wie eine umfangreiche Ressourcenbibliothek, aus der Sie einfach die verschiedenen Layoutelemente für Ihre Webseiten „ausleihen“.
Quelldateien für kreative Designs 159 Über den Quelldatei-Browser lassen sich die Objekte bequem aus folgenden Kategorien auswählen. • Eigene Designs: Hier werden die Quelldateien gespeichert, die Sie als Objekte von der Seite in die Registerkarte gezogen haben. • Grafiken: Hier finden Sie die professionell entworfenen Cliparts aus Quelldatei-Paketen. • Bilder: Hier werden Bilder von Ihrer Festplatte gespeichert sowie Bilder aus einem Quelldatei-Paket (nicht alle diese Pakete enthalten auch Bilder).
160 Quelldateien für kreative Designs Ziehen Sie die Elemente einfach in die Kategorie „Eigene Designs“ (globale Speicherung für andere Projekte) oder eine der anderen Kategorien der Registerkarte. Möchten Sie nicht die eigentlichen Objekte speichern, sondern nur die für Objekte festgelegten Einstellungen, verwenden Sie die Kategorie „Einstellungen“ der Registerkarte. Nähere Informationen hierzu finden Sie unter dem Abschnitt „Speichern eigener Quelldateien und ihrer Einstellungen“ auf Seite 163.
Quelldateien für kreative Designs 161 Arbeiten mit dem QuelldateiBrowser Der Quelldatei-Browser bietet eine breite Palette professionell entworfener Designs, die Sie direkt für Ihre Website einsetzen können. Diese Designs sind in den kategorisierten QuelldateiPaketen (den so genannten „Asset Packs“) gespeichert, die zusammen mit WebPlus installiert wurden.
162 Quelldateien für kreative Designs Durchsuchen von Quelldateien nach Paketdatei 1. Klicken Sie in der Registerkarte Quelldateien auf Durchsuchen. 2. Wählen Sie auf der linken Seite des Quelldatei-Browsers unter Paketdateien eine Kategorie für Paketdateien aus (z. B. Hintergründe) oder den Namen einer Paketdatei. Um die Namen der Paketdateien einzublenden, müssen Sie eventuell neben dem Kategorienamen auf das Symbol klicken. Die Quelldatei-Pakete werden nun in dem Hauptfeld angezeigt. 3.
Quelldateien für kreative Designs 163 Speichern eigener Quelldateien und ihrer Einstellungen In WebPlus können Sie aus den auf Ihren Seiten platzierten Objekten eigene Quelldateien erstellen und speichern. Die Einstellungen für ein Objekt (z. B. seine Farbe) lassen sich ebenfalls speichern. Die Quelldateien lassen sich dann immer wieder für Ihre aktuelle Website oder auch für andere Projekte einsetzen.
164 Quelldateien für kreative Designs Seiteninhalt* (Navigationsleisten, J Schaltflächen, Formulare) J Seiteninhalt* (Textrahmen, korrigierte Bilder, Bildrahmen, Slider, Panels) J N Seiten* J N Einstellungen* (Hintergründe, N Formularthemen, Navigationsleisten, Schaltflächen, CSS-Eigenschaften, Video-Player, Elementoptionen für E-Commerce, Versand– informationen für E-Commerce) J * Wenn Sie Ihre Website schließen, müssen alle selbst angelegten Quelldateien gespeichert werden, die Sie für dieses
Quelldateien für kreative Designs 165 Speichern in der Kategorie „Eigene Designs“ Wenn Sie Ihre eigenen Objekte global speichern möchten, sodass sie auch in Zukunft für andere Website-Projekte verfügbar sind, legen Sie die Designs in der Kategorie Eigene Designs der Registerkarte Quelldateien ab. Nach der Installation von WebPlus ist die Galerie „Eigene Designs“ leer. Sie können jederzeit Ihre eigenen Objekte in dieser Kategorie speichern.
166 Quelldateien für kreative Designs Ziehen Sie ein Objekt in eine andere Kategorie (oder wählen eine vordefinierte Quelldatei aus einem Quelldatei-Paket des Quelldatei-Browsers aus), ist das gespeicherte Design nur für die aktuelle Website verfügbar. Speichern von Seiten Alle Seiten Ihrer Website lassen sich in der Kategorie „Seiten“ der Registerkarte Quelldateien speichern. Speichern einer Seite 1. Wählen Sie die Kategorie „Seiten“ der Registerkarte Quelldateien aus und klicken Sie auf Hinzufügen.
Quelldateien für kreative Designs 167 Genau wie die Speicherung von Objekten verläuft auch das Speichern der Einstellungen über einfaches Ziehen der Objekte. Sie müssen die Objekte jedoch hierbei in der Kategorie „Einstellungen“ ablegen. Mit einem Popup-Dialogfeld können Sie die Einstellungen für die Speicherung festlegen.
168 Quelldateien für kreative Designs Arretieren und Freischalten von Quelldateien • Um alle Quelldateien einer Kategorie zu arretieren, klicken Sie auf die Option Alles arretieren des Kategorietitels. ODER Um einzelne Quelldateien zu arretieren, klicken Sie auf das entsprechende Symbol der Miniaturen. • Um alle Quelldateien einer Kategorie freizugeben, klicken Sie auf die Option Nichts arretieren des Kategorietitels.
Willkommen 169 Vorschau und Publizieren
170 Vorschau und Publizieren
Vorschau und Publizieren 171 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.
172 Vorschau und Publizieren 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. Klicken Sie in der Standardkontextleiste auf die Schaltfläche Website-Manager und dann auf die Option Website-Prüfung. Der Website-Manager wird nun mit aktivierter Kategorie „Website-Prüfung“ geöffnet. 2.
Vorschau und Publizieren 173 Automatische Korrektur mehrerer Probleme 1. Um alle Probleme und Seiten auszuwählen, aktivieren Sie die Option Seite in der linken oberen Ecke der Problemliste. 2. Klicken Sie in der rechten unteren Ecke der Liste auf die Zelle Alle korrigieren. Am Anfang der untersten Zeile wird die Anzahl der Probleme angezeigt (z. B. 6/6 Ausgewählt). 3.
174 Vorschau und Publizieren 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. Ist diese Schaltfläche grau angezeigt und somit nicht verfügbar, folgen Sie einfach den Vorschlägen zur Problembehebung. 4. Klicken Sie als Letztes auf die Schaltfläche Schließen.
Vorschau und Publizieren • 175 Um einen externen Browser zu verwenden, wählen Sie die Option Vorschau in aus. Der genaue Name dieser Menüpunkte richtet sich nach den Browserversionen, die auf Ihrem System installiert sind. Eine Möglichkeit wäre z. B. „Vorschau im Internet Explorer“. Die Website wird anschließend in einen temporären Ordner exportiert und dann in dem ausgewählten Browser geöffnet. Mit WebPlus können Sie die geschätzte Downloadzeit für jede Seite Ihrer Website prüfen.
176 Vorschau und Publizieren Falls Sie noch kein FTP-Konto eingerichtet haben, müssen Sie nun die Details zu der FTP-Verbindung mit Serif WebPlus.net in ein automatisch geöffnetes Dialogfeld eintragen. Festlegen der FTP-Kontoinformationen 1. In dem Dialogfeld Im Web publizieren: HostingInformationen stehen Ihnen mehrere Möglichkeiten zur Verfügung: • Um ein Serif Hosting bei WebPlus.
Vorschau und Publizieren 177 • Portnummer: Falls Sie von Ihrem Dienstanbieter keine andere Vorgabe erhalten haben, können Sie die Portnummer auf „21“ belassen. • Wenn Ihr Dienstanbieter keinen bestimmten Ordner vorgeschrieben hat, oder Sie nicht unbedingt alle Dateien in ein spezielles Verzeichnis kopieren müssen, lassen Sie das Feld Ordner einfach leer. • Anschließend geben Sie den Benutzernamen und das Kennwort ein, die Sie von Ihrem Dienstanbieter erhalten haben.
178 Vorschau und Publizieren • Website-URL: Die URL-Adresse Ihrer Website. Nach dem FTP-Upload können Sie die Website mithilfe eines Dialogfelds und dieser URL anzeigen. • Klicken Sie auf OK, um das Dialogfeld „Kontodetails“ zu schließen. 3. Klicken Sie nun in dem Dialogfeld für den Server-Upload auf Test, um Ihr FTP-Konto zu testen. Verläuft der Test erfolgreich, wird ein Dialogfeld mit einem Hinweis zu der erstellten Verbindung angezeigt.
Vorschau und Publizieren 179 Übertragen Ihrer Website per Upload 1. Wählen Sie in dem Dialogfeld Im Web publizieren das gewünschte FTP-Konto über das Dropdownfeld aus. 2. Arbeitet Ihre Website mit einer Datenbank, ist die Option Vor dem Publizieren zusammenführen aktiviert. Wenn Sie eventuelle Änderungen nicht übernehmen möchten, deaktivieren Sie einfach die Option. Diese Option wird grau dargestellt und ist somit nicht verfügbar, wenn das Programm keine Datenbank oder Änderungen erkennt.
180 Vorschau und Publizieren 7. Wenn Sie das erste Mal eine Website übertragen, werden die ausgewählten Dateien direkt an den Webserver übermittelt. ODER Wenn Sie die Dateien an eine bestehende Website übermitteln, wird ein Dialogfeld für den Datei-Upload mit den verschiedenen Aktionen zu den Dateien angezeigt. „Hinzufügen“ steht für neu hinzugefügte Dateien, „Ersetzen“ für Dateien, die auf dem Webserver ersetzt werden und „Nicht ändern“ für Dateien, die nicht aktualisiert werden.
Vorschau und Publizieren 181 8. Wählen Sie in dem Dialogfeld für die Website-Publikation den Browser aus, in dem Sie die Live-Website anzeigen möchten und klicken Sie auf Diese URL anzeigen. Sie können Ihre Website nun live über einen Webbrowser testen. Wenn Sie Dateien umbenennen oder löschen und dann eine oder mehrere Seiten neu im Web publizieren, werden die alten Dateien nicht automatisch gelöscht. Sie müssen diese Dateien manuell über den Befehl Datei > Website publizieren > Website warten entfernen.
182 Vorschau und Publizieren Publizieren im Web (über andere Hosts) Wenn Sie Ihre Website im World Wide Web publizieren möchten, müssen Sie die fertige Website an einen Server übertragen, der Ihnen von einem Dienstanbieter 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 183 Publizieren Ihrer Website im World Wide Web • Klicken Sie in der Standardsymbolleiste auf den Pfeil des Symbols Website publizieren und in dem Menü auf Im Web publizieren. Falls Sie noch kein FTP-Konto eingerichtet haben, müssen Sie nun die Details zu der FTP-Verbindung in ein automatisch geöffnetes Dialogfeld eintragen.
184 Vorschau und Publizieren Konfigurieren von QuickPublish 1. Klicken Sie in der Standardsymbolleiste auf den Pfeil des Symbols Website publizieren und dann auf QuickPublish konfigurieren. 2. Gehen Sie in dem Dialogfeld wie folgt vor: • Geben Sie die URL der Website ein, an die Sie die Seite übertragen möchten. Alternativ können Sie die URL auch in dem Dropdownfeld auswählen. • Wählen Sie den Browser aus, in dem die publizierte Seite angezeigt werden soll.
Willkommen 185 Inhalte für Fortgeschrittene
186 Inhalte für Fortgeschrittene
Inhalte für Fortgeschrittene 187 Was bedeutet E-Commerce? Als „E-Commerce“ bezeichnet man den Kauf und Verkauf von Waren über das Internet. 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. Der Warenkorb entspricht in seiner Funktion dem realen Warenkorb in einem Supermarkt und dient als Container für die Waren, die Sie in einem Internet-Shop ausgesucht haben.
188 Inhalte für Fortgeschrittene Die E-Commerce-Formulare können ebenfalls die Berechnung der Steuern, Versandgebühren und anderer Sonderzuschläge übernehmen. Über Links können Ihre Käufer schnell und einfach mit einem Klick Waren kaufen, für die keine zusätzlichen Optionen notwendig sind. Die Art und der Umfang der Funktionen variieren je nach Dienstanbieter. Konfigurieren des Warenkorbsystems Ihres Dienstanbieters Über WebPlus lassen sich Warenkorbsysteme sehr flexibel konfigurieren.
Inhalte für Fortgeschrittene 189 Welche Sie verwenden können, hängt davon ab, ob Sie bereits Kunde bei einem Dienstanbieter sind oder sich als Neukunde anmelden möchten: • Als Neukunde wählen Sie zunächst das Symbol für den Dienstanbieter aus und klicken dann auf die Schaltfläche Jetzt anmelden. Die Website des Dienstanbieters wird nun in einem neuen Browserfenster geöffnet, sodass Sie sich als registrierter Kunde bei dem Warenkorbdienstanbieter anmelden können.
190 4. Inhalte für Fortgeschrittene (Optional, nur für PayPal) Klicken Sie in dem nächsten Dialogfeld auf PayPal-Minicart verwenden, um einen PopupWarenkorb als Overlay einzublenden, wenn Ihre WebsiteBesucher Artikel in ihren Warenkorb legen. Der Warenkorb wird anschließend in der linken oberen Browserecke minimiert und die Artikel bleiben bis zu dem Checkout an der Kasse in dem Warenkorb.
Inhalte für Fortgeschrittene 191 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.
192 Inhalte für Fortgeschrittene Content Management System (CMS) 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 lassen sich separate Farben festlegen.
Inhalte für Fortgeschrittene 193 Abstimmung Mit dieser Ressource können Sie online eine Umfrage durchführen, um die Meinung der Website-Besucher zu einem bestimmten Thema einzuholen. Buchungsassistent Dieses Objekt ermöglicht die Onlinebuchung von Hotelzimmern, Konferenzräumen, Theaterkarten usw. Objekte lassen sich für Stunden oder Tage mieten, als sich wiederholende Buchungen durchführen und mit Preisoptionen für unterschiedliche Altersgruppen anbieten.
194 Inhalte für Fortgeschrittene Modus für die Zugangskontrolle: Dieses Objekt regelt den Zugriff auf Seiten, Foren, Blogs und CMS mithilfe von Benutzergruppen. Nähere Informationen hierzu finden Sie unter dem Thema „Die Zugangskontrolle“ auf Seite 201. • • Aktivieren des Spam-Schutzes CAPTCHA während der Benutzeranmeldung.
Inhalte für Fortgeschrittene 195 Anlegen eines Kontos bei den Serif Webressourcen 1. Klicken Sie im Menü Einfügen auf Smart-Objekt. 2. Klicken Sie in dem Anmeldungsdialogfeld auf den Link Konto erstellen unter den Feldern für Benutzername und Kennwort. 3. Geben Sie in das nächste Dialogfeld Ihre aktuelle E-MailAdresse ein, den Benutzernamen und zweimal das Kennwort (zur Bestätigung).
196 Inhalte für Fortgeschrittene Zugreifen auf die Webressourcen 1. Klicken Sie im Menü Einfügen auf Smart-Objekt. 2. Geben Sie in das Anmeldungsfenster Ihren Benutzernamen und das Kennwort ein. Wenn Sie in Zukunft direkt auf die Webressourcen zugreifen möchten, ohne sich vorher anzumelden, aktivieren Sie die Option Kontodetails speichern. 3. Klicken Sie auf die Schaltfläche Anmelden. Die Webressourcen öffnen nun das Dialogfeld für die SmartObjekte.
Inhalte für Fortgeschrittene 197 Hinzufügen von Objekten zu der Bibliothek 1. Klicken Sie in dem Hauptfenster für Smart-Objekte auf die Schaltfläche Neu. 2. Blättern Sie in dem Dialogfeld Smart-Objekt erstellen durch die Liste und wählen Sie ein Smart-Objekt aus. 3. (Optional) Wenn Ihr neues Smart-Objekt in einer anderen Sprache als Englisch arbeiten soll, wählen Sie den gewünschten Eintrag in dem Dropdownfeld Sprache aus. 4. Klicken Sie auf die Schaltfläche OK.
198 Inhalte für Fortgeschrittene 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.
Inhalte für Fortgeschrittene 199 Bearbeiten von Smart-Objekten in Ihrer Bibliothek • Klicken Sie in dem Hauptfenster für Smart-Objekte unter dem Feld „Meine Smart-Objektbibliothek“ auf Bearbeiten. 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.
200 Inhalte für Fortgeschrittene Verwalten von Smart-Objekten in Ihrer Bibliothek • Klicken Sie in dem Hauptfenster für Smart-Objekte auf Verwalten unter dem Feld „Meine Smart-Objektbibliothek“. Die Verwaltungsoptionen variieren je nach ausgewähltem Smart-Objekt. Verwalten von Smart-Objekten direkt über das Internet • Melden Sie sich bei www.serifwebresources.com an, um Ihre Smart-Objekte unabhängig von der WebPlus-Website zu verwalten.
Inhalte für Fortgeschrittene 201 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.
202 Inhalte für Fortgeschrittene 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. Nähere Informationen hierzu finden Sie in der Hilfe zu WebPlus. Die CSS-Eigenschaften Neben den Formatierungsattributen, die Sie im Arbeitsbereich von WebPlus mithilfe grafischer Optionen festlegen, wie z. B. Füllungsfarbe, Kontur usw.
Inhalte für Fortgeschrittene 203 Anwenden und Bearbeiten von CSSFormatierungsattributen • Klicken Sie in der Eigenschaftsleiste auf die Option CSSEigenschaften bearbeiten. ODER Führen Sie einen Doppelklick auf ein Objekt aus und klicken Sie dann in dem Dialogfeld „Eigenschaften bearbeiten“ auf die Registerkarte CSS-Eigenschaften.
204 Inhalte für Fortgeschrittene
Willkommen 205 Anhänge
206 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.
208 Anhänge Warenzeichen und CopyrightVermerke 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 209 THE PROXIMITY HYPHENATION SYSTEM © 1989 Proximity Technology Inc. Alle Rechte vorbehalten. 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.
210 Anhänge © 2013 Serif (Europe) Ltd. Alle Rechte vorbehalten. Dieses Handbuch darf in jeglicher Form, ob ganz oder teilweise, nur mit ausdrücklicher schriftlicher Genehmigung von Serif (Europe) Ltd. reproduziert werden. Serif WebPlus X7 © 2013 Serif (Europe) Ltd. Alle Rechte vorbehalten. Die in den Beispielen verwendeten Namen und Firmen sind frei erfunden.
Willkommen 211 Index
212 Anhänge
Index Abmessungen, 29 für die Website, 29 Abstimmung (SmartObjekt), 193 Aktionen, 82 Aktive Betrachter (SmartObjekt), 191 Anhängen von Master-Seiten, 32 Animierte Objekte, 63 Banner, 63 Textlaufbänder, 97 Anker, 84 auf Objekten, 85 auf Text, 84 Anpassungen (für Bilder), 49 Anti-spam (CAPTCHA), 193 Audio Hyperlinks zu Dateien, 78 Banner (animiert), 63 Benutzerliste (SmartObjekt), 193, 201 Bilder Bildkorrekturen, 49 Einfügen in die Quelldateien, 44 Einfügen in Seiten, 45 Rollover-Popup, 89 Blogs, 101, 191 Ei
214 Anhänge Zugriff über OffsiteLinks, 37 Formatieren von Text Probleme auf Webseiten, 171 Formatierung (CSS), 202 Formular-Designer, 135 Formulare, 135 Bearbeiten, 142 Erstellen, 136 Erstellen von Grund auf neu, 140 Formularvorlagen, 137 Quelldateien für, 141 Übertragen von Formulardaten, 143 Forum, 192 Fotogalerie, 54 aus Flickr-Fotos, 59 aus SlideShowPro Director, 59 Bearbeiten, 58 Einfügen, 56 Fotos einfügen, 56 FTP, 183 Kontodetails, 183 Galerie (Foto-), 54 Google Maps, 95 Hintergrund, 30, 157 Speich
Index Neue Features, 5 News (Smart-Objekt), 192 News-Ticker, 97 Objekte CSS-Eigenschaften für, 202 Objekte (Erneut verwenden in Websites), 163 Objekte für soziale Netzwerke, 115, 117 Facebook, 115 LesezeichenSymbolstreifen, 121 Twitter, 117 Öffnen bestehender Websites, 24 Offsite-Links, 37 Panels, 50 Aktionen für, 53 Bearbeiten, 52 Ein-/Ausblenden, 53 Einfügen, 51 Festlegen von Aktionen für, 82 in Slidern, 63 PayPal Hyperlinks zu Einkaufswagen einfügen, 78 Konfigurieren, 188 Minicart, 188 Playlisten Hinzuf
216 Anhänge Größe einstellen, 30 Hinzufügen und Entfernen, 33 Neuordnen, 33 Sicherheit, 201 Speichern, 166 Über- und untergeordnete Seiten, 26, 36, 69 Serif, 207 Kontaktinformationen, 207 Webhosting, 175 Webressourcen, 135, 191 Anmelden, 195 Löschen der Kontodetails, 195 Shoutbox (Smart-Objekt), 193 Slider, 63 Aktionen für, 82 Auswählen auf der Seite, 64 Bearbeiten, 65 Einfügen, 64 Panels einfügen, 66 SlideShowPro Director, 55 Smart-Objekte, 191 Bearbeiten, 198 Einfügen in Seiten, 198 Erstellen, 196 Konto
Index Hyperlinks zu Dateien, 78 Video-Player, 125 Vimeo, 129 YouTube, 127 Video-Player, 125 Vimeo-Videos, 129 Vorlage (Designvorlage), 18 Erstellen von Websites, 18 Webhosting, 175 Webseiten und Websites, 24 Website (Registerkarte), 27, 30, 33 Website-Eigenschaften, 29 Website-Manager Prüfen des Layouts, 171 Website-Prüfung, 171 Websites, 22, 24 Erstellen aus einer leeren Seite, 22 Öffnen bestehender Dokumente, 24 Website-Struktur, 26 Anzeigen, 28 Website-Strukturansicht, 28 Website-Suche, 92 Website-Vors
