Muse Kompakt Kurs – Lektion 9 – Texte formatieren und Absatzformate

Das letzte Mal haben wir uns angesehen, wie wir unser Menü gestalten können. Heute sehen wir uns ein weiteres Element an, bei dem wir am Aussehen arbeiten können.

Es handelt sich dabei um unsere Texte. Ein wenig haben wir uns dem Thema ja schon gewidmet, indem wir uns das Text-Bedienfeld und die Eigenschaften zum Text in der oberen Leiste angesehen haben.

Heute möchte ich auf das Text-Bedienfeld noch ein wenig näher eingehen, aber auch einige Tricks zeigen wie man effizient Texte formatiert und im Fall der Fälle Änderungen rasch und schnell für alle vorhandenen Texte durchgeführt werden können.

Wir werden uns ausserdem ansehen, wie wir unsere Texte einfügen, bzw. Formatieren müssen damit diese SEO tauglich, sprich Suchmaschinen optimiert sind.

 

Das Text Bedienfeld

Um die Beispiele besser zeigen zu können, habe ich auf meiner Produkt Seite eine Hauptüberschrift mit dem Text „Unsere Produkte“ und dann für jedes Produkt eine Überschrift und zwei Textabsätze.

Um ein Textfeld formatieren zu können, wird das Textfeld einfach ausgewählt. Zur Kontrolle, können wir wieder links oben sehen, welches Element wir gewählt haben. Es sollte die Bezeichnung „Textrahmen“ sichtbar sein.

Muse - Textrahmen markiert

Textrahmen markiert

Wer die letzen Lektionen gut aufgepasst hat, der wird erkennen, dass der Textrahmen die Möglichkeit bietet mehrere Zustände zu designen. Wie beim Menü, kann man auf das Wort „Normal“ klicken und dann die Zustände Normal, Rollover, Maustaste gedrückt und Aktiv auswählen.

Wir können damit alle Eigenschaften rund um Texte, die wir im folgenden sehen werden bei jeden Zustand unterschiedlich definieren.Ich beschränke mich in meinen Beispielen nur auf den Normal Zustand.

Möchte ich den ausgewählten Text verändern, dann gibt es dafür das Text-Bedienfeld. Dort hat man ganz oben die Möglichkeit, die Schriftart, die Schriftgröße in px und die Schriftfarbe zu verändern. Zum Thema Schriftart, gibt es noch eine eigene Lektion, da dieses Thema doch recht umfangreich ist.

Weiters lässt sich der Inhalt unterschiedlich ausrichten – von links nach rechts sind das die Symbole für links, zentriert, rechts ausgerichtet und Blocksatz.

Muse- Text formatieren Bedienfeld

Muse- Text formatieren Bedienfeld

In der nächsten Zeile läßt sich die Schrift Fett, Kursiv, Unterstrichen, in Grossbuchstaben, in Kleinbuchstaben, hochgestellt und tiefgestellt darstellen.

 

Abstände und Hintergründe

Darunter gibt es dann einen Block, wo diverse Abstände eingestellt werden können. Damit kann man die Abstände zwischen den Buchstaben und den Zeilen einstellen. Darunter gibt es dann die Möglichkeit den Einzug der ersten Zeile festzulegen.

Dann folgt ein weitere Block von 2 mal 2 Zahlen Feldern, wo festgelegt werden kann, wir gross die Abstände vom Rand der Textbox bis zur Schrift sind.

Als Beispiel habe ich dazu eine Textbox mit einer Hintergrundfarbe (1) versehen und dann auf jeder Seite einen Abstand (2) von 15px eingestellt. Wie man sieht, hat der Text in der gelben Box jetzt einen Abstand im Gegensatz zur darüber liegenden weissen Box.

Formatieren mit Hintergrund und Innenabstand

Formatieren mit Hintergrund und Innenabstand

Den Abstand eines Textfeldes, kann man übrigens auch mittels Rahmen lösen. Dazu öffnet man bei markierter Textbox die Konturen Eigenschaften und legt dort zuerst einmal die Farbe fest. Diese sollte die selbe sein, die auch die Hintergrundfarbe der Textbox. Bei Ausrichten, stellen wir die mittlere Option ein und bei Stärke  die Anzahl der Pixel. In meinem Beispiel wie oben 15px. Damit hat die Box jetzt das selbe Aussehen wie vorhin, nur wurde es jetzt mittels Kontur gelöst.

Formatieren mit Hintergrund und Kontur

Formatieren mit Hintergrund und Kontur

Der Hintergrund eines Textfeldes kann übrigens nicht nur eine Farbe sein, sondern wie wir es schon von den Form-Elementen kennen auch ein Bild. Wie das eingefügt wird, habe wir ja schon in der Lektion zu den Form-Elementen gesehen. Als Beispiel habe ich hier ein Textfeld mit Hintergrundbild.

Formatieren mit Hintergrundbild

Formatieren mit Hintergrundbild

Man kann hier gut erkennen, dass man bei Texten und Hintergrund Bildern extrem vorsichtig sein muss, damit der Text auch gut lesbar ist. Die hellen Bild Bereiche machen es zum Teil schwer den Text an dieser Stelle gut zu erkennen.

Die nächsten beiden Einstellungen beim Text Bedienfeld unter den Abständen, sind das Link-Format und der Absatz. Diese Eigenschaften sehen wir uns ein wenig später an.

Davor möchte ich noch kurz auf das Thema Suchmaschinen Optimierung und Barrierefreiheit von Webseiten eingehen.

 

Etwas zum Thema SEO und Barrierefreiheit

Wenn man Texte in Muse formatiert, dann wird man schnell dazu verleitet, einfach nur das Aussehen der Textelemente zu verändern. Das bedeutet, dass Überschriften zum Beispiel größer gemacht werden, Unterüberschriften etwas kleiner und dann in noch etwas kleiner die Absätze der normalen Texte.

Optisch sind wir in der Lage diese Struktur zu erkennen und so wissen wir genau, wie die Inhalte strukturiert sind. Wie sieht es aber mit Usern aus, die diese visuelle Darstellung nicht wahrnehmen können? Diese können keine Struktur mehr erkennen, die Texte sind einfach alle gleichwertig. Dieses Problem betrifft vor allem blinde User, die beim Arbeiten mit Webseiten genau auf diese Struktur angewiesen sind.

Ein blinder User kann mittels Überschriften unterschiedlicher Ordnung das Dokument analysieren um dann die für ihn geeignete Textstelle näher zu betrachten. Fehlt diese Möglichkeit, dann muss ein blinder User alle Texte komplett lesen und hat keine Möglichkeit effizient und zeitsparend die Inhalte zu verarbeiten.

Ähnlich wie einem blinden User geht es auch einer Suchmaschine. Auch diese kann bei den Inhalten nur Texte erfassen und keine visuellen Darstellungen.

Da aber Suchmaschinen den Keywords (Suchbegriffen) je nach Position unterschiedliche Wichtigkeiten geben, wäre es wichtig, dass diese das auch erkennen. Aus diesem Grund muss man für die Suchmaschinen und eben auch für blinde User die Texte als Überschrift unterschiedlicher Ordnung und die restlichen Texte als  normale Absätze markieren.

 

Semantische Tags

Man spricht dabei übrigens von Semantik (Bedeutung). Wenn man Webseite direkt in HTML erstellt, dann gibt es dafür eigene Tags. Tags sind HTML Befehle, die dem Browser sagen, wie die einzelnen Elemente einer Seite zu behandeln sind.

Bei den Tags, die dem Text eine Bedeutung geben, spricht man von semantischen Tags. Das sind zum Beispiel die Tags für die Überschriften. Bei HTML gibt es Überschriften in 6 Abstufungen. Die oberste Überschrift hat die Nummer 1 und wird mit dem HTML Tag h1 definiert. Das h steht übrigens für Headline. Weiter geht es dann mit h2 bis hin zu h6.

Ein Absatz wird in HTML mit dem Tag p für Paragraph definiert.

Warum rede ich hier von HTML Tag, wenn wir doch wissen, dass wir bei Muse nichts mit HTML zu tun haben und den HTML Code auch nicht bearbeiten können. Die Antwort darauf ist, dass es zwar stimmt, dass der Code nicht direkt bearbeitet werden kann, sondern über einen kleinen Umweg. Es ist aber sehr wichtig, dass Überschriften immer auf diese Variante formatiert werden.

Auf der einen Seite ist es wichtig für SEO und Barrierefreiheit. Auf der anderen Seite, werde wir noch sehen, dass wir uns damit auch eine Menge Arbeit ersparen können, vor allem wenn es darum geht Änderungen auf der Website vorzunehmen.

 

Absatzformate

Die Lösung für unser Problem liegt in den Absatzformaten. Auch dafür gibt es, wie schon zu vermuten wahr ein Bedienfeld. Es hat den Namen „Absatzformat“. Dieses darf nicht verwechselt werden mit dem Bedienfeld „Zeichenformat“, dass wir und dann auch noch ansehen werden.

Muse - Absatzformat Neu

Muse – Absatzformat Neu

Neues Absatzformat definieren

Öffnen wir einmal das Absatzformat Bedienfeld. Die Liste ist jetzt noch sehr leer. Bevor wir ein neues Absatzformat erstellen, müssen wir ein bereits formatiertes Textfeld markieren. Ich mache das in meinem Beispiel einmal mit der obersten Überschrift „Unsere Produkte“. Wenn diese markiert ist, dann klicken wir auf das Symbol für „Neues Format … erstellen“. In der Liste kommt dann ein Eintrag dazu, der einmal mit „Absatzformat“ bezeichnet wird.

Muse - Absatzformat Liste

Muse – Absatzformat Liste

Zum Einstellen diesen neuen Absatzformats machen wir einen Doppelklick auf diese Zeile. Es geht das Fenster für die Einstellungen auf.

Muse - Absatzformat Eigenschaft

Muse – Absatzformat Eigenschaft

Wir wählen in diesem Fenster bei Formatname einen für uns sprechenden Namen, zum Beispiel „Überschrift 1“. Bei Absatz-Tag, müssen wir jetzt unseren HTML Tag für die oberste Überschrift auswählen. Wir wir kurz vorher schon gehört haben, ist das der HTML Tag h1. Darunter bei Formateinstellungen sehen wir eine Zusammenfassung des Absatzformates, also auch die Formatierung.

Wir wiederholen den Vorgang mit der darunter liegenden Überschrift „Produkt 1“. Bei den Einstellungen zum Absatzformat wählen wir als Formatname „Überschrift 2“ und als Absatz-Tag

für eine Überschrift zweiter Ordnung.

Sehen wir uns jetzt unsere Liste der erstellten Absatzformate an.

Muse - Absatzformat Überschriften

Muse – Absatzformat Überschriften

Geht man mit der Maus über ein definiertes Absatzformat, dann kann man übrigens auch in der angezeigten Toolbox weitere Details erkennen, ohne dass man reinklicken muss.

Zusätzlich füge ich jetzt noch die Textbox, die vorhin eine Hintergrundfarbe bekommen und einen Innenabstand hat zu meiner Absatzformat Liste hinzu. Diese Textbox bekommt den Namen „Textbox hervorgehoben“. Als Tag bekommt diese Box das

. Unsere Liste enthält jetzt 3 verschiedene Absatzformat Einträge.

 

Absatzformate anwenden

Was können wir jetzt mit diesen definierten Absatzformaten machen?

Eines haben wir jetzt auf jeden Fall schon erreicht, die ersten beiden Überschriften sind in Bezug auf SEO und Barrierefreiheit schon einmal optimiert.

Ich habe aber weiter unten noch zwei weitere Überschriften, die derzeit noch nicht formatiert sind. Was machen wir mit diesen jetzt. Dazu markiere ich meine Überschrift mit dem Text „Produkt 2“. In der Liste der Absatzformate steht diese umformatierte Überschrift als „ohne“. Wenn ich jetzt mein Absatzformat für diese Überschrift anklicke, also „Überschrift 2“, dann wird das Format auf die Überschrift übertragen, ohne dass ich im Textbedienfeld irgendetwas ändern muss.

Muse - Absatzformat Überschrift2 angewendet

Muse – Absatzformat Überschrift2 angewendet

Selbiges mache ich auch noch mit meiner dritten Überschrift. Jetzt sind alle Überschriften korrekt für unsere Suchmaschinen und unsere blinden User aufbereitet.

 

Absatzformat ändern

Ich habe aber vorhin auch noch erwähnt, dass es einen weiteren Vorteil beim Einsatz von Absatzformaten gibt.

Dazu markiere ich wieder die Überschrift mit dem Text „Produkt 1“, also eine Überschrift 2 aus dem Absatzformat. Jetzt wird eine kleine Änderung am Text, wie zum Beispiel die Farbe vorgenommen.

Muse - Absatzformat Überschrift2 geändert

Muse – Absatzformat Überschrift2 geändert

Wenn wir uns jetzt wieder die Liste der Absatzformate ansehen, dann erkennen wir bei unserer „Überschrift 2“ ein Plus Symbol nach dem Namen. Dieses Symbol deutet darauf hin, dass am Absatzformat eine Änderung vorgenommen wurde und der formatierte Text nicht mehr dem Absatzformat entspricht.

Wir haben jetzt verschiedene Möglichkeiten damit umzugehen. Die Symbole befinden sich in der unteren Leiste, wo wir auch schon unser neues Absatzformat angelegt haben.

Von links nach rechts gesehen, kann man folgende Aktionen vornehmen:

– Formatabweichungen löschen

Wenn mir die Änderungen nicht gefallen und ich diese nicht weiter haben möchte, dann wähle ich dieses Symbol. Damit wird der Text wieder so dargestellt, wie im Absatzformat ursprünglich definiert.

– Formatabweichungen übernehmen

Gefallen mir die Änderungen und möchte ich mein Absatzformat damit verändern, dann ist dieses Symbol geeignet.

– Verknüpfung aufheben

Möchte ich zwar die Darstellung beibehalten, aber die Verknüpfung zu diesem Absatzformat lösen, dann nimmt man das dritte Symbol.

– Neu definieren

Sollen die Änderungen dafür verwendet werden, um ein neues Format zu definieren, dann ist das vierte Symbol geeignet.

– Absatzformat löschen

Schlussendlich, kann man das ausgewählte Absatzformat auch komplett löschen. Wenn man das macht wird man vorher noch gefragt, welches Absatzformat (inkl. ohne) man stattdessen anwenden will.

Für unseren Fall nehmen wir das zweite Symbol, mit dem wir die Änderungen übernehmen. Sobald wir darauf klicken, verschwindet das Plus Symbol.

Scrollen wir aber nun ein Stück nach unten, zu den anderen Überschriften, die ebenfalls dieses Absatzformat zugewiesen haben, dann erkennen wir, dass die Änderungen  auch dort übernommen wurden. Sprich alle Überschriften, die mit diesem Absatzformat verknüpft sind, haben das neue Aussehen.

Muse - Absatzformat Überschrift2 übernommen

Muse – Absatzformat Überschrift2 übernommen

Das betrifft übrigens nicht nur die aktuelle Seite, sondern das ganze Muse Projekt.

Wendet man die Absatzformate wirklich konsequent an, dann hat man nicht nur den Vorteil, dass die Seite damit besser für Suchmaschinen aufbereitet ist und Barrierefreiheit besser unterstützt. Man erspart sich im Erstellen und beim Ändern des Designs eine Menge Arbeit.

 

Zeichenformate

Wir haben bis jetzt immer einen ganzen Textblock formatiert. Man kann aber genauso gut auch einzelne Worte oder Zeichen innerhalb eines Textblocks formatieren.

Man kann entweder mit dem aktiven Auswahlwerkzeug einen Doppelklick auf eine Textbox machen oder das Textwerkzeug auswählen und dann innerhalb einer Textbox Teile des Textes markieren. Zur Kontrolle sollte übrigens links oben „Text: Kein Status“ stehen.

Muse - Text bearbeiten

Muse – Text bearbeiten

Der markiert Text lässt sich genauso wie auch die Textbox mit den Texteigenschaften oder dem Text Bedienfeld formatieren.

Möchte man allerdings für den markierten Text ein Absatzformat anlegen, dann wird man damit scheitern. Klar, denn ein Absatzformat ist für komplette Absätze gedacht und nicht für einzelne Zeichen. Doch es gibt eine Lösung dafür – die Zeichenformate.

Die Verwendung der Zeichenformate ist genau so, wie beim Absatzformat. Wenn der Text markiert ist, dann kann man mit dem entsprechenden Symbol ein neues Format anlegen und mit einem Doppelklick die Eigenschaften ändern.

Muse - Zeichenformat Eigenschaften

Muse – Zeichenformat Eigenschaften

Den Formatname kann man wieder frei vergeben. Dann gibt es die Bezeichnung Span-Tag. Damit verhält es sich ähnlich, wie bei den Absatzformaten, denn es handelt sich auch hier zum Teil um semantische Tags, sprich Tags die dem Text eine Bedeutung geben. Beispiele dafür sind für ein Zitat oder für Abkürzungen. Im Zweifelsfall nimmt man am besten den ersten Tag , der ist neutral.

Muse - Zeichenformat Liste

Muse – Zeichenformat Liste

Hat man ein Zeichenformat angelegt, dann kann man einen weiteren Text markieren und einfach auf das bestehende Zeichenformat klicken und schon wird der Text entsprechend dargestellt.

Wie auch beim Absatzformat, kann man Änderungen am Design vornehmen, in das Zeichenformat übernehmen und alle Textstellen, die dieses Format verwenden, werden im Design angepasst.

Wenn du schon einmal etwas über Formatierung von Inhalten mittels CSS gehört hast, dann ist das hier die technische Umsetzung mittels Muse. Sieht man sich den HTML Code an, den Muse erzeugt, dann findet man den Zeichenformat Namen als CSS Klasse beim <span> Tag.

Muse - CSS Klasse im HTML Code

Muse – CSS Klasse im HTML Code

Wie man so eine CSS Klasse in Muse verwenden kann um Dinge zu formatieren, die mit Muse selbst nicht möglich sind, habe ich übrigens in einem Blogartikel beschrieben – Der Adobe MUSE CSS Hack.

 

Zusammenfassung

Du hast in dieser Lektion gelernt, wie man Texte in Muse formatieren kann. Du weisst jetzt auch, worauf man bei Texten achten sollte, damit diese Suchmaschinen optimiert und barrierefrei sind.

Du hast die Absatzformate und die Zeichenformate kennengelernt um auf der einen Seite diese Optimierungen durchführen zu können und dir auf der anderen Seite eine Menge Arbeit beim Design der Website zu ersparen.

 

Wie geht es weiter

Wir werden und das nächste mal dem Thema Schriften im Web zuwenden.

Schreibe einen Kommentar

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