Worldsoft Containersystem - Struktur

In dieser Anleitung erklären wir Ihnen die Struktur und den Aufbau des neuen Worldsoft Containersystems, erläutern die Funktionalität und verschaffen Ihnen damit einen Überblick.

Bootstrap 3 Grid System

Das bisherige Containersystem des Worldsoft-CMS wird durch ein flexibleres und frei editierbares ersetzt. Das neue System ist  100% responsiv (sodass alle Voraussetzungen für ein für mobile Endgeräte optimiertes Design gegeben sind) und basiert auf der "Bootstrap 3"-Technologie.
Das System erlaubt Ihnen:

- die Container-Anzahl (Maximal 12 in einer Reihe),
- die Container-Breite sowie
- die Container Anordnung

frei zu definieren. Somit sind Sie optimal flexibel in der Gestaltung und Anpassung Ihrer Webseiten-Projekte.




 

Bisheriges Containersystem:

Neues Containersystem:

Website-Ansicht

Schauen wir uns doch zunächst einmal den Grundaufbau
einer Website in der Ansicht an.  

In der Bildansicht sind deutlich die einzelnen Bereiche 
markiert (wie das Bootstrap3 Gridsysytem angeordnet ist).

Hier gibt es verschiedene Sektionen:

CONTAINER:

Der Container definiert den gesamten Platz auf einer
Website, in welchem Inhalte hinterlegt werden können.

ROW:

Eine Row ist von oben nach unten gegliedert. Diese kann
sowohl in der Höhe als auch in der Breite definiert werden.
In einer Row werden die jeweiligen Inhaltscontainer angelegt
und an der gesetzten Position dargestellt. 

INHALTSCONTAINER (CONTENT):

In den Inhaltscontainern werden,wie der Name verrät,
Inhalte definiert. Dies können Logos, Bilddateien, Slider, Texte u.a.
Inhaltselemente sein. Es können in einer ROW bis zu 12 Inhalts-
Container angelegt werden. In diesen Inhaltscontainern werden die
jeweiligen Blöcke eingesetzt, in welchen die Texte, Bilder, Gadgets
usw. hinterlegt sind.

ÜBERCONTAINER:

Zu den einzelnen"ROWS" können noch zusätzliche
"ÜBERCONTAINER" gesetzt werden, welche jedoch nicht mit
Blockinhalten gefüllt werden können. In den ÜBERCONTAINERN
können lediglich CSS Werte vergeben werden, wie z.B. Position,
Hintergrund, Breite, Höhe, Rahmen usw. 
Diese "ÜBERCONTAINER"  dienen dazu z.B. zentrierte Inhalte mit
abweichenden Hintergrundfarben anzupassen und zu verlängern.
Es ist jedoch auch möglich Hintergrundbilder festzulegen, um die
einzelnen ROWS unterschiedlich und individuell darstellen zu lassen. 




 

Container-Struktur

Wie in dem oben gezeigten Beispiel gibt es auch eine 
Containerstruktur, welche sich hier "logisch" aufbaut.

Hier sehen Sie die einzelnen Rows, Container und
Blöcke in der Übersicht angezeigt. 

Einzig die angelegten Übercontainer werden in dieser
darstellung "nicht" Angezeigt - da diese nicht mit Inhalts-
blöcken zu füllen sind. 

Vergleichen Sie den Aufbau der Struktur mit der Website-
Ansicht (oben), erkennen Sie den Aufbau
der Darstellung. 

Jeder Aufbau ist logisch in der Vorgehensweise:

- Erstellen Sie eine ROW
- Erstellen Sie einen oder mehrere Container in der ROW
- Legen Sie die Containerabmessungen fest (Drag)
- Erstellen Sie Blöcke und füllen diese mit Inhalten
- Legen Sie die Blöcke in den Containern ab 


 

Positionierung

Nach Einführung des neuen Gridsystems taucht vermehrt die
Frage auf:

"Wie positioniere ich meinen Inhalt denn eigentlich auf der Website? "

Hier wird vermutlich mehr interpretiert als nötig ist, da viele
Webmaster nicht gewohnt sind dass eine Containerstruktur diese
Arbeiten fast automatisiert übernimmt.

Hier stellt Bootstrap3 automatisiert die Berechnungen an. 

Beispiel:

Nehmen wir an Sie haben einen Hauptcontainer mit einer Breite
von 100%.

Sie legen in der Row1  vier Container an und wollen diese mit
Inhalten füllen.

Bootstrap3 rechnet den verfügbaren Platz von 100% durch 4, kalkuliert
eventuelle Innen- oder Aussenabstände dazu und verteilt diese Container
mit den Inhalten auf der verfügbaren Fläche.


Wir haben dies in den nächsten Ausschnitten verdeutlicht, um anhand
der von den Worldsoft AG ausgelieferten Templates aufzuzeigen, welche
Werte "effektiv" vergeben wurden. 




 

Blöcke

Entgegen der Annahme dass man zusätzlich Werte
zur Positionierung der Blöcke, in den Blöcken vergeben muss - wie es im bisherigen Containersystem üblich war - ist es nun so 
dass hier keine Werte hinterlegt werden müssen, um den
jeweiligen Inhalt "zentriert" ausgerichtet auf der Website
darstellen zu lassen. 
Hier legt der jeweilige "CONTAINER" die Breite oder Höhe
für den Inhalt fest und die "ROW" die Breite und Höhe für die 
"CONTAINER".

Nachfolgend sind die ersten 6 Blöcke

- Logo
- Menu
- Slider
- Text 1 - 3

in der detaillierten CSS-Ansicht dargestellt:


 

LOGO BLOCK

Hier wurde lediglich ein Aussenrand in Prozent definiert.

Höhe und Breite bleiben leer da diese durch den im Block hinterlegten
Inhalt selbst definiert sind. 

 

MENU BLOCK

Hier wurden keine Werte vergeben.

Die Werte werden im MegaMenü-Modul vergeben.

Dort können Breite, Höhe und weitere CSS-Werte
für das Menü vergeben werden.



 

SLIDER BLOCK

Hier wurden keine Werte vergeben.

Die Werte werden im Revolution Slider direkt vergeben.

Dort können Breite, Höhe und weitere CSS-Werte
für den Slider vergeben werden.














 

TEXT 1 - 3 BLOCK

Hier wurde lediglich im Aussenrand ein Wert von
5px vergeben, welcher den Abstand zu den jeweiligen
Blöcken links und rechts definiert.

Eine Breite oder Höhe sind hier nicht festgelegt worden.
Diese Werte werden dynamisch generiert.

Diese Einstellung ist in allen 3 Textblöcken identisch.












 

Anzeige in der Webansicht

Hier können Sie klar erkennen dass - obwohl keine Werte
in den Blöcken selbst vergeben wurden - diese dennoch
ausgerichtet dargestellt werden. 

Dies ist den vergebenen Werte in den jeweiligen
ROWS und/oder CONTAINERN, welche mit Bootstrap 3 generiert
wurden, zu verdanken. 













 

CONTAINER-STRUKTUR

Hier ist die Struktur der Container in den verschiedenen 
Reihen (ROWS) zu sehen. 
In der Strukturierung sind Sie ab sofort frei - das bedeutet:

Sie haben selbst in der Hand wie Ihre  Website
strukturiert werden soll. 

Der Aufbau hier ist immer logisch. 

Als erstes wird ein Container in einer ROW (Reihe) erstellt. 
Sie können bis zu 12 Container in eine ROW (Reihe) nebeneinander setzen.

Hier legen Sie ebenfalls fest, welche Breite der jeweilige Container
haben soll, in dem der Inhalt später platziert wird.

Ausschlaggebend für die spätere Positionierung, und den zur 
Verfügung stehenden Platz innerhalb einer ROW, 
ist die Containerbreite - welche Sie hier einstellen können.

Sie können z.B. den Container, in dem das Menü abgelegt wird,
breiter gestalten als den Container, in dem das Logo hinterlegt wird.

Mit der Row-Breite geben Sie dem Ganzen anschliessend die 
Maximal-Breite.





 

CSS

LOGO CONTAINER CSS 

Wie Sie erkennen können wurden auch hier CSS-seitig keine Werte vergeben. Weder Höhe, noch Breite, noch Aussenrand oder Positionierung. 

Lediglich im Block selbst gibt es Werte zum "Aussenrand des Inhalts" in
Prozent. 

Hier spielt die Containerbreite - welche Sie vorab bereits festgelegt
haben - eine Rolle, welcher Platz dem Container in der ROW zur Verfügung
steht.















 

MENUE CONTAINER CSS

In dem Container zum Menü wurden ebenfalls keine Werte
hinterlegt. 

Hier spielt die Containerbreite - welche Sie festgelegt haben - eine
Rolle,  welcher Platz in der ROW zur Verfügung steht.

SLIDER CONTAINER CSS

Auch hier wurden ebenfalls keine Werte gesetzt, da
die Breite des Containers in den Voreinstellungen vergeben
wurde. Der Container "Slider"  ist hier der einzige Container,
welcher in der Row 2 auf der gesamten Breite angelegt wurde.
Da unser Hauptcontainer ja 100% Breite hat, wird dem Slider die
Breite von 100% ebenfalls ermöglicht. 

100% bedeuten in diesem Fall dass der Slider von ganz links nach
ganz rechts positioniert ist, und somit den Raum ausfüllt.













 

TEXT BLOCK 1 - 3 CONTAINER CSS

Auch hier wurden keine Ausrichtungswerte im CSS der Container Text 1 - 3 vergeben. 

Hier hat es alleinig in den Blöcken einen definierten Innenrand in Pixeln.

Die editierten Container geben die Breite vor.


















 

Wie kann das sein?

Wir haben hier dem Hauptcontainer (der Container der
dem gesamten Inhalt aus den ROWS, aus den CONTAINERN und
den BLÖCKEN Platz bietet) gesagt: 

DU BIST 100% BREIT - und das generell.

Das bedeutet, das der Platz auf der Website generell 100% beträgt
und, wenn man es wünscht, diesen Platz auch ausnutzen kann.  

ROW 1 CSS

Der ROW 1 haben wir hier einen Platz erlaubt der 1200px breit ist.
Da der Inhalt in der ROW "ohne" eine Positionierung am linken Bildschirmrand
kleben würde, müssen wir der ROW 1 auch noch mitteilen, wo diese angezeigt
werden soll. 

Wir haben diese zentriert über die Aussenränder positioniert dargestellt und
hierzu die Werte:

- Aussenrand links: auto
- Aussenrand rechts: auto

vergeben. Wir haben keine Höhe vergeben da diese flexibel von den jeweils
hinterlegten Inhalten in den Blöcken Logo und Menue angezeigt
wird.

Für unser Beispiel haben wir den Hintergrund zur Veranschaulichung grün
eingefärbt, damit der Bereich besser sichtbar ist.








 

ROW 1 ÜBER CSS

Viele Fragen betreffen auch den Bereich:

"ROW ÜBER",

auf den wir im Folgenden eingehen.

Die "ROW ÜBER"  bezeichnet im verschachtelten Containersystem
eine Reihe, die systemseitig "hinter" der eigentlichen ROW angesiedelt wird.
Stellt man z.B. den Z-Index auf einen beliebig höheren Wert, wird diese
"ÜBER" der eigentlichen ROW angezeigt.

Hier ist es möglich bei einer begrenzten Breite der eigentlichen ROW, einen
z.B. Hintergrund zu definieren oder ein Bild abzulegen. Darüber hinaus kann man auch einen Rahmen festlegen.

Wir haben in unserem Beispiel die ROW 1 ÜBER mit Orange
eingefärbt, und eine Breite von 100% (mit den Aussenrändern "auto,auto" vergeben , um dies zu verdeutlichen. 

Sie sehen deutlich den Bereich der ROW 1, der durch die
Werte auto,auto zentriert dargestellt wird.

Die ROW 1 ÜBER liegt hinter der ROW 1 und füllt den leeren
Abstand der ROW 1 links und rechts aus.






 

ROW 2 CSS

Die Row 2 in welche der Container mit dem Block in dem
der Slider untergebracht ist hat ebenfalls keine Werte.

Warum ist das so? 

Die Höhe des Sliders wurde direkt im Modul editiert. Die Breite des Sliders 
richtet sich nach dem hinterlegten Container in welchem
sich der Slider befindet.

Da wir diese auch so anzeigen lassen wollen ist es hier
nicht nötig erneut
Werte zu vergeben. Wir haben dem Slider mitgeteilt das dieser eine gewisse
Breite haben soll und eine gewisse Höhe. 

Da wir dem Hauptcontainer anfangs den Wert 100%
gegeben haben und wir hier keine weiteren Einstellungen
tätigen - wird der Slider auch mit einer Breite von 100%
dargestellt. 










 

ROW 3 CSS

Mit der ROW 3 haben wir die Reihe in der die Textblöcke angesiedelt sind.
Hier haben wir der ROW 3 eine Breite von 1200 Pixeln gegeben - identisch
wie bei der ROW 1. 

Der Aussenrand ist auch hierf auf auto,auto gestellt um die ROW 3 mittig 
darzustellen. 

Nun könnten wir auch hier einen ÜBERCONTAINER zu der ROW 3 erstellen
welcher einen anderen Hintergrund hat - jedoch bleiben wir hier bei weiss.











 

Was ist Bootstrap eigentlich?

Bootstrap wurde mit Unterstützung für das damals noch relativ junge HTML5 und CSS 3 entwickelt. Da Bootstrap ab Version 3 weder Firefox 3.6 noch den Internet Explorer 7 unterstützt, wird in einem Übergangszeitraum weiterhin auch Version 2 aktualisiert. Der Gewährleistung der Browser-Kompatibilität dient das Konzept der progressiven Verbesserung. Das bedeutet, dass die grundlegenden Informationen der Webseite oder -anwendung für alle Geräte und Browser zugänglich sind, erweiterte Funktionalitäten jedoch nur den Geräten und Browsern zur Verfügung stehen, die diese unterstützen. Deutlich wird dies beispielsweise bei den in CSS 3 eingeführten Eigenschaften für abgerundete Ecken, Farbverläufe und Schatten. Diese werden von Bootstrap trotz der mangelnden Unterstützung durch ältere Webbrowser intensiv eingesetzt. Dabei gewährleistet der semantische Einsatz von HTML und die Implementierung von alternativen Stildefinitionen in den Stylesheets, dass die Informationen und Funktionen der Webseite trotz der fehlenden Funktionalitäten bei älteren Browsern zur Verfügung stehen. Gleiches gilt für die mitgelieferten JavaScript-Komponenten. Diese erweitern den Funktionsumfang des Toolkits, sind jedoch keine Voraussetzung für dessen Einsatz.

Seit Version 2.0 unterstützt Bootstrap zudem die Gestaltung im Sinne des Responsive Webdesigns. Das bedeutet, der grafische Aufbau von Webseiten erfolgt dynamisch und unter Berücksichtigung der Eigenschaften, die das verwendete Gerät (PC, Tablet, Mobiltelefon) mit sich bringt. So passen sich angeordnete Elemente automatisch der Bildschirmauflösung bzw. Fenstergröße an.

Bootstrap wird als Open-Source-Bibliothek angeboten.
 

Warum ist alles responsive?

Bootstrap wird standardmäßig mit einem 940 Pixel breiten, zwölfspaltigen Grid-Layout ausgeliefert. Alternativ kann der Entwickler auch ein Layout mit variabler Breite verwenden. Für beide Fälle bietet das Toolkit vier Variationen im Sinne des Responsive Webdesigns an, welche verschiedene Auflösungen und Gerätetypen bedienen: Mobiltelefone, hoch- und querformatige Tablets, sowie PCs mit geringer und hoher (Widescreen-)Auflösung. Dabei passt sich die Breite der Spalten automatisch der zur Verfügung stehenden Fensterbreite an.





 

WEBSITE-ANSICHT

Zur Verdeutlichung haben wir hier noch einmal die Ansicht der Website 
mit den einzelnen Bereichen.

Wie Sie bemerkt haben ist es nicht mehr notwendig, alles auszurichten und zu positionieren.

Dies erspart Ihnen Zeit und Mühe, alles auf einen Punkt zu bekommen. 

Weniger ist mehr und hier arbeitet das Bootstrap-Gridsystem zu Ihren Gunsten.

















 

Viel Erfolg mit dem neuen Containersystem im Worldsoft-CMS!