Steuerung der Bildanzeige

Diskrete Anzeige

Nachdem wir dem Inhalt weitere Bilder zugewiesen haben sehen wir uns das Dokument im Frontend an und sehen, dass alle Bilder im Bildcontainer des Inhalts angezeigt werden. Das bezeichnet das Handbuch als 'diskrete' Einbindung der Bilder.

Bildanzeige im FrontendAbb.01-0043

Wir haben in den 'Bildattributen' zwar den Umlaufposition auf 'inline' geändert, aber die Breiten der Bilder sind so groß, dass die Bilder in mehrere Zeilen umbrochen werden. Das ändern wir mit Hilfe von Css Regelungen des generischen Css. Die Einstellung nehmen wir im Css Editor vor.

Damit regeln wir die Darstellung der Bilder nicht einzeln sondern per Css Klasse. Das bedeutet, das wir dort mit weniger Einstellungen alle Bilder des Bildcontainers formatieren können. (Abb.01-0044).

Css EinstellungenAbb.01-0044

Mit dem Css Editor stellen wir die Höhe der Bilder auf 100 und, obwohl unnötig, zusätzlich nochmal die Anzeige der Bilder auf 'Nebeneinander' ('inline') ein. Wir speichern den Editor und laden das Dokument mit einem Reload des Browser neu.

Das Ergebnis zeigt nachfolgende Abbildung (Abb.01-0045):

Bildanzeige im FrontendAbb.01-0045

Alle Bilder erscheinen nun in einer Zeile unter den Titel des Inhalts. Wird dort ein Slider oder Randomizer eingesetzt, dann lassen sich die Bilder in dem Rahmen verschieben oder zufallsgesteuert austauschen.

Wird eines der Bilder angeklickt, dann wird die Vergrößerung angezeigt (Abb.01-0046):

Alternatives Bild im FrontendAbb.01-0046

Eingebettete Anzeige

Im vorhergehenden Abschnitt haben wir die diskrete Anzeige von Bildern des Content kennengelernt. Die dort beschriebene Verfahrensweise stellt die Grundversion der Anzeige von Bildern dar.

Die gezeigte Methode ist ideal für die Auflistung von Produktabbildungen, in denen ein Objekt in verschiedenen Ansichten gezeigt wird. Auch für die Präsentation von Immobilien ist diese Art der Anzeige gut geeignet.

Die Ausdrucksmöglichkeiten von Bildern erweitern sich jedoch deutlich, wenn die Bilder innerhalb des Textblocks angezeigt werden.

Um das einzustellen wechseln wir in das Backend des Contentmanager. Dafür gehen wir dieses Mal einen einfacheren Weg indem wir im Frontend auf das dem Editor Icon des Inhalts klicken und so den Frontend Editor öffnen.

Das Icon befindet sich in dem Dokument in der oberen linken Ecke des Inhalts (Abb.01-0047).

Wechseln ins BackendAbb.01-0047

In dem Dialog des Editors betätigen wir die Befehlsschaltfläche 'Backend' und gelangen so in den Content Editor des Contentmanagers. Wenn dort die Befehlsschaltfläche 'Frontend' betätigt wird wechselt die Software wieder zurück in das Dokument des Frontends.

Im Contenteditor des Backend begeben wir uns zuerst auf das Registerblatt 'Ansicht' und schalten dort mit der Option 'Bilder im Textblock' eine Umleitung der Bildanzeige ein (Abb.01-0048).

SteuerelementeAbb.01-0048

Ist das Formular gespeichert, bindet der Contentparser die Bilder des Inhalts in die Produktion des Textkörpers ein. Der Bilderblock des Inhalts wird danach nicht mehr bedient.

Die Steuerung der Einbindung erfolgt durch Ersetzungsmarken, die wir jetzt einfügen werden.

Das geschieht auf dem Registerblatt 'Text' des Content Editors. Also dort wo auch der Text eingegeben wird.

Dort setzen wir den Mauszeiger an die Stelle des Textes, wo das gewünschte Bild erscheinen soll. Anschließend wählen wir auf dem Registerblatt 'Bilder' das entsprechende Bild aus und betätigen dort die Textschalfläche 'Bild Einfügen'.

Die Insertionen der Ersetzungsmarken finden an der Stelle statt an der sich der Cursor befindet.

Brottext zu Textkörper

Sicher ist dem Einen oder der Anderen, in anderen Abbildungen und im Fuß des Registerblatts, bereits die Reihe von Textschaltflächen aufgefallen. Diese Schaltflächen steuern die Formatierung des Brottextes, der im Textkörper angezeigt wird (Abb.01-0049).

Textschaltflächen für TextformatierungAbb.01-0049

Die Software verzichtet aus Gründen der Sicherheit und Transparenz auf einen externen Javaskript Editor und formatiert den Brottext durch Strukturelemente, die von einem lokalen Skript in den Text eingefügt werden.

Die, von dem Editor verwendeten Elemente sind mit Css Klassen ausgezeichnet, deren Eigenschaften mit dem generischen Css ausgesteuert, und zusätzlich manuell mit Klassennamen des abstrakten Css erweitert, werden können.

Die Insertionen der Strukturelemente finden an der Stelle statt an der sich der Cursor befindet.

Ist ein Text selektiert, dann werden sie vor und nach einem selektierten Textabschnitt eingesetzt. Damit umrahmen sie den ausgewählten Text.

Letzteres findet Anwendung, wenn beispielsweise ein Textabschnitt komplett von einem Absatz umschlossen werden soll.

So auch bei Listenpunkten oder Tabellenzeilen. Allerdings ist die Funktion für Listen umfangreicher.

Für Listen erkennt das Programm mehrere Zeilen als Listenzeilen und wandelt alle ausgewählten Zeilen in eine HTML Liste um.

Wie Tabellen im Textkörper aufgebaut werden ist in dem Abschnitt 'Einrichten der Startseite' beschrieben.

Die Funktionen der Schaltflächen werden hier nicht einzeln erläutert, da sie mit berührungssensitiven Informationstexten ausgestattet sind.

Abbildung 01-0050 zeigt die Auswahl eines Textes, der als Textkörper ausgezeichnet werden soll. Dazu selektieren wir den gesamten Text und betätigen die Textschaltfläche 'BX'. Die mit Rot umrandeten Kästen zeigen das Ergebnis nach der Aktion. Der Textkörper wird durch einen HTML Absatz ('paragraph') markiert.

Auszeichnung des TextkörpersAbb.01-0050

Innerhalb des Inhaltskörpers (Nicht des Textkörpers) können Absätze, Listen und Tabellen auftreten.

Im Textkörper selbst befinden sich ausschließlich inline oder Elemente die per Css als 'inline' Elemente geregelt sind.

Möchten Sie dass einzelne bestimmte Block Elemente innerhalb des Textkörpers als Inline-Elemente geregelt werden, dann können Sie in der Css Klassendeklaration der betreffenden, eingefügten Elemente die Namen der abstrakten Klassen mit den Namen 'inline' oder 'inline block' erweitern.

Bei Änderungen des Klassenattributs der Elemente muss bedacht werden, dass es sich um manuelle Einträge handelt, die von nachträglich ausgeführten maschinellen Änderungen der Css Auszeichnungen nicht berücksichtigt werden und erneut manuell eingetragen werden müssen.

Außerdem werden diese Regelungen von dem generischen Css überlagert. Das bedeutet, dass diese Regelungen nur dann beachtet werden, wenn, das mit dem Css Editor definierte, generische Css gleichnamige Eigenschaften auslässt.

Bilder in Textkörper einfügen und formatieren

Um Bilder in den Inhaltskörper einzubinden stellen wir den Mauszeiger an die gewünschte Stelle des Textes, selektieren jeweils ein Bild und betätigen die Textschaltfläche 'Bild einfügen' um dort die gewünschte Bildmarke einzufügen (Abb.01-0051).

BildattributeAbb.01-0051

Wie Sie erkennen können, ist die Ersetzungsmarke für das Bild keine HTML Marke. Der numerische Wert bezeichnet die Registernummer des Bildes.

Im Frontend sehen wir uns das Ergebnis an (Abb.01-0052):

Ansicht des LayoutAbb.01-0052

Da wir alle Bilder durch Leerzeichen in separate Zeilen eingestellt haben erscheinen sie nun in einer Spalte untereinander abwechselnd mit Text an den Stellen wo die Marken eingefügt wurden.

Von einer Dramaturgie des Artikels kann hier noch keine Rede sein. Wir werden das später ändern.

Einstellungen der Bildattribute

Das Hilfsformular zur Einstellung der Bildattribute haben wir bereits kennengelernt. Jetzt werden hier einige allgemeine Erläuterungen fällig.

Die Option 'Anzeige' steuert die 'display' Eigenschaft. Sie kann auf 'Untereinander', 'Nebeneinander' und 'Blöcke Nebeneinander' eingestellt werden, was den Werten 'block', 'inline', 'inline-block' entspricht.

Mit 'Umlaufposition' wird die Eigenschaft 'float' gesteuert. Ist der Wert von Float auf 'rechts' oder 'links' eingestellt, so suspendiert das den 'inline' Wert der Option Anzeige. Es werden alle 'inline' Elemente wie 'block' Elemente behandelt.

Die Angabe der Größen wird als 'style' Attribut des Bildelements verwendet, was bedeutet, dass es auch von dem generischen Css nicht mehr überschrieben werden kann. Die Größen werden als maximaler Wert und in Pixel definiert.

Die Reihenfolge der Bilder hat nur Auswirkungen, wenn die Bilder diskret im Bildcontainer angezeigt werden und steuert die Reihenfolge ihrer Anzeige.

Der Ausfalltext kann 256 Zeichen lang sein und wird für als Kontext ('Tipptopp') oder Alternativtext des Bildes angezeigt.

Wird 'Neue Zeile' eingeschaltet, dann generiert der Contentparser vor dem Bild ein 'CLR' (float:clear both) Element. Die Einstellung ist für die Komposition von Bildanordnungen sinnvoll und hat nur Auswirkung auf Bilder, die im Bildcontainer diskret vom Textkörper eingebunden werden.

Sollten Sie im Text des Contenteditors ein CLR Element benötigen, dann setzen Sie im Content Editor den Cursor an die Stelle des Textes an der Sie das Element benötigen und betätigen Sie dort die Textschaltfläche 'CLR'. An der Stelle des Cursors wird dann ein entsprechend ausgezeichneter Absatz eingefügt.

Den Einsatz des Vergrößerungsbildes haben wir bereits kennengelernt und alle weiteren Einstellung erklären sich selbst. Nachfolgend noch einmal eine Abbildung des Hilfsformulars (Abb.01-0053):

Bildattribute einstellenAbb.01-0053

Sie werden vermutlich einige Experimente benötigen, bis Sie die von Ihnen gewünschten Einstellungen gefunden haben.

Das von uns eingestellte Ergebnis finden Sie in Abb.01-0055.

Css Float Eigenschaft

Ein gesondertes Wort zu der Css 'Float' Eigenschaft. Zu deutsch: 'Schwimmer', Floß', 'treiben',…, was bereits Vieles erklärt. Float 'links' ist gleich 'links treiben'.

Die Software bezeichnet die Option mit 'Umlaufposition', was irritierend übersetzt ist, aber, meiner Meinung nach, den Zweck der Funktion am besten bezeichnet: Das Objekt wird auf der gegenteiligen Seite umlaufen.

Es handelt sich um eine der gestalterisch undurchsichtigsten Eigenschaften von Css und ist exemplarisch für maschinelle Logik.

Die Regelung veranlasst, dass Blöcke, die normalerweise 100% der verfügbaren Breite einnehmen auf die Breite ihrer inneren Elemente reduziert werden und, wenn genügend Platz vorhanden ist, links- beziehungsweise rechtsseitig der nachfolgenden Elements dargestellt werden.

Die Eigenschaft betrifft somit nicht das Element, das damit ausgezeichnet wurde, sondern alle Geschwister des Elements.

Wird für ein Element die Umlaufposition nach links eingestellt und für den Vorgänger ebenfalls auf links gestellt, dann erscheint das Element unter Umständen dennoch rechts von seinem Vorgänger.

Ist die Umlaufposition für das Element jedoch auf rechts eingestellt, dann erscheint der Nachfolger vor dem Element. Das muss allerdings nicht zwangsläufig Links vor dem Element sein, sondern einfach nur: Vor dem Element.

Man würde annehmen dass das Links neben dem Element ist. Aber befindet sich rechts des Vorgängers des Elements noch Platz in der Spalte, dann wird der Nachfolger dort eingefügt und erscheint vor dem Element.

Die folgende Abbildung illustriert das Verhalten.

Aus einer Reihe von Blöcken (Bild-Bild-Text) 1-2-3 wird optisch 1-3 2. Wie in Abbildung 01-0054 zu sehen ist:

Umfluss der BilderAbb.01-0054

Ich möchte auf die technische Zwangsläufigkeit dieser Eigenschaft nicht weiter eingehen. Jedenfalls wird die Interpretation von Links, Rechts, Vorgängern und Nachfolgern für ungeübte Anwender schnell undurchsichtig.

In solchen Fällen hilft das 'CLR' Element. Das sogenannte 'Clearfix' suspendiert vorhergehend eingestellten Umlauf durch ein eingefügtes Block Element und erzwingt dadurch meistens eine Art Zeilenumbruch. Für das gezeigte Beispiel in Abb.01-0054 würde das bedeuten: Wird nach Element 2 ein sogenanntes 'clearfix' ('CLR') Element eingefügt ist das Problem vorläufig gelöst.

Vertikale und horizontale Ausrichtung von HTML Elementen

Zusätzlich zu der Umlaufposition, sollen auch die vertikale und horizontale Ausrichtung innerer HTML Elemente kurz erläutert werden.

Beide Css Eigenschaften sind dazu gedacht, in Containern liegenden Text vertikal oder horizontal auszurichten. Vorgesehen ist die Regelung von Text über die Eigenschaft dessen elterlichen Containers.

Beide Eigenschaften regeln keineswegs nur Text, sondern inline Elemente allgemein.

Zum Verständnis der beiden Eigenschaften kann aktuell Folgendes erklärt werden:

Textausrichtung

'text-align' regelt 'inline' Elemente, die im inneren desjenigen Containers liegen, dem die Eigenschaften zugewiesen wurden.

Handelt es sich bei dem Textcontainer um einen Block, dann erfolgt die zentrierte Ausrichtung des Blocks mit der Eigenschaft 'margin'. Für die Berechnung der Seitenabstände von inneren Elementen mit 'margin' benötigt der Browser für den äußeren Container feste Größenangaben.

Vertikale Ausrichtung


'vertical-align' regelt Elemente innerhalb eines 'inline' Elements.

Nur für Tabellenzellen funktioniert 'vertical-align' so, wie es erwartet wird. Deshalb sind HTML Tabellen für die sichere Konstruktion des Dokuments leider immer noch unentbehrlich.

Für Tabellenzellen regelt die Eigenschaft den Inhalt der Zelle und für 'inline' Elemente wird das jeweilige Element vertikal an der Position seines Vorgängers ausgerichtet.

Standardwert von 'vertical-align' ist 'baseline'. Wenn das nicht geändert wird, dann erscheinen die Schalter und Untermenüs horizontaler Menüs unter Umständen am unteren Rand der Menübox.

Bilder

Für Bilder und Icons, die nicht als Hintergrundbild eines Containers eingesetzt werden, wie es beispielsweise bei 'sprites' der Fall ist wird, tritt ein Sockelabstand auf, der die vertikal mittige Ausrichtung der Bilder zu nachfolgenden Elementen verhindert.

Dieses 'Phänomen' rührt daher, dass das HTML Bildelement ein Inline Element ist und den Zeilendurchschuss von Text berücksichtigt. Das bedeutet, dass das Element von der Zeilenhöhe beeinflusst wird.

Wenn Bilder keinen zusätzlichen Abstand einem umgebenden Container haben sollen, dann muss für sie eine Zeilenhöhe von Null zugewiesen werden.

Einstellung des generischen Css

Mit den Einstellungen der Bildattribute haben wir für die einzelnen Bilder individuelle Css Regelungen eingestellt, die im Dokument nachfolgendes Bild zeigen (Abb.01-0055):

Bildumfluss in Ansicht des FrontendAbb.01-0055

Nun werden wir im Frontend mit dem Css Editor noch einige globale Einstellungen vornehmen:

Css EinstellungenAbb.01-0056

Um der Seite einen stärker 'privaten' Ausdruck zu verleihen, werden wir die Bilder umrahmen und ihnen den Charakter von Fotoabzügen verleihen (Abb.01-0056).

Zusätzlich setzen wir den oberen Außenabstand der Bilder auf Null, damit die Bilder mir dem jeweiligen Absatz oben bündig sein können.

Damit haben wir die erste eigene Seite unseres Internetschauplatzes eingerichtet (Abb.01-0057) und haben auf dem Weg dahin viele grundlegende Verfahren, Schnittstellen und Befehle kennengelernt.

Ansicht im FrontendAbb.01-0057

Um unser erstes Anwendungsbeispiel abschließen zu können müssen wir jetzt noch die Startseite anpassen. Bevor wir das tun sollten Sie einen Einblick in die, von dem Contentparser produzierte HTML Struktur und in die Beziehungen zwischen dem Css und Content nehmen.

Dazu finden Sie Erläuterungen in dem Abschnitt 'Das Produkt des Contentparsers'.