Erfahren Sie, wie Sie responsive Websites in Adobe Muse erstellen. Verwenden Sie leere Layouts oder vordefinierte Startvorlagen, um responsive Websites zu erstellen.

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.

Sie können auf verschiedene Weise mit dem Erstellen responsiver Websites in Adobe Muse beginnen:

  • Verwenden von Startvorlagen: Adobe Muse bietet anpassbare, responsive Startvorlagen, die Ihnen den schnellen Einstieg erleichtern. Passen Sie die Startvorlagen an und veröffentlichen Sie Ihre responsive Website mit wenigen Klicks. Detaillierte Informationen finden Sie unter Verwenden von Bootstrap-Startvorlagen.
  • Verwenden eines leeren Layouts: Adobe Muse bietet eine leere Arbeitsfläche ohne restriktive Vorlagen oder Raster zum Entwerfen einer responsiven Website. Verwenden Sie eine einzelne Adobe Muse-Datei, um verschiedene Layouts für verschiedene Browserbreiten zu erstellen. Weitere Informationen zum Erstellen einer neuen responsiven Adobe Muse Website finden Sie unter Erstellen einer neuen responsiven Website.
  • Konvertieren vorhandener Websites in responsive Websites: Adobe Muse ermöglicht es Ihnen, Ihre vorhandenen Adobe Muse-Sites in responsive Layouts zu migrieren. Ändern Sie das Layout Ihrer vorhandenen Adobe Muse-Websites in variable Breite und optimieren Sie das Layout von Objekten für verschiedene Browserbreiten. Weitere Informationen finden Sie unter Migrieren vorhandener Adobe Muse-Websites zum responsiven Layout.

Wenn Sie eine Seite im responsiven Layout öffnen, zeigt Adobe Muse einen responsiven Rundgang an – eine kurze Diashow über Haltepunkte, die Skalierung von Objekten und die Formatierung von Text für responsives Layout. Sie können entweder mit dem responsiven Rundgang fortfahren oder die Diashow zu einem späteren Zeitpunkt wiedergeben, indem Sie auf „Hilfe“ > „Responsiver Rundgang“ klicken.

Zum Einstieg in das Thema responsives Design in Adobe Muse können Sie sich das Video-Tutorial zu responsivem Layout ansehen.

Verwenden von Bootstrap-Startvorlagen

Adobe Muse bietet Vorlagen für verschiedene Arten von Websites, z. B. Vorlagen für eine persönliche Website oder für eine Website zum Ausstellen von Fotografien.

Informationen zum Zugriff auf die Startvorlagen finden Sie im Abschnitt zu Startvorlagen auf der Adobe Muse-Seite. Wählen Sie eine Vorlage im Abschnitt aus und klicken Sie auf Herunterladen, um die Startvorlagen herunterzuladen.

Wenn Sie die Startvorlagen öffnen, werden eine Musterseite und eine Gruppe einzelner Seiten mit vordefinierten Vorlagen in der Adobe Muse-Planungsansicht geöffnet. Sie können am oberen Rand entweder Desktop (Breite: 1160 px), Tablet (Breite: 768 px) oder Telefon (Breite: 380 px) auswählen. Sie können die Startvorlagen auch wie gewünscht ändern und die Seiten mithilfe des Reglers in der Vorschau anzeigen.

Wenn Sie die Vorlage nicht herunterladen möchten, können Sie im Abschnitt Starterdesign auf Vorschau klicken. Die Beispiel-Site wird in Ihrem Browser geöffnet.

Erstellen eines neuen responsiven Website

Um eine neue Website mit responsivem Layout zu erstellen, wählen Sie im Dialogfeld Neue Site die Option Variable Breite aus. Die Objekte auf der Seite reagieren automatisch und passen sich an die Größe des Browsers an. Mit der Option Variable Breite können Sie außerdem eine responsive Website mit einem leeren Layout ohne restriktive Vorlagen oder vordefiniertes Layout entwickeln.

  1. Klicken Sie auf „Datei“ > „Neue Site“.

    newsitefluid
    Auswählen der Option „Variable Breite“ für responsive Layouts

  2. Klicken Sie auf „Variable Breite“. Wenn Sie Variable Breite auswählen, sind die Objekte auf der Seite über Haltepunkte hinweg variabel. Das heißt, die Objekte reagieren basierend auf ihrem responsiven Verhalten auf die Browserbreite.

  3. Klicken Sie auf „Erweiterte Einstellungen“, um Breite, Höhe und Ränder für Ihre Website festzulegen. Sie können mit einer Browserbreite beginnen, die zum Gestalten Ihrer Website praktisch ist. Nach dem Gestalten von Objekten können Sie zusätzliche Haltepunkte für zusätzliche Browserbreiten hinzufügen.

    Wählen Sie anschließend die Auflösung und Spracheinstellungen. Klicken Sie auf „OK“.

    advancedsettingsfluid
    Erweiterte Einstellungen beim Erstellen einer variablen Site

    Nachdem Sie eine neue responsive Website erstellt haben, setzen Sie die Gestaltung mit Bildern, Text und anderen Objekten für Ihre Browserbreite fort.

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