Kopfhörer.net
Die Webseite unter kopfhörer.net hat ein einziges Stylesheet, nämlich die Datei screen.css im Ordner css. Das Design der Seite ist das eines klassischen Webshops, im folgenden werden hier einige der wesentlichen Designelemente aufgelistet.
Basic Styles:
Das Template der Seite teilt allen Browsern mit, dass sämtliche verwendeten Elemente ohne innen- und Aussenabstände zu verwenden sind. Dies ist oft notwendig, weil unterschiedliche Browser (vor allem der Internetexplorer von Microsoft) einzelne Elemente sonst anders darstellen würden. Der entsprechende CSS-Code lautet:
* {
margin: 0;
padding: 0;
}
Weiters wird in den Grundeigenschaften festgehalten, dass Bilder immer ohne Rahmen dargestellt werden und dass Listen ohne besonderer Hervorhebung der einzelnen Listenpunkte gezeigt werden:
img {
border: none;
}
ul, ol, li {
list-style: none;
}
Links, wenn ihnen nicht eine andere Klasse zugeordnet wird, müssen ohne zusätzlichen Auszeichnungen (Unterstreichungen etc.) auskommen:
a {
color: #000;
text-decoration: none;
}
Das Layout:
Mit einer Breite von 892 px ist die Seite eher schmal. Dies hat aber den Vorteil, dass auch Bildschirme mit einer Auflösung von 1024px x 768px den Shop ohne Beeinträchtigungen (lästiges seitwärts scrollen) zeigen können.
Der Kopfbereich (header) hat eine Höhe von 125 px und besteht aus Logo (links) und Suchmaske (rechts). Im Hintergrund befindet sich eine Grafik.
Unter dem Kopfbereich folgt ein div-Container (#frame) in dem sich wiederum mehrere kleinere und ineinander verschachtelte div-container befinden. U. A. Sind das div-container mit den Ids #menu, #wrapper und #content. Der div-container der id #content ist wiederum in drei Klassen geteilt: contentColumn-1 (links), contentColumn-2 (rechts) und contentColumn-1 (unter den beiden Kolumnen)
Den Abschluss dieses klassischen Layoputs bildet ein div-Container mit der id #footer. In ihm sind die Links zu Impressum bzw. Kontakt sowie zu den Datenschutzbestimmungen untergebracht.
Insgesamt bietet die Seite unter www.kopfhörer.net einen harmonischen und gefälligen Gesamteindruck, das Einkaufen wird durch die Gliederung der Navigation in 2 Bereiche (Kopfhörertypen und -Hersteller) erleichtert. Das gelungene Styling macht einkaufen in diesem Shop wirklich zu einem Vergnügen.