Wiederholte Objekte

Es ist üblich bei Websites, dass einige Objekte auf allen Unterseiten identisch sind. Beispiele hierfür sind Überschrift, Gestaltung der Kopfzeile und der Fußzeile. In Web Designer werden solche Elemente als „Wiederholte Objekte“ bezeichnet. Diese haben ein kleines Blumensymbol wie dieses in der rechten oberen Ecke wenn sie ausgewählt werden. Wiederholte Objekte können leicht erstellt werden. Versuchen Sie, dieser Seite ein Objekt hinzuzufügen, z. B. ein Foto, Clipart oder ein Rechteck. Wählen Sie mit dem Auswahl-Werkzeug das Element und klicken Sie im Menü:    Anordnen > Auf allen Seiten wiederholen Mithilfe der Seiten- und Ebenen-Galerie können Sie nun sehen, dass das Element auf jeder Seite an derselben Position erscheint. Wird es geändert, ändern sich auch alle Kopien. Ein weiteres wiederholtes Objekt befindet sich in der Fußzeile am unteren Rand jeder Seite. Bearbeiten Sie diesen Text wie gewohnt mit dem Text-Werkzeug. Die Änderungen werden automatisch auf alle Seiten übertragen. (Tipp: Wenn Sie das Objekt auf einer Seite nicht haben möchten, entfernen Sie es einfach von dieser Seite. Wenn eine Kopie nicht mehr aktualisiert werden soll, wählen Sie „Anordnen“ > „Wiederholen beenden”.)

Website-Varianten (nur Premium)

Web Designer kann für mobile Geräte optimierte Websites erzeugen, die sich dynamisch an verschiedene Breiten anpassen. Sie können also eine Version Ihrer Website erzeugen, die für schmale Smartphone-Bildschirme optimiert ist, und gleichzeitig andere Layouts und Textgrößen beinhaltet, die besser zu breiteren Bildschirmen wie Tablets und Desktop-Webbrowsern passen. Hier ist ein Beispiel, das anhand einer der beinhalteten Vorlagen erstellt wurde. Es hat drei Layout-Varianten: Smartphone, Tablet und normaler Desktop-Webbrowser. Die Version für schmalere Browser benutzt eine größere Schrift und eine andere Spalten- und Navigationsanordnung, die vor allem zu kleinen Smartphone-Bildschirmen passt. Web Designer erzeugt auch automatisch hochaufgelöste Bilder und Grafiken für Retina- und andere High-Resolution- Bildschirme.

Seiteneffekte (Nur Premium)

Websites mit Seiteneffekten sind eine weitere Funktion von Web Designer 10. Diese ermöglichen sowohl Seitenübergänge und Animationen, als auch eine Skalierung auf die Bildschirmgröße. So wird Ihre Website zu einem echten Hingucker. Beispiel 1 : Speisekarte eines Restaurants, die vor allem für Tablets und Desktop-Webbrowser erstellt wurde. Drehen Sie das Gerät (oder ändern Sie die Browser-Breite), um verschiedene Layouts für Hoch- und Querformat zu sehen (dies ist nicht für Smartphones gedacht), mit automatischer Anpassung an die Bildschirmbreite. Beispiel 2 : Einfache Foto-Slideshow mit Anpassung an den Bildschirm, Ausrichtungserkennung und hochauflösenden Retina-Bildern. Hinweis: für die hochauflösenden Bilder ist eine schnelle Internetverbindung sinnvoll.

Präsentationen (nur Premium)

Benutzer der Premium-Version von Web Designer können web-basierte Präsentationen, ähnlich den web- basierten PowerPoint-Präsentationen, erzeugen. Ihre Internet-Zuschauer können entweder selbst die einzelnen Folien durchklicken oder Sie steuern die Präsentation für eingeladene Zuschauer selbst. Hier ein  Beispiel einer Web-Präsentation.

Formate

Formatvorlagen werden in Web Designer unterstützt. Es gibt in der Infoleiste des Text-Werkzeugs ein Auswahlmenü mit allen im Dokument verwendeten Formaten. 'Normal' ist das Format für Textkörper, zusätzlich gibt es zwei Überschriftsformate. 'Überschrift 2' wird über diesem Absatz verwendet. Sie aktualisieren alle Überschriften dieses Formats, indem Sie eine auswählen, diese bearbeiten (Farbe, Schriftart, Größe, usw.) und dann im Format-Auswahlmenü 'Format Überschrift 2 aktualisieren' auswählen.

Google-Schriftarten (nur Premium)

Für diesen Text wird die Schriftart Open Sans, eine klare, moderne Schriftartenfamilie, die mit Web Designer mitgeliefert wird, verwendet. Dank Google-Schriftarten haben Sie die Auswahl zwischen über 600 Schriftarten. Jede Schriftart, die Sie über das Schriftartenmenü auswählen, wird automatisch heruntergeladen und installiert. Nach der Installation kann eine Schriftart auch in anderen Windows-Programmen verwendet werden. Wenn Sie sie in Web-Dokumenten verwenden, werden diese Schriftarten auf Google-Servern bereitgestellt (spart Ihnen Bandbreite). Außerdem sind sie mit allen modernen Web-Browsern kompatibel. Vorschau und Installation einer Google-Schriftart aus dem Schriftartenmenü (Text-Werkzeug) sind über die hier gezeigte „Hinzufügen“-Verknüpfung möglich.

Text umfließen lassen

Um ein Objekt textabweisend zu machen, klicken Sie mit der rechten Maustaste darauf und wählen Sie „Text darunter abweisen“. Wenn Sie das Objekt jetzt bewegen, verschiebt es den Text um sich. Dabei wird natürlich alles auf der Seite neu ausgerichtet und eventuell ist es erforderlich, die Objekte neu zu positionieren oder die Seitengröße zu ändern, um den überlaufenden Text aufzunehmen.

Seitenanpassungen

Beim Hinzufügen oder Entfernen von Text wird die Seite automatisch passend zur Textmenge skaliert. Alle Elemente unterhalb verschieben sich nach oben oder unten, auch Grafiken und die Fußzeile. Sogar die Blumengrafik unten auf der Seite bleibt an der richtigen Stelle. Eingestellt wird dieses Verhalten, indem Sie im Auswahl-Werkzeug mit der rechten Maustaste klicken und „Seitenposition“ wählen. Elemente, bei denen „Verdrängen“ aktiviert ist (wie diese Textspalte), verschieben die Inhalte der Fußzeile auf der Seite. Grafiken und Fotos können in eine Textzeile eingefügt werden. Alternativ können Grafiken an einem Punkt im Text verankert werden. D. h. dass die Grafik mit dem Text während der Bearbeitung verschoben wird. Die beiden Bilder unten sind Beispiele dafür – Fügen Sie in diesen Text ein paar Leerzeilen ein, um zu sehen, wie sie sich bewegen.

Seitenauswahl und -Ansicht

Klicken Sie rechts in der Seiten- & Ebenen-Galerie auf ein Vorschaubild, um die gewünschte Seite anzuzeigen. Klicken Sie auf das kleine Dreieck neben dem Vorschaubild, um die Galerie aufzuklappen und die Ebenen einer Seite anzuzeigen. Wenn Sie wie in einer Textverarbeitung durch die einzelnen Seiten scrollen möchten, klicken Sie mit der rechten Maustaste auf den Seitenhintergrund und wählen Sie „Mehrseitige Anzeige“. 

Seiten umbenennen und neu sortieren

Verschieben Sie die Seiten einfach in der Seiten- & Ebenen-Galerie, um die Seiten neu anzuordnen. Seiten können Sie umbenennen, indem Sie sie erst per Klick auswählen und dann noch einmal auf den Seitennamen klicken, der unten auf jeder Seiten-Vorschau angezeigt wird. (Die erste Seite sollte immer Index heißen.)

Seiten hinzufügen oder entfernen

Um eine neue Seite zu erstellen, die ähnlich der aktuellen ist, klicken Sie einfach auf dieses Symbol in der oberen Leiste (oder wählen Sie „Bearbeiten“ > „Seiten“). Um eine neue Seite aus den Vorlagen hinzuzufügen, z. B. im Stil dieser Seite, öffnen Sie die Design-Galerie und ziehen Sie eine Seitenvorlage aus dem Ordner „Website-Themen“ > „Kostenloses Beispiel“ in das Dokument. Die Farben werden automatisch angepasst. Die meisten installierten Seitenvorlagen finden Sie unter Website- Vorlagenthemen - es gibt dort auch viele verschiedene Designs.

Sonstige Werkzeuge

Wir erforschen nun einige andere Werkzeuge und Funktionen des Web Designer. Testen Sie diese mit der halbtransparenten Sprechblase unten. Bedenken Sie, dass Sie für die meisten Aktionen das Objekt zuerst auswählen müssen (durch Anklicken mit dem Auswahl-Werkzeug). Farbe ändern: Ziehen Sie eine Farbe aus der Farbleiste auf eine Form. Oder nehmen Sie den Farbeditor (Strg + E). Ändern Sie Größe, Position und Winkel: Ziehen Sie mit dem Auswahl-Werkzeug einen der 4 Anfasser, die sich um das Objekt befinden. Geben Sie ihm zusätzlich einen weichen Schatten: Wählen Sie das Schatten-Werkzeug links und ziehen Sie an Ihrer Sprechblase. Ändern Sie die Steuerelemente oben. Geben Sie ihr einen Farbverlauf: Wählen Sie das Füll-Werkzeug (Farbtopf-Symbol) und ziehen Sie mit gehaltener Maustaste über die Form. Ziehen Sie zum Anpassen die Enden der Pfeile. Versuchen Sie, an den Enden des Füll-Pfeils eine Farbe abzulegen. Oder wählen Sie ein Pfeilende und öffnen Sie den Farbeditor (Strg + E). Halbtransparenz: Wählen Sie das Transparenz-Werkzeug (Weinglas) und ändern Sie die Transparenzwerte mithilfe des Reglers oben. Ziehen Sie die Form über die Seite, um den Transparenzeffekt zu betrachten. Form bearbeiten: Das ist nun ein wenig fortgeschrittener. Wählen Sie die Form, öffnen Sie das Form-Werkzeug  (in der Ausklappleiste des dritten Werkzeugs von oben auf der linken Seite) und ziehen Sie an der Form oder an einem der kleinen Kontrollpunkte. Falls Sie bereits vektorbasierte Werkzeuge für Bézier-Formen verwendet haben, werden Sie hiermit vertraut sein. Abschließend: Betrachten Sie die Vorschau Ihrer Änderungen - Alles was Sie machen „funktioniert einfach“ im Webbrowser. (Falls Sie bereits andere Webdesign-Programme, HTML-Editoren oder Grafik-Programme verwendet haben, werden Sie nun feststellen, wie fortschrittlich Web Designer ist. Die Möglichkeit, alles überall frei zu positionieren, von allem, einschließlich der Grafik-Werkzeuge genaueste WYSIWYG-Ergebnisse zu erhalten, machen Web Designer zu einem einzigartigen Design-Werkzeug.)