easyPage - Inhalte platzieren und kombinieren

Bei der Arbeit mit dem Webbuilder von easyPage 3.0 hat man es mit Layout-Boxen zu tun, die die eigentlichen Inhaltselemente wie Texte oder Bilder enthalten. Diese können teilweise mehrfach ineinander verschachtelt sein.

Jede Layout-Box kann unterschiedliche Eigenschaften haben (Hintergrund, Abstände nach innen und außen, Umrandung...). Der easyPage 3.0 Webbuilder lässt es zu, diese Eigenschaften punktgenau (pixelgenau) festzulegen. Bei einer solchen exakten Bearbeitung sollte man genau darauf achten, welche Box gerade aktiviert ist und bearbeitet wird.

Die Änderung von Eigenschaften einer Layout-Box kann man grafisch mit der Maus vornehmen, indem man die aktivierte Box an den Rändern zieht oder staucht. Hiermit werden Innen- und Außenabstände festgelegt. Kleine Quadrate an der unteren rechten Ecke einer Box ermöglichen es, die Box-Größe zu variieren.

Alternativ dazu kann man Änderungen auch durch das rechte Seitenmenü im Webbuilder vornehmen. Hier kann man z.B. die Abstände für die aktivierte Box ändern, die Minimal- oder Maximalgröße bestimmen und andere Festlegungen treffen.

Tutorial-Video:
Abstände und Ausrichtungseigenschaften von Layout-Elementen
Platzierung unter Kontrolle bringen

Dieses Video zeigt, wie wichtig es ist, die richtige Layout-Box auszuwählen, um die gewünschten Abstände zu erhalten. Das ist wichtig, wenn man zwei Textboxen bündig ausrichten möchte.

Dabei sollt man darauf achten, welche Layout-Box man gerade bearbeitet. Mit dem Menüpunkt "Elternelement finden" lässt sich die übergeordnete Layout-Box finden. Besonders auf komplexen Seiten ist dies nicht immer sofort ersichtlich.

Die Abstände lassen sich auf zweierlei Arten einstellen: Einmal mit der Maus, indem man mit der Maus eine Box groß- oder kleinzieht. Zum Anderen funktioniert das auch mit der Abstandsdarstellung in der rechten Werkzeugleiste. Hier kann man die Pixelzahl direkt eingeben.

Es werden Außen- und Innenabstände unterschieden. Auch Innenabstände lassen sich mit der Maus ziehen.

Zu beachten ist auch, dass Textelemente eigenen Ausrichtungseigenschaften haben (Mitte, links, rechts)

Wichtig ist zu wissen, dass der Webbuilder gegebenenfalls von sich aus eine Layout-Box einfügt. Dies passiert, wenn man z.B. auf eine leere Vorlage ein Textelement in den Inhaltsbereich zieht. Dann wird man im rechten Teilfenster "Seitenstruktur" sehen, dass ein zusätzliches Layout-Element platziert wurde, das den Text enthält.

Layout-Boxen können als "horizontal" oder "vertikal" definiert werden. Ein Umschaltung ist möglich, wenn man die Layout-Box zur Bearbeitung aktiviert. Das Kontextmenü enthält die entsprechenden Bearbeitungssymbole. In diesem Menü befinden sich auch die Symbole für die Ausrichtungseigenschaften (unten/oben/Mitte bzw. links/rechts/Mitte).

Tutorial-Video:
Noch eine weitere Layout-Box mit Bildinhalt

Die Verschachtelung von Layout-Boxen lässt sich sehr weit treiben. So können weitere Boxen in Layout-Boxen auch so platziert werden, dass diese über die Grenzen der äußeren Box hinausragen. Besonders mit der Eigenschaft schwimmende Box lassen sich besondere Effekte erzielen.

Dabei sollte man beachten, dass die Darstellungen auf unterschiedlich großen Bildschirmen eventuell zu unerwünschten Ergebnissen führt. Um das zu vermeiden lassen sich Elemente gezielt für bestimmte Bildschirmgrößen ausblenden.

Wozu eigentlich der Aufwand mit diesen Layout-Boxen? Schließlich ist man von Textverarbeitungssoftware auch gewohnt, Textboxen und Grafiken  nahezu beliebig auf einer Dokumentenseite platzieren zu können. Wieso sollte dies also nicht mit Webbuilder-Software möglich sein?

Webseiten-Dokumente bestehen im Grunde aus einer Beschreibung, welche Inhalte der Browser wie anzeigen soll. Dafür wird HTML verwenden, eine Auszeichnungssprache, die mit einer Stilbeschreibung kombiniert werden kann, den Cascading Style Sheets. Auf dieser Basis kann man Systeme - sogenannte Box- und Gridmodelle - aufbauen, die man für das Design einer Website verwendet. Das Floating-Box-Prinzip kommt bei easyPage 3.0 zum Tragen.

Solche Systeme sind essentiell für responsives Webdesign. Sie erlauben es, Layouts zu erstellen, die sich flexibel an verschiedene Bildschirmgrößen und -auflösungen anpassen. Mit einem solchen flexiblen Gerüst ist sichergestellt, dass die Website auf jedem Gerät gut aussieht und funktioniert.

Es nimmt die Vermutungsarbeit aus der Platzierung von Elementen und macht es einfacher, ein harmonisches, ausgewogenes Layout zu erstellen. Normalerweise benötigt man dafür jede Menge Code und Frameworks.

easyPage 3.0 nimmt dem User und der Userin die Arbeit ab, diese Anweisungen umständlich formulieren zu müssen. easyPage 3.0 ermöglicht es, diese Eingaben mit einer grafischen Benutzeroberfläche zu realisieren, so dass Codieren überflüssig wird.

Tutorial:
Wie man sich das Layout-Boxen-System einer easyPage-Website vorstellen muss

Dieses kurze Tutorial veranschaulicht die Wirkungsweise des Layout-Modells, das easyPage 3.0 verwendet wird.

Wenn man eine Webseite erstellt, hat man es nicht mit einer Fläche wie einem Blatt Papier zu tun. Vielmehr erhält der Webbrowser mit der HTML-Datei, die der Server schickt, eine Reihe von Darstellungsanweisungen kombiniert mit den eigentlichen Inhalten. Der Browser setzt die Inhalte entsprechend den Darstellungvorschriften in eine Anzeige um.

Da es verschiedene Bildschirmgrößen gibt, kann man nicht einfach wie in einem Koordinatensystem einen Kombination aus zwei Größen angeben wie etwa x= 200 und y=500, um an dieser Stelle einen schwarzen Punkt zu setzen. Vielmehr müssen die Stellen relativ angegeben werden, also in Bezug zur bekannten Position eines vorherigen Elements.

Da man mit einem Webbuilder wie easyPage 3.0 grafisch arbeiten will und mit der Maus die Inhalte platzieren möchte, muss der Webbuilder aus den Bildschirmaktionen die Position in HTML und CSS umsetzen und zudem dafür sorgen, dass die Webseite auf verschiedenen Bildschirmgrößen so optimal wie möglich dargestellt werden kann.

Zu Demonstrationszwecken nehmen wir einen AI-generierten HTML/CSS-Codeabschnitt, der ein einfaches Raster entwirft. In jede der enstandenen Felder kann man dann an passender oder gewünschter Stelle Inhalte einfügen.

Wenn man ohne so ein Raster arbeiten würde, würden die Inhalte einfach aneinander geschrieben. Mit Hilfe des Raster kann man sie positionieren.

Systeme, die man in der Praxis verwendet, haben viel mehr Unterteilungen oder arbeiten mit genauen relativen Bezügen , so dass man sehr flexibel ist. Ohne CSS wird dies aber nicht funktionieren.

Mehr Know How zu easyPage 3.0

Überblick
Allgemeine Tipps | easyPage 3.0 starten | Der Webbuilder und seine Funktionen
Videos:
„Willkommen“ |„Mit dem Webbuilder umgehen“

Layouts
Die Idee hinter den Layout-Boxen in easyPage | Inhaltselemente auf einer Webseite platzieren und ausrichten
Videos:
„Header und Footer in eine leere Vorlage einfügen und Layout-Boxen platzieren“ | Video „Layout-Boxen für Text platzieren und anpassen“

Inhaltselemente platzieren
Texte, Bilder und andere Objekte an die richtige Stelle setzen
Videos: 
„Kontrolle über Layout-Elemente“ | „Noch eine weitere Layout-Box mit Bildinhalt“ | „Wie man sich das Layout-Boxen-System einer easyPage-Website vorstellen muss“

Text
Texte ändern | Textstile verwenden | Stile global ändern
Videos:
„Neue Textelemente platzieren“ |  „Mit dem Texttool arbeiten“ | „Textstile einer Vorlage ändern“ | „Stile für Layout und Texte“

Weitere Inhaltselemente in easyPage
Umgang mit vorgefertigten und zusammengestellten Objekten
Video:
„Button einfügen, Formen einfügen und ausrichten“ 

Seitenmanagement
Neue Seiten hinzufügen | Navigationsmenü erstellen und ändern | Mehrsprachigkeit
Videos:
„Seiten und Menüelemente hinzufügen“ | Video „Mehrsprachige Websites herstellen“ | Video „Mehrsprachiges Menü für Websites“

Vorlagen
Die Idee hinter der Vorlagensammlung | Kategorien
Video:
„Vorlage finden und anpassen“

FAQ
Häufige Fragen zu easyPage 3.0 und Antworten dazu.