Seitenaufbau #

Interne Webseiten folgen einem einheitlichen Layout, das über Server Side Includes (SSI) zusammengesetzt wird. EULANDA verarbeitet die SSI-Direktiven vor der Auslieferung an den eingebetteten Browser.

Standard-Seitengerüst #

Fast alle Hauptseiten verwenden dieses Muster:

<!--#SET VAR="PG_NAME" value="meinseite"-->
<!--#SET VAR="PG_TITLE" value="Meine Seite"-->
<!--#INCLUDE VIRTUAL="/include/page-head.inc" PATCH=SSI-->
<!--#INCLUDE VIRTUAL="/include/side-nav.htm"-->
<!--#INCLUDE VIRTUAL="/include/page-content.inc" PATCH=SSI-->
</body>
<!--#INCLUDE VIRTUAL="/include/page-customscripts.inc" PATCH=REPLACE-->
<script>
  // Seitenspezifisches JavaScript
</script>
</html>

Die Include-Dateien liegen unter \MODULES\WEB\include\:

Datei	Inhalt
`page-head.inc`	HTML-Head (`<title>`, CSS, `forms.js`), Body-Start, Info-Message-Block
`side-nav.htm`	Linke Navigation (26em breit, `#mySidenav`)
`page-content.inc`	Inhaltsbereich mit zwei `w3-half`-Spalten (`mnuClientLeft`, `mnuClientRight`)
`page-content-fullsize.inc`	Inhaltsbereich ohne Spaltenteilung (nur `mnuClientLeft`)
`page-customscripts.inc`	Lädt benutzerspezifische JS-Dateien aus `ALLUSER/customize_web/` und `CURRENTUSER/customize_web/`

SSI-Direktiven #

Direktive	Funktion
`<!--#SET VAR="name" value="wert"-->`	Variable setzen
`<!--#ECHO VAR="name"-->`	Variable ausgeben
`<!--#INCLUDE VIRTUAL="/pfad"-->`	Datei einbinden

PATCH-Modi bei INCLUDE #

Modus	Verhalten
`PATCH=SSI`	`<!--#ECHO VAR="...">` im Include durch gesetzte Variablen ersetzen
`PATCH=REPLACE`	`%VARNAME%`-Platzhalter im Include durch gesetzte Variablen ersetzen
(ohne PATCH)	Datei unverändert einbinden

Layout-Struktur #

Das Standard-Layout besteht aus drei Bereichen:

┌─────────────────────────────────────────────────────────┐
│  Sidenav (#mySidenav)  │  Hauptbereich (.w3-main)      │
│  Breite: 26em           │  margin-left: 26em            │
│                         │                               │
│  ┌───────────────────┐  │  ┌─────────────┬────────────┐ │
│  │ #mnuNav           │  │  │ mnuClient-  │ mnuClient- │ │
│  │ (Menü-Einträge)   │  │  │ Left        │ Right      │ │
│  └───────────────────┘  │  │ (w3-half)   │ (w3-half)  │ │
│                         │  └─────────────┴────────────┘ │
└─────────────────────────────────────────────────────────┘

Auf kleineren Viewports wird die Navigation ausgeblendet und über einen Hamburger-Button (w3_open()) eingeblendet.

CSS-Hierarchie #

Die CSS-Dateien werden in dieser Reihenfolge geladen:

designs/w3.css — W3CSS Basis-Framework (v2.74)
designs/w3eulanda.css.esx — EULANDA-spezifische Anpassungen (mit ESX-Platzhaltern für Benutzerfarben)
designs/w10.css.esx — Windows 10-Style Anpassungen
Benutzerspezifische CSS — aus /ALLUSER/ und /CURRENTUSER/

Der Einstiegspunkt w3eulanda.css importiert die Kette automatisch.

Responsive Breakpoints #

Die Breakpoints sind in designs/fix-w3.css definiert und verwenden em-Einheiten für bessere Skalierung auf hochauflösenden Displays:

Viewport	Navigation	Spalten
> 80em	26em (Standard)	nebeneinander
70–80em	24em	nebeneinander
< 70em	22em	untereinander

Benutzerspezifische Skripte #

Über page-customscripts.inc werden automatisch benutzerdefinierte JavaScript-Dateien geladen. Das System sucht nach:

ALLUSER/customize_web/%PG_NAME%.js — gilt für alle Benutzer
CURRENTUSER/customize_web/%PG_NAME%.js — gilt nur für den angemeldeten Benutzer

%PG_NAME% wird durch den Wert der SSI-Variable PG_NAME ersetzt. Damit können Solution-Partner und Endkunden einzelne Seiten erweitern, ohne die Original-Dateien zu verändern.