Muse Kompakt Kurs – Lektion 5 – Formwerkzeuge und Bilder

Das letzte Mal, haben wir uns angesehen, wie wir Bilder in Muse einfügen und verändern können. Weiters haben wir uns mit dem Elemente Bedienfeld beschäftigt, dass eine wichtige Rolle in Zusammenhang mit Bildern spielt.

Heute werden wir uns die Form Werkzeuge ansehen, die uns unter anderen weitere Möglichkeiten für die Arbeit mit Bildern bereitstellen.

Links in der Werkzeugleiste, gibt es zwei Symbole, die uns Formen bereitstellen. Erstens das „Rechteck-Werkzeug“ bzw. das „Ellipse-Werkzeug“ und zweitens das „Rechteck-Rahmenwerkzeug“ bzw. das „Ellipse-Rahmenwerkzeug“.

Muse - Werkzeuge Formen

Muse – Werkzeuge Formen

 

Das Rahmenwerkzeug

Sehen wir uns zuerst einmal die beiden Rahmenwerkzeuge an, denn diese wurden für die Arbeit mit Bildern hinzugefügt.

Fügt man diese beiden Varianten (Rechteck und Ellipse) auf der Seite ein, dann sieht das so aus:

Muse - Bildrahmen leer

Muse – Bildrahmen leer

Tipp: Hält man beim Ziehen der beiden Rahmen die ALT-Taste gedrückt, dann wird ein Kreis, bzw. ein Quadrat gezeichnet. Andernfalls, kann man Breite und Höhe getrennt voneinander einstellen.

 

Bild in Rahmen einfügen

Diese Rahmen stellen jetzt einmal Platzhalter für später einzufügende Bilder dar. Wie kommen aber jetzt die Bilder in die Rahmen. Das geht wie schon gewohnt mit dem Platzieren Befehl, den wir in der letzten Lektion kennen gelernt haben.

Wählt man das Bild von der Platte aus, dann bekommt man wieder das kleine Vorschau-Bild beim Mauszeiger. Fährt man jetzt über einen der Bildrahmen, dann sieht man, dass der Rahmen stärker umrandet wird.

Muse - Bildrahmen Bild einfügen

Muse – Bildrahmen Bild einfügen

Klickt man jetzt auf die linke Maustaste, dann wird das Bild in diesen Rahmen eingefügt.

Muse - Bildrahmen Bild1 eingefügt

Muse – Bildrahmen Bild1 eingefügt

Diesen Vorgang können wir jetzt auch mit dem zweiten Kreis Rahmen wiederholen, dann sieht das Ergebnis wie folgt aus:

Muse - Bildrahmen Bild2 eingefügt

Muse – Bildrahmen Bild2 eingefügt

Wenn die Bilder fertig eingefügt sind, unterscheiden sie sich nicht von den Bildern, die normal über Platzieren eingefügt wurden. Der Vorteil dieser Variante ist, dass der Bildrahmen schon vorher eingefügt werden kann, auch wenn man nicht weiss, welches Bild an die Stelle kommen soll. Der Rahmen dient in diesem Fall als Platzhalter. Ausserdem bietet der Bildrahmen, die Möglichkeit, das Bild als Kreis oder Ellipse darzustellen, was sonst nur über die Abrundung und mit etwas mehr Aufwand möglich ist.

Die folgende Funktion, gilt also für beide Arten des Einfügens. Man kann das Bild inkl Rahmen einmal anklicken, dann ist der Rahmen aktiv. Erkennen kann man das links oben an der Bezeichnung „Bildrahmen“. Jetzt kann man das ganze Bild inkl. Rahmen auf der Seite verschieben.

Muse - Eigenschaften Bildrahmen

Muse – Eigenschaften Bildrahmen

Wenn man das Bild mit einem Doppelklick anwählt, dann wird nicht der Rahmen mit dem Bild, sondern das Bild innerhalb des Rahmens ausgewählt. Zu erkennen ist das auch an der Bezeichnung links oben. Diese ist jetzt „Bild“.

Muse - Eigenschaften Bild

Muse – Eigenschaften Bild

 

Bild im Rahmen verändern

Bewegt man das Bild jetzt, dann kann man es innerhalb des Rahmens verschieben und damit den angezeigten Ausschnitt anpassen. Am Beispiel mit dem Kreis, kann man die richtige Größe des Bildes und den Teil, der dann angezeigt wird erkennen.

Msue - Bildrahmen Bild verschieben

Msue – Bildrahmen Bild verschieben

Ebenso, kann man auch die Größe des Bildes innerhalb des Rahmens verändern. Dazu muss man nur die Anfasser an den Ecken oder Seiten verwenden.

 

Bild als Hintergrund-Bild

Es gibt bei einem leeren Rahmen noch eine weitere Möglichkeit ein Bild einzufügen und zwar als Hintergrund Bild. Dazu sehen wir uns die erweiterten Eigenschaften der Fläche an. Wenn du dich an eine der ersten Lektionen zurückerinnerst, dann weisst du vielleicht noch, dass hinter den orangefarbenen unterstrichenen Worten weitere Eigenschaften stecken. Zuerst fügen wir wieder einen leeren Bildrahmen ein, markieren diesen und klicken dann auf das Wort „Fläche“.

Muse - Eigenschaft Flächen

Muse – Eigenschaft Flächen

Hier lassen sich jetzt einige Eigenschaften zu unserem Bildrahmen eingeben. Dieser kann einfach eine Farbfläche oder auch einen Farbverlauf bekommen. Mit Deckkraft lässt sich diese Fläche teiltransparent machen. Was uns aber jetzt besonders interessiert, ist das einfügen eines Bildes. Dazu klicken wir auf „Bild einfügen“. Du hast jetzt die Möglichkeit ein Bild von deiner Platte auszuwählen. Sobald es bestätigt wird, siehst du dieses Bild im Bildrahmen. Es kann allerdings, so wie bei mir passieren, dass du gar nicht viel erkennen kannst, da das Bild wesentlich größer als die Fläche ist und daher nur ein kleiner Teil, nämlich die linke obere Ecke angezeigt wird.

Muse - Eigenschaft Fläche - Hintergrundbild einfügen

Muse – Eigenschaft Fläche – Hintergrundbild einfügen

Mit den Markierungen bei „Position“, kann man festlegen, welcher Bildausschnitt sichtbar sein soll. Wenn du genau die Mitte des Bildes sehen willst, dann nimmst du genau die mittlere Markierung.

Muse - Eigenschaft Fläche - Position

Muse – Eigenschaft Fläche – Position

Du siehst zwar auch nur einen kleinen Teil des Bildes, aber jetzt genau die Mitte des Bildes. Was aber, muss man tun, um das komplette Bild zu sehen? Die Größe ändert man mit der Einstellung „Anpassen

Es gibt da eine Liste mit 6 Einträgen. Die Einträge unterhalb von „Originalgröße“, sind dann interessant, wenn das Bild kleiner als der Rahmen ist, denn dann geht es darum, wie das Bild innerhalb des Rahmens wiederholt wird. Bei Kacheln, wird es horizontal und vertikal wiederholt, bei nebeneinander nur horizontal und bei untereinander nur vertikal.

Muse - Eigenschaft Fläche - Anpassen

Muse – Eigenschaft Fläche – Anpassen

Da unser Bild aber größer ist, interessieren und die beiden Einträge oberhalb von Originalgröße.

 

Passend skalieren

Nehmen wir zuerst einmal „Passend skalieren“ und sehen uns das Ergebnis an.

Muse - Eigenschaft Fläche -Passend skalieren

Muse – Eigenschaft Fläche -Passend skalieren

Wie du sehen kannst, passt das Bild jetzt komplett in den Rahmen hinein. Da aber die Proportionen des Bildes zum Rahmen unterschiedlich sind, ist links und rechts ein freier Platz. Das komplette Bild ist aber im Rahmen sichtbar.

 

Füllend skalieren

Sehen wir uns jetzt im Vergleich einmal an, was bei der Einstellung „Füllend skalieren“ passiert. Jetzt wird der Rahmen komplett mit dem Bild ausgefüllt. Da aber unsere Proportionen immer noch unterschiedlich sind, liegen jetzt Bereiche des Bildes oben und unten außerhalb des Rahmens. Dafür wird der Rahmen aber immer komplett mit dem Bild ausgefüllt.

Muse - Eigenschaft Fläche -Füllend skalieren

Muse – Eigenschaft Fläche -Füllend skalieren

Welche von beiden Varianten die bessere ist, kann man nicht pauschal sagen, denn das hängt von deinen Design Vorstellungen ab. Willst du aber zum Beispiel ein Bild haben, dass immer die komplette Breite des Browserfenster einnimmt, dann ist „Füllend skalieren“ die richtige Wahl.

Man kann übrigens auch Farben mit einem Bild kombinieren. Das macht allerdings nur Sinn, wenn das Bild kleiner als der Rahmen ist, da die Farbe immer hinter dem Bild liegt. Mit passend skalieren, könnte das dann so aussehen.

Muse - Eigenschaft Fläche - Hintergrundfarbe

Muse – Eigenschaft Fläche – Hintergrundfarbe

Wichtig zu wissen, bei dieser Methode von Bildern einfügen, ist, dass das Bild nicht mehr normal im HTML Code eingefügt wird, sondern dass dies über CSS geschieht.

Das mag für deinen User, der die Seiten ansieht nicht zuviel Unterschied machen. Möchtest du allerdings mit der In-Browser Editing Funktion über das Web einmal Bilder austauschen, dann geht das mit Hintergrund Bildern nicht.

Ausserdem können solche Bilder nicht barrierefrei gestaltet werden, da diese dann erstens keinen alternativen Text haben können und zweitens von Screenreadern gar nicht erfasst werden. Screenreader sind übrigens Programme, die einem blinden User die Inhalte auf einer Website vorlesen können.

Da Suchmaschinen fast wie blinde User arbeiten, sind solche Bilder in den meisten Fällen auch vor Suchmaschinen unsichtbar.

Denke also vor dem Einsatz dieser Methode gut nach, ob es wirklich notwendig ist, ein Bild als Hintergrund Bild einzufügen. Ein Beispiel, wo das Sinn macht, zeige ich dir etwas weiter unten noch.

 

Das Rechteck- und Ellipsen-Werkzeug

Das war es soweit mit dem Rahmenwerkzeug. Kommen wir jetzt zu einem zweiten recht ähnlichen Werkzeug, dem Rechteck- oder Ellipsen-Werkzeug.

Ähnlich wie beim Rahmenwerkzeug, kannst du nach dem Auswählen in der Werkzeugleiste auf deiner Website eine Form entsprechend der Auswahl zeichnen.

Als Beispiel, habe ich wieder ein Rechteck und einen Kreis eingefügt.

Muse - Rechteck / Kreis einfügen

Muse – Rechteck / Kreis einfügen

Als ersten Unterschied, erkennt man bereits, dass die Formen kein Kreuz in der Mitte haben. Versucht man, so wie vorhin ein Bild mittels Platzieren in diese Form einzufügen, dann wird man damit scheitern. Dafür ist das Rechteck nicht gedacht.

Das was aber das Rechteck gemeinsam mit dem Rahmenwerkzeug hat, ist das Ändern des Hintergrundes. Hier ist das Verhalten genau gleich wie vorhin, weshalb ich das hier nicht noch einmal beschreiben werden.

Was diese Formen noch anbieten, ist das Bearbeiten es Randes. Diese Eigenschaften können übrigens auch beim Rahmenwerkzeug verändert werden. Also schlussendlich ist auch hier kein Unterschied. Da wir das aber vorher noch nicht gesehen haben, zeige ich das jetzt noch kurz.

 

Konturen / Rahmen

Wählt man eine der Formen aus, dann kann man in der oberen Leiste die Kontur (1) und die Ecken (2) verändern. Bei Kontur gibt es wieder die erweiterten Einstellungen hinter dem Text, wie hier dargestellt.

Muse - Kontur und Eckeneigenschaften

Muse – Kontur und Eckeneigenschaften

Damit kann man die Farbe des Rahmens und die Stärke auf jeder Seite verändern. Die Rahmen können sogar auf jeder Seite unterschiedlich dick sein.

Für unser Beispiel, habe ich dem Rechteck ein Bild als Hintergrund eingefügt und dann einen Rahmen erstellt.

Muse - Kontur Eigenschaften

Muse – Kontur Eigenschaften

Ich habe rund um das Bild einen grünen Rahmen hinzugefügt, der auf allen Seiten 15px breit ist, ausser unterhalb, da ist er nur 5px breit.

Bleibt noch das Ausrichten des Rahmens. Hier kann man angeben, auf welcher Seite sich der Rahmen vom gezeichneten Rechteck befindet.

Muse - Kontur ausrichten

Muse – Kontur ausrichten

Das erste (linke) Symbol richtet den Rahmen gleichmässig aus, was bedeutet, dass die Hälfte des Rahmens ausserhalb und die andere Hälfte innerhalb gezeichnet wird. Beim mittleren Symbol (innen ausrichten), wird der Rahmen komplett innerhalb des Rechtecks gezeichnet und beim dritten Symbol, wird es komplett ausserhalb gezeichnet.

 

Die Ecken

Sehen wir uns jetzt noch die Ecken unseres Rahmens an. Wenn der Rahmen markiert ist, dann kann man mit dem Ecken-Symbol die einzelnen Ecken zum Abrunden aktivieren. Für die aktivierten Ecken lässt sich dann die Stärke der Abrundung einstellen.

Muse - Ecken Eigenschaft

Muse – Ecken Eigenschaft

In diesem hier gezeigten Beispiel sind die beiden oberen Ecken mit 20px abgerundet. Die beiden unteren haben keine Abrundung. Leider kann man bei Muse nur angeben, dass eine Ecke abgerundet ist und dann für alle abgerundeten Ecken den Wert einstellen. Man kann nicht, wie beim Rahmen unterschiedliche Werte für die verschiedenen Ecken angeben.

 

Bild über die gesamte Browser Breite

Ich habe weiter oben erwähnt, dass ich noch ein Beispiel zeigen möchte, wo es Sinn macht, ein Bild als Hintergrund Bild einzufügen. Und zwar, macht man das, wenn ein Bild über die gesamte Breite des Browserfensters dargestellt werden soll, egal wie breit dieses ist.

Dazu fügt man ein Rechteck auf der Seite mit der gewünschten Höhe ein und schiebt den linken Rand des Rechtecks ganz an den linken Rand der Fläche im Entwurf (1). Nun zieht man das Rechteck rechts so gross, dass es am rechten Rand ansteht. Man erkennt das daran, dass die Breite nicht mehr in px angegeben, wird sondern der Wert „100%“ dort steht (2).

Muse - Rechteck 100 Prozent

Muse – Rechteck 100 Prozent

 

Jetzt kann man dem Rechteck, wie oben beschrieben ein Hintergrund Bild einfügen und wählt bei Anpassen – „Füllend skalieren“ sowie bei der Position den Mittelpunkt. Bei einer größeren Breite sieht das dann so aus:

Muse - Rechteck 100 Prozent breit

Muse – Rechteck 100 Prozent breit

 

Macht man das Browserfenster in der Breite kleiner, dann könnte es so dargestellt werden.

Muse - Rechteck 100 Prozent schmal

Muse – Rechteck 100 Prozent schmal

Man erkennt, dass die Höhe gleich bleibt und das Bild immer noch in der kompletten Höhe dargestellt wird. Allerdings werden durch die Position „Mitte“ links und rechts die Bildinhalte abgeschnitten.

Der Unterschied zu Bildern im responsive Design, ist übrigens, dass normale Bilder zwar auch 100% Breite des Browserfenster einnehmen können, die Höhe aber proportional mit verändert wird. Genau das will man aber nicht immer haben.

 

Zusammenfassung

Du hast heute die verschiedenen Form-Werkzeuge, konkret das Rahmenwerkzeug und das Rechteck/Ellipse Werkzeug kennengelernt und dabei erfahren, wie sich Bilder mit diesen Formen zusammenfügen lassen.

Du weisst auch, dass Bild bei Formen als Hintergrund eingefügt werden können, dieser Effekt aber gut zu überlegen ist, da er doch einige Nachteile aufweist.

Weiters kennst du auch noch die Möglichkeit, wie Rahmen und Ecken verändert werden können.

Zum Abschluss, hast du eine Anwendung für ein Bild als Hintergrund einer Form gesehen.

 

Wie geht es weiter

Das nächste mal werden wir uns eine sehr praktische Lösung von Muse ansehen, die Musterseiten. Mit diesen, kann einem sehr viel Arbeit beim Erstellen der Webseiten abgenommen werden.

Comments

  1. Rehi Andreas,

    ich hatte mir einen Zettel mit Hinweisen gemacht und habe nun Zeit Dir diese zu senden, jetzt nur ein kleiner Tippfehler, ein fehlendes „d“:
    ersetze: …, ist das Bearbeiten es Randes.
    durch: …, ist das Bearbeiten des Randes.

    Gruß
    Tom

Schreibe einen Kommentar

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