Dokumentation | www.profamilia-mainz.de

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

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

normaler Absatz

Antext Absatz

  • Liste
  • Liste
  • Liste
  1. Zahlenliste
  2. Zahlenliste
  3. Zahlenliste
Beschreibungsliste Titel
Beschreibungsliste Inhalt
Beschreibungsliste Titel
Beschreibungsliste Inhalt

Panel Box

Panel Box Nachricht

Panel Box Warnung

Head Content
Test test
Test test

Klappbare Abschnitte

Um das Auf-/Zuklappen von Abschnitten zu definieren ist folgendes Markup nötig:

<h3 class="grouptrigger">Triggergruppen</h3> <div class="grouptarget"> <!-- Hier steht beliebiger HTML-Inhalt --> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi esse eum maxime molestiae optio perspiciatis quidem recusandae! Odit saepe, vero.</p> </div>
  • Die Funktionalität basiert auf den Klassen grouptoggle (für den Auslöser) und grouptarget (für den klappbaren Abschnitt). D.h. es können beliebige HTML-Tags verwendet werden, um Triggergruppen zu erzeugen
  • Es können sich auch weitere HTML-Elemente zwischen den Auslöser und klappbarem Abschnitt, um z.B. einen Anreisser anzulegen

Beispiel

Überschrift als Auslöser

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, assumenda consequatur, consequuntur cupiditate eaque earum eveniet facere fuga in iure magni nemo odio ratione repellat tempore totam veniam voluptate voluptates.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At blanditiis enim error explicabo hic illo itaque magnam molestiae mollitia nobis non obcaecati odio officiis, pariatur quidem quod, sint temporibus vel velit vero? Ab, consectetur delectus dignissimos ducimus expedita fuga impedit ipsam mollitia, possimus quam quasi qui quia quisquam, ratione temporibus.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad architecto consequatur, deserunt dignissimos dolores dolorum eius enim fugit impedit iste nam non numquam placeat repellat repellendus saepe ut, vero.

Überschrift als Auslöser

Ich bin ein Anreiser
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid autem et facilis inventore, magni molestias mollitia quam repellat saepe temporibus?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, assumenda consequatur, consequuntur cupiditate eaque earum eveniet facere fuga in iure magni nemo odio ratione repellat tempore totam veniam voluptate voluptates.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At blanditiis enim error explicabo hic illo itaque magnam molestiae mollitia nobis non obcaecati odio officiis, pariatur quidem quod, sint temporibus vel velit vero? Ab, consectetur delectus dignissimos ducimus expedita fuga impedit ipsam mollitia, possimus quam quasi qui quia quisquam, ratione temporibus.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad architecto consequatur, deserunt dignissimos dolores dolorum eius enim fugit impedit iste nam non numquam placeat repellat repellendus saepe ut, vero.

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

Beispiele

Beispiel Bild 25% und 75% breit

Bildname oder Beschreibung Bildname oder Beschreibung

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

Bildname oder Beschreibung 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.

Bildname oder Beschreibung 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

Bild 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.

  • 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