Dokumentation

Konfiguration Ordnerstruktur Seitenstruktur Inhalte Absatzformate Klappbare Abschnitte Weitere Klassen CSS Nützliche Links

Konfiguration und Grundeinstellungen

Die Datei → core/config.php enthält verschiedene Variablen für die grundlegenden Einstellungen und Basiswerte der Seiten.

Folgende Variablen sind hier enthalten

$server

Hier muss der aktuelle Server eingetragen werden (inklusive des entsprechenden Unterordners) ohne http://. Z.B. localhost/profamilia oder www.profamilia-mainz.de

$lang und $curl

Diese Variablen legen fest, welche Sprache und welche Seite als Standard beim Betreten der Seite verwendet werden sollen. Z.B. de für Deutsch und home.html für die Seite home.html

$mail, $phone und $phone_txt

Standardmail und Standardtelefonnummer für den ersten Header. $phone dient für einen Telefonlink für mobile Geräte und darf lediglich neben Zahlen Bindestriche enthalten. $phone_txt ist der Text für den Link resp. Eintrag.

$languages

Dieses Array enthält die Sprachen, die im Sprachmenü angezeigt werden sollen. Zu jeder Sprache muss in pages/ ein Ordner mit dem gleichen Namen wie in $languages vorhanden sein.

$debug

Wenn true wird error_reporting auf E_ALL gesetzt

Ordnerstruktur

Für die Pflege sind vorallem die Dateien im Ordner pages/ relevant

core

Enthält die Funktionsdateien und die Konfigurationsdatei

css

Stylesheet-Dateien und Grafiken (→ src/)

img

Standardordner für die Bilddateien

js

Javascript-Dateien

pages

Ordner für die HTML- und Inhaltsdateien

Dateien

header.php / footer.php enthalten HTML und PHP für den Seitenkopf und Seitenfuß

language.php enthält ein Array mit Sprach-Variablen für dynamische Inhalte (z.B. für die Suche)

header_image.php enthält die Variablen für abweichende Hintergründe für den Header der einzelnen Seiten

Ordner

Für jede Sprache gibt es entsprechend benannte Ordner mit den Inhaltsdateien:

*.html sind die einzelnen Seiten

sitemap.php enthält die Variablen die Seitenstruktur und die Meta-Angaben

minimenu.php enhält das Menü für die Navigation in Seitenkopf und Seitenfuß (ohne Sprachen und Suche)

Seitenstruktur

Sprachen

Sprachen werden in core/config.php → $languages definiert. ?
Für jede Sprache muss ein Ordner mit dem gleichen Kürzel vorhanden sein, wie hier definiert. Diese müssen neben HTML-Dateien die Dateien für die Seitenstruktur und das Minimenü enthalten.

In img/lang/ befindet sich eine Kollektion mit PNG-Grafiken für diverse Sprachen, fehlende Flaggen müssen in diesen Ordner gelegt werden. Ggf. müssen diese umbenannt werden (wie z.B. gb → en).

Wenn eine neue Sprache hinzugefügt wird, müssen die dynamischen Textanteile in pages/language.php ergänzt werden.

Seitenstruktur

Für jede Sprache definiert die Datei sitemap.php die Seitenstruktur.

Die Datei enthält zwei Arrays:

$sitemap

Jede Zeile dieses Array definiert eine Seite der Seitenstruktur. Sie besteht aus einer einzigartigen ID und den zugehörigen Angaben für den Link, den Namen wie im Menü angezeigt, die ID der übergeordneten Seite, die Position innerhalb der jeweiligen Ebene und ob die Seite im Hauptmenü angezeigt werden soll.
Menü und Sitemap werden automatisch erstellt.

ID	interner Seitenname (ID), muss einmalig sein, kann aber frei benannt werden
LINK	der Link zur HTML-Datei der jeweiligen Seite innerhalb des Ordners pages/
NAME	Der Klartextname der Seite, wie er im Menü und der Sitemap verwendet wird.
EBENE	die ID der übergeordneten Seite oder 0 für Seiten der ersten Ebene.
POSITION	die Position der Seite innerhalb der jeweiligen Ebene als Zahl.
HAUPTMENÜ	true: die Seite wird im Hauptmenü angezeigt. false: die Seite wird nicht im Hauptmenü angezeigt
SUBMENÜ	true: das Submenü der nächsten Ebene wird auf der Seite angezeigt. false: das Submenü wird nicht auf der Seite angezeigt
Schreibweise 'ID' => array ('LINK','NAME',EBENE,POSITION,HAUPTMENÜ,SUBMENÜ), 'ID' => array ('(pfad/)dateiname.html','Klartextname',0/ID,0-9999,true/false,true/false), Textanteile wie Namen, oder Pfade müssen in einfachen oder doppelten Anführungszeichen geschrieben werden.
Der Link für die HTML-Dateien muss nicht der Seitenstruktur entsprechen Wenn die Position doppelt vorhanden ist, taucht die Seite nicht im Menü auf! Die IDs search und sitemap sind systemreserviert und dürfen nicht verwendet werden. Die IDs der Seiten für verschiedene Sprachen müssen gleich sein, um das Umschalten zwischen den Sprachversionen zu ermöglichen

Meta-Angaben

$meta

Hier werden die Meta-Angaben wie title, description, keywords … für die jeweiligen ID der Seiten definiert. Wenn für eine Seite keine Angaben gemacht werden, werden die Standardwerte wie in sitemap.php → $meta[0] definiert verwendet

Die Schreibweise ist ähnlich wie im Array $sitemap, die Einträge sind hier jedoch benannt.

'ID' => array ( 'name' => 'content', 'name' => 'content', … ),

Für jeden Eintrag wird im head-Bereich der Ausgabe eine Zeile erzeugt:

<meta name="name" content="content">

Pflege der Seiten

Dateien

Die Seite verwendet HTML5 und CSS3

Die HTML-Dateien in den Ordnern der jeweiligen Sprachen enthalten lediglich das Markup für einzelnen Seiten, wie sie in sitemap.php → $sitemap definiert sind.

Die Meta-Angaben der einzelnen Seiten können resp. sollten (SEO!) seperat in sitemap.php → $meta definiert werden.

Der Pfad zu den Dateien und der Dateiname müssen mit den Angaben in sitemap.php → $sitemap entsprechen.

Neue Dateien müssen in UTF-8 kodiert sein (ohne Bom), damit alle Zeichen richtig dargestellt werden.

Hintergrund für Header (Seitenkopf)

In der Datei core/config.php können die Hintergrundbild und CSS-Attribute für den Header (#logopanel) definiert werden.
Soll die Datei aussserhalb des Standardordners img/ liegen, muss auch das Attribut background-image definiert werden. Neben der Variablen für die Hintergrunddatei gibt es ein Array für CSS-Attribute zur weiteren Gestaltung von #logopanel.

Die Attribute werden in css/user.css in Bezug auf die Klasse des body-Tags definiert. Siehe CSS

»Best practice« ist, das Bild für die Hintergrunddatei in der maximalen Breite des Headers anzulegen. Dieser ist 960px breit. Die maximale Höhe ist (abhänging von der eingestellten Basisschriftgröße) 187px – es kann aber nicht schaden, dem Ausschnitt ein wenig Luft nach oben und unten zu geben, z.b. die Höhe mit 250px anzulegen. Die Grundeinstellung im CSS zentriert den Hintergund horizontal und vertikal.

Informationen zu den CSS-Attributen für Hintergründe findet man hier: w3schools.com – Hintergründe

Absatzformate und absatzorientierte Klassen

Klappbare Abschnitte

Weitere Klassen

Grössen für Bilder, Panels und andere Elemente

.w20 – Breite 20%

.w25 – Breite 25%

.w40 – Breite 40%

.w50 – Breite 50%

.w60 – Breite 60%

.w75 – Breite 75%

Buttons

Button

Button small

Link Link Link Link

Link Link Link Link

Beispiele

Beispiel Bild 25% und 75% breit

Beispiel panel 50% und 40% breit, mit den zusätzlichen Klassen für links/rechts-Ausrichtung

Panel 50% breit

Panel 40% breit links

Panel 40% breit rechts

Beispiel diverser Kombinationen und Verschachtelungen

Die Klasse ».inline« fügt einen Aussenabstand nach oben und unten ein. In Kombination mit links oder rechts gestellten Elementen kommt jeweils noch ein Aussenabstand nach rechts oder links hinzu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Die Klasse ».inline« fügt einen Aussenabstand nach oben und unten ein. In Kombination mit links oder rechts gestellten Elementen kommt jeweils noch ein Aussenabstand nach rechts oder links hinzu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Überschrift als Panel Box Warnung

Bei der Verwendung von links/rechts gestellten Bildern in Paneln oder kurzen Absätzen braucht das umgebende HTML-ELement die zusätzliche Klasse ».clearfix«

eigene CSS-Definitionen

Für Änderungen, weitere Überschreibungen und zusätzliche Definitionen ist die Datei css/user.css vorgesehen. Diese wird nach allen anderen CSS-Dateien und Inline-CSS-Defintionen geladen.

Alle weiteren CSS-Dateien sollten wegen Update-Fähigkeit nicht bearbeitet werden.

Tipp

Dem Tag body werden dynamisch Klassen für Sprache und ID der Seite zugeteilt. So ist es möglich Definitionen in Abhängigkeit von Sprache oder Seite zu zuteilen.

Beispiel: Schriftgrösse aller Absätze auf der Seite Impressum kleiner machen

.page-impressum .content p { font-size:12px; }

Der erste Selektor .page-impressum grenzt die Änderung auf die Seite Impressum ein, der zweite grenzt die Änderung auf den Inhaltsbereich .content ein und der Selektor p selektiert alle Absatz-Tags.

Da diese Definitionen nach allen anderen geladen werden, ist es z.B auch möglich die Einträge für vordefinierte Header-Hintergründe zu überschreiben.
Beispiel: andere Bilddatei für den Header nur bei englischer Sprache

.body-en #logopanel { background-image:url("../img/header_EN.jpg"); }

Beide Beispiele sind in css/user.css enthalten und gelöscht oder editiert werden.

Nützliche Links

• xampp | Server für Testumgebung auf lokalem PC
• w3schools | Umfassende Informationen zu HTML und CSS
• browser-statistik | Aktuelle Statistiken zur Browserverteilung und Versionen
• can-i-use | Übersicht über die Kompatibilität von CSS-Attributen und Browserversionen und -herstellern
• notepad++ | Guter Freeware Editor für HTML und CSS sowie diversen weiteren Sprachen
• filezilla | Gutes und beliebtes Freeware FTP-Programm
• firebug | Developer Tool für Firefox
• web developer | web developer für Firefox