In diesem Beitrag soll die „Trennung von Inhalt, Struktur und Layout" besprochen werden.

Einführung

Generell ergibt sich durch die strikte Trennung dieser Bereiche der Vorteil, dass die Arbeitslast besser verteilt werden kann. So kann sich z.B. ein Marketingmitarbeiter mit dem Inhalt beschäftigen während ein Informatiker die Struktur des Systems auf eventuelle Sicherheitsrisiken anpasst. Schlussendlich hält der
Webdesigner die Präsentation des Systems noch auf dem aktuellsten Stand. So können u.a. Redesigns durchgeführt werden ohne den eigentlichen Inhalt zu verändern.

Um dies umzusetzen, werden Vorlagen erstellt, die sämtliche Informationen über das Design der Website beinhalten, völlig getrennt vom Inhalt.

Umsetzung

Wie funktioniert nun die Verknüpfung zwischen Design und Inhalt? Ganz einfach:

1. Jedes Inhaltselement bekommt im HTML-Tag eine Klasse, und unter Umständen eine ID zugewiesen.
2. Diese ID wird im CSS definiert, also das Aussehen festgelegt.
3. Einbindung des CSS in den Header jeder (X)HTML-Datei.

So funktioniert's in der Praxis:

Teil des Inhalts der anzuzeigenden Webseite

<link href="style.css" type="text/css" />

<p  class="orange">Absatz mit orangen Text</p>

Inhalt der Datei style.css

.orange {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

color: #FF6600;

}

Das Leben der Web-Designer wird vor allem durch Content Management Systeme (CMS) erleichtert. Diese Systeme verwenden Templates (die Struktur und Design enthalten), und ermöglichen die strikte Trennung von Inhalt und Aussehen. Mithilfe einer ausgereiften Benutzerverwaltung können Administratoren von Redakteuren bzw. Schreibern getrennt. Beispiele für derartige Systeme sind Joomla (für kleine bis mittelgroße Projekte), Typo3 (für mittlere und große Projekte), Drupal (erfüllt derzeit am besten die Anforderungen an Accessibility), etc.

Meine Websites

Website, die zur Inhaltstrennung ein proprietäres CMS einsetzt: www.toob.at

Website, die das Open-Source CMS Joomla einsetzt: www.studentenrezepte.com