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.
Bei einem responsiven Design ist ein einzelnes Layout von Objekten und Text möglicherweise nicht für alle Bildschirmgrößen geeignet. Bilder, Text, Widgets und Formulare können an verschiedenen Haltepunkten neu positioniert werden. Die Rahmen können die Seitenbreite überschreiten, Objekte können sich überlagern oder die Klarheit des Textes kann beeinträchtigt werden. Bilder, Text, Widgets und Formulare müssen an verschiedenen Haltepunkten neu positioniert werden. Das sorgfältige Anordnen von Objekten und Formatieren von Text ist daher entscheidend, damit das Layout in verschiedenen Bildschirmgrößen korrekt ist.
Nachdem Sie Ihre Seite gestaltet haben, können Sie den Regler verwenden, um Ihr Layout in verschiedenen Bildschirmgrößen in der Vorschau anzuzeigen. Wenn Sie die Objekte bei bestimmten Browserbreiten unterschiedlich anordnen müssen, können Sie Haltepunkte hinzufügen.
Lesen Sie weiter, um mehr über Haltepunkte sowie darüber zu erfahren, wie Sie Ihr Layout effizient im responsiven Layout in Adobe Muse gestalten können.
Haltepunkte in einem responsiven Layout entsprechen den verschiedenen Browserbreiten in Pixeln. Mithilfe der Haltepunkte können Sie das Design für verschiedene Browserbreiten anzeigen und prüfen, wie die Objekte auf einer Seite auf Änderungen der Browserbreite reagieren.
Standardmäßig enthält eine neue Site in Adobe Muse Haltepunkte für Desktops (Pixelbreite: 960). Sie können damit beginnen, Ihr Layout für diese Breite zu gestalten. Wenn Sie das Design fertiggestellt haben, können Sie sich mithilfe des Reglers das Layout per Vorschau in verschiedenen Breiten ansehen. Dabei können Sie die Breite sehen und speichern, bei der das Design „umbricht“. Beispielsweise werden aus einer Textzeile zwei, oder Bilder, die in einer Zeile standen, werden vertikal angeordnet. Dies sind die Breiten, für die zusätzliche Haltepunkte gebraucht werden. Nachdem Sie die erforderlichen Haltepunkte hinzugefügt haben, können Sie das Design so einstellen, dass die Objekte ansprechend angeordnet werden.
Am Backend fügt Adobe Muse für jeden Haltepunkt eine entsprechende Medienabfrageerklärung auf Ihrer Webseite hinzu. Bei Medienabfragen handelt es sich um ein CSS3-Modul, über das das Rendern von Inhalten an verschiedene Bildschirmgrößen angepasst werden kann. Die meisten modernen Browser können die Medienabfragen diesen Haltepunkten entsprechend interpretieren. Wenn Benutzer Ihre Webseite auf mehreren Geräten anzeigen lassen, werden die am besten geeignete Medienabfrage und das entsprechende Design-Layout vom Browser ausgewählt und dem Benutzer angezeigt.
-
Klicken Sie auf der Haltepunktleiste auf
. Beachten Sie, dass ein neuer Haltepunkt auf der Haltepunktleiste hinzugefügt wird. Auch die Browserbreite des Haltepunkts wird angezeigt.Fügen Sie nach Bedarf Haltepunkte auf der Haltepunktleiste hinzu, um bestimmte Browserbreiten festzulegen.
Wenn Sie auf einen Haltepunkt klicken, wird der aktive Haltepunkt mit Farbe gefüllt. Die anderen Haltepunkte sind abgeblendet.
Hinweis:
Sie können Haltepunkte auch hinzufügen, indem Sie Bibliothekselemente mit Haltepunkten in der Entwurfsansicht platzieren. Öffnen Sie das Bedienfeld „Bibliothek“, wählen Sie das Objekt aus, das Sie einfügen möchten, klicken Sie auf das Pluszeichen (+) neben dem Objekt und ziehen Sie das Objekt in die Entwurfsansicht.
Sie können Haltepunkte zu Musterseiten oder zu einzelnen Seiten hinzufügen. Wenn Sie einer einzelnen Seite Haltepunkte hinzufügen, werden die Haltepunktwerte nur auf diese Seite angewendet.
Wenn Sie Haltepunkte auf einer Musterseite hinzufügen, können Sie beliebige dieser Haltepunkte auf den einzelnen Seiten anwenden. Die Haltepunkte aus den Musterseiten werden als kleine Dreiecke auf den einzelnen Seiten angezeigt. Klicken Sie einfach auf das Pluszeichen (+), um diese Haltepunkte auf den einzelnen Seiten zu aktivieren.
Betrachten Sie das folgende Szenario: Wenn Sie Ihre Website erstellen, empfiehlt es sich, bestimmte Haltepunkte für Smartphones hinzuzufügen. Sie können geeignete Haltepunkte auf der Masterseite hinzufügen, sodass sie auf den einzelnen Seiten verfügbar sind. Wenn Sie das Layout der einzelnen Seiten weiterbearbeiten, können Sie diese Haltepunkte auf den betreffenden Seiten mit nur einem Mausklick anlegen.
Hinweis:
Wenn Sie eine neue Musterseite auf eine Seite anwenden, werden die Haltepunkte aus der alten Musterseite durch die Haltepunkte aus der neuen Musterseite ersetzt.
-
Wenn Sie in der Bildformatfarbe für die anzeigen oder bearbeiten möchten, klicken Sie mit der rechten Maustaste auf den Haltepunkt und wählen Sie „Haltepunkt-Eigenschaften“ oder doppelklicken Sie auf den Haltepunkt.
Sie können in diesem Fenster auch die Haltepunktfarbe sowie die Werte für Seitenbreite, -höhe und -ränder ändern.
Mithilfe des Haltepunkteigenschaften-Dialogfelds können Sie die Haltepunktfarbe und -werte ändern.
Hinweis:
Sie können die Haltepunkte auf der Musterseite nicht von den einzelnen Seiten aus bearbeiten.
-
Sie haben folgende Möglichkeiten, um Haltepunkte zu löschen:
- Klicken Sie auf der linken Seite des aktiven Haltepunkts auf „X“.
- Klicken Sie mit der rechten Maustaste auf die Haltepunktleiste und wählen Sie „Haltepunkt löschen“.
Wenn Sie einen Haltepunkt löschen, werden die entsprechenden Layout-Änderungen und die Texteinstellungen für den Haltepunkt ebenfalls gelöscht.
Klicken Sie auf das x-Symbol, um den Haltepunkt zu löschen.
Klicken Sie mit der rechten Maustaste und löschen Sie die gewünschten Haltepunkte.
Hinweis:
Sie können einen Haltepunkt auf der Musterseite nicht von einer einzelnen Seite aus löschen.
Von dort können Sie auf die nächste oder vorhergehende Haltepunkte verschieben. Wenn Sie zum vorherigen oder nächsten Haltepunkt aufzurufen, führen Sie einen der folgenden Schritte durch:
- Windows-Benutzer:
- Vorheriger Haltepunkt, drücken Sie Strg + Umschalt + 5
- Nächster Haltepunkt, drücken Sie Strg + Umschalt + 6
- Vorheriger Haltepunkt, drücken Sie Strg + Umschalt + 5
- Mac OS-Benutzer:
- Vorheriger Haltepunkt: Drücken Sie Strg + Umschalt + 5
- Nächster Haltepunkt: Drücken Sie Strg + Umschalt + 6
- Vorheriger Haltepunkt: Drücken Sie Strg + Umschalt + 5
Sie können die folgenden Optionen verwenden, um sicherzustellen, dass das Layout an allen Haltepunkten korrekt aussieht:
- Ein-/Ausblenden von Objekten: Sie können ein Objekt optional in einem Haltepunkt aus- und in einem anderen Haltepunkt einblenden. Weitere Informationen finden Sie unter Ein- oder Ausblenden von Objekten.
- Unterschiedliches Positionieren von Objekten in verschiedenen Haltepunkten: Sie können ein einzelnes Objekt an verschiedenen Positionen in verschiedenen Haltepunkten platzieren. Weitere Informationen finden Sie unter Positionieren von Objekten im responsiven Webdesign.
- Verwenden responsiver Verankerung: Sie können festlegen, welche Objekte statisch und welche variabel sein sollen. Sie können die statischen Objekte verankern, damit sie an allen Haltepunkten an der gleichen Position verbleiben. Weitere Informationen finden Sie unter Verankern von Objekten.
- Ändern der Größe von Objekten: Sie können verschiedene Objektgrößen für jeden einzelnen Haltepunkt festlegen. Sie können auch festlegen, dass die Größe eines Objekts basierend auf der Breite der Seite automatisch angepasst wird. Weitere Informationen zur Größenänderung von Objekten finden Sie unter Ändern der Größe von Objekten.
- Formatieren von Text für verschiedene Haltepunkte: Sie können Text in verschiedenen Haltepunkten unterschiedlich formatieren, um die Klarheit und Lesbarkeit des Textes bei verschiedenen Browserbreiten zu erhöhen. Weitere Informationen finden Sie unter Formatieren von Text in responsiven Layouts.
Betrachten Sie das folgende Szenario: Sie haben ein herkömmliches Menü für einen Desktop eingefügt. Dieses Menü benötigt jedoch auf einem Tablet-Bildschirm zu viel Raum. Für Tablets empfiehlt sich daher ein Sandwich- oder ein Akkordeon-Menü.
Solche Fälle können beim Entwerfen von Websites in Adobe Muse problemlos berücksichtigt werden. Sie können für Desktops ein herkömmliches und für Tablets ein Sandwich-Menü wählen, wie in den folgenden Abbildungen gezeigt.
-
Klicken Sie mit der rechten Maustaste auf das Objekt, das Sie ausblenden möchten, und wählen Sie „Im Haltepunkt ausblenden“.
Das Objekt wird in der aktuellen Haltepunktansicht ausgeblendet, ist aber in anderen Haltepunkten sichtbar. Wenn Sie das Objekt stattdessen in allen anderen Haltepunkten ausblenden möchten, klicken Sie auf „In anderen Haltepunkten ausblenden“. Später können Sie das Objekt mit dem Ebenenbedienfeld an bestimmten Haltepunkten anzeigen.
Ausblenden von Objekten in Haltepunkten
Sie können Objekte in unterschiedlichen Haltepunktansichten unterschiedlich positionieren. So können Sie beispielsweise Bilder in der Desktopansicht horizontal und in der Mobilgeräteansicht vertikal positionieren.
Adobe Muse speichert die Position von Objekten und zeigt sie entsprechend an, wenn die Bildschirmgröße geändert wird.
-
Hinweis:
Wenn Sie Objekte anordnen, denken Sie daran, den Abstand zwischen den Objekten und den Abstand zwischen dem Objekt und dem Rand des Browsers zu überprüfen. Unter Umständen müssen Sie Objektpositionen anpassen oder weitere Haltepunkte hinzufügen, um die Entwurfsprobleme zu beheben, die zwischen Haltepunkten auftreten.
Sie können eine Gruppe von Objekten in Ihrem responsiven Layout zusammen verschieben. Wenn Sie eine Gruppe vertikal ausgerichteter Objekte verschieben möchten, müssen Sie nur das oberste Objekt auswählen. Am linken Rand in Adobe Muse erscheint nun ein vertikaler Griff.
Wenn Sie auf den Griff klicken und ihn nach oben oder unten verschieben, werden das ausgewählte Objekt und alle darunterliegenden Objekte als eine Gruppe verschoben.
Sie können Haltepunkte hinzufügen, indem Sie ein Bibliothekselement mit Haltepunkten in der Entwurfsansicht platzieren. Öffnen Sie das Bibliotheksbedienfeld („Fenster“ > „Bibliothek“). Wählen Sie das Element aus, das Sie der Seite hinzufügen möchten. Klicken Sie auf das Pluszeichen neben dem Element und ziehen Sie das Element per Drag & Drop in die Entwurfsansicht.
Beachten Sie, dass Haltepunkte bereits automatisch in Ihre Seite eingefügt wurden. Wenn Sie bereits Haltepunkte auf Ihrer Seite eingefügt haben und ein Bibliothekselement mit Haltepunkten hinzufügen, werden alle Haltepunkte auf Ihrer Seite aktiviert.
Sie können Bibliothekselemente mit Haltepunkten verwenden, um schnell Haltepunkte zwischen verschiedenen Seiten und sogar zwischen verschiedenen .muse-Dateien zu replizieren.
Wenn Sie in Adobe Muse bestimmte Objekte in statische Objekte verwandeln möchten, verwenden Sie die Option zum Verankern von Objekten. Sie können ein Objekt entweder auf einer Seite oder an einem Browser verankern:
- Verankern von Objekten am Browser: Sie können ein Objekt am Browser verankern, wenn das Objekt selbst dann fixiert bleiben soll, wenn Sie die Bildlaufleiste des Browsers verwenden. Beispiel: Eine Menüleiste, die fixiert bleibt, wenn Sie einen Bildlauf nach oben oder nach unten durchführen. Weitere Informationen zum Verankern von Objekten am Browser finden Sie unter diesem Link.
- Verankern von Objekten auf einer Seite: Sie können ein Objekt auf einer Seite verankern, wenn das Objekt auf der Webseite fixiert bleiben soll. Beispiel: Ein Firmenlogo, das immer in der oberen rechten Ecke der Webseite angezeigt wird.
Im Folgenden erfahren Sie mehr zum Verankern von Objekten auf einer Seite im responsiven Design.
Hinweis:
Um zu bestimmen, ob Sie ein Objekt verankern sollten, verwenden Sie den Regler und zeigen Sie die Seite mit verschiedenen Browserbreiten an. Zum Verankern des Objekts auf der Seite gehen Sie folgendermaßen vor:
-
So verankern Sie das Objekt auf einer Seite:
- Links verankern
: Aktivieren Sie dieses Kontrollkästchen, wenn Sie ein Objekt links auf der Webseite verankern möchten. Der Abstand zwischen dem Rand des Browsers und der linken Seite des Objekts bleibt konstant. - Mittig verankern
: Aktivieren Sie dieses Kontrollkästchen, wenn Sie ein Objekt mittig verankern möchten. Der Abstand zwischen dem linken und dem oberen Rand des Objekts und dem Rand des Browsers bleibt konstant. - Rechts verankern
: Aktivieren Sie dieses Kontrollkästchen, wenn Sie ein Objekt rechts auf der Webseite verankern möchten. Der Abstand zwischen dem Rand des Browsers und der rechten Seite des Objekts bleibt konstant.
Wenn beispielsweise eine Schaltfläche wie Jetzt bestellen in allen Haltepunkten in der rechten Ecke der Seite angezeigt werden soll, wählen Sie die Schaltfläche aus und verankern Sie sie rechts, wie in der Abbildung gezeigt.
Klicken Sie auf das entsprechende Kontrollkästchen, um das Objekt rechts zu verankern.
Wenn Sie ein Objekt auf einer Seite verankern, werden in Adobe Muse gepunktete Linien ausgehend vom Objekt angezeigt, die die verankerte Position auf der Seite angeben. Achten Sie im folgenden Bild auf die gepunktete Linie, die bis an den rechten Seitenrand reicht. Dies bedeutet, dass das Objekt am rechten Rand der Seite verankert ist.
Gepunktete Linien zeigen die Position der Verankerung auf der Seite.
- Links verankern
-
Hinweis:
Ändern Sie die Option entspricht nicht der Spracheinstellung für andere Objekte. Beispielsweise können Sie ein Bild durch die Breite und Höhe in einem responsiven Layout skalieren, während Sie ein Textfeld nur durch die Größe geändert werden kann.
Objekte, die nicht variabel sind, verfügen auch nicht über die Option „Skalieren“.
-
Ändern Sie durch Ziehen die Größe des Objekts für den aktuellen Haltepunkt.
Beim ersten Bild wird beispielsweise die Seitenbreite bei einem Haltepunkt von 768 px überschritten. Ändern Sie durch Ziehen die Größe des Bildes, damit es der Seitenbreite entspricht, wie in der zweiten Abbildung gezeigt.
Bild überschreitet Seitenbreite.
Ändern Sie durch Ziehen die Größe von Objekten für verschiedene Haltepunkte.
Hinweis:
Wenn Elemente innerhalb einer Statusschaltfläche oder eines anderen Widget-Containers als variabel festgelegt sind, werden sie verschoben und/oder skaliert, wenn die Containergröße geändert wird.
Wenn Sie die Größe und Position eines Objekts in verschiedene Haltepunkte kopieren möchten, führen Sie die folgenden Schritte aus:
-
Führen Sie einen der folgenden Schritte durch:
- Wählen Sie „Größe und Position kopieren nach“ > <bestimmter Haltepunktwert>, um die Größe und Position des aktuellen Objekts auf den bestimmten Haltepunkt anzuwenden.
- Wählen Sie „Größe und Position kopieren nach“ > „Alle Haltepunkte“, um die Größe und Position des aktuellen Objekts auf alle Haltepunkte anzuwenden.
Im responsiven Design ist die Behandlung von Text für verschiedene Browserbreiten wichtig, damit er klar und gut lesbar ist. In einer Haltepunktansicht platzierter Text wird möglicherweise in einer anderen Haltepunktansicht unerwartet umbrochen. Unerwünschte Zeilenumbrüche können auch auftreten, wenn Sie die Haltepunkte wechseln.
Mit Adobe Muse können Sie Text für verschiedene Haltepunkte unterschiedlich formatieren. So können Sie beispielsweise die Schriftgröße für Tablets auf 20 Punkt und für Mobilgeräte auf 15 Punkt festlegen.
Um Text im responsiven Design zu formatieren, bietet Adobe Muse ein Textformatierungssymbol im Bedienfeld, in dem auch das Freistellungs- und das Auswahlwerkzeug enthalten sind. Es gibt zwei Optionen für dieses Symbol und Sie können eine davon auswählen, um den Text zu formatieren.
Sie können die Option „Text auf allen Haltepunkten formatieren“ wählen, um Text in allen Haltepunkten auf einer Seite zu formatieren. Wenn Sie diese Option auswählen, müssen Sie den Text nur in einer Haltepunktansicht formatieren. Der Text wird automatisch an allen anderen Haltepunkten formatiert.
Wenn Sie dagegen Text für einen bestimmten Haltepunkt formatieren müssen, können Sie die Option „Text auf aktuellem Haltepunkt formatieren“ auswählen. Sie können beispielsweise die Textgröße auf 24 erhöhen, wenn Sie Text für Smartphones anordnen.
Die Textformatierung wird gespeichert und entsprechend angezeigt, wenn die Website bei unterschiedlichen Browserbreiten angezeigt wird.
-
Um Text zu formatieren, wählen Sie den Text aus und klicken Sie auf eine der folgenden Optionen:
- „Text auf allen Haltepunkten formatieren“: Text für alle Haltepunkte formatieren.
- „Text auf aktuellem Haltepunkt formatieren“: Text nur für den aktuellen Haltepunkt formatieren.
Beide Optionen sind im linken Bedienfeld verfügbar, in dem auch das Text- und das Freistellungswerkzeug enthalten sind.
Formatieren von Text in responsiven Designs
A. Text auf allen Haltepunkten formatieren B. Text auf aktuellem Haltepunkt formatierenHinweis:
Die Option zur Formatierung von Text in responsiven Layouts ändert nur die Formatierung des Textes. Sie können nicht die Wörter oder den Inhalt für jeden einzelnen Haltepunkt ändern.
Wenn Sie die Größe und Position von Text in verschiedene Haltepunkten oder Browserbreiten kopieren möchten, führen Sie die folgenden Schritte aus:
-
Führen Sie einen der folgenden Schritte durch:
- Klicken Sie mit der rechten Maustaste und wählen Sie „Textformatierung kopieren nach“ > <bestimmter Haltepunktwert>, um die Attribute des aktuellen Texts auf diesen bestimmten Haltepunkt anzuwenden.
- Klicken Sie mit der rechten Maustaste und wählen Sie „Textformatierung kopieren nach“ > „Alle Haltepunkte“, um die Attribute des aktuellen Texts auf alle anderen Haltepunkte anzuwenden.
In einem responsiven Layout können auch Bildlaufeffekte hinzugefügt werden. Bildlaufeffekte werden nur mit festen Haltepunkten unterstützt. Feste Haltepunkte geben an, dass Ihr Layout mit dieser Seitenbreite fixiert ist. Fügen Sie einen festen Haltepunkt hinzu, wählen Sie das Objekt aus, auf das Bildlaufeffekte angewendet werden sollen, und konfigurieren Sie dann die Bildlaufeffekt-Einstellungen.
-
Wenn Sie das responsive Layout öffnen, sehen Sie die Haltepunkte auf Ihrer Seite. Diese Haltepunkte sind variabel, was durch ein Symbol mit in beide Richtungen zeigenden Pfeilen angezeigt wird.
Variable Haltepunkte, durch ein Doppelpfeilsymbol angezeigt
Wenn Sie jetzt das Bildlaufeffekte-Bedienfeld anschauen, sehen Sie, dass die Option deaktiviert ist.
Bildlaufeffekte sind für variable Haltepunkte deaktiviert
-
Hinzufügen eines Haltepunkts mit fester Breite
Feste Haltepunkte sind mit einem Quadratsymbol gekennzeichnet
-
Wählen Sie das Objekt, für das die Bildlaufeffekte angewendet werden sollen, und konfigurieren Sie die Einstellungen für Bildlaufeffekte.
Anwenden von Bildlaufeffekten für ausgewählte Objekte
Hinweis:
Bildlaufeffekte können nur angewendet werden, wenn Sie sich am festen Haltepunkt und nicht an den anderen (variablen) Haltepunkten befinden.
Wie Sie die Bildlaufeffekte in Adobe Muse hinzufügen und verwenden, erfahren Sie unter Anwenden von Bildlaufeffekten in Adobe Muse.
Wenn Sie Ihre Site für ein bestimmtes Endgerät gestalten möchten, können Sie den entsprechenden Haltepunkt hinzufügen. Benutzer schauen sich Ihre Site aber u. U. von einem anderen Endgerät an, das eine andere Bildschirmgröße haben kann. Es wird daher empfohlen, Haltepunkte nur dort hinzuzufügen, wo sich Ihr Design ändert. Hierdurch wird sichergestellt, dass Ihre Site auf jedem Gerät richtig angezeigt wird.
Haltepunkte auf der Musterseite werden auf den einzelnen Seiten als weiße Dreiecke angezeigt. Um diese Haltepunkte auf den einzelnen Seiten zu aktivieren, klicken Sie auf das weiße Dreieck auf der Haltepunktleiste und dann auf das Pluszeichen (+).
Eine andere Möglichkeit, Haltepunkte ganz einfach von einer Musterseite auf eine bestimmte Seite zu übertragen, ist folgende: Sie kopieren ein Musterseitenelement, wechseln zu der Seite, auf der die Haltepunkte angewendet werden sollen, wählen „Bearbeiten“ „> „Mit Haltepunkten einfügen“ aus und löschen dann das eingefügte Element von der Leinwand. Obwohl das Element gelöscht wurde, bleiben die Haltepunkte von der Musterseite erhalten.
Möglicherweise finden Sie ein zusätzliches Leerzeichen oder einen Leerraum in Ihrer Site. Das kann verschiedene Gründe haben, z. B. ein Footer, der immer unten ist, oder ein ausgeblendetes Objekt. Weitere Informationen zur Behebung dieses Problems finden Sie in diesem Artikel.
Wenn Sie in der Vorschau einen grauen Bereich sehen, prüfen Sie, ob außerhalb der Seite ein externes oder ein ausgeblendetes Objekt platziert wurde. Um alle Objekte auszuwählen, klicken Sie auf „Ansicht“ > „Rahmenkanten einblenden“. Sie können auch auszoomen und die Position aller Objekte anzeigen. Prüfen Sie, ob ein ausgeblendetes oder ein externes Objekt vorhanden ist, und platzieren Sie das Objekt innerhalb des Layouts, um dieses Problem zu beheben.
Widgets in Adobe Muse sind momentan nicht responsiv. Informationen zum responsiven Verhalten der einzelnen Widgets finden Sie in dieser Tabelle.
Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.