Notebook
Die Seite unter notebook.org basiert auf einem individuell programmierten Contentmanagementsystem. Sie nutzt eine CSS Datei mit dem Namen screen.css, diese Datei ist im Ordner „templates“ abgelegt. In der Datei screen.css sind sämtliche Eigenschaften wie Maße, Farben und Schriften der Seite definiert.
Das Layout von notebook.org ist klassisch aufgebaut: Ein Container (#page) wird in drei Bereiche geteilt: Oben der Kopfteil der Seite (#header) mit allgemeinen Informationen zur Seite. Logo, mehrere Produktbilder sowie die Navigation - soweit es die Peripheriegeräte betrifft - sind dort untergebracht. Der Header ist 125px hoch. Dann folgen im Mittelteil die Bereiche #sidebar - definiert durch {float: left; width: 390px;} und #content - definiert durch {float: right; width: 790px;}. Die Seite wird – wiederum klassisch durch einen Fußbereich abgeschlossen. In der CSS-Datei ist dieser abschließende Bereich so definiert: #footer {
clear: both; margin: 10px 10px 10px 200px; padding: 10px; background: #fff; }
In der Sidebar, die mit 390px Breite relativ umfangreich ausfällt, ist die Detailnavigation untergebracht. Die Besucher können dort unter verschiedenen Produkten bzw. Herstellern wählen.
Im Bereich, der durch #content vorgegeben ist, werden dagegen die einzelnen Produkte präsentiert.
Die Auszeichnung der Links erfolgt in der Navigation des Headerbereiches durch Hintergrundbilder: Pro Produktgruppe werden unterschiedliche Klassen definiert (zum Beispiel navItem-1 für Monitore oder navItem-2 für Drucker.) Die Links dieser Klassen werden dann durch einzelne Hintergrundgilder unterschieden. Zum Beispiel {background: 5px url(../images/monitore.gif) no-repeat;} in der Klasse navItem-1 (Monitore) oder {background: 5px url(../images/drucker.gif) no-repeat;} in der Klasse navItem-2 (Drucker).
In der Sidebar werden die Links dagegen durch verschiedene CSS-Eigenschaften (color, ont-weight, ext-transform etc.) definiert: .menu li a {color: #18427C; font-weight: bold; text-transform: uppercase; text-decoration: none; background: #EFF6FF 20px;}
Insgesamt handelt es sich um ein klassisches Layout für ein modernes Shopsystem.