Layout mit XHTML, CSS und PHP

Das typische Problem: Es gibt eine phantastische Idee für ein Thema eines internet-Projekts oder nach langem vergeblichen Suchen nach bestimmten Inhalten im internet und eigener Aneignung des Wissens aus anderen Quellen besteht der dringende Wunsch, dieses Wissen, dieses Thema in einem internet-Projekt qualitativ hochwertig für jedermann anzubieten.
Aber: Es fehlen die technischen Kenntnisse in XHTML, CSS und PHP, um dieses auch technisch qualitativ hochwertig umzusetzen. Andere, sogenannte webdesigner sind inhaltlich nicht in der Lage, das Thema umzusetzen und sind zudem noch teuer, wobei sie oft nicht einmal durch Kompetenz, sondern mehr durch äußeren Schein zu überzeugen suchen.

Hier setzt im Prinzip dieses Projekt an - es liegt ein klar definiertes Thema vor, welches persönlich umgesetzt werden soll, wozu noch schnell die Kenntnisse herbeigeschafft werden müssen, um diesen Inhalt auch qualitativ hochwertig und zugänglich für jedermann anbieten zu können. Im Grunde zeige ich hier, wie das technische Grundgerüst eines solchen kleinen, klar umrissenen Projektes aussehen kann, welches im Grunde bei hohem Komfort technisch noch recht einfach und übersichtlich gehalten ist.

Wer hingegen allgemein nach Anregungen sucht, wie qualitativ hochwertige internet-Projekte erfolgreich erstellt werden, wie strukturiert, der kann auf meinen Hilfeseiten sowohl Prinzipielles erfahren als auch konkrete Kochrezepte und kleinere Beispiele nachlesen und nachvollziehen.

Aufbau des Projektes

Die Kombination von XHTML, CSS und PHP macht Layouts von internet-Seiten sehr flexibel. CSS-Dateien und Inhalt können kurzerhand gesetzt, gelöscht oder ausgetauscht werden, wenn Stil und Wechsel des Inhalts dies erfordern. Auch browser-Weichen für Stilvorlagen sind damit einfach zu realisieren. Sogar die CSS-Dateien selbst können zu PHP-Dateien werden, deren Inhalt dynamisch verändert wird, worauf wir hier allerdings einstweilen verzichten wollen. In diesem kleinen Projekt wird das Projekt selbst das Thema sein und der Leser kann mitverfolgen, wie es funktioniert.
Voraussetzung dafür sind gute Kenntnisse in (X)HTML, Grundkenntnisse in CSS und PHP. Ersatzweise können über den Menüpunkt Verweise entsprechende Dokumentationen im Bedarfsfalle aufgerufen und eingesehen werden.

Ein Nachteil ergibt sich allerdings aus der Kombination von CSS und PHP - wenn im Stilvorlagen-Menü des browsers ein alternativer Stil ausgewählt wird, ändert sich damit nicht die XHTML-Ausgabe des browsers. Das ist aber nicht so schlimm, da bei dem "alternate stylesheet" ja nur Stilvorlagen angegeben werden müssen, die zur Vorauswahl der XHTML-Ausgabe passen. Für das Umschalten zwischen verschiedenen Stilen ist dann auf der Seite ein weiteres kleines Menü vorzusehen, mit dem der Nutzer den Stil selbst auswählen kann. Der Vorteil bei dieser Methode ist ohnehin, daß Menüs in XHTML unabhängig von den Möglichkeiten des browsers funktionieren.
Der Laie wird zudem leider das Stilvorlagenmenü des browsers gar nicht kennen und daher auch nicht nutzen.
Eine Verwaltung verschiedener Stile mit XHTML-Menüs ermöglicht es außerdem zuverlässig, die Auswahl eines Stils durch den Nutzer auch auf weitere Seiten zu retten, ohne sich dabei auf den browser verlassen zu müssen.

Eine browser-Weiche ist ebenfalls im Projekt vorhanden. Um bessere Übersicht zu wahren, kann es bei einem echten Projekt natürlich vorteilhaft sein, diese in eine include-Datei auszulagern, ähnlich anderer vorzunehmender Initialisierungen. Genauso gut könnte die browser-Weiche auch in einer CSS-Datei stil.php untergebracht werden, wenn keine XHTML-Elemente verändert werden müssen.

Das Ziel dieses Beispiels ist es, einige Möglichkeiten zu zeigen und nicht ein bereits optimiertes Projekt vorzuführen.
Für ein Tabellenlayout wäre natürlich etwas anders vorzugehen als für ein reines CSS-Layout. Ein Tabellenlayout - wenn überhaupt dann ganz ohne CSS - kann heute eigentlich nur noch sinnvoll für bekannte alte browser wie Netscape3 sein, die gar kein CSS kennen. Da derartige browser heutzutage (August 2004) praktisch nicht mehr genutzt werden, habe ich hier darauf verzichtet. Es gibt zwar auch aktuelle browser, die kein CSS interpretieren (Dillo etwa oder Lynx), doch wenn ein solcher browser genutzt wird, kann davon ausgegangen werden, daß der Nutzer Wert auf Inhalt und nicht auf Layout legt und absichtlich darauf verzichtet.
Im Sinne von XHTML ist Tabellenlayout ohnehin ein Mißbrauch der Tabellen-Elemente, die für tabellenartigen Inhalt optimiert sind. Statt einer CSS-Datei wären dann alternativ Tabellen-Elemente per PHP im XHTML-Quelltext vorzusehen, um Inhalt anzuordnen.
Für browser ohne CSS-Interpretation ist das gesamte Projekt ohnehin so gut strukturiert, daß es auch ohne CSS-Formatierung gut funktioniert. Zu sehen ist dies im Stil n (nichts, kein CSS), der folglich der Anzeige eines browsers entspricht, der kein CSS interpretiert.

Unter den einzelnen Menüpunkten sind die zentralen Dateien des Projektes je nach Funktion angeordnet und erläutert.

Geht es nicht noch einfacher?

Natürlich geht es noch einfacher.

Statt alles über eine index-Datei aufzurufen, kann auch das Konzept der Einzeldateien beibehalten werden. Wenn zudem noch auf das XHTML-Stilmenü und sonstigen Luxus verzichtet wird, reicht praktisch schon die PHP-Funktion include, um effektiv zu arbeiten.
Dafür kommt später gegebenenfalls mehr Arbeit auf den Autor der Seite zu, wenn das Projekt doch noch strukturelle Änderungen erfordert, die dann bei jeder Einzelseite vorgenommen werden müssen.

Schauen wir uns einfach eine solche abgespeckte Datei einfacher.php als Quelltext an:

<?php
# initialisieren:
include('./wurzel.php');
# Kopf einbinden
include("$verzeichnis/menue/einfacherlink.php");
# Jetzt geht es los: Inhalt anzeigen...
# Die ersten leeren div-tags koennen spaeter diverse 
# Hintergrundbilder fuer css bereitstellen
# der body bekommt eine 
# id fuer einige css-Tricks
?>
<body id="body"> 
<div class="hg0">
<div class="hg1">

</div>  <!-- Ende hg1 -->

<div class="hg2">

</div>  <!-- Ende hg2-->

<div class="hg3">

</div>  <!-- Ende hg3 -->

 <div class="rechts">  
  <!-- Hauptrahmen mit spaeterem Inhalt -->
  <div class="oin"> 
   <!-- css Deko-Rahmen zu 'oben' -->
   <div class="oben"> 
     <!-- Ueberschrift des Inhaltsbereichs -->
     <h1>Minimales Projekt</h1>
     <p class="obensub">Dr. O. Hoffmann</p>
   </div> <!-- Ende oben -->   
  </div> <!-- Ende oin -->
  <div class="iin">  <!-- css Deko-Rahmen Inhalt -->
   <div class="inhalt">  <!-- Rahmen Inhalt -->
   
   

   
   
   
      
<?php
# der eigentliche Inhalt; eigentlich kommt der Inhalt
# hier direkt rein, aber ich habe keine Lust, das hier
# reinzukopieren, nur darum binde ich das auch als
# include ein:
include("$verzeichnis/inhalt/einfacher.php");
# ansonsten kann dieser php-Block komplett durch
# statisches xhtml fuer den Inhalt ersetzt werden ...
?>







   </div> <!-- Ende inhalt -->
  </div> <!-- Ende iin -->
 </div> <!-- Ende rechts -->
<div class="liin">
 <div class="links"> <!-- Rahmen mit spaeterem Menue -->
  <div class="logo"> 
   <!-- Rahmen fuer Logo - kann auch ein Bild rein -->
   <h1 class="logo" title="Minimales Projekt, Logo">MP</h1>
  </div>
 <ul class="menu"> 
 <?php
 #Menue als Liste  
 include("$verzeichnis/menue/start.php");
 # bei einem kompletten Projekt stehen hier natuerlich
 # einfach die Verweise auf die anderen Inhaltsdateien drin, 
 # ohne weitere get-Parameter
?>
 </ul> <!-- Ende ul menu -->
</div>  <!-- Ende links -->
</div>  <!-- Ende liin -->
</div> <!-- Ende hg0 -->
</body>
</html>

Nur zum Ausprobieren habe ich diese Seite in dieser Version im Schatten-Stil zum Laufen gebracht. Das eingebundene Menü habe ich nicht vereinfacht. Dieses führt wieder zurück zum minimalen Projekt. Also, es geht auch noch einfacher!

Natürlich geht es auch immer noch sparsamer: alles, was vor dem Inhaltsteil steht, kann in eine Kopf-Datei ausgelagert werden und im Anschluß wird der Rest als Fuß-Datei eingebunden:

<?php
include("kopf.php");
?>


<h2>Hier Inhalt reinschreiben</h2>


<?php
include("fuss.php");
?>

So einfach geht es natürlich nur, wenn es nur ein Menü gibt, sonst muß auch noch das gewünschte Menü einzeln eingebunden werden, zwischen den Inhalt und das Menü kann dann der Rest als mitte.php eingebunden werden.

Verweise

• Einige weitere Projekte des Autors:

  • Der Prinz und der Gloeckner: Kunst und Literatur
  • Dr. O. Hoffmann (über den Autor)
  • DasSpiel 1.0 - Das Spiel 0.9 (Experimentelle Seite mit XHTML+CSS+PHP)
  • Galerie eigener Photographien
  • Opera Problems with SVG (en)
  • SVG Animation Test (de, en)
  • Hilfe zur Gestaltung von internet-Projekten und Hilfen zu XHTML, SVG, CSS und PHP

• Gestalten im WWW:

  • (X)HTML

    • HTML lernen und HTML-Referenz: Stefan Münz, selfhtml
    • W3C Spezifikationen, deutsch: edition W3C
    • HTML im dmoz-Katalog: HTML bei dmoz
    • Standards im internet: W3C, (X)HTML, SVG, CSS etc, Standards

  • CSS

    • erstes CSS: Einfaches Beispiel von W3C
    • css: CSS Spezifikation, deutsch
    • CSS im dmoz-Katalog: CSS bei dmoz
    • CSS Philosophie und Praxis: Zen Garden, deutsche Übersetzung
    • CSS Ausreizen: CSS/edge, Eric A. Meyer, englisch
    • Kochbuch für CSS-Anarchisten (Eric A. Meyer): Kochbuch Teil 1 (englisch), Kochbuch Teil 2 (englisch), Kochbuch Teil 1 (deutsch)
    • weitere Beispiele: css.fractalum, deutsch

  • PHP

    • Anleitung für Anfänger: PHP tutorial
    • Anleitung für Anfänger: PHP tutorial
    • PHP im dmoz-Katalog: PHP bei dmoz
    • Offizielle PHP-Seite: php.net
    • Offizielle PHP-Dokumentation: php.net
    • PHP-Dokumentation: Damir Enseleit, selfphp

• Zugänglichkeit und Barrierefreiheit von Projekten

  • Zugänglichkeitsrichtlinien: W3C Richtlinien, deutsche Übersetzung
  • Barrierefreies Webdesign: Internet für alle
  • Barrierefreies Webdesign: Funktionierende Projekte erstellen
  • Web ohne Barrieren: Behindertengerechtes Internet
  • BIK: barrierefrei informieren und und kommunizieren und BIK Kurztest
  • Browser-unabhängiges Design: anybrowser.org

• Validatoren

  · · · Site valet · Bobby

Kontakt

Bei Problemen oder Fragen wende man sich bitte per elektronischer Post an den Autor:
dr.o.hoffmann@gmx.de

Postanschrift:
Dr. Olaf Hoffmann
Niederflegge 6
32339 Hannover

Besonders schön fände ich auch Rückmeldungen hinsichtlich der Zugänglichkeit oder hinsichtlich Problemen mit Brauser-Mängeln.
Wenn Probleme auftreten, bitte ich auch um detaillierte Angaben, bei welchem Stil, mit welchem Brauser, mit welcher Seite (URL), sonst sind Probleme oft nur schlecht nachvollziehbar.

Bei dem vorliegenden Angebot handelt es sich nicht um einen geschäftsmäßigen Teledienst im Sinne des deutschen Teledienstegesetzes - TDG. Vielmehr handelt es sich um ein optionales Angebot einer Anleitung zur Projekterstellung in XHTML, CSS und PHP ohne Gewähr, aber mit der Notwendigkeit eigenständigen Denkens auf der Seite des Anwenders der Anleitung. Somit liegt dem Autor weder etwas fern (tele), noch möchte er etwas Mäßiges anbieten noch erweist er mit dieser freiwilligen Wohltat irgend jemandem im eigentlichen Sinne einen guten Dienst, eher eine Hilfe, was leisten muß der Anwender der Anleitungen schon selber, was ihn zu einem geschäftigen und kompetenten Autor von internet-Seiten mit interessanten Inhalten werden lasse möge ...