Kopieren.net
Die Seite unter der Domain kopieren.net wird durch ein einzelnes Stylsheet formatiert. In diesem Stylesheet sind alle Angaben für die Darstellung der Seite in Internetbrowsern zusammengefasst. Wie man aus dem Domainnamen leicht ablesen kann, werden auf dieser Seite unterschiedliche Produkte rund um das Thema „Kopieren“ und „Fotokopie“ angeboten.
Die Aufteilung der Seite in drei Bereiche bzw. div-container (#header, #frame, #footer) ist klassisch und wird in dieser Art auch von vielen anderen Seiten durchgeführt. Innerhalb der drei Bereiche gibt es wiederum verschiedene Klassen, die die einzelnen Bereiche definieren. So ist zum Beispiel der Bereich, in dem die einzelnen Produkte vorgestellt werden, durch folgende Klassen in der CSS Datei definiert:
.productDetailsContainer
{
background: url(../images/product-details-bg.gif) repeat-y;
height: 100%;
margin: 10px;
}
In diesem Container befinden sich alle Angaben über die Produktdetails. Der Container wird durch eine Hintergrundbild (product-details-bg.gif) geschmückt und hat an allen vier Seiten einen Abstand von 10 Pixel zum nächsten Element.
.productDetailsImage
{
float: left;
margin: 0 10px 10px 0;
width: 310px;
}
Die Bilder sind nach links hin ausgerichtet (float: left;) und haben eine Breite von 310 Pixel.
.productDetailsImage img
{
max-width: 300px;
}
Der Titel (Klasse: .productDetailsTitle) des jeweiligen Produktes ist nach unten hin mit einer dünnen, durchgehenden, hellgrauen Linie der Farbe #DCDCCC abgegrenzt. Die Schrift ist mit 1.5 em relativ groß. Die Beschreibung der einzelnen Produkte (Klasse: .productDetailsDescription) ist durch einen hellgrauen Hintergrund der Farbe # f2f2f2 – umgeben von einer dünnen, mittelgrauen, durchgehenden Linie - (border: 1px solid #DCDCCC;) definiert.
Der Preis ist gleichfalls durch eine eigene Klasse (.productDetailsPrice) festgelegt, bei der vor allem die besonders große (2.8em) und fette Schrift auffällt.
Insgesamt ist die Seite klassisch gestaltet und die Trennung von Inhalt und Design ist konstant durchgehalten. Alle Designelemente sind konsequent in die CSS Datei verpackt, dadurch wird ein klarer und übersichtlicher Quelltext erzeugt.