Muse - Webdesign mit Adobe Muse

1. Arbeitsoberfläche, Werkzeuge, Menustruktur und Bedienfelder
Im Vergleich zu Dreamweaver oder anderen Web-Editoren wartet Muse mit einer sehr übersichtlichen Arbeitsoberfläche auf. Der Umfang von Werkzeugen und Bedienfeldern ist schon fast minimalistisch und erinnert teilweise an den Look von In-Design. Auch die Menus sind relativ kurz und die Voreinstellungen umfassen sage und schreibe 4 Einträge. Die 5 Haupteinträge des Application-Menus führen durch die einzelnen Schritte eines Webprojektes: Planung – Entwurf – Vorschau – Veröffentlichung – Verwalten - und werden detailliert erklärt.

2. Projektplanung – Sitestruktur – Master-Seiten
Sie erstellen ein Projekt in Muse; legen die Site-Struktur fest, also die einzelnen html-Seiten des Projektes. Definieren die seitenübergreifenden Eigenschaften wie Breite, Abstände der Seiten, Kopf- und Fußbereich, etc. Dazu arbeiten Sie in der Planungsansicht. Sie beschriften die Seiten und bauen Unterseiten, Sie strukturieren um und erstellen Masterseiten mit den Inhalten, die auf allen Seiten gleich sind wie z.B. Seitennavigation, Hintergrundgrafiken, etc.

3. Formen – Füllung und Kontur, Farben und Verläufe, Transformieren
Nach der Planungsansicht wechseln Sie in die Entwurfsansicht. Dort gestalten Sie das Layout jeder einzelnen html-Seite. Dazu legen Sie einzelne Boxen/Rechteckformen für die Inhalte an und setzen Linien, passen diese an, belegen diese mit Farbe und Kontur. Sie lernen die Farbpalette kennen und erstellen Farbverläufe für Ihre Formen. Auch das Einfügen von Hintergrundgrafiken in einzelne Formen ist Thema dieser Lernsequenz.

4. Arbeiten mit Text – Textformatierung – Zeichen- und Absatzformate
Sie erstellen Text und formatieren ihn. Dabei lernen Sie die Vorteile kennen, die Ihnen Formatvorlagen für Zeichen- und Absatzformatierung liefern. Das Importieren von Text aus anderen Programmen ist ebenso Thema, wie der Umgang mit Überlauftext und Spaltensatz.
Dabei stehen Ihnen nicht nur die websicheren Schriften zur Verfügung, sondern über Muse haben Sie die Möglichkeit webfonts einzubinden, um typografisch ansprechende Layouts zu erstellen.

5. Grafikimport – Auflösung und Grafikformate für Web – Grafik anpassen
Für den Inhalt vorbereitete Grafiken aus Photoshop – also die originären .psd-Dateien - lassen sich in Muse problemlos „Platzieren“. Vorteil: Wird die Datei in Photoshop aktualisiert, so ist sie automatisch auch in Muse auf dem neuesten Stand, solange der Link zum Original erhalten bleibt. Beim Export wandelt Muse diese Dateien in JPG, PNG oder GIF um. Dies sind auch die 3 Grafikformate, die in Muse verarbeitet werden können. Sie lernen die verschiedenen Einfügeoptionen für Grafiken kennen. Auch das Bewegen, Drehen, Beschneiden und die Größenveränderung von Grafiken lernen Sie. Eine Besonderheit sind hier die Rahmenoptionen im Zusammenhang mit Grafiken, die stark an In-Design erinnern.

6. Schaltflächen, Hyperlinks und Einbetten von HTML
Schaltflächen und Verweise – sog. Hyperlinks - sind Thema dieser Lernsequenz. Dabei zeigen wir Ihnen die unterschiedlichen Link-Arten: den absoluten Verweis, den Sprunganker, den Link zu einer eMail-Adresse, sowie site-interne Links. Wie Sie Schaltflächen erstellen und die unterschiedlichen Zustände – wie up, over, down – zuweisen, lernen Sie, ebenso wie den Einsatz und die Anpassung der in Muse vorgefertigten Menus.
Ein besonderes Thema ist hier die Einbettung von externem html-Quellcode, um z.B. ein YouTube-Video oder eine GoogleMap in Ihre Site einzubinden.

7. Einsatz von Effekten und Grafikstilen
Effekte, wie Schatten, abgerundete Ecken, Glanz, Reliefkanten und Transparenzeffekte peppen die Site-Elemente auf und können für den wiederholten Einsatz als sogenannte Grafikstile abgespeichert werden.

8. Widgets, Slideshows und Formularfelder
Widgets sind das Salz in der Web-Suppe und jeder kennt sie. Sie erstellen eine Slideshow und einen Lightbox-Display mit Hilfe der vorgefertigten Komponenten in Muse und bearbeiten diese gemäß Ihren Wünschen. Sie erstellen ein Kontaktformular, formatieren die einzelnen Inhaltselemente und passen Sie Ihren Bedürfnissen an.

9. Export und Veröffentlichung der Site
Die verschiedenen Arten der Vorschau in Muse, sowie das Einrichten einer Adobe Business-Catalyst-Site sind hier Thema. Das Veröffentlichen Ihrer Site als HTML, das Bereitstellen auf einen Webserver, der Ausschluss bestimmter Seiten von der Veröffentlichung lernen Sie zum Abschluss Ihres Webprojektes.

10. Sites für Mobiles
Ergänzend werfen wir einen kurzen Ausblick auf die Erstellung einer Site für Mobiles und Tablets.