Modebrands.net
Modebrands.net umfasst ein Portal, welches sich mit Modelabels verschiedenster Kategorien beschäftigt. Ein auffallend schlicht gehaltenes Design ermöglicht das Konzentrieren des Besuchers auf das Wesentliche. Ein angenehmes sich wiederholendes Hintergrundmuster verleiht der Webseite eine sehr warme Wirkung.
Über das externe Stylesheet style.css werden sämtliche Formatierungen für die Webseite festgelegt, was den eigentlichen HTML-Quelltext schön schlank und übersichtlich hält.
Der Aufbau der Webseite ist klar strukturiert. Oben befindet sich der Header mit den Maßen 960×130px. Das Modebrands Portal ist also für eine Bildschirmauflösung von mindestens 1024×768 Pixel optimiert. Das Logo Mode Brands in Form eines Barcodes steht links. Die Überschrift <h1> liegt direkt im Header, ist jedoch für den User unsichtbar. Im CSS-Code wird die Überschrift wie folgt formatiert:
#title-area #title { color: #333333; font-size: 36px; /*font-family: Georgia, Times New Roman, Trebuchet MS;*/ font-weight: normal; margin: 0; padding: 0; text-decoration: none; line-height: 42px; }
Unter dem Header folgt die horizontale Menüleiste mit einer Höhe von 38px. Darunter schließt sich der zweispaltige Hauptinhalt an. In der rechten Spalte befindet sich auf einer Breite von 338 Pixeln Google-Adsense Werbung, darunter sind, wiederum in zwei Spalten aufgeführt, die Links zu den unterschiedlichen Modemarken (Mode Brands), die auf dem Portal beschrieben werden, platziert. Diese sind als unsortierte Listen formatiert.
Der linke Bereich – der Haupt-Container – nimmt mit einer Breite von 598px den größten Raum ein. Dieser steht im HTML-Quelltext über der rechten Randleiste und wird mittels #content {float: left;} links neben der Randleiste dargestellt.
Auf der Startseite werden News zu aktueller Mode, Trends und Schuhen angezeigt. Diese sind in der Regel so formatiert, dass ein Bild links angeordnet ist, welches vom kurzen Beschreibungstext rechts umflossen wird. Die einzelnen verschiedenen Textblöcke werden durch eine horizoontale gepunktete Linie voneinander getrennt ( border-bottom: 1px dotted #AAAAAA;). Über den kurzen Texten findet sich eine Überschrift <h2>.
Da Links generell unterstrichen werden, wird auch diese Überschrift, da immer ein Link zum jeweiligen Artikel dahinter steckt, entsprechend dargestellt: a, a:visited {color: #006699; text-decoration: underline;}
Überschriften sind generell in Arial gehalten. Außer <h2> erscheint in der Serifenschrift Georgia.
Die Seite wird letztendlich über einen Footer (Höhe: 36px) „zusammengehalten“, der den Link zum Impressum und einen Copyright-Hinweis enthält. Zum Beispiel auf Krawatten-binden.net
Es bleibt abschließend zu bemerken, dass zum schnellen Auffinden der aktuellen Neuigkeiten rund ums Thema Mode, kombiniert mit dem schlichten und klaren Layout der Seite, das Portal optimal geeignet ist.