Webdesign für Jedermann

Adobe Muse

Der jüngste Spross der Adobe-Produktfamilie trägt den Codenamen Muse und soll die professionelle Webentwicklung ohne nennenswerte HTML-, CSS - und Javascript-Kenntnisse erlauben. (Dr. Holger Reibold)

Klassische Webeditoren scheinen ausgedient zu haben in Zeiten, in denen nahezu jeder mit einem Content Management System sein eigenes Blog realisieren oder auf Website-Baukästen der Provider zurückgreifen kann. Wer sich, seinen Verein oder sein Unternehmen im Internet präsentieren will, findet reichlich Möglichkeiten.

Zwar ist Webspace so preiswert wie nie, doch nutzen Privatanwender und Profis meist vordefinierte Lösungen, die man in der Regel nur ein wenige an die jeweiligen Anforderungen anpasst. Daher verwundert es schon ein wenig, dass Adobe mit Muse ein Produkt etablieren will, mit dem jedermann eine professionelle Website entwickeln kann.

So ist die spannende Frage denn nicht nur, was Muse leistet, sondern auch, ob der Einsatz einer solchen Anwendung überhaupt Sinn macht beziehungsweise für wen sie interessant sein könnte.

Was bietet Muse?

Bei Muse handelt es sich um eine auf Air basierende Anwendung, die der grafischen Entwicklung von Websites dient. Die Anwendung stellt - ähnlich einem DTP-Programm - die notwendigen Funktionen bereit, mit der Sie eine Website quasi zusammenklicken können. Muse generiert im Hintergrund den dafür notwenigen HTML- und CSS-Code. Damit kommt Muse Designern entgegen, die sich ungern mit Code herumärgern, sondern eher designorientierte Antwendung bevorzugen.

Als Ausgangspunkt der Website-Entwicklung mit Muse steht die Sitemap. Damit auch einer einfachen Veröffentlichung nichts im Wege steht, können Sie Ihre Entwicklung unmittelbar über Adobes Hosting-Service Catalyst publizieren. Designern dürfte auch der Umstand entgegenkommen, dass die Benutzerschnittstelle der gerade einmal 5 MByte großen Air-Applikation klassischen Designprogrammen wie Indesign nachempfunden ist.

Bereits beim ersten Start von Adobe Air fällt auf, dass die Webentwicklungsumgebung sich bei den Klassikern der Wysiwyg-Webentwicklung bedient hat: Air ähnelt in vielen Belangen Netobjects Fusion, das heute allerdings kaum mehr als ein Nischenprodukt ist.

Die eigene Muse-Site

Ein erster Blick auf die Benutzerschnittstelle von Muse zeigt, dass die Entwicklung einer Website damit typischerweise in vier Schritten erfolgt: Planung, Design, Vorschau und Publizieren. Muse präsentiert Ihnen einen Auswahldialog für das Anlegen einer neuen beziehungsweise das Öffnen einer bestehenden Site.

Wenn Sie eine neue Site generieren, bestimmen Sie deren Seitenbreite, die Mindesthöhe sowie verschiedene seitenspezifische Einstellungen. Dieses Ausgangsdokument dient als Masterseite für die weitere Website-Entwicklung.

Der zweite Schritt dient der Gestaltung der Seiten. Die gute Nachricht für all jene, die bereits mit Adobe-Programmen wie Photoshop oder Fireworks arbeiten: Vorlagen aus diesen Programmen können ebenfalls im Muse verwendet werden.

Sie können typische Navigationselemente per Drag-und-Drop im Designmodus an den gewünschten Positionen platzieren. Auch überlagernde Elemente können quasi beliebig eingesetzt werden. Laut Adobe kann der von Muse erzeugte Code von allen aktuellen Browsern korrekt interpretiert und die Seiten können nahezu identisch dargestellt werden.

Schritt 3 dient der Vorschau. Dieser Schritt ist über den Button Preview der Muse-Symbolleiste verfügbar. Für die Vorschau verwendet Muse einen integrierten Browser, der die Entwicklung mithilfe von Webkit prüft.

Entspricht das Ergebnis Ihren Vorstellungen, können Sie es über die Hosting-Plattform Business Catalyst publizieren. Sie benötigen lediglich einen entsprechenden Account, der sich aber einfach über die Publish-Funktion von Muse anlegen lässt.

Site-Entwicklung

Der Ausgangspunkt Ihrer Site-Entwicklung ist in der Regel die Registerkarte Plan. Hier bestimmen Sie die Seitenstruktur. Als Ausgangspunkt der Site-Struktur dient die sogenannte Home-Seite. Muse kennt zwei Seitentypen: Masterseiten und reguläre Seiten. Bei einer Masterseite handelt es sich um eine Vorlage, die typische Eigenschaften und Elemente wie den Seitenhintergrund und die Navigationsleiste bereitstellt.

Dank einer solchen Vorlage ist sichergestellt, dass Sie ein seitenübergreifend einheitliches Design verwenden. Sie können natürlich auch verschiedene Masterseiten verwenden, um beispielsweise unterschiedliche Bereiche nicht nur inhaltlich, sondern auch designtechnisch voneinander abzugrenzen.

Mit einem Klick können Sie das Design aller Seiten anpassen, die auf einer Masterseite basieren - ganz so, wie Sie es von Ihrer Textverarbeitung kennen. Wenn Sie eine neue Site anlegen, erzeugt Muse standardmäßig eine leere Start- und eine ebenfalls leere Masterseite. Diese beiden Seiten sind der Ausgangspunkt bei der Entwicklung einer Muse-Site. Wenn Sie bereits mehr oder minder klare Vorstellungen von der Site-Struktur haben, sollten Sie diese zunächst in der Plandarstellung anlegen.

Das Anlegen von neuen Seiten ist einfach: Führen Sie den Mauszeiger über die Startseite. Diese wird durch einen blauen Rahmen hervorgehoben und Muse blendet seitlich und unterhalb der Seitenvisualisierung kleine Kästchen ein, deren Pluszeichen anzeigen, dass Sie eine Seite auf derselben Hierarchieebene oder eine Stufe darunter generieren können.

Weisen Sie dem neuen Dokument eine Bezeichnung zu und legen Sie alle weiteren Seiten an, die für das Grundgerüst Ihrer Site relevant sind.

Nachdem Sie eine erste untergeordnete Ebene angelegt haben, legen Sie durch Klicks auf das Pluszeichen weitere Seiten an. Das Schöne an der Planungsfunktion: Sie können die Site-Struktur per Drag-und-Drop beliebig verändern, die Position einer Seite mit minimalem Aufwand ändern oder sogar die gesamte Struktur mit wenigen Klicks umbauen.

Was mit den Seiten funktioniert, lässt sich auch auf die Vorlagen anwenden: Unterhalb der Site-Struktur finden Sie die Masterverwaltung. Auch dort können Sie einfach neue Vorlagen anlegen. Wenn Sie Seiten oder Vorlagen nicht mehr benötigen, können Sie diese mit einem Klick auf das Delete-Icon in der rechten oberen Ecke einfach entfernen.

Das Zuweisen von Vorlagen zu Seiten ist ebenfalls sehr einfach: Ziehen Sie das gewünschte Masterdokument einfach auf die betreffende Seite. Die Vorlagenzuweisung erfolgt pro Seite, wirkt sich also nicht auf einen vollständigen Hierarchiezweig aus.

Bequemes Seiten-Design

Die wichtigsten Werkzeuge für die Entwicklung Ihrer Seiten beziehungsweise der Masterseite finden Sie in der Werkzeugleiste. Dort stehen Ihnen vordefinierte Menüleisten zur Verfügung, außerdem verschiedene Widgets, die Sie beliebig auf Ihren Seiten platzieren können, und grafische Elemente und Muster, die Sie an Ihre Vorstellungen anpassen können. Die Werkzeugleisten lassen sich, so wie man es von Indesign und Co. kennt, einfach ein- und ausblenden.

Ob Muse überhaupt für IhreZwecke taugt, können Sie auf der Showcase-Seite (muse.adobe.com/showcase.html ) prüfen. Dort hat Adobe einige Musterseiten zusammengestellt, die Ihnen einen ersten Eindruck davon vermitteln, was Sie alles mit dem Programm realisieren können.

Um es vorwegzunehmen: Für die Entwicklung von Shops, Communitys und vergleichbaren Anwendungen ist Muse nicht zu gebrauchen. Der Fokus liegt auf designorientierten Websites ohne Web 2.0-Funktionen. In der Regel empfiehlt es sich, nach dem Anlegen der Site-Struktur, die Master-Seiten zu bearbeiten.

Beim Anlegen der Site haben Sie der Vorlage bereits verschiedene Eigenschaften zugewiesen. Im nächsten Schritt geht es darum, die Vorlagen mit Navigationsmenüs, Firmenlogo, Hintergründen usw. auszustatten. Mit einem Doppelklick auf die Masterseite öffnen Sie diese im Designmodus und können die gewünschten Elemente zuweisen.

Mit Widgets arbeiten

Muse kommt mit einer Widget-Bibliothek daher, in der Sie eine Fülle an vordefinierten Komponenten finden, die in der Regel interaktive Funktionen oder Verhaltensweisen bieten. Sie müssen diese Komponenten lediglich auf Ihren Seiten platzieren und an die jeweilige Anforderung anpassen.

Zu diesen Widgets gehören Menüleisten, Panels, Diashows und weitere. Die Widgets sind über die Werkzeugleiste verfügbar. Sollte sie nicht eingeblendet sein, öffnen Sie diese mit dem Menübefehl Window/Widgets Library.

In der Bibliothek sind die Module in folgende Kategorien eingeteilt: Compositions, Menus, Panels und Slideshows. Wenn Sie über eine Masterseite ein seitenweites Menüsystem einrichten wollen, öffnen Sie die Kategorie Menus und markieren einen der Einträge. Die Bibliothek stellt Ihnen eine Vorschau zur Verfügung. Um das gewünschte Menü auf der Seite zu platzieren, ziehen Sie es an die gewünschte Position.

Nach dem Einfügen können Sie sich an die Bearbeitung der Komponenten machen. Dazu klicken Sie in der rechten oberen Ecke des Widgets auf den blau hinterlegten Pfeil. Im Options-Menü bestimmen Sie beispielsweise den Menütyp. Das Menü kann für alle Top-Level-Seiten, für alle Seiten oder für eine gezielte Auswahl gelten. Sie können im Optionsdialog außerdem die Ausrichtung und die Größe bestimmen.

Mit den Menü-Widgets können Sie auch Untermenüs realisieren. Diesen können Sie über die Arbeitsfunktionen auch Text oder Bilder zuweisen. Um den Stil der Menüs anzupassen, wechseln Sie in die Designansicht, aktivieren das Menüelement und weisen diesem beispielsweise über die Farbauswahl einen anderen Farbton zu. Über die Registerkarte Fill können Sie dann - wie bei anderen Elementen auch - den Füllungstyp und die Deckkraft anpassen.

Eines der interessanten Widgets ist das Navigationsmenü Tabbed Panels. Es erlaubt das Einführen eines Navigationssystems mit Registerkarten. Nachdem Sie das Menü auf Ihrer Masterseite eingefügt haben, können Sie es über das Pluszeichen um beliebig viele Registerkarten erweitern.