Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Creative Cloud im Überblick

Webseiten mit Muse gestalten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Online-Gestaltung einer Website erfolgt in der Adobe Creative Cloud in wenigen Schritten und ohne die Notwendigkeit von Quellcode im Programm Muse.
08:59

Transkript

Adobe Muse ist ein Programm, mit dem Sie Ihre Webseite gestalten können. Das Programm erlaubt Ihnen zwar nicht, den Quellcode zu bearbeiten, insofern würde ich es nicht als Web-Entwicklungsprogramm bezeichnen, aber wenn Sie InDesign Kenntnisse haben, dann wird es Ihnen sehr leicht fallen, mit Adobe Muse eine entsprechende Webseite zu gestalten. Wir wollen mal eine solche neue Site erstellen. Als allererstes kann ich hier sagen, mit welchem Startlayout ich beginnen möchte. für ein Desktop, für ein Tablet, oder für ein Smartphone. Ich nehme mal eine Desktop-Webseite, wir können eine Breite und eine minimale Höhe festlegen, hier eine Anzahl von Spalten und Rändern einrichten. Ebenso kann ich die Standardauflösung festlegen, beispielsweise Standard, oder für ein Retina-Display, die HiDPI-Auflösung, gerade beim Import von Bildern ist das wichtig. Ich lege mal eine solche Seite an, da können wir als allererstes mal im Planungsmodus hier die Struktur der Seite festlegen. Also wir haben hier die Startseite, und auf gleicher Höhe wollen wir zur Startseite später eine Seite haben Über Uns, eine Seite Produkte, eine Seite Services, und eine weitere Seite, nennen wir sie einfach mal Kontakt. Unterhalb der Seite Produkte haben wir vielleicht verschiedene Produkte, wie beispielsweise Hemden, dann T-Shirts, Hosen und nehmen wir nochmal Mützen dazu. Das heißt, man baut hier im Prinzip erstmal in der Planungsansicht die Struktur seiner Webseite auf. Jetzt gibt es hier auch wie in InDesign eine Musterseite, und wir sehen, ich kann hier mehrere Musterseiten anlegen, und diese Musterseiten nachher mit meinen Dokumentseiten verknüpfen. Gehen wir mal per Doppelklick in die Entwurfsansicht dieser Musterseite, und wir wollen als allererstes ein Logo hinzufügen. Ich hab dazu mal die Creative Cloud App gestartet, und unter Elemente mir einmal so ein Sunglass-Element ausgewählt, ich klicke mal hier auf herunterladen - Um das Ganze jetzt in Adobe Muse zu platzieren, gehe ich hier auf Datei platzieren, wähle jetzt mein SVG-Element aus, und erhalte jetzt ähnlich wie in InDesign auch hier einen Platzieren-Cursor, mit dem ich das Ganze jetzt hier in meinem Dokument platzieren kann. Ich kann das jetzt hier noch so ein bisschen in der Größe anpassen, und vielleicht noch so hinschieben, dass es hier jetzt ganz gut in die Kopfzeile passt, ungefähr hier so hin. Des weiteren erlaubt mir Adobe Muse das Erzeugen von verschiedenen Objekten, wie Rechtecken und Textfeldern. Wir können also jetzt hier für die Kopfzeile so ein Hintergrundobjekt erzeugen, dieses Rechteck beispielsweise, und das Ganze dann noch gestalten. Ich habs hier ein bisschen zu wenig nach links gezogen, es soll eigentlich die ganze Kopfzeile hier einnehmen, hier habe ich jetzt meine Fläche, wir können das Ganze hier so ein bisschen leicht gräulich machen, ich möchte vielleicht keine Kontur, also nehmen wir die Konturstärke auf null, und wir müssen es noch anordnen, in den Hintergrund, damit mein Logo, meine Sonnenbrille da noch drüber passt. Es gibt hier auch weitere Effekte, die man hinzufügen kann, das heißt, wenn ich hier auf Effekte klicke, dann kann ich hier entweder einen Schlagschatten aktivieren, oder eine abgeflachte Kante und ein Relief, und das sind im Prinzip nichts anderes als HTML-Effekte, die ich jetzt hier hinzufügen kann, in meinem Fall lassen wir es mal hier bei dem leichten Schlagschatten. Hinter dem Logo möchte ich jetzt noch ein weiteres Element positionieren, und zwar ein Rechteck mit abgerundeten Kanten, das fügen wir mal hier hinzu, da soll mein Logo entsprechend draufpositioniert werden, auch hierfür nehme ich eine weiße Kontur, und vielleicht so einen etwas dunkelgrauen Hintergrund, ich nehme mal hier den HSB-Regler, um die Helligkeit noch etwas zu verändern, und auch dieses müssen wir ein bisschen weiter nach hinten anordnen, hier also schrittweise nach hinten. Das wäre jetzt mal das Logo. Als nächstes möchte ich hier ein Menü hinzufügen, Dafür gibt es jetzt eine Bibliothek, mit verschiedenen Widgets, die wir hier auswählen können, aktuell habe ich jetzt noch nichts in meinem Dokument drin, deswegen gehen wir erstmal in die Widgets-Bibliothek, und hier sehe ich jetzt die Objekte, ich kann Schaltflächen hinzufügen, Kompositionen wie eine Lightbox hinzufügen oder Quickinfo-Elemente, Formulare gibt es hier und Menüs, Bedienfelder, Diashow, und so ein paar Social Widgets, wie beispielsweise ein Facebook Gefällt-Mir-Button. Wir suchen hier ein Menü, und zwar soll das Ganze horizontal sein, und das ziehe ich jetzt per Drag & Drop hier auf unsere Seite. Und das Schöne ist, Adobe Muse erkennt sofort die Struktur meiner Website und füllt hier die entsprechenden Schaltflächen aus. Das können wir natürlich jetzt noch gestalten, das heißt, ich kann jetzt noch in die einzelnen Schaltflächen reingehen, und kann jetzt hier auf den Text klicken, und kann sagen, für den Text hätte ich hier auch gern noch so einen Schlagschatteneffekt aktiviert, machen wir das hier einfach mal, schalten den Schlagschatten dafür ein - ich hab das falsche Element hier ausgewählt - nehmen wir mal nicht den Text, sondern das Schaltflächenelement, und sagen hier jetzt nochmal, den Effekt Schlagschatten einschalten, und das soll jetzt soweit mal meine Musterseite sein, das weitere gestalte ich dann auf den Dokumentseiten. Wir sehen jetzt schon, wir haben hier die Startseite, die Seite Über Uns, Produkte und so weiter, und, ja, die haben jetzt alle entsprechend mein Menü. Ich speichere mein Projekt mal einfach auf dem Desktop ab, und kann jetzt anfangen, die einzelnen Seiten mit Inhalten zu füllen. Mit Bildern funktioniert das über das Platzieren, mit Texten über das Textfeld, und wenn wir jetzt beispielsweise ein Kontaktformular auf der Kontaktseite anbringen wollen, dann kann ich jetzt hierhin gehen, und sagen, wir wollen ein neues Formular, zum Beispiel ein einfaches Kontaktformular, was man hier dann ausfüllen kann und versenden kann. Und für jedes Element, was ich hier anwähle, gibt es dann Optionen, wenn ich also draufklicke, sehe ich, an wen möchte ich die E-Mail senden, was soll nach dem Versand passieren, geht man zum Beispiel zu einer anderen Seite, welche Felder möchte ich hier haben. Wir haben hier das Feld Firma, das Feld Anschrift, und wir sehen, was hier passiert, automatisch, indem mein Inhalt länger wird, wird Muse, die Seite, ebenfalls verlängert, das heißt, hier unten kommt dann immer noch die Fußzeile hinzu, die ich natürlich auch über die Musterseite dann gestalten kann. Wenn ich meine Seite fertig gestaltet habe, mit Widgets und Elementen versehen habe, dann kann ich von Planung, Entwurf zur Vorschau gehen. Das heißt, hier bekommen wir jetzt erstmal eine Vorschau unserer Muse-Projektseite, und ich kann jetzt hier sehen, ich kann jetzt hier zum Beispiel von der Startseite zur Kontaktseite wechseln, kann das Formular ausfüllen, und jetzt auf Senden klicken. Das heißt, wir haben jetzt hier schon mal ein völlig funktionierendes Website-Projekt. ohne auch nur eine einzige Zeile Quellcode schreiben zu müssen. Die Buttons funktionieren und i ch kann sie jetzt gestalten, und anpassen, so wie ich das haben möchte. Wenn ich mit meiner Seite glücklich bin, dann kann ich sie hier entsprechend veröffentlichen. Da gibt es verschiedene Varianten, ich kann Business Catalyst benutzen, das ist ein Service, der ebenfalls in der Creative Cloud enthalten ist, kann also hier sagen, SvenBrencher.businesscatalyst.com, oder ich kann eine bestehende Businesscatalyst-Seite auswählen, die ich dort angelegt habe, und kann hier auch sagen, welches Rechenzentrum meine Webseiten hosten soll. Das heißt, hierüber ist man dann wirklich sehr sehr schnell online, und kann seine Seite im Internet veröffentlichen. Alternativ kann ich natürlich auch hingehen und sagen, Ich möchte alles als HTML exportieren, oder ich hab die FTP-Zugangsdaten und kann das jetzt auf meinen eigenen FTP-Server, auf meinen eigenen Webserver laden, indem ich die Server-Adresse sowie Benutzername und Kennwort eingebe. Mit Adobe Muse kann ich also auf spielerische Art eine Seite zusammenstellen, eine Seite oder auch eine Microsite gestalten, und habe verschiedene Möglichkeiten, diese Seite dann auch im Internet zu veröffentlichen. Es lohnt sich auf jeden Fall, mal in die Widget-Bibliothek von Adobe News zu schauen, denn dort gibt es eine ganze Menge kleinerer Widgets, die man benutzen kann, um beispielsweise eine Diashow sehr schnell zu erstellen, oder, wie wir es hier jetzt gesehen haben, so ein Kontakt-Formular zu erzeugen.

Creative Cloud im Überblick

Lernen Sie Adobes Creative Cloud und all ihre Applikationen kennen. Sven Brencher zeigt, was hinter CC und den Applikationen für Web, Design, Fotografie und Publishing steckt.

7 Std. 24 min (55 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Mit dem Creative Cloud Update vom Oktober 2014 wurde Adobe Kuler umbenannt in Adobe Color.

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!