Lernen Sie Schritt für Schritt, wie Sie mit Adobe Muse eine responsive Website erstellen.

Sehen Sie sich die responsive Website an, die Sie in dieser Übung erstellen werden. Achten Sie darauf, wie sich die Anzeige einzelner Elemente automatisch anpasst, wenn die Website auf einem Desktop, Tablet oder Smartphone dargestellt wird. 

Wenn Sie die responsive Website nachbilden möchten, öffnen Sie die Bibliothek Responsive Webdesign (Muse). Klicken Sie auf „In der Creative Cloud speichern“, um eine Kopie der Bibliothek in Ihrem Konto zu speichern. Unter Responsive Web Design Starter Files können Sie die Startvorlagen für dieses Projekt herunterladen.

Hinweis: Sie müssen bei Creative Cloud angemeldet sein, um die Bibliothek in Ihrem Konto speichern zu können. Legen Sie eine Adobe ID an, falls Sie noch keine haben.

Responsives Webdesign prüfen (1:18) – Auf Projektdateien zugreifen (2:48)

Sitemap erstellen

Legen Sie eine neue Site an. Lernen Sie den Planungsmodus kennen, und richten Sie Ihre Sitemap ein. Strukturieren und benennen Sie die einzelnen Seiten für Ihre Website, und fügen Sie anschließend Seitentitel hinzu. 

Weblayout wie ein Printlayout einrichten (0:20) – Fertiges Seiten-Design überprüfen (2:10) – Seiten zur Sitemap hinzufügen (2:27)

Musterseite einrichten

Erstellen Sie eine Musterseite mit Design-Elementen, die auf allen Seiten der Website zum Einsatz kommen werden. Fügen Sie die Absatzformate und Grafikstile hinzu, die Sie für das Design der gesamten Website verwenden möchten. 

Musterseite öffnen und zwischen Modi wechseln (0:18) – Elemente der Musterseite prüfen (0:55) – Musterseite gestalten (1:25) – Tipps für schnelleres Arbeiten (2:24)

Erstellen und gestalten Sie den Footer-Bereich der Website mit responsiven Eigenschaften. Fügen Sie Symbole für soziale Netzwerke hinzu, und definieren Sie verschiedene Rollover-Status, die die Aktionen eines Anwenders visualisieren. Verknüpfen Sie die Footer-Symbole mit Hyperlinks zu Web-Seiten außerhalb Ihrer Site. Verwenden Sie das Menü-Widget, um die Navigation für Ihre Website zu definieren. Mit einem anderen Widget fügen Sie ein Formular zum Footer-Bereich hinzu.

Footer-Bereich definieren (0:09) – Footer-Elemente hinzufügen (0:39) – Rollover-Status definieren (2:32) – Hyperlinks hinzufügen (4:03) – Navigationsmenü zum Footer hinzufügen (5:30) – Formular zum Footer hinzufügen (7:02)

Header erstellen

Erstellen und gestalten Sie den Header-Bereich der Website mit responsiven Eigenschaften. Fügen Sie ein Logo und einen Button hinzu, und bearbeiten Sie das Layout mithilfe der Funktionen zum Ausrichten von Objekten. Fügen Sie dem Header-Bereich ein Menü zur Navigation innerhalb der Site hinzu, und passen Sie das Erscheinungsbild des Menüs an.

Header-Bereich definieren (0:12) – Header-Elemente hinzufügen (0:31) – Seitennavigation anpassen (1:42)

Responsive Elemente zur Musterseite hinzufügen

Mit der Option zum Fixieren von Objekten und anderen responsiven Einstellungen legen Sie fest, wie Seitenelemente je nach Browser-Größe dargestellt werden sollen. Fügen Sie Breakpoints zu Ihrem Design hinzu, um den Übergang zum zugehörigen Layout für eine bestimmte Browser-Größe zu koordinieren. Prüfen Sie die Darstellung Ihrer Website in unterschiedlichen Layouts. Passen Sie Seitenelemente für die optimale Anzeige an unterschiedlichen Breakpoints an.

Elemente für responsives Layout fixieren (1:18) – Design im Browser überprüfen (3:34) – Breakpoints hinzufügen (4:19) – Elemente für verschiedene Breakpoints neu positionieren (7:27)

Responsives Menü hinzufügen

Erstellen und gestalten Sie ein Menü, dessen Erscheinungsbild sich je nach Browser-Typ – Desktop, Tablet oder Smartphone – verändert. Erfahren Sie, wie Sie die Elemente im Header- und Footer-Bereich so strukturieren, dass sie sich dynamisch an das jeweilige Menü-Layout anpassen.

Touch-fähiges Menü hinzufügen (0:52) – Seitenelemente mithilfe von Ebenen strukturieren (3:32) – Responsives Menü nur im Tablet- und Smartphone-Layout anzeigen (5:29)

Smartphone-Layout erstellen

Fügen Sie einen Breakpoint für ein Smartphone-Layout hinzu. Ordnen Sie die Seitenelemente für ein vertikales Layout an, um die optimale Darstellung in Mobil-Browsern sicherzustellen, die schmaler als Desktop-Bildschirme oder Tablet-Displays sind.

Footer-Elemente für kleinere Layouts optimieren (1:02) – Breakpoint hinzufügen (3:00)

Homepage erstellen

Stellen Sie das Design für die Homepage fertig. Passen Sie Text und Bilder an, sodass sie in jedem Browser korrekt angeordnet und skaliert werden. Definieren Sie zusätzliche Rollover-Status für ein besseres Anwendererlebnis bei der Navigation zu verschiedenen Seitenbereichen.

Separate Breakpoints für Header und Footer definieren (0:52) – Responsive Elemente zur Homepage hinzufügen und überprüfen (2:14) – Rollover-Status und Skalierungseinstellungen überprüfen (7:19)

Website fertigstellen und veröffentlichen

Stellen Sie das Website-Design fertig, und sehen Sie sich Beispiele für das Hinzufügen von Breakpoints zu einzelnen Seiten an, die sich von den Breakpoints der Musterseite unterscheiden. Lernen Sie weitere Techniken für responsives Design kennen, beispielsweise das Verbergen und Anzeigen von Inhalten für die optimale Darstellung in unterschiedlichen Layouts, die Skalierung von Text zur Gewährleistung der Lesbarkeit auf kleineren Bildschirmen oder das Kopieren von Formatierung und Layout-Merkmalen für mehrere Breakpoints.

Abschließend erfahren Sie mehr über die Optionen für die Weitergabe Ihrer Website zur Überprüfung oder Freischaltung.

Breakpoints überprüfen (1:00) – Bilder für responsives Layout anpassen (2:36) – Text für mehrere Breakpoints formatieren (4:26) – Optionen zur Veröffentlichung (6:42)

 

Das war schon alles! Damit ist dieses Training abgeschlossen. Teilen Sie uns Ihre Meinung zu diesem Tutorial mit.

 

03/14/2017
The Royal Studio
War diese Seite hilfreich?
Ja
Nein