Erstellen von Kopf- und Fußzeilen in Adobe Muse

Definieren Sie Kopf- und Fußzeilenbereiche Ihrer Website, um Menüs, Logos, Urheberrechtshinweise und vieles mehr in Adobe Muse hinzuzufügen.

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 bei den Häufig gestellten Fragen (FAQ) zum Ende der Produktlebensdauer von Adobe Muse.

Mit Adobe Muse können Sie Kopf- und Fußzeilen für eine Webseite ganz einfach erstellen. Es empfiehlt sich, das Erscheinungsbild der Kopf- und Fußzeilen auf das Layout der übrigen Website abzustimmen, um ein einheitliches Erscheinungsbild zu erreichen. Definieren Sie dazu einfach die Elemente für Kopf- und Fußzeile in der Mustervorlage in Adobe Muse. Wenn Sie Ihre Musterseite aktualisieren, bewirkt dies, dass alle Seiten auf Ihrer Website geändert werden.

Wenn Sie eine Website mit HTML und CSS erstellen, hängt die Höhe der einzelnen Seiten in der Regel vom jeweiligen Inhalt der Seite ab. Muse enthält Funktionen, mit denen die Seiten einer Website je nach Inhalt der Seite in verschiedenen Längen angezeigt werden können. Sie können Bereiche so einrichten, dass die Kopfzeile immer am oberen Rand verbleibt und der Inhalt der Fußzeile immer direkt unterhalb des Seiteninhalts angezeigt wird, und zwar unabhängig von der Höhe der einzelnen Seiten.

Hinzufügen von Kopf- und Fußzeilen zu einer Seite

Bevor Sie beginnen, Kopf- und Fußzeilenbereiche Ihrer Seite zu definieren, vergewissern Sie sich, dass die Hilfslinien für Kopf- und Fußzeilen angezeigt werden. Wenn sie nicht angezeigt werden, wählen Sie Ansicht > Kopf- und Fußzeile einblenden.

Alternativ können Sie auch das Menü „Ansicht“ im Steuerungsbedienfeld verwenden, um die „Kopf- und Fußzeilenhilfslinien“ einzublenden.

Vergewissern Sie sich, dass die Kopf- und Fußzeilenhilfslinien aktiviert sind.
Vergewissern Sie sich, dass die Kopf- und Fußzeilenhilfslinien aktiviert sind.

Auf Wunsch können Sie auch mit der rechten Maustaste auf die linke Seite des Arbeitsbereichs klicken, direkt außerhalb des Browserfensterbereichs. Aktivieren Sie die Option „Kopf- und Fußzeile einblenden“ im daraufhin angezeigten Kontextmenü.

Arbeiten mit Linealen und Hilfslinien

Das Lineal muss aktiviert sein, um die Kopf- und Fußzeilenhilfslinien neu positionieren zu können. Mithilfe des Lineals können Sie die Hilfslinien an eine exakte Pixelposition ziehen. Standardmäßig werden auch die normalen Hilfslinien angezeigt, welche die Anzahl der Spalten darstellen, die Sie beim Erstellen der neuen Site eingestellt haben.

Fünf blaue horizontale Hilfslinien erstrecken sich über die Breite der Seite. Von oben nach unten zeigen diese fünf Hilfslinien Folgendes an: den oberen Seitenrand, den unteren Rand der Kopfzeile, den oberen Rand der Fußzeile, den unteren Rand der Webseite und den unteren Rand des Browserfensters. Wenn Sie die Hilfslinien ziehen, um diese Bereiche zu definieren, werden in einer QuickInfo eine Beschreibung der entsprechenden Hilfslinie und ihre aktuelle Position angezeigt. Möglicherweise ist es hilfreich, die Seite vergrößert darzustellen, damit Sie einzoomen und die Hilfslinien genauer positionieren können.

Die drei mittleren Hilfslinien definieren den Inhalt, der im Kopf- und Fußzeilenbereich angezeigt wird. Der restliche Mittelbereich ist der Bereich, in dem Sie den spezifischen Seiteninhalt hinzufügen. Die Höhe dieses Mittelbereichs wird an die Höhe der Elemente angepasst, die Sie auf der Seite platzieren.

Sie können auch die Rechtecke und die Elemente auf der Seite auswählen. Es ist hilfreich, den Begrenzungsrahmen der ausgewählten Elemente zu verwenden, um die Hilfslinien beim Festlegen der Kopf- und Fußzeilenbereiche auszurichten.

Hinweis:

Der untere Rand des Browserfensters definiert den untersten Teil des Anzeigebereichs, wenn ein Besucher die Website in einem Browser anzeigt. Je nach Design können Sie eine Hintergrundfarbe oder ein Hintergrundbild für den eigentlichen Browser festlegen und die Hilfslinie für den unteren Seitenrand über die Hilfslinie für den unteren Rand des Browsers ziehen. Auf diese Weise ist die Hintergrundfarbe bzw. das Hintergrundbild hinter dem Seiteninhalt sichtbar.

Definieren von Kopf- und Fußzeilenelementen

Um Kopf- und Fußzeilenelemente zu definieren, führen Sie die folgenden Schritte aus:

  1. Ziehen Sie die Hilfslinien „Unterer Seitenrand“ und „Unterer Browserrand“ an dieselbe Position am unteren Rand der Seite unmittelbar unter dem Fußzeilenrechteck, wie im Bild unten gezeigt.
Definieren Sie die Kopf- und Fußzeilenelemente in Adobe Muse.
Definieren Sie die Kopf- und Fußzeilenelemente in Adobe Muse.

  1. Wählen Sie das Rechteck in der Fußzeile aus, das das zu kachelnde Hintergrundbild enthält. Ziehen Sie die Fußzeilen-Hilfslinie, bis sie an der Oberkante des Fußzeilenrechtecks ausgerichtet ist.
  2. Belassen Sie die Hilfslinie „Oberer Seitenrand“ ganz oben (an der Stelle Y: 0 Px). Ziehen Sie die Hilfslinie für die Kopfzeile auf den gewünschten Wert herunter.

Der Kopfzeileninhalt wird im Bereich zwischen dem oberen Seitenrand und der Kopfzeilen-Hilfslinie angezeigt.

Ziehen der Hilfslinie für die Kopfzeile, um den Kopfzeilenbereich festzulegen
Ziehen der Hilfslinie für die Kopfzeile, um den Kopfzeilenbereich festzulegen

Sie können in der Entwurfsphase jederzeit zur A-Musterseite zurückkehren, wenn Sie die Hilfslinien ändern müssen, um sie an den Kopf- und Fußzeileninhalt anzupassen.

Klicken Sie auf die Verknüpfung „Planung“, oder klicken Sie auf die Registerkarte mit der Beschriftung „katiesCafe“, um zur Planungsansicht zurückzukehren.

Beachten Sie, dass auf allen Seitenminiaturen der Website jetzt die Gestaltungselemente angezeigt werden, die Sie zur verknüpften A-Musterseite hinzugefügt haben.

Beachten Sie die Kopf- und Fußzeilen, die auf allen Seiten festgelegt sind, die mit der A-Musterseite verknüpft sind.
In der Planungsansicht wird das A-Musterdesign auf allen verknüpften Seitenminiaturen angezeigt.

Sämtliche Änderungen, die Sie beim Entwerfen einer Website an der Musterseite vornehmen, werden automatisch von den verknüpften Seiten übernommen. Mithilfe von Musterseiten lässt sich eine Website mühelos aktualisieren oder verwalten, da Sie nur eine einzige Musterseite aktualisieren müssen, um das Erscheinungsbild der gesamten Website zu ändern.

Platzieren eines Bilds zum Füllen des Kopfzeileninhalts

Da das Site-Logo auf jeder Seite der Website angezeigt wird, ist es ein perfektes Element, um in der Kopfzeile auf der Musterseite platziert zu werden.

  1. Wählen Sie „Datei“ > „Platzieren“. Alternativ können Sie den Tastaturbefehl Strg+D (Windows) bzw. Befehl+D (Mac) verwenden, um ein Bild zu platzieren.

  2. Navigieren Sie im Dialogfeld „Importieren“ zur Datei „Logo.png“ im Ordner „Kevins_Koffee_Kart“. Klicken Sie auf „Auswählen“.

  3. Verwenden Sie das Auswahlwerkzeug, um das Logo in der Nähe des Kopfzeilenbereichs, den Sie zuvor definiert haben, nach oben zu ziehen.

Platzieren Sie als Nächstes ein anderes Bild, das als Hintergrundgrafik des Menüleisten-Widgets dient, das Sie im nächsten Abschnitt hinzufügen werden.

  1. Wählen Sie „Datei“ > „Platzieren“ oder verwenden Sie den Tastaturbefehl für Ihr Betriebssystem: Strg+D (Windows) oder Befehl+D (Mac).

  2. Navigieren Sie zum Ordner „Kevins_Koffee_Kart“ und wählen Sie die Datei „top-nav.png“ aus.

  3. Klicken Sie einmal in den oberen Teil der Seite, genauer gesagt in den Bereich, den Sie zuvor als der Kopfzeile definiert haben. Stellen Sie sicher, dass Sie das Bild über der Kopfzeilenmarke positionieren, sodass es auf jeder Seite an genau der gleichen Stelle über dem Inhalt der Hauptseite angezeigt wird.

  4. Verwenden Sie das Auswahlwerkzeug, um die Grafik mit dem braunen Band zu ziehen, die Sie gerade platziert haben, sodass die roten Fahrradreifen im Logo gerade so die Oberkante des braunen Bands berühren. Auf diese Weise erhalten Sie den Eindruck, dass das Fahrrad auf dem braunen Band fährt.

  5. Wählen Sie erneut „Datei“ > „Platzieren“. Navigieren Sie zur Datei „thedrip.png“ und wählen Sie sie aus. Klicken Sie einmal in der Nähe der unteren rechten Seite der braunen Bandgrafik, um das Bild in Originalgröße zu platzieren.

  6. Verwenden Sie das Auswahlwerkzeug, um das Drip-Bild (mit dem Tropfen) zu positionieren, sodass es am braunen Band ausgerichtet ist und es aussieht als würde Kaffee von der rechten Seite tropfen.

    Der Kopfzeileninhalt, wie er angezeigt wird, nachdem das Logo und der Hintergrund für die Site-Navigation hinzugefügt wurden.
    Der Kopfzeileninhalt, wie er angezeigt wird, nachdem das Logo und der Hintergrund für die Site-Navigation hinzugefügt wurden.

    Sie können die als Beispiel verwendete Live-Site überprüfen, um sich die korrekte Positionierung des Logos und der oberen Navigation anzusehen.

    Im nächsten Abschnitt erfahren Sie, wie Sie Widgets hinzufügen können. Vorab erhalten Sie einen kurzen Überblick über die Arbeit mit Widget-Containern.

Verwenden der Option „Footer immer unten“

Mit der Option „Footer immer unten“ können Sie ein Fußzeilenelement auf einer Webseite fixieren. „Footer immer unten“ wurde speziell für Besucher mit großen Desktopmonitoren entwickelt. Durch Aktivieren der Option „Footer immer unten“ bleibt die Fußzeile in der gewünschten Position, auch wenn das Browserfenster erheblich größer als das Webseitendesign ist.

Die Option „Footer immer unten“ finden Sie beim Erstellen einer Website in Muse im Dialogfeld Neue Site (Datei > Neue Site) Sie können auch über Seiteneigenschaften (Seite > Seiteneigenschaften) und die Dialogfelder Site-Eigenschaften (Datei > Site-Eigenschaften) auf die Option „Footer immer unten“ zugreifen.

Die Option „Footer immer unten“ ist standardmäßig aktiviert. Im Allgemeinen empfiehlt es sich, die Funktion „Footer immer unten“ beim Entwickeln von Sites zu verwenden. Wenn Sie aber feststellen, dass die Seiten wesentlich länger angezeigt werden als gewünscht (weil eine Site nur wenig Seiteninhalt hat und die Seiten relativ kurz sind), können Sie die Option jederzeit deaktivieren, indem Sie das Kontrollkästchen im Dialogfeld „Seiteneigenschaften“ deaktivieren.

Wenn Sie die Option jedoch für die gesamte Website deaktivieren möchten, können Sie dies tun, indem Sie sie im Dialogfeld „Site-Eigenschaften“ deaktivieren.

Adobe-Logo

Bei Ihrem Konto anmelden