Entwerfen Sie die Website für Katies Café, ohne eine einzige Zeile Code zu schreiben.

Im ersten Video legen wir eine neue Datei an. So können Sie den Planungsmodus in Muse kennenlernen und Ihre Site richtig planen. Nachdem Sie einzelne Seiten für Ihre Website gestaltet und benannt haben, fügen Sie mittels Metadaten weitere Informationen wie z. B. Seitentitel hinzu. Bitte beachten Sie, dass Sie für jeden Lernschritt eine neue, vorbereitete Projektdatei öffnen müssen. Dieses Tutorial und das Projekt wurden von Danielle Beaumont erstellt.

Eine Website definieren
  • Neue Datei erstellen (1:13)
  • Seiten hinzufügen (2:06)
  • Seiteneigenschaften (3:41)

Erstellen Sie eine eigene Musterseite.

Erstellung einer Musterseite
  • Hintergrundbild hinzufügen (0:54)
  • Kopfzeilenbereich erstellen (2:38)
  • Fußzeilenbereich erstellen (4:40)

Hinweis: Öffnen Sie die Datei „01_SiteMap.muse“ in Muse, um die Übung nachzuvollziehen.

Die Musterseite enthält Design-Elemente, die auf allen Seiten der Website zum Einsatz kommen. Wir fügen also zunächst allgemeine, sich wiederholende Elemente wie Kopfzeile, Fußzeile, Seitenhintergrund und Logo zur Musterseite hinzu. Da alle Seiten der Website auf dieser Musterseite basieren, werden alle hier enthaltenen Elemente an exakt derselben Stelle jeder Seite platziert.

Einfaches Design dank Widgets.

Widgets verwenden
  • Menü hinzufügen (0:47)
  • galerie erstellen (7:47)
  • Bilder importieren (9:34)

Hinweis: Öffnen Sie die Datei „02_Musterseite.muse“ in Muse, um die Übung nachzuvollziehen.

In diesem Abschnitt „zaubern“ wir mit Widgets. Gemeint sind aber natürlich die erstaunlichen Funktionen der Widgets, die so diskret im Hintergrund ablaufen und bisweilen etwas Magisches haben. Wir verwenden die Widget-Bibliothek von Muse, um ein Menü-Widget als oberste Navigationsebene für Ihre Seite hinzuzufügen. Nachdem das Menü integriert ist, passen wir noch das Erscheinungsbild an. Abschließend fügen wir per Widget Registerkarten und eine Dia-Show hinzu.

Entwerfen Sie die Kontaktseite.

Mit Typographie arbeiten
  • Text importieren (3:09)
  • Schriften verwenden (4:44)
  • Text formatieren (5:58)

Hinweis: Öffnen Sie die Datei „03_Widgets.muse“ in Muse, um die Übung nachzuvollziehen.

Machen wir uns nun an die Gestaltung der Kontaktseite, damit Sie die Möglichkeiten von Typografie und Web-Schriften in Muse kennenlernen.

Fügen Sie einen interaktiven Lageplan von Google Maps hinzu.

HTML einbinden
  • Code generieren (1:05)
  • Lageplan einbetten (2:56)

Hinweis: Öffnen Sie die Datei „04_Text.muse“ in Muse, um die Übung nachzuvollziehen.

Keine Restaurant-Website kommt ohne Anfahrtsbeschreibung aus. Wir werden also einen Code generieren, mit dem sich ein interaktiver Lageplan in die Site einbetten lässt.

Veröffentlichen Sie Ihre Site!

Die Seite veröffentlichen
  • Test-Websites hosten (0:22)
  • Site aktualisieren (2:05)
  • Weitere Optionen (2:56)

Hinweis: Öffnen Sie die Datei „05_Einbetten.muse“ in Muse, um die Übung nachzuvollziehen.

Ihr Projekt ist fast fertig. In diesem letzten Abschnitt erhalten Sie einen Überblick über die Optionen zur Veröffentlichung, die Muse bietet. Mit wenigen Klicks veröffentlichen wir Ihre Site, damit andere Ihr Web-Angebot nutzen können.