Lesen Sie den Artikel, um Vollbild- und Miniatur-Diashow-Widgets in Adobe Muse hinzuzufügen, zu konfigurieren und zu testen.

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.

Diashow-Widgets in Adobe Muse sind interaktive Widgets, die ausschließlich mit Bildern funktionieren. Wenn Benutzer auf einen Miniatur-Container klicken, wird wie beim Bedienfelder-Widget die entsprechende Hero-Bildversion in einem anderen größeren Container an einer anderen Stelle auf der Seite angezeigt.

Adobe Muse unterstützt die folgenden Arten von Diashow-Widgets:

  • Grundlegend: Dieses Widget besteht aus einem großen Container, in dem Sie Bilder und darunter jeweils eine Beschriftung einfügen können. Die Schaltflächen „Zurück“ und „Weiter“ sowie die Nummer der aktuellen Folie sind ebenfalls im Beschriftungsbereich verfügbar.
  • Leer: Dies ähnelt der Grundlegenden Diashow. Die Container sind in diesem Widget jedoch leer.
  • Vollbild: Dieses Widget wird als Vollbild angezeigt, wenn Sie es auf die Entwurfsarbeitsfläche ziehen. Standardmäßig sind die Schaltflächen „Zurück“ und „Weiter“ sowie die Nummer der aktuellen Folie in einem kleinen Container in der linken oberen Ecke der Seite vorhanden.
  • Leuchtkasten: Dieses Widget blendet den Rest der Seite ab, mit Ausnahme der Diashow bzw. des Galerieelements, das aktiv auf der Seite angezeigt wird. Der Leuchtkasten ist eines der am häufigsten verwendeten Widgets für Diashows; hierbei wird die Aufmerksamkeit des Benutzers sofort auf die aktive Galerie gelenkt.
  • Miniaturen: Dieses Widget ähnelt einem Kompositions-Widget, bei dem links vom Galeriebereich Miniaturen vorhanden sind. Wenn ein Benutzer auf das Miniaturbild klickt, wird das entsprechende Bild im Galeriebereich angezeigt.

Im folgenden Artikel werden Sie eine Fotogalerie erstellen, die mehrere Miniaturbilder entlang dem oberen Rand mit einem einzelnen größeren Bild darunter anzeigt. Über das Optionenbedienfeld können Sie steuern, wie sich die Fotogalerie verhält und wie sie angezeigt wird. Sie können auch Einstellungen im Steuerungsbedienfeld anwenden, um das Erscheinungsbild der Diashow zu gestalten.

Hinzufügen einer Diashow mit einer Breite von 100 %: Erfahren Sie, wie Sie Ihrem Website-Design in Adobe Muse eine Diashow mit einer Breite von 100 % hinzufügen können. Vollbild-Diashows mit einer Breite von 100 % können über die Widgets-Bibliothek erstellt werden.
Danielle Beaumont

Hinzufügen eines Miniatur-Diashow-Widgets zu einer Seite

Diashows können auch direkt zu Seiten hinzugefügt werden, aber in diesem Beispiel werden Sie ein Diashow-Widget „Miniaturen“ im Inhaltsbereich eines Bedienfelder-Widgets mit Registerkarten verschachteln. Führen Sie die folgenden Schritte aus, um Diashows direkt hinzuzufügen:

  1. Öffnen Sie Adobe Muse. Führen Sie im Begrüßungsbildschirm einen der folgenden Schritte aus:

    • Klicken Sie auf „Neu erstellen“, um ein Diashow-Widget zu einer neuen Site hinzuzufügen, die Sie erstellen.
    • Klicken Sie auf „Öffnen“ und öffnen Sie die vorhandene .muse-Datei, zu der Sie das Widget hinzufügen möchten. Doppelklicken und öffnen Sie die Seite, der Sie das Diashow-Widget hinzufügen möchten.
  2. Öffnen Sie das Widgets-Bibliothek-Bedienfeld (indem Sie „Fenster“ > „Widget-Bibliothek“ wählen). Erweitern Sie den Bereich "Diashows". Wählen Sie das gewünschte Widget aus dieser Liste aus. Wählen Sie beispielsweise das Diashow-Widget „Miniaturen“ aus der Liste aus und ziehen Sie es in die Entwurfsansicht.

    Miniatur-Diashow in Adobe Muse, Widgets-Bibliothek
    Ziehen Sie das Diashow-Widget „Miniaturen“ auf die Seite.

    Beachten Sie, dass ein Miniatur-Container auf der linken Seite, ein Container für das Hero-Bild und der Container für die Beschriftung unter dem Bild vorhanden sind.

    Hinweis:

    Um alle standardmäßig in ein Widget eingefügten Inhalte zu löschen, klicken Sie mit der rechten Maustaste auf das Widget und wählen Sie „Widget-Inhalte löschen“.

  3. Um Miniaturbilder zu löschen, wählen Sie den Platzhalterinhalt (den Bildrahmen und den Textrahmen im Inhaltsbereich) aus und löschen Sie ihn.

Konfigurieren des Miniatur-Diashow-Widgets über das Optionenbedienfeld

Sie können die Einstellungen eines Diashow-Widgets mithilfe des zugehörigen Optionenbedienfelds konfigurieren. Im Folgenden erfahren Sie, wie Sie automatisches Abspielen, Übergangseffekte, Wischen für Touchscreen-Geräte usw. aktivieren.

  1. Wählen Sie Ihr Widget aus und klicken Sie auf den blauen Pfeil, um das Optionenbedienfeld aufzurufen. In diesem Beispiel benötigen Sie die die Pfeilbuttons „Weiter“ und „Zurück“ nicht. Entfernen Sie das Häkchen bei den Optionen „Weiter“ und „Zurück“, um sie zu deaktivieren. Wenn Sie die Kontrollkästchen deaktivieren, verschwinden die Schaltflächen.

    Deaktivieren Sie die Optionen „Beschriftungen“ und „Zähler“, sodass nur die Miniatur-Auslöser-Buttons und der größere Ziel-Container übrig bleiben. Ändern Sie die Optionen so ab, dass sie den unten aufgeführten Einstellungen entsprechen:

    • Neue Hero-Grafik: Rahmen proportional füllen
    • Neue Miniatur: Rahmen proportional füllen
    • Übergang: Verblassen
    • Übergangsgeschwindigkeit: 0,5 Sekunden
    • Automatisch abspielen: Nicht aktiviert
    • Fortsetzen nach: Aktiviert
    • Einmal abspielen: Nicht aktiviert
    • Unsortiert: Nicht aktiviert
    • Wischen aktivieren: Aktiviert
    • Leuchtkasten: Aktiviert
    • Vollbild: Aktiviert
    • Auto-Leuchtkasten: Nicht aktiviert
    • Freiform-Miniaturbilder: Aktiviert
    • Erste: Nicht aktiviert
    • Zurück: Aktiviert
    • Weiter: Aktiviert
    • Letzte: Nicht aktiviert
    • Beschriftungen:Aktiviert
    • Zähler: Aktiviert
    • Schließen-Schaltfläche: Nicht aktiviert
    • Miniaturen: Aktiviert
    • Leuchtkasten-Teile bei Bearbeitung anzeigen: Aktiviert
    • Gemeinsam bearbeiten: Aktiviert
    Bildschirmpräsentations-Options-Bedienfeld
    Aktualisieren Sie die Einstellungen für das Diashow-Widget „Miniaturen“ im Optionenbedienfeld.

  2. Verschiedene Widgets haben verschiedene Optionen, und einige sind komplexer als andere. Nehmen Sie sich einen Moment Zeit und schauen Sie sich die verfügbaren Menüoptionen an. Hier ist eine kurze Übersicht:

    Bilder hinzufügen: Klicken Sie auf das Ordnersymbol, um Bilder auszuwählen, die angezeigt werden sollen.

    Neue Hero-Grafik: Definiert, wie der größere Fotoinhalt im Ziel-Container angezeigt wird.

    • Inhalt proportional anpassen: Die Fotobilddatei behält ihre Originalgröße, selbst wenn diese Größe nicht dem Ziel-Container entspricht; ein Teil des Containers kann leer sein, wenn das Bild nicht in ihn hineinpasst.
    • Rahmen proportional füllen: Die Fotobilddatei wird skaliert, um die Proportionen des Ziel-Containers auszufüllen; Teile des Fotobilds können abgeschnitten werden.

    Neue Miniatur: Definiert, wie der kleinere Miniaturfotoinhalt im Auslöser-Container angezeigt wird.

    • Inhalt proportional anpassen: Die Fotobilddatei behält ihre Originalgröße, selbst wenn diese Größe nicht dem Ziel-Container entspricht; ein Teil des Containers kann leer sein, wenn das Bild nicht in ihn hineinpasst.
    • Rahmen proportional füllen: Die Fotobilddatei wird skaliert, um die Proportionen des Ziel-Containers auszufüllen; Teile des Fotobilds können abgeschnitten werden.

    Übergang: Die Animationsmethode, die verwendet wird, wenn der Inhalt eines Ziel-Containers gerade durch einen anderen Ziel-Container ersetzt wird. Diese werden auch für Touchscreen aktiviert; wenn Sie also Sites für mobile Geräte erstellen, können Besucher ihren Bildschirm wischen, um den Übergang zu sehen, während das nächste Inhaltselement erscheint.

    • Verblassen: Die Deckkraft des neuen Containers erhöht sich, wenn die Deckkraft des vorhandenen Containers abnimmt.
    • Horizontal: Der neue Container wird von der Seite horizontal hineingeschoben und wischt über den vorhandenen Container.
    • Vertikal: Der neue Container wird von der Seite vertikal hineingeschoben und wischt über den vorhandenen Container.

    Übergangsgeschwindigkeit: Die Zeit in Sekunden, die es dauert, um die Animation abzuspielen.

    Automatisch abspielen: Wenn diese Option aktiviert ist, wird die Diashow automatisch abgespielt anstatt ein interaktives Erlebnis zu liefern (bei dem der Besucher auf jeden Auslöser klicken muss, um das zugehörige Ziel in der Sequenz anzuzeigen). Legen Sie die Anzahl der Sekunden fest, für die jedes Bild angezeigt werden soll, bevor zum nächsten Bild übergegangen wird.

    Unsortiert: Wenn diese Option aktiviert ist, werden die Bilder in zufälliger Reihenfolge angezeigt, anstatt dass sequentiell durch die Miniaturen gegangen wird.

    Leuchtkasten: Wenn diese Option aktiviert ist, dunkelt die Diashow den Rest der Seite mit einer Überlagerung ab, wenn der Inhalt des Ziel-Containers angezeigt wird.  Wenn das Leuchtkasten-Fenster geschlossen wird, wird wieder die gesamte Seite angezeigt.

    Wischen aktivieren: Wenn diese Option aktiviert ist und die Site ein Tablet- oder ein Smartphonelayout enthält, um Webinhalt auf einem mobilen Gerät anzuzeigen, unterstützen die interaktiven Teile des Widgets Touchscreen-Gesten.

    Bereich „Teile“:

    • Erste: Wenn diese Option aktiviert ist, wird die Navigationsschaltfläche „Erste“ angezeigt.
    • Zurück: Wenn diese Option aktiviert ist, wird die Navigationsschaltfläche „Zurück“ angezeigt.
    • Weiter: Wenn diese Option aktiviert ist, wird die Navigationsschaltfläche „Weiter“ angezeigt.
    • Letzte: Wenn diese Option aktiviert ist, wird die Navigationsschaltfläche „Letzte“ angezeigt.
    • Beschriftungen: Wenn diese Option aktiviert ist, werden die Fotogalerie-Beschriftungen angezeigt.
    • Zähler: Wenn diese Option aktiviert ist, wird der Fotogalerie-Zähler angezeigt.
    • Schließen-Schaltfläche: Wenn diese Option aktiviert ist, wird die Schließen-Schaltfläche angezeigt.

    Miniaturen: Wenn diese Option aktiviert ist, werden die Miniatur-Auslöser-Buttons angezeigt.

    Bereich „Bearbeitung“:

    • Leuchtkasten-Teile bei Bearbeitung anzeigen: Wenn die Option „Leuchtkasten“ aktiviert ist, wird jeder Zielbereich standardmäßig nur angezeigt, wenn der entsprechende Auslöser in der Seiten ausgewählt wird. Wenn Sie das Layout entwerfen, kann es hilfreich sein, diese Option zu aktivieren, um während Ihrer Arbeit die Ziele zu sehen. Diese Einstellung hat keinen Einfluss auf die Anzeige der Diashow, wenn die Seite in einem Browser in der Vorschau bzw. direkt in einem Browser angezeigt wird. Wenn die Option „Leuchtkasten“ nicht aktiviert ist, ist diese Option abgeblendet. 

    Beachten Sie, dass die Option „Leuchtkasten-Teile bei Bearbeitung anzeigen“ ist nur aktiviert, wenn Sie das Leuchtkasten-Diashow-Widget auswählen.

    • Gemeinsam bearbeiten: Diese Option ist standardmäßig aktiviert, um eine schnellere Bearbeitung von Widgets zu ermöglichen. Lassen Sie diese Option aktiviert, wenn das Erscheinungsbild für alle Auslöser gleich sein soll; hierdurch wird jede Änderung, die an einem Element vorgenommen wird, automatisch auf die anderen angewendet.

    Klicken Sie abschließend auf den Seitenbereich außerhalb des Optionenmenüs, um das Menü zu schließen.

    Hinweis:

    Die Optionen „Leuchtkasten“ und „Vollbildmodus“ sind für Vollbild-Diashows deaktiviert.

    Sie können die Option „Vollbildmodus“ für jedes Diashow-Widget aktivieren, mit Ausnahme des Vollbildmodus-Widgets.

Skalieren und Ausrichten der Elemente eines Miniatur-Diashow-Widgets

  1. Klicken Sie auf das Diashow-Widget und wählen Sie es aus. Verwenden Sie das Auswahlwerkzeug, um die Griffe ziehen und das gesamte Diashow-Widget „Miniaturen“ zu skalieren, bis es ca. 790 Pixel breit und 490 Pixel hoch ist. Sie können die Maße im Transformierenbedienfeld oder in den Transformierenfeldern im Steuerungsbedienfeld überprüfen.

  2. Klicken Sie, während die Diashow noch ausgewählt ist, erneut auf den Miniatur-Container, um den Container auszuwählen, der die drei Miniaturen enthält. Verwenden Sie die seitlichen Transformationsgriffe, um den Container zu verbreitern, und verwenden Sie dann das Auswahlwerkzeug, um die Miniaturen nach oben zu ziehen, bis er oben positioniert ist und vertikal an der Mitte des größeren Hero-Bild-Containers ausgerichtet ist.

    Container mit fünf Miniaturen
    Wählen Sie den Miniatur-Auslöser-Container aus und positionieren Sie ihn über dem größeren Ziel-Container.

    Der Miniatur-Container ist an der Mitte des Hero-Bild-Containers ausgerichtet, wenn vorübergehend eine blaue intelligente Hilfslinie angezeigt wird, während Sie das Element ziehen.

    Führen Sie folgende Schritte aus, um die Grafiken zur Fotogalerie hinzuzufügen, während die entsprechenden Miniatur- und Hero-Container automatisch generiert werden:

  3. Klicken Sie auf die blaue Pfeilschaltfläche, um das Optionenbedienfeld zu öffnen. Klicken Sie auf das Ordnersymbol neben den Wörtern „Bilder hinzufügen…“ und navigieren Sie zum Ordner, in dem Sie Ihre Dateien gespeichert haben.

  4. Wählen Sie die erforderlichen Bilddateien aus. Klicken Sie auf „Öffnen“, um das Dialogfeld „Importieren“ zu schließen.

    Dialogfeld „Importieren“
    Wählen Sie den Satz der fünf Galeriefotos aus, die sich im Unterordner „gallery“ befinden.

    Wenn Sie mehrere Bilddateien auswählen, laden Sie das Diashow-Widget „Miniaturen“. Dieser Methode ermöglicht es Ihnen, mehrere Bilddateien auszuwählen und einen Miniatur-Container-Button zu generieren, der jeder neuen größeren Bilddatei im Hero-Bild-Container entspricht.

    Die neuen Bilder werden den vorhandenen Miniatur-Buttons hinzugefügt.

  5. Doppelklicken Sie auf und wählen Sie das beim Hinzufügen der Diashow standardmäßig angezeigte Miniaturbild aus. Drücken Sie die Löschtaste (Mac) bzw. die Rücktaste (Windows), um die jeweils ausgewählten Miniaturbilder zu entfernen, bis nur noch die neuen Miniaturen übrig sind.

    Diashow-Miniaturbildern staffeln und -bild
    Erweitern Sie jede der standardmäßigen Schwarzweiß-Miniaturen, wählen Sie sie aus und drücken Sie die Rück- bzw. die Löschtaste, um sie nacheinander zu entfernen.

    Achten Sie darauf, dass Sie nicht den gesamten Satz an Miniaturen löschen; sollte dies passieren, machen Sie den letzten Vorgang rückgängig, indem Sie „Bearbeiten“ > „Rückgängig“ wählen und klicken Sie dann auf jede Miniatur (der Auswahlindikator zeigt das Wort „Miniatur“ an), bevor Sie die Rück- bzw. die Löschtaste drücken.

  6. Wählen Sie den Container aus, aus, der den Satz der fünf Miniaturbilder enthält. Verwenden Sie die Transformationsgriffe, um den Container so zu skalieren, dass die verbleibenden Miniaturen über dem Hero-Bild-Container zentriert sind.

    Diashow-Miniaturbildern staffeln und -bild
    Skalieren Sie den Miniaturbild-Container so, dass er sich in der Mitte des Hero-Bilds befindet.

Verwenden responsiver Diashow-Widgets

Diashows sind standardmäßig responsiv oder fließend. Gehen Sie wie folgt vor, um ein responsives Diashow-Widget in Ihrer Adobe Muse-Website zu verwenden:

  • Wenn Sie eine neue Site erstellen, öffnen Sie die neue Site und ziehen und platzieren Sie das Diashow-Widget aus dem Bedienfeld „Widgets-Bibliothek“. Beachten Sie, dass das Widget standardmäßig responsiv ist.
  • Wenn Sie bereits über eine .muse-Datei verfügen, öffnen Sie diese Datei mit der neuesten Version von Adobe Muse. Wählen Sie das Widget aus. Um das Widget responsiv zu machen, wählen Sie die Elemente im Widget aus und wählen Sie entweder „Responsive Breite und Höhe“ oder „Responsive Breite“ in der Drop-down-Liste „Skalieren“ im Kontextmenü.
Auswählen der Option „Skalieren“, um das Diashow-Widget responsiv zu machen
Auswählen der Option „Skalieren“, um das Diashow-Widget responsiv zu machen

Wenn Sie das Diashow-Widget in eine responsive Website einfügen, müssen Sie Position und Größe des Widgets über alle Ihre Haltepunkte überprüfen. Sie können den Inhalt und die Größe der einzelnen Elemente in einem Diashow-Widget ändern. Sie können auch responsive Einstellungen für einzelne Elemente wie den Button „Zurück“, den Button „Weiter“ und Beschriftungen über verschiedene Haltepunkte hinweg aktivieren.

Testen Sie, wie das Miniatur-Diashow-Widget angezeigt wird

Nachdem Sie die Diashow-Elemente neu positioniert und die Platzhalterminiaturbilder entfernt haben, können Sie die Diashow testen, um das Ergebnis zu prüfen.

  1. Testen Sie die Fotogalerie zunächst in der Entwurfsansicht, indem Sie auf die Miniatur-Buttons am oberen Rand klicken und jede zugehörige Hero-Bild-Anzeige im größeren Container darunter sehen.

  2. Klicken Sie auf „Vorschau“, um zu sehen, wie die Galerie in einem Browser angezeigt wird. Interagieren Sie mit der Diashow, um zu sehen, wie die größeren Bilder angezeigt werden, wenn Sie auf die entsprechende Miniatur klicken.

    Testen der Miniatur und der Diashow
    Positionieren Sie die Galerie so, dass sie im Inhaltsbereich-Container des Bedienfelder-Widgets mit Registerkarten zentriert ist.

  3. Wählen Sie „Datei“ > „Seitenvorschau in Browser“, um die Seite „about“ in Ihrem Standard-Browser anzuzeigen.

    Ändern Sie die Größe des Browsers und zeigen Sie eine Vorschau des Diashow-Widgets mit unterschiedlichen Bildschirmgrößen an. Sie können sehen, dass die Diashow-Widgets standardmäßig responsiv sind. Das bedeutet, dass sie ihre Größe ändern und sich ans Bildschirmformat anpassen. 

    Sie können auch den Regler in der Entwurfsansicht verwenden, um eine Vorschau der Widgets anzuzeigen. Wenn Sie das Widget an einem beliebigen Punkt ändern oder neu positionieren möchten, fügen Sie einen Haltepunkt ein und richten Sie das Widget neu aus. 

  4. Testen Sie die Funktion des mit Bedienfelder-Widgets mit Registerkarten. Klicken Sie auf die Registerkarten, um den entsprechenden Inhalt in den Inhaltsbereich-Containern anzuzeigen. Testen Sie dann die Diashow in der Registerkarte „Gallery“, indem Sie auf die Miniatur-Buttons klicken, um die entsprechenden größeren Hero-Bilder anzuzeigen.

Erstellen einer Diashow mithilfe des Diashow-Widgets

Das Diashow-Widget ist eine andere Site-Funktion, die Sie Ihren Seiten hinzufügen können. Sie können eine Diashow einrichten, bei der die Besucher auf Miniaturen klicken müssen, um eine größere Version des Fotos anzuzeigen, oder Sie können Diashows erstellen, die automatisch abgespielt werden, wenn die Seite geladen wird. Automatisch abspielbare Diashows sind eine hervorragende Möglichkeit, um Ihrer Site überzeugenden Inhalt hinzuzufügen und um eine Fotoreihe zu präsentieren. Sie können festlegen, wie die Diashow abgespielt wird, indem Sie die Übergangsart festlegen, um die Animation der Fotos zu bestimmen.

Im folgenden Unterabschnitt fügen Sie eine automatisch abspielbare Diashow auf der Homepage der Website ein.

Doppelklicken Sie in der Planungsansicht auf die Miniaturansicht der Homepage, um sie für die Bearbeitung in der Entwurfsansicht zu öffnen.

Konfigurieren eines Diashow-Widgets für die automatische Wiedergabe

Führen Sie folgende Schritte aus, um eine Präsentation zu erstellen, bei der eine Gruppe von Bildern durchlaufen wird:

  1. Klicken Sie in der Widgets-Bibliothek auf „Diashows“.

  2. Wählen Sie das Widget „Grundlegend“ aus und ziehen Sie es auf die Seite.

  3. Standardmäßig enthält das Grundlegende-Diashow-Widget ein dunkelgraues Rechteck (Bildplatzhalter), eine Platzhalterbeschriftung, die Bildnummer (1 - 1) und zwei Pfeilschaltflächen („Weiter“ und „Zurück“), auf die Besucher klicken können, um durch die Bilder zu navigieren.

  4. Klicken Sie auf den blauen Pfeil, um das Menü „Optionen“ aufzurufen. Überprüfen und legen Sie die folgenden Optionen fest:

    • Übergang: Verblassen
    • Automatisch abspielen: Langsam
    • Neue Hero-Grafik: Rahmen proportional füllen
    • Neue Miniatur: Rahmen proportional füllen
    • Leuchtkasten: Deaktiviert
    • Teile: Heben Sie die Auswahl aller Optionen auf, um die Beschriftungen, den Zähler sowie die Schaltflächen „Weiter“ und „Zurück“ auszublenden.

    Hinweis:

    Diese Diashow wird automatisch und ohne Besucherinteraktion wiedergegeben, wenn die Seite geladen wird. Wenn Sie eine Diashow erstellen möchten, die durch die Mausklicks eines Besuchers gesteuert wird, setzen Sie die Option „Automatisch abspielen“ auf „Ohne“ und behalten Sie die Häkchen für „Weiter“ und „Zurück“ im Bereich „Teile“ des Menüs „Optionen“ bei.

  5. Klicken Sie auf eine Stelle außerhalb des Optionsmenüs, um es zu schließen. Beachten Sie, dass nach diesen Änderungen nur die dunkelgrauen Rechtecke sichtbar bleiben. Sie können jederzeit die Konfiguration der Widgets ändern, indem Sie die Einstellungen im Optionsmenü ändern.

  6. Doppelklicken Sie auf und wählen Sie den Bilderrahmen (das dunkelgraue Rechteck) und ziehen Sie anschließend die Seitengriffe, um die Diashow auf die gesamte Breite der Seite zu erweitern.

    Bild der Diashow-Bild
    Ziehen Sie die Seitengriffe des Bilderrahmens der Diashow, um sie an die Größe der Seite anzupassen.

  7. Verwenden Sie die Nach-oben- und Nach-unten-Pfeile, um die Höhe des Bilderrahmens an die Abmessungen der Homepage anzupassen. Ziehen Sie im unteren Bereich den Bilderrahmen, bis er direkt über dem Bild mit den Zick-Zack-Kacheln ist, das am oberen Rand der Fußzeile angezeigt wird. Im Moment ist es in Ordnung, dass der dunkelgraue Platzhalter das braune Tropfenbild auf der rechten Seite der Navigationsleiste überlagert.

  8. Klicken Sie auf den blauen Pfeil, um das Optionsmenü erneut aufzurufen. Klicken Sie dieses Mal auf das Ordnersymbol oben neben dem Text „Bilder hinzufügen“.

  9. Navigieren Sie im Dialogfeld „Importieren“ zum Ordner mit Ihren Elementen und öffnen Sie die Elemente. Klicken Sie auf „Auswählen“, um die Bilder der Diashow hinzuzufügen.

  10. Klicken Sie auf „Vorschau“, um die Diashow abzuspielen. Es wurde eine langsame Geschwindigkeit für die automatische Wiedergabe festgelegt. Sie können diese Einstellung jedoch im Optionsmenü ändern, wenn die Bilder schneller durchlaufen werden sollen. Beachten Sie, dass nach der Anzeige des letzten Fotos die Diashow in einer Schleife wieder mit der Wiedergabe des ersten Bildes im Satz beginnt. Die Diashow wird in einer Endlosschleife abgespielt, wenn die automatische Wiedergabe aktiviert ist.

An diesem Punkt ist die Diashow fertig. Wenn Sie jedoch den Tropfen auf der rechten Seite der Navigationsleiste korrigieren möchten, gibt es eine weitere Möglichkeit.

  1. Doppelklicken Sie in der Planungsansicht auf das Miniaturbild der A-Musterseite, um sie in der Entwurfsansicht zu öffnen.

  2. Verwenden Sie das Auswahlwerkzeug, um den braunen Tropfen im rechten oberen Bereich der Navigationsgrafik auszuwählen.

  3. Klicken Sie mit der rechten Maustaste auf das Tropfenbild und wählen·Sie·im·Kontextmenü·die·Option·„Anordnen“„In den Vordergrund“ aus.

  4. Klicken Sie auf das „X“ der Registerkarte „A-Musterseite“, um sie zu schließen. Öffnen Sie die Seite, der Sie das Widget „Grundlegend“ hinzugefügt haben. Klicken Sie auf „Vorschau“ und beachten Sie, dass das Tropfen-Bild jetzt über der automatisch abgespielten Diashow angezeigt wird. Kehren Sie nach Überprüfen der Diashow zur Entwurfsansicht zurück.

    Hinweis:

    Da die Navigationsleiste auf der A-Musterseite erstellt wurde, ist es notwendig für alle Änderungen, die Sie vornehmen, um die Navigation (und andere allgemeine Elemente) zu steuern, die A-Musterseite in der Entwurfsansicht zu öffnen, um sie zu bearbeiten. Obwohl Sie die Elemente einer Musterseite auf den Seiten sehen können, die Sie bearbeiten, können Sie den Inhalt der Kopf- und Fußzeilen auf den anderen Seiten der Site nicht bearbeiten.

Hinzufügen von Vollbild-Diashow-Widgets

Sie können Diashows einrichten, die mit den Vollbild-Diashow-Widget in Vollbild anzeigen. Wenn ein Besucher auf die Vollbild-Diashow klickt, wird der Inhalt so skaliert, dass das gesamte Browserfenster des Computers oder Gerätebildschirms gefüllt wird und vorübergehend der restliche Inhalt der Site verdeckt wird. Falls erwünscht kann die Diashow für automatischen Ablauf eingerichtet werden, sodass sie beginnt, durch die Bilder zu blättern, wenn die Seite geladen wird. Besucher können die Diashow beenden, indem sie die Esc-Taste drücken.

Führen Sie folgende Schritte aus, um einer Site ein Vollbild-Diashow-Widget hinzuzufügen:

  1. Starten Sie Adobe Muse. Doppelklicken Sie auf eine Seite, um sie in der Entwurfsansicht zu öffnen.

  2. Wählen Sie „Fenster“ > „Widgets-Bibliothek“, um auf die Widgets-Bibliothek zuzugreifen, oder klicken Sie auf die Registerkarte „Widget-Bibliothek“, um sie im Bedienfeldsatz zu aktivieren.

  3. Erweitern Sie den Bereich „Diashows“ in der Liste der Widgets. Wählen Sie im Bereich „Diashows“ das Widget mit dem Namen „Vollbild“ aus.

    Widgets-Bibliothek
    Navigieren Sie zu dem Vollbild-Diashow-Widget in der Widgets-Bibliothek und wählen Sie es aus.

Konfigurieren von Vollbild-Diashow-Widgets

Das Vollbild-Diashow-Widget verhält sich anders als andere Widgets in Adobe Muse. Nehmen Sie sich einen Moment Zeit, um zu sehen, wie es funktioniert.

  1. Ziehen Sie das Vollbild-Diashow-Widget von der Widgets-Bibliothek auf die Seite.

    Beachten Sie, dass der Standardinhalt so skaliert wird, dass er an die Höhe und Breite des gesamten Browserfensters angepasst wird.

    Vollbild-Diashow-Widget
    Das Vollbild-Diashow-Widget wird erweitert, um den sichtbaren Bereich der Site abzudecken, und füllt das Browserfenster.

    Wenn Sie das Vollbild-Diashow-Widget hinzufügen, werden standardmäßig die Schaltflächen „Zurück“, „Weiter“ und ein Zählfeld in der rechten oberen Ecke angezeigt.

  2. Klicken Sie auf den blauen Pfeil, um die Einstellungen im Optionsbedienfeld zu überprüfen.

    Bildschirmpräsentations-Options-Bedienfeld
    Das Optionsbedienfeld zeigt die Standardeinstellungen an, die auf das Vollbild-Diashow-Widget angewendet werden.

    Die Option „Rahmen proportional füllen“ wird automatisch auf die Bilder „Neue Hero-Grafik“ (große Bilder) und „Neue Miniatur“ angewendet, um die Vollbildansicht zu vereinfachen.

  3. Wählen Sie die Übergangsart, die Sie anwenden möchten. Verwenden Sie das Menü „Übergang“, um zwischen „Verblassen“, „Horizontal“ oder „Vertikal“ zu wählen. Standardmäßig wird die Übergangsgeschwindigkeit auf 0,5 Sekunden eingestellt, Sie können diese Geschwindigkeit jedoch nach Belieben einstellen.

    Wenn automatische Wiedergabe aktiviert ist, startet die Diashow, nachdem die Seite geladen wurde, und durchläuft den Inhalt basierend auf der Anzahl der von Ihnen eingestellten Sekundenzahl. Standardmäßig wird jedes Bild für 3,5 Sekunden angezeigt, wenn die automatische Wiedergabe aktiviert ist.

    Beim Konfigurieren des Vollbild-Diashow-Widget ist es üblich, dass die Schaltflächen „Weiter“ und „Zurück“ zur Navigation aktiviert werden, sodass die Miniaturbilder standardmäßig ausgeblendet werden. Sie können jedoch die Option „Miniaturbilder“ aktivieren, wenn Sie möchten, dass diese über dem Haupt-Diashowbild angezeigt werden sollen.

    Wenn die Miniaturbilder ausgeblendet werden, stellen Sie sicher, dass die Bereiche „Weiter“ und „Zurück“ aktiviert bleiben. Der Zähler ist optional – er hilft Besuchern, zu verstehen, welches Bild im Satz gerade angezeigt wird.

  4. Wenn Sie die Schnittstelle „Zurück“, „Weiter“·und „Zähler“ in einem bestimmten Teil der Seite anzeigen möchten, verwenden Sie das Auswahlwerkzeug, um sie auf die gewünschte Position zu verschieben und verankern Sie die Steuerelemente dann. Wenn Sie auch die Miniaturbilder an derselben Position auf der Seite beibehalten möchten, positionieren Sie den Miniaturbildsatz und verankern Sie ihn ebenfalls an seinem Platz. Wenn Sie die Schnittstelle „Zurück“, „Weiter“·und „Zähler“ in einem bestimmten Teil der Seite anzeigen möchten, verwenden Sie das Auswahlwerkzeug, um sie auf die gewünschte Position zu verschieben und verankern Sie die Steuerelemente dann. Wenn Sie auch die Miniaturbilder an derselben Position auf der Seite beibehalten möchten, positionieren Sie den Miniaturbildsatz und verankern Sie ihn ebenfalls an seinem Platz.

    Sie können die Einstellungen für Verankerung und Skalierung über unterschiedliche Haltepunkte hinweg ändern, wenn Sie dieses Widget in eine responsive Website einfügen.

Hinzufügen von Bildern zu Vollbild-Diashows

Als Nächstes fügen Sie dem Vollbild-Diashow-Widget Bilder hinzu. Führen Sie folgende Schritte aus:

  1. Wählen Sie „Datei“ > „Platzieren“ aus.

  2. Klicken Sie bei gedrückter Umschalttaste in das angezeigte Importfenster, um mehrerer zusammenhängender Bilddateien auf Ihrem Computer auszuwählen. Oder wenn Sie es bevorzugen, halten Sie die Befehlstaste (Mac) oder Steuerungstaste (Windows) gedrückt und wählen Sie mehrere nicht aufeinander folgende Bilddateien aus einem Ordner mit Elementen aus.

  3. Klicken Sie auf „Öffnen“, um die ausgewählten Dateien in das Platzierungswerkzeug zu laden.

    Hinweis:

    Selbst wenn die Bilder, die Sie ausgewählt haben, verschiedene Abmessungen und Seitenverhältnisse besitzen, werden sie von der Option „Rahmen proportional füllen“ entsprechend skaliert, um genau in die Abmessungen der Seite zu passen.

  4. Klicken Sie einmal auf die Diashow, um die ausgewählten Bilddateien hinzuzufügen. Beachten Sie, dass die Standardbilder der Diashow automatisch gelöscht werden, wenn Sie neue Bilder hinzufügen.

  5. Wählen Sie „Datei“ > „Seitenvorschau in Browser“. Ändern Sie das Browserfenster und beachten Sie, wie der Inhalt der Diashow neu skaliert und zugeschnitten wird, um das gesamte Browserfenster zu füllen. Klicken Sie auf die Schaltflächen „Weiter“ und „Zurück“, um durch die Bilderserie zu blättern, oder lassen Sie einfach die Bilder wiedergeben, wenn die automatische Wiedergabe aktiviert ist.

  6. Schließen Sie das Browserfenster und kehren Sie zu Adobe Muse zurück. 

Konfigurieren von Freiform-Miniaturen in Diashow-Widgets

Die Option „Freiform-Miniaturbild“ bietet vollständige Kontrolle darüber, wie die Miniaturbilder in einer Diashow angezeigt werden. Anstatt die Miniaturen in einer Zeile oder einem Satz von Zeilen auszurichten, können Sie jedes Miniaturbild an einer beliebigen Stelle positionieren.

  1. Öffnen Sie in der Designansicht die Widgets-Bibliothek und erweitern Sie den Diashow-Bereich. Ziehen Sie eines der Diashow-Widgets zu einer Seite.

  2. Doppelklicken Sie auf und wählen Sie das Miniaturbild aus, während die gesamte Seite ausgewählt ist. Sie können sehen, welches Element ausgewählt wird, indem Sie den Auswahlindikator in der linken oberen Ecke des Steuerungsbedienfelds überprüfen.

    Thumbnail-Container
    Ein Begrenzungsrahmen umschließt den Miniaturbild-Container, während er ausgewählt ist.

    Standardmäßig werden die Miniaturbilder, die in Diashow-Widgets angezeigt werden, in einem Container mit dem Namen „Miniaturbild-Container“ gespeichert. Dieser äußere Container stellt sicher, dass sich die Miniaturbilder in geraden Linien oder Zeilen ausrichten, je nachdem wie Sie den äußeren Container skalieren. Der Satz von Miniaturbildern ist für alle Diashows mit aktivierten Miniaturbildern in einem Miniaturbild-Container verschachtelt, bis Sie die Option „Freiform-Miniaturbilder“ aktivieren.

Konfigurieren der Anzeigeeinstellungen für Freiform-Miniaturbilder

Wenn Sie es vorziehen, die Miniaturbilder in zufälligen oder nicht ausgerichteten Positionen anzuzeigen, können Sie den äußeren Container löschen und jedes Miniaturbild an der gewünschten Position auf der Seite platzieren. Führen Sie folgende Schritte aus:

  1. Während das Diashow-Widget ausgewählt ist, klicken Sie auf den blauen Pfeil, um das Menü „Optionen“ aufzurufen.

  2. Aktivieren Sie das Kontrollkästchen neben der Option: Freiform-Miniaturbilder. Der Begrenzungsrahmen, der den Miniaturbild-Container in der Designansicht umgibt, wird sofort ausgeblendet und der Auswahlindikator zeigt folgendes Wort an: Diashow.

    Miniatur-Container-Optionenfenster
    Durch Aktivierung der Option „Freiform-Miniaturbilder“ wird der Container gelöscht, der die Miniaturbilder umgibt.

  3. Klicken Sie auf eine beliebige andere Stelle der Seite, um das Optionenmenü zu schließen.

    Nachdem Sie den äußeren Container für die Miniaturbilder gelöscht haben, können Sie jedes Miniaturbild ändern, um es Ihrem Seitendesign anzupassen.

  4. Verwenden Sie das Auswahlwerkzeug, um ein Miniaturbild auszuwählen. Während es ausgewählt ist, zeigt der Auswahlindikator folgendes Wort an: Miniaturbild. Verschieben Sie das gewählte Miniaturbild auf die gewünschte Position. Wiederholen Sie diesen Schritt, um alle Miniaturbilder neu zu positionieren. Wenn Sie möchten, dass jedes Miniaturbild an Ort und Stelle bleiben soll, wenn der Browser einen Bildlauf durchführt oder skaliert wird, können Sie jedes Miniaturbild verankern.

    Hinweis:

    Wenn Sie die Miniaturbild-Container skalieren möchten, um ihnen unterschiedliche Abmessungen zu geben, deaktivieren Sie die Option „Gemeinsam bearbeiten“ im Menü „Optionen“ und verwenden Sie dann das Auswahlwerkzeug, um die Ecken jedes Miniaturbilds einzeln zu ziehen, um es wie gewünscht zu skalieren.

    In einer responsiven Website können Sie die Miniaturen auch neu anordnen, skalieren und ihre Verankerungsoptionen konfigurieren.

  5. Wählen Sie „Datei“ > „Seitenvorschau in Browser“. Die Miniaturbilder der Diashow sind einzeln auf der Seite verteilt. Klicken Sie auf ein Miniaturbild, um das dazugehörige Bild in der Diashow anzuzeigen.

  6. Schließen Sie den Browser und kehren Sie zu Adobe Muse zurück.

Einrichten der Anzeigeoption „Leuchtkasten“ für Diashow-Widgets

Wenn Inhalt in einem Leuchtkasten angezeigt wird, bedeutet dies, dass ein modales Fenster den Fokus erhält und seinen Inhalt hervorgehoben wird, während die restliche Seite abgedunkelt wird. Besucher interagieren mit dem Leuchtkasten, indem Sie auf ein Miniaturbild oder auf die Schaltfläche „Weiter“ bzw. „Zurück“ klicken. Um den Leuchtkasten zu beenden und zur normalen Site-Ansicht zurückzukehren, klicken Besucher auf die Schaltfläche „Schließen“ oder drücken die Esc-Taste.

Alle Diashow-Widgets in Adobe Muse bieten eine Leuchtkasten-Option. Zusätzlich wird ein Widget im Diashow-Bereich für die Verwendung des Leuchtkasten-Verhaltens vorkonfiguriert. Das Leuchtkasten-Diashow-Widget hat die Option „Leuchtkasten“ standardmäßig aktiviert.

Um eine Diashow zu erstellen, die die Bilder in einem Leuchtkasten anzeigt, führen Sie die folgenden Schritte aus:

  1. Erweitern Sie in der Designansicht den Diashow-Bereich in der Widgets-Bibliothek. Ziehen Sie eines der Diashow-Widgets zu einer Seite.

  2. Suchen Sie im Menü „Optionen“ die Option „Leuchtkasten“ im Layout-Bereich und vergewissern Sie sich, dass sie ausgewählt ist.

    Leuchtkasten
    Aktivieren Sie das Kontrollkästchen neben der Option „Leuchtkasten“, wenn es noch nicht aktiviert ist.

  3. Während das Menü „Optionen“ noch geöffnet ist, nehmen Sie alle weiteren Änderungen vor, um das Widget wie gewünscht zu konfigurieren. Beispielsweise können Sie die Schaltflächen „Zurück“, „Weiter“, Beschriftungen und Zähler ein- oder ausblenden. Für die Leuchtkastenanzeige ist es hilfreich, die Schaltfläche „Schließen“ zu aktivieren. Aktivieren Sie das Kontrollkästchen neben der Option „Schließen-Schaltfläche“.

    Schließen-Schaltfläche
    Eine Schaltfläche zum Schließen (mit einem X) wird rechts oben in der Diashow angezeigt.

    Falls gewünscht, können Sie das Auswahlwerkzeug verwenden, um die Schaltfläche „Schließen“ auf eine andere Position zu verschieben. Wenn Benutzer die Leuchtkastenanzeige beenden und das modale Fenster schließen möchten, können Sie auf die Schaltfläche „Schließen“ klicken oder die Esc-Taste drücken.

    Hinweis:

    Wenn Sie die Breite des Rahmens ändern möchten, der das Leuchtkastenfenster umgibt, wählen Sie das Leuchtkasten-Diashow-Widget und aktualisieren Sie die Auffüllungseinstellungen im Abstandbedienfeld.

  4. Wählen Sie „Datei“ > „Seitenvorschau“ im Browser, um das Diashow-Widgets zu testen. Klicken Sie auf eines der Miniaturbilder, um den Leuchtkasteneffekt aufzurufen und das entsprechende Hero-Bild in einem modalen Fenster anzuzeigen, während der Rest der Seite abgeblendet wird.

  5. Klicken Sie auf die Schaltflächen „Weiter“ und „Zurück“, um durch die Bilder in der Diashow zu blättern.

  6. Nachdem Sie die Diashow überprüft haben, beenden Sie die Leuchtkastenanzeige, indem Sie auf die Schaltfläche „Schließen“ klicken. Der Leuchtkasten wird geschlossen und der Rest des Seiteninhalts wird angezeigt.

  7. Schließen Sie den Browser und kehren Sie zu Adobe Muse zurück.

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