XHTML Workshop: Kapitel 5

Bis jetzt haben wir CSS und seine Eigenschaften nur leicht behandelt. Das wird sich in diesem Kapitel ändern, denn Ihr werdet viele CSS-Eigenschaften im selfHTML nachschlagen und selbst einbinden müssen. Außerdem gehen wir erneut auf die Barrierefreiheit ein.

Willkommensgruß für die Startseite

Eine Startseite ohne Text ist unüblich, deswegen werden wir ebenfalls einen verfassen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
   <title>Kapitel 5 - Startseite</title>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
   <style type="text/css">
      body
      {
         background: #d8da3d;
      }
      ul
      {
         list-style-type: none;
      }
      li
      {
         background: white;
         width: 20%;
         padding: 1em;
      }
   </style>
</head>

<body>

<!-- Navigation -->
<ul>
   <li>Home</li>
   <li><a href="biographie.htm">Meine Biographie</a></li>
   <li>Meine Hobbies</li>
</ul>

<h1>Willkommen auf meiner Homepage</h1>
<p>Dieses ist eine sehr einfache Webseite mit einer grässliche
Hintergrundfarbe, aber dafür hat sie CSS, unterstützt XHTML 1.1 und ist
barrierefrei. Deswegen wird diese Webseite auch den nächsten BIENE-Award
(gold) gewinnen.</p>

</body>
</html>

Noch sieht die Seite nicht nach viel aus, deswegen werden wir weiter am Design arbeiten.

Schriftarten und Schriftgrößen

Eine Möglichkeit verschiedene Bereiche auf einer Webseite zu gestalten ist die Verwendung von verschiedenen Schriftarten und Schriftfarben. Dazu ändern wir unser CSS wie folgt ab:

<style type="text/css">
      body
      {
         background: #d8da3d;
         font-family: Georgia, "Times New Roman", Times, serif;
         font-size: 1.0em;
      }
      ul
      {
         list-style-type: none;
      }
      li
      {
         background: white;
         width: 20%;
         padding: 1em;
      }
      h1
      {
         font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
      }
</style>

Im Web kann man sich nie sicher sein, welche Schriftarten jemand auf seinem PC hat. Gerade Linux, Windows oder Mac haben verschiedene Standardschriftarten installiert. Also hinterlegen wir direkt ein paar Schriftarten. Falls keine der angegebenen Schriften existiert, wird eine Schriftart der sogenannten generischen Schriftfamilien verwendet. Diese hinterlegen wir als letzte Option. Damit bieten wir dem Browser die Chance, eine Schriftart auszuwählen, die zumindest vom Typ her der gewünschten entspricht, falls die gewünschte nicht angezeigt werden kann.

Barrierefreiheit: Nicht "px" sondern "em"

Wir verwenden für die Schriftgröße nicht "14px" sondern "1.0em". Die Gründe hierfür liegen in der Barrierefreiheit. Sogenanntes "Pixel-genaues-Design" hat Vorteile beim Layout, da es von verschiedenen Auflösungen (z.B. 1024x768) nicht beeinflusst wird.

Zitat aus dem Leitfaden Barrierefreies E-Government

Für sehbehinderte Menschen stellen nicht verstellbare Schriftgrößen, Hintergrund und Schriftfarben die größten Barrieren im Internet dar. Die individuelle Einstellung von Farben im Browser ist für viele Sehbehinderte erforderlich, da große grell-weiße Farbflächen blenden. Bilder mit geringen Kontrasten können nicht erkannt werden. Die Farben Rot-Grün werden von einem Menschen mit Farbfehlsichtigkeit als Grau interpretiert, und sind daher schlecht wahrnehmbar. In Deutschland sind etwa 10% der männlichen Bevölkerung von Farbsehstörungen betroffen.
|…|
Um die Skalierung der Schrift zu ermöglichen, sind relative Größen (em und %) anstelle der absoluten Einheiten (pt und px) in den Style-Sheets anzugeben |…|. Die Formatierung ist nur über Style-Sheets vorzunehmen. Der font-Tag gilt laut W3C als veraltet und ist nicht mehr zu verwenden.

Diesen Aspekt der Barrierefreiheit haben wir also in unserer Seite berücksichtigt; auch die IE-Schriftgrad-Einstellungen "Sehr klein" bis "Sehr groß" zeigen Wirkung.

Eine Navigation für unsere Webseite

Design Viele Webseiten haben irgendeine Art von Navigationsmenü. Manchmal wird das über eine Kopfzeile realisiert, andere haben die Navigation links oder rechts oder eine Kombination aus mehreren Möglichkeiten.
Noch steht unsere Navigation über der Überschrift. Ich finde es schöner, wenn die Navigation auf der linken und den Text auf der rechten Seite steht. Also müssen wir die Navigation nach links schieben und den Text nach rechts. Das machen wir mit den CSS-Eigenschaften:

padding-left
position
top
left
width

<style type="text/css">
      body
      {
         background: #d8da3d;
         font-family: Georgia, "Times New Roman", Times, serif;
         font-size: 1.0em;
         padding-left: 11em;
      }
      ul
      {
         list-style-type: none;
         position: absolute;
         top: 2em;
         left: 1em;
         width: 9em;
      }
      li
      {
         background: white;
         padding: 1em;
      }
      h1
      {
         font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
      }
</style>

Wie man sehen kann, haben wurde bei UL "width" eingefügt und bei LI fehlt es jetzt. UL bestimmt jetzt die gesamte Breite des Navigations-Blocks. Sonst hätten wir folgenden Effekt:

Internet Explorer 6.0.29	Firefox 1.0	Opera 7.54

Designfehler Obwohl wir den Fehler mit verschiedenen Breiten von UL und LI schon im Vorfeld berücksichtigt haben, gibt es ein anderes Problem: Der Navigations-Block überlagert den Text. Deswegen müssen wir noch ein paar Veränderungen vornehmen.

Wenn Ihr genau wissen wollt, was die anderen CSS-Eigenschaften machen, solltet Ihr das selfHTML zu Rate ziehen. Ihr werdet die Veränderung allerdings auch anhand der Webseite sehen. Es ist auch interessant zu verfolgen, wie sich der IE (oder andere Browser) verhalten, wenn man einzelne CSS-Eigenschaften weglässt und danach wieder hinzufügt. Es lohnt sich das auszuprobieren.

Abschließende Änderungen am CSS

Wir müssen die Fehler im Design noch bereinigen. Dazu benutzen wir die Eigenschaften "margin" und "padding". Außerdem geben wir jedem Navigations-Punkt einen schwarzen Balken auf der rechten Seite. Das soll die Navigation besonders hervorheben.

<style type="text/css">
      body
      {
         background: #d8da3d;
         font-family: Georgia, "Times New Roman", Times, serif;
         font-size: 1.0em;
         padding-left: 11em;
      }
      ul
      {
         list-style-type: none;
         position: absolute;
         top: 2em;
         left: 1em;
         width: 9em;
         margin: 0;
      }
      li
      {
         background: white;
         padding: 1em;
         margin: 0.5em 0;
         padding: 0.3em;
         border-right: 1em solid black;
      }
      h1
      {
         font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
      }
</style>

Wenn man bei LI "margin" oder "padding" wegnimmt ergeben sich interessante Effekte. Ich empfehle das auszuprobieren.

Aufgabe 17

Lest alle in diesem Kapitel aufgeführten CSS-Eigenschaften im selfHTML durch. Erstellt eigene Beispiele für die folgenden Eigenschaften:

padding-left
padding
position
top
left
margin

Die Beispiele sollten möglichst kurz sein und mit dem Validator geprüft werden. Es ist auch möglich alle sechs CSS-Eigenschaften in einer Datei bzw. Webseite darzustellen.

Aufgabe 18

Findet mit Hilfe des selfHTML heraus, wie viele generische Schriftfamilien fest vordefiniert sind und welche es genau sind.

Aufgabe 19

Verändert die Farben der Hyperlinks. Dazu solltet Ihr selfHTML: :link, :visited, :hover, :active, :focus lesen. Danach lagert Ihr das CSS in eine externe Datei aus und bindet diese Datei in jede Eurer Webseiten ein (<link rel="stylesheet" … />).

Aufgabe 20

Bindet die Navigation auch in die Unterseiten ein, damit sie auf jeder Seite erscheint. Diese Aufgabe kann entweder mit Copy&Paste (einfach) oder mit SSI (schwierig) gelöst werden. Für SSI ist ein Webserver (Apache oder IIS) notwendig.

Navigation oben / Hauptnavigation

Navigation

Quicklinks