Erfahren Sie, wie Sie verschiedene Objekte in Adobe Muse ordnen, verwalten und transformieren. Lesen Sie weiter, um zu erfahren, wie Sie Bilder für Adobe Muse optimieren.

Hinweis:

Adobe Muse wird nicht mehr um neue Funktionen ergänzt und der Support wird am 26. März 2020 eingestellt. Detaillierte Informationen und Unterstützung erhalten Sie auf der Seite zum Ende der Produktlebensdauer von Adobe Muse.

Objekte in Adobe Muse enthalten Gestaltungselemente, die in externen Quellen erstellt oder daraus importiert wurden. Bilder, Texte, Bilderrahmen und mehr können zur Webseite hinzugefügt und mit verschiedenen Werkzeugen in Adobe Muse bearbeitet werden.

Einer der gängigsten Workflows ist, eine Schaltfläche in Adobe Photoshop zu erstellen und zu importieren. Deshalb erkennt Adobe Muse Ebenen und Ebenenkompositionen, die in Photoshop erstellt wurden. In Adobe Muse können Sie Ebenen als Status der Schaltfläche auf Ihrer Website festlegen.

Bei Objekten, die auf der Leinwand der Webseite platziert sind, können Sie Transformationen hinzufügen, um den Design-Anforderungen der Website gerecht zu werden. Sie können Objekte auch isolieren, um geeignete Eigenschaften bezüglich Innenabständen und Spalten hinzuzufügen, um Abstände für verschachtelte Elemente zu bearbeiten.

Verwenden von Bildern in Adobe Muse-Projekten

Platzieren von Bildrahmen in Adobe Muse-Projekte

Sie können Bildrahmen direkt in Ihre Adobe Muse-Projekte platzieren, indem Sie auf das Bildrahmen-Werkzeug klicken. Klicken Sie im Werkzeugbedienfeld auf das Bildrahmen-Werkzeug und dann auf die gewünschte Stelle in Ihrem Projekt.

  1. Klicken Sie im Werkzeugbedienfeld auf das Rechteck-Rahmenwerkzeug bzw. auf das Ellipsen-Rahmenwerkzeug.

    Bildrahmen-Werkzeug in Adobe Muse
    Zeichnen von Rechteck- und Ellipsen-Bildrahmen in Adobe Muse per Drag & Drop

  2. Klicken Sie auf das Bildrahmen-Werkzeug und ziehen Sie, um den Bildrahmen in Ihrem Projekt zu platzieren.

    Sie können erneut klicken und weitere Bildrahmen in Ihrem Projekt platzieren. Die Bildrahmen können auch entsprechend Ihren Design-Anforderungen skaliert und verschoben werden.

    Der Rahmen kann mit Farbe gefüllt werden, oder es kann ein Bild im Rahmen platziert werden. Um ein Bild zu platzieren, ziehen Sie das gewünschte Bild per Drag & Drop auf den Rahmen. Das Bild wird entsprechend skaliert, um in den Rahmen zu passen.

    Rechteckiger und elliptischer Bildrahmen
    Rechteckiger und elliptischer Bildrahmen

Platzieren eines einzelnen Bilds auf der Seite

Der Muse-Arbeitsbereich funktioniert ähnlich wie der Arbeitsbereich von Illustrator und InDesign: zunächst laden Sie das platzierte Bild, dann klicken Sie auf der Seite an die Stelle, an der es platziert werden soll. Um eine Bilddatei, indem Sie sie direkt auf der Seite einzufügen, gehen Sie wie folgt vor:

  1. Wählen Sie „Datei“ > „Platzieren“ oder verwenden Sie die Tastaturbefehle Befehlstaste+D (Mac) oder Strg+D (Windows), um das Dialogfeld „Importieren“ zu öffnen.
  2. Navigieren Sie, um die Datei „made-with-muse.png“ im Beispieldateiordner auszuwählen. Klicken Sie auf „Öffnen“, um die Datei auszuwählen, und schließen Sie dann das Dialogfeld „Importieren“.

Klicken Sie einmal auf den unteren Bereich der Seite, um das Bild zu platzieren. In diesem Fall soll das Bild in seiner ursprünglichen Größe platziert werden, daher klicken Sie nur einmal. Wenn Sie jedoch das platzierte Bild skalieren möchten, können Sie klicken und ziehen, um das Bild auf eine bestimmte Größe zu skalieren. 

Ziehen Sie das Bild mit dem Auswahlwerkzeug zur vertikalen Mitte des gekachelten Fußzeilenrechtecks. Beachten Sie, wie rote Hilfslinien und türkisgrüne Messfelder eingeblendet werden, um Ihnen das mittige Ausrichten der Grafik zu erleichtern.

Nachdem Sie diese Änderungen vorgenommen haben, ist die Gestaltung des Fußzeilenbereichs fast abgeschlossen.

Platzieren eines Bilds in Adobe Muse
Die Fußzeile besteht aus einem einzelnen Rechteck mit einem gekachelten Hintergrundbild sowie einem darauf platzierten Bild, das mittig ausgerichtet ist.

Informationen über die Optimierung von Bildern in Muse beim Veröffentlichen oder Exportieren einer Site

Sie können auch druckoptimierte Bilder in Adobe Muse platzieren, die von der Anwendung in ein webfreundliches Format konvertiert werden. Bei dieser Konvertierung wird das Bild jedoch oftmals komprimiert, sodass die Bildqualität beeinträchtigt wird. Wenn Sie Bilder in Muse einfügen, die nicht weboptimiert sind, wird eine automatische Komprimierung durchgeführt. Wenn Sie eine Site veröffentlichen oder exportieren und nicht mit den automatischen Ergebnissen zufrieden sind, erstellen oder optimieren Sie Ihre webfreundlichen Bilder manuell mit Adobe Photoshop oder Adobe Fireworks®. Löschen Sie die Originalbilder und platzieren Sie die neuen optimierten Bilder in den Seiten; veröffentlichen oder exportieren Sie anschließend Ihre Site erneut.

Beachten Sie, dass andere Änderungen, die Sie an einem Bild in Muse vornehmen (z. B. Zuschneiden, Skalieren oder Hinzufügen von abgeflachten Kanten, Schatten und Schein), dazu führen, dass Muse das Bild neu erstellt und automatisch komprimiert. Wenn Sie mehr Kontrolle über die Optimierung haben möchten, können Sie dem Bild mit Photoshop oder Fireworks Effekte hinzufügen, die Datei in einem Bildbearbeitungsprogramm optimieren und dann das Bild in Muse platzieren, um selbst die Komprimierungsstufe festzulegen. Sie können PSD-Dateien aus Photoshop direkt in Muse platzieren, anstatt PNG-, JPG- oder GIF-Dateien zu exportieren. Aber auch hierbei generiert Muse automatisch eine neue Bilddatei basierend auf seinen eigenen automatischen Komprimierungsalgorithmen.

Optimieren von Bildern für die Anzeige im Internet

Exportfehler und langsamere Exportvorgänge können auftreten, wenn eine verknüpfte Datei mit einer sehr hohen Auflösung platziert und später auf der Seite um ein Vielfaches kleiner skaliert wurde. Dies ist kein empfohlener Workflow. Diese Probleme treten noch deutlicher zu Tage, wenn Bilder in vollständiger Größe (über 2.000 Pixel) wiederholt platziert und anschließend skaliert werden, um sie an ein Design anzupassen.

Wenn Sie eine sehr große Bilddatei platzieren, beschränkt Muse automatisch die Größe und skaliert die Bildbreite auf 2048. Wenn Sie den Cursor über den Namen eines Elements im Elementebedienfeld bewegen, zeigt eine QuickInfo die Originalgröße des platzierten Bildes im Vergleich zur neu berechneten Bildgröße an (skaliert und an die maximale Größe angepasst).

Es empfiehlt sich, die Webgrafiken für eine Site vor dem Platzieren auf Seiten in einem Bildbearbeitungsprogramm zu skalieren und zu optimieren. Das Platzieren von Bildern mit sehr großen Abmessungen kann dazu führen, dass die MUSE-Datei erheblich größer als notwendig ist. Die MUSE-Datei muss die zusätzlichen Pixeldaten verarbeiten, die nicht erforderlich sind, um das Bild im Internet anzuzeigen. Dies kann zu einer längeren Verarbeitungszeit beim Exportieren und Veröffentlichen der Sites führen. In manchen Fällen kann bei einer sehr großen MUSE-Datei eine Zeitüberschreitung auftreten, wenn während des Export- oder Veröffentlichungsvorgangs alle Dateien skaliert und optimiert werden. Möglicherweise treten Zeitüberschreitungsfehler auf.

Um dies zu vermeiden, können Sie mit der rechten Maustaste auf die Elementnamen klicken und „Elementgröße optimieren“ wählen, um die Daten zu entfernen, die zum Anzeigen des skalierten Bildes nicht erforderlich sind.

Wenn Sie ein optimiertes Bild skalieren, damit es in einem Entwurf größer angezeigt wird, wird möglicherweise ein Fehler zu einem hochgerechneten Plus-Element angezeigt. Um dies zu vermeiden, können Sie die Option „Größere Größe importieren“ wählen, um die zusätzlichen Bilddaten abzurufen, die zum akzeptablen Anzeigen des skalierten Bildes erforderlich sind.

Zeichnen von Platzhalterformen

Eine Platzhalterform kann eine Ellipse, ein Rechteck oder ein Polygon sein, das Sie mit einem Bild, Text oder einer Farbe füllen können.

  1. Wählen Sie aus dem Werkzeugbedienfeld entweder das Rechteck- oder das Ellipse-Werkzeug aus.

    Zeichnen Sie Platzhalterformen in Adobe Muse.
    Wählen Sie entweder das Rechteck- oder das Ellipse-Werkzeug aus der Symbolleiste aus.

  2. Ziehen Sie, um die Rechteck- oder Ellipsenform in Ihrem Adobe Muse-Projekt zu platzieren.

    • Um Quadrate zu erstellen, klicken Sie bei gedrückter Umschalttaste auf das Rechteck-Werkzeug.
    • Um Kreise zu erstellen, klicken Sie bei gedrückter Umschalttaste auf das Ellipse-Werkzeug.

    Sie können die Formen mit Grafiken, Text oder Farbe füllen.

  3. Um die Anpasseigenschaften für das Objekt festzulegen, wählen Sie das Rechteck bzw. die Ellipse aus und klicken auf „Objekt“ > „Anpassen“.

    Sie können eine der folgenden Anpassoptionen wählen:

    • Inhalt proportional anpassen: Skaliert den Inhalt unter Beibehaltung der Proportionen des Inhalts so, dass er in den Rahmen passt. Die Abmessungen des Rahmens werden nicht geändert. Wenn Inhalt und Rahmen unterschiedliche Proportionen aufweisen, entsteht ein leerer Bereich.
    • Rahmen proportional anpassen: Skaliert den Inhalt unter Beibehaltung der Proportionen des Inhalts so, dass er den gesamten Rahmen ausfüllt. Die Abmessungen des Rahmens werden nicht geändert. Wenn Inhalt und Rahmen unterschiedliche Proportionen aufweisen, wird der Inhalt vom Begrenzungsrahmen des Rahmens beschnitten.
    Inhalt für Objekte in Adobe Muse proportional anpassen
    Inhalt in Objekten proportional anpassen

    Rahmen in Objekten proportional anpassen (Adobe Muse)
    Rahmen in Objekten proportional anpassen

Platzieren einer Photoshop-Datei als Rollover-Schaltfläche

  1. Wählen Sie „Datei“ > „Photoshop-Schaltfläche platzieren“ aus. Navigieren Sie im angezeigten Dialogfeld zur PSD-Datei. Klicken Sie auf „Auswählen“ (Mac) bzw. „Öffnen“ (Windows), um die Datei auszuwählen.

  2. Das Dialogfeld „Photoshop-Importoptionen“ wird angezeigt. Nehmen Sie sich einen Moment Zeit, um herauszufinden, wie die Einstellungen angewendet werden. Sie können die Menüs verwenden, um anzugeben, welche Ebene in der Photoshop-Datei als Normal-Status der Schaltfläche (Erscheinungsbild beim ersten Laden der Seite), welche als Rollover-Status (Erscheinungsbild, wenn der Besucher mit dem Mauszeiger darauf zeigt) und welche als Maustaste-gedrückt-Status (Erscheinungsbild, wenn ein Besucher auf die Schaltfläche klickt) verwendet werden soll. Die drei Statusmenüs zeigen die Namen der Photoshop-Ebenen an und die Miniaturbilder zeigen visuell an, wie jede ausgewählte Ebene aussehen wird.

  3. In diesem Beispiel sind die Photoshop-Ebenen bereits korrekt angeordnet, um die Schaltflächenstatus anzuzeigen. Es ist nicht notwendig, die Menüeinstellungen zu ändern. Klicken Sie auf „OK“, um die Status so zu akzeptieren, wie sie standardmäßig angeordnet sind.

    Verwenden Sie das Dialogfeld mit den Optionen für den Photoshop-Import, um vorhandene Photoshop-Ebenen mit den gewünschten Schaltflächenstatus zu verbinden.
    Verwenden Sie das Dialogfeld mit den Optionen für den Photoshop-Import, um vorhandene Photoshop-Ebenen mit den gewünschten Schaltflächenstatus zu verbinden.

  4. Klicken Sie einmal in die rechte obere Ecke der Kopfzeile der A-Musterseite, um die Photoshop-Datei in Originalgröße zu platzieren.

  5. Klicken Sie auf den Link „Vorschau“, um den WebKit-basierten Wiedergabe-Emulator zu verwenden. Überprüfen Sie die Anzeige der A-Musterseite. Wenn Sie die Seite das erste Mal öffnen, wird der Normal-Status der Schaltfläche angezeigt. Wenn Sie den Cursor über die Schaltfläche bewegen, ändert sich das Aussehen leicht (die braune Farbe des Tropfens wird heller). Wenn Sie auf die Schaltfläche klicken, wird der weiße Text hellbraun, solange Sie die Maustaste gedrückt halten.

  6. Klicken Sie auf „Entwurf“, um mit der Bearbeitung der A-Musterseite in der Ansicht „Entwurf“ fortzufahren.

Die Share-Schaltfläche zeigt die erwarteten Status. Im nächsten Abschnitt lernen Sie, wie Sie die Share-Schaltfläche am Tropfen-Bild auf der rechten Seite der Site-Navigation ausrichten.

Im folgenden Abschnitt erfahren Sie, wie Sie die Kopf- und Fußzeilenbereiche der Musterseite definieren.

Fixieren von Objekten am Browserfenster

Wenn Sie ein Bild platzieren oder andere Methoden verwenden, um Bildmaterial zu einer Seite hinzuzufügen, verwenden Sie das Auswahlwerkzeug und die Pfeiltasten, um das Bild(material) neu zu positionieren. Wenn Sie das Bild verschieben, wird es relativ zu den anderen Elementen (Bilder, Text und Medien) verschoben, die sich ebenfalls auf der Seite befinden. Sie haben auch die Möglichkeit, die anderen Elemente zu verschieben; in diesem Fall verhält sich die gesamte Seite wie eine Broschüre oder ein Poster. Die Elemente auf der Seite befinden sich auf einer Ebene. Wenn eine Seite lang ist (viel vertikalen Inhalt enthält) und der Besucher nach unten scrollt, kann er die Bilder am Anfang der Seite nicht mehr sehen.

Sie haben auf Websites bestimmt schon einmal angeheftete Objekte gesehen; dies sind die „fixierten“ Elemente, die immer an derselben Position angezeigt werden. Sie erwecken den Eindruck, als ob sie über dem Rest des Seiteninhalts schweben.

Wenn Sie das Anheft-Werkzeug verwenden, entfernen Sie im Grunde ein Bild aus dem Fluss der Seite. Anstatt das Bild relativ zu den anderen Seitenelementen zu positionieren, legen Sie eine bestimmte Position dafür relativ zum Browser fest. Angeheftete Bilder erwecken immer den Eindruck, als ob sie „festkleben“; sie bleiben immer an derselben Position (z. B. oben rechts oder schwebend am unteren Rand), unabhängig von anderen scrollenden Seitenelementen. Wenn der Besucher sein Browserfenster verkleinert oder vergrößert, bleiben angeheftete Bilder immer an ihrer angehefteten Position relativ zum Browserfenster.

Sie können sich das Anheften so vorstellen, als ob Sie das Bild aus dem Design der Seite „herausheben“ und es stattdessen am Browser anheften, so, als ob Sie einen Notizzettel an eine Pinnwand anheften. Das angeheftete Element verschiebt sich, um seine angeheftete Position relativ zum Browser beizubehalten, wenn der Besucher das Browserfenster verkleinert oder vergrößert. Das angeheftete Element wird jedoch nicht verschoben, wenn der Besucher den Seiteninhalt horizontal oder vertikal scrollt.

Führen Sie folgende Schritte aus, um das Anheft-Werkzeug zu verwenden:

  1. Wählen Sie, während die A-Musterseite in der Entwurfsansicht geöffnet ist, mit dem Auswahlwerkzeug das Facebook-Symbol aus.
  2. Klicken Sie auf die obere rechte Position in der Anheft-Schnittstelle im Steuerungsbedienfeld. Diese Einstellung „heftet“ das Element an der oberen rechten Ecke der aktuellen Position an.
  1. Wiederholen Sie Schritt 1 und 2, um die Google+- und Twitter-Schaltflächen an ihrer Position oben rechts anzuheften, damit sie nicht im Browserfenster verschoben werden, wenn der Bildlauf für den Rest der Seite durchgeführt wird.
  2. Klicken Sie auf „Planung“, um die Seitenminiaturen zu sehen. Alle Seiten enthalten jetzt die drei Social Media-Symbole, weil Sie sie zur Musterseite hinzugefügt haben.
  3. Doppelklicken Sie in der Planungsansicht auf die Seite „food“, um die Seite in der Entwurfsansicht zu öffnen. Wenn die Seite bereits geöffnet ist, klicken Sie auf die Registerkarte „food“, um sie zu aktivieren. Wählen Sie „Datei“ > „Seitenvorschau in Browser“, um die Seite in einem Browser anzuzeigen.
  4. Klicken Sie auf das Menüelement „Dessert“, um auf der langen Seite zum Abschnitt mit der Dessert-Speisekarte zu springen. Während der Rest der Seitenelemente scrollt, bleiben die drei Social Media-Symbole an ihrer Position rechts auf der Seite, weil sie angeheftet sind.
Fixieren von Objekten am Browserfenster in Adobe Muse-Sites
Fixieren von Objekten am Browserfenster

Fahren Sie mit Kapitel 6 von „Erstellen Ihrer ersten Website in Muse“ fort. In diesem Teil lernen Sie, wie Sätze von Objekten gruppiert werden, sodass sie sich wie ein Element verhalten. Außerdem werden Sie die Seite „Visit“ abschließen, indem Sie eine eingebettete Google Map hinzufügen, die Besuchern die Standorte von Katie's Cafe anzeigt. Und nachdem Sie die Site finalisiert haben, werden Sie sehen, wie einfach es ist, die Site auf einen Hosting-Server (von Business Catalyst) hochzuladen, um sie online zu veröffentlichen, damit Sie Ihre laufende Arbeit mit Ihren Kunden und Kollegen teilen können.

In Kapitel 4 von „Erstellen Ihrer ersten Website mit Muse“ haben Sie gelernt, wie Anker-Tags hinzugefügt und mit Menüelementen in einem manuellen horizontalen Menü-Widget verlinkt werden. Außerdem haben Sie gelernt, wie Elemente an der Seite angeheftet werden, um zu verhindern, dass sie scrollen. Und Sie haben gesehen, wie Links zu Dateien hinzugefügt werden, damit Besucher diese Dateien herunterladen können.

Sie können außerdem lernen, wie Objekte gruppiert und wie gruppierte Objekte auf Seiten eingefügt werden. Außerdem werden Sie mit mehr eingebettetem HTML arbeiten; in diesem Teil werden Sie eine interaktive Google Map zur Seite „Visit“ hinzufügen. Und abschließend werden Sie Ihrer Site den letzten Schliff geben, indem Sie ein Favicon hinzufügen und dann die Test-Site kostenlos auf die für Sie bereitgestellten Hosting-Server hochladen.

Gruppieren von Objekten und Einfügen von Gruppen als eine Einheit

Genau wie InDesign und anderen Layoutprogrammen können Sie mehrere Objekte in einer Gruppe zusammenfassen, sodass sie als eine Einheit behandelt werden. In diesem Abschnitt werden Sie ein Design erstellen, das aus mehreren Elementen (platzierten Bildern und Textrahmen) besteht. Anschließend werden Sie diese Elemente gruppieren, damit Sie sie leicht als ein Element platzieren oder kopieren können. Führen Sie folgende Schritte aus:

  1. Doppelklicken Sie in der Planungsansicht auf die Homepage-Miniatur, um die Seite in der Entwurfsansicht zu öffnen.
  2. Wählen Sie „Datei“ > „Platzieren“. Wählen Sie die Datei namens „panel-open-bottom.png“ im Beispieldateiordner aus. Klicken Sie auf „Öffnen“, um das Dialogfeld „Importieren“ zu schließen, und klicken Sie dann einmal nahe am unteren Rand der Homepage (unter dem Leuchtkasten-Widget und über der Fußzeile), um die Grafik in voller Größe zu platzieren.

Die PNG-Datei wurde auf eine niedrigere Deckkraft gesetzt, damit das gekachelte Hintergrundbild durch das halbtransparente Blumendesign durchscheinen kann.

  1. Wählen Sie erneut „Datei“ > „Platzieren“. Wählen Sie jetzt das Bild namens „spoon-map.png“ aus. Klicken Sie auf „Öffnen“ und klicken Sie dann ein Mal auf das obere mittlere Blütenblatt, um das Bild zu platzieren.
  2. Drücken Sie, während das Bild mit dem Löffel ausgewählt ist, die Wahl- (Mac) bzw. die Alt-Taste (Windows) und halten Sie die Taste gedrückt, um das Bild mit dem Löffel zu duplizieren und das Blütenblatt sofort zur rechten Seite der Mitte zu ziehen. Wiederholen Sie diesen Schritt noch einmal, um das mittlere Bild mit dem Löffel zu duplizieren und die duplizierte Kopie zum Blütenblatt auf der linken Seite zu ziehen. Verwenden Sie das Auswahlwerkzeug, um die drei Löffel wie im folgenden Bild gezeigt zu positionieren.
Positionieren Sie die drei Bilder mit dem Löffel in den oberen drei Blütenblättern des Designs.
Positionieren Sie die drei Bilder mit dem Löffel in den oberen drei Blütenblättern des Designs.

  1. Zeichnen Sie mithilfe des Textwerkzeugs einen Textrahmen im mittleren Blütenblatt und geben Sie den folgenden Text ein:

Katie's Cafe

Noe Valley

123 Elizabeth Street

MON–FRI 6AM–10PM

SAT–SUN 7AM–10PM

  1. Wenden Sie im Textbedienfeld die folgenden Einstellungen zur Formatierung des Textes an:
    • Schrift: Droid Serif (oder eine andere Serifenschrift)
    • Schriftgrad: 14
    • Schriftfarbe: #222222  (in Teil 5 haben Sie diese Farbe in „katieblack“ umbenannt)
    • Schriftausrichtung: Zentriert
    • Zeilenabstand: 120 %
  1. Wählen Sie dann nur die letzten beiden Zeilen (die mit den Wochentagen beginnen) aus und setzen Sie die Schriftfarbe auf Rot (#A6342A).
  2. Wählen Sie den Textrahmen mit dem Auswahlwerkzeug aus. Drücken Sie die Wahl- (Mac) bzw. die Alt-Taste (Windows) und halten Sie die Taste gedrückt, um den Textrahmen zu duplizieren und ihn sofort auf das Blütenblatt auf der rechten Seite, über dem Bild mit dem Löffel, zu ziehen. Wiederholen Sie diesen Schritt noch einmal, um den mittleren Textrahmen zu duplizieren und die duplizierte Kopie zum Blütenblatt auf der linken Seite zu ziehen. Verwenden Sie das Auswahlwerkzeug, um die drei Textrahmen so zu positionieren, dass sie wie im folgenden Bild gezeigt über den drei Löffeln ausgerichtet sind.
Gruppieren von Objekten in Adobe Muse
Positionieren Sie die drei Adressen so, dass sie über den drei Löffeln in den oberen drei Blütenblättern des Designs angezeigt werden.

  1. Wechseln Sie zum Textwerkzeug. Wählen Sie den Text in der linken Adresse aus und ändern Sie ihn zu:

Katie's Cafe

Laurel Heights

800 Spruce Street

MON–FRI 5AM–12AM

SAT–SUN 9AM–1AM

  1. Wählen Sie den Text in der rechten Adresse mit dem Textwerkzeug aus und ändern Sie ihn zu:

Katie's Cafe

Cole Valley

301 Carmel Street

MON–FRI 7AM–10PM

SAT–SUN 9AM–10PM

Das Design ist jetzt fertig. Als Nächstes werden Sie die Elemente auswählen und gruppieren.

  1. Verwenden Sie das Auswahlwerkzeug, um zu klicken und über das gesamte Blumendesign zu ziehen. Achten Sie hierbei darauf, dass sowohl das platzierte Blumenbild als auch die drei Bilder mit dem Löffel und die drei Textrahmen ausgewählt werden. Klicken Sie mit der rechten Maustaste und wählen Sie aus dem angezeigten Menü die Option „Gruppieren“ aus. Alternativ können Sie „Objekt“ > „Gruppieren“ wählen.

Nachdem Sie die Objekte gruppiert haben, zeigt der Auswahlindikator oben links im Steuerungsbedienfeld das Wort „Gruppe“ an.

  1. Kopieren Sie die ausgewählte Gruppe. Klicken Sie auf „Planung“, um zur Planungsansicht zurückzukehren, und doppelklicken Sie dann auf die Miniatur der Seite „Visit“, um die Seite in der Entwurfsansicht zu öffnen. Wählen Sie „Bearbeiten“ > „An Originalposition einfügen“, um die gesamte Elementgruppe in derselben Position zu platzieren.

Wie dieses kurze Beispiel zeigt, sind Gruppen hilfreich, wenn Sie ein Design abgeschlossen haben und mit ihm als ein einzelnes Element arbeiten möchten, um es an einer anderen Stelle auf einer Seite zu positionieren oder es zu kopieren und auf einer anderen Seite einzufügen.

Zusätzlich zur Gruppierung finden Sie evtl. auch die Sperrfunktionen hilfreich, sobald Sie ein Design finalisiert haben. Klicken Sie mit der rechten Maustaste auf eine Gruppe oder einen ausgewählten Satz von Elementen und wählen aus dem angezeigten Kontextmenü die Option „Sperren“, um sie zu sperren. (Alternativ können Sie auch „Objekt“ > „Sperren“ wählen.) Wenn fertige Elemente gesperrt sind, können sie nicht versehentlich auf einer Seite verschoben oder gelöscht werden, da sie nicht mehr ausgewählt werden können. Falls Sie die gesperrten Elemente zu einem späteren Zeitpunkt aktualisieren müssen, wählen Sie „Objekt“ > „Alles auf Seite entsperren“.

Nachdem das Blumendesign am unteren Rand der Seite „Visit“ eingefügt wurde, ist der Seiteninhalt fast vollständig. Im nächsten Abschnitt werden Sie die Seite „Visit“ weiter bearbeiten, um eine interaktive Karten-Schnittstelle hinzufügen, die Kunden hilft, das nächste Cafe zu finden.

Einbetten von Rich-Media-Inhalt zum Hinzufügen von Animation

  1. Doppelklicken Sie in der Planungsansicht auf das Miniaturbild von MasterFlash, um sie zum Bearbeiten in der Entwurfsansicht zu öffnen. Beachten Sie, dass weiterhin das statische Logo vorhanden ist, da Sie zuvor die A-Musterseite dupliziert haben. Mithilfe des statischen Bildes können Sie leichter die Platzierung des Animationsrechtecks bestimmen, denken Sie jedoch daran, das statisch platzierte Logo nach dem Einbetten des Rich-Media-Elements zu löschen.

  2. Wählen Sie „Datei“ > „Platzieren“. Navigieren Sie im Dialogfeld „Importieren“ zum Ordner „Kevins_Koffee_Kart“ und wählen Sie die Datei „logo.swf“ aus.

  3. Platzieren Sie die SWF-Datei in der oberen linken Ecke, d. h. der Position der vorhandenen Logobilddatei.

  4. Nachdem Sie das neue SWF-Fenster ausgerichtet haben, das Sie gerade mit dem älteren statischen Logo platziert haben, löschen Sie das statische Logo, indem Sie es auswählen und die Entf-Taste drücken.

  5. Um zu überprüfen, wie die gesamte Site mit den neuen Änderungen an der Homepage aussehen wird, wählen Sie „Datei“ > „Site-Vorschau in Browser“, um die Anzeige des Logos auf verschiedenen Seiten zu testen. Ohne die Site zu veröffentlichen, können Sie lokal auf Ihrem Computer arbeiten und dann die Site in einem Browser in der Vorschau anzeigen, um über die Site-Navigation die einzelnen Seiten zu durchlaufen. Beachten Sie, dass die Animation (SWF-Datei) auf der Homepage einmal angezeigt wird und dann endet. Wenn Sie auf andere Seiten klicken, wird nur das statische Logo angezeigt.

    Hinweis:

    Wenn Sie „Datei“ > „Seitenvorschau in Browser“ wählen, wird das neue Browserfenster schneller geladen, um die Homepage anzuzeigen, aber es wird nur die aktive Seite (Homepage) in der Vorschau angezeigt. Wählen Sie diese Option, wenn Sie nur eine Seite der Site überprüfen möchten und nicht die gesamte Website.

Verwenden des Abstandbedienfelds

Über das Abstandbedienfeld können Sie Eigenschaften bezüglich Innenabständen und Spalten des CSS nutzen. Der Innenabstand lässt einen Bereich um den Inhalt eines Elements herum (innerhalb des Rahmens) frei. Die Hintergrundfarbe des Elements hat Auswirkungen auf den Innenabstand.

Der Innenabstand oben, rechts, unten und links kann mithilfe verschiedener Eigenschaften unabhängig voneinander geändert werden. Sie können auch alle Innenabstand-Eigenschaften vereinheitlichen, indem Sie sie gleichzeitig bearbeiten.

  1. Wählen Sie in Adobe Muse Fenster > Abstand aus, um das Abstandbedienfeld aufzurufen.
Öffnen Sie das Abstandbedienfeld in Adobe Muse.
Öffnen Sie das Abstandbedienfeld in Adobe Muse.

  1. Geben Sie Werte für die Innenabstand-Eigenschaften für links, rechts, oben und unten an. Wenn Sie unterschiedliche Werte eingeben möchten, heben Sie die Auswahl der Schaltfläche  auf.
Konfigurieren Sie die Innenabstands- und Spalten-Einstellungen im Abstandbedienfeld.
Konfigurieren Sie die Innenabstands- und Spalten-Einstellungen im Abstandbedienfeld.

  1. Sie können auch horizontale und vertikale Spalteneigenschaften angeben.

Skalieren und Drehen von Objekten über das Transformierenbedienfeld

In Adobe Muse können Sie 2D-Transformation auf Objekte anwenden. Sie können Objekte auf X- und Y-Achsen positionieren, skalieren und drehen.

Über den 100 % Breiten-Umschalter im Transformierenbedienfeld können Sie eine Breite von 100 % für Objekte festlegen. Sie können skalierbare Objekte auch so festlegen, dass sie die Breite des Browsers ausnutzen und an Ihren Computerbildschirm angepasst sind.

Gehen Sie wie folgt vor, um Transformationen auf ein ausgewähltes Objekt anzuwenden:

  1. Wählen Sie in Adobe Muse „Fenster“ > „Transformieren“ aus.
Öffnen Sie das Transformierenbedienfeld in Adobe Muse.
Öffnen Sie das Transformierenbedienfeld in Adobe Muse.

  1. Wenden Sie eine der folgenden Transformationen auf das ausgewählte Objekt an:
    • Position: Geben Sie die X- und Y-Werte an, um das Objekt in dem gewünschten Bereich auf der Website zu platzieren.
    • Skalierung: Geben Sie die Werte für Breite und Höhe für das Objekt ein. Sie können das Objekt auch mit einheitlicher Breite und Höhe skalieren, indem Sie auf die Schaltfläche  klicken.
    • Drehung (): Geben Sie den Drehwinkel für das Objekt ein.
    • 100 % Breite (): Sie können das Objekt auf eine Breite von 100 % setzen und es dann entsprechend der Breite des Browsers skalieren.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie