Layout 2005

Das alte Layout aus den Jahren vor 2003 (Siehe Bis 2004) und die Überarbeitung zu Layout 2004 hat immer noch mit Tabellen gearbeitet. Durch die Verbreitung aktueller Browser und weil ich mich auch selbst etwas satt gesehen habe, wurde im Jahre 2005 das Layout grundlegend überarbeitet. Die MSXFAQ sollte sachlicher, ruhiger und mit besser aufeinander abgestimmten Farben daher kommen. Im gleichen Zuge wurde das komplette Layout endlich auf DIV-Tags umgestellt. Die logische Struktur stellt sich wie folgt dar.

Die Seite besteht aus insgesamt 12 Blöcken, die in der Reihenfolge 1 bis 12 in jedem Dokument vorkommen. Damit alle Seiten gleich aussehen, kommt eine Frontpage DWT-Vorlage zum Einsatz, so dass ich nur noch die blauen Bereiche verändern kann. Die Blöcke im einzelnen:

  1. container
    Globaler Block, in dem alle sonstigen Daten stehen. für diesen Block ist ein Hintergrundbild definiert, welches den Farbverlauf von Navigation und Content darstellt. So ein Trick ist erforderlich, da die Blöcke 11 und 06 nicht unbedingt gleich lang sind und das dann doch etwas unschön aussieht. für die, die keine Hintergrundbilder laden, ist ersatzweise eine Hintergrundfarbe definiert.
  2. logo
    Das neue Logo der MSXFAQ wird über einen eigenen DIV-Block fest positioniert, damit es unverrückbar oben steht.
  3. top
    Der obere Navigationsbereich ist ein eigener Block, der durch einen linken Rand von 200 Pixel rechts vom Logo zu stehen kommt und links und unten einen weißen Rand hat.
  4. topnav
     Damit die Überschriften bei einem sehr kleinen Browserfenster nicht umbrechen und das Layout stören, ist dieser kleine Block mit einer festen Größe für den Text vorgesehen. Die Breite von 400 Pixel wird sicher den aktuellen Bedürfnissen angepasst, aber so bricht der Text nicht um.
  5. top2
    Der Trick mit dem Hintergrundbild würde hier natürlich den grauen Contenthintergrund anzeigen. Daher ist hier ein Block, der einfach nur eine Hintergrundfarbe hat, um das Hintergrundbild an der Stelle zu überdecken.
  6. main
    Das ist nun der Hauptblock, in dem sich der meiste Inhalt abspielt. Er hat eine Hintergrundfarbe und einen Rahmen links und oben und ansonsten enthält er die nächsten vier Blöcke
  7. breadcrumb
    Die schon bekannte "Brotkrume", damit Sie immer wissen wo sie sind.
  8. content
    Dies ist der größte und wichtigste Block, in dem der eigentliche Inhalt jeder Seite steht
  9. keyword
    Für jede Seite versuche ich Schlüsselworte anzulegen. Das Skript, um daraus aber einen Index aufzubauen, habe ich noch nicht erstellt. (siehe VBA-Skript)
  10. footer
    Die obligatorische Fußzeile mit den Copyrighthinweisen und Kontaktdaten
  11. navbar
    Dieser Block weicht wieder von den anderen ab, da er wie das Logo durch eine absolute Positionierung platziert wird. So kann ich diesen Block im HTML-Text an das Ende stellen und nicht CSS-kompaltible Browser können die Seite dennoch nutzen. Dieser Block wird dann einfach am Ende der Seite ausgegeben. In dem Block sind neben dem Menü einige Icons enthalten
  12. search
    Ein eigener DIV-Bereich steuert die Formatierung des Suchfelds.
  13. menu
    Das Menu selbst ist eine einfache Aufzählung, die ich ebenfalls durch ein VBA-Makro erstellen lasse. der Block hilft dem VBScript dabei, an der richtigen Stelle den HTML-Text hinein zu schreiben.

Es mag sein, dass es einfachere und vielleicht sogar kompatiblere Lösungen gibt. Dann bin ich gerne für Feedback zu haben.

Drucklayout

So nett das Layout vielleicht auf dem Bildschirm aussieht, so schlecht lässt es sich drucken, wenn ich nicht auch da vorgesorgt hätte. Über das Stylesheet werden die meisten Blöcke einfach abgeschaltet, so dass nur noch das Logo, die obere Navigation und der komplette Block "main" erhalten bleibt. Entsprechend "lesbar" ist dann auch der Ausdruck. Allerdings kann ich nichts dafür, dass einige Browser und Druckertreiber die diversen Grafiken nicht kleiner skalieren und damit doch das ein oder andere über den Papierrand hinaus ragt und so nicht gedruckt wird. HTML ist nun keine Seitenbeschreibungssprache.

IE8 Layout

Ich habe die MSXFAQ natürlich auch schon früh mit dem IE8 getestet. Das die IE8 Beta2 aber die MSXFAQ nicht korrekt anzeigen konnte, habe ich temporär den Weg gewählt, über einen META-Header den IE8 anzuweisen die alte Anzeige des IE7 (Kompatibilitätsmode) zu nutzen.

<meta http-equiv="X-UA-Compatible" content="IE-EmulateIE7" />

Sobald der finale IE8 draußen ist, welche ich natürlich schauen, ob die MSXFAQ auch ohne diesen Mode sauber angezeigt wird.

Weitere Links