Muse Kompakt Kurs – Lektion 2 – Muse Projekt starten

In dieser Lektion sehen wir uns an, wie wir ein Projekt in Muse starten und welche wichtigen Einstellungen am Beginn zu beachten sind. Weiters werden wir uns dann im Planungsmodus ansehen, wie wir eine Seitenstruktur aufbauen, die als Basis für unser Projekt dient. Ich werde auch einen ersten Einblick geben, wie sich diese Struktur auf unsere automatisch erstelle Navigation auswirkt.

 

Ein neues Muse Projekt starten

Wenn du Muse startest, gibt es 2 Möglichkeiten ein neues Projekt zu starten. Die erste ist direkt am Start Screen („Aktuell“). Dort findest du links oben einen Button „Neu …“.

Muse Start Screen

Muse Start Screen

Eine andere Möglichkeit ist über das Menü auf „Datei“ und dort „Neue Site …“ oder einfach das Tastenkürzel CTRL-N (für Windows und CMD-N (für MAC).

Muse Datei Menue

Muse Datei Menü

Auf dem Start Screen kannst du übrigens auch bestehende Projekte öffnen – mit „Öffnen …“ oder einfach eines der letzten Projekte auf dem Screen anklicken. Ähnlich geht es auch mit dem Menü unter „Datei -> Site öffnen …“ oder „Datei -> Zuletzt verwendete Datei öffnen“.

Wenn du ein neues Projekt startest, dann bekommst du folgenden Start Screen:

Muse - Neue Site

Muse – Neue Site

Es gibt hier zwar nicht sehr viele Auswahlmöglichkeiten, aber vor allem die beiden in der ersten Zeile sind recht wichtig für das Verhalten der Seite.

Zuerst einmal zur maximalen Seitenbreite. Diese gibt an, wie breit die Inhalte maximal dargestellt werden. Das bedeutet bei einer Einstellung von 960, dass die Inhalte maximal 960px breit dargestellt werden, auch wenn das Browserfenster 1200px breit ist. Diese Einstellung und auch die anderen lassen sich natürlich jederzeit beim bearbeiten die Inhalte verändern.

Noch interessanter ist die Angabe „Variable Breite“ und „Feste Breite“. Wenn man die Hintergründe von responsive Design noch nicht so gut kennt, dann könnte man daraus schliessen, dass Feste Breite nicht responsive und variable Breite responsive bedeutet. In Wirklichkeit sind beide Einstellungen für responsive Design. Variable Breite bedeutet, dass sich die Inhalte auch zwischen den Breakpoint bzw. Haltepunkten dynamisch verändert. Als Beispiel würde ein Bild laufend kleiner werden, wenn man das Browser Fenster in der Breiter kleiner zieht. Bei der festen Breite gibt es zwischen den Haltepunkten keine Veränderung. Hier werden die Inhalte nur bei den Haltepunkten angepasst. Dazwischen bleiben die Inhalte fest.

Wenn man streng nach der Definition von responsive Design geht, dann müsste man „Variable Breite“ verwenden. Ich persönlich sehe das nicht so streng. Ich finde, dass es wichtig ist, dass die Seiten sich an das Gerät anpassen und überall gut aussehen und bedienbar sind. Wenn man das auch mit fester Breite erreichen kann, dann finde ich das auch in Ordnung.

Wenn man mit der variablen Breite von Muse arbeitet, dann wird man das eine oder andere Mal ein recht eigenartiges Verhalten feststellen. Erstens schieben sich Inhalte auch bei richtiger Einstellung manchmal über die Ränder hinaus. Noch unangenehmer ist, dass sich bei dieser Einstellung der Breite manche Inhalte in der Höhe auseinander laufen. Dies bedeutet, dass bei drei nebeneinanderliegenden Elementen das erste weiter oben sein kann als das letzte, obwohl diese am Anfang alle die selbe Position hatten.

Die nächste Zeile ist auf dem oberen Screenshot schwer zu erkennen, da das Drop-Down für die Breite aufgeklappt ist. Man sieht die Einstellungen aber auch sehr gut auf dem unteren Screenshot für die Erweiterten Einstellungen.

Die Spalten dienen dazu um auf der Seite ein Gridsystem darzustellen. Werden mehr als eine Spalte eingestellt, dann kann man auch den Abstand zwischen den Spalten ändern. Bei Adobe Muse, gibt es zwar keine Notwendigkeit die Inhalte in einem Gridsystem anzuordnen, da alles völlig frei positioniert werden kann, dennoch gibt es mitunter Gründe das doch zu tun.

Der erste Grund wäre, wenn die erstellten Inhalte als Prototyp für eine spätere Ausarbeitung mit einem responsive Framework in HTML durchgeführt werden soll. Dort muss man sich in der Regel an Gridspalten halten. Ein zweiter Grund ist, dass durch die Spalten ein wenig Ordnung in die Seiten kommt und nicht alles frei angeordnet und wild positioniert ist.

Man kann bei der Seiten-Einstellung auch noch die erweiterten Einstellungen anzeigen lassen:

Muse - Neue Site - Erweitert

Muse – Neue Site – Erweitert

Die Angabe „Minimale Höhe“ gibt an, wo hoch die Seite mindestens ist, auch wenn weniger Inhalte auf der Seite vorhanden sind. Mit den Rändereinstellungen, können auf allen Seiten verschiedene Ränder und Innenabstände definiert werden.

Die Auflösung sollte dann verändert werden, wenn die Bildinhalte für höher auflösende Geräte (mit Retina Display) bereitgestellt werden. Der Nachteil daran ist, dass aber dadurch eine Menge mehr an Daten übertragen werden und dadurch die Ladezeit deutlich erhöht wird.

Die Sprache dient vor allem Screenreader um bei Vorlesen die Aussprache richtig zu betonen.

Bleibt jetzt nur noch die Checkbox bei „Footer immer unten„. Ist diese aktiviert, dann werden die Inhalte, die in der Fußzeile bei Muse eingegeben werden immer am unteren Ende im Browser dargestellt. Die geschieht völlig unabhängig von den Inhalten und der minimalen Höhe. Ist die Checkbox deaktiviert, wird die Fußzeile direkt an die Inhalte angeschlossen und kann bei wenigen Inhalten dann auch mitten in der Seite liegen.

 

Jetzt geht es ans planen

Wenn wir die Einstellungen erfolgreich definiert haben, dann gelangen wir nach bestätigen in den Planungs-Modus. Diesen werden wir uns jetzt näher ansehen.

Muse - Planungsmodus

Muse – Planungsmodus

Im Planungsmodus, haben wir im oberen Bereich unsere Seiten und im unteren Bereich unsere Musterseiten. Wenn man mit der Maus über eine bestehende Seite (am Anfang gibt es nur Homepage) fährt, dann gibt es die Möglichkeit auf der rechten (1) und linken (2) Seite eine neue Seite hinzuzufügen. Die Anordnung ist wichtig für die spätere Anordnung der Menüpunkte in der Navigation, sofern diese automatisch von Muse generiert wird. Fügt man unten (3) eine neue Seite hinzu, dann erstellt man damit eine neue Ebene, sprich Untermenüpunkte.

Sehen wir uns einmal den Planungsmodus an, wenn wir einige Seiten hinzugefügt haben.

Muse - Planungsmodus mit Seitenstruktur

Muse – Planungsmodus mit Seitenstruktur

Wir haben jetzt auf der ersten ebene 4 Seiten – unsere Home Seite und dann noch Produkte, Services und Kontakt. Bei den Produkten, haben wir noch 2 Unterseiten eingefügt, in unserem Beispiel Produkt 1 und Produkt 2. Wenn man weiter ins Detail gehen will, dann lassen auch bei diesen beiden Seiten noch weitere Seiten unterhalb einfügen.

Wenn man die Reihenfolge verändern will, dann ist das kein Problem. Das lässt sich jederzeit mit Drag & Drop anpassen. Damit können nicht nur Seiten innerhalb einer Ebene verschoben werden, sondern von darunter liegenden Ebenen nach oben verschoben werden oder umgekehrt. Auf diese Weise kann man gleich zu Beginn sein Projekt und dessen Struktur wunderbar planen. Ich finde, das ist eine Funktion, die man selten bei anderen Web Design Tools findet.

Es gäbe natürlich die Möglichkeit so eine Struktur auch mit externen Programmen zu erstellen, aber das Feine an der Planung in Muse, ist dass auch automatisch das Menü damit erstellt wird. Wie das bei unserer oberen Struktur aussehen wird, dass ist hier zu sehen:

Muse - Navigation automatisch erzeugt

Muse – Navigation automatisch erzeugt

Wir sehen in diesem Bild, dass auch die Untermenüpunkte als Drop-Down hinzugefügt wurden. Dies lässt sich entweder ein- oder ausschalten. Leider kann man aber die Tiefe dabei nicht angeben. Das bedeutet, dass bei Darstellung der Untermenüpunkte das Menü bis zur untersten Ebene erzeugt wird.

Würde man jetzt etwas im Planungsmodus verändern, wie zum Beispiel den Namen der Seite, was durch einen Klick auf den Titel der unterhalb des Seitenbildes möglich ist (siehe Screenshot „Muse – Planungsmodus mit Seitenstruktur“), dann würde das sofort in der automatisch erstellten Navigation berücksichtigt werden. Wie schon vorhin erwähnt, kann man jederzeit auch die Reihenfolge der Menüpunkte durch einfaches Drag & Drop verändern.

Die Navigation, lässt sich, so wie fast alles in Muse noch individuell designen. Mehr zur Navigation und wie man diese gestaltet, gibt es dann in einer eigenen Lektion.

 

Site Eigenschaften ändern

Sehen wir uns zum Abschluss noch an, wie wir die Site-Eigenschaften, die wir beim Start des Projektes angegeben haben verändern können. Um wieder zu dem Fenster mit den Eigenschaften zu kommen, wählst du im Menü „Datei“ und dann „Site-Eigenschaften …“ aus:

Muse - Site-Eigenschaften verändern

Muse – Site-Eigenschaften verändern

Es sollte dann das Fenster mit den Eigenschaften erscheinen, dass du bereits kennst:

Muse Site-Eigenschaften ändern - "Layout" Tab

Muse Site-Eigenschaften ändern – „Layout“ Tab

Wie du dich vielleicht erinnern kannst, sind hier die selben Eigenschaften einzustellen, wie beim Start des Projektes. Einziger unterschied, ist jetzt, dass unsere Informationen im Tab „Layout“ stehen und es noch zwei weitere Tab mit der Bezeichnung „Inhalt“ und „Erweitert“ gibt. Diese werden wir uns dann in einer späteren Lektion noch genauer ansehen.

 

Wie geht es weiter

So das war es für heute. Du hast heute gelernt, wie man in Muse ein neues Projekt anlegt, was die Eigenschaften im „Neue Site“ Fenster bedeuten und wie man dieses setzen sollte. Du weisst auch, wie man diese Eigenschaften nachträglich ändern kann.

Weiters hast du erfahren, wie man ein Website Projekt im Planungsmodus organisiert und wie sich die Site-Struktur auf deine automatisch erzeugte Navigation auswirkt.

Das nächste mal werden wir die ersten Seiteninhalte hinzufügen und uns die verschiedenen Views von Muse näher ansehen.

Bis zur nächsten Lektion zu sehen.

Liebe Grüße
Andreas – Dein WebDesign-Coach

 

 

 

 

 

 

Comments

  1. Hallo Andreas,

    zu diesem toll geschriebenen Text habe ich nur einen kleinen Verbesserungsvorschlag.
    Das Menü mit den Seitenlinks: „Home, Produkte usw.“ erscheint nicht von ganz alleine, sondern man muss es auf der der Mustervorlage unter Widgets-Bibliothek/Menüs/Horizontal in der Kopfzeile ablegen und auf Menütyp „alle Seiten“ umstellen.

    Gruß
    Tom

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.