kaffeevollautomat.de
Unter der Domain kaffeevollautomat.de befindet sich eine Seite, die sehr viele unterschiedliche Produkte rund um das Thema Kaffee und Kaffeezubereitung anbietet. Die Seite, die in ihrem Aufbau anderen typischen Onlineshops gleicht, beruht technisch auf einer Kombination von php-Scripten, die Informationen aus einer mySQL-Datenbank abfragen. Gestaltet wird diese Seite durch ein CSS-Stylesheet – screen.css – das in den Verzeichnissen templates/css untergebracht ist. In diesem Stylesheet werden alle optischen Details der Seite festgehalten und die Browser, die diese Seite darstellen, erhalten die benötigten Informationen zur korrekten Anzeige von Kaffeevollautomat.de .
Das Stylesheet screen.css teilt sich in mehrere, unterschiedliche Bereiche auf. In der Abteilung „Layout“ werden die wesentlichen Größen der wichtigen Layoutelemente definiert. Hier ein Überblick über die wesentlichen Teile:
#page {width: 998px; margin: 0 auto; text-align: left;}definiert die Breite der Seite (998 Pixel) das Verhältnis zum Fensterrand (zentriert, gleicher Abstand nach links und rechts) und Textausrichtung (linksbündig)
#header {height: 116px; background: url(../images/header-bg.jpg) no-repeat;}definiert den Kopfbereich der Seite: Die Höhe beträgt 116 Pixel, das Hintergrundbild header-bg.jpg wird nur ein einziges Mal angezeigt ((no-repeat).
#headerLogo und headerSearch zeigen die Positionen des Logos und des Suchfeldes an wogegen #nav die obere Navigation im Kopfbereich festlegt.
Den mittleren Teil des Layouts bilden die drei Abteilungen mit den IDs #content, #menu und #sidebar. #menu bildet mit einer Breite von 194 Pixel ein angenehm zu bedienendes, seitliches Menü. Durch float: left; wird es im linken Teil der Seite dargestellt. #content ist diejenige Abteilung in der die wesentlichen Inhalte der Seite stehen. Sie ist mit einer Breite von 780 Pixel (width: 780px;) ausreichend groß bemessen, kann aber dennoch auch von kleineren Bildschirmen dargestellt werden. Durch den CSS-Befehl float: right wird sichergestellt, dass sich der Contentbereich am rechten Teil der Seite befindet. Der Bereich #sidebar wird im stylesheet zwar definiert, wird aber im verwendeten Layout dennoch nicht genutzt.
Abgeschlossen wir der Bereich „Layout“ mit der Definition von #footer {color: #BCA88E; background: #471104; } Dieser CSS-Befehl legt Schriftfarbe (hellgrau) und Hintergrundfarbe (braun) in diesem Bereich fest.
Insgesamt ist die Seite unter www.kaffeevollautomat.de ein Beispiel für einen klassisch gestalteten, übersichtlichen und gut programmierten Webshop.