Muse Kompakt Kurs – Lektion 3 – Views, Werkzeuge, Inhalte einfügen und Eigenschaften

Schön, dass du wieder dabei bist in der dritten Lektion unseres Adobe Muse Kurses.

In der letzten Lektion, haben wir uns angesehen, wie wir ein neues Muse Projekt starten und wie wir im Planungs Modus unsere Seitenstruktur erstellen.

In dieser Lektion wirst du wieder eine Menge wichtige und interessante Informationen kennenlernen. Es geht heute um die verschiedenen Ansichten. Weiter sehen wir uns dann im speziellen die Entwurfansicht an, wo wir unsere Seite gestalten werden. Dabei zeige ich dir die Werkzeugleiste, wie du Elemente einfügst und die Eigenschaften von Elementen verändern kannst. Am Schluss lernst du dann noch die Bedienfelder von Muse kennen.

 

Die verschiedenen Ansichten

Neben der Planungs Ansicht, sehen wir uns die anderen Ansichten von Muse an und beginnen die ersten Inhalte in unsere Seite einzufügen.

Muse Views / Ansichten

Muse Views / Ansichten

 

Planungs Ansicht (A)

Die Planungs View (A), haben wir ja zum Teil schon in der vorigen Lektion angesehen. Wir werden auf diese View noch einmal zurück kommen, wenn wir uns die Musterseiten ansehen.

 

Entwurfs Ansicht (B)

Der wahrscheinlich wichtigste Modus ist der „Entwurf“ (B). Hier findet das eigentliche Designen der Webseiten statt.

Man kann in den Entwurfs Modus einfach durch einen Doppelklick auf die entsprechende Seite in der Planungs Ansicht wechseln. Damit öffnet sich die angeklickte Seite in der Entwurf Ansicht.

Muse Entwurf Modus

Muse Entwurf Modus

 

In dieser Entwurfs Ansicht haben wir in der Mitte einen weissen Bereich, wo unsere Website gestaltet wird. Auf der linken Seite (H), haben wir die verschiedenen Werkzeuge zum Einfügen oder bearbeiten unserer Inhalte. Die ersten Werkzeuge werden wir bereits in dieser Lektion anwenden. Oberhalb unseres Gestaltungs Bereiches (I) können wir die Eigenschaften einstellen. Diese Eigenschaften passen sich den jeweils aktivierten Element an. Derzeit haben wir kein Element markiert, daher könnten wir jetzt die Eigenschaften unserer Seite verändern. Auf die verschiedenen Eigenschaften, werden wir eingehen, wenn wir uns die Elemente genauer ansehen. Auf der rechten Seite unseres Eingabe Bereiches (J) haben wir die diversen Fenster, die uns unterschiedlichste Funktionen bereitstellen. Diese Fenster können auch über das Menü „Fenster“ aufgerufen werden. Auch hier werden wir uns die wichtigsten Fenster noch genauer ansehen.

 

Vorschau Ansicht (C)

In der Vorschau Ansicht, können wir uns unsere Seite so ansehen, wie sie später auch im Web Browser aussehen wird. Hier funktionieren auch interaktive Elemente, wie Rollover, Slider und ähnliche. Obwohl mit der Vorschau, die Browser Ansicht recht gut simuliert werde, kann diese die echten Tests in den Browsern nicht ersetzen. Daher sollte jede Website rechtzeitig auf verschiedensten Browsern getestet werden.

 

Veröffentlichen (D)

Dieser letzte Teil der Ansichten, bietet die Möglichkeit die Website Online zu stellen oder dafür vorzubereiten. Dabei kann man sich entscheiden, ob die Seite direkt bei Adobe abgelegt werden soll, auf einem eigenen Webspace mittels FTP hochgeladen wird oder einfach nur alle HTML Dateien in einem Ordern abgelegt werden um die Inhalte später selbst abzulegen.

 

Kleine Hilfen

Bevor wir uns den Werkzeugen zuwenden, noch einige kleine Hilfen, die so unscheinbar im linken oberen Eck zu finden sind.

Muse - Kleine Hilfen

Muse – Kleine Hilfen

 

Mit dem ersten (E) der drei Icons, kann man in die Seite hinein zoomen um mehr Details zu erkennen oder heraus zoomen um eine bessere Übersicht der Inhalte zu bekommen. Dieser Zoom hat nur eine Auswirkung auf das Entwurfsfenster und keine Auswirkung auf die später entstehende Seite. Er ist also nur ein Hilfsmittel.

Weiter geht es dann mit dem „Gehe zu“ (F) Icon. Damit muss man nicht immer in die Planungs Ansicht von Muse springen um eine andere Seite auszuwählen, sondern bekommt eine Liste aller Seiten und kann diese dann auswählen. Alle Seiten, die gerade aktiv in Arbeit sind, werden übrigens oben im Entwurfs Modus in Tabs angezeigt. Auch hier kann man zwischen den Seiten rasch hin- und her wechseln. Allerdings gilt das nur für Seiten, die schon geöffnet wurden, also die aktiven Seiten.

Die Tabs lassen sich übrigens in der Reihenfolge verschieben, bzw. mit dem kleinen x auch wieder schliessen. Den ersten Tab, den du übrigens siehst, ist das Projekt selbst. Klickt man auf diesen, dann kommt man in die Planungs Ansicht des Projektes. an dem kleinen Stern vor dem Namen, erkennt man übrigens, dass in diesem Projekt Änderungen gemacht, diese aber noch gespeichert wurden.

Zuletzt haben wir noch das Icon (G) um uns diverse Hilfsmittel ein- oder auszublenden. Damit kann man diverse Anzeige Hilfen, wie etwa Lineale, Haltepunkte, Hilfslinien usw. aus bzw. einblenden.

Muse - Aktive Hilfen

Muse – Aktive Hilfen (G)

 

Die Werkzeuge von Muse (H)

Bevor wir unsere ersten Inhalte einfügen, sehen wir uns noch die Werkzeugleiste an, denn diese beinhaltet wichtige Werkzeuge, die wir zum Einfügen oder bearbeiten unserer Inhalte benötigen. Die Werkzeuge sind übrigens auch über ein Tastenkürzel erreichbar. Dieses habe ich in der Klammer neben der Zahl angegeben. Also zum Beispiel die Taste „V“ für das Auswahlwerkzeug ist angegeben mit (1 – V).

Muse Werkzeuge

Muse Werkzeuge

Das erste Werkzeug in der Liste ist das Auswahlwerkzeug (1 – V). Mit diesem können wir Elemente verschieben, in der Größe anpassen oder drehen. Genaueres sehen wir uns an, wenn wir Objekte eingefügt haben.

Das nächste Werkzeug ist das Freistellungswerkzeug (2 – C), mit dem sich Bilder innerhalb des Bildrahmens platzieren und in der Größe anpassen lassen. Damit können von einem Bild Ausschnitte angezeigt werden. Auch dieses sehen wir uns dann an, wenn wir Bilder eingefügt haben.

Mit dem Textwerkzeug (3 – T / Shift T) können Texte eingefügt und geändert werden. Nach der Übersicht werden wir uns dieses als erstes genauer ansehen.

Mit dem Rechteck-Werkzeug (4 – M / L) oder alternativ dem Ellipse-Werkzeug, lassen sich diese beiden Formen zeichnen. Diese Formen können dann entsprechen angepasst werden, wie Farbe, Bild, Rahmen usw.. Mehr dazu etwas später. Die alternative Variante kann man durch einen Klick auf den kleinen Pfeil rechts unten auswählen. Diese Alternative gibt es übrigens auch bei anderen Werkzeugen, wie etwa dem Textwerkzeug und dem folgenden Rahmenwerkzeug.

Da wären wir auch schon bei dem Rechteck-Rahmenwerkzeug (5 – F / Shift F) oder alternativ dem Ellipse-Rahmenwerkzeug. Damit lassen Rahmen zeichnen, die dann mit einer Farbe oder einem Bild gefüllt werden können.

Mit dem Handwerkzeug (6 – H) lässt sich die komplette Website hin- und her verschieben.

Kommen wir zum Zoomwerkzeug (7 – Z). Mit diesem kann in die Webseite hinein gezoomt werden um bestimmte Bereiche zu vergrößern, und natürlich auch wieder heraus gezoomt werden. Größer wird die Seite einfach durch einen Klick innerhalb der Seite, wenn das Werkzeug aktiviert ist. Kleiner wird es, wenn man gleichzeitig die ALT-Taste gedrückt hält und dann klickt.

Um einen Anker (8 -A) zu platzieren, verwenden wir dieses Werkzeug. Ein Anker dient dazu um zu bestimmten Bereichen einer Seite springen zu können. Eine typische Anwendung sind die One Page Seiten, wo es nur eine lange Seite gibt und bei Klick auf das Menü zu einem bestimmten Abschnitt innerhalb dieser Seite gesprungen wird.

Wir sind schon beim letzten Werkzeug angelangt, dem „Text auf Haltepunkt formatieren“ (9). Dieses Werkzeug benötigen wir um Texte beim responsive Design bei verschiedenen Haltepunkte unterschiedlich formatieren zu können. Mehr dazu bei der Lektion zum Thema responsive Design.

 

Texte einfügen und bearbeiten

Wir haben und jetzt eine Reihe von Werkzeugen angesehen. Wenden wir uns einmal näher dem Textwerkzeug (3) zu. Wenn wir das Werkzeug ausgewählt haben. Dann können wir auf der Webseite ein Rechteck aufziehen, in welchen wir dann einen Text eintippen können:

Muse Text-Werkzeug

Muse Text-Werkzeug

 

Eigenschaften der Elemente (I)

Wenn der Text noch ausgewählt ist, dann werfen wir einmal einen Blick auf die Eigenschaften, die sich jetzt verändert haben sollte. Wie wir erkennen können, gibt es jetzt eine Reihe von Eigenschaften, die sich auf das Text Element beziehen. Möchte ich einen bestimmten Textbereich innerhalb des Text Element Fensters formatieren, dann sollte der Text vorher auch markiert werden. So sehen die Eigenschaften beim Text aus.

Zur besseren Übersicht, habe ich die Eigenschaften in 2 Teile geteilt:

Muse - Text Eigenschaften 1

Muse – Text Eigenschaften 1

 

Man sieht hier, dass man die wichtigsten Formatierungen eines Textes einstellen kann. So lassen sich die Schriften, die Größe und die Farbe des Textes auswählen. Der Text kann fett, kursiv oder unterstrichen dargestellt werden. Weiters lassen sich auch die Absätze links, zentriert, rechts oder als Blocksatz ausrichten.

Sollte man mit diesen Einstellungen nicht genug haben, dann bietet Muse eine etwas versteckt Möglichkeit an, weitere Details einzustellen. Diese zusätzlichen Eigenschaften, gibt es übrigens bei fast allen Elementen.

Vielleicht ist die aufgefallen, dass das Wort „Text“ orange und unterstrichen ist. Ein Hinweis, darauf, dass man dieses Wort anklicken kann. Tut man das, dann sieht man plötzlich folgendes Fenster.

Muse - Detail Eigenschaften

Muse – Detail Eigenschaften

 

Man kann jetzt immer noch die selben Eigenschaften, wie vorhin verändern, aber es sind eine ganze Menge dazu gekommen. So können jetzt diverse Abstände und Einrückungen und auch die Link Formatierung und die Absatzformate verändert werden.

Du siehst also, es lohnt sich immer auch auf die orange unterstrichenen Texte bei den Eigenschaften zu klicken, um zu sehen, was sich noch so alles ändern lässt.

Machen wir jetzt noch einen Blick auf den zweiten Teil der Eigenschaftsleiste.

Muse - Text Eigenschaften 2

Muse – Text Eigenschaften 2

 

Hier kann man Texte zu Aufzählungen mit oder ohne Nummern machen und die Absatz-, bzw. Zeichenformate einstellen. Weiters kann man mit Hyperlinks einen Text mit anderen Inhalten verlinken. Mehr zu diesen Eigenschaften in einer späteren Lektion.

Wenn du jetzt ganz aufmerksam warst, dann wirst die bemerkt haben, dass auch das Wort Hyperlinks orange und unterstrichen ist. Als fortgeschrittene Muse Anwender weisst du jetzt, dass dahinter noch weitere Eigenschaften zu den Links stecken. Aber wie gesagt, diese sehen wir uns ein anderes mal an.

 

Die Bedienfelder (J)

Du hast bist jetzt schon gesehen welche Werkzeuge es gibt, wie man damit Elemente einfügt und wie man die Eigenschaften verändern kann. Sehr viel von der Leistung von Muse steckt aber in den Bedienfeldern auf der rechten Seite. Möchte man eines der Bedienfelder verwenden, dann klickt man einfach darauf und es klappt sich seitlich auf. Probieren wir das einmal mit unserem „Text“ Bedienfeld.

Muse Bedienfelder

Muse Bedienfelder

 

Du siehst jetzt einen Teil der Bedienfelder, mit dem aufgeklappten „Text“ Bedienfeld. Ich nehme einmal an, dass dir dieses Feld bereits bekannt vorkommt. Genau, es sind die erweiterten Eigenschaften, die wir bei der Text Formatierung auch schon gesehen haben. Du siehst also, in Muse gibt es oftmals auch mehrere Wege um bestimmte Aufgaben zu erledigen.

Die Bedienfelder auf der rechten Seite, kannst du ganz deinen persönlichen Bedürfnissen anpassen. Sprich du kannst die Reihenfolge verändern, Bedienfelder entfernen oder auch andere hinzufügen. Sollte dir einmal ein Bedienfeld abhanden kommen, dann hast du die Möglichkeit dieses über das Menü „Fenster“ wieder zu aktivieren.

Muse - Menü Fenster

Muse – Menü Fenster

 

Wie du in der Liste siehst, gibt es eine Menge Bedienfelder, die auf der rechten Seite gar nicht verfügbar sind. Dieses kannst du jetzt einfach anklicken und schon steht es auf der rechten Seite zur Verfügung. In den Bedienfeldern stecken eine Menge hilfreiche Funktionen und Hilfen. Die einzelnen Felder, werden wir uns dann ansehen, wenn wir die entsprechenden Elemente behandeln.

Ein Tipp noch zum Fenster Menü. Ganz oben siehst du zwei aktivierte Einträge, die „Steuerung“ und die „Symbolleiste“. Hinter diesen Begriffen verstecken sich zwei Elemente, die wir schon kennen. Die „Symbolleiste“, sind die Werkzeuge auf der linken Seite und die „Steuerung“ bezeichnet die Eigenschaften im oberen Bereich. Sollten dir also diese beiden Elemente einmal aus irgendeinem Grund abhanden kommen, dann weisst du jetzt, wie du diese wieder aktivieren kannst.

 

Zusammenfassung

So das war es wieder einmal. Auch heute, hast du wieder eine Menge über Muse erfahren und gelernt. Du kennst jetzt die verschiedenen Ansichten von Muse und hast die Entwurfs Ansicht besser kennengelernt. In dieser zentralen Ansicht entstehen ja unsere eigentlichen Seiten. Dort kennst du jetzt die Werkzeuge und hast bereits gesehen, wie man ein Element (einen Text) einfügt. Weiters weisst du auch, wie man die Eigenschaften von Elementen verändern kann und was diese orange unterstrichenen Texte bei den Eigenschaften bedeuten. Schlussendlich hast du noch die kennen gelernt, dass viele Funktionalitäten in den Muse Fenstern stecken.

 

Was kommt als nächstes

Das nächste mal werden wir uns näher mit dem Einfügen von Bildern in unsere Webseite beschäftigen und uns ansehen, was wir dabei beachten müssen und einstellen können.

 

Bis zur nächsten Lektion zu sehen.

Liebe Grüße
Andreas – Dein WebDesign-Coach

Comments

  1. Hallo Andreas,
    ich arbeite schon länger mit MUSE und bin im Moment dabei, eine neue Site zu erstellen. Deine Kurs ist wirklich klar und deutlich und man kann MUSE gut lernen. Wenn es Dich interessiert, füge ich unten einen Link ein, vielleicht schaust Du Dir mal meine Arbeiten an, Verbesserungsvorschläge nehme ich gerne an.

  2. Bernd Steinbring

    Hallo Andreas,

    danke für die 3 Lektionen.
    Du hast sie sehr übersichtlich und nachvollziehbar geschrieben.
    Da ich schon lange mit InDesign und auch Muse arbeite, ist es mir bis jetzt sehr geläufig.
    Nun warte ich auf die nächsten Highlights

    Schöne Grüße aus dem sonnigen Bielefeld

    Bernd

    • Vielen Dank, für das Kommentar. Ich denke in der nächsten Lektion, wo es um Bilder geht sind wieder viele interessante Infos und hoffentlich Neues für dich dabei.

      Grüße aus dem ebenfalls sonnigen Wien.

      Andreas

  3. Hallo Andreas,

    Deine Erklärungen und Hinweise sind total schlüssig und hilfreich, richtrig gut gemacht!

    Das Wort „Text“ ist orange und unterstrichen, wenn der Bildschirm nicht breit genug ist um alle Optionen darzustellen. Bei z.B. 1920×1080 Pixel, ist vor dem Arial kein gelber Textlink, da man alles direkt sehen kann.

    Gruß
    Tom

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.