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.

Arbeiten mit hierarchischen Musterseiten

Muse ermöglicht Ihnen das Erstellen von Musterseiten, die dann auf andere Musterseiten angewendet werden können. Hierarchische Musterseiten können mit Musterseiten verglichen werden, die in der Planungsansicht auf eine Seite angewendet werden. In früheren Versionen von Muse konnten Sie zwar mehrere Musterseiten erstellen, aber Sie konnten einer Webseite nur jeweils eine Musterseite mit den darin enthaltenen Seitenelementen zuweisen.

Wenn Sie dann eine Website mit zwei verschiedenen Bereichen erstellen wollten, die einander zwar ähnlich waren, aber dennoch ein individuelles Aussehen haben sollten, konnten Sie eine Musterseite kopieren, sie leicht ändern und sie dann auf bestimmte Seiten anwenden. Dies hatte zur Folge, dass beide Musterseiten häufig einige derselben Elemente enthielten. Wenn Sie dann Sie Website aktualisieren wollten, mussten Sie den Inhalt beider Musterseiten bearbeiten, damit alle Elemente weiterhin synchronisiert waren.

Ab Muse 4.0 können Sie eine A-Musterseite für die gemeinsamen Elemente erstellen, die in mehreren Musterseiten angezeigt werden (beispielsweise können Sie den Hintergrund und eine Fußzeile hinzufügen, wie dies in den vorangegangenen Abschnitten beschrieben wurde). Anschließend können Sie weitere Musterseiten erstellen, welche sämtliche Elemente der A-Musterseite übernehmen und außerdem alle Elemente enthalten, die nur im ersten Bereich verwendet werden sollen. Wenn Sie dann eine dritte Musterseite erstellen, könnte diese die Elemente der A-Musterseite sowie alle Elemente enthalten, die nur im zweiten Bereich verwendet werden.   

Der Vorteil der Verwendung von hierarchischen Musterseiten ist, dass auf diese Weise jedes Element auf eine einzige Instanz beschränkt wird. Wenn Sie das Design einer Website ändern möchten, müssen Sie jedes Element nur an einer einzigen Stelle bearbeiten, und alle Instanzen des Elements auf der gesamten Website werden automatisch aktualisiert.

Für das Verwalten und Zuweisen von Musterseiten verwenden Sie die Planungsansicht. Genau wie Sie auf eine Musterseitenminiatur klicken und sie auf eine Seitenminiatur ziehen können, um die Musterseite auf eine Seite anzuwenden, können Sie mehrere Musterseiten erstellen und sie dann auf eine andere Musterseite ziehen. Auf Wunsch können Sie auch in der Planungsansicht mit der rechten Maustaste auf eine beliebige Musterseiten- oder Seitenminiatur klicken und sie dann mit der Option Musterseiten im angezeigten Kontextmenü als Musterseite festlegen.

Wenn Sie mit dem Cursor auf den Namen einer Seite oder Musterseite zeigen, wird in einer QuickInfo die Hierarchie der angewendeten Musterseiten für diese Seite oder Musterseite angezeigt.

Sie haben nun die A-Musterseite mit einem gekachelten Browser-Füllungshintergrund und dem Inhalt der Fußzeile erstellt. Im nächsten Abschnitt erstellen Sie eine neue Musterseite, die den Inhalt der A-Musterseite übernimmt, und fügen dann die Kopfzeile hinzu, sodass Sie sie auf die anderen Seiten der Website anwenden können. Führen Sie folgende Schritte aus:

  1. Während die Sitemap in der Planungsansicht angezeigt wird, bewegen Sie den Cursor auf die Miniatur der A-Musterseite. Daraufhin wird auf beiden Seiten ein Pluszeichen angezeigt. Klicken Sie auf das Pluszeichen auf der rechten Seite der A-Musterseite, um eine völlig neue Musterseite zu erstellen. Standardmäßig wird die neue Musterseite mit B-Musterseite benannt.
  2. Doppelklicken Sie auf das Textfeld B-Musterseite unter der Miniatur, um den Namen zu ändern. Geben Sie einen aussagekräftigeren Namen für die neue Musterseite ein, die Sie gerade erstellt haben: Main.
  3. Klicken Sie mit der rechten Maustaste auf die Miniatur der Musterseite Main und klicken Sie im daraufhin angezeigten Kontextmenü auf Musterseiten >A-Musterseite.
In dieser Übung machen Sie sich mit dem Adobe-Muse-Arbeitsbereich vertraut und sehen, wie Sie eine funktionsreiche Website erstellen, ohne auch nur eine Zeile Code zu schreiben. Sie werden auch lernen, wie man eine Sitemap erstellt, wie man sich auf Musterseiten zurechtfindet und wie die Funktion „Browser-Füllung“ innerhalb von Muse funktioniert.
Wählen Sie im Menü die A-Musterseite aus, um sie auf die Main-Musterseite anzuwenden.

Nachdem Sie die A-Musterseite auf die Musterseite „Main“ angewendet haben, wird die Miniatur der Musterseite „Main“ aktualisiert und hat nun dasselbe Aussehen wie die A-Musterseite. In der blauen Beschriftung unter der Miniatur der Musterseite „Main“ wird A-Musterseite angezeigt, weil Sie sie in Schritt 3 auf die Musterseite „Main“ angewendet haben.

Beachten Sie jedoch, dass die Musterseite „Main“ nicht tatsächlich die Elemente der A-Musterseite enthält, weil Sie ja nicht einfach ein Duplikat der A-Musterseite erstellt haben. Stattdessen haben Sie die Musterseite „Main“ so konfiguriert, dass sie mit der A-Musterseite verknüpft ist. Wenn Sie nun neue Inhalte zur A-Musterseite hinzufügen, werden diese automatisch auch auf der Musterseite „Main“ angezeigt.

Wie bereits erwähnt, haben hierarchische Musterseiten den Vorteil, dass die Fußzeile, das Menü und der Hintergrund nur auf der A-Musterseite vorhanden sind. Wenn ein Kunde später einen anderen gekachelten Hintergrund wünscht, brauchen Sie nur die A-Musterseite zu aktualisieren, und die Musterseite „Main“ wird automatisch ebenfalls aktualisiert.

Später in diesem Tutorial erstellen Sie zwei separate Musterseiten für eine unterschiedliche Darstellung der beiden verschiedenen Bereiche der Website. Vorläufig genügt es aber, die Seiten in der Planungsansicht zu aktualisieren, damit alle Seiten die neue Musterseite „Main“ und nicht mehr die A-Musterseite verwenden.

  1. Klicken und ziehen Sie die Musterseite „Main“ zur Miniatur der Seite „food“ in der oberen linken Ecke. Beachten Sie beim Ziehen der Musterseitenminiatur „Main“ auf die Miniatur der Seite „food“, dass sich der blaue Text unterhalb der Miniatur der Seite „food“ von [A-Musterseite] in [Main] ändert.

Dies ist die gebräuchlichste Methode, um Musterseiten in der Planungsansicht auf Seiten anzuwenden. Dasselbe ist aber auch mithilfe des Kontextmenüs möglich:

  1. Klicken Sie mit der rechten Maustaste auf die Miniatur der Seite „events“ und klicken Sie im daraufhin angezeigten Kontextmenü auf Musterseiten > Main.
In dieser Übung machen Sie sich mit dem Adobe-Muse-Arbeitsbereich vertraut und sehen, wie Sie eine funktionsreiche Website erstellen, ohne auch nur eine Zeile Code zu schreiben. Sie werden auch lernen, wie man eine Sitemap erstellt, wie man sich auf Musterseiten zurechtfindet und wie die Funktion „Browser-Füllung“ innerhalb von Muse funktioniert.
Verwenden des Kontextmenüs, um „Main“ als Musterseite für die Seite „events“ festzulegen.

  1. Verwenden Sie Ihre bevorzugte Methode (siehe Schritte 4 und 5), um „Main“ als Musterseite für die übrigen drei Seiten festzulegen: „home“, „about“ und „visit“.

Nachdem Sie diese Änderung vorgenommen haben, sollte jetzt in allen blauen Beschriftungen unter den Seitenminiaturen [Main] angezeigt werden. Wenn Sie jetzt mit dem Cursor auf eine der blauen Beschriftungen zeigen, wird eine QuickInfo mit der aktuellen Hierarchie der angewendeten Musterseiten angezeigt.

In dieser Übung machen Sie sich mit dem Adobe-Muse-Arbeitsbereich vertraut und sehen, wie Sie eine funktionsreiche Website erstellen, ohne auch nur eine Zeile Code zu schreiben. Sie werden auch lernen, wie man eine Sitemap erstellt, wie man sich auf Musterseiten zurechtfindet und wie die Funktion „Browser-Füllung“ innerhalb von Muse funktioniert.
Eine hilfreiche QuickInfo mit der Hierarchie wird angezeigt, wenn Sie mit dem Cursor auf eine Beschriftung zeigen.

In diesem Beispiel ist die Hierarchie nur eine Ebene tief. Anders ausgedrückt: die Musterseite „Main“ übernimmt den Inhalt der A-Musterseite. Beachten Sie dabei jedoch, dass Sie auf Wunsch auch eine ganze Kette von Musterseiten erstellen können. Beispielsweise könnten Sie Folgendes erstellen: eine Musterseite namens „Header“, in der sich nur der Inhalt der Kopfzeile befindet, eine zweite Musterseite namens „Footer“, die den Inhalt der Musterseite „Header“ übernimmt, und eine weitere Musterseite namens „Main“, die sämtliche Inhalt der Musterseite „Footer“ übernimmt (einschließlich Kopfzeile). Je nach Design der Website und der Wahrscheinlichkeit für Änderungen an bestimmten Elementen können Sie die Übernahme von Inhalten von einer Musterseite zur nächsten mehrere Ebenen tief verschachteln. Wenn Sie die Designelemente auf diese Weise gegeneinander abschotten, erstellen Sie quasi Symbole, die Sie später bei Bedarf mühelos finden und bearbeiten können.

Fahren Sie mit dem nächsten Tutorial fort: Erstellen Ihrer ersten Website mit Muse | Teil 2. Dort lernen Sie, wie Sie mit Widgets arbeiten (integrierten interaktiven Website-Funktionen, die Sie auf Seiten ziehen können). Mit Widgets können Sie Ihren Seiten rasch erweiterte Funktionen hinzufügen, ohne Code zu schreiben. Sie erfahren, wie Sie das Verhalten und Aussehen von Widgets bearbeiten, um anzupassen, wie sie innerhalb des Designs der Website dargestellt werden.

Hinzufügen des Kopfzeileninhalts zur Musterseite „Main“

Sie haben die Fußzeile bereits fertiggestellt, indem Sie ein Menü-Widget zur Musterseite „Main“ hinzugefügt haben. Im nächsten Schritt fügen Sie die Navigation auf oberster Ebene hinzu. Führen Sie folgende Schritte aus, um Inhalt im Kopfzeilenbereich hinzuzufügen.

  1. Doppelklicken Sie in der Planungsansicht auf die Miniatur der Musterseite „Main“, um die Seite zu öffnen und zu beginnen, sie in der Entwurfsansicht zu bearbeiten (sofern sie noch nicht geöffnet ist).
  2. Ziehen Sie mit dem Rechteck-Werkzeug ein Rechteck, das in der oberen linken Ecke des sichtbaren Browserbereichs beginnt und die gesamte Breite bis zur oberen rechten Ecke abdeckt. Ziehen Sie mithilfe des Auswahlwerkzeugs die Griffe an der oberen, linken und rechten Seite des Rechtecks, bis ganz kurz der rote Rahmen angezeigt wird. Der rote Rahmen bedeutet, dass das Rechteck auf eine Breite von 100 % gesetzt ist und damit die gleiche Breite wie die Fußzeile hat.
fig_30_building
Zeichnen Sie ein Rechteck, das den gesamten oberen Teil des Browserfensters abdeckt.

 

Nachdem Sie die Griffe gezogen haben, sollte das Rechteck ca. 1160 Pixel breit und 253 Pixel hoch sein. Der horizontale x-Wert ist -100, was bedeutet, dass sich die obere linke Ecke des Rechtecks 100 Pixel von der oberen linken Ecke der Seite weg befindet. Der y-Wert ist 0 (was bedeutet, dass die obere linke Ecke des Rechtecks vertikal der oberen linken Ecke der Seite entspricht). Wenn Sie diese Werte genau festlegen möchten, können Sie die Felder im Transformationsbedienfeld oder im Steuerungsbedienfeld prüfen, während das Rechteck ausgewählt ist.

  1. Setzen Sie die Konturbreite auf 0 und verwenden Sie das Menü „Fläche“, um die Flächenfarbe auf „Ohne“ zu setzen. Klicken Sie auf den Ordner auf der rechten Seite des Bildbereichs und navigieren Sie zu dem Bild mit dem Namen „tile-header.png“. Wählen Sie im Menü „Anpassen“ die Option „Nebeneinander“ aus.
fig_31_building
Verwenden Sie das Menü „Anpassen“, um das Hintergrundbild horizontal zu kacheln.

 

Obwohl die Kopfzeile aus einem einzelnen Rechteck besteht, wird durch das horizontal gekachelte Hintergrundbild, das das Rechteck füllt, der Eindruck vermittelt, dass sich über einem schwarzen Rechteck ein graues Rechteck befindet.

  1. Wählen Sie Datei > Platzieren oder verwenden Sie den Tastaturbefehl Bfhl+D (Mac) bzw. Strg+D (Windows), um das Dialogfeld „Importieren“ zu öffnen.
  2. Navigieren Sie, um die Datei „bg-ribbon.png“ im Beispieldateiordner auszuwählen. Klicken Sie auf „Öffnen“, um die Datei auszuwählen, und schließen Sie dann das Dialogfeld „Importieren“.
  3. Klicken Sie einmal in die Mitte des Kopfzeilenrechtecks, nahe am oberen Rand der Seite. Hierdurch wird eine einzelne Instanz der Datei „bg-ribbon.png“ mit ihren Originalmaßen platziert.
  4. Richten Sie die orangefarbene Ribbon-Grafik so mit dem Auswahlwerkzeug aus, dass sie vertikal nahe am oberen Rand der Kopfzeile zentriert ist und die Breite der Seite abdeckt.
fig_32_building
Orangefarbene Ribbon-Grafik so positioniert, dass sie in der Kopfzeile zentriert ist.

 

Die orangefarbene Ribbon-Grafik bildet den Hintergrund des Menüs auf der obersten Ebene, das Sie im nächsten Abschnitt hinzufügen.

Duplizieren einer Musterseite

Der Kopfzeileninhalt in der Musterseite „Main“ ist jetzt fertig. Sie könnten die Musterseite „Main“ zwar einfach für jede Seiten in der Site verwenden, aber dieses Site-Design hat zwei Bereiche. Das Design der Musterseite „Main“ wird letztendlich für die Seiten „home“ und „visit“ verwendet. Eine zweite, etwas andere Musterseite wird für die Seiten „food“, „events“ und „about“ verwendet.

Führen Sie folgende Schritte aus, um die Musterseite „Main“ zu duplizieren:

  1. Klicken Sie in der Planungsansicht mit der rechten Maustaste auf die Miniatur der Musterseite „Main“.
  2. Wählen Sie im Kontextmenü, das jetzt angezeigt wird, „Seite duplizieren“.
fig_38_building
Verwenden Sie das Menü, um die bestehende Musterseite „Main“ zu duplizieren.

 

Rechts neben der Musterseite „Main“ erscheint eine neue Musterseite mit dem Default-Namen „Main Kopie“. Da Sie die Musterseite „Main“ duplizieren, basiert die neue Musterseite bereits auf der A-Musterseite.

  1. Doppelklicken Sie auf das Namensfeld unter der soeben von Ihnen erstellten Musterseite und benennen Sie sie in „Foreground“ um.

Im nächsten Abschnitt lernen Sie, wie die Anordnung von Elementen in einer Musterseite so festgelegt wird, dass Elemente nicht immer unter Seitenelementen angezeigt werden, sondern auch über Seitenelementen angezeigt werden können. Speichern Sie zunächst Ihre Arbeit.

  1. Wählen Sie „Datei“ > „Site speichern“ aus.

Das Erstellen eines Duplikats einer Musterseite hat unter anderem den Vorteil, dass Teile des Inhalts über anderem Seiteninhalt angezeigt werden können, fast so, als wenn Sie „Anordnen“ > „In den Vordergrund“ ausgewählt hätten. Dieses „Vordergrund“-Verhalten ist für die Seiten „food“ und „events“ erwünscht.

Die Möglichkeit, die Stapelreihenfolge von Musterseitenelementen festzulegen, ist eine neue Funktion, die in Muse 4.0 verfügbar ist. Zuvor mussten Sie Kopfzeilen- bzw. Fußzeilenelemente auf jede Seite anstatt auf eine Musterseite setzen, wenn Sie allgemeine Site-Elemente auf einer Ebene über anderen Inhalt im Seitenlayout legen wollten.

Festlegen von Elementen in Musterseiten, die im Vordergrund angezeigt werden sollen

In Muse können Sie in der Entwurfsansicht ein Seitenelement auswählen und dann „Objekt“ > „In den Vordergrund“, „Schrittweise nach vorne“, „In den Hintergrund“ oder „Schrittweise nach hinten“ wählen, um ein Element über oder unter einem anderen Element auf der Seite anzuzeigen. (Sie können auch mit der rechten Maustaste auf ein Element oder eine Gruppe klicken und „Anordnen“ > „In den Vordergrund“, „Schrittweise nach vorne“, „In den Hintergrund“ oder „Schrittweise nach hinten“ wählen, um die Stapelreihenfolge festzulegen.)

Bei Sites, die mit früheren Versionen von Muse entwickelt wurden, ist das Standardverhalten, dass Elemente auf einer Musterseite immer hinter allen Elementen auf einer Seite angezeigt werden, wenn die Seite gerendert wird. Diese Hintergrundlage war manchmal problematisch (abhängig vom Site-Design), weil der einzige Workaround darin bestand, Elemente, die Sie normalerweise auf einer Musterseite platzieren würden, zu kopieren und auf allen Site-Seiten zu einzufügen, auf denen sie im Vordergrund angezeigt werden sollen.

Muse bietet jetzt die Möglichkeit, die Anordnung der Elemente auf Musterseiten zu steuern. Anstatt immer alles auf einer Musterseite hinter Seitenelementen anzuzeigen, können Sie jetzt Elemente auf Musterseiten auswählen und festlegen, dass sie als Vordergrundelement angezeigt werden sollen. Elemente auf einer Musterseite, die als Vordergrundelemente festgelegt sind, werden über allen Seitenelementen angezeigt.

Diese neue Option ist verfügbar, indem „Objekt“ > „Verschieben zu“ > „Musterseite Foreground“ gewählt wird. Sie können auch in der Entwurfsansicht mit der rechten Maustaste auf ein beliebiges Element klicken, während Sie eine Musterseite bearbeiten, und dann im angezeigten Kontextmenü „Verschieben zu“ > „Musterseite Foreground“ wählen.

In diesem Beispielprojekt erfordert es das Design, dass der Inhalt in den Seiten „home“ und „visit“ die Standardstapelreihenfolge verwendet (Seitenelemente werden am oberen Rand der Kopfzeile in der Musterseite „Main“ angezeigt), aber die Seiten „food“, „events“ und „about“ sollen nicht die Standardstapelreihenfolge verwenden.

Für die Seiten „food“ und „visit“ werden Sie die Musterseite „Foreground“ so aktualisieren, dass der Kopfzeileninhalt im Vordergrund über dem Seiteninhalt angezeigt wird, wenn die Seiten scrollen. Führen Sie folgende Schritte aus:

  1. Doppelklicken Sie in der Planungsansicht auf die Miniatur der Musterseite „Foreground“, um die Seite zu öffnen und zu beginnen, sie in der Entwurfsansicht zu bearbeiten (sofern sie noch nicht geöffnet ist).
  2. Klicken Sie mit dem Auswahlwerkzeug und ziehen Sie den gesamten Kopfzeileninhalt einschließlich dem Rechteck mit dem gekachelten Hintergrund, der platzierten orangefarbenen Ribbon-Grafik, dem Menü-Widget und dem animierten GIF-Logo in der Mitte.
  3. Wählen Sie den gesamten Kopfzeileninhalt aus, klicken Sie mit der rechten Maustaste und wählen Sie dann „Verschieben zu“ > „Musterseite Foreground“. Im Gegensatz zum üblichen blauen Rahmen für ausgewählte Objekte haben Elemente, die im Vordergrund angezeigt werden sollen, einen roten Rahmen, wenn sie ausgewählt sind.
fig_39_building
Verschieben Sie den Kopfzeileninhalt mithilfe des Kontextmenüs in den Vordergrund.

Hierdurch wird gewährleistet, dass die Kopfzeile oberhalb der Seitenelemente auf den Seiten angezeigt wird, auf denen die Musterseite „Foreground“ angewendet wurde.

  1. Heften Sie, während die gesamte Kopfzeile noch ausgewählt ist, die Kopfzeile am oberen Rand der Seite an, damit die Kopfzeile nie mitscrollt, selbst wenn die Seite scrollt. In Teil 7 werden Sie mehr über das Anheften von Objekten lernen; klicken Sie jetzt nur auf die obere mittige Anheft-Position im Steuerungsbedienfeld, um die Kopfzeile an dieser Position anzuheften.
fig_40_building
Heften Sie die ausgewählte Kopfzeile an, indem Sie die obere mittige Position auswählen.

  1. Klicken und ziehen Sie die Musterseite „Foreground“ auf die Seite „food“, um sie anzuwenden. Wiederholen Sie diesen Schritt noch zwei Mal, um die Musterseite „Foreground“ auf die Seite „events“ und die Seite „about“ anzuwenden.

Nachdem Sie diese Änderung vorgenommen haben, zeigt der blaue Beschriftungstext das Wort [Foreground] an, was bedeutet, dass die Seiten „food“, „events“ und „about“ jetzt die Musterseite „Foreground“ verwenden. Wenn Sie den Cursor auf die blaue [Foreground]-Beschriftung halten, sehen Sie eine Quickinfo mit der Information, dass die Musterseite „Foreground“ auf der A-Musterseite basiert.

Wenn Sie Ihre eigenen Site-Projekte entwerfen, können Sie mit der neuen Funktion „In Vordergrund verschieben“ experimentieren und so festlegen, dass Elemente auf Musterseiten im Vordergrund angezeigt werden. Später in dieser Tutorial-Reihe werden Sie das Design für die Seiten „food“ und „events“ finalisieren und sehen, wie durch die Vordergrundeinstellung gewährleistet wird, dass die Kopfzeile über anderem Inhalt auf der Seite angezeigt wird.

Im nächsten Abschnitt dieses Tutorials (Erstellen Ihrer ersten Website in Muse | Teil 4) lernen Sie, wie mit eingebettetem HTML gearbeitet wird, um von anderen Websites kopierten Code anzuzeigen. Außerdem lernen Sie, wie ein Leuchtkasten-Komposition-Widget hinzugefügt wird, um die Homepage auszubauen.

Verwenden mehrerer Musterseiten und Integrieren von Animation

In diesem Abschnitt erfahren Sie mehr über die Arbeit mit Musterseiten und wie Sie gemeinsamen Site-Inhalt in mehreren Musterseiten anzeigen können, um beim Erstellen von verschiedenen Bereichen einer Site die Konsistenz sicherzustellen. Sie lernen auch Strategien für das Verschieben von Elementen aus Musterseiten, da es in einigen Site-Designs nützlich sein kann, mehrere Musterseiten zu erstellen und nur bestimmte Grafiken auf die einzelnen Musterseiten einzufügen (z. B. eine Site mit vier farbcodierten Bereichen). Sie lernen auch mehr über das Verschieben von Elementen, die sich normalerweise auf einer Musterseite befinden, auf eine bestimmte individuelle Seite, um Designeffekte zu erstellen, wie z. B. das Übereinanderlegen von Elementen.

Bearbeiten des Inhalts von Musterseiten

Die Objekte, die auf einer Musterseite platziert werden, werden in Ebenen unter Inhalten angezeigt, die auf einer einzelnen Seite platziert wurden. Alle Objekte, die Sie beispielsweise in der Kopf- oder Fußzeile Ihrer Homepage platzieren, werden in Ebenen über den in der Kopf- und Fußzeile der Musterseite platzierten Hintergrundbildern angezeigt. Aus diesem Grund können Situationen auftreten, in denen Sie Elemente aus einer Musterseite verschieben und in einzelnen Seiten platzieren müssen, damit sie über anderen Elementen auf der Seite angezeigt werden.

Der Inhalt, der den Musterseiten hinzugefügt wird, muss später bearbeitet werden, indem Sie die Musterseite öffnen. Wenn Sie eine Seite öffnen, die mit einer Musterseite verbunden ist, und versuchen, die Inhalte von Kopf- und Fußzeile oder anderen Musterseiten zu bearbeiten, erscheint sie gesperrt. Sie können zwei verschiedene Methoden verwenden, wenn Sie Inhalte auf einer Musterseite ändern müssen:

  1. Doppelklicken Sie auf das Miniaturbild der Musterseite in der Planungsansicht und bearbeiten Sie dann den Inhalt der Musterseite in der Entwurfsansicht.

  2. Doppelklicken Sie auf das Musterseiten-Miniaturbild in der Planungsansicht, um es in der Entwurfsansicht zu öffnen. Wählen Sie die Elemente aus, die Sie bearbeiten möchten (die sich jedoch über anderen Elementen befinden müssen, indem Sie sie auf einer Seite einer Site platzieren), und wählen Sie „Bearbeiten“ > „Ausschneiden“ oder verwenden Sie die Tastaturbefehle Befehl+X (Mac) bzw. Strg+X (Windows).

  3. Kehren Sie zur Planungsansicht zurück und doppelklicken Sie auf die Seite, die den (früheren Musterseiten-) Inhalt enthält. Wählen Sie „Bearbeiten“ > „An Originalposition einfügen“. Dadurch wird sichergestellt, dass die Elemente, die Sie aus der Musterseite ausschneiden, an der gleichen Position auf einer normalen Seite positioniert werden. Bei Bedarf können Sie mehrere Seiten öffnen und „Bearbeiten“ > „An Originalposition einfügen“ wählen, um den Inhalt der Musterseite auf vielen verschiedenen Seiten Ihrer Site zu verteilen.

Bei Bedarf können Sie eine vorhandene Musterseite auch duplizieren. Sie können Ihre Site so konfigurieren, dass die meisten Seiten eine Musterseite verwenden, während eine bestimmte Seite eine duplizierte und der Musterseite ähnliche Version verwendet (wobei bestimmte Elemente aus dieser duplizierten Musterseite auf die bestimmte Seite der Site kopiert wurden). Weitere Informationen zum Duplizieren von Musterseiten finden Sie im folgenden Unterabschnitt.

Wenn sich das Objekt auf den einzelnen Seiten und nicht auf der Musterseite befindet, können Sie das Objekt bei Bedarf seitenweise bearbeiten und sicherstellen, dass das Objekt im Vordergrund angezeigt wird.

In diesem Beispielprojekt wird auf der Site derzeit das Kevin's Koffee Kart-Logo (rotes Fahrrad mit Banner) direkt über der Site-Navigation in der Kopfzeile angezeigt. Der Inhalt der Kopf- und Fußzeilen wird automatisch auf jeder Seite angezeigt, da die Homepage (und jede andere von Ihnen erstellte Seite) automatisch mit der A-Musterseite verknüpft wird, die diesen Inhalt enthält. In vielen Fällen erstellen Sie Webseiten, die alle die gleiche Musterseite verwenden, um die Konsistenz innerhalb der Site zu wahren.

Diese Site hat jedoch ein einzigartiges animiertes Logo, das nur auf der Homepage angezeigt wird. Wenn Sie sich das veröffentlichte Beispiel der Site „Kevin's Koffee Kart“ anschauen, werden Sie sehen, dass das Logo mit dem roten Fahrrad auf der Homepage einmal beim ersten Laden der Seite animiert wird, so als würde das Fahrrad von links auf die Seite fahren. Wenn Sie per Klick auf andere Seiten navigieren, bemerken Sie, dass die Animation nur auf der Homepage auftritt; alle anderen Logos auf den Seiten der Site sind statisch.

Im folgenden Unterabschnitt lernen Sie, wie Sie ein Duplikat der Musterseite erstellen und wie Sie Seiten einrichten können, sodass sie eine bestimmte Musterseite in der Planungsansicht verwenden.

Duplizieren und Löschen von Musterseiten

  1. Klicken Sie auf den Planungslink, um auf die Planungsansicht zuzugreifen. Gehen Sie zum Miniaturbild der A-Musterseite am unteren Rand der Planungsansicht.

  2. Zeigen Sie mit dem Cursor auf die Miniaturansicht der A-Musterseite und beachten Sie das Pluszeichen (+), das auch beim Hinzufügen von neuen Seiten zur Sitemap eingeblendet wird. Klicken Sie auf das Pluszeichen (+) rechts neben dem Miniaturbild der A-Musterseite. Sie können diese Vorgehensweise immer dann verwenden, wenn Sie eine neue Musterseite von Grund auf erstellen möchten. Beachten Sie, dass die Miniaturansicht leer ist, was bedeutet, dass sie nicht den Inhalt enthält, den Sie zur A-Musterseite hinzugefügt haben. Die neue Musterseite erhält standardmäßig den Namen „B-Musterseite“, aber Sie können bei Bedarf auf das Feld unter dem Miniaturbild klicken, um sie umzubenennen.

    In diesem Fall erstellen Sie ein Duplikat der bestehenden A-Musterseite, anstatt eine neue, leere Musterseite anzulegen.

  3. Klicken Sie auf das x-Symbol in der oberen rechten Ecke der B-Musterseite, um sie zu löschen. (Wenn Sie versehentlich eine vorhandene Musterseite auf diese Weise löschen, wählen Sie „Bearbeiten“ > „Rückgängig: Musterseite löschen“, um sie wiederherzustellen.)

  4. Klicken Sie mit der rechten Maustaste auf die Miniatur der A-Musterseite und wählen Sie im Kontextmenü die Option „Seite duplizieren“. Es wird eine neue Miniatur angezeigt, die ein Duplikat der Musterseite darstellt und den Namen „A-Musterseite - Kopie“ trägt.

    fig_59_getting
    Duplizieren Sie die A-Musterseite in der Planungsansicht.

  5. Klicken Sie auf das Feld unter der Miniatur „A-Musterseite - Kopie“ und benennen Sie die duplizierte Musterseite folgendermaßen um: MasterFlash. Mit dieser Seite können Sie Rich-Media-Inhalt hinzufügen, der ausschließlich auf der Homepage animiert wird, während alle anderen Seiten weiterhin auf die A-Musterseite verweisen, die eine statische Version des Logos in der Kopfzeile anzeigt.

  6. Klicken Sie mit der rechten Maustaste auf das Miniaturbild der Homepage. Klicken Sie im daraufhin angezeigten Menü auf „Musterseiten“ > „MasterFlash“. Durch diesen Vorgang wird die MasterFlash-Musterseite der Homepage zugeordnet.

    Hinweis:

    Alternativ können Sie das MasterFlash-Miniaturbild auf das Miniaturbild der Homepage ziehen, um die MasterFlash-Musterseite anzuwenden.

Sobald sie angewendet wurde, wird der Name der MasterFlash-Musterseite in der Planungsansicht in Klammern unter der Miniatur der Homepage angezeigt.

Wenn Sie auf „Vorschau“ klicken, bemerken Sie keinen Unterschied in der Homepage. Da MasterFlash eine duplizierte Kopie der A-Musterseite ist, wird die Homepage wie zuvor dargestellt und das statische Logo wird angezeigt. Im nächsten Unterabschnitt bearbeiten Sie jedoch den MasterFlash-Inhalt, um die Animation hinzufügen, die nur auf der Homepage auftritt.

Der Einsatz von duplizierten, nahezu identischen (jedoch leicht unterschiedlichen) Musterseiten ist eine hervorragende Möglichkeit, um einen bestimmten Bereich einer Website zu unterscheiden und um die Homepage wie für dieses Projekt beschrieben individuell zu gestalten.

In diesem Tutorial erlernen Sie den Umgang mit Musterseiten und erfahren mehr über die Arbeit mit Musterseiten. Wir untersuchen und analysieren drei Site-Layouts und erkunden, wie Sie interessante Effekte und Site-Konsistenz mithilfe von gemeinsamen Elementen in einer Musterseite erzielen können.

Doch zunächst: Was ist eine Musterseite? Mit einer Musterseite können Sie gemeinsame Elemente wie Kopf- und Fußzeilen, Logos und Navigationselemente auf mehreren Seiten in Ihrer Site anwenden. Sie können eine Musterseite für Ihre Site verwenden oder mehrere Musterseiten einrichten, sodass Sie mühelos und konsistent einzigartige Stile auf verschiedene Bereiche Ihrer Site anwenden können.

Standardmäßig erstellt Muse eine leere Homepage und eine leere Musterseite, wenn Sie eine neue Site anlegen. Diese Seiten sind die Grundlage für jede Website. Sie können die Sitemap mithilfe von leeren Seiten planen und dann später darauf Musterseiten anwenden oder Sie können Ihre Website erstellen, indem Sie zuerst eine Musterseite erstellen, diese auf eine einzelne Seite anwenden (die Homepage) und dann neue Seiten basierend auf diesem Design erstellen.

Analysieren von Site-Layouts

Eine hervorragende Möglichkeit, um mehr über neue Site-Design-Methoden zu erfahren, besteht darin, sich unterschiedliche Musterseiten-Layouts anzuschauen. In diesem Artikel untersuchen wir drei verschiedene in Muse erstellte Site-Layouts, und schauen uns an, wie sie ursprünglich erstellt wurden.

Wenn Sie die Übungen ebenfalls durchführen möchten, öffnen Sie die Elemente für die einzelnen Beispiel-Sites. Laden Sie dazu die Beispieldateien herunter, entpacken Sie die ZIP-Datei und doppelklicken Sie auf eine MUSE-Datei, um sie in Muse zu öffnen.

Wenn Sie sich diese Beispiel-Sites anschauen, beachten Sie einige der Merkmale, die verwendet wurden, um Site-Designs zu erstellen, durch die Sie mühelos navigieren können und die dem Benutzer dabei helfen, den Site-Inhalt zu erkunden:

  • Konfigurieren Sie Site-Eigenschaften zum Definieren der Abmessungen aller Seiten.
  • Verwenden Sie Hilfslinien, um die Kopf- und Fußzeilenbereiche der Musterseite zu definieren.
  • Fixieren Sie Objekte am Browserfenster, um sie außerhalb des Seitenlayouts zu positionieren.
  • Legen Sie Hintergrundbild-Flächen so fest, dass sie bei einem Bildlauf verschoben werden oder fixiert sind, um interessante Effekte zu erstellen.
  • Strecken Sie Rechtecke, um sie mit einer Breite von 100 % und über die gesamte Breite des Browsers anzuzeigen.
  • Fügen Sie Akkordeon-Widgets und Diashow-Widgets hinzu, um interaktive Seiteninhalte anzuzeigen.
  • Passen Sie Menü-Widgets an und wenden Sie einen Stil an, um eine Site-Navigation zu ermöglichen.
  • Erstellen Sie Ankerverknüpfungen, um vertikal oder horizontal zu bestimmten Seitenabschnitten zu wechseln.
  • Fügen Sie den Code aus Websites von Drittanbietern ein (eingebettetes HTML), um den Seiten bestimmte Merkmale hinzufügen.

Wenn Sie die Beispiel-Sites öffnen, versuchen Sie einen Bildlauf durchzuführen und das Browserfenster zu skalieren, um herauszufinden, wie das Beispiel online funktioniert. Öffnen Sie dann die einzelnen MUSE-Dateien in Muse, um zu sehen, wie Musterseiten verwendet wurden, um das Site-Layout zu vereinheitlichen und um ein einheitlicheres Online-Erlebnis zu erzeugen.

Beispiel 1: Happy Valley Adventure

fig01.master.b720

Im ersten Beispiel wurden die Fußzeilengrafiken am unteren Rand des Browserfensters fixiert. Zusätzlich ist der Hintergrund auf eine Breite von 100 % gesetzt, um den horizontalen unteren Rand der Seite abzudecken. Längerer Seiteninhalt wird hinter dem Vordergrund der Fußzeile vorbeigeführt, um einen Himmel-Verlaufseffekt zu erstellen. Wenn Sie auf die Ankerverknüpfungen links klicken, wird die Seite vertikal zum entsprechenden Bereich verschoben. Halb-transparente Grafikelemente und eine strategische Stapelreihenfolge unterstützen den Eindruck eines fliegenden Ballons.

Beachten Sie beim Überprüfen der MUSE-Datei für diese Site Folgendes:

In der Musterseite stellen mehrere mit einem Verlauf gefüllte Rechtecke den Hintergrund für den längeren Seiteninhalt dar.

  • Die Homepage enthält eine Fußzeilengrafik mit einem horizontal gekachelten Hintergrundbild mit einer Breite von 100 %, die am unteren Rand des Browserfensters fixiert ist. Eine zweite Fußzeilengrafik (Berge) ist zentriert und ebenfalls am unteren Rand des Browsers fixiert und wurde so eingerichtet, dass sie über den anderen Fußzeilengrafik-Kacheln angezeigt wird, indem Sie „Anordnen“ > „In den Vordergrund“ wählen. Diese Methode gilt für alle Bildschirmgrößen.
  • Über die Navigationslinks auf der linken Seite können Sie zu den Anker-Tags wechseln, die der langen vertikal ausgerichteten Seite hinzugefügt wurden. Wenn Besucher auf die Links klicken, wird ein Bildlauf durchgeführt, bis der entsprechende Inhalt angezeigt wird. Das Design sieht auch dann ausgewogen und einheitlich aus, wenn neue Site-Bereiche angezeigt werden.
  • Der Kontaktbereich der Homepage enthält eingebettetes HTML, um die Kontaktformular-Elemente anzuzeigen, die die Kommunikation mit Besuchern vereinfachen und mit denen Sie bevorstehende Abenteuer planen können.

Beispiel 2: Kevin's Koffee Kart

fig02.master.b720
Diese Site mit mehreren Ebenen nutzt ein Menü-Widget sowie eingebettete HTML-Merkmale.

Die Homepage der Site „Kevin's Koffee Kart“ enthält eine Flash-Animation in der Kopfzeile sowie fixierte Wolkenbilder. Wenn Sie die Bildlaufleisten verwenden, um durch die Seite zu navigieren, werden Sie feststellen, dass das Hintergrundbild fixiert ist und sich nicht bewegt, wobei der Seiteninhalt darüber läuft. Es wird automatisch eine Diashow wiedergegeben, die mehrere Bilder der Reihe nach unter einem eingebetteten HTML-Twitter-Feed anzeigt.

Die Menüleiste in der Kopfzeile wurde mithilfe eines Horizontales-Menü-Widgets erstellt, um einheitliche Site-Navigationsschaltflächen zu erstellen, die automatisch aktualisiert werden, wenn Sie neue Seiten hinzufügen. In diesem Beispiel wurde das Menü-Widget so konfiguriert, dass die Seiten auf der obersten und auf untergeordneten Ebenen angezeigt werden.

Interagieren Sie mit dem Menü und sehen Sie sich an, wie die Seite durch Klicken der Schaltflächen geladen wird. Die Kopf- und Fußzeilen sind auf allen Seiten gleich, aber die Seitenhöhen variieren je nach Inhalt. Die braune Fußzeile besteht aus zwei Rechtecken mit einer Breite von 100 %, die sich über die gesamte Breite des Browserfensters erstrecken und somit für weitere Einheitlichkeit der einzelnen Seiten sorgen.

Beim Erstellen der Site „Kevin's Koffee Kart“ wurden die folgenden Designkonventionen verwendet:

  • Diese Site enthält zwei ähnliche Musterseiten: Die Musterseite ohne Flash-Media wurde auf die meisten Seiten angewendet und eine zweite Musterseite mit dem Flash-Film wurde nur auf die Homepage angewendet. Beide Musterseiten haben Fußzeilen mit einer Breite von 100 % mit transparenten Designrändern und beide verwenden aus Konsistenzgründen das gleiche Menü-Widget. Nachdem Sie die erste Musterseite erstellt haben, werden die Elemente kopiert und an der Originalposition auf der zweiten Musterseite eingefügt, um sicherzustellen, dass alle Elemente identisch ausgerichtet sind.
  • Die Seiten werden in der Planungsansicht organisiert, um Site-Bereiche der oberen Ebene und untergeordneter Ebenen zu erstellen, was sich in den Dropdown-Elementen im Menü-Widget widerspiegelt.
  • Die als Browserfläche verwendete Hintergrund-Imagemap wurde so festgelegt, dass sie in Originalgröße anstatt in Kacheln angezeigt wird. Sie wird nicht zentriert und sie wird so festgelegt, dass sie bei einem Bildlauf nicht unter dem Inhalt der Seite verschoben wird.
  • Als Seitenhintergrund-Fläche wurde Weiß mit leichter Transparenz verwendet, damit die Hintergrund-Imagemap noch leicht durchscheint.
  • Die Homepage umfasst zwei halb-transparente Wolken-Bilder, die am Browser fixiert sind. Führen Sie einen vertikalen Bildlauf durch die Seite durch, um sich davon zu überzeugen, dass die fixierten Elemente nicht verschoben werden und auch dann an der Position bleiben, wenn Sie das Browserfenster skalieren.
  • Die Homepage verwendet eingebettetes HTML, um den interaktiven Twitter-Feed anzuzeigen.
  • Die Seite „The Koffee“ nutzt ein Akkordeon-Widget, mit dem durch Klicken verschiedene Fenster erweitert und minimiert werden, um zusätzliche Inhalte auf kleinstem Raum anzuzeigen.
  • Die Seite „Origins“ enthält ein Miniatur-Diashow-Widget, um eine interaktive Fotogalerie anzuzeigen. Die Seite „Preparation“ verwendet Navigationselemente mit Anker-Tag, um zu den einzelnen Abschnitten der Seite zu wechseln, und die Seite „Kart Map“ umfasst eingebettetes HTML, um basierend auf dem gegenwärtigen Standort des für dieses Konto verwendeten Handys eine Google Latitude-Karte anzuzeigen.

Beispiel 3: More than Square

fig03.master.b720
Stark überlappende fixierte Grafiken bilden den Rahmen für durchlaufbaren Seiteninhalt.

Beachten Sie beim Betrachten des letzten Beispiels, dass die Grafiken mit den Gebäuden in der oberen rechten und unteren linken Ecke fixiert sind, um einen Rahmen für den Seiteninhalt zu bilden. Das Gebäude in der oberen rechten Ecke wurde im Vordergrund angeordnet, um den Seiteninhalt oben zu überlappen. Das Gebäude in der unteren linken Ecke wird unter der Seite angezeigt.

Der Seiteninhalt ist zentriert und halb-transparent und wird mithilfe von abgerundeten Ecken von den architektonischen Elementen abgesetzt. Der Seiteninhalt wird vertikal verschoben und die Höhe variiert, wenn Sie die jeweiligen Seiten durch Klicken aufrufen. Auf der linken Seite befinden sich dauerhaft Links zu sozialen Medien (Facebook, Twitter und YouTube), um eine übergreifende Verknüpfung und ein konsistentes asymmetrisches Design innerhalb der Site sicherzustellen.

Die Homepage enthält eine Fotogalerie mit den Navigationsschaltflächen „Next“ und „Previous“, die so konfiguriert wurde, dass die Folien langsam abgespielt werden, sofern der Besucher nicht auf die Schaltflächen klickt. Die Seite „How to Get Here“ enthält eine interaktive Karte, die mit eingebettetem HTML-Code erstellt wurde, der aus Google Maps kopiert wurde.

Beachten Sie beim Überprüfen der MUSE-Quelldatei für dieses Beispiel Folgendes:

In diesem Beispiel befinden sich fast alle gemeinsamen Seitenelemente in der Musterseite. Auf diese Weise ist es einfacher, die Site zu aktualisieren und Änderungen an den einzelnen Seiteninhalten vorzunehmen.

Die Musterseite enthält eine nicht durchlaufbare Hintergrundgrafik für das Fußzeilenbild, das an der linken unteren Seite des Browsers fixiert ist. Die Musterseite enthält auch abgerundete Ecken sowie ein halb-transparentes Seitendesign mit Site-Navigationselementen.

Alle Seiten der Site weisen eine fixierte Grafik in der rechten oberen Ecke auf, die so angeordnet ist, dass sie vor dem Seiteninhalt angezeigt wird, um so die Illusion einer Perspektive zu erschaffen, die durch die Winkel der Gebäudebilder unterstützt wird.

Muse ist ein intuitives Designwerkzeug, mit dem Sie Ihre Entwürfe für das Internet verwirklichen können. Kreative Platzierung von Elementen in Musterseiten und einzigartige Inhalte, die auf jeder Seite angezeigt werden, ermöglichen es Ihnen, Ihre überzeugenden Layouts umzusetzen. Ihrer Fantasie sind keine Grenzen gesetzt, sodass innovativen Sites für Ihre Kunden nichts mehr im Weg steht.

Weitere Tipps für das Arbeiten mit Muse finden Sie auf der Seite Hilfe und Tutorials für Muse oder der Seite mit Muse-Events in Form von Live-Webinaren und aufgezeichneten Videotutorials.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie