Jürgen Gutsch

Barrierefreie Webseiten mit ASP.NET 2.0 - Teil 2

Für den Seitenaufbau nutze ich das YAML Framework (1) von Dirk Jesse (2). YAML hat den Vorteil, dass ich mich nicht mehr so stark um die unterschiedlichen Browserbugs kümmern muss und die CSS Layouts in jedem Browser annähernd gleich aussehen.
Eine Einführung in YAML werde ich hier allerdings nicht geben, sondern lediglich eine kurze Beschreibung wie YAML mit ASP.NET eingesetzt werden kann.

In diesem Teil geht es um die Einbindung des YAML Frameworks in die ASP.NET Umgebung.

Ich habe mich für folgende Seitenaufteilung entschieden:

• Seitenbreite: Maximum: 150em; Minimum: 50em
• Header mit einer Breite von 100%
• Horizontale Navigation unterhalb des Headers
• Linke Spalte mit einer Breite von 16em (ggf. mit Untermenü)
• Kontentbereich mit automatischer Breitenanpassung
• Rechte Spalte mit einer Breite von 16em
• Footer mit automatischer Breitenanpassung und einem rechten und linken Margin von 16em

Des Weiteren wird die Seite über eine übergeordnete Navigation („topnav“) verfügen, die den User direkt zu speziellen Seiten weiterleiten kann. YAML Kennern kommt der Aufbau sicher bekannt vor. Die Menüs selbst werde ich erst in Teil 3 einfügen.

Mein Plan, ASP.NET Theming einzusetzen, wurde gleich zu Anfang von ASP.NET ausgebremst. Und zwar weil YAML mehrere CSS Dateien voraussetzt, die alle in einer „main.css“ zusammengeführt werden („@import“). Da ich mit Themes arbeiten möchte und alle CSS Dateien im Theme Ordner Liegen sollten, werden auch alle CSS Dateien in den Header der Webseite geschrieben, auch wenn die anderen CSS Dateien in Unterordnern liegen. Gewünscht ist allerdings nur, dass die „main.css“ im Header ausgegeben wird.

Folgende Lösungen kommen hier nun in Frage:

1. Alle CSS Dateien außer die „main.css“ nicht im Theme Ordner ablegen.
2. Alle CSS Dateien außer die „main.css“ nicht im Theme Ordner ablegen und anschließen über ein virtuelles Verzeichnis reinmappen.
3. Auf die „main.css“ verzichten, die CSS Dateien durchnummerieren, damit diese in der richtigen Reihenfolge in den Header geschrieben werden.
4. Direkte Manipulation des HtmlHeaders.
5. Oder aber, wie es Adam Kahtava (3) in seinem Artikel „The Problems with Themes, Skins, and Cascading Style Sheets (CSS) in ASP.NET 2.0 – Excluding a CSS folder (Work Around #1)“ (4)  schreibt, über einen VirtualPathProvider manipulieren.

Der Einfachheit halber habe ich erstmal die Variante 3) gewählt (Die Varianten 4) und 5) scheinen nicht so einfach zu lösen zu sein. 1) und 2) sind mir für die spätere Konfiguration zu aufwändig). So habe ich alle nötigen CSS Dateien in einem Theme Verzeichnis beisammen.
Weitere Theme unabhängigen CSS Dateien des YAML Frameworks habe ich im Verzeichnis „css“, im Projektordner abgelegt. Diese Dateien werden direkt im Header der MasterPage eingebunden:
<!--[if lte IE 7]>
<link href="css/ie7hacks.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link href="css/base.css" rel="stylesheet" type="text/css" />

Direkt anschließend folgt eine JavaScript Datei (die ebenfalls zu YAML gehört) welche es älteren Internet Explorern ermöglich auf „min-width“, „max-width“, „min-height“ und „max-height“ zu reagieren:
<script type="text/javascript" src="js/minmax.js">     </script>

Hinweis:
Barrierefreie Internet Seiten dürfen auch ältere Browser nicht ausschließen!

Die HTML Struktur des Bodys wird von YAML vorgegeben, um mit jedem CSS Layout ein, für alle Browser, einheitliches Aussehen zu garantieren:

<form id="form1" runat="server">
 <div id="page_margins">
  <div id="page" class="hold_floats">
   <div id="header">
    <div id="topnav">
     [Top Navigation]
    </div>
    [Header Area]
   </div>
   <div id="nav">
    </a id="navigation">
    <div id="nav_main">
     [Main Navigation]
    </div>
   </div>
   <!-- 3-Spalten-Hauptteil -->
   <div id="main">
    <!-- #col1: Links Spalte des Inhalts -->
    <div id="col1">
     <div id="col1_content" class="clearfix">
      [Content Left Area]
     </div>
    </div>
    <!-- Left - Ende -->
    <!-- #col2: Rechte Spalte des Inhalts -->
    <div id="col2">
     <div id="col2_content" class="clearfix">
      [Content Right Area]
     </div>
    </div>
    <!-- #col2 - Rechts - Ende -->
    <!-- #col3: Hauptteil des Inhaltes -->
    <div id="col3">
     </a id="content">
     <div id="col3_content" class="clearfix">
      [Content Area]
     </div>
     <!-- IE Column Clearing -->
     <div id="ie_clearing">
      &nbsp;</div>
     <!-- Ende: IE Column Clearing -->
    </div>
    <!-- Content - Ende -->
   </div>
   <!-- Footer Start-->
   <div id="footer">
    [Footer Area]
   </div>
   <!-- Footer Ende -->
  </div>
 </div>
</form>

Wie diese Struktur jetzt allerdings am Browser ankommt, wird in der „basemod.css“ festgelegt:

DemoSite ansehen
Teil 2 downloaden

(1) http://www.yaml.de/
(2) http://www.highresolution.info/
(3) http://adam.kahtava.com/home/
(4) http://adam.kahtava.com/journal/7e992478-da0f-4ce4-bb43-3a0b58f6f3ad.aspx