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.
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.
WGrammar Grammar-Checker Engine © 1998 Wintertree Software Inc. Andrei Stcherbatchenko, Ferdinand Prantl eBay © 1995-2008 eBay Inc. Alle Rechte vorbehalten. PayPal © 1999-2008 PayPal. Alle Rechte vorbehalten. Roman Cart © 2008 Roman Interactive Ltd. Alle Rechte vorbehalten. Mal's © 1998 bis 2003 Mal's e-commerce Ltd. Alle Rechte vorbehalten. iTunes © 2000 bis 2008 Apple Computer, Inc. Alle Rechte vorbehalten.
Inhaltsverzeichnis Inhaltsverzeichnis 1. Willkommen ............................................... 1 Willkommen!................................................................... 3 Die wichtigsten Features ................................................ 4 Neue Features ............................................................. 18 Installieren der Software .............................................. 23 2. Erste Schritte........................................... 25 Der Startassistent..............
Inhaltsverzeichnis 4. Navigation & Hyperlinks ......................... 87 Einfügen von Navigationsleisten .................................. 89 Einfügen von Popup-Menüs ....................................... 103 Einfügen von Schaltflächen........................................ 105 Einfügen von Hyperlinks und Ankern ......................... 110 5. Einfügen von Webobjekten .................. 117 Einfügen einer Website-Suche................................... 119 Arbeiten mit der Galerie ................
Inhaltsverzeichnis 7. Arbeiten mit Texten ............................... 225 Importieren von Texten aus einer Datei ..................... 227 Arbeiten mit Textrahmen ............................................ 229 Arbeiten mit künstlerischen Texten ............................ 236 Platzieren von Texten auf einem Pfad ....................... 238 Bearbeiten von Texten auf einer Seite......................... 241 Suchen und Ersetzen ................................................. 246 8.
Inhaltsverzeichnis 10. Bearbeiten von Objekten ...................... 275 Auswählen einzelner Objekte..................................... 277 Auswählen mehrerer Objekte..................................... 280 Kopieren, Einfügen und Replizieren von Objekten..... 281 Verschieben von Objekten ......................................... 285 Vergrößern und Verkleinern von Objekten ................. 285 Drehen von Objekten .................................................
Inhaltsverzeichnis 13. Linien, Formen & Effekte ...................... 363 Zeichnen und Bearbeiten von Linien .......................... 365 Festlegen der Linieneigenschaften ............................ 369 Zeichnen und Bearbeiten von Formen ....................... 372 Arbeiten mit 2D-Filtereffekten..................................... 376 Arbeiten mit 3D-Filtereffekten..................................... 381 Arbeiten mit Objektformatvorlagen ............................. 384 14.
Inhaltsverzeichnis
1 Willkommen
2 Willkommen
Willkommen 3 Willkommen! Willkommen zu WebPlus X5 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 Galerieobjekte 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 18) 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 • Sofort einsatzbereite Designvorlagen Mit den vordefinierten Designelementen und Farbschemata dieser Vorlagen können Sie in wenigen Handgriffen Websites ins Internet stellen. Alle ProDesignvorlagen enthalten darüber hinaus Lizenzgebühr-freie Bilder, die Sie beliebig verwenden können. • Professionelle Layoutwerkzeuge Die verschiebbaren Lineale, Führungslinien und das Punktraster sind ideal, wenn Sie Ihre Designobjekte schnell und präzise auf den Seiten platzieren möchten.
6 Willkommen Unverzichtbare Website-Features • Unkompliziertes und schnelles Design mit der QuickBuilder-Leiste Der ideale Einstieg in WebPlus! Ziehen Sie einfach Seiten, Navigationsleisten, Textrahmen, Bilder, FlashElemente, Fotogalerien, Schaltflächen oder SmartObjekte direkt auf eine Seite. Im Handumdrehen können Sie so Ihre Seiten gestalten, ohne sich erst in die Benutzeroberfläche unseres Programms einarbeiten zu müssen.
Willkommen 7 • E-Commerce - Kaufrausch im Internet! Mit WebPlus können Sie schnell und einfach eine umfangreiche Palette an Artikeln auf Ihren Websites anbieten. Die späteren Transaktionen sind dank der integrierten Unterstützung für Anbieter von ECommerce-Warenkörben (z. B. PayPal) überhaupt kein Problem. Platzieren Sie einfach die gewünschten ECommerce-Formulare und -Schaltflächen auf Ihren Seiten.
8 Willkommen • Smart-Objekte Mit den Serif Webressourcen, einem kostenlosen Hosting-Service für Smart-Objekte, können Sie folgende interaktive Features in Ihre Website integrieren: • Aktive Betrachter: Hier erfahren Sie genau, wie viele Besucher sich gerade eine bestimmte Webseite ansehen. • Blogs: Bei Blogs können Sie persönliche Profile anlegen sowie Lesezeichen-Links und Rückverfolgungen für Querverweise zwischen Blogs einsetzen.
Willkommen 9 • Abstimmung: Mit dieser Ressource können Sie eine Online-Umfrage erstellen, um die Meinung der Website-Besucher zu einem bestimmten Thema einzuholen. • Buchungsassistent: Mit dem kalenderbasierenden Buchungsassistenten lassen sich Buchungen für Hotelzimmer, Konferenzräume, Squash-Plätze usw. durchführen. • Shout Box: Mit diesem Objekt können Sie interaktive Chatfenster auf Ihren Webseiten platzieren.
10 Willkommen • RSS Feeds: Nutzen Sie RSS-Feeds von anderen Anbietern, oder stellen Sie Ihre eigenen Feeds zusammen. Mit dem RSS-Reader halten Sie Ihre Website-Besucher stets auf dem Laufenden - integrieren Sie einfach die Feeds Ihrer bevorzugten Nachrichten-Websites (BBC News, CNN, Reuters, FTSE, NASDAQ). Alternativ können Sie auch Ihre eigene Nachrichtenagentur eröffnen und selbst einen RSS-Feed zusammenstellen.
Willkommen 11 Bilder • Importieren von Bildern Importieren Sie Bilder in den häufig verwendeten Standardformaten - einschließlich der neuesten RAWFormate für Digitalkameras, Photoshop-Dateien, HD Photos und Serif Metadateien (ideal für den Datenaustausch zwischen Serif-Programmen).
12 Willkommen • Bildkorrekturen Sie können Ihre Bilder flexibel mit Korrekturfunktionen für Helligkeit, Kontrast, rote Augen usw. anpassen oder die Bilder auch über die Option In PhotoPlus bearbeiten direkt an unsere preisgekrönte Bildbearbeitungssoftware übergeben (sofern diese auf Ihrem PC installiert ist).
Willkommen • 13 Dekorative Bildrahmen Die fantastischen Bildrahmen der Studio-Registerkarte „Galerie“ lassen sich schnell und einfach auf bereits platzierte Fotos ziehen. Multimedia • YouTube®-Videos Wählen Sie einfach Ihre Lieblingsvideos in YouTube® aus, und zeigen Sie die Videos per Link auf Ihren eigenen Webseiten. • Podcasts Erstellen Sie Ihre eigenen Podcast-Feeds und senden Sie Audio- und Videoepisoden schnell und einfach an Ihre Abonnenten.
14 Willkommen • Transparenzeffekte Hintergründe, Textrahmen, Tabellen, Formen und freie Texte lassen sich schnell und eindrucksvoll mit verschiedenen Transparenzoptionen gestalten. Genau wie bei den Farbfüllungen sind hier gleichmäßige, Verlaufsund Bitmap-Varianten verfügbar. Sie können sogar Ihre eigenen Fotos als Bitmap-Transparenzen einsetzen.
Willkommen • 15 Sofort-3D mit flexibler Bearbeitung direkt auf den Dokumentseiten Mit der Kontextleiste für 3D-Effekte können Sie alle 3DObjekte direkt auf den verschiedenen Seiten konfigurieren, ohne dass Ihnen Dialogfelder die Sicht auf den Rest des Seitenlayouts versperren. Neben den mehrfarbigen Lichteffekten (mit präziser Richtungskontrolle) stehen Ihnen hier auch vordefinierte Drechselprofile und Abschrägungsprofile zur Verfügung.
16 Willkommen • Textrahmen Platzieren und formatieren Sie Ihre Texte in Textrahmen und passen Sie ihre Position und Größe bequem an Ihre Seiten an. Über die separaten Zuschnittsund Umbruchlinien können Sie wesentlich präziser festlegen, wie Texte um Objekte herumfließen und auf Ihren Seiten angezeigt werden. Ob Sie nun mehrsprachige Texte oder Unicode-Zeichen einfügen, importieren, exportieren oder verschiedene Schriftarten benötigen, mit unseren Textoptionen stehen Ihnen alle Designmöglichkeiten offen.
Willkommen 17 • Tabellen und Kalender Für das Design Ihrer Kalender steht Ihnen eine breite Palette an Vorlagen zur Verfügung. Alternativ können Sie die Tabellen und Kalender auch selbst definieren. Über die praktische Tabellenkontextleiste lassen sich die Daten sortieren, Zellen formatieren und verschiedene Arbeitsmappenfunktionen einsetzen, mit denen Sie Werte wie in einer Tabellenkalkulation berechnen können (optional mit absoluten Zellverweisen).
18 Willkommen Publizieren im Web • Vorschaufunktionen für Ihre Projekte Sie können Ihre Website bequem als gesamtes Projekt oder in einzelnen Seiten mit den Browsern testen, die auf Ihrem PC installiert sind. • Publizieren Ihrer Website Websites lassen sich sowohl in lokalen Ordnern Ihrer Festplatte publizieren als auch per FTP-Verbindung direkt an Ihren Internetdienstanbieter übertragen.
Willkommen 19 Register bis zu Standard und Traditionell. Die Vorlagen für Schaltflächen, Trennelemente und Hintergründe der Leisten und Popup-Menüs lassen sich flexibel anpassen. Alternativ können Sie diese Elemente auch in dem Button Studio und dem Design Studio von Grund auf neu entwerfen.
20 Willkommen • Erweiterte Google Maps (siehe Seite 125) Mit Google Street View lassen sich genau fotografierte Plätze direkt über angeklickte Marker aufrufen. Google Maps unterstützt nun auch eine unbegrenzte Anzahl von Kartenmarkern! Programmoberfläche & Bedienkomfort • Farbige Auswahlmarkierung mit der Maus (siehe Seite 275) Gerade bei sehr komplexen Designs mit vielen Objekten ist es ausgesprochen praktisch, wenn das aktuell unter dem Mauszeiger befindliche Objekt von selbst „aufleuchtet“.
Willkommen 21 • Benutzerdefinierte Variablen (siehe Seite 263) Verwenden Sie häufig dieselben Ausdrücke an unterschiedlichen Stellen Ihrer Website? Definieren Sie diese Begriffe einfach als Variablen, sodass sie sich automatisch aktualisieren lassen. Diese Methode ist ideal für die Arbeit mit mehreren Produktnamen, Preisen, Produktversionen und Sprachen gleichzeitig.
22 Willkommen Bilder • Präsentieren von Bildern in Lightboxen (siehe Seite 132) Per Klick auf eine Bildminiatur können Sie die Bilder in maximaler Größe in einer Popup-Lightbox anzeigen lassen. Lightboxen sind ebenfalls ideal für Anmeldungsfelder, Formulare oder ganze Webseiten, wenn Sie Platz auf dem Bildschirm sparen möchten. Alle Lightboxen werden frei über der aktuellen Seite platziert und lassen sich mit einer optionalen Diashow, Titeln und Beschreibungen sowie Stilvarianten ergänzen.
Willkommen 23 Installieren der Software Systemanforderungen Minimale Systemanforderungen: • Windows-basierender PC mit CD-/DVD-Laufwerk und Maus • Eines der Betriebssysteme Microsoft Windows® XP (32 Bit), Windows® Vista oder Windows® 7 • 512 MB RAM (Arbeitsspeicher) • 336 MB freie Festplattenkapazität • Monitor und Grafikkarte, die eine Auflösung von 1024 x 768 ermöglichen • Internet Explorer 5.5 (6.
24 Willkommen • .NET 2.0 für die Textimportfilter von Word 2007/2010 + OpenOffice (Bestandteil der Standardinstallation) • Für den Zugriff auf die Online-Ressourcen und das Publizieren der Projektdateien im World Wide Web werden ein Internetzugang und ein Benutzerkonto bei einem Internet Service Provider benötigt. Die Erstinstallation Um Serif WebPlus zu installieren, legen Sie einfach die Programm-CD von WebPlus X5 in Ihr CD-/DVD-Laufwerk ein.
2 Erste Schritte
26 Erste Schritte
Erste Schritte 27 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.
28 Erste Schritte • Weitere Ressourcen: Hier finden Sie Links zu kostenlosen Designelementen und kostenpflichtigen Designvorlagen.* • 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, PDF-Anleitungen und anderen Informationen.
Erste Schritte 29 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 mit starker visueller Wirkung. • Schemata: Wählen Sie einfach ein Farbschema aus, um der gesamten Website einen bestimmten Look zu verleihen.
30 Erste Schritte 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.
Erste Schritte 31 Pro-Designvorlagen Die Pro-Vorlagen sind in verschiedene Kategorien unterteilt, die auf unterschiedlichen Fachgebieten basieren. Mit der Bildlaufleiste können Sie bequem durch die Vorlagen blättern. Über das Symbol neben dem Kategorienamen können Sie die Liste der jeweiligen Kategorievorlagen auf den Kategorienamen verkleinern. In dem rechten Feld werden automatisch die Miniaturansichten für die Seiten der ausgewählten Vorlage angezeigt. 4.
32 Erste Schritte 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. Die Seitenminiaturansichten werden nun automatisch aktualisiert, um den neuen Look der Seiten widerzuspiegeln. Mit den Zoomsymbolen oder dem Schieberegler am unteren Rand des Dialogfelds können Sie die Anzeige beliebig vergrößern und verkleinern. 6. Klicken Sie anschließend auf die Schaltfläche Öffnen.
Erste Schritte 33 Aufbauen einer vollständig neuen Website Obwohl die Designvorlagen sehr hilfreich sind, können Sie Ihre Websites auch von Grund auf neu gestalten, indem Sie mit einer leeren Seite beginnen. Erstellen einer neuen Website ohne Vorlage mit dem Startassistenten • Starten Sie WebPlus. ODER Klicken Sie in der Standardsymbolleiste auf Website. • Neue Klicken Sie auf Datei anlegen > Neue Website anlegen.
34 Erste Schritte Ö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 WebPlus-Website mit dem Startassistenten 1.
Erste Schritte 35 Öffnen von Websites durch Klicken und Ziehen • Ziehen Sie die Miniaturvorschau der Website aus dem Windows Explorer in den Arbeitsbereich von WebPlus. 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.
36 Erste Schritte Alternativ können Sie auch den Namen einer geöffneten Website in dem Menü Fenster auswählen. Ungespeicherte Websites werden mit einem Sternchen markiert. Die momentan aktive Website erkennen Sie an dem Häkchen neben ihrem Namen. In dem Beispiel ist die Website „w456.wpp“ aktiv und nicht gespeichert. Speichern Ihrer Website Um Ihre Arbeit zu speichern, gehen Sie wie folgt vor: • Klicken Sie in der Standardsymbolleiste auf Speichern.
3 Entwerfen von Websites & Seiten
38 Entwerfen von Websites und Seiten
Entwerfen von Websites und Seiten 39 Aufbau von Website-Struktur und -Navigation Im Gegensatz zu einer Druckpublikation sind Websites nicht auf eine lineare Reihenfolge von Seiten angewiesen. Wenn Sie eine Website entwerfen, sollten Sie sich eine dreidimensionale Struktur vorstellen, wie z. B. die Ausstellungsräume eines Museums, in denen sich die Besucher nach ihren eigenen Vorstellungen umsehen können. Für gewöhnlich erreichen die Website-Besucher Ihre Website durch die „Vordertür“ (die Homepage).
40 Entwerfen von Websites und Seiten • Eine Sektion ist eine Kategorie, in der Seiten mit bestimmtem Inhalt zusammengefasst sind, wie z. B. „Galerie“, „Produkte“ oder „Kontakt“. Die wichtigen Hauptsektionen werden für gewöhnlich auf der Homepage einer Website in Form einer Navigationsleiste präsentiert. Idealerweise sollte jede Seite Ihrer Website zu einer Sektion gehören.
Entwerfen von Websites und Seiten 41 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.
42 Entwerfen von Websites und Seiten Navigation Die Navigationsleisten in WebPlus sind so programmiert, dass sie die Struktur Ihrer Website erkennen und automatisch berücksichtigen, sodass sich Website-Besucher später schnell zurechtfinden und problemlos durch die verschiedenen Seiten navigieren können.
Entwerfen von Websites und Seiten 43 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ü Datei auf den Eintrag WebsiteEigenschaften. Es wird nun das Dialogfeld „WebsiteEigenschaften“ geöffnet.
44 Entwerfen von Websites und Seiten Warnung bei Großbuchstaben in Dateinamen anzeigen Ist diese Option aktiviert, erscheint automatisch ein Hinweis, wenn Sie für den Dateinamen einer neu erstellten Seite Großbuchstaben verwenden. Dateinamen für Ressourcen Hier legen Sie die Formatierung für die Ressourcendateinamen fest, damit diese problemlos an ISPs übertragen werden können, die einige Einschränkungen für Dateinamen verlangen.
Entwerfen von Websites und Seiten 45 Seitenkopfzeile Hier können Sie Details zu dem Autor oder Copyright-Informationen in die Kopfzeile der Website-Seiten einfügen. Features Smart-Objekte Hier können Sie die für Blog, Forum oder CMS eingestellten Farben durch selbst definierte Farben oder Schemafarben Ihres aktuellen Website-Schemas ersetzen. Features Smart-Objekte Hier legen Sie das aktuelle Farbschema der Website für Smart-Objekte fest, wie z. B. Blogs, Foren und CMS.
46 Entwerfen von Websites und Seiten Suche Beschreibungen für Suchmaschinen Hier können Sie optionale Beschreibungen und Stichwörter zu Ihrer Website eingeben. Suchmaschinen Sitemap- und Roboter-Dateien Hier legen Sie fest, ob Suchmaschinen und so genannte Suchmaschinenroboter oder „WebCrawler“ (automatische Suchfunktionen) die Seiten Ihrer Website analysieren und per Index erfassen können. Eine Sitemap-Datei enthält alle Webseiten, die per Index erfasst werden.
Entwerfen von Websites und Seiten 47 Sie können zusätzlich die globalen Vorgaben der WebsiteEigenschaften für Größe und Ausrichtung einzelner Seiten oder Master-Seiten abändern (siehe hierzu „Festlegen der Seiteneigenschaften“ auf Seite 74). Einstellen der Seitenabmessungen für die gesamte Website • Wählen Sie in der Kategorie Seite eine neue Breite und/oder Höhe für die Seiten aus. Sie können ebenfalls die standardmäßig verwendete Seitenausrichtung für die gesamte Website ändern.
48 Entwerfen von Websites und Seiten Festlegen der Hyperlink-, Seiten- und Hintergrundfarben 1. Öffnen Sie die Kategorie Seite des Dialogfelds „Website-Eigenschaften“ und klicken Sie unter „Seitendarstellung“ auf eines der Pfeilsymbole, um die gewünschte Farbe zu ändern. 2. Wählen Sie einfach eine andere Farbe über die Farbfelder aus, die für die Schemafarben und anderen Farben angezeigt werden. Mit dem Eintrag Weitere Farben... öffnen Sie das Dialogfeld „Farbauswahl“. 3.
Entwerfen von Websites und Seiten • 3. 49 In dem Feld Position legen Sie die Bildposition fest (z. B. Oben Mitte). Bei wiederholten Hintergrundbildern wird das Bild von dieser Startposition aus wiederholt. Sie können ebenfalls über Benutzerdefiniert... die Bildposition selbst festlegen (in Relation zu der linken oberen Bildecke). Klicken Sie auf die Schaltfläche OK. Wenn Sie ein Bild mit transparenten Bereichen als Hintergrund verwenden, ist die Hintergrundfarbe durch diese Bereiche sichtbar.
50 Entwerfen von Websites und Seiten Web jedoch Milliarden von Webseiten umfasst, die alle laufend in den Indexdateien erfasst und aktualisiert werden müssen, können sich Webdesigner einiger Tricks bedienen, um die Indexerstellung zu optimieren, sodass ihre Webseiten in den Trefferlisten einer Suchabfrage möglichst weit oben aufgelistet werden.
Entwerfen von Websites und Seiten 51 • Titeltexte für Hyperlinks: Unterstützende Textbeschreibungen (z. B. „Neue Produkte in diesem Monat“), die bei der Mausberührung eines Hyperlinks angezeigt werden lassen sich ebenfalls von den Suchmaschinen erfassen. Nähere Informationen hierzu finden Sie unter dem Thema „Einfügen von Hyperlinks und Ankern“ auf Seite 110. • Roboter-Datei: Mit einer Roboter-Datei lassen sich Seiten (oder Ordner) gezielt von der Indexerstellung durch Suchmaschinen ausschließen.
52 Entwerfen von Websites und Seiten Arbeiten mit Titeln, Beschreibungen und Tags Obwohl die Seitentitel und Beschreibungen für Suchmaschinen per Meta Tag nicht zwingend erforderlich sind, sollten Sie diese dennoch ausfüllen, um die Chance zu erhöhen, dass eine der großen Suchmaschinen bei einer entsprechenden Anfrage auf Ihre Website verweist. Die Suchmaschinen unterhalten umfangreiche Kataloglisten von Webseiten, die häufig mit so genannten „Crawlern“ oder anderen Suchprogrammen zusammengestellt werden.
Entwerfen von Websites und Seiten 53 Um die Beschreibungen für Suchmaschinen einzugeben, gehen Sie wie folgt vor: 1. (Für die ganze Website) Klicken Sie im Menü Datei auf den Eintrag Website-Eigenschaften. ODER (Für eine einzelne Seite) Klicken Sie mit der rechten Maustaste im Arbeitsbereich oder in der StudioRegisterkarte „Website“ auf eine Seite und in ihrem Kontextmenü auf Seiteneigenschaften. Alternativ können Sie auch den entsprechenden Eintrag im Menü Bearbeiten verwenden. 2.
54 Entwerfen von Websites und Seiten Ausschließen einzelner Seiten von der Indexerstellung über Roboter-Meta-Tags Mit einem Roboter-Meta-Tag weisen Sie einen SuchmaschinenRoboter an, wie er mit dem Inhalt einer Website oder Webseite umzugehen hat. Sie können z. B. festlegen, dass der Roboter die gesamte Seite oder einzelne Seiten in den Index einbeziehen oder davon ausschließen sowie Hyperlinks auf den Seiten verfolgen oder ignorieren soll. Alle diese Angaben lassen sich beliebig kombinieren.
Entwerfen von Websites und Seiten 55 ermöglichen) oder die Suchmaschine auch alle Seiten per Index erfassen soll, die per Hyperlink mit einer im Index enthaltenen Seite verbunden sind (aktivieren/deaktivieren Sie die Option Verfolgen der Links von den Seiten ermöglichen). ODER (Für eine Seite) Aktivieren Sie die Optionen Suchmaschineneinstellungen der Website ignorieren und Roboter-Meta-Tag erstellen. Aktivieren/deaktivieren Sie anschließend die gewünschten Optionen für die einzelne Seite.
56 Entwerfen von Websites und Seiten (Für eine Seite) Aktivieren Sie die Option Suchmaschineneinstellungen der Website ignorieren und deaktivieren Sie die Option Index für diese Seite erstellen, um die Seite für die Indexerstellung zu sperren. Einschließen von Seiten in die Indexerstellung Bisher haben wir uns hauptsächlich mit Methoden beschäftigt, um Webseiten von der Indexerstellung auszuschließen.
Entwerfen von Websites und Seiten 57 Aktivieren der Suchmaschinen-Sitemaps 1. Klicken Sie im Menü Datei auf den Eintrag WebsiteEigenschaften. 2. Aktivieren Sie in der Kategorie „Suchmaschinen“ die Option Sitemap-Datei für Suchmaschinen erstellen. 3. (Optional) Wenn Sie die obige Option aktivieren, können Sie die Standarddatei sitemap.xml umbenennen. Klicken Sie hierzu auf die Schaltfläche Ändern... und legen Sie einen neuen Namen fest. 4.
58 Entwerfen von Websites und Seiten an, wie oft sich die Seite voraussichtlich ändern wird. Die Suchmaschine legt dann aufgrund dieser Angabe fest, wie oft die Indexerstellung durchgeführt werden soll. • Die Seitenpriorität von 0,0 (niedrigste) bis 1,0 (höchste). Hiermit legen Sie fest, wie wichtig eine Seite in Bezug auf die anderen Webseiten Ihrer Website ist. Die Priorität ist ein wichtiger Klassifizierungsparameter, nach der die Suchmaschinen sehr häufig Webseiten einstufen.
Entwerfen von Websites und Seiten 59 Die allgemeinen Verwaltungsfunktionen des Managers sind bereits während der Designphase Ihrer Website ausgesprochen hilfreich. Kurz vor dem Publizieren der Seiten sollten Sie auf jeden Fall die speziellen Funktionen für die Verwaltung von Texten und Ressourcen sowie die Website-Prüfung nutzen. Starten des Website-Managers • Klicken Sie in der Hinweisleiste am unteren Rand des Arbeitsbereiches (oder in der Standardkontextleiste) auf Website-Manager.
60 Entwerfen von Websites und Seiten Anker Anzeigen und Bearbeiten von Ankernamen und -position, Einschließen von Seiten in die Navigation (mit/ohne Trennelemente), Umschalten zu Ankern. Ressourcen Anzeigen der Bilder, Mediadateien, Links, HTML-Coderessourcen, Skripte oder Applets Ihrer Website. Sie können direkt zu den Ressourcen auf den Seiten umschalten, den Status für Bilder zwischen „Eingebettet“ und „Verknüpft“ umschalten, Bilder ersetzen oder ein Resampling durchführen.
Entwerfen von Websites und Seiten 61 Arbeiten mit Seiten und Master-Seiten Vom Designstandpunkt aus betrachtet besteht jede WebPlus-Seite aus einer Seite im „Vordergrund“ und einer Master-Seite im „Hintergrund“. Die Master-Seiten sind ein wichtiger Strukturbaustein Ihrer WebPlus-Website, da Sie auf diesen Seiten alle Objekte und Layoutelemente platzieren können, die auf mehr als einer Seite verwendet werden, wie z. B. Logos, Hintergrundbilder, Navigationsleisten oder Umrandungen.
62 Entwerfen von Websites und Seiten Die Studio-Registerkarte Website besteht aus einem oberen Feld für Master-Seiten und einem unteren Feld für die Website-Struktur Ihrer Standardseiten. Für jede in diesem Feld aufgelistete Seite wird ebenfalls die Master-Seite angezeigt, die Sie der Seite zugewiesen haben. Um das Design der Seiten Ihrer Website zu variieren, können Sie ebenfalls mehr als eine Master-Seite erstellen (siehe „Einfügen, Entfernen und Neuordnen von Seiten“ auf Seite 67).
Entwerfen von Websites und Seiten 63 Wenn Sie alle Master-Seiten deaktivieren, verwendet die Seite die Website-Darstellung, die Sie in den WebsiteEigenschaften festgelegt haben. Zuweisen mehrerer Master-Seiten Mit WebPlus können Sie für eine Webseite auch mehrere MasterSeiten festlegen, um das Design der Seite modular aus mehreren Bereichen aufzubauen.
64 Entwerfen von Websites und Seiten 3. Klicken Sie auf die Schaltfläche OK. Die Seite verwendet nun alle Seitenelemente der ausgewählten Master-Seiten. 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. In dem Dialogfeld „Seiteneigenschaften“ können Sie festlegen, in welcher Reihenfolge die Inhalte der Seite und Master-Seite angezeigt werden.
Entwerfen von Websites und Seiten 65 Neuordnen der Seiteninhalte und Master-Seiten • Wählen Sie den Seiteneintrag in der Kategorie „Hintergrund“ des Dialogfelds „Seiteneigenschaften“ aus und klicken Sie auf eine der Schaltflächen Aufwärts oder Abwärts. ODER • Verschieben Sie eine Seite durch Ziehen ihres Namens an die gewünschte Position in der Liste. ODER • Wählen Sie in der Studio-Registerkarte „Objekte“ eine Seite aus und verschieben Sie ihre Master-Seiten durch Klicken und Ziehen.
66 Entwerfen 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.
Entwerfen von Websites und Seiten 67 Einfügen, Entfernen und Neuordnen von Seiten In der Studio-Registerkarte „Website“ stehen Ihnen die folgenden Optionen zur Verfügung. • Einfügen von Standardseiten und HTML-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 einer installierten Designvorlage. • Einfügen von Offsite-Links. • Festlegen einer Seite als Homepage.
68 Entwerfen von Websites und Seiten 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. Klicken Sie über dem Feld „Seiten“ der StudioRegisterkarte „Website“ auf den nach unten zeigenden Pfeil des Symbols Hinzufügen. Klicken Sie in dem nun geöffneten Menü auf Neue leere Seite. 3.
Entwerfen von Websites und Seiten 69 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. Klicken Sie in der Studio-Registerkarte „Website“ auf die Schaltfläche Master Seiten >, um das Feld „MasterSeiten“ zu öffnen. 2.
70 Entwerfen 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.
Entwerfen von Websites und Seiten • Eine übergeordnete Strukturebene • Eine untergeordnete Strukturebene 71 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. 3. (Per Drag & Drop) Ziehen Sie den Seiteneintrag mit gedrückter Maustaste nach oben oder nach unten auf eine neue Position des Strukturbaums.
72 Entwerfen von Websites und Seiten 2. Klicken Sie über dem Feld „Seiten“ der StudioRegisterkarte „Website“ auf den nach unten zeigenden Pfeil des Symbols Hinzufügen. Klicken Sie in dem nun geöffneten Menü auf Neue Vorlagenseite. 3. Wählen Sie in dem Dialogfeld Neue Vorlagenseite einfügen eine Vorlage in der linken Liste aus und markieren Sie dann die Seite mit einem Häkchen, die Sie einfügen möchten (Sie können ebenfalls mehrere Seiten auswählen). 4.
Entwerfen von Websites und Seiten 73 Einfügen von Offsite-Links Sie können ebenfalls einen Offsite-Link zu Ihrer Website-Struktur hinzufügen. Für gewöhnlich handelt es sich hierbei um Links zu Seiten oder Ressourcen, die kein Teil Ihrer Website, in der Navigationsstruktur Ihrer Website jedoch durchaus hilfreich sind. Der Offsite-Link wird in der Website-Struktur und in den Navigationselementen angezeigt, sodass Sie ihn genauso bearbeiten können, wie eine Seite aus Ihrer Website.
74 Entwerfen von Websites und Seiten • 5. Möchten Sie zusätzlichen Text zu der Seite in dem Untermenüelement der Navigationsleiste hinzufügen, geben Sie den Text in das Feld Beschreibung ein. Klicken Sie auf die Schaltfläche OK. Festlegen der Homepage Festlegen einer Website als Homepage • Klicken Sie in der Studio-Registerkarte „Website“ mit der rechten Maustaste auf eine Standardseite und in dem Kontextmenü auf Als Homepage festlegen.
Entwerfen von Websites und Seiten 75 Anzeigen der Eigenschaften für Master-Seiten • Klicken Sie über dem Feld „Master-Seiten“ der Studio-Registerkarte „Website“ auf das Symbol MasterSeiten-Manager. Das Programm öffnet nun das Dialogfeld „Master-Seiten-Manager“. Anzeigen der Eigenschaften für normale Webseiten • Klicken Sie im Arbeitsbereich mit der rechten Maustaste auf die Seite und in ihrem Kontextmenü auf Seiteneigenschaften. Das Programm öffnet nun das Dialogfeld „Seiteneigenschaften“.
76 Entwerfen von Websites und Seiten Aktiver Dokumentrahmen Seiten lassen sich ebenfalls in einem aktiven Dokumentrahmen öffnen, den Sie zuvor erstellt haben. Platzierung Mit diesen Optionen können Sie die neue Seite vor bzw. nach der Seite platzieren, die Sie in der Dropdownliste auswählen oder dieser Seite als untergeordnete Seiten hinzufügen. Diese Optionen werden nur angezeigt, wenn Sie eine neue Seite hinzufügen.
Entwerfen von Websites und Seiten 77 Objekte der Seite leichter von den auf ihren Master-Seiten platzierten Objekten unterscheiden. Diese Farbe wird für die Begrenzungsrahmen der ausgewählten Objekte verwendet sowie für die automatische „Leuchtmarkierung“, wenn Sie den Mauszeiger auf einem Objekt platzieren. Kopieren Hier können Sie Designelemente aus einer bestehenden Webseite auf die neue Seite kopieren.
78 Entwerfen von Websites und Seiten • Hintergrund der Master-Seite verwenden: Mit dieser Option zeigt die Seite den Hintergrund an, der in den Einstellungen ihrer Master-Seite festgelegt ist. Diese Einstellung ignoriert dann die in den Website-Eigenschaften festgelegte Variante (siehe oben). • Benutzerdefinierten Hintergrund verwenden: Mit dieser Option können Sie anschließend eine Seitenfarbe, Hintergrundfarbe oder ein Hintergrundbild für die aktuelle Seite festlegen.
Entwerfen von Websites und Seiten 79 Seitensicherheit Seitensicherheit Hier können Sie eine Zugangskontrolle für Ihre Webseiten festlegen, indem Sie mit einem Smart-Objekt für die Benutzerliste über die Serif Webressourcen die Seite bestimmten Benutzergruppen zuweisen. Weiterleitung Weiterleitung Nach einer frei konfigurierbaren Zeitspanne wird eine Webseite automatisch an ein neues Hyperlinkziel weitergeleitet (z. B. eine andere Seite, ein Bild oder eine E-Mail-Adresse).
80 Entwerfen von Websites und Seiten Studio-Registerkarte „Website“ hinzufügen, wird die Seite mit einem speziellen HTML-Seitensymbol markiert. Die HTML-Seiten lassen sich in der Studio-Registerkarte „Website“ genau wie normale Seiten umbenennen, in einer Vorschau öffnen oder per Drag & Drop verschieben. Sie können ebenfalls Offsite-Links in diesen Seiten erstellen, ihre Downloadzeit bestimmen oder die Seiten in die WebsiteNavigation einbinden.
Entwerfen von Websites und Seiten 81 sich jedoch ebenfalls bearbeiten. Jeder Absatz beginnt mit dem Tag
und endet mit dem Tag
. Sie können ebenfalls Anmerkungen in Form von Tokens in Ihren HTML-Code einfügen (siehe „Anhängen von HTML-Code“ auf Seite 155), indem Sie in dem per Rechtsklick geöffneten Kontextmenü auf Token einfügen klicken. Den restlichen HTML-Code außerhalb der Body-Tags können Sie unverändert übernehmen.82 Entwerfen von Websites und Seiten Bearbeiten des Quellcodes einer HTML-Seite • Führen Sie in der Strukturansicht der StudioRegisterkarte „Website“ einen Doppelklick auf das Symbol einer HTML-Seite (siehe oben) aus und ändern Sie den Quelltext in dem nun geöffneten Bearbeitungsfenster. Wenn Sie alle Änderungen an dem HTML-Code verwerfen möchten, klicken Sie in der Kontextleiste über dem HTMLBearbeitungsfenster auf die Schaltfläche Änderungen entfernen.
Entwerfen von Websites und Seiten 83 sein sollen. Die Montagefläche (B) ist eine Art „Arbeitsplatte“, auf der Sie Texte, Objekte und Bilder bis zu der endgültigen Einpassung in die entsprechenden Seiten ablegen können, sodass diese Layoutelemente stets griffbereit sind. Wenn Sie Ihre Website aus dem WebPlus-Projekt publizieren, werden alle Elemente exportiert, die teilweise auf dem Seitenbereich liegen. Alle Objekte, die vollständig auf der Montagefläche liegen, ignoriert die Exportfunktion.
84 Entwerfen von Websites und Seiten Umschalten zwischen Seiten Mit WebPlus können Sie auf unterschiedliche Weise zu den einzelnen Bereichen Ihrer Website wechseln, um die entsprechenden Seiten zu bearbeiten. Die Studio-Registerkarte „Website“ fungiert hierbei als Schaltzentrale.
Entwerfen von Websites und Seiten 85 Anzeigen einer bestimmten Seite oder Master-Seite Für die Darstellung einzelner Seiten stehen Ihnen mehrere Methoden zur Verfügung: • Klicken Sie in der Hinweisleiste auf eines der Symbole für die Seitennavigation. ODER Klicken Sie in der Hinweisleiste auf den Eintrag einer Seite oder Master-Seite in der Seitenliste, um zu der entsprechenden Seite zu wechseln.
86 Entwerfen von Websites und Seiten • Klicken Sie in der Hinweisleiste oder dem Feld „Seiten“ der Studio-Registerkarte „Website“ auf das Symbol Website-Struktur. Wählen Sie den Seiteneintrag in der Baumstruktur des Dialogfelds aus. Um eine Unterstruktur des Baums zu öffnen, führen Sie einen Doppelklick auf den entsprechenden „Ast“ aus. Klicken Sie anschließend auf die Schaltfläche Seite anzeigen.
4 Navigation & Hyperlinks
88 Navigation & Hyperlinks
Navigation & Hyperlinks 89 Einfügen von Navigationsleisten Die Navigationsleisten in WebPlus sind so programmiert, dass sie die Struktur Ihrer Website erkennen und automatisch berücksichtigen, sodass sich Website-Besucher später schnell zurechtfinden und problemlos durch die verschiedenen Seiten navigieren können.
90 Navigation & Hyperlinks Oberste Stufe Gleiche Stufe Untergeordnete Stufe Zurück und Weiter Die Symboldesigns sind lediglich Beispiele und repräsentieren nicht die tatsächliche Struktur Ihrer Website. Da die Navigationsleisten sich an Ihrer Website-Struktur orientieren, werden sie automatisch aktualisiert, wenn Sie Seiten auf andere Stufen verschieben.
Navigation & Hyperlinks 91 • 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. • Popup-Menüs: Hier legen Sie die Designs für Schaltflächen, Trennelemente und den Hintergrund aller Popup-Menüs fest, die über die Navigationsleiste aktiviert werden (falls Ihre Website-Struktur untergeordnete Seiten enthält). Hinzufügen einer Navigationsleiste 1.
92 Navigation & Hyperlinks 5. 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 von Navigationsleisten“ auf Seite 94).
Navigation & Hyperlinks 93 Fenster (die am häufigsten verwendete Variante), Neues Fenster (besonders hilfreich für OffsiteSeiten), Oben im aktuellen Fenster, Übergeordneter Rahmen, Benanntes Fenster oder Dokumentrahmen aus. 6. (Optional) Über die Registerkarte Darstellung können Sie verschiedene Designs für die Schaltflächen, Trennelemente und den Hintergrund auswählen. Diese werden dann in der Hauptnavigationsleiste angezeigt.
94 Navigation & Hyperlinks Bearbeiten einer Navigationsleiste 1. Führen Sie einen Doppelklick auf die Navigationsleiste aus. ODER Klicken Sie auf die Option bearbeiten. Navigationsleiste ODER Klicken Sie mit der rechten Maustaste auf die Leiste und in dem Kontextmenü auf Navigationsleiste bearbeiten. 2. Sie können nun die verschiedenen Optionen der Registerkarte neu einstellen.
Navigation & Hyperlinks 95 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.
96 Navigation & Hyperlinks Speichern benutzerdefinierter Navigationsbäume • Klicken Sie auf Standardwerte und in dem nun geöffneten Menü auf Speichern. • Geben Sie einen Namen für den Navigationsbaum an (z. B. navibaum-1). • Klicken Sie auf die Schaltfläche OK. Die Baumstruktur wird nun in Ihrer Website gespeichert. Sie können gespeicherte Baumstrukturen jederzeit für andere Navigationsleisten einsetzen, indem Sie auf Standardwerte klicken und dann auf den Menüeintrag „Laden“.
Navigation & Hyperlinks 97 Ändern der Schaltflächen in Navileisten (in andere Schaltflächenvorlagen) 1. Klicken Sie auf den nach unten zeigenden Pfeil der Miniatur Einzel, um ein Menü mit Vorlagen zu öffnen. 2. Wählen Sie eine Schaltfläche einer Kategorie aus (diese entsprechen den Typ-Kategorien für Navigationsleisten). 3. (Optional) Passen Sie die Optionen für Trennung und Ausrichtung an.
98 Navigation & Hyperlinks Ändern der Hintergründe in Navileisten (in andere Vorlagen) 1. Klicken Sie auf den nach unten zeigenden Pfeil der Miniatur Hintergrund, um ein Menü mit Vorlagen zu öffnen. 2. Wählen Sie einen Hintergrund einer Kategorie aus. 3. (Optional) Passen Sie die Abstandseinstellungen und übrigen Optionen an. 4. Klicken Sie auf die Schaltfläche OK.
Navigation & Hyperlinks 99 2. Wählen Sie eine Menüoption aus. Je nach ausgewählter Option sind nun verschiedene Einstellungen in der Registerkarte verfügbar. 3. 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 Navigationsleistenschaltflächen.
100 Navigation & Hyperlinks Für Objektanker können Sie ähnliche Trennoptionen festlegen. Klicken Sie hierzu mit der rechten Maustaste auf ein Objekt und in seinem Kontextmenü auf Anker. Festlegen der Trennelemente für Popup-Menüs 1. Wechseln Sie in dem Dialogfeld Navigationsleiste Einstellungen zu der Registerkarte Popup-Menüs. • Aktivieren Sie die Option Popup-Textmenüs und dann die Einstellung Linie und Umrandung. Klicken Sie nun auf Trennelement gemäß Navigationsbaum einfügen.
Navigation & Hyperlinks 101 Ein-/Ausschließen von Seiten für die Navigation Standardmäßig werden alle Seiten des Strukturbaums in die Navigation einbezogen und lassen sich somit per Link von den Navigationselementen aufrufen. Sie können jedoch auch Seiten von der Navigation ausschließen, sodass sie von den Navigationselementen ignoriert werden. Dies ist für alle Seiten der Website mit Ausnahme der Homepage möglich. Wenn Sie z. B.
102 Navigation & Hyperlinks Blog-Artikel in die Untermenüs der Navigationsleiste eintragen. Mit einem Klick auf den Titel wird dann der entsprechende Artikel geöffnet. Wir gehen im Folgenden davon aus, dass Sie einen Offsite-Link als Verbindung zu Ihrem Forum, CMS oder Blog verwenden, und der Offsite-Link in die Navigation eingeschlossen ist.
Navigation & Hyperlinks 103 Einfügen von Popup-Menüs Popup-Menüs sind ein wichtiger Bestandteil mehrstufiger Navigationsleisten (siehe Seite 89) 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.
104 Navigation & Hyperlinks Erstellen von Popup-Menüs 1. Wählen Sie das Objekt aus, an das Sie das Popup-Menü anhängen möchten. 2. Klicken Sie im Menü Einfügen auf Popup-Menü. ODER Klicken Sie mit der rechten Maustaste auf das Objekt und in seinem Kontextmenü auf Popup-Menü. 3. Aktivieren Sie in der Registerkarte Navigationstyp die Option Popup-Menü anzeigen, um die Navigationslinks für das Objekt zu aktivieren. 4.
Navigation & Hyperlinks 105 Einfügen von Schaltflächen Schaltflächen (auch „Buttons“ genannt) sind ein wichtiger Bestandteil der Navigationsleisten (siehe Seite 87) in WebPlus. Sie können Schaltflächen jedoch auch als eigenständige Elemente auf einer Seite platzieren und dann über diese Schaltflächen ein Hyperlinkziel ansteuern oder ein Popup-Menü öffnen. In WebPlus können Sie Schaltflächen mit einer Vorlage erstellen oder in dem Button Studio von Grund auf neu entwerfen.
106 Navigation & Hyperlinks 4. Geben Sie den Schaltflächentext ein, den Sie als Beschriftung verwenden möchten, wie z. B: „Home“, „Hilfe“ oder „Bilder“. 5. Wählen Sie eine Aktion aus, die per Mausklick auf die Schaltfläche gestartet werden soll. 6. • Mit der Option Hyperlink können Sie die WebsiteBesucher per Hyperlink auf ein bestimmtes Ziel verweisen – z. B. eine Internetseite, eine Datei, andere Seite Ihrer Website usw. (siehe Seite 110).
Navigation & Hyperlinks 107 7. (Optional) Möchten Sie die Schaltfläche nicht im Normal-Zustand einfügen, sondern ihr das Aussehen eines bereits angeklickten Buttons zuweisen, aktivieren Sie die Option Schaltfläche zu Beginn im KlickZustand. 8. Klicken Sie auf die Schaltfläche OK. 9. Platzieren Sie den Mauszeiger an der Stelle, an der Sie die Schaltfläche absetzen möchten. 10. Um die Schaltfläche in einer Standardgröße einzufügen, klicken Sie einfach auf den gewünschten Punkt der Seite.
108 Navigation & Hyperlinks Standardzustand Normal, den bei einem Mausklick aktivierten Zustand Klick und den bei einer Mausberührung ausgelösten Zustand Mouseover. Das Button Studio enthält eine interaktive QuickStartRegisterkarte, die Ihnen bei den verschiedenen Aufgaben und Werkzeugen mit Tipps und Anleitungen zur Seite steht.
Navigation & Hyperlinks 109 Wie lassen sich die Texte bearbeiten? Das Button Studio ist für die Gestaltung von Schaltflächendesigns und nicht für die Beschriftung konzipiert. Um die Aufschrift eines Buttons zu ändern, führen Sie auf der Seite einen Doppelklick auf die Schaltfläche aus und geben dann die gewünschte Beschriftung in das Feld Schaltflächentext ein. Nachdem Sie eine Schaltfläche auf einer Seite platziert haben, können Sie ihr Design jederzeit mit dem Button Studio ändern.
110 Navigation & Hyperlinks Einfügen von Hyperlinks und Ankern 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.
Navigation & Hyperlinks 111 die Navigation durch die verschiedenen Dokumente. Wenn Sie Ihre Seitennavigation planen, sollten Sie stets auch die Navigationsleisten im Kopf behalten, da sich mit diesen Funktionselementen viel Zeit sparen lässt. Alle Hyperlinks und Anker in Ihrer Website lassen sich bequem mit dem Website-Manager verwalten, der jederzeit über die Standardkontextleiste sowie die Hinweisleiste erreichbar ist. Hinzufügen von Hyperlinks 1.
112 Navigation & Hyperlinks • Neues Fenster: Das Ziel des Hyperlinks wird in einem neuen Fenster geöffnet. Die Fensterattribute (Größe, Position und angezeigte Navigationselemente) lassen sich über die Schaltfläche Einstellungen... frei festlegen (aktivieren Sie zuerst die Option JavaScript-Code für Popup verwenden). Das Originalfenster bleibt geöffnet, nachdem der Hyperlink angeklickt wurde. • Oben im aktuellen Fenster: Das Ziel des Hyperlinks wird in der obersten Fensterebene angezeigt.
Navigation & Hyperlinks 113 Wenn Sie als Ziel einen aktiven Dokumentrahmen verwenden möchten, wählen Sie den aktiven Rahmen aus dem Dropdownfeld Im aktiven Dokumentrahmen öffnen aus. Sollte der gewünschte Rahmen hier nicht aufgelistet sein, müssen Sie den Rahmen „aktivieren“, indem Sie einen Doppelklick auf den Rahmen ausführen und dann die Option Aktiver Dokumentrahmen auswählen. • Lightbox: Das Linkziel wird in einer PopupLightbox angezeigt, die sich über Ihrer Webseite öffnet.
114 Navigation & Hyperlinks Entfernen und Bearbeiten 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 Werkzeugleiste auf den nach unten zeigenden Pfeil des Symbols „Hyperlink“ und dann auf die Option Hyperlink. Das Hyperlinks-Dialogfeld wird nun geöffnet und zeigt das Hyperlinkziel des ausgewählten Objekts an.
Navigation & Hyperlinks 115 Einfügen von Ankern Ein Anker ist eine bestimmte Position auf einer Webseite, die als Ziel für einen Hyperlink fungieren kann. Diese für die WebsiteBesucher unsichtbaren Anker markieren für gewöhnlich den Anfang von Absätzen, interessante Textstellen oder Bilder auf einer Webseite. Anker sind besonders hilfreich, wenn der Inhalt Ihrer Seite so umfangreich ist, dass er zwar in Abschnitte, aber noch nicht in mehrere Seiten unterteilt werden sollte.
116 Navigation & Hyperlinks 4. 5. (Optional) Aktivieren Sie die Option Anker in Navigation einschließen, damit der Anker (für gewöhnlich ein ausgewähltes Objekt) über die Navigationsleiste angesteuert werden kann anstatt über einen Hyperlink. Zuvor müssen Sie für Ihre Navigationsleiste jedoch die Option Anker einschließen aktivieren. Geben Sie nun einen Titel für den Anker ein.
5 Einfügen von Webobjekten
118 Einfügen von Webobjekten
Einfügen von Webobjekten 119 Einfügen einer Website-Suche WebPlus verwendet eine leistungsstarke Suchfunktion, mit der Sie oder Ihre Website-Besucher gezielt die Texte (künstlerische Texte sowie Textrahmen und Tabellen) nach bestimmten Begriffen durchsuchen können. Auf diese Weise lassen sich die einzelnen Inhalte Ihrer publizierten Webseiten schnell und einfach wiederfinden.
120 Einfügen von Webobjekten 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. Einfügen des Objekts für die Website-Suchergebnisse 1. Klicken Sie in dem Symbolmenü „Website-Suche“ der Symbolleiste für Webobjekte auf die Option Website-Suchergebnisse einfügen. 2.
Einfügen von Webobjekten 121 Die Website-Suche ist natürlich nur hilfreich, wenn die WebsiteBesucher auch auf die Suchergebnisse zugreifen können. Hierzu fügen Sie ein Feld für die Suchergebnisse ein, das sich genau wie das Funktionsobjekt für die Suche einfach per Mausklick auf einer Seite platzieren lässt. Da die Ergebnisse häufig mehrere Webseiten als „Treffer“ auflisten müssen, sollten Sie das Ergebnisfeld beim Platzieren auf die gesamte Seitenfläche ausdehnen.
122 Einfügen von Webobjekten In der Studio-Registerkarte Galerie können Sie alle Designobjekte Ihrer Dokumente speichern, die Sie auch für andere Websites verwenden möchten.
Einfügen von Webobjekten 123 Speichern Ihrer eigenen Designs Wenn Sie ein selbst erstelltes Objekt in der Galerie speichern möchten, können Sie es einfach in der bereits vorhandenen Kategorie Eigene Designs ablegen. Das Designelement ist dann auch in anderen WebPlus-Websites verfügbar. Nach der Installation von WebPlus ist die Galerie „Eigene Designs“ leer. Sie können jederzeit Ihre eigenen Objekte in dieser Kategorie speichern.
124 Einfügen von Webobjekten Um ein Design von der Seite in die Galerie zu kopieren, anstatt es zu verschieben, halten Sie die Strg-Taste gedrückt und ziehen das Design in die Galerie. Umbenennen und Löschen von Designs • Wählen Sie eine Miniaturansicht aus, klicken Sie in der rechten unteren Ecke des Designs auf das Pfeilsymbol und dann auf den entsprechenden Eintrag des nun geöffneten Dropdownmenüs.
Einfügen von Webobjekten 125 Hinzufügen, Löschen und Umbenennen benutzerdefinierter Designkategorien 1. Wählen Sie die Galerie-Registerkarte aus und klicken Sie auf das Symbol Registerkartenmenü. Wählen Sie nun in der Dropdownliste einen der Einträge Kategorie hinzufügen, Kategorie löschen oder Kategorie umbenennen aus. 2. Geben Sie über das nun geöffnete Dialogfeld den neuen Namen ein und/oder bestätigen Sie Ihre Auswahl. Alle Designs in einer gelöschten Kategorie werden ebenfalls gelöscht.
126 Einfügen von Webobjekten Auf jeder Karte können Sie Marker platzieren, um bestimmte Orte zu kennzeichnen. Die Marker lassen sich so konfigurieren, dass sie per Klick eines der folgenden Popups öffnen: • Eine Hinweisbox mit einfachem Text (z. B. für Postanschrift oder Webadressen) • Eine Hinweisbox für HTML-formatierten Text. • Ein Fenster für Street View. Einfügen einer Google Map 1. Klicken Sie in dem Symbolmenü „Multimedia“ der Symbolleiste für Webobjekte auf die Option Google Map einfügen.
Einfügen von Webobjekten 127 Dropdownfeld mit den Optionen „Karte“, „Satellit“ und „Gelände“) oder Ohne (alle Mapsteuerungen werden ausgeblendet) aus. 6. Klicken Sie auf die Schaltfläche OK. 7. Der Mauszeiger nimmt nun die Form des Einfügecursors an. Mit dem nächsten Schritt bestimmen Sie dann die anfängliche Größe und Platzierung der Karte. Um die Karte in einer Standardgröße einzufügen, klicken Sie einfach auf den gewünschten Punkt der Seite.
128 Einfügen von Webobjekten Hinzufügen von Markern 1. Klicken Sie im Dialogfeld „Google Map“ auf Hinzufügen. 2. Platzieren Sie den Mauszeiger auf der gewünschten Position und drücken Sie die linke Maustaste. 3. Geben Sie in dem Dialogfeld „Google Map - Marker“ einen Namen für den Marker ein. Dieser Name wird als QuickInfo angezeigt, wenn ein Website-Besucher den Mauszeiger auf dem Marker platziert. Hier könnten Sie z. B. den Namen einer Firma eintippen. 4.
Einfügen von Webobjekten 129 Sie können die Google Map jederzeit bearbeiten, um z. B. einen Marker zu löschen oder zu verschieben. Bearbeiten von Markern einer Google Map • Führen Sie einen Doppelklick auf die Karte Ihrer Seite aus. • Wählen Sie in dem Dialogfeld einen Marker über das Feld Kartenmarker aus und gehen Sie dann wie folgt vor: • Um die Markerbezeichnung zu ändern, klicken Sie auf Bearbeiten geben Sie den gewünschten Text in das Feld Bezeichnung ein.
130 Einfügen von Webobjekten Website-Entwickler einen finanziellen Ausgleich für die Kosten Ihres Webhostings erhalten - oder sich einfach nur eine goldene Nase verdienen! Für die Werbeflächen benötigen Sie als Webentwickler einen gültigen Account bei Google Adsense (www.google.com/adsense), mit dem Sie Werbungen auswählen und ihre Darstellung festlegen können. Jede Werbung wird als Einheit bezeichnet.
Einfügen von Webobjekten 131 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. Melden Sie sich bei Google Adsense an. 2. Wählen Sie in dem Adsense Setup die Option Adsense für Content-Seiten aus und folgen Sie den Anweisungen des Assistenten, um eine Anzeigeneinheit zu erstellen. Legen Sie anschließend Format und Farbgebung für die Anzeigen fest. 3.
132 Einfügen von Webobjekten Bearbeiten Ihrer Anzeige 1. Um das Format und die Farbe Ihrer Anzeigeneinheit zu ändern, nehmen Sie die entsprechenden Änderungen in dem Adsense Setup auf der Website von Google Adsense vor und kopieren dann den neu erstellten Code. 2. Führen Sie einen Doppelklick auf die Anzeige Ihrer Seite aus. 3. Klicken Sie auf die Schaltfläche Aus Zwischenablage einfügen, um den zuvor kopierten Code einzufügen. 4. Klicken Sie auf die Schaltfläche OK.
Einfügen von Webobjekten 133 Erstellen einer Lightbox für die Bilder auf Ihrer Webseite 1. Wählen Sie ein Bild aus (vorzugsweise platziert als Bildminiatur). 2. Erstellen Sie einen Hyperlink für das Bild. Klicken Sie hierzu im Menü Einfügen oder dem per Rechtsklick auf das Bild geöffneten Kontextmenü auf den Eintrag Hyperlink (siehe Seite 110). 3. Klicken Sie in der linken Liste auf den Eintrag Bild und legen Sie unter Zielfenster in dem Feld Typ die Option Lightbox fest. 4.
134 Einfügen von Webobjekten 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 Hyperlinks auf Lightbox-Optionen. 3.
Einfügen von Webobjekten 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 einblenden können - von den Seiten Ihrer Website (z. B. ein Formular oder eine Anmeldungsseite) bis zu beliebigen Internetseiten, Blogs, Foren oder RSS-Feeds. WordDateien, PDFs und andere Dateitypen lassen sich mit der Option Datei ebenfalls in einer Lightbox öffnen.
136 Einfügen von Webobjekten Ändern der Lightbox-Einstellungen für Ihre Website 1. Klicken Sie auf den Menüpunkt Datei > WebsiteEigenschaften und dann auf die Kategorie Lightbox. 2. Passen Sie die gewünschten Optionen der allgemeinen Einstellungen, Titeleinstellungen und Hintergrundeinstellungen an. 3. (Optional) Öffnen Sie eine Test-Lightbox über Vorschau der Lightbox, um Ihre Einstellungen zu prüfen und zu verfeinern.
Einfügen von Webobjekten 137 und einfach erweitern oder ändern, ohne das Layout der einzelnen Seiten modifizieren zu müssen. Panels lassen sich sowohl permanent als auch „auf Wunsch“ einblenden, wenn die Website-Besucher ihren Mauszeiger auf Schaltflächen, Galerieobjekten oder Bildern platzieren. Die permanente Variante ist ebenfalls ideal für Navigationsleisten, da diese auch bei scrollbaren Seiteninhalten ständig auf dem Bildschirm erreichbar sind.
138 Einfügen von Webobjekten Einfügen eines Panels Um ein Panel einzufügen, gehen Sie wie folgt vor: 1. Öffnen Sie in der Symbolleiste Webobjekte das Menü „Navigationsoptionen“ und klicken Sie auf Panel einfügen. 2. (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. 3. Klicken Sie in dem Dialogfeld auf die Panelvorschau. 4.
Einfügen von Webobjekten 9. 139 Platzieren Sie den Mauszeiger an der Stelle der Seite, an der Sie die linke obere Ecke des Panels positionieren möchten. 10. Um das Panel in einer Standardgröße einzufügen, klicken Sie einfach auf den gewünschten Punkt der Seite. ODER Um die Größe des Panels selbst zu bestimmen, ziehen Sie bei gedrückter Maustaste den Cursor über die Seite und lassen die Maustaste wieder los, sobald der Begrenzungsrahmen die gewünschten Abmessungen erreicht hat.
140 Einfügen von Webobjekten für Schaltflächen, Bilder und Galerieobjekte auf Ihren Webseiten 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, das bei Mausberührung oder Mausklick das entsprechende Panel öffnet. Hierzu weisen Sie dem gewünschten Objekt gleichzeitig eine Aktion und ein bereits erstelltes Panel zu.
Einfügen von Webobjekten 141 Ausblenden ausgewählter Panel • Klicken Sie in der Kontextleiste auf die Option Panel ausblenden. 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.
142 Einfügen von Webobjekten 4. Um das Studio zu beenden, klicken Sie in der Hauptsymbolleiste auf Änderungen übernehmen. Der Hintergrund wird nun an seiner ursprünglichen Position mit den neuen Einstellungen aktualisiert. Mit dem Design Studio können Sie genau festlegen, welche Objekte in dem Panel automatisch gedehnt oder gestaucht werden, wenn Sie die Größe des Panels verändern. Über die Symbolmenüs Horizontale Skalierung und Vertikale Skalierung können Sie das Verhalten der Objekte genau festlegen.
Einfügen von Webobjekten 143 Entwerfen eigener Trennelemente 1. Klicken Sie in dem oben erläuterten Dialogfeld auf das Symbol Bearbeiten. 2. Sie können in dem Design Studio (siehe oben) das Element nun mit den üblichen Werkzeugen und Registerkarten von WebPlus anpassen. In der Registerkarte QuickStart des Studiofensters finden Sie einige nützliche Tipps und Hilfestellungen.
144 Einfügen von Webobjekten 4. Klicken Sie auf die Schaltfläche OK. Der Hotspot wird nun auf der Seite angezeigt. Anpassen eines Hotspots an eine bestehende Form 1. Zeichnen Sie wie oben beschrieben den Hotspot, und erstellen Sie dann, wie in dem Thema „Zeichnen und Bearbeiten von Formen“ auf Seite 372 beschrieben, die gewünschte Form. 2. Wählen Sie beide Objekte aus und klicken Sie im Menü Extras auf den Eintrag Hotspot an Form anpassen. Der Hotspot wird nun an die Kontur der Form angepasst.
Einfügen von Webobjekten 145 Um einen Hotspot-Hyperlink zu verändern, gehen Sie wie folgt vor: • Aktivieren Sie das Zeigerwerkzeug, und führen Sie einen Doppelklick auf den Hotspot aus. Das Dialogfeld „Hyperlinks“ wird nun geöffnet und zeigt das Hyperlinkziel des ausgewählten Hotspots an. • Um den Hyperlink zu modifizieren, wählen Sie einen neuen Zieltyp und/oder ein neues Ziel aus. • Um den Hyperlink zu entfernen, stellen Sie für das Hyperlinkziel die Option Kein Hyperlink ein.
146 Einfügen von Webobjekten Horizontale und die Vertikale beschränken möchten, halten Sie während des Ziehens die Umschalttaste gedrückt. • Um die Größe des Hotspots zu ändern, verschieben Sie mit der Maus die Ziehpunkte der äußeren Umrisslinie. Mithilfe der inneren Umrisslinie bestimmen Sie die Form des Hotspots. Über die verschiedenen Linien und Knotenpunkte dieser Linie lässt sich die „klickbare“ Fläche des Hotspots präzise an die Konturen des abgedeckten Bildbereichs anpassen.
Einfügen von Webobjekten 147 Einfügen von Rollovereffekten Der Begriff Rollover wird für eine bestimmte Interaktion zwischen dem Mauszeiger und einem Bildschirmobjekt verwendet. Sie können z. B. den Mauszeiger auf ein Bild mit Rollovereffekt bewegen, und dieses Bild wird dann sofort gegen ein anderes ausgetauscht (siehe unten). Bilder, deren Darstellung sich durch ein Mausereignis verändert, werden als Rollovergrafiken bezeichnet. Zu diesen Mausereignissen gehören z. B.
148 Einfügen von Webobjekten 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. B. den Wechsel zu einer anderen Webseite. Dieses Ereignis wird automatisch ausgelöst, wenn ein Webseitenbesucher auf das Rolloverobjekt klickt.
Einfügen von Webobjekten 149 7. Falls Sie alle Schaltflächen auf einer Seite zu einer Gruppe verknüpfen möchten, aktivieren Sie die Einstellung Optionsfeld. In diesem Fall kann immer nur eine der Schaltflächen den Zustand „Klick“ aufweisen. 8. Klicken Sie auf die Schaltfläche OK. WebPlus zeigt für die ausgewählte Rollovergrafik immer das Bild des Normal-Zustands an. Sie sollten daher die Webseite in einer Vorschau öffnen, um die Rollovergrafiken zu testen.
150 Einfügen von Webobjekten 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 leicht gegen die Miniatur versetzt). Diese Funktion lässt sich sehr leicht einsetzen und ähnelt den komplexeren Fotogalerien.
Einfügen von Webobjekten 151 Erstellen von Rollover-Popups 1. Klicken Sie in dem Symbolmenü „Bilder“ der Symbolleiste für Standardobjekte auf die Option Rollover-Popup einfügen. 2. Wählen Sie in dem Dialogfeld das Bild für den Zustand „Normal“ aus, indem Sie über die Schaltfläche Durchsuchen... die gewünschte Datei angeben. Klicken Sie anschließend auf die Schaltfläche Öffnen. 3. Standardmäßig wird das für „Normal“ ausgewählte Bild auch für die Mouseover-Variante verwendet (z. B.
152 Einfügen von Webobjekten Positionieren der Rolloverbilder 1. Klicken Sie am unteren Rand des Dialogfelds „Rollovergrafiken“ auf die Schaltfläche Rolloverposition festlegen. 2. Wählen Sie in dem nun geöffneten Dialogfeld ein Bild aus. In dem Dropdownfeld wird der aktuelle Auswahlstatus angezeigt: • Normal Auswahl: Ein Bild für den Zustand „Normal“ wird ausgewählt und mit einem grünen Rand markiert.
Einfügen von Webobjekten 153 4. (Optional) Um die Position der Mouseover-Grafik in Relation zu der normalen Grafik beizubehalten, wenn die normale Grafik vergrößert oder verkleinert wird, aktivieren Sie die Option Position relativ zum Normalbild. 5. (Optional) Wenn Sie die Bilder für den Normalund/oder Mouseover-Zustand frei skalieren möchten, deaktivieren Sie die Option Seitenverhältnis beibehalten. Anschließend müssen Sie die Bildabmessungen mit den Eingabefeldern (nicht durch Ziehen) festlegen. 6.
154 Einfügen von Webobjekten 4. Um eine Hintergrundfarbe zu verwenden, aktivieren Sie die entsprechende Option und wählen dann die Farbe aus dem Dropdownfeld aus. 5. Klicken Sie auf die Schaltfläche OK. Der Titeltext wird nur auf dem Mouseover-Bild angezeigt. Wenn Sie den Text positionieren möchten, müssen Sie auf der Dokumentseite einen Doppelklick auf das Normalbild ausführen. Klicken Sie in dem nun geöffneten Dialogfeld auf Rolloverposition festlegen...
6 Dynamischer Webobjekte
156 Dynamischer Webobjekte
Dynamischer Webobjekte 157 Anhängen von HTML-Code In WebPlus können Sie komplette Seiten aus reinem HTML-Code erstellen (siehe „Erstellen von HTML-Seiten“ auf Seite 79). Mit HTML lassen sich jedoch nicht nur vollständige Seiten aufbauen. Sie können den HTML-Code auch an WebPlus-Objekte (z. B. in Rahmen oder Tabellenzellen) und Seiten anhängen, um die Interaktivität und Einsatzmöglichkeiten der Objekte oder Seiten zu erweitern.
158 Dynamischer Webobjekte Hinzufügen von HTML-Code Mit WebPlus können Sie den Quelltext einer Seite betrachten und dann zusätzlichen HTML-Code einfügen. Auf diese Weise lassen sich z. B. Fragmente einsetzen, die Sie selbst geschrieben oder aus anderen Webseiten kopiert haben. Über die Zwischenablage können Sie ebenfalls formatierten HTML-Text aus einem Browser oder E-Mail-Programm einfügen.
Dynamischer Webobjekte 4. 159 Klicken Sie in dem Dialogfeld auf eine der Schaltflächen In Kopfzeile (Head) einfügen oder In Textkörper (Body) einfügen, um den Text aus der Zwischenablage in der Kopfzeile oder im Textkörper der Datei zu platzieren. ODER Verwenden Sie das Code-Fenster, um die Position auszuwählen. Geben Sie die gewünschten HTMLFragmente in das entsprechende Feld ein. 5. Falls Sie mit Ihrem Code externe Dateien aufrufen, klicken Sie auf Hinzufügen, um diese Dateien anzugeben.
160 Dynamischer Webobjekte letzten Platzhalter der obigen Liste () und die zweite den Code, nachdem wir den Platzhalter durch das Skript ersetzt haben. Code mit Platzhalter Code nach dem Einfügen des Java-Skripts Dieses einfache Beispiel zeigt, wie Sie einen Code in einem Quellfenster platzieren. Anhängen von Code an HTML-Fragmente und Objekte 1. Wählen Sie ein bestehendes HTML-Fragment oder Objekt aus. 2. Klicken Sie im Menü Format auf HTML-Code anhängen.
Dynamischer Webobjekte 4. 161 Wählen Sie den gesamten Platzhalter aus und fügen Sie den HTML-Code, ein Skript oder einen anderen Text ein, um den Platzhaltertext zu überschreiben. ODER Wählen Sie den gesamten Platzhalter aus und tippen Sie den gewünschten Text über Ihre Tastatur ein, sodass der Platzhaltertext vollständig überschrieben wird. 5. Klicken Sie auf die Schaltfläche OK, um zu der normalen Seitenansicht zurückzukehren.
162 Dynamischer Webobjekte auf die einzelnen Dateien klicken. Klicken Sie anschließend auf die Schaltfläche Öffnen. 3. Die Dateien werden nun in der Liste Dateien aufgeführt und standardmäßig in Ihre Website eingebettet. Wenn Sie die Dateien nicht einbetten möchten, um die Website möglichst klein zu halten, wählen Sie die einzelnen Dateien aus und klicken auf die Schaltfläche Verknüpfen. 4. Klicken Sie auf die Schaltfläche OK.
Dynamischer Webobjekte 163 Arbeiten mit IDs Objekten, Textspalten, Tabellenzeilen und Tabellenzellen werden stets einzigartige, alphanumerische HTML-IDs zugewiesen, wie z. B. die IDs „qs_1“, „qs_2“ usw. für neue QuickShapes. Diese IDs werden eventuell während des Exports geschrieben, um Verweise von Skriptsprachen in Ihrer publizierten Website zu ermöglichen.
164 Dynamischer Webobjekte Wenn Sie ein Objekt auf dieselbe Seite kopieren oder auf eine andere Website kopieren, wird seine IDNummer durch eine neue ID-Nummer ersetzt. Möchten Sie selbst einen Namen für Ihre ID festlegen, geben Sie die gewünschte Bezeichnung in das Dialogfeld „Objekt-ID bearbeiten“ ein. Bearbeiten der Namen für Objekt-IDs 1. Klicken Sie mit der rechten Maustaste auf ein Objekt und in seinem Kontextmenü auf ID. 2. Verändern Sie in dem nun geöffneten Dialogfeld den Wert für die HTML-ID.
Dynamischer Webobjekte 165 Einfügen von Formularen Mit Webformularen können Sie auf effiziente und moderne Weise neue Informationen von den Besuchern Ihrer Website erfragen. Diese Formulare sammeln die Informationen genau wie Papierformulare (durch Ausfüllen von Feldern und Ankreuzen von Optionen), nutzen jedoch die leistungsstarken Datenübertragungsmöglichkeiten des Internets. Zu den am häufigsten genutzten Formularen gehören Feedback-Formulare, Gästebücher und Anfrageformulare.
166 Dynamischer Webobjekte Jedes Feld ist durch einen bestimmten Satz Formularfeldeigenschaften definiert, die sein Aussehen, seine Werte, die Validierungsmethode sowie die Aktion festlegen, die von dem Feld erwartet wird. Die verschiedenen Funktionen der Formularelemente werden erst verfügbar, nachdem Sie die Website im Internet publiziert haben. Sie können die Formulare natürlich ebenfalls in der WebPlusVorschau kontrollieren (siehe „Öffnen einer Website-Vorschau“ auf Seite 409).
Dynamischer Webobjekte 167 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.
168 Dynamischer Webobjekte 5. 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. Nähere Informationen hierzu finden Sie unter dem Thema „Bearbeiten von Formularelementen“ auf Seite 174.
Dynamischer Webobjekte 169 Erstellen eigener Formulare mit dem Assistenten für Webformulare 1. Klicken Sie in dem Symbolmenü „Formular“ der Symbolleiste für Webobjekte auf die Option Formularassistent. 2. Klicken Sie in dem Dialogfeld auf die Option Neues Formular mit dem Assistenten erstellen und dann auf die Schaltfläche Weiter>. 3. In dem nächsten Dialogfeld wählen Sie die Formularelemente aus, die Sie in Ihrem Formular verwenden möchten.
170 Dynamischer Webobjekte 4. Wiederholen Sie die obigen Schritte für alle weiteren Formularelemente, die Sie verwenden möchten. Die neuen Elemente werden in dem oberen Feld in der Reihenfolge aufgelistet, in der Sie die Elemente erstellt haben. Bevor Sie fortfahren, müssen Sie noch ein Element für die Übermittlung des Formulars einfügen. Für die Übertragung der Daten an den Empfänger ist dieses Element absolut unverzichtbar.
Dynamischer Webobjekte 171 Die Formularelemente Die Formularelemente sind „intelligente“ Objekte, die sich von allen anderen WebPlus-Objekten deutlich unterscheiden. Der größte Vorteil dieser „intelligenten“ Objekte liegt in ihrer Fähigkeit, die von einem Website-Besucher eingegebenen Daten zu speichern und nach dem Übertragen des Formulars an eine zentrale Speicherposition zu senden.
172 Dynamischer Webobjekte Textfeld In diese Felder lassen sich mehrzeilige Texte, Zahlenwerte oder eine Mischung aus beiden Datentypen eingeben. Diese Felder werden häufig für die Eingabe ausführlicher Informationen verwendet, wie z. B. Problembeschreibungen, Rezepte oder eine Liste mit Zahlenwerten. Kombinationsfeld Diese Felder werden auch als Dropdownfelder bezeichnet und bestehen aus einer Liste, in der Ihre Website-Besucher genau eine Option auswählen können (z. B. die richtige Anrede).
Dynamischer Webobjekte 173 Auswahlsymbol / Optionsfeld Optionsfelder bestehen aus mehreren Auswahlsymbolen. Ihre Leser können in diesen Feldern immer nur ein Auswahlsymbol markieren. Mit zwei Auswahlsymbolen können Sie z. B. das Geschlecht der Website-Besucher abfragen. Dateibrowser Mit dem Dateibrowser können die Besucher Dateien von ihren Computern für die Übertragung an Ihre Website auswählen. Über das Symbol Durchsuchen... lassen sich die Dateien schnell und einfach auswählen.
174 Dynamischer Webobjekte Bearbeiten von Formularelementen Jedes Formularelement (Schaltflächen, Textfelder usw.) verfügt über bestimmte charakteristische Eigenschaften und bietet daher unterschiedliche Bearbeitungsmöglichkeiten für seine Werte. Sie können die Werte entweder während der Erstellung des Formulars festlegen oder auch noch später verändern, wenn Sie das Element bereits in das Formular eingefügt haben.
Dynamischer Webobjekte 175 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.
176 Dynamischer Webobjekte 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.
Dynamischer Webobjekte 177 nutzen. Dieser kostenlose Service transferiert Ihre Formulardaten über einen Server von Serif an eine beliebig konfigurierbare E-MailAdresse. 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. Konfigurieren der Serif Webressourcen 1. Klicken Sie auf das Symbol Serif Webressourcen, und geben Sie einen Formularnamen ein. 2. Klicken Sie auf Auswählen.
178 Dynamischer Webobjekte Wenn Sie in das Feld „Antwort an“ die E-Mail-Adresse Ihres Website-Entwicklers eintragen möchten, aktivieren Sie die Option Antwort an mich in dem obigen Dialogfeld. Auf diese Weise können die Website-Besucher sich direkt an den Entwickler der von ihnen aufgerufenen Seite wenden. 4. Klicken Sie auf Neu hinzufügen. Der E-Mail-Eintrag wird nun erstellt und in die Liste „Verfügbare E-MailZieladressen“ eingetragen.
Dynamischer Webobjekte 179 2. Öffnen Sie die Registerkarte „Unsichtbare Felder“, und klicken Sie auf die Schaltfläche Hinzufügen. Geben Sie in das Feld Name die Bezeichnung „redirect“ ein und in das Feld Wert die Kennung http:// gefolgt von der URLAdresse Ihrer Bestätigungsseite. 3. Klicken Sie auf die Schaltfläche OK. Bei der nächsten Übermittlung von Formulardaten wird nun Ihre Bestätigungsseite angezeigt. Es werden keine persönlichen Daten auf den Serif Webservern gespeichert.
180 Dynamischer Webobjekte gewöhnlich mit dem Symbol gekennzeichnet. Per Mausklick auf dieses Symbol kann ein Website-Besucher dann entweder manuell den RSS-Feed über einen RSS-Reader öffnen oder auch den Feed automatisch abonnieren. Podcasts ähneln RSS-Feeds, bieten jedoch einige leicht unterschiedliche Optionen und Features, die sich auf die verstärkt in Podcasts eingesetzten digitalen Medien wie Audio- und Videodateien beziehen.
Dynamischer Webobjekte 181 Einfügen eines RSS-Feeds oder Podcasts 1. Klicken Sie in der Symbolleiste für Webobjekte auf das Symbol RSS-Feed-Werkzeug. 2. Klicken Sie auf eine der Schaltflächen RSS-Feed hinzufügen oder Podcast hinzufügen, um einen neuen Eintrag für einen RSS-Feed oder Podcast zu erstellen. In dem linken Menü wird nun ein Eintrag Neuer RSS-Feed oder Neuer Podcast eingeblendet. Wählen Sie einen der Einträge aus, werden die verschiedenen Einstellungen eingeblendet.
182 Dynamischer Webobjekte Für Podcasts können Sie in dem Dialogfeld ein automatisches Abonnement für den Podcast in dem Reader des Website-Besuchers (Google Reader, My Yahoo! oder iTunes) erstellen. Wählen Sie hierzu in dem Dropdownfeld Podcast öffnen mit einfach den gewünschten Eintrag aus. Für das manuelle Abonnement von RSS-Feeds oder Podcasts wird die Option „RSSStandard“ verwendet.
Dynamischer Webobjekte 183 Senden Sie lokal gespeicherte Mediadateien, werden Sie aufgefordert, eine Stamm-URL für die Website (siehe Seite 42) anzugeben, wenn Sie Ihre Website publizieren. Auf diese Weise werden die lokalen Dateien für WebsiteBesucher zugänglich. Übertragen von Podcasts Möchten Sie Ihre Podcasts über iTunes senden, müssen Sie Ihren Podcast an iTunes übermitteln.
184 Dynamischer Webobjekte Abonnieren von RSS-Feeds und Podcasts Die Website-Besucher können diese Feeds auf unterschiedliche Weise abonnieren. Manuelles Abonnieren von RSS-Feeds und Podcasts Die Website-Besucher müssen lediglich auf ein Symbol klicken, das für den jeweiligen Feed steht: Für RSS-Feeds Ihr publizierter RSS-Feed oder Podcast bietet eine klickbare „Abonnieren“-Schaltfläche. Auf diese Weise lässt sich der Feed zu den Favoriten des Browsers hinzufügen, den die Website-Besucher verwenden.
Dynamischer Webobjekte 185 Automatisches Abonnieren von Podcasts Ihre Website-Besucher klicken einfach auf das Symbol oder den entsprechenden Hyperlink. Der Podcast und Reader werden hierbei explizit festgelegt, das Abonnement erfolgt somit automatisch. Führen Sie hierzu einen Doppelklick auf den Podcast auf Ihrer Seite aus und wählen Sie eine Option in dem Dropdownfeld Podcast öffnen mit aus.
186 Dynamischer Webobjekte Das folgende Beispiel zeigt, wie ein RSS-Feed von Reuters auf einer WebPlus-Webseite aussieht: Um einen RSS-Feed oder Podcast in Ihre Seite einzubinden, gehen Sie wie folgt vor: 1. Wählen Sie auf der Website einer Nachrichtenagentur einen RSS-Feed aus. Suchen Sie hierbei nach den folgenden Symbolen: 2.
Dynamischer Webobjekte 187 4. Fügen Sie in dem Dialogfeld die kopierte URL in das Feld URL des RSS-Feeds ein. 5. Optional können Sie die Einstellungen für Farbe, Schriftart, Schriftgröße und Schriftschnitt für den Titel, die Schlagzeile und die Zusammenfassung anpassen. 6. Legen Sie die örtliche Zeitzone für Ihre Website in dem Feld Zeitzone fest. 7. (Optional) Ändern Sie das Datumsformat (MM/DD oder DD/MM) für das Publikationsdatum des Artikels, das in dem Artikelkopf angezeigt wird. 8.
188 Dynamischer Webobjekte 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.
Dynamischer Webobjekte 189 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. Nähere Informationen zu den einzelnen Möglichkeiten der Warenkorbsysteme finden Sie auf den Websites der Drittanbieter.
190 Dynamischer Webobjekte Kunde sind, müssen Sie kein neues Benutzerkonto anlegen. 3. Die Zusammensetzung dieses Dialogfelds variiert je nach verwendetem Warenkorb-Anbieter. Für PayPal können Sie z. B. über ein Dialogfeld eine E-Mail-Adresse festlegen, die alle Zahlungen empfangen soll, eine Bearbeitungsgebühr für den Warenkorb festlegen und mit der „Sandbox“ Ihren Warenkorb testen, bevor Sie ihn live ins Internet stellen. Klicken Sie auf die Schaltfläche Weiter>.
Dynamischer Webobjekte 191 Einfügen von E-Commerce-Objekten (PayPal) E-Commerce-Objekte lassen sich in WebPlus schnell und einfach mithilfe von Assistenten erstellen. Wählen Sie einfach die gewünschten Optionen in den verschiedenen Dialogfeldern aus, um ein E-Commerce-Objekt als Formular oder Link (d. h. als einfache Schaltfläche oder als Hyperlink eines beliebigen Objekts) in eine Seite einzufügen.
192 Dynamischer Webobjekte Seiten platzieren, lassen sich die Einträge aus der Datenbank nach dem Zusammenführen der Daten bequem anzeigen und als Artikel verkaufen. Nähere Informationen hierzu finden Sie unter dem Abschnitt „Arbeiten mit der Datenbankzusammenführung für ECommerce“ in der WebPlus-Hilfe. Das nach dem Einfügen eines E-Commerce-Objekts angezeigte Dialogfeld variiert je nach Dienstanbieter, den Sie für Ihre Warenkorbfunktion ausgewählt haben.
Dynamischer Webobjekte 193 Dialogfeld „Artikeldetails“ definieren (siehe „Arbeiten mit der Datenbankzusammenführung für E-Commerce“ in der Hilfe zu WebPlus). Klicken Sie auf die Schaltfläche Weiter>. (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.
194 Dynamischer Webobjekte • 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. • Preis: Der Preis des Artikels. Diese Option wird standardmäßig auf dem Bildschirm angezeigt. • Festlegen der Summe durch Kunde ermöglichen: Wenn Sie diese Option aktivieren, wird der obige Artikelpreis gegen ein Textfeld ausgetauscht, in das der Kunde seine eigene Summe eingeben kann.
Dynamischer Webobjekte 6. 7. 195 Für E-Commerce-Formulare werden zusätzlich die zwei folgenden Dialogfelder angezeigt: • In dem Dialogfeld für die Artikelbeschreibung können Sie optional ein Bild angeben (z. B. eine Vorschau auf das zum Verkauf angebotene Produkt) sowie eine kurze und lange Beschreibung, die in dem Formular angezeigt werden. Klicken Sie auf die Schaltfläche Weiter>.
196 Dynamischer Webobjekte 8. In dem Dialogfeld „Zusätzliche Kundeninformationen“ können Sie festlegen, ob der Kunde nach einer Adresse gefragt werden soll, oder die Adresse selbst eingeben muss. Wenn Sie noch eine weitere Frage an den Kunden stellen möchten, geben Sie einfach den entsprechenden Text in das zweite Feld ein. Klicken Sie auf die Schaltfläche Weiter>. 9.
Dynamischer Webobjekte 197 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.
198 Dynamischer Webobjekte Mit dieser Funktion lassen sich sogar Bilddaten (z. B. digitale Fotos) in einzelne Felder einsetzen oder auch automatisch in einer bestimmten Anordnung zusammen mit Texten in Katalogen, Fotoalben und ähnlichen Dokumenten kombinieren. In WebPlus können Sie alle Bilder in einem Ordner zu einer Fotodatenbank (einer einfachen Datenbank im SDB-Format) zusammenfassen.
Dynamischer Webobjekte 199 eine SDB-Datei und tragen dann entsprechende Informationen ein. Ein weiterer Vorteil des SDB-Formats ist, dass Sie die Daten in WebPlus bearbeiten und sogar neue Felder und Informationen hinzufügen können. Neben diesem Serif-eigenen Format kann WebPlus aber auch die Daten aus vielen anderen Quellen importieren.
200 Dynamischer Webobjekte die Schaltfläche „Jetzt kaufen“ oder „In den Warenkorb legen“ klicken. Nähere Informationen hierzu finden Sie unter dem Abschnitt „Arbeiten mit der Datenbankzusammenführung für E-Commerce“ in der WebPlus-Hilfe. Anlegen von Datenquellen Mit WebPlus können Sie bequem neue Serif-Datenbankdateien (*.sdb) erstellen. Nachdem Sie Ihre Daten in die Datenbank eingegeben haben, können Sie diese als Datenquelle verwenden und die Daten per Zusammenführung in Ihre Website integrieren.
Dynamischer Webobjekte • 201 Um die Reihenfolge der Felder in der Liste zu ändern, wählen Sie einen Feldnamen aus und klicken auf Nach oben oder Nach unten. 6. Klicken Sie auf die Schaltfläche OK. 7. WebPlus öffnet nun das Dialogfeld „Datenbank bearbeiten“ und zeigt sechs Felder für den ersten Datensatz an. Mit der Bildlaufleiste können Sie zu den anderen Feldern für den Datensatz wechseln. Da Sie die Datenbank gerade neu erstellt haben, sind alle Felder leer.
202 Dynamischer Webobjekte Jedem Wiederholungsbereich ist genau eine Datenquelle zugeordnet. Pro Webseite lässt sich nur ein Wiederholungsbereich einfügen. Für dieses sich wiederholende Layout müssen Sie zunächst den so genannten Wiederholungsbereich erstellen. Dieser Bereich übernimmt die Funktion einer Zelle oder kleinsten Einheit, aus der das Layout aufgebaut wird.
Dynamischer Webobjekte 203 3. Klicken Sie in dem Dialogfeld „Datenbank auswählen“ auf Durchsuchen, wählen Sie eine Datenquelle aus, klicken Sie auf Öffnen und anschließend auf OK. Sie können ebenfalls eine neue Datenbank anlegen, indem Sie in dem Dialogfeld auf Neu... klicken. Nähere Informationen hierzu finden Sie in dem obigen Abschnitt „Anlegen von Datenquellen“. 4. WebPlus öffnet nun das Dialogfeld für das gekachelte Seitenlayout.
204 Dynamischer Webobjekte • Um den Wiederholungsbereich auf der Seite zu verschieben, bewegen Sie einfach seinen Begrenzungsrahmen bei gedrückter Maustaste an eine andere Position. Um die Größe des Wiederholungsbereichs zu verändern, verschieben Sie einen seiner Ziehpunkte mit gedrückter Maustaste. Wenn Sie eine Website speichern, „merkt“ sich WebPlus die aktuell verwendete Datenquelle und öffnet diese automatisch im Hintergrund, sobald Sie die Webseite das nächste Mal öffnen.
Dynamischer Webobjekte 205 Um eine andere Datenquelle zu öffnen, gehen Sie wie folgt vor: 1. Wählen Sie den Wiederholungsbereich aus und klicken Sie in der Kontextleiste auf die Schaltfläche Datenbank bearbeiten. 2. Klicken Sie in dem Dialogfeld auf Durchsuchen... und legen Sie über das Dropdownfeld Dateityp das Dateiformat für die Datenbank fest, die Sie verwenden möchten.
206 Dynamischer Webobjekte solche Texterkennungszeichen enthalten, wählen Sie das entsprechende Symbol aus dem gleichnamigen Dropdownfeld aus. • Klicken Sie auf die Schaltfläche Weiter. Je nachdem, ob Sie im ersten Dialogfeld als Dateityp „Mit Trennzeichen getrennt“ oder „Feste Breite“ angegeben haben, werden in dem zweiten Dialogfeld unterschiedliche Optionen verfügbar. Sie können nun entweder das Trennzeichen angeben ODER die festen Feldwechsel der Datensätze überprüfen und ggf. korrigieren.
Dynamischer Webobjekte 207 Bearbeiten von Serif-Datenbankdateien Jeder Datensatz in einer Serif-Datenbankdatei (*.sdb) umfasst 20 Standardfelder. Wenn Sie Daten aus einer SDB-Datenbank einlesen, können Sie mit dem Dialogfeld „Datenbank bearbeiten“ neue Einträge erstellen, bestehende Einträge löschen, nach bestimmten Texten suchen, die Feldreihenfolge ändern und auch neue Felder und Daten hinzufügen. Andere Datenbankdateien lassen sich mit WebPlus nicht bearbeiten. Bearbeiten einer Serif-Datenbankdatei (*.
208 Dynamischer Webobjekte 5. • Um einen neuen Datensatz anzulegen, klicken Sie auf Hinzufügen. • Um zu einem anderen Datensatz zu wechseln, klicken Sie entweder auf die Navigationspfeile oder geben die Nummer des Datensatzes in das entsprechende Feld ein und drücken die Eingabetaste. • Um den aktuell ausgewählten Datensatz zu entfernen, klicken Sie auf Löschen.
Dynamischer Webobjekte 209 Wenn Sie das Dialogfeld „Datenbank bearbeiten“ schließen, wird die entsprechende Datenbankdatei nicht automatisch geschlossen, sondern weiterhin als aktive Datenbank für die Zusammenführung verwendet. Alle Änderungen an der Datenbank werden jedoch gespeichert, sobald Sie das Dialogfeld schließen.
210 Dynamischer Webobjekte 4. Verschieben Sie die Felder auf die gewünschten Positionen in dem Wiederholungsbereich. Die Feldgröße lässt sich hierbei beliebig ändern. WebPlus „verankert“ nun das Feld in der Layoutzelle (es spielt hierbei keine Rolle, ob Sie die automatische Ausrichtung von Objekten aktiviert haben). Der Feldinhalt wird nun schattiert angezeigt, und der Wiederholungsbereich lässt sich inklusive der Felder frei auf der Seite bewegen.
Dynamischer Webobjekte 211 Bearbeiten der aktuellen Zusammenführungsliste 1. Wählen Sie den Wiederholungsbereich aus und klicken Sie in der Kontextleiste auf die Schaltfläche Datenbank bearbeiten. 2. Klicken Sie auf die Schaltfläche Bearbeiten, um das Dialogfeld für die Zusammenführungsliste zu öffnen. 3. Markieren Sie die gewünschten Datensätze für die Zusammenführung per Häkchen. Über die Schaltfläche Filter... können Sie die angezeigten Daten filtern und sortieren. 4.
212 Dynamischer Webobjekte Wiederholungsbereich gelöscht und in ein Layoutraster aus verschiedenen Zellen umgewandelt wird, in dem jetzt anstelle der Platzhalterfelder die eigentlichen Daten aus der Datenquelle stehen. Wenn Sie die Einstellungen wie Größe und Ausrichtung für einzelne Bilder nach der Zusammenführung korrigieren möchten, klicken Sie mit der rechten Maustaste auf den entsprechenden Bildrahmen und dann auf den Eintrag Rahmeneigenschaften seines Kontextmenüs.
Dynamischer Webobjekte 213 Arbeiten mit Smart-Objekten Mit den Server-seitigen Smart-Objekten von WebPlus können Sie Ihre Website um eine breite Palette interaktiver Features erweitern, wie z. B. Zähler, Foren, Blogs, Buchungsassistenten und vieles mehr. Smart-Objekte sammeln die Daten von den Besuchern Ihrer Website und speichern diese auf einem sicheren Server von Serif.
214 Dynamischer Webobjekte • Kategorisieren der Artikel mit Tags, sodass diese für Benutzer leichter zugänglich werden. • Anbieten von Abonnements für Artikel (neueste Artikel und Kommentare) über Reader für RSS-Feeds. • Aktivieren des Spam-Schutzes CAPTCHA. • Formatieren des Blogs mit einem Visuellen Stil (Thema). Mit den Editorgruppen lassen sich auch Artikel veröffentlichen, die aus der Feder mehrerer Autoren stammen (in der Programmhilfe).
Dynamischer Webobjekte 215 Trefferzähler Dieses Objekt ermittelt die Anzahl der Treffer für die aktuelle Seite, d. h. wie oft Besucher die aktuelle Seite in ihrem Browser aufgerufen haben. Diese Anzeige lässt sich jederzeit zurücksetzen. Sie können für diese Zähler unterschiedliche Formate festlegen. News Einfügen eines News-Fensters auf Ihrer Seite.
216 Dynamischer Webobjekte Shoutbox Diese Ressource fungiert als interaktives Chat-Fenster (ähnlich dem Windows Messenger). Über die Shoutbox können die Besucher Ihrer Website miteinander kommunizieren. Benutzerliste Für die Benutzerliste können Sie zwei verschiedene Modi über ein Popup-Dialogfeld festlegen. • Modus für Mailingliste: Mit diesen Objekten können Website-Besucher Newsletter abonnieren, Einladungen bestätigen, Informationsmaterial anfordern usw.
Dynamischer Webobjekte 217 Aus Sicherheitsgründen sind diese Objekte nur über eine Anmeldung bei den Serif Webressourcen verfügbar, die Sie aus 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.
218 Dynamischer Webobjekte 6. 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 erneut das SmartObjekt-Werkzeug aktivieren. 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.
Dynamischer Webobjekte 219 Erstellen von Smart-Objekten Wie zuvor erläutert, umfassen die Smart-Objekte einige sehr unterschiedliche Ressourcen, die sich flexibel auf Ihren Webseiten einsetzen lassen. Die Smart-Objekte werden nicht direkt von den Serif Webressourcen auf Ihre Seiten gesetzt, sondern erst in Ihrer eigenen Objektbibliothek gespeichert. Mit dieser Bibliothek können Sie die einzelnen Objekte bequem verwalten und anpassen.
220 Dynamischer Webobjekte 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 die Smart-Objekte in einer anderen Sprache als Englisch arbeiten sollen, wählen Sie den gewünschten Eintrag in dem Dropdownfeld Sprache aus. 4. Klicken Sie auf die Schaltfläche OK.
Dynamischer Webobjekte 221 Sie können zwar alle SmartObjekte auf Ihren Webseiten einfügen, einige Smart-Objekte (Foren und Blogs) werden jedoch nicht auf Seiten platziert, sondern greifen direkt auf die Serif Webressourcen zu (über Offsite-Links oder Hyperlinks siehe Seite 73 und 110). Der größte Vorteil hierbei ist, dass Sie die Größe der Foren und Blogs nicht auf Ihre Seitenabmessungen beschränken müssen und dem Website-Besucher unnötiges Scrollen in seinen Browserfenstern ersparen.
222 Dynamischer Webobjekte Wenn Sie ein Objekt bearbeiten, verändern Sie nur das eigentliche Objekt und nicht die von dem Objekt gesammelten Daten. Die Optionen in dem Dialogfeld sind bei der Erstellung und Bearbeitung der Smart-Objekte identisch. Bearbeiten von Smart-Objekten in Ihrer Bibliothek • Klicken Sie in dem Hauptfenster für Smart-Objekte unter dem Feld „Meine Smart-Objektbibliothek“ auf Bearbeiten.
Dynamischer Webobjekte 223 Zusätzlich zu diesen Farbeinstellungen lassen sich die Textfarben und Hyperlinkfarben Ihres Smart-Objekts an die entsprechenden Farben der Texte und Hyperlinks Ihrer Website angleichen. Auf diese Weise können Sie die Smart-Objekte nahtlos in den gesamten Look Ihrer Website integrieren. Standardmäßig werden die Textund Hyperlinkfarben Ihres aktuellen Website-Schemas für diese Alternative verwendet. Ersetzen der Text- und Hyperlinkfarben für ein SmartObjekt 1.
224 Dynamischer Webobjekte Das Smart-Objekt „CMS“ (Content Management System) lässt sich nur mit einem Webbrowser über die URL www.serifwebresources.com verwalten. Verwalten von Smart-Objekten in Ihrer Bibliothek • Klicken Sie in dem Hauptfenster für Smart-Objekte auf Verwalten unter dem Feld „Meine SmartObjektbibliothek“. Die Verwaltungsoptionen variieren je nach ausgewähltem Smart-Objekt. Nähere Informationen zu den Verwaltungsfunktionen finden Sie in der Hilfe zu WebPlus.
7 Arbeiten mit Texten
226 Arbeiten mit Texten
Arbeiten mit Texten 227 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 „*.
228 Arbeiten mit Texten WebPlus übernimmt stets die Formatierung aus Texten, die in einer Textverarbeitung erstellt wurden. Wenn Sie mit Ihrer Textverarbeitung jedoch Texte speziell für den Einsatz in WebPlus schreiben, sollten Sie diese als „Nur Text“ speichern und die Formatierung später in WebPlus festlegen. Tabellen lassen sich nicht importieren. Um Texte aus einer Datei zu importieren, gehen Sie wie folgt vor: 1.
Arbeiten mit Texten 229 Wenn Sie mit Designtextrahmen arbeiten und der ganze Text nicht in den Rahmen passt, wird automatisch ein entsprechender Hinweis eingeblendet. Sie können nun zusätzliche Rahmen erstellen, um den Text unterzubringen (klicken Sie hierzu auf Ja) oder den Textüberschuss in dem unsichtbaren Überlaufbereich „parken“ (klicken Sie hierzu auf Nein).
230 Arbeiten mit Texten 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 (siehe auch Seite 275, 285 und 285). Um einen Rahmen zu erstellen, gehen Sie wie folgt vor: 1. Öffnen Sie in der Symbolleiste für Standardobjekte das Menü „Textrahmen“ und klicken Sie auf HTML-Textrahmen. 2.
Arbeiten mit Texten 231 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.
232 Arbeiten mit Texten Festlegen der Rahmenränder • Wählen Sie den Rahmen aus und ziehen Sie die Spaltenführungslinien mit der Maus, um die Abmessungen der Rahmenspalte anzupassen. (1) (2) (3) Die obige Abbildung zeigt, wie sich der Mauszeiger verändert, wenn Sie ihn über dem Begrenzungsrahmen (1) platzieren; nach einer Verschiebung nach innen, können Sie die Rahmenränder (2) verändern; und nach einer Verschiebung nach unten lässt sich der obere Rahmenabstand (3) verschieben.
Arbeiten mit Texten 233 Festlegen der Rahmenränder per Dialogfeld 1. Wählen Sie den HTML-Rahmen aus und klicken Sie in der Rahmenkontextleiste auf das Symbol Rahmen 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 Websitelayouts.
234 Arbeiten mit Texten 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. In dem Symbolmenü Textgröße anpassen finden Sie drei Funktionen, mit denen Sie die Textskalierung in den Textrahmen einstellen können. Diese Funktionen sind „einmalige“ Lösungen, verglichen mit den „kontinuierlichen“ AutoFit-Optionen, die nachfolgend erläutert werden.
Arbeiten mit Texten 235 Sie können für jeden Storytext in einem Rahmen separate AutoFitEinstellungen festlegen: Die Funktionen in dem Untermenü AutoFit werden kontinuierlich für den Storytext eines ausgewählten Rahmens angewendet. Kein AutoFit Dies ist der Standardmodus. Wenn Sie diese Option auswählen, wird der Text in dem ausgewählten Textrahmen nicht automatisch skaliert.
236 Arbeiten mit Texten 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.
Arbeiten mit Texten 237 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.
238 Arbeiten mit Texten Platzieren von Texten auf einem Pfad „Normale“, geradlinige künstlerische Texte bieten zwar wesentlich mehr Optionen für die kreative Textgestaltung als einfache Rahmentexte, die Wirkung dieser Texte lässt sich jedoch noch steigern, indem Sie die Wörter entlang eines geschwungenen Pfades verlaufen lassen.
Arbeiten mit Texten 239 Hinzufügen von künstlerischen Texten zu einer bestehenden Linie oder Form 1. Zeichnen Sie eine gerade, kurvenförmige oder Freihandlinie (siehe auch „Zeichnen und Bearbeiten von Linien“ auf Seite 363) oder eine Form (siehe „Zeichnen und Bearbeiten von Formen“ auf Seite 372). 2. Klicken Sie in der Symbolleiste für Standardobjekte auf den nach unten zeigenden Pfeil des Symbols „Text“ und wählen Sie die Option Künstlerischer Text aus. 3.
240 Arbeiten mit Texten Zeichnen des Pfades bei gleichzeitiger Texteingabe 1. Klicken Sie auf den nach unten zeigenden Pfeil des Symbols „Text“ und wählen Sie eines der Pfadwerkzeuge aus: Text auf Freihandpfad - Mit diesem Werkzeug zeichnen Sie zuerst die Freihandlinie und geben anschließend den Text ein. Text auf geradem Pfad - Mit diesem Werkzeug zeichnen Sie gerade Strecken für Ihre Texte.
Arbeiten mit Texten 241 Entfernen von Textpfaden 1. Wählen Sie das Textpfadobjekt aus. 2. Klicken Sie in der Textkontextleiste auf den nach unten zeigenden Pfeil des Pfadsymbols und dann auf die Option Kein Pfad. Der Pfad wird permanent gelöscht, und der Text bleibt als geradliniger künstlerischer Text auf der Seite erhalten. Bearbeiten von Texten auf einer Seite Mit dem Zeigerwerkzeug lassen sich Rahmentexte, Tabellentexte und künstlerische Texte direkt auswählen und bearbeiten.
242 Arbeiten mit Texten Bearbeiten von Texten auf einer Seite 1. Aktivieren Sie das Zeigerwerkzeug und wählen Sie den gewünschten Text durch Klicken oder Klicken und Ziehen aus. Das Programm platziert nun eine Einfügemarke an der Position, die Sie angeklickt haben (siehe unten). ODER Wählen Sie ein Wort, einen Absatz oder einen Textbereich aus. 2. Tippen Sie den neuen Text ein. Der Text wird nun entweder an der Einfügemarke platziert oder ersetzt den zuvor markierten Text.
Arbeiten mit Texten 243 Wiederholen von Textbearbeitungsschritten • Klicken Sie im Menü Bearbeiten auf den Eintrag Wiederholen, oder drücken Sie die Tastenkombination Strg+Y. Wenn Sie z. B. eine bestimmte Absatzformatierung festgelegt haben, und dieselbe Formatierung auch in einem anderen Absatz verwenden möchten, klicken Sie einfach in den Absatz und dann auf den Befehl Wiederholen.
244 Arbeiten mit Texten Einstellen der Einzüge für den aktuellen Absatz Wenn Sie ein Textobjekt auswählen, zeigt das Programm auf dem horizontalen Lineal für den aktuellen Absatz die Positionen des linken und rechten Einzugs sowie des Einzugs der ersten Zeile an. Um diese Einzüge zu verändern, können Sie entweder die Linealmarkierungen verschieben oder ein Dialogfeld verwenden. (A) Linker Einzug; (B) Einzug der 1.
Arbeiten mit Texten 245 Um den linken Einzug schnell zu verändern, klicken Sie auf das Symbol Stufe erhöhen (Einzug wird vergrößert) oder Stufe verringern (Einzug wird verkleinert). Der Einzug wird immer nach dem aktuell eingestellten Standardwert für die Tabstoppentfernung festgelegt. ODER Um die Einzugseinstellungen über ein Dialogfeld festzulegen, klicken Sie im Menü Text auf Absatz. Legen Sie nun die gewünschten Werte für den linken und rechten Einzug fest.
246 Arbeiten mit Texten Suchen und Ersetzen Sie können Ihre Websites nicht nur nach bestimmten Wörtern oder Wortteilen durchsuchen, sondern auch eine Reihe von Zeichenund Absatzattributen als Suchparameter verwenden, wie z. B. Schriftarten, Formatierungen, Ausrichtung, Aufzählungszeichen und Nummerierungen, fehlende Schriftarten, hängende Initialen, integrierte Grafiken und vieles mehr! Das Dialogfeld „Suchen und Ersetzen“ bleibt automatisch geöffnet, bis Sie auf die Schaltfläche Schließen klicken.
Arbeiten mit Texten 247 4. Wenn Sie die Option Nur ganzes Wort suchen auswählen, wird nur nach Zeichenketten gesucht, bei denen an beiden Enden ein so genannter White Space (Leerzeichen, Tabulator usw.) bzw. ein Satzzeichen vorhanden ist, oder die am Anfang oder Ende eines Absatzes stehen. Um explizit nach Groß- und Kleinschreibung zu unterscheiden, aktivieren Sie die Option Groß-/Kleinschreibung beachten.
248 Arbeiten mit Texten
8 Formatieren von Text
250 Formatieren von Text
Formatieren von Text 251 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.
252 Formatieren von Text Das Zuweisen von Schriftarten ist in WebPlus denkbar einfach. Wählen Sie einfach die gewünschte Schriftart in der Studio-Registerkarte Schriftarten, in der Textkontextleiste oder über den Menübefehl Text > Zeichen aus. Alternativ klicken Sie mit der rechten Maustaste auf einen Text und dann in dem Kontextmenü auf Textformat > Zeichen.
Formatieren von Text 253 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. Eine Textformatvorlage ist eine Zusammenstellung bestimmter Zeichen- und/oder Absatzattribute, die als Gruppe gespeichert wurden.
254 Formatieren von Text Texttyp Verwendete Absatzformatvorlage Basiert auf Rahmen (HTMLoder Design-) Körper Normal Künstlerisch Künstlerischer Textkörper Normal Tabelle/Kalender Tabellenkörper Normal Eine Zeichenformatvorlage enthält nur Schrifteigenschaften (Name, Größe, Fett, Kursiv usw.) und wird nur auf Zeichen angewendet d. h., auf ausgewählte Buchstaben oder Wörter und nicht auf einen ganzen Absatz.
Formatieren von Text 255 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 Zeichenfomatierungen formatiert werden können, zeigt das Feld Aktuelles Format der Registerkarte alle Formatierungsoptionen für den aktuellen Text an. Bearbeiten bestehender Formatvorlagen 1.
256 Formatieren von Text Alternativ klicken Sie im Menü Text auf TextformatvorlagenPalette, um die Formatvorlagen und Standardeinstellungen für Text (siehe Seite 297) zu ändern. Löschen von Textformatvorlagen • Klicken Sie mit der rechten Maustaste auf eine Textformatvorlage und in dem Kontextmenü auf löschen. • Klicken Sie in dem nun geöffneten Dialogfeld auf Entfernen.
Formatieren von Text 257 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.
258 Formatieren von Text Für die Arbeit mit Designtextrahmen lassen sich sowohl einfache als auch komplexe Aufzählungen oder Nummerierungen einsetzen, indem Sie entweder eine vordefinierte Variante (siehe unten) auswählen oder Ihren eigenen Listenstil entwerfen (hierbei können Sie die Formatierung der Symbole, Ziffern und Buchstaben frei festlegen).
Formatieren von Text 259 2. Klicken Sie im Menü Text auf Nummerierung und Aufzählungszeichen. 3. Führen Sie in dem Dialogfeld „Textformatvorlage“ einen der folgenden Schritte aus: • Für Texte in HTML-Textrahmen klicken Sie auf das Symbol einer vordefinierten Vorlage. ODER Für Texte in Designtextrahmen wählen Sie in dem Dropdownfeld Stil die Option Aufzählung oder Nummerierung aus und klicken dann auf das Symbol einer vordefinierten Variante.
260 Formatieren von Text Einfügen von Benutzerdetails Mit dem Dialogfeld Benutzerdetails können Sie schnell und einfach Informationen eingeben, die Sie sehr oft verwenden oder die sich häufig ändern. Gerade bei Mobiltelefonnummern oder EMail-Adressen ist dies besonders praktisch, da Sie die Informationen nicht jedes Mal von Hand eintippen müssen.
Formatieren von Text 261 ein. Mit dieser Dropdownliste können Sie alle selbst angelegten Sets von geschäftlichen Benutzerdetails auswählen. Nähere Informationen hierzu finden Sie unter dem Thema „Festlegen geschäftlicher Sets“ auf Seite 262. 3. Möchten Sie Details für eine private Homepage festlegen, klicken Sie auf die Registerkarte Privat. Diese Felder unterscheiden sich von denen der Registerkarte „Geschäftliche Sets“ und werden daher auch getrennt behandelt und gespeichert.
262 Formatieren von Text In einer bestehenden Website lassen sich die Felder nach der Bearbeitung mit nur einem Mausklick aktualisieren. Aktualisieren der Felder • Klicken Sie auf den Menüpunkt Extras > Benutzerdetails festlegen... und geben Sie neue Informationen in das Dialogfeld „Benutzerdetails“ ein. • Klicken Sie auf die Schaltfläche Aktualisieren, um alle veränderten Felder in Ihrer Website auf den neuesten Stand zu bringen.
Formatieren von Text 263 Mit den geschäftlichen Sets können Sie für jede Website, die Sie neu erstellen, einen Satz Benutzerinformationen speichern. Wechseln zu einem anderen geschäftlichen Set • Legen Sie das gewünschte Set in dem Dropdownfeld Set auswählen fest und klicken Sie auf Aktualisieren. Umbenennen und Löschen von geschäftlichen Sets 1. Klicken Sie in dem Dropdownfeld Set auswählen auf das gewünschte Set. 2. Klicken Sie auf eine der Schaltflächen Umbenennen oder Löschen.
264 Formatieren von Text Einfügen, Bearbeiten und Löschen von Variablen 1. Klicken Sie in der Standardkontextleiste (angezeigt, wenn kein Objekt ausgewählt ist) auf Benutzerdetails festlegen. 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.
Formatieren von Text 265 Einfügen von Variablenfeldern 1. Klicken Sie in einen Text, um eine Einfügemarke zu platzieren, oder wählen Sie einen Textteil aus. 2. Klicken Sie im Menü Einfügen auf den Eintrag 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.
266 Formatieren von Text
9 Arbeiten mit Tabellen
268 Arbeiten mit Tabellen
Arbeiten mit Tabellen 269 Einfügen textbasierender 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.
270 Arbeiten mit Tabellen Einfügen von Tabellen 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.
Arbeiten mit Tabellen 271 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 HTML- oder Designtabellen zu ändern, führen Sie die (in der Programmhilfe) unter „Bearbeiten von Tabellen“ beschriebenen Schritte aus.
272 Arbeiten mit Tabellen Anzeigeoptionen, das Kalenderformat, die Darstellung der Termine und Feiertage und stellen Sie ein, ob der Kalender zusätzlichen Platz für eigene Notizen bieten soll. Wenn Sie die gesetzlichen Feiertage in Ihrem Land anzeigen lassen möchten, aktivieren Sie in den Kalendereigenschaften die Option Öffentliche Feiertage einfügen und wählen Ihr Land in dem Dropdownfeld Region aus. Falls Sie eigene Termine eintragen möchten, aktivieren Sie die Option Persönliche Termine einfügen. 4.
Arbeiten mit Tabellen 273 Aktivieren der öffentlichen Feiertage 1. Wählen Sie den Begrenzungsrahmen des Kalenders aus und klicken Sie in der Kontextleiste auf Kalenderformat bearbeiten. 2. Klicken Sie in der Registerkarte „Termine“ auf Öffentliche Feiertage einfügen. 3. (Optional) Um die Feiertage für ein anderes Land einzutragen, wählen Sie das gewünschte Land in dem Dropdownfeld Region aus. 4. Klicken Sie auf die Schaltfläche OK. Anzeigen öffentlicher Feiertage 1.
274 Arbeiten mit Tabellen Um einen Termin einzufügen, gehen Sie wie folgt vor: 1. Wählen Sie den Begrenzungsrahmen des Kalenders aus. 2. Klicken Sie in der Kalenderkontextleiste auf die Schaltfläche Kalendertermine. 3. (Optional) Aktivieren Sie die Option Termine nach Datum anzeigen, um Termine mit einem traditionellen Kalenderlayout zu bearbeiten, einzufügen oder zu löschen. Ist die Option deaktiviert, können Sie die Termine zeilenweise in einer Datum/Termin-Liste bearbeiten. 4.
10 Bearbeiten von Objekten
276 Bearbeiten von Objekten
Bearbeiten von Objekten 277 Auswählen einzelner Objekte Um ein Objekt zu bearbeiten, müssen Sie es zunächst mit einem der folgenden Werkzeuge der Werkzeugleiste auswählen: Zeigerwerkzeug Mit dem Zeigerwerkzeug lassen sich Objekte auswählen, verschieben, kopieren, drehen, vergrößern und verkleinern. Lasso Mit dem Lasso können Sie alle gewünschten Objekte mit einer Freihandlinie umranden. Auf diese Weise lassen sich auch komplex angeordnete Elemente schnell und einfach auswählen.
278 Bearbeiten von Objekten Auswählen einzelner Objekte • Klicken Sie mit einem der oben erläuterten Werkzeuge auf das Objekt, um seinen Begrenzungsrahmen einzublenden. Wenn sich mehrere Objekte überlappen, klicken Sie einfach mehrmals mit gedrückter Alt-Taste auf den Stapel, bis das richtige Objekt markiert ist. Auswählen von Objekten mit dem Lasso Lasso. 1. Aktivieren Sie das 2. Ziehen Sie mit gedrückter Maustaste eine Freihandlinie um die Objekte, die Sie markieren möchten.
Bearbeiten von Objekten 279 Auswählen von Textobjekten mit dem Zeigerwerkzeug • Wenn Sie mit dem Zeigerwerkzeug auf ein Textobjekt klicken, wird das Objekt ausgewählt und das Programm platziert in dem Text des Objekts eine Einfügemarke. In diesem Modus können Sie den Text mit den verschiedenen Funktionen und Werkzeugen bearbeiten (siehe Seite 241). • Um ein Wort, einen Absatz oder den gesamten Text auszuwählen, führen Sie einen Doppel-, Dreifach- oder Vierfachklick aus.
280 Bearbeiten von Objekten 3. Wählen Sie ein Objekt aus. Wenn Sie mehrere Objekteinträge auswählen möchten, halten Sie die Strg-Taste gedrückt (für nicht aufeinander folgende Einträge) oder die Umschalttaste (für aufeinander folgende Einträge), während Sie auf die Objektnamen klicken. Auswählen mehrerer Objekte Wenn Sie verschiedene Objekte in einer Mehrfachauswahl zusammenfassen, können Sie anschließend: • Die Position oder Größe aller Objekte gleichzeitig verändern.
Bearbeiten von Objekten 281 Das zuletzt ausgewählte Objekt wird in einer Mehrfachauswahl mit einer dunkleren Umrandung angezeigt als die anderen Objekte. Hinzufügen und Entfernen von Objekten einer Mehrfachauswahl • Halten Sie die Umschalttaste gedrückt und klicken Sie auf das Objekt, das Sie hinzufügen oder entfernen möchten. Aufheben der Markierung für alle Objekte einer Mehrfachauswahl • Klicken Sie auf eine leere Stelle im Arbeitsbereich.
282 Bearbeiten von Objekten Kopieren von Objekten (oder einer Mehrfachauswahl) über die Zwischenablage von Windows • Klicken Sie in der Standardsymbolleiste auf Kopieren. Wenn Sie mit anderen Windows-Programmen arbeiten, lassen sich auf diese Weise für gewöhnlich Objekte über die Zwischenablage kopieren und einfügen. Einfügen von Objekten aus der Zwischenablage • Klicken Sie in der Standardsymbolleiste auf Einfügen.
Bearbeiten von Objekten 283 Replizieren von Objekten Wenn Sie ein Objekt duplizieren, wird immer nur eine Kopie erstellt. Mit der Funktion Replizieren können Sie in einem Schritt mehrere Kopien anfertigen und präzise in einer Reihe oder einem Raster anordnen. Für die Replikation lassen sich ebenfalls Drehwinkel und andere Optionen einstellen, sodass Sie mit nur einem Grundobjekt verschiedene interessante Muster erzeugen können.
284 Bearbeiten von Objekten 3. Das Feld Anz. Objekte bestimmt die Anzahl der Objekte (einschließlich des Originals) in der Anordnung. Für ein Raster mit einer geraden Objektanzahl verwenden Sie die beiden Felder „Rastergröße“. Um ein Raster mit einer ungeraden Objektanzahl zu erstellen, geben Sie in das Feld „Anz. Objekte“ die gewünschte Objektanzahl ein. 4.
Bearbeiten von Objekten 285 Verschieben von Objekten Um ein Objekt oder eine Mehrfachauswahl von Objekten zu verschieben, gehen Sie wie folgt vor: • Verschieben Sie das ausgewählte Objekt, indem Sie sein Symbol Verschieben mit gedrückter Maustaste ziehen. Sobald der Mauszeiger die Form des Verschiebungscursors annimmt, können Sie mit dem Ziehen beginnen. Um exakte horizontale und vertikale Positionsangaben einzustellen, verwenden Sie die Studio-Registerkarte „Transformieren“.
286 Bearbeiten von Objekten Allgemeine Vorgehensweise für die Größenänderung von Objekten 1. Wählen Sie ein Objekt aus. 2. Klicken Sie auf einen der Ziehpunkte des Objekts und verschieben Sie ihn bei gedrückter linker Maustaste an eine neue Position. Um ein Objekt nur in einer Richtung zu verändern, verschieben Sie den Ziehpunkt auf der entsprechenden Seite. Wenn Sie das Objekt in zwei Richtungen vergrößern bzw. verkleinern möchten, verschieben Sie den Ziehpunkt auf der entsprechenden Ecke.
Bearbeiten von Objekten 287 Drehen von Objekten Mit dem Rotationswerkzeug oder dem Rotationsziehpunkt lassen sich sowohl einzelne Objekte als auch mehrere Objekte (einschließlich Bilder und Texte) sowie Gruppen drehen. Drehen ausgewählter Objekte (mit dem Rotationsziehpunkt) • Verschieben Sie den Rotationsziehpunkt mit gedrückter Maustaste in die gewünschte Richtung. Um die Drehung in Schritten von 15° durchzuführen, halten Sie während des Ziehens die Umschalttaste gedrückt.
288 Bearbeiten von Objekten Wiederherstellen der ursprünglichen Ausrichtung • Führen Sie einen Doppelklick auf das Objekt aus. • Mit einem weiteren Doppelklick auf das Objekt stellen Sie die gedrehte Position wieder her. Ändern des Rotationspunkts 1. Aktivieren Sie das Rotationswerkzeug und wählen Sie das Objekt mit einem Klick aus. 2. Bewegen Sie den Rotationsmittelpunkt von seiner Originalposition an einen beliebigen Punkt auf der Seite.
Bearbeiten von Objekten 289 Zuschneiden und Kombinieren von Objekten Wenn Sie ein Objekt zuschneiden, werden einige Teile des Objekts maskiert (ausgeblendet). Auf diese Weise können Sie interessante Collagen und Spezialeffekte erstellen. Das eigentliche Objekt bleibt bei dieser Bearbeitung vollständig erhalten. Sie können Objekte wahlweise quadratisch zuschneiden oder unregelmäßig zuschneiden. Quadratischer Zuschnitt Unregelmäßiger Zuschnitt Die Funktion Kombinieren arbeitet mit mehreren Objekten.
290 Bearbeiten von Objekten Um das Objekt in der Zuschnittslinie zu skalieren, ziehen Sie das Objekt mit gedrückter Strg-Taste nach oben oder unten. Zuschneiden eines Objekts durch Verändern seiner Umrisslinie • Wählen Sie das Objekt aus und klicken Sie in dem Menü „Effekte“ der Werkzeugleiste auf die Option Unregelmäßig zuschneiden. Das Programm blendet nun die Kurvenkontextleiste sowie die einzelnen Knotenpunkte und Liniensegmente ein, aus denen die Zuschnittslinie besteht.
Bearbeiten von Objekten • 291 Legen Sie in der Zuschnittskontextleiste einen Wert für die Randschärfe fest, indem Sie die Pfeilsymbole, den Schieber oder das Eingabefeld benutzen. Die Randschärfe wird außerhalb der Zuschnittslinie mit der eingestellten Punktgröße angewendet. Wiederherstellen des Originalzustands (Widerrufen des Zuschnitts) • Klicken Sie auf die Schaltfläche Zuschnitt entfernen der Zuschnittskontextleiste.
292 Bearbeiten von Objekten 2. Wählen Sie beide Objekte aus, oder fassen Sie die Objekte in einer Gruppe zusammen, und klicken Sie dann im Menü Extras auf An Form zuschneiden. Kombinieren von Linien und Formen Mit der Funktion Kurven kombinieren können Sie komplexe Objekte aus zwei oder mehr gezeichneten Linien und Formen erstellen. Wie auch bei dem Zuschneiden an einer Form, beeinflusst das obere Objekt das untere Objekt.
Bearbeiten von Objekten 293 Kombinieren ausgewählter Linien oder gezeichneter Formen 1. Zeichnen Sie die gewünschten zwei Linien oder Quickshape-Formen. 2. Legen Sie das „Schablonenobjekt“ über das Objekt, das Sie zuschneiden möchten. Sie können hierfür das Menü Anordnen und/oder die Anordnungsleiste verwenden. 3. Wählen Sie das erste Objekt aus und klicken Sie auf Extras > In Kurven umwandeln. Wiederholen Sie den Schritt mit dem zweiten Objekt. 4. Wählen Sie beide Objekte aus. 5.
294 Bearbeiten von Objekten Verbinden von Konturen 1. Wählen Sie die Objekte aus. 2. Klicken Sie im Menü Anordnen auf Konturen kombinieren und dann auf die gewünschte Methode. Per Addition Erstellen eines neuen Objekts aus der Summe der zwei ausgewählten Objekte. Hierbei müssen sich die Objekte nicht überlappen. Per Subtraktion Erstellen eines neuen Objekts, indem der Überlappungsbereich des oberen und unteren Objekts entfernt wird. Das obere Objekt wird hierbei ebenfalls gelöscht.
Bearbeiten von Objekten Per Überlappung 295 Das neue Objekt besteht nur aus dem Überlappungsbereich der alten Objekte. Alle anderen Objektteile werden entfernt. Per Ausschluss Die alten Objekte werden zu einem Objekt kombiniert. Hierbei entsteht ein transparenter Bereich an den Stellen, an denen sich die alten Objekte überlappten.
296 Bearbeiten von Objekten Über den Befehl Standardeinstellungen für Objekt aktualisieren oder das Dialogfeld Texformatvorlagen-Palette können Sie die Standardeinstellungen der Objekttypen bequem ändern. Bei den Standardeinstellungen handelt es sich stets um lokale Vorgaben, d. h. diese Einstellungen gelten nur für die aktuelle Website und werden automatisch mit dem Dokument zusammen gespeichert. Sobald Sie die Website das nächste Mal öffnen, werden diese Vorgaben dann automatisch reaktiviert.
Bearbeiten von Objekten 297 Einstellen der Standardvorgaben für Linien- und Füllungsfarben mit Linienstilattributen 1. Wählen Sie ohne ein Objekt zu markieren die gewünschten Linien- und/oder Füllungsfarben in den Studio-Registerkarten „Farbe“ oder „Farbfelder“ aus (siehe „Arbeiten mit Volltonfarben“ auf Seite 387). Legen Sie mit der Studio-Registerkarte „Linie“ die Breite, den Stil und die Art der Eckpunkte für die Standardeinstellung fest. 2.
298 Bearbeiten von Objekten Speichern aller aktuellen Standardeinstellungen als globale Vorgaben 1. Klicken Sie im Menü Extras auf den Eintrag Standardeinstellungen speichern. 2. Wählen Sie in dem Dialogfeld die Optionen aus, die Sie global aktualisieren möchten: 3. • Dokument- und Objektstandards: Speichern der aktuellen Website-Einstellungen (Seitengröße und Ausrichtung) und Objekteinstellungen (Einstellungen der Kontextleiste).
11 Anordnen von Objekten
300 Anordnen von Objekten
Anordnen von Objekten 301 Sortieren von Objekten Alle neu erstellten Objekte werden in der Reihenfolge gestapelt, in der Sie die Elemente auf der Seite platziert haben. Jedes neue Objekt wird hierbei vor allen bereits vorhandenen Objekten platziert. Wenn Sie die Stapelabfolge der Objekte verändern, beeinflusst dies gleichzeitig die Darstellung der entsprechenden Layoutelemente auf der Seite.
302 Anordnen von Objekten Wenn Sie mehrere Objekteinträge auswählen möchten, halten Sie die Strg-Taste gedrückt (für nicht aufeinander folgende Einträge) oder die Umschalttaste (für aufeinander folgende Einträge), während Sie auf die Objektnamen klicken. Das in der Liste als oberster Eintrag aufgeführte Objekt liegt auch in der Stapelfolge auf der Seite an oberster Position.
Anordnen von Objekten 3. 303 Wählen Sie eine Option für die vertikale und/oder horizontale Ausrichtung aus. Klicken Sie hierzu auf eine der Optionen Oben, Unten, Links, Rechts, Vertikale Mitte oder Horizontale Mitte. Verteilen mehrerer Objekte innerhalb einer Auswahl • Wählen Sie für eine gleichmäßige horizontale/vertikale Verteilung der Objekte innerhalb der Auswahl eine der Optionen Horizontal verteilt oder Vertikal verteilt aus.
304 Anordnen von Objekten Anhängen von Objekten an Text Mit WebPlus können Sie Formen, Bilder oder Galerieobjekte in Relation zu den Texten (künstlerische und Rahmentexte) Ihrer Webseiten platzieren. Hierzu stehen Ihnen folgende Möglichkeiten zur Verfügung: • Frei mit Text verschiebbar: Diese Option ist ideal für Bilder, Formen usw. Eine angehängte Form für künstlerischen Text (wie z. B.
Anordnen von Objekten 305 Anhängen von Objekten an Text 1. Platzieren Sie das Objekt über oder nahe bei dem künstlerischen Text oder Textrahmen, an den Sie es anhängen möchten. 2. Klicken Sie im Menü Anordnen auf An Text anhängen. 3. Wählen Sie in dem nun geöffneten Dialogfeld eine Positionierungsmethode aus. Für ein frei bewegliches Objekt verwenden Sie eine der folgenden Optionen: 1. Aktivieren Sie die Option Frei mit Text verschiebbar. Dies ist die Standardoption für die Positionierung. 2.
306 Anordnen von Objekten und das Objekt zu verschieben, ziehen Sie den Verankerungspunkt einfach mit der Maus an eine andere Textstelle. Für ein integriertes Objekt gehen Sie wie folgt vor: 4. 1. Aktivieren Sie die Option Als Zeichen integrieren. 2. Um die vertikale Ausrichtung des Objekts in Relation zu dem nebenstehenden Text einzustellen, wählen Sie eine Option in dem Dropdownfeld Mit Text ausrichten aus. Der Text fließt in diesem Fall nicht um das verankerte Objekt. 3.
Anordnen von Objekten 5. 307 Klicken Sie auf die Schaltfläche OK. Das Objekt wird dann in den Text integriert, und das Programm blendet unter dem Objekt das Symbol An Text anhängen ein. Anzeigen der Eigenschaften angehängter Objekte 1. Wählen Sie ein angehängtes Objekt aus. 2. Klicken Sie auf das Symbol An Text anhängen unter dem Objekt. Es wird nun das Dialogfeld Eingebettetes Objekt - Eigenschaften angezeigt.
308 Anordnen von Objekten Gruppieren von Objekten Eine Mehrfachauswahl lässt sich schnell und einfach in ein Gruppenobjekt umwandeln. Wenn Sie ein Gruppenobjekt verschieben, vergrößern, verkleinern oder drehen wird dieser Bearbeitungsschritt automatisch auf alle Objekte der Gruppe gleichzeitig angewendet. Erstellen einer Gruppe aus einer Mehrfachauswahl • Klicken Sie auf das Symbol „Gruppieren“.
12 Bilder, Animationen & Multimedia
310 Bilder, Animationen & Multimedia
Bilder, Animationen & Multimedia 311 Einfügen von Bildrahmen Bildrahmen sind geformte „Container“, in denen Sie Bilder platzieren können, und haben die gleiche Funktion wie ein echter Bildrahmen bei Ihnen an der Wand. In WebPlus können Sie zwei Arten von Bildrahmen verwenden: • Bildrahmen mit Umrandung aus der StudioRegisterkarte „Galerie“. ODER • Rahmen ohne Umrandung aus der Werkzeugleiste.
312 Bilder, Animationen & Multimedia Einfügen von Bildrahmen mit Umrandung 1. Wählen Sie in dem Dropdownfeld der StudioRegisterkarte Galerie die Kategorie Bildrahmen aus. 2. Öffnen Sie die gewünschte Unterkategorie (Metallic, Natürlich usw.). 3. Ziehen Sie die Miniatur des Rahmendesigns auf Ihre Seite. Einfügen von Bildrahmen ohne Umrandung 1. Um einen leeren rechteckigen Rahmen einzufügen, klicken Sie im Menü Einfügen auf Bild > Leerer Rahmen. 2.
Bilder, Animationen & Multimedia 313 Einfügen von Bildern in einen Rahmen • Ziehen Sie aus dem aktuell in der Medienleiste geöffneten Album einfach ein Foto mit der Maus in den Bildrahmen, und lassen Sie die Maustaste wieder los. ODER Klicken Sie auf das Symbol Bild ersetzen direkt unter dem ausgewählten Rahmen und wählen Sie die gewünschte Bilddatei aus. Klicken Sie anschließend auf die Schaltfläche Öffnen. Das Bild wird automatisch mit den Standardeigenschaften für Bildrahmen eingefügt, d. h.
314 Bilder, Animationen & Multimedia Sie können mit WebPlus Ihre Bilder in Originalgröße auf den Dokumentseiten platzieren. Standardmäßig wird das Bild nicht zugeschnitten. Ihnen steht jedoch eine breite Palette an Zuschnittoptionen zur Verfügung. Darüber hinaus können Sie die Position des Bildes und seine Skalierung in seinem Bildrahmen flexibel festlegen. Einfügen von Bildern aus der Medienleiste • Ziehen Sie eine Bildminiatur aus dem aktuell angezeigten Album der WebPlus-Medienleiste auf die Seite.
Bilder, Animationen & Multimedia 315 5. Klicken Sie anschließend auf die Schaltfläche Öffnen. • Enthält das Hauptfenster eine Einfügemarke, wird das Bild in den Text eingesetzt und an der Position der Einfügemarke verankert. • Wenn Sie ein Bild über die QuickBuilder-Leiste öffnen, wird es automatisch auf der Seite angezeigt. • Andernfalls nimmt der Mauszeiger nun die Form für das Einfügen von Bildern an.
316 Bilder, Animationen & Multimedia Ersetzen von Bildern Mit der Funktion „Bild ersetzen“ können Sie Bilder jederzeit austauschen. Dies ist besonders praktisch, wenn Sie die Größe und Position eines Fotos auf der Seite beibehalten und lediglich das Motiv ändern möchten. Diese Funktion lässt sich für zugeschnittene und unbeschnittene Bilder einsetzen.
Bilder, Animationen & Multimedia 317 • Um das zugeschnittene Bild in seinem Rahmen zu verschieben, klicken Sie auf dieses Symbol und ziehen das Bild dann mit gedrückter Maustaste. • Um ein Bild in Schritten von 90 Grad gegen den Uhrzeigersinn zu drehen, klicken Sie auf dieses Symbol. • Um die Zoomdarstellung für das Bild zu ändern, klicken Sie auf eines der Symbole „Vergrößern“ oder „Verkleinern“.
318 Bilder, Animationen & Multimedia Einbetten und Verknüpfen von Bildern Sobald Sie ein Bild in WebPlus einbetten, wird dieses Bild zu einem Teil der Projektdatei und ist somit auch von der Originaldatei getrennt. Durch dieses Einbetten wächst auch die Dateigröße der WebPlus-Website. Wenn Sie die Originaldatei für ein eingebettetes Bild verändern, müssen Sie das Bild nach der Bearbeitung erneut in WebPlus importieren.
Bilder, Animationen & Multimedia 319 Die Medienleiste ist jedoch nicht nur ein praktischer Zwischenspeicher für Ihre Fotos, sondern lässt sich für das Anlegen von Fotoalben verwenden, mit denen Sie all Ihre digitalen Bilder stets zur Hand haben. Standardmäßig werden die Fotos zu einem temporären Album hinzugefügt. Wenn Sie die Bilder in einem Album speichern möchten, damit das Album jederzeit verfügbar ist, klicken Sie auf die Schaltfläche Neues Album.
320 Bilder, Animationen & Multimedia Die Miniaturansichten der Fotos lassen sich aus der Medienleiste direkt auf vorhandene Bilder einer Seite ziehen, sodass Sie die Bilder schnell und einfach ersetzen können. Darüber hinaus lassen sich die Bilder auch als neue Seitenelemente in ihrer Originalgröße platzieren. Anzeigen der Medienleiste • Klicken Sie auf das Symbol des Arbeitsbereiches. am unteren Rand Einfügen von Fotos in ein temporäres Album 1.
Bilder, Animationen & Multimedia 321 Speichern temporärer Alben mit eigenen Dateinamen 1. Klicken Sie auf den nach unten zeigenden Pfeil der Schaltfläche Hinzufügen zu. Klicken Sie in dem Menü auf Neues Album. 2. Legen Sie in dem Dialogfeld Neues Album einen Albumnamen fest, indem Sie die gewünschte Bezeichnung in das gleichnamige Feld eingeben. 3.
322 Bilder, Animationen & Multimedia 4. Wählen Sie in dem nun angezeigten Dialogfeld die Dateien oder den Ordner aus und klicken Sie auf OK bzw. Öffnen. 5. In dem Dialogfeld Neues Album werden die neu ausgewählten Dateien nun aufgelistet. Wenn Sie die Platzierungseinstellungen der Fotos ändern möchten, klicken Sie einfach auf den Spalteneintrag der gewünschten Bilder und wählen eine andere Option aus. 6. Um ein Bild zu löschen, wählen Sie es aus und klicken auf das Symbol Bild entfernen. 7.
Bilder, Animationen & Multimedia 323 Einfügen von Fotos in eine Seite 1. Wählen Sie in der rechten oberen Ecke der Medienleiste ein gespeichertes Album oder das temporäre Album in dem Dropdownfeld aus. 2. Ziehen Sie die Miniaturansicht eines Albumfotos mit gedrückter Maustaste auf die Seite. Einstellen der Bildexportoptionen Wenn Sie eine Website publizieren, legt WebPlus einige globale Einstellungen für die Darstellung der einzelnen Bilder als Bitmaps auf der jeweiligen Webseite fest.
324 Bilder, Animationen & Multimedia Über das Dialogfeld Website-Eigenschaften (erreichbar über den gleichnamigen Eintrag des Menüs Datei) können Sie diese Einstellungen prüfen und ändern. Diese Vorgaben sind global, d. h. sie gelten für alle Grafiken einer Website. Auch hier lassen sich jedoch Ausnahmen festlegen, diesmal für einzelne Grafiken.
Bilder, Animationen & Multimedia 325 3. Legen Sie unter Resampling eine Methode für die Neuberechnung von Bildern fest. Sie können für die Formate eine höhere Qualität sowie eine weichere oder schärfere Darstellung vorgeben. Beachten Sie bitte: Je höher die Qualität, desto länger dauert der Export. Die Option „Beste Qualität“ verwendet Supersampling, um eine höchstmögliche Detailtiefe in den exportierten Grafiken zu gewährleisten.
326 Bilder, Animationen & Multimedia Einstellen der Exportoptionen, Titel- und Alternativ-Texte für einzelne Grafiken Mit dem Bildexport-Manager können Sie das Exportformat für einzelne Grafiken gezielt vorgeben. Über diesen Assistenten lassen sich auch gedrehte Texte oder andere Objekte bearbeiten, die bei der Erstellung der Webseite als Grafiken publiziert werden müssen.
Bilder, Animationen & Multimedia 327 Darstellung nicht zusagen, öffnen Sie den Assistenten einfach erneut und wählen ein anderes Dateiformat aus oder legen für die einzelnen Bilder die Formatoptionen separat fest. Neben den Formateinstellungen können Sie auch einen Titel für ein Bild festlegen. Dieser Name wird als QuickInfo angezeigt, wenn ein Website-Besucher den Mauszeiger auf das Bild bewegt.
328 Bilder, Animationen & Multimedia • Mit diesem Format und dem von WebPlus gewählten Namen speichern. Klicken Sie auf eine der Optionen „GIF“, „JPEG“ oder „PNG“, um das Exportformat für die aktuelle Grafik zu bestimmen. Möchten Sie das Standardformat der Website verwenden und den Dateinamen von WebPlus festlegen lassen, aktivieren Sie die Option Website-Standards verwenden. Wenn Sie das JPEG-Format auswählen, legen Sie anschließend eine Komprimierungsqualität über das Dropdownfeld fest.
Bilder, Animationen & Multimedia 329 Originalbilder verwenden). Klicken Sie einfach auf die gewünschte Option, um eine Methode festzulegen. Bei einer Änderung des Dateiformats wird immer eine Neuberechnung durchgeführt. Das Resampling lässt sich wahlweise mit der in den Website-Eigenschaften festgelegten Qualität durchführen oder einer Qualitätsstufe (Beste, Hoch, Schärfer oder Weicher), die Sie speziell für das jeweilige Bild festlegen. 6.
330 Bilder, Animationen & Multimedia Importieren von Bildern aus TWAINQuellen Wenn Ihre Digitalkamera oder Ihr Scanner den TWAIN-Standard unterstützen, können Sie die Bilder direkt in WebPlus einlesen oder gescannte Bilder auch zunächst speichern und dann in WebPlus importieren. Einrichten Ihres TWAIN-Geräts für den Import • Bitte lesen Sie in der Dokumentation Ihres Scanners die entsprechenden Abschnitte zur Bedienung und Einrichtung des Geräts.
Bilder, Animationen & Multimedia 331 Arbeiten mit PhotoLab-Filtern Mit dem Studiofenster von PhotoLab können Sie eine breite Palette von Korrektur- und Effektfiltern in Sekundenschnelle auf Ihre Bilder anwenden. Die Filter lassen sich sowohl einzeln auf Ihre Fotos übertragen als auch kombiniert. Für alle Filter steht Ihnen eine flexible Vorschau zur Verfügung.
332 Bilder, Animationen & Multimedia • Speichern und Verwalten Ihrer Favoriten In der praktischen Registerkarte Favoriten können Sie Ihre bevorzugte Filterkombinationen unter separaten Namen speichern, sodass sie jederzeit auch für andere Bilder verfügbar sind. • Flexible Vorschau Die Vorher/Nachher-Vorschau der Effekte lässt sich bequem in mehreren oder sogar geteilten Fenstern durchführen. Mit den Schwenk- und Zoomoptionen können Sie die verschiedenen Bildbereiche genau betrachten.
Bilder, Animationen & Multimedia 333 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 Bildkontextleiste. PhotoLab der Arbeiten mit der Registerkarte „Bilder“ Die in Ihrer Website platzierten Bilder werden in der Registerkarte Bilder (siehe oben) angezeigt. Diese standardmäßig ausgeblendete Registerkarte von PhotoLab lässt sich jederzeit mit einem Klick auf das Symbol am unteren Rand des Arbeitsbereiches öffnen.
334 Bilder, Animationen & Multimedia Anwenden eines Filters Die Filter in den PhotoLabRegisterkarten „Favoriten“, „Korrekturen“ und „Effekte“ sind in verschiedene Kategorien unterteilt (z. B. „QuickFix“ für schnelle Korrekturen und häufig verwendete Filter). In der Registerkarte „Favoriten“ finden Sie häufig verwendete Filter (sowohl Einzelfilter als auch Effekte, die sich aus mehreren Filtern zusammensetzen). Hier können Sie auch Ihre selbst zusammengestellten Filter speichern.
Bilder, Animationen & Multimedia 335 Sie können alle Filter vorübergehend deaktivieren oder auch ihre Werte zurücksetzen und den Filter aus dem Testfeld löschen. Deaktivieren der Filter Zurücksetzen der Werte Löschen von Filtern Klicken Sie auf . Um den Filter zu reaktivieren, klicken Sie auf . Klicken Sie auf die Option . Alle Änderungen an den Einstellungen werden nun verworfen, und das Programm zeigt die Standardwerte des Filters an. Klicken Sie auf die Option .
336 Bilder, Animationen & Multimedia Retuschieren PhotoLab bietet einige praktische Retuschierwerkzeuge in der Hauptsymbolleiste, mit denen Sie häufig auftretende Fotoprobleme beseitigen können, bevor Sie das Bild mit Korrektur- und Effektfiltern versehen. • Mit dem Werkzeug Rote Augen entfernen beseitigen Sie Blitzlichtspiegelungen, die häufig in den Augen fotografierter Personen auftreten. • Mit dem Werkzeug Schönheitsfehler entfernen beseitigen Sie Hautunreinheiten oder Materialfehler.
Bilder, Animationen & Multimedia 337 Um eine Maske einzustellen, gehen Sie wie folgt vor: 1. Klicken Sie auf das Symbol Maske und in dem nun geöffneten Menü auf Neue Maske. 2. Wählen Sie unter „Werkzeugeinstellungen“ das Werkzeug Bereiche hinzufügen aus, um Bildbereiche mit Pinselstrichen zu maskieren. 3. Stellen Sie die Pinselgröße und die anderen Optionen so ein, dass sie gut zu dem Bereich passen, den Sie bearbeiten möchten.
338 Bilder, Animationen & Multimedia Speichern von Favoriten Wenn Sie bestimmte Filtereinstellungen oder eine Kombination von Filtern in Zukunft auch für andere Projekte verwenden möchten, können Sie diese bequem als Favoriten speichern. PhotoLab speichert alle Ihre Favoriten in der Registerkarte „Favoriten“. Sie können für diese Registerkarte sogar Ihre eigenen Kategorien (z. B. Meine Fotokorrekturen) anlegen.
Bilder, Animationen & Multimedia 339 Starten der Ausschnittsfunktion 1. Wählen Sie ein Bild aus. 2. Klicken Sie auf die Schaltfläche Studio für Bildausschnitte in der Bildkontextleiste. Es wird nun die Studiooberfläche für das Extrahieren von Bildbereichen geöffnet. Festlegen des Ausgabeformats Bevor Sie den Bereich auswählen, den Sie übernehmen oder löschen möchten, müssen Sie einen Ausgabetyp festlegen.
340 Bilder, Animationen & Multimedia Ausgabetyp Beschreibung und Verwendung Bitmap mit Alphakanten Verwenden Sie diesen Typ, wenn Sie Objekte ausschneiden möchten, deren Kanten nur sehr schlecht definiert sind. Durch Transparenzen und Pixelüberblendungen an den Umrisslinien entstehen professionelle Ergebnisse, die kaum Störungen durch die Hintergrundfarben aufweisen. Der Name „Alpha“ bezieht sich auf den Kanal für die Alphatransparenz in einem 32-Bit-Bild.
Bilder, Animationen & Multimedia 341 Erstellen von Bitmaps mit Vektorzuschnitt 1. Klicken Sie in dem Dropdownfeld Ausgabetyp auf Bitmap mit Vektorzuschnitt. 2. (Optional) Legen Sie mit dem Schieber Randschärfe fest, wie weich (unscharf) der Bereich sein soll, der sich von der Schnittkante nach innen erstreckt. 3. (Optional) Legen Sie mit dem Schieber Weichheit fest, wie weich die Schnittkante dargestellt werden soll. 4.
342 Bilder, Animationen & Multimedia • Originalansicht: Nur die ausgewählten Bereiche werden angezeigt. • Getönte Ansicht: Anzeige der Bereiche in verschiedenen Farbschattierungen, mit denen sich komplexe Auswahlvorgänge durchführen lassen. • Transparenzansicht : Die zu löschenden Bereiche werden mit einem Schachbrettmuster gekennzeichnet. Hintergrundfarbe Für die Transparenzanzeige können Sie am unteren Rand des Studios eine andere Hintergrundfarbe festlegen.
Bilder, Animationen & Multimedia 4. 343 Klicken und ziehen Sie mit dem runden Cursor über die Bildbereiche, die Sie entfernen oder behalten möchten (je nach ausgewählten Werkzeug). Manchmal lässt sich der gewünschte Bereich nur mit mehreren Klicks in Kombination mit Klicken und Ziehen markieren. Mit der Schaltfläche Rückgängig wird die zuletzt erstellte Auswahl wiederhergestellt. Um die Auswahl zu verfeinern, können Sie einfach zwischen Werkzeugen umschalten, indem Sie die AltTaste gedrückt halten. 5.
344 Bilder, Animationen & Multimedia Einfügen von Animationseffekten Mit WebPlus können Sie verschiedene Arten von Animationseffekten in eine Webseite einfügen: Animierte Textlaufbänder, GIF-Animationen (siehe Programmhilfe) und Flash-Dateien (*.SWF). Alle Animationseffekte lassen sich in einer Vorschau prüfen und mit unterschiedlichen Optionen konfigurieren. Nachdem Sie die Animation in Ihre Website eingefügt haben, erscheint sie lediglich als „Standbild“.
Bilder, Animationen & Multimedia 345 Vorschaufenster prüfen müssen. Sie können diese Objekte auf die gleiche Weise ausschneiden, kopieren, verschieben oder vergrößern und verkleinern wie normale Grafiken. In der Studio-Registerkarte „Galerie“ finden Sie einige FlashBanner mit vordefinierten Parametern, die Sie flexibel an Ihre Vorstellungen anpassen können. Text, Bilder und Schemafarben dieser Banner lassen sich problemlos verändern - Sie benötigen keinerlei Erfahrung im Umgang mit Flash-Designs.
346 Bilder, Animationen & Multimedia 5. (Optional) In dem Feld „Darstellung“ können Sie festlegen, wie das Flash-Movie auf Ihrer WebPlus-Seite angezeigt wird. Experimentieren Sie einfach mit den verschiedenen Optionen für Schleifenwiedergabe, Transparenz, Ausrichtung, Skalierung und Qualität, bis Sie die richtige Kombination für Ihre Datei gefunden haben. 6. Klicken Sie auf die Schaltfläche OK. 7. Ihr Mauszeiger nimmt nun die Form an.
Bilder, Animationen & Multimedia 347 Video • Verlinkte Videos lassen sich auf die gleiche Weise wiedergeben wie verlinkte Sounddateien. WebPlus unterstützt die folgenden Videoformate: AVI, QuickTime (.mov, .qt), MPEG (.mpg, .mpeg, .mpe, .mpv) und RealVideo (.ram, .rv). Für die Wiedergabe von Streaming-Dateien wird ein bestimmter Player benötigt, der die heruntergeladenen Daten in einem Puffer speichert.
348 Bilder, Animationen & Multimedia Sie können sowohl die Sounddateien (verlinkt und Hintergrundsounds) als auch die Videodateien entweder von Ihrer Website getrennt halten oder die Quelldateien in die Website einbetten. Beachten Sie stets, dass sich YouTube-Dateien nicht in Ihre Website einbetten lassen. 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.
Bilder, Animationen & Multimedia 349 Der Hintergrundsound wird automatisch heruntergeladen und wiedergegeben, sobald ein Webbrowser diese Webseite öffnet. Eine der wichtigsten Entscheidungen für jeden Webdesigner ist, wie die Website-Besucher die Wiedergabe einer Mediadatei starten sollen. WebPlus bietet für beide Dateitypen die gleichen Grundoptionen an.
350 Bilder, Animationen & Multimedia Verlinken von Audio- und Videodateien zu Objekten und Hotspots 1. Wählen Sie ein Objekt oder einen Hotspot aus und klicken Sie in der Werkzeugleiste auf die Option Hyperlink. 2. Klicken Sie in dem Dialogfeld auf die Option Datei, um einen Hyperlink zu einer Audio-/Videodatei auf Ihrer Festplatte zu erstellen. 3. Klicken Sie auf Durchsuchen, wählen Sie die Mediadatei aus und klicken Sie auf Öffnen. 4.
Bilder, Animationen & Multimedia 351 3. Klicken Sie in dem Symbolmenü „Multimedia“ der Symbolleiste für Webobjekte auf die Option YouTubeVideo einbetten. 4. Fügen Sie nun die zuvor kopierte URL des Videos in das Dialogfeld ein. 5. (Optional) Aktivieren/Deaktivieren Sie die Kontrollkästchen für die folgenden Optionen: • Autoplay Automatische Wiedergabe des Videos, sobald die Seite geladen wurde. • Schleifenwiedergabe Kontinuierliche Wiedergabe des Videos.
352 Bilder, Animationen & Multimedia • Wiedergabe in HD Abspielen des Videos in High Definition (falls das Video für die HD-Wiedergabe erstellt wurde). • Umrandung anzeigen Umranden des Videofensters mit einer farbigen Markierung. Klicken Sie auf die zwei Schaltflächen, um die verschiedenen Farben für die Umrandung auszuwählen. 6. Klicken Sie auf die Schaltfläche OK. Platzieren Sie den Einfügecursor an der Seitenposition, an der Sie die linke obere Ecke des Videos positionieren möchten. 7.
Bilder, Animationen & Multimedia 353 Erstellen eines Links von einem Symbol, Bild oder Inline-Player 1. Klicken Sie in dem Menü „Multimedia“ der Symbolleiste für Webobjekte auf eine der Optionen Audioclip einfügen oder Videoclip einfügen. 2. Wählen Sie anschließend über die entsprechenden Felder die gewünschten Mediadateien aus. 3. Wenn Sie die Datei nicht in Ihre Website einbetten möchten, deaktivieren Sie die Option Datei in Website einbetten. 4.
354 Bilder, Animationen & Multimedia Mit WebPlus können Sie eine Flash™- oder JavaScript-basierende Fotogalerie auf jeder beliebigen Webseite platzieren. Dank der flexiblen Möglichkeiten des Flash-Formats lassen sich fantastische Galeriedesigns mit nur wenig Aufwand erstellen, die dem Betrachter sehr unterschiedliche Möglichkeiten zur Fotonavigation bieten.
Bilder, Animationen & Multimedia 355 • Bearbeiten mehrerer Bilder gleichzeitig. Sie können Titel hinzufügen, Bilder drehen* sowie Helligkeit und Kontrast ändern. • Zuweisen von EXIF-Tags und Festlegen eigener Titel. • Erstellen und Verwalten von Fotoalben. * Die Bilder aus einer Digitalkamera lassen sich automatisch von dem Querformat in das Hochformat drehen, wenn diese Funktion von der Kamera unterstützt wird.
356 Bilder, Animationen & Multimedia 4. • Professionelle Flash-Fotogalerie Hierfür benötigen die Besucher Ihrer Website Flash 9 oder höher. • Flash-Fotogalerie Hierfür benötigen die Besucher Ihrer Website Flash 8 oder höher. • JavaScript-Fotogalerie Klicken Sie auf die Schaltfläche Weiter. Verwenden Sie in dem Dialogfeld eine der folgenden Methoden: • Hinzufügen einzelner Dateien Klicken Sie auf Dateien hinzufügen, um die gewünschten Bilddateien auszuwählen.
Bilder, Animationen & Multimedia • 357 Um eine oder mehrere Miniaturansichten zu entfernen, wählen Sie sie aus und klicken auf Löschen. Ihre Bilder werden nun als Miniaturansichten in dem Dialogfeld Fotogalerie angezeigt. 5. (Optional) Anschließend können Sie noch die Miniaturansichten der Galerie bearbeiten: • Um die Fotoreihenfolge zu ändern, wählen Sie eine Miniaturansicht aus und klicken auf eines der Symbole Nach oben oder Nach unten.
358 Bilder, Animationen & Multimedia umgesetzt werden. Legen Sie fest, ob die Tags Am Anfang des Titels oder Am Ende des Titels hinzugefügt werden oder den bestehenden Titel überschreiben sollen. Klicken Sie auf die Schaltfläche OK. • Um einen Titel per Suche zu ersetzen, klicken Sie auf Titel suchen. Nähere Informationen hierzu finden Sie unter „Suchen und Ersetzen von Texten“ auf Seite 246.
Bilder, Animationen & Multimedia 359 6. Wenn Sie die Bilder in die Website integrieren möchten, aktivieren Sie die Option Bilder einbetten. Standardmäßig werden die Fotos von der WebPlus-Datei getrennt gespeichert und mit einer Verknüpfung an die entsprechenden Webseiten gebunden. 7. Klicken Sie auf die Schaltfläche Weiter. 8. Wählen Sie am oberen Rand des Dialogfelds eine Galerieformatierung in der Liste Galerietyp aus. Die einzelnen Typen lassen sich bequem mithilfe des Vorschaufelds auswählen.
360 Bilder, Animationen & Multimedia Um die Größe der Galerie selbst zu bestimmen, ziehen Sie bei gedrückter Maustaste den Cursor über die Seite, und lassen die Maustaste wieder los, sobald der Begrenzungsrahmen die gewünschten Abmessungen erreicht hat. Bearbeiten der Fotogalerie Nachdem Sie die Galerie in eine Webseite eingefügt haben, lässt sie sich jederzeit bearbeiten. Sie können z. B. Bilder hinzufügen, entfernen, drehen, mit Titeln versehen oder ihre Helligkeit und den Kontrast neu einstellen.
Bilder, Animationen & Multimedia 3. 361 Um die Attribute für alle Bilder gleichzeitig zu ändern, wählen Sie alle Fotos über das Kontrollkästchen oben in der Spalte „Bild“ aus und stellen dann die Optionen unter der Fotoliste neu ein. Nachdem Sie eine Galerie auf der Seite platziert haben, können Sie ihre Größe durch Ziehen eines Eckpunkts verändern. Wenn Sie das Seitenverhältnis der Galerie unverändert übernehmen möchten, halten Sie während des Ziehens die Umschalttaste gedrückt.
362 Bilder, Animationen & Multimedia 5. Um das Bild in einer Standardgröße einzufügen, klicken Sie einfach auf den gewünschten Punkt der Seite. ODER Um die Größe des Bildes selbst zu bestimmen, ziehen Sie bei gedrückter Maustaste den Cursor über die Seite und lassen die Maustaste wieder los, sobald das Bild die gewünschten Abmessungen erreicht hat.
13 Linien, Formen & Effekte
364 Linien, Formen & Effekte
Linien, Formen & Effekte 365 Zeichnen und Bearbeiten von Linien Mit dem Bleistift, Geradenwerkzeug und Zeichenstift von WebPlus können Sie Freihandlinien, gerade Strecken und Kurven zeichnen. Mit dem Bleistift zeichnen Sie Freihandlinien und -kurven. Mit dem Geradenwerkzeug können Sie gerade Linien am oberen und unteren Rand der Seite zeichnen sowie horizontale Trennlinien zwischen Textabschnitten oder zur Untermalung von Überschriften.
366 Linien, Formen & Effekte Zeichnen von Linien Zeichnen von Freihandlinien mit dem Bleistift 1. Klicken Sie in der Symbolleiste für Standardobjekte auf den nach unten zeigenden Pfeil des Symbols „Linienwerkzeuge“ und wählen Sie die Option Bleistift aus. 2. Klicken Sie auf den Punkt, an dem Sie mit dem Zeichnen der Linie beginnen möchten, und bewegen Sie den Mauszeiger bei gedrückter Maustaste über die Seite. Das Programm erstellt automatisch eine Linie, die genau Ihren Mausbewegungen folgt. 3.
Linien, Formen & Effekte 3. 367 Um die Linie zu verlängern, platzieren Sie den Mauszeiger über einem ihrer roten Endknoten. An dem Cursor wird nun ein kleines Pluszeichen eingeblendet. Klicken Sie auf den Knotenpunkt, halten Sie die Maustaste gedrückt, und bewegen Sie die Maus, um ein neues Liniensegment anzufügen. Erstellen von Kurven aus mehreren Liniensegmenten mit dem Zeichenstift 1.
368 Linien, Formen & Effekte 2. Wählen Sie einen Segmenttyp aus und klicken Sie auf den Punkt, an dem Sie mit dem Zeichnen beginnen möchten. • Um ein gerades Segment zu erstellen, können Sie nun einfach auf den gewünschten Endpunkt der Linie klicken oder auch die gesamte Linie mit gedrückter Maustaste zeichnen. Um das neue Segment in Schritten von 15 Grad an die vorhandenen Segmente anzuhängen, halten Sie die Umschalttaste gedrückt, während Sie das neue Segment erstellen.
Linien, Formen & Effekte 369 die Krümmung des vorangehenden Segments. Um den neuen Knoten in Schritten von 15 Grad zu dem vorangehenden Knoten auszurichten, halten Sie die Umschalttaste gedrückt, wenn Sie auf die Seite klicken. 3. Um eine bestehende Linie zu verlängern, wiederholen Sie einfach Schritt 2 für das neue Segment. Da Sie für jedes Liniensegment einen anderen Typ auswählen können, lassen sich mit diesem Werkzeug sehr komplexe Linien und Figuren zeichnen. 4.
370 Linien, Formen & Effekte In WebPlus können Sie die Platzierung der Umrisslinie (d. h. Linienbreite) in Relation zu dem Pfad des Objekts (d. h. der Linie, mit der die Objektbegrenzung festgelegt ist) einstellen. Ändern der Linieneigenschaften für ein ausgewähltes Objekt • Um die Farbe und/oder Schattierung einer Linie zu ändern, öffnen Sie die Studio-Registerkarte „Farbfelder“. Um die Farbe direkt aus dem Farbspektrum auszuwählen, wechseln Sie zu der Studio-Registerkarte „Farbe“.
Linien, Formen & Effekte 371 Um eine gestrichelte Linie zu erstellen, wählen Sie aus dem Dropdownfeld eine der fünf Linienformatierungen für gestrichelte Linien aus. ODER (Nur für die Registerkarte und das Dialogfeld) Um eine gestrichelte Linie zu variieren, verschieben Sie den Regler Strichmuster. Die Anzahl der Kästchen links neben dem Schieber gibt die Gesamtlänge des Strichmusters an und die Anzahl der schwarzen Kästchen die Länge des Striches.
372 Linien, Formen & Effekte Sie können ebenfalls den Linienabschluss (Ende) festlegen sowie die Verbindungspunkte (Ecken), an denen zwei Linien zusammenlaufen. In dem Dialogfeld „Linie und Rahmen“ können Sie alle Linieneigenschaften festlegen, einschließlich verschiedener Auswahlmöglichkeiten für die Objektkanten, Schattierung, Skalierung der Linienenden und dekorativer Umrandungen für Fotorahmen.
Linien, Formen & Effekte 373 Farbverlaufsfüllung oder eine Bitmap-Füllung festlegen. Als Bitmap-Füllung lassen sich sogar Ihre eigenen Fotos einsetzen! Darüber hinaus können Sie auch eine Transparenz für die Umrisslinie und die Füllung des Objekts einstellen. Alternativ können Sie auch mehrere Linien zeichnen und dann ihre Anfangs- und Endknoten zu einer geschlossenen Form verbinden.
374 Linien, Formen & Effekte Zeichnen dimensional eingeschränkter Figuren (Kreise, Quadrate etc.) • Halten Sie die Umschalttaste gedrückt, während Sie die Form mit gedrückter Maustaste zeichnen. Alle QuickShape-Formen lassen sich beliebig verschieben, vergrößern und verkleinern, drehen und füllen. Mit den Schiebern an den Seiten des QuickShapes können Sie die Form dieser Objekte schnell und einfach ändern.
Linien, Formen & Effekte 375 Geschlossene Formen Wenn Sie eine neue Linie zeichnen oder eine bestehende Linie auswählen, blendet das Programm automatisch die Knotenpunkte der Linie auf der Dokumentseite ein. Die Knoten markieren jeweils die Start- und Endpunkte einzelner Liniensegmente. Freihandlinien bestehen für gewöhnlich aus sehr vielen Knotenpunkten, gerade Linien oder Kurven haben häufig nur zwei.
376 Linien, Formen & Effekte Bearbeiten von Formen • Mit dem Schieber Breite der Studio-Registerkarte Linie legen Sie die Breite einer Linie bzw. die Breite der Umrisslinie für eine Form fest. Um eine andere Linienart zu verwenden (Strichlinie, Punktlinie usw.) klicken Sie in dem mittleren Dropdownfeld auf die gewünschte Option. • Mit der Studio-Registerkarte Farbe oder Farbfelder können Sie die Farbe für die Umrisslinie und die Füllung der Form festlegen (als Volltonfarbe, Farbverlauf oder Bitmap).
Linien, Formen & Effekte Abgeflachte Kante innen Abgeflachte Kante außen Gaußsche Unschärfe Zoomunschärfe Farbfüllung Weiche Kante Relief 377 Abrunden Radiale Bewegungsunschärfe Unschärfe Kontur Spiegelung In der Studio-Registerkarte „Formatvorlagen“ finden Sie eine breite Palette vordefinierter 2DFiltereffekte. Alle Effekte dieser Registerkarte sind in verschiedene Kategorien unterteilt wie Schatten, Abschrägungen, Spiegelungen, Unschärfen usw.
378 Linien, Formen & Effekte Anwenden von 2D-Filtereffekten 1. Wählen Sie ein Objekt aus und klicken Sie in dem Symbolmenü „Effekte“ der Werkzeugleiste auf die Option Filtereffekte. 2. Wählen Sie in der linken Liste den gewünschten Effekt per Mausklick aus. 3. Um die Einstellungen eines Effekts zu verändern, wählen Sie einfach seinen Namen in der Liste aus und stellen die entsprechenden Kontrollen des Dialogfelds neu ein.
Linien, Formen & Effekte 379 Einfügen einer Spiegelung Eine der simpelsten und gleichzeitig eindrucksvollsten Effekte ist die horizontale Spiegelung eines ausgewählten Objekts. Dieser Effekt ist für Bilder besonders gut geeignet, lässt sich jedoch auch hervorragend mit künstlerischen Texten einsetzen, wie z. B. einem Seitentitel oder einem Textbanner. Über die verschiedenen Optionen können Sie die Höhe, Deckkraft, den Versatz und die Unschärfe der Spiegelung festlegen.
380 Linien, Formen & Effekte Arbeiten mit dem Schattenwerkzeug Schatten sind ideal, wenn Sie die Wirkung oder räumliche Tiefe von Bildern, Textobjekten und Formen unterstreichen möchten. Wenn Sie schnell einen Schatten für ein Objekt direkt auf der Seite platzieren möchten, verwenden Sie einfach das Schattenwerkzeug aus dem Menü „Effekte“ der Werkzeugleiste. Sowohl Standardschatten als auch perspektivische Schatten lassen sich mit nur wenigen Mausklicks zu jedem WebPlus-Objekt hinzufügen.
Linien, Formen & Effekte 381 (A) Unschärfe, (B) Schattenursprung, (C) Deckkraft, (D) Farbe, (E) Skalierung Nachdem Sie einen Schatten erstellt haben, können Sie seine Einstellungen jederzeit mit dem Dialogfeld „Filtereffekte“ präzise abstimmen. Arbeiten mit 3D-Filtereffekten Neben den 2D-Filtereffekten, wie z. B. „Schatten“, „Lichtschein“, „Abschrägung“ und „Relief“, können Sie mit unserem Programm auch 3D-Effekte für Ihre Objekte verwenden.
382 Linien, Formen & Effekte Unter anderem finden Sie hier fantastische 3DOberflächeneffekte und Texturvorlagen („Vorlagen - Standard“, „Vorlagen - Fun“, „Vorlagen - Materialien“ und „Textur“). In der Kategorie „Vorlagen - Materialien“ finden Sie realistische Glas-, Holz-, Metalleffekte usw. Klicken Sie einfach auf eine Miniatur, um den entsprechenden Effekt auf das ausgewählte Objekt zu übertragen.
Linien, Formen & Effekte 383 • Unschärfe: Mit diesem Regler legen Sie fest, wie weich der Effekt dargestellt werden soll. Je größer dieser Wert ist, desto feiner sind die Höhenabstufungen der Oberfläche. • Tiefe: Dieser Schieber legt die angezeigte Tiefenänderung fest. • Standardmäßig ist das Symbol aktiviert (wie eine gedrückte Taste dargestellt), sodass eine Änderung der Tiefe automatisch von einer Anpassung der Unschärfe begleitet wird.
384 Linien, Formen & Effekte Arbeiten mit Objektformatvorlagen Objektformatvorlagen ähneln in Aufbau und Funktion stark den Textformatvorlagen und den Farbschemata. Nachdem Sie einige Attribute wie Linienfarbe, Füllung, Umrandung usw. für ein Objekt eingestellt haben, können Sie diese Zusammenstellung als Formatvorlage unter einem beliebigen Namen speichern und dann später mit einem Mausklick auf andere Objekte übertragen.
Linien, Formen & Effekte 385 Anwenden von Objektformatvorlagen auf einzelne oder mehrere Objekte 1. Öffnen Sie die Studio-Registerkarte Formatvorlagen. 2. Öffnen Sie das Dropdownfeld, um eine Vorlagenkategorie (z. B. „3D“) auszuwählen, und klicken Sie dann in dem unteren Feld auf die gewünschte Unterkategorie. 3.
386 Linien, Formen & Effekte Speichern von Objektformatvorlagen Erstellen neuer Objektformatvorlagen aus den Attributen bestehender Objekte • Klicken Sie mit der rechten Maustaste auf ein Objekt und wählen Sie in seinem Kontextmenü den Befehl Format > Objektformatvorlage > Erstellen aus. Speichern der Objektformatvorlagen aus einer Website als globale Einstellungen 1. Klicken Sie im Menü Extras auf den Eintrag Standardeinstellungen speichern. 2.
14 Farben, Füllungen & Transparenz
388 Farben, Füllungen & Transparenz
Farben, Füllungen & Transparenz 389 Arbeiten mit Volltonfarben Um eine Volltonfarbe auf ein Objekt anzuwenden, können Sie die Registerkarten „Farbe“ und „Farbfelder“ verwenden oder auch ein spezielles Dialogfeld. Über die Farbfelder der Registerkarte können Sie mit Volltonfarben (einfarbigen Farbvariationen) je nach ausgewähltem Objekt sehr unterschiedliche Elemente einfärben. • Grundsätzlich wird bei den möglichen Farbvariationen zwischen den Linien und der Füllung eines Objekts unterschieden.
390 Farben, Füllungen & Transparenz Auswählen von Volltonfarben mit der Registerkarte „Farbe“ 1. Wählen Sie ein Objekt oder mehrere Objekte aus, bzw. markieren Sie den gewünschten Textabschnitt. 2. Klicken Sie auf die Studio-Registerkarte Farbe und wählen Sie in dem Dropdownfeld einen der Farbmodi (RGB, CMYK, HSL oder Graustufen) aus. 3. Klicken Sie am oberen Rand der Registerkarte auf eines der Symbole Füllung, Linie oder Text, um die Objekteigenschaft für das Einfärben zu bestimmen.
Farben, Füllungen & Transparenz 4. 391 Wählen Sie eine Farbtafel der WebsitePalette aus. Diese Palette enthält neben den Standardfarben auch alle Farben, die Sie bisher für Ihre Website verwendet haben. Alternativ wählen Sie über das Symbol Palette eine RGB-, Themen- oder websichere Palette aus. Wenn Sie die Farbe mithilfe eines Dialogfelds festlegen möchten, klicken Sie auf den Menüpunkt Format > Füllung. Ändern der Schattierung (Helligkeit) für eine Farbe 1.
392 Farben, Füllungen & Transparenz Ändern der aktuellen Palette • Klicken Sie auf das Symbol Palette, um eine Liste der verfügbaren Paletten („Standard RGB“, „Websicher“ oder themenbasierende Paletten) zu öffnen, und wählen Sie die gewünschte Farbe mit einem Klick auf ihr Farbmuster aus. Die Farben in der WebsitePalette lassen sich beliebig bearbeiten und löschen. Darüber hinaus können Sie auch neue Farben in diese Palette eintragen.
Farben, Füllungen & Transparenz 393 Wenn Sie die Vorlage für eine neue Website auswählen, können Sie eines von drei Farbschemata festlegen, die speziell für die ausgewählte Vorlage entworfen wurden, oder auch eines der globalen Farbschemata verwenden. Nähere Informationen hierzu finden Sie unter „Erstellen einer Website mit einer Designvorlage“ auf Seite 29.
394 Farben, Füllungen & Transparenz 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. Das Farbschema „Smoothie“ Diese Farbfelder stehen für das Website-Farbschema.
Farben, Füllungen & Transparenz 395 Experimentieren Sie einfach mit dem Dokument „Schemata - Beispiel“, das über den Startassistenten und das Menü Datei verfügbar ist. Laden Sie einfach die Datei und wechseln Sie das Farbschema über den Farbschema-Designer aus. Schemafarben für Hyperlinks, Seiten und Hintergrund Sie können jede der 12 Schemafarben auch für Hyperlinks, die Seitenfarbe und den Hintergrund Ihrer Website verwenden.
396 Farben, Füllungen & Transparenz Für die Hyperlinks in Textformatvorlagen können Sie ebenfalls Schemafarben festlegen, die dann in der gesamten Website verwendet werden. Dies ist besonders praktisch, wenn Sie die Hyperlinkfarben von Überschriften (z. B. Überschrift 1, Überschrift 2) anders färben möchten als die des Textkörpers. Nähere Informationen hierzu finden Sie unter „Festlegen der Texteigenschaften“ und „Arbeiten mit Textformatvorlagen“ auf Seite 249 und 253.
Farben, Füllungen & Transparenz 397 Das Programm färbt nun alle Elemente der Website, denen eine Farbnummer 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.
398 Farben, Füllungen & Transparenz Festlegen von Schemafarben für ein Objekt 1. Wählen Sie das gewünschte Objekt aus und klicken Sie am oberen Rand der Registerkarte „Farbfelder“ auf eines der Symbole Füllung, Linie oder Text, um das entsprechende Attribut für die Neufärbung auszuwählen. 2. Klicken Sie am unteren Rand der Studio-Registerkarte „Farbfelder“ auf eine der Schemafarben, um die Füllung, Linie oder den Text zu färben, oder ziehen Sie die Farbe aus dem Nummernfeld auf das Seitenobjekt.
Farben, Füllungen & Transparenz 4. 399 Klicken Sie einfach auf den Pfeil eines Dropdownfeldes und wählen Sie eine Farbe in dem Menü aus. Mit Weitere Farben können Sie auf das gesamte Farbspektrum zugreifen. Das Schema wird nun mit der neuen Farbe aktualisiert. Wiederholen Sie diese Schritte, um die übrigen Schemafarben zu ändern. 5. Um das Schema auf die aktuelle Website zu übertragen, klicken Sie auf OK. Das Website-Farbschema wird nun aktualisiert.
400 Farben, Füllungen & Transparenz den Verlaufspfad und die Farbknoten flexibel konfigurieren. Bei Bitmap-Füllungen verwenden Sie keine Farben für die Füllung eines Objekts, sondern Bitmap-Bilder, wie z. B. bestimmte Materialien (Holz, Metall, Glas usw.) oder Hintergrundfotos. Linear Elliptisch Konisch Bitmap Über die Studio-Registerkarte „Farbfelder“ können Sie Verlaufsund Bitmap-Füllungen auf die Füllung und Umrisslinie von Formen, Textrahmen und künstlerischen Texten anwenden.
Farben, Füllungen & Transparenz 401 Arbeiten mit Farbverlaufs- und BitmapFüllungen Um eine Farbverlaufs- oder Bitmap-Füllung für ein Objekt festzulegen, können Sie entweder das Füllungswerkzeug, die Studio-Registerkarte „Farbfelder“ oder auch ein Dialogfeld verwenden. Am einfachsten lassen sich Verlaufs- und Bitmap-Füllungen einstellen, indem Sie eine der vorgefertigten Varianten über die Galeriepaletten Verlauf oder Bitmap der Studio-Registerkarte „Farbfelder“ auswählen.
402 Farben, Füllungen & Transparenz 3. Wählen Sie das Objekt oder die Objekte aus und klicken Sie auf das Feld für das Verlaufs- oder Bitmap-Beispiel, das Sie verwenden möchten. ODER Nur für Füllungen: Ziehen Sie bei gedrückter Maustaste das entsprechende Beispielfeld aus der Galerie auf das Objekt und lassen Sie die Maustaste wieder los. 4. Falls notwendig können Sie die Schattierung für die Farben noch über den Schieber oder das Eingabefeld am unteren Rand der Studio-Registerkarte justieren.
Farben, Füllungen & Transparenz 403 Bearbeiten des Füllungspfades Wenn Sie ein füllbares Objekt auswählen, schaltet das Programm automatisch das Füllungswerkzeug aktiv. Bei allen anderen Objekten ist dieses Werkzeug grau dargestellt und somit auch nicht verfügbar. Enthält das Objekt eine Verlaufsfüllung, wird automatisch der Füllungspfad als Linie angezeigt, sobald Sie das Füllungswerkzeug aktivieren. Die einzelnen Knoten des Pfades markieren die Schlüsselfarben des Verlaufs.
404 Farben, Füllungen & Transparenz Bearbeiten des Pfades für Verlaufsfüllungen ausgewählter Objekte 1. Öffnen Sie die Studio-Registerkarte „Farbfelder“ und klicken Sie auf eine der Mustertafeln Füllung oder Linie, um die Farbe für die Füllung oder den Umriss des Objekts einzustellen. 2. Klicken Sie auf den nach unten zeigenden Pfeil des Füllungssymbols der Werkzeugleiste und dann auf die Option Füllungswerkzeug. Der Füllungspfad wird nun für die Füllung oder Umrisslinie des Objekts angezeigt. 3.
Farben, Füllungen & Transparenz 405 Transparenzeffekte sowie Verlaufs- und Bitmap-Transparenzen einstellen können. In der folgenden Abbildung haben wir für die Schmetterlinge von links nach rechts eine gleichmäßige Transparenz (100% Deckkraft), einen Transparenzverlauf (100% Deckkraft nach 0% Deckkraft) und eine weitere gleichmäßige Transparenz (50 % Deckkraft) festgelegt. Transparenzen funktionieren wie Füllungen mit „unsichtbarer Tinte“.
406 Farben, Füllungen & Transparenz In der Studio-Registerkarte „Transparenz“ stehen Ihnen die folgenden Transparenztypen zur Verfügung: • Gleichmäßige Transparenzen legen einen Transparenzwert für das gesamte Objekt fest. • Verlaufstransparenzen (lineare, elliptische und konische Varianten) erstrecken sich von vollkommen transparent bis zu vollkommen undurchsichtig.
Farben, Füllungen & Transparenz 407 ODER Um eine Verlaufstransparenz einzustellen, klicken Sie auf das Symbol Verlauf und dann auf die gewünschte Miniaturansicht. ODER Um eine Bitmap-Transparenz auszuwählen, klicken Sie auf das Symbol Bitmap, dann auf den Namen einer Kategorie und anschließend auf die gewünschte Miniaturansicht. 3. Die Transparenz wird nun auf die Füllung oder Kontur des Objekts angewendet.
408 Farben, Füllungen & Transparenz Einstellen der Standardtransparenz Als Standardtransparenz wird die Transparenz bezeichnet, die das Programm für das nächste Objekt verwendet, das Sie auf einer Seite erstellen. Die lokalen Standardeinstellungen gelten nur für Objekte in der aktuellen Website. Weitere Informationen zu den Standardeinstellungen von WebPlus finden Sie unter dem Thema „Aktualisieren und Speichern von Standardeinstellungen“ auf Seite 295.
15 Website-Vorschau & -Publikation
410 Website-Vorschau & -Publikation
Website-Vorschau & -Publikation 411 Öffnen einer Website-Vorschau Bevor Sie eine Website im World Wide Web veröffentlichen, sollten Sie die Seiten als Vorschau in Ihrem eigenen Webbrowser öffnen. Auf diese Weise können Sie genau feststellen, ob wirklich alle Seiten so angezeigt werden, wie Sie es während der Designphase der Website geplant hatten.
412 Website-Vorschau & -Publikation • Um einen externen Browser zu verwenden, klicken Sie auf einen der Einträge Seitenvorschau im... oder Website-Vorschau im.... Der genaue Name dieser Menüpunkte richtet sich nach den Browserversionen, die auf Ihrem System installiert sind. Eine Möglichkeit wäre z. B. „Seitenvorschau im Internet Explorer“. Wenn Sie mehr als einen Browser installiert haben, können Sie auswählen, welche Browser in dem Menü angezeigt werden sollen.
Website-Vorschau & -Publikation • 3. 413 Um den Namen des Eintrags in dem Menü oder seinen Pfad zu verändern, wählen Sie den Eintrag aus und klicken auf Bearbeiten. Sie können zum Beispiel den Eintrag für „Internet Explorer“ einfach in „IE7“ ändern. Klicken Sie auf OK, um die Änderungen zu übernehmen. Sie sollten Ihre Website stets in verschiedenen Browsern prüfen, damit Sie sich ein Bild machen können, wie Ihre Website auf den unterschiedlichen Systemen Ihrer Website-Besucher aussieht.
414 Website-Vorschau & -Publikation Denken Sie stets daran, dass Sie Ihre Website jederzeit offline auf Ihrem PC testen können, indem Sie die Website in einem lokalen Ordner publizieren. Nähere Informationen hierzu finden Sie in der WebPlus-Hilfe. Publizieren Ihrer Website im World Wide Web 1. Klicken Sie im Menü Datei auf den Eintrag WebsiteEigenschaften... und prüfen Sie alle Exporteinstellungen (besonders die Optionen der Kategorie „Grafiken“). 2.
Website-Vorschau & -Publikation 415 • 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.
416 Website-Vorschau & -Publikation • Unter Erweitert können Sie eine FTPSicherheitsoption festlegen und den Upload der Dateien mit den Verschlüsselungsprotokollen TLS 1.0 oder SSL 3.0 durchführen. Aktivieren Sie die Option Verbindung verschlüsseln und wählen Sie dann ein Protokoll aus. Setzen Sie sich vorher unbedingt mit Ihren Internetdienstanbieter in Verbindung und fragen Sie an, ob dieser eine Verschlüsselung unterstützt (impliziert oder auf andere Weise).
Website-Vorschau & -Publikation 417 zuletzt verwendeten Kontos automatisch in die entsprechenden Felder ein. Über das Dropdownfeld können Sie bequem ein anderes Konto auswählen. Klicken Sie einfach auf den Namen des gewünschten Kontos. 7. 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.
418 Website-Vorschau & -Publikation 12. 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.
Website-Vorschau & -Publikation 419 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. Wenn Sie jedoch die gesamte Website automatisch neu im Web publizieren lassen (mit dem automatischen Ablauf), können Sie über die Option Nicht verwendete Dateien löschen direkt die unbenutzten Dateien entfernen.
420 Website-Vorschau & -Publikation Exportieren aller FTP-Kontodetails 1. Klicken Sie in dem Dialogfeld Im Web publizieren auf Konten. 2. Klicken Sie in dem Dialogfeld „Upload an Server“ unter „FTP-Konto“ auf Alles exportieren. 3. Wählen Sie einen Ordner und einen Dateinamen für die Speicherung der Registry-Datei (.reg) aus und klicken Sie auf Speichern. 4. Übertragen Sie die .reg-Datei an einen anderen Computer und führen Sie dort einen Doppelklick auf die Datei aus.
Website-Vorschau & -Publikation 421 Ist diese Option aktiviert, können Sie ebenfalls die Option Remote-Dateien prüfen auswählen, um alle Dateien vor dem Ersetzen von WebPlus manuell prüfen zu lassen. Hierdurch dauert der Upload zwar länger als im Normalbetrieb, diese Publikationsmethode ist jedoch gründlicher. • Wenn Sie alle Dateien von dem FTP-Server entfernen möchten, die für den Betrieb der aktuell publizierten Website unnötig sind, aktivieren Sie die Option Nicht verwendete Dateien löschen.
422 Website-Vorschau & -Publikation 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.
Website-Vorschau & -Publikation 2. 423 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. • Wählen Sie in dem entsprechenden Dropdownfeld das FTP-Konto aus, das Sie für die Übertragung verwenden möchten.
424 Website-Vorschau & -Publikation Es wird nun das Dialogfeld für die Dateiübertragung eingeblendet, bevor der von Ihnen ausgewählte Browser die Seite anzeigt. Erstellen von PDFs Mit WebPlus können Sie Ihre Website als PDF-Datei publizieren. Die Website-Struktur wird hierbei vollständig exportiert und in dem PDF-Dokument in klickbare Lesezeichen umgewandelt. Das Publizieren von PDF-Dokumenten ist besonders praktisch für Studenten, die Ihre Websites einem Prüfungsgremium vorlegen müssen. 1.
16 Index
Index
Index 2D, 376 Filtereffekte, 376 3D, 381 Filtereffekte, 381 Abmessungen, 46, 76 für die Website, 46 Seitenspezifisch, 76 Absätze, 251 Ausrichtung, 251 Formatierung, 251 Textformatvorlagen für Absätze, 253 Abschrägungseffekt, 376 Absolute URLs, 110 Adsense, 129 Alt-Text (Bilder), 326 An Form zuschneiden, 291 An Position einfügen, 282 Anhängen, 304 HTML-Code für Objekte, 160 HTML-Code für Seiten, 158 Objekte an Text, 305 Animationseffekte, 344 Anker, 110 Bearbeiten, 116 Einfügen, 115 Anker-Manager, 60 Ansich
Index Einfügen in temporäre Alben, 320 Einfügen per Medienleiste, 314 Ersetzen auf der Seite, 316 Ersetzen per Medienleiste, 316 Exportoptionen für Bilder, 323 Freistellen, 338 Importieren, 313 Korrigieren, 331 Links zu RemoteBilddateien, 361 Medienleiste für Bilder, 318 Optimieren, 323 Rahmeneigenschaften ändern, 317 Resampling, 324 Retuschieren, 336 Rollover-Popup, 150 Speichern temporärer Alben, 321 Zuschnitt anpassen, 316 Bildexport-Manager, 323 Bildrahmen, 121, 311 Bitmap-, 399 Füllungen, 399 Transpar
Index E-Commerce-Schaltflächen, 121 Effekte, 376, 381 2D-Filter, 376 3D-Filter, 381 Kontur, 379 Schatten, 380 Spiegelung, 379 Effektfilter (Bilder), 334 PhotoLab, 331 Einbetten und Verknüpfen von Bildern, 318 Einfügen von Objekten, 281 Einkaufswagen, 188 Eins nach hinten (Befehl), 301 Eins nach vorne (Befehl), 301 Einschließen in Navigation, 101 Einzüge, 244 Entfernen von Seiten/Master-Seiten, 69 Exportoptionen (Bilder), 323 Farbe, 389 Farbschemata, 392 Hintergrund, 48 Global, 48 Hyperlink, 48 Global, 48 S
Index Vergrößern/Verkleinern, 285 Volltonfüllungen für, 389 Zeichnen und Bearbeiten, 372 Formulare, 165 Erstellen, 167 Formularelemente, 171 Übertragen von Formulardaten, 174 Bestätigen, 178 Forum (Smart-Objekt), 213 Fotogalerie, 353 Bearbeiten, 360 Erstellen, 355 Fotos Einfügen in Seiten, 323 Fotos (siehe Bilder), 313 Freistellen (Bildmotive), 338 FTP Kontodetails, 414 Migration, 419 Füllung zu Studio hinzufügen (Befehl), 399 Füllungen, 389, 399 Bitmap-, 399 Verlaufs-, 399 Vollton-, 389 Füllungswerkzeug,
Index HTML-Seiten, 79 Hinzufügen, 70 HTML-Tabellen Anhängen von Code an Webseiten, 157 IDs, 163 HTML-Tabellenwerkzeug, 269 HTML-Tags für Überschriften, 52 Hyperlink-Manager, 59 Hyperlinks, 110 Bearbeiten, 114 Entfernen, 114 Farben (global), 47 für Lightboxen, 135 für Zielfenster/-rahmen, 110 Hinzufügen zu Objekten, 111 Icons (Symbole), 121 Importieren, 314 Bitmap- und Vektorbilder, 314 Text, 227 TWAIN-Bilder, 330 In den Hintergrund (Befehl), 301 In den Vordergrund (Befehl), 301 Integrierte Bilder, 313 Inte
Index Linien, 365 Aufbrechen, 375 Bearbeiten, 369 Eigenschaften festlegen, 369 Text anpassen an, 239 Vergrößern/Verkleinern, 285 Zeichnen und Bearbeiten, 365 Linien- und Füllungseigenschaften, 369, 372 Listen, 257 Aufzählungen, 257 Nummerierungen, 257 Maps (Google), 125 Marker (Google Maps), 127 Master-Seiten, 61, 74 Eigenschaften, 59, 74 Entfernen, 69 Hinzufügen, 69 Mehrere, 63 Objekte, 65 Zuweisen, 62 Mehrere, 63 Mehrere Fenster, 35 Mehrfachauswahl, 280 Navigation, 40 Navigationsleisten, 40, 42, 89 als P
Index Verteilen, 303 Zuschneiden, 289 Objektformatvorlagen, 384 Öffnen bestehender Websites, 34 Offsite-Links, 73 Panels aus Navigationsleisten, 102 Eigene entwerfen, 141 Einfügen, 136 Trennelemente, 142 PayPal, 191 Formulare und Schaltflächen einfügen, 191 Hyperlinks zu Einkaufswagen einfügen, 110 Konfigurieren, 189 Minicart, 189 PDF, 424 Pfadtexte, 238 PhotoLab, 331 Podcasts, 179 Abonnieren, 184 Erstellen, 180 Hinzufügen von Episoden, 182 Verschicken an iTunes, 183 Popup-Menüs, 103 Popups (Rollover-), 15
Index Rotationswerkzeug, 287 RSS-Feeds, 179 Abonnieren von Drittanbietern, 184 Erstellen, 180 Hinzufügen von Artikeln, 182 RSS-Feed-Werkzeug, 179 RSS-Reader-Werkzeug, 185 Schaltflächen (Buttons), 105 Eigene entwerfen, 107 Umwandeln in Navigationsleisten, 109 Schatteneffekt, 376 Schattenwerkzeug, 380 Schattierung, 391 Schattierung (Schieber), 391 Schein (Effekt), 376 Schemata (Farb-), 392 Ändern, 398 für Hyperlinks, 395 Hintergrund, 48 Schriftarten, 251 Einstellen, 251 Websicher, 251 Schriftstil, 251 Seiten
Index Verlinken, 350 Wiedergabeoptionen, 353 Speichern von Websites, 36 Spezialeffekte, 376, 381 Spiegelungseffekt, 379 Standardeinstellungen, 295 Aktualisieren, 296 Globale Speicherung, 298 Startassistent, 27 Sticker, 121 Storytext, 229 Verteilen in einer Rahmensequenz, 229 Suchen und Ersetzen, 58, 246 Suchmaschinen, 49 Beschreibungen, 49 Roboter-Metatags für Suchmaschinen, 54 robots.
Index Textformatvorlagen, 253 Austauschen, 257 Bearbeiten, 255 Textformatvorlagen-Palette, 255 Textlaufband (animiert), 344 Text-Manager, 60 Textrahmen, 229 Einrichten, 231 Erstellen, 230 Ränder für, 233 Standardeigenschaften festlegen, 295 Steuern von Textüberlauf, 233 Text anpassen an, 233 Textverarbeitungsdateien, 227 Themenlayouts, 29 Token, 164 Transformieren (StudioRegisterkarte), 285 Transparenz, 404 Standardvariante festlegen, 408 Transparenz (StudioRegisterkarte), 406 Transparenzwerkzeug, 407 Tref
Index Website (StudioRegisterkarte), 40, 61, 67, 82 Website-Eigenschaften, 42 Website-Manager, 58 Websites, 33, 34 Erstellen aus einer leeren Seite, 33 Öffnen bestehender Dokumente, 34 Website-Struktur, 58, 89 Bearbeiten von Seiten, 67 Offsite-Links, 73 und Navigation, 39, 89 Website-Suche (Werkzeug), 120 Website-Suchergebnisse (Werkzeug), 120 Website-Vorschau, 411 Werbung, 129 Werkzeug Bleistift, 366 Designrahmen, 229 Füllungswerkzeug, 402 Geradenwerkzeug, 366 HTML-Tabelle, 269 HTML-Textrahmen, 230 Künstl
