Black & White Project

Das Layout

Schwarz & Weiß

Die Grundkonstruktion ist Black & White unter Berücksichtigung von CSS Boxschatten, CSS-Transparenz und CSS-Farbverläufen um Tiefe zu erzeugen, denn nur reines Schwarz und Weiß würde das Auge ermüden.

Das Haupt-Menü

Die Pfeile im Menü sind übringes Font-Icons, welche hier mit dem Pseudoelement ":before" angelegt wurden. Vorteil: Mit nur einer Änderung in der CSS-Datei wechseln Sie bei Bedarf die Menü-Icons in allen HTML-Seiten auf einmal. Übrigens: Bei Mausberührung erfolgt ein Icon-Tausch. Das Hauptmenü (Home bis Sextus) haben wir bereits beispielhaft verlinkt.


Gallery Ipsum 01



Lightbox Info

Lightbox Picture Gallery

Auf den Seiten und Home (also direkt hier auf der Startseite) und Quartus haben wir für Sie eine Bilder-Gallerie eingebaut. Einmal mit Bildtext (Fotostrecke-Text) und eimal ohne. Die Anzahl der Bilder in der Gallery ist übrigens beliebig. Fahren Sie mit der Maus über die Links und klicken Sie ein Foto.

Lightbox auf allen Fotos

Sie könnten das Lightbox-Script auch auf alle Fotos anwenden, wenn Sie möchten. Die entsprechenden Änderungen dazu sind nur in der HTML-Datei zu tätigen, denn das Script ist ja bereits eingebaut. Mehr Infos dazu auch hier bei Quartus.


Die Technik

Responsive Webdesign

Responsive Webdesign (RWD) ermöglicht eine Anpassung bzw. Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Dazu werden per CSS-Media Queries die verschiedenen Bildschirmgrössen abgefragt. Außerdem wird beim Layout verstärkt mit Prozent-Angaben gearbeitet.

Responsive testen.

Hier auf der Seite index1.html (Primus) nennen wir Ihnen gute Möglichkeiten ein Responsive-Layout in verschiedenen Auflösungen zu testen, denn nicht jeder hat ja diverse Smartphones und Tablets zu Hause.
 
Prof. Sir Michael Francis Stevenbridge
Monument Tower Street No. 12
Great Britain - Nottingham

Telephone 1: +49 089 12345 67
Fax: +49 089 12345 68
Mobile 1: (+49) 0000-1234567
info-mail@mustermail.de