Informationen

Template

Dieses Template heißt In The Office. Auf jeder der verlinkten Seiten gibt es im oberen Bereich ein anderes Foto zu sehen. Das macht jeden Link sozusagen unverwechselbar und schafft gleichzeitig Struktur. Büro-Arbeit ist anstrengend, denn Konzentration, Stress und ständiges Nachdenken ist zum Teil ebenso energieverbrauchend wie körperliche Arbeit. Nicht umsonst wird ja auch 'Schach' zu den Sportarten gezählt. Im richtigem Team und mit einem durchdachtem Konzept macht Büro-Arbeit aber Spaß und fördert das Selbstbewußtsein.

Oberhalb jeder H2-Überschrift sehen sie eine Linie mit einem Font-Icon, hier eine Büroklammer. Dieses Font-Icon können Sie auch durch ein beliebig anderes Font-Icon ersetzen, denn die Font-Icon-Schrift 'Font Awesome' ist ja bereits installiert. Dies geschieht alleine über die CSS-Datei format.css und die Änderungen dort gelten dann automatisch für alle HTML-Seiten.

Das Menü

Um das Menü zu öffen, klicken Sie bitte auf den sog. Hamburger Button (3 Striche, quer). Dieser Button ist ja mittlerweile als Menü-Symbol überall anerkannt. Hier ist das Besondere, das sich dieser Menü-Button nicht nur auf mobile, sprich kleinere Bildschirmauflösungen bezieht, sondern auch auf alle anderen Auflösungen, z.b. Desktop-PC. Das macht es spannend und dient natürlich auch Design-Zwecken. Klicken Sie auf die Links im Menü (Primus bis Sextus) und Sie sehen wie die Seiten verlinkt sind und erfahren noch einige Informationen.

Responsive Webdesign

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.Somit kann man auch auf das Hoch- oder Querformat eines mobilen Gerätes reagieren. Außerdem wird beim Layout verstärkt mit Angaben in Prozent gearbeitet. So testen Sie: 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. Diese Responsive-Vorlage verwendet keinerlei Javascript.

Die Technik

Einbau der Bilder

Auf der Startseite, die Sie gerade betrachten, haben wir mal absichtlich im Inhaltsbereich keine Bilder eingebaut. So wie ja auch - passend zum Thema 'Office/Büro' ein Firmenbrief ja auch keine Fotos enthält. Aber klar lassen sich auch hier nach Belieben Bilder einbauen. Die einzelen Seiten von 'Primus bis Sextus' zeigen Ihnen den Einbau der Bilder in unser GRID-System, sprich in 1er, 2er, 3er, 4er und 5er-Gruppen. Auf der Seite Quartus' (index4.html) finden Sie noch die eingebaute Jquery-Lightbox-Gallery mit Erklärungen, wie Sie diese, nur falls Sie es möchten - auch auf alle Fotos anwenden können.

Die Transparenz

Genau genommen muss man hier von einer Teil-Transparenz sprechen. Damit Text im Kopfbereich (hier der Homepagename) sowie auch im Fussbereich (Kontakt, Adresse, Links) auch mit dahinterliegendem Foto noch gut zu lesen ist, liegt über dem jeweiligen Foto noch ein Transparenz-Filter. Per CSS-rgba. Falls Sie Ihre eigenen Fotos einsetzen wollen könnten diese Erläuterungen auf der Seite Sextus' für Sie von Interesse sein.