Muse CC 2018 Grundkurs

Elemente positionieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Positionieren Sie in diesem Film die ersten Elemente auf Ihrer Webseite. Der Trainer zeigt Ihnen zudem einige Kniffe für effizientes Arbeiten.

Transkript

Nachdem wir uns nun einen kleinen Überblick hier über Adobe Muse verschafft haben, möchte ich hier auf dieser Webseite natürlich mal das erste Objekt positionieren. Und dazu wähle ich hier, auf der linken Seite das Rechteck-Werkzeug aus. Mit dem Rechteck-Werkzeug, naja, der Name verrät es, kann man hier Rechtecke auf dieser Webseite erstellen. Ich werde jetzt hier einfach mal ein Rechteck aufziehen. Die Größe spielt im Moment mal noch keine Rolle, sondern wir wollen jetzt einfach das Ganze hier nur einmal erstellt haben. Wenn ich jetzt hier dieses Objekt erstellt habe, sieht man hier oben, dort kann man die Flächenfarbe anlegen. Kann man festlegen, ob man hier eine Flächenfarbe haben möchte und im Moment ist das hier auf transparent, auf durchsichtig gesetzt und das kann man daran sehen, dass hier weiße Fläche und hier dieser rote Strich ist. Wenn ich mit der Maus drüberfahre, bekomme ich so eine kleine Hilfe und dann steht dort auch „Ohne“. Darüber hinaus habe ich jetzt hier, ebenfalls bei „Kontur“, auch dort ist im Moment keine Farbe gesetzt. Das möchte ich jetzt einmal ändern, ich möchte jetzt hier schwarz auswählen und nun sehen Sie, habe ich jetzt hier einen schwarzen Rahmen. So richtig gut kann man das im Moment nicht sehen. Das liegt schlicht und ergreifend daran, dass wir jetzt hier zwei Sachen haben, die wenn man so will, übereinander liegen, nämlich zum einen der schwarze Rahmen und hier diese blauen Hilfslinien. Hier oben kann ich aber auch noch die Konturstärke ändern. Wenn ich die Konturstärke jetzt einmal raufsetze dann sehen Sie, ja, man kann jetzt sehr, sehr deutlich die Kontur sehen, weil die Stärke der Hilfslinie sich nicht ändert. Aber ich will das Ganze hier auf einem Punkt haben, deswegen reduziere ich das Ganze wieder ein wenig. Des Weiteren möchte ich, dass das Ganze später ausschaut wie eine Visitenkarte, ich möchte so eine gewisse Plastizität erreichen. Und deswegen klicke ich jetzt hier auf „Effekte“ und dann kann ich hier den Schatten einschalten und Sie sehen, jetzt haben wir so eine Art Schlagschatten. Und da sieht das Ganze jetzt durchaus schon recht ordentlich, wie eine Visitenkarte aus. Wenn ich hier auf der linken Seite das Werkzeug wieder wechsle und zwar vom Rechteck-Werkzeug zum Auswahlwerkzeug. Da kann ich jetzt hier jederzeit dieses Objekt nehmen und kann dieses Objekt verschieben und Sie sehen, ich bekomme jetzt hier auch so Hilfslinien angezeigt, dann weiß ich, ich habe dieses Objekt genau in der Mitte. Ich kann das Objekt nicht nur horizontal, sondern auch vertikal in die Mitte positionieren und dann sehen Sie, jetzt ist es genau in der Mitte. Ich will jetzt die Größe und die Position von meinem Objekt, aber nicht mit der Maus festlegen, sondern ich will es wirklich per Tastatureingabe, auf das Pixel genau festlegen. Und hier oben, wenn man in diesem Bereich sich jetzt ein bisschen weiter umschaut, dann kommt man wahrscheinlich zuerst auf die Idee, hier auf „Ausrichten“ zu klicken. Das ist allerdings leider ein Irrglaube, denn mit der Funktion „Ausrichten“ kann man Objekte aneinander ausrichten. Das was ich hier benötige, ist die Funktion „Transformieren“. Ich muss also hier auf „Transformieren“ klicken und Sie sehen, dass ist jetzt hier unser Objekt und jetzt haben wir hier die Transformationseigenschaften zu diesem Objekt. Transformationseigenschaften heißt, wir haben jetzt hier die Position X und Y. Wenn man so ein Koordinatensystem hat, dann ist immer wichtig, A wo ist der Ursprung und B, dann sind immer zwei Dinge wichtig, A ist der Ursprung unseres Koordinatensystems und B, wenn man die Koordinaten hier hat, auf welchen Punkt des Objektes beziehen sich diese Positionsangaben. Und der Ursprung des Koordinatensystems ist immer links oben bei HTML. Also hier oben da ist wirklich der Ursprung, da ist XY 00. Wenn wir jetzt hier dieses Objekt haben, dann haben wir dieses Objekt erst um 158 Punkte nach X verschoben, nach rechts verschoben. Und 92 Punkte nach unten verschoben. Wenn wir nach unten gehen, dann zählen wir in der Tat rauf. Nicht so, wie man das vielleicht in der Schule hatte, bei so einem Koordinatensystem, wo man dann sagt, wenn es nach unten geht, werden die Werte negativ. Nein, hier in HTML werden die Zahlen größer, wenn wir nach unten gehen und zwar positiv größer, wenn wir nach unten gehen. Und der Bezugspunkt des Objektes ist immer hier links oben. Diesen Bezugspunkt hier links oben kann man auch nicht, wie in anderen Programmen ändern. Man kann also nicht sagen, man will den Punkt hier in die Mitte setzen. Nein, der Bezugspunkt ist immer links oben. Des Weiteren können wir hier die Breite unseres Objektes angeben. Breite und natürlich auch die Höhe. Und ich möchte jetzt hier, in der Tat einmal die Breite von Hand eingeben und zwar 620 Pixel breit und 400 Pixel hoch. Das ist dann in etwa das gleiche Seitenverhältnis, wie man es auch bei einer Standard-Visitenkarte hat. Und jetzt möchte ich noch die Ausrichtung hier verändern. Und bei der Ausrichtung hier oben, bei dem X-Wert, dort trage ich nun ein, 170 Pixel. Und dann sehen Sie es, jetzt haben wir dieses Objekt hier in der Mitte. Wie kommen wir auf diese 170 Pixel? Naja, wir müssen wissen, dass eine Standardwebseite, hier innerhalb von Adobe Muse, 960 Pixel breit ist. Das kann man hier oben auch noch einmal ablesen, wenn man es vergessen hat. Man kann diese Breite auch ändern, man kann das auch individuell einstellen, aber hier im Moment ist das Ganze auf 960 Pixel eingestellt. Und jetzt muss man, in der Tat schlicht und ergreifend ein wenig rechnen. 960 minus 620 gibt 340, 340 geteilt durch 2 ergibt 170. Wir haben also hier auf der linken Seite 170 Punkte und hier auf der rechten Seite 170 Punkte und genau das ist das, was wir haben wollen. Und jetzt müssen wir noch den Y-Wert einstellen und der Y-Wert, der soll hier 62 Pixel sein und deswegen haben wir dieses Objekt, genau hier oben jetzt hier, auf dieser Hilfslinie. Sie haben gesehen, wie man ein Rechteck innerhalb von Adobe Muse erstellt. Sie haben gesehen, wie man die Position exakt auf das Pixel genau ausrichtet und Sie haben gesehen, wie man Breite und Höhe von Objekten festlegen kann.

Muse CC 2018 Grundkurs

Lernen Sie mithilfe von Muse CC 2018 Websites zu gestalten ohne Programmier-Vorkenntnisse haben zu müssen.

7 Std. 0 min (66 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:16.03.2018

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!