8
Canvas ist ein ideales Werkzeug für die Erstellung von Grafiken und Layout für das Internet. Dieses Kapitel zeigt Ihnen, wie Sie Grafiken und Dokumente für das World Wide Web oder das Firmen Intranet bearbeiten. Am Ende dieses Abschnittes werden Sie in der Lage sein, Hyperlinks, Animationen und Web-Buttons zu erstellen. Canvas enthält ebenfalls einige professionelle Webdesign Instrumente, zum Beispiel das Segment Ersteller Werkzeug oder die Möglichkeit, segmentierte Bilder wie auch Flash und PDF zu exportieren. (Sie finden dazu weitere Informationen in dem Abschnitt Webdesign erstellen).
Mit dem Web-Buttons Werkzeug werden anklickbare Objekte erstellt, welche sich einfach innerhalb eines Dokumentes, das für das Internet oder das Intranet bestimmt ist, platzieren lassen. Web-Buttons ändern ihr Aussehen, sobald ein Besucher der Webseite mit dem Mauszeiger über den Button fährt. Das Erscheinungsbild des Web-Buttons ändert sich ebenfalls, wenn die Taste angeklickt wird. Bedenken Sie, dass jedes Canvasobjekt - egal ob Text, Präsentation oder Bild - als Basis für einen Web-Button genutzt werden kann. Im diesem Abschnitt werden Sie bereits erstellte Web-Buttons platzieren, speichern, austauschen und wieder verwenden.
In dieser Lektion lernen Sie, anklickbare Web-Buttons zu erstellen und diese auf einer Webseite zu platzieren.
Zu Beginn dieser Übung öffnen Sie das Dokument "Knöpfe" in dem Ordner Tutorial. Das Dokument enthält drei nummerierte Illustrationen. Sie werden mit Hilfe dieser Illustrationen einen Web-Button erstellen.
1 Wählen Sie das Web-Buttons Werkzeug.
2 Doppelklicken Sie auf das Web-Buttons Werkzeug, um die Web-Buttons Palette zu öffnen.
3 Klicken Sie auf den Pfeil auf der unteren linken Seite der Palette. Sie sehen eine erweiterte Darstellung der Palette, die Ihnen das Erstellen von Web-Buttons ermöglicht.
4 Um einen Web-Button erstellen zu können, müssen Sie als nächstes die drei Illustrationen in die Web-Buttons Palette hineinziehen. Die drei Tasten werden in der Palette abgelegt.
• Selektieren Sie, das mit 1 angeschriebene Objekt in Ihrem Dokument "Knöpfe" und ziehen Sie es in das Feld für "Loslassen" auf Ihrer Web-Buttons Palette.
• Selektieren Sie das mit 2 angeschriebene Objekt und ziehen Sie es in das Feld "Über" auf Ihrer Web-Buttons Palette.
• Selektieren Sie das mit 3 angeschriebene Objekt. Ziehen Sie an dieser Illustration und legen Sie diese in dem Feld "Gedrückt" auf Ihrer Web-Buttons Palette ab.
Bevor Sie einen neuen Button in der Palette speichern, können Sie ihn in der Palette anschauen. Sie erhalten eine Vorschau der Darstellung des Zeigers in der Webseite im Voransicht Feld: Bewegen Sie den Zeiger in das Feld "Über", um den "Über Status" zu sehen; halten Sie die Maustaste in dem Feld "Gedrückt", um den "Gedrückt Status" zu betrachten.
Nachdem Sie den Web-Button erstellt und mit Hilfe der Voransicht Funktion angeschaut haben, speichern Sie ihn in der Web-Buttons Palette ab. Dies ermöglicht den Zugang zum Web-Button, wenn Sie ihn später auf einer Webseite ablegen wollen.
1 Ziehen Sie den Button von der Vorschau Box in die obere Box der Palette. Der Button erscheint nun ebenfalls in der oberen Box, zusammen mit den anderen in der Palette gesicherten Web-Buttons.
2 Öffnen Sie das Einblendmenü und wählen Sie Buttons Sichern.
3 Sollten Sie einen Fehler gemacht haben, löschen Sie den Web-Button, indem Sie ihn in das Papierkorb-Symbol in der Palette ziehen.
Verwenden Sie die Web-Buttons Palette, um die Web-Buttons innerhalb eines beliebigen Canvasdokumentes zu platzieren. Dies erlaubt es Ihnen, die Dokumente als Webseiten abzuspeichern.
Öffnen Sie das "Webseite" Dokument aus dem Tutorial Ordner, welches Illustrationen für eine Webseite enthält.
1 Öffnen Sie die Web-Buttons Palette.
2 Selektieren Sie den Button, den Sie in der oberen Hälfte der Web-Buttons Palette gesichert haben.
3 Klicken Sie auf das Wort "News" auf der rechten Seite der blauen Grafik in dem "Webseite" Dokument. Der Web-Button wird in das Dokument platziert.
4 Wiederholen Sie diesen Vorgang für die Titel "Frames" und "Gear".
5 Verwenden Sie das Auswahlwerkzeug oder die Pfeile auf Ihrer Tastatur, um den Web-Button zu positionieren.
Nachdem Sie einen Button platziert haben, können Sie ihn vor dem Sichern des Dokuments im Web Format testen. Aktivieren Sie dazu den "Play" Modus der Buttons Palette.
1 Klicken Sie auf den Button Play Modus starten in Ihrer Web-Buttons Palette.
2 Wenn Sie den Zeiger über einen Button bewegen, sehen Sie die Effekte im Dokument.
3 Drücken Sie auf den Web-Button, um den Effekt zu sehen.
4 Wenn Sie mit dem Testen fertig sind, klicken Sie auf Play Modus beenden in Ihrer Web-Buttons Palette.
Lassen Sie dieses Dokument für die nächsten Lektionen zum Thema der Hyperlink und Animationslektion geöffnet.
Als nächstes werden Sie GIF Animationen erstellen, indem Sie Bilder in ein Animations Dokument einbauen und dieses mit der Sichern unter Funktion im animierten GIF Format abspeichern. Wählen Sie dazu Datei > Sichern unter.
Es ist hilfreich zu wissen, dass das Animations Dokument aus einer Reihe von Bildern (Frames) besteht, die man mit individuellen Seiten vergleichen kann. Sie fügen Objekte zu den Rahmen hinzu und erzeugen damit einen Animationsablauf.
Animationen können beim Anklicken in einer Webseite oder automatisch beim Laden im Browser abgespielt werden, wobei man Sie einmal oder mehrfach hintereinander abspielen kann. Sie sind aus mehreren Bildern zusammengesetzt. Die Bilder erscheinen, wie in einem Trickfilm, der Reihe nach.
In der nächsten Lektion lernen Sie, wie man eine animierte GIF Datei erstellt und auf dem Web platziert.
Animierte GIF Dateien erstellen
1 Öffnen Sie das Dokument "Animation" im Tutorial Ordner. Dieses Dokument beinhaltet eine Anzahl von Illustrationen, die später als Bildausschnitte der animierten GIF Datei dienen werden.
2 Wählen Sie Layout > Dokumentlayout, um die Dokumentlayout Palette zu öffnen. Verwenden Sie diese Palette, um die sechs Bilder näher zu betrachten, die in dieser Animation enthalten sind.
3 "Frame 1" ist markiert. Selektieren Sie ebenfalls "Frame 2", "Frame 3", "Frame 4" und "Frame 5". Sie können feststellen, dass sich das Bild bei jedem nachfolgenden Frame entsprechend ändert.
4 Gehen Sie zurück auf "Frame 1", indem Sie auf "Frame 1" klicken, um es zu selektieren.
Sie können die Datei jetzt als GIF Animation sichern.
Dokumente als GIF Animation sichern
1 Wählen Sie Datei > Sichern unter, um die Verzeichnis Dialogbox zu öffnen.
2 Selektieren Sie das Dateiformat "animiertes GIF" und wählen Sie OK, um den automatisch vergebenen Dateinamen (Animation.GIF), zu akzeptieren.
3 Die Dialogbox für die animierten GIF Optionen öffnet sich. Selektieren Sie die folgenden Optionen, um optimale Resultate zu erzielen:
• Transparenter Hintergrund
• Automatischer Beschnitt
• Glätten
• Unterschiedliche Frames
• Unendlich
Nachdem Sie Ihre animierte GIF Datei gesichert haben, können Sie die Animation in jedem Canvas Dokument, das Sie für die Website erstellen, sichern.
1 Wechseln Sie zum "Webseite" Dokument, das immer noch geöffnet sein sollte.
2 Wählen Sie das GIF Animationswerkzeug.
3 Klicken Sie an der Stelle in Ihrem Dokument, an der Sie das animierte GIF platzieren wollen.
4 Wählen Sie die Datei "GIF Animation" von der Verzeichnis Dialogbox und klicken Sie OK.
Lassen Sie das Dokument geöffnet, da Sie es für die nächste Lektion wieder benötigen.
Hyperlinks auf einer Webseite erstellen
Alle professionell entworfenen Webseiten sollten für deren Besucher eine einfache und benutzerfreundliche Handhabung aufweisen. Eine gute Navigation durch die Webseite sowie ein schnelles Durchblättern durch einzelne Seiten, um an die gewünschten Informationen zu gelangen, sind absolute Grundvoraussetzungen für eine professionelle - und beliebte - Webseite. Hyperlinks gehören zu den wichtigsten Werkzeugen einer Webseite. Daher sollten Sie genau wissen, was Hyperlinks sind, und - wesentlicher wichtiger noch - wie man Sie erstellt und einer Webseite zufügt.
In Kürze kann man sagen, dass ein Hyperlink einen Webseiten Besucher "schnellstens" von einem Ort zum anderen auf dergleichen Webseite bringt oder einer anderen Seite auf dergleichen Webadresse, oder "springt" schnellstmöglichst zu einer neuen Webseitenadresse. Dieses erlaubt Ihnen als Web Designer, Webseiten zu erstellen, die zusätzliche Informationen an einem anderen Ort, bzw. einer anderen Seite, enthalten. Somit sind Sie nicht gezwungen, Ihren gesamten Webinhalt auf einer einzigen Seite abzulegen.
Sie können Hyperlinks zu "http" und "ftp" Adressen auf dem Internet oder zu Email Adressen hinzufügen, indem Sie den "mailto" Hyperlink benutzen. Sie können Hyperlinks auch zu Webseiten generieren, welche sich auf einer lokalen Festplatte oder einem Firmen-Intranet befinden.
In der nächsten Übung werden Sie einige Hyperlinks im "Webpage" Dokument erstellen.
Das Hinzufügen von Hyperlinks zu Canvas Objekten
Mehr Informationen bezüglich Hyperlinks und den Verknüpfungs Manager finden Sie im Abschnitt "Entwerfen für das Web", auf der Seite 36.1 Webdesign erstellen.
1 Wählen Sie Objekt > Optionen > Verknüpfungsmanager. Die Verknüpfungsmanager Palette erscheint.
2 Mit den Auswahlwerkzeug, klicken Sie auf den Web Button neben dem Wort "News".
3 Wählen Sie den Seiten Auswahlknopf und wählen Sie "News" von der Liste. Der Text erscheint im Link Feld in der Verknüpfungsmanager Palette.
4 Tragen Sie "News" in das Titel Feld ein.
5 Klicken Sie auf den Link Knopf.
6 Jetzt wählen Sie den Web Button neben dem Wort "Gear."
7 Wählen Sie den Seiten Auswahlknopf und wählen Sie "Gear" aus der Liste.
8 Tragen Sie "Gear" in das Titel Feld ein.
9 Klicken Sie auf den Link Knopf. Der Text erscheint im Link Feld in der Verknüpfungsmanager Palette.
Diese Knöpfe sind jetzt verbunden bzw. miteinander gelinkt, um Sie, jedesmal wenn Sie klicken, auf die entsprechenden Seiten zu bringen.
Hypertext Verbindungen erzeugen
Sie können jede Anzahl von Text selektieren -- von einem Zeichen bis zu einem Absatz oder einem gesamten Textobjekt -- und den Verknüpfungsmanager dazu verwenden, um die Textauswahl in einen Hypertext Link umzuwandeln.
Um einen Hypertext Link zu erzeugen
1 Wählen Sie Objekt > Optionen > Verknüpfungsmanager, um die Verknüpfungsmanager Palette zu öffnen.
2 Öffnen Sie das Seitenmenü und wählen Sie die Seite "News".
3 Mit dem Text Werkzeug, wählen Sie den Text der sich unten befindet, mit dem Namen "U.S. Tour News".
4 Im Link Feld der Palette, schreiben Sie "mailto:news@ustour.com".
5 Klicken Sie den Link Knopf, um das URL zu der Textauswahl hinzuzufügen.
Um Stil und Farbe zum Hyperlink Text hinzuzufügen
An diesem Punkt angelangt, können Sie jetzt Farbe und Formatierungsstile zum Hyperlink Text hinzuzufügen. Im Stilbereich, definieren Sie die Texteigenschaften für den Hypertext.
1 In der Verknüpfungsmanager Palette, wählen Sie einen Stil wie vorher bereits angedeutet.
2 Klicken Sie den Knopf "F" für Fett, den Knopf "I" für Italic oder Kursiv, und den "U" Knopf für Unterstrichen.
3 Wählen Sie eine Farbe für den Text in der Farbpalette. Standardmäßig wird der Text von Canvas dunkelblau eingefärbt.
4 Klicken Sie auf den Link Knopf, um die URL und die Link Stile, die Sie für die Textauswahl vorgesehen haben, zuzuweisen.
Sie können das Dokument jetzt schließen. In der nächsten Übung, arbeiten Sie mit einer vollständigen Version dieses Dokumentes, welches sich im Ordner Tutorial befindet.
Die einfachste Art, Webseiten in Canvas zu speichern ist, wenn Sie das Canvas Dokument mit dem Befehl "Als HTML sichern" speichern.
In dieser Übung werden Sie ein Canvas Dokument im HTML Format sichern, mit Hilfe des Web Befehls. Danach können Sie die Seite in einem Web Browser betrachten, um die Hyperlinks, Web Buttons und animierten GIFs zu sehen.
Um mit der Übung zu beginnen, öffnen Sie das Dokument "Homepage", an dem Sie bereits vorher gearbeitet haben. Dieses Dokument enthält Hyperlinks, Web Buttons und animierter GIFs. Sie werden dieses Dokument dazu verwenden, um weiteres über die Optionen des Speicherns von Webseiten zu lernen.
Eine Webseite mit dem Web Publikationen Assistent sichern.
1 Wählen Sie Datei > Als HTML sichern, um den Web Publikationen Assistenten zu öffnen. Dieser besteht aus einer Reihe von sich öffnenden Fragefenstern, die Sie bei der Publikation Ihrer Webseite unterstützen. Sie sollten den Dialog neben jedem Element genauestens durchlesen.
2 Im ersten Fenster, wählen Sie den Auswahlknopf für "Das ganze Dokument (mit allen Seiten) als eine komplette Webseite sichern". Klicken Sie auf Weiter.
3 Im zweiten Fenster, wählen Sie den Auswahlknopf für "Auto". Klicken Sie auf Weiter.
4 Im dritten Fenster, wählen Sie den Auswahlknopf für "HTML 4 mit Tabellenlayout" und als HTML Ausgabe, die Anti - Aliasing Option "Finest". Klicken Sie auf Weiter.
5 Klicken Sie "Fertig", um die Verzeichnis Dialogbox zu öffnen.
6 Sichern Sie die Datei mit dem Namen "Homepage.htm" im Canvas Tutorial Ordner.
Ihre Webseite wurde gesichert. Alle Komponenten sind jetzt in einem Unterordner, des von Ihnen selektierten Ordner, enthalten.
Wenn Sie Webseiten in Canvas erzeugen, können Sie Ihren Web Browser verwenden, um die Seiten, bevor Sie sie auf dem Internet "posten", nochmals zu überprüfen.
In dieser Übung werden Sie die, von Ihnen in der vorhergehenden Übung gesicherte Webseite, sichern.
1 Starten Sie den Web Browser.
2 Im Browser, wählen Sie Ablage > Datei öffnen (Mac) oder Datei > Öffnen (Windows).
3 Suchen und selektieren Sie die Datei mit dem Namen "Homepage.htm" im Ordner Homepage. Wenn die Datei geladen wurde, können Sie die Animationen anschauen, die Web Buttons testen und den von Ihnen erzeugten Hyperlink.
Herzlichen Glückwunsch! Sie haben jetzt verschiedene Techniken erlernt die es Ihnen einfacher machen Webseiten mit Hilfe von Canvas zu gestalten. Weitere Informationen wie man mit Canvas Webseiten erstellen kann, finden Sie in dem Abschnitt siehe Webdesign erstellen.