Adobe Muse CC

Website erstellen in Adobe Muse

In diesem Tutorial erfahren Sie, wie Sie mit Adobe Muse eine Website erstellen. (Projekt: 34 Min.)

Website erstellen in Adobe Muse

34 Min.

Was brauche ich?

Dateien herunterladen Beispieldateien zum Üben (ZIP, 5 MB)

PDF herunterladen Schnellreferenz zu Adobe Muse

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

Dieses Video stellt eine kurze Einführung des Projekts dar, das Sie mit Adobe Muse CC erstellen werden. Außerdem sehen Sie die fertige Live-Version der Website für Katie's Café.

Projekteinführung (0:07) – Übungsdateien (02:20)

Sitemap festlegen

Im ersten Video legen wir eine neue Datei an. So können Sie den Planungsmodus in Adobe 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. Bei Schwierigkeiten finden Sie in unserem Forum Hilfestellung und Tipps.

Neue Website erstellen (0:12) – Seiten hinzufügen (2:15) – Seiteneigenschaften (4:10)

Eigene Musterseite erstellen

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 und Fußzeile zur Musterseite hinzu. Da alle Seiten der Website auf dieser Musterseite basieren, werden alle hier enthaltenen Elemente an exakt derselben Stelle auf jeder Seite platziert.

Hintergrundfarbe hinzufügen (3:38) – Kopfzeilenbereich erstellen (3:50) – Fußzeilenbereich erstellen (9:07)

Einfaches Design dank Widgets

Im folgenden Abschnitt fügen Sie mittels der Widget-Bibliothek in Adobe Muse ein Menü-Widget als oberste Navigationsebene für Ihre Seite hinzu. Nachdem das Menü integriert ist, passen wir noch das Erscheinungsbild an.

Menü hinzufügen (0:51) – Vorschaumodus (7:57)

Kontaktseite entwerfen

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

Grafiken platzieren (0:46) – Seiteninhalte hinzufügen (4:15) – Text formatieren (5:00)

Interaktive Elemente hinzufügen

Hier fügen Sie eine dynamische Karte und ein einfaches Kontaktformular hinzu, um Ihren Besuchern praktische und ansprechende Funktionen zu bieten.  

Karte hinzufügen (1:10) – Kontaktformular hinzufügen (2:52)

Website veröffentlichen

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

Kostenlose Vorschau der Website veröffentlichen (0:28) – Auf einen FTP-Server hochladen (2:00)

Ihre Meinung ist gefragt.

Das war schon alles! Damit ist dieses Training abgeschlossen. Teilen Sie uns Ihre Meinung zu diesem Tutorial mit.

dani-beaumont_83x83

Danielle Beaumont

Danielle Beaumont ist Principal Product Manager und befasst sich seit über 20 Jahren mit innovativen Anwendungen aus dem Bereich Web-Produktion und Design. Zur Zeit ist sie Group Product Manager für Adobe Muse, einer neuen Applikation für visuelle Designer, die damit ansprechende HTML- und CSS-basierte Websites ohne Programmieraufwand erstellen können. Weitere berufliche Etappen ihrer Karriere sind ihre Aufgaben als Group Product Manager für das Web-Segment, als Senior Product Manager für Adobe Fireworks sowie als Director bei Macromedia.