Zum Inhalt springen

Seitenlayout

Ein Überblick über den grundlegenden Aufbau von responsiven Webseiten mit den Elementen des Mercury Templates.

Die mit dem Mercury Template erzeugten Seiten bestehen aus verschiedenen Ebenen von Template-Elementen, in denen die eigentlichen Inhaltselemente angezeigt werden.

Die Elemente der Seite werden in einem Seiten-Gitter dargestellt, welches durch die verwendeten Template-Elemente festgelegt wird.

Die Darstellung des Mercury Templates ist responsiv. Dies bedeutet, dass die Elemente einer Seite auf verschiedenen Bildschirmgrößen unterschiedlich ausgegeben werden.

Das Layout-System des Mercury-Templates basiert auf dem HTML-Framework Boostrap 4.

Die Mercury Layout-Container

Der grundlegende Aufbau einer Seite erfolgt durch das ablegen verschiedener Template-Elemente, welche mit Drag & Drop auf die Seite gezogen werden.

Eine vollkommen leere Seite enthält zunächst nur den rot gefärbten Basis-Container.

In diesen Basis-Container können Layout-Bereiche mit Drag & Drop abgelegt werden.

Ein Layout-Bereich erzeugt einen oder mehrere orange gefärbte Container, in denen Layout-Zeilen abgelegt werden können.

Layout-Zeilen erzeugen blau gefärbte Container, in denen Inhaltselemente abgelegt werden können.

Die Inhaltselemente stellen schließlich den eigentlichen Inhalt der Seite dar, so z.B. durch Inhalts-Abschnitte, Listen, Medien usw. 

Grundsätzlich können in jeden Container beliebig viele dafür passende Elemente eingefügt werden. So können z.B. ein einen Layout-Bereich mehrere Layout-Zeilen untereinander eingefügt werden, um ein komplexes Seitenlayout zu erzeugen.

Eine Sonderstellung haben Layout-Gruppen. Diese erzeugen vorgegebene Layouts für spezielle Anwendungsbereiche, so z.B. für den Kopf- oder Fußbereich einer Seite. In welchem Container eine Layout-Gruppe eingesetzt werden kann ist abhängig von der Gruppe selber. So können z.B. die Gruppen für Kopf- oder Fußbereiche wie Layout-Bereiche direkt in den Basis-Container abgelegt werden.

Das Boostrap 4 Gitter

Das 'Gitter' für Seitenspalten besteht aus einer Kombination von bis zu 12 möglichen Spalten (Englisch "Columns" bzw. "Col") pro Zeile.

Bei der Darstellung einer Layout-Zeile werden diese 12 möglichen Spalten auf verschiedene Weise zu den tatsächlich sichtbaren Spalten zusammen gefasst. Die Zahlen in der Klammer im Namen einer Layout-Zeile geben dabei an, wie viele der möglichen Spalten des Gitters zu einer sichtbaren Spalte zusammen gefasst werden:

  • Die Layout-Zeile, Row 1 Spalte (12 - voll) nimmt die ganze verfügbare Breite ein, verwendet also alle 12 möglichen Spalten.
  • Layout-Zeilen, welche 2 gleichgroße Spalten erzeugen, tragen die Bezeichnung Row 2 Spalten (6-6)
  • Layout-Zeilen mit 2 unterschiedlich großen Spalten sind z.B. Row 2 Spalten (9-3) oder Row  2 Spalten (8-4) etc. 
  • Weiterhin gibt es noch die Row 3 Spalten (4-4-4), die Row 4 Spalten (3-3-3-3) sowie die Row 6 Spalten (2-2-2-2-2-2).
Gerätegrößen von Bootstrap 4

Es wird zwischen 6 möglichen Bildschirmgrößen unterschieden:

  • XS: 552 Pixel oder kleiner - "normale" Smartphones
  • SM: 553 bis 763 Pixel - übergroße Smartphones oder kleine Tablets
  • MD: 764 bis 1013 Pixel - Tablets, z.B. iPad
  • LG: 1014 bis 1199 Pixel - Kleinere Desktop-Bildschirme oder große Tablets
  • XL: 1200 Pixel oder größer - Desktop Bildschirme
  • XXL: 1400 Pixel oder größer - Große Desktop Bildschirme

Bitte beachten Sie, dass die Bezeichnungen wie "Desktop", "Tablet" oder "Smartphone" nur zur Orientierung dienen und die Template-Darstellung nicht wirklich von den Geräten, sondern alleine von der verfügbaren Bildschirmbreite abhängig ist. Für Desktop-Geräte bedeutet dies, die Darstellung verändert sich wenn das Browser-Fenster größer oder kleiner gezogen wird. Für mobile Geräte ändert sich die Bildschirmbreite wenn man das Gerät im quer- oder hochformat hält.

Abhängig von der Bildschirmgröße werden verschiedene Seitenelemente unterschiedlich angeordnet. Bei Layout-Zeilen wird in der Regel im Namen angegeben, ab wann die Elemente der Zeile vollständig nebeneinander dargestellt werden. Einige Beispiele:

  • Die Row 2 Spalten (6-6) [Alle Bildschirmngrößen] stellt in allen Bildschirmgrößen 2 Elemente nebeneinander da, also auch auf "kleinen" Smartphones.
  • Die Row 2 Spalten (6-6) [Ab Bildschirmgröße LG] stellt für die Bildschirmgrößen XS, SM und MD die Elemente übereinander dar. Erst ab Bildschirmgröße LG werden die Elemente nebenainander dargestellt.