Home
Schmitz & Co. Evers GmbH
Unser Programm
Highlights sind hier die Fotos im Inhaltsbereich, die sowohl ohne Bildtext als auch mit Bildtext angelegt sind sowie die Möglichkeit beides miteinander zu kombinieren.
Darüberhinaus haben wir noch eine 'Lightbox-Gallery' (Klick auf einem Bild läßt alle weiteren Bilder der Gallerie komfortabel innerhalb des sich öffnenden Fensters komfortabel durchklicken) abgerundet.
Der Bildwechsler
Mehr zum CSS-Bildwechsler, welcher oben im Kopfbreich jeder Seite die 8 Fotos tauscht und wie es auch möglich ist, diese Foto-Schau auf einer Seite rückwärts und auf einer anderen Seite vorwärts ablaufen zu lassen, erfahren Sie auf der Seite
Quartus (index4.html)
Die Sidebar
Für diejenigen, die mehr Links benötigen, haben wir in der "Sidebar" rechts ein zweites Menü eingebaut, welches beliebig erweiterbar ist. Auf den einzelnen Seiten haben wir den Inhalt der Sidebar mal verschieden angelegt, so gibt es dort mal 2 Boxen, 4 Boxen, 6 Boxen oder 8 Boxen. So haben Sie die Möglichkeit sich für ein Beispiel zu entscheiden oder eben auch alle zu nutzen.
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.
In Bed. Literare. Dolor sit amet, facilis nominati philosophia sit ei, eos nonumy lobortis expetendis te.
Lorem ipsum dolor sit amet, dicunt iuvaret usu ad, vix urbanitas sententiae no. Ad has odio feugiat, quo id nibh.
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.
Pictures Amore. Dolor sit amet, facilis nominati philosophia sit ei, eos nonumy lobortis expetendis te.
Lorem ipsum dolor sit amet, dicunt iuvaret usu ad, vix urbanitas sententiae no. Ad has odio feugiat.
Pictures Literare. Dolor sit amet, facilis nominati philosophia sit ei, eos nonumy lobortis expetendis te. Particulum Eruptus est.
Die Info
Lightbox Picture Gallery
Sie finden die Lightbox-Gallery auf der Seite
Quartus (index4.html). Wir erklären dort auch, wie Sie das Lightbox-Script auf alle Fotos anwenden können, wenn Sie es wollen.
So funktioniert diese Foto-Schau: Nach Klick auf einem Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild X von Anzahl X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Es ist ein Jquery-Script.
Tolles Feature: Nachdem Sie ein Bild geklickt haben, fahren Sie mit der Maus über die rechte oder linke Fotohälfte des Bildes. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf dieses immer weiter zum nächsten bzw. vorangehendem Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen. Zum Schließen des Fenster klickt man auf das 'Schließen-Symbol' oder irgendwo ausserhalb des Fensters.
Die Original-Lightbox
Hier einmal der Link zur originalen
Lightbox-Gallery. Dort finden Sie bei Bedarf auch unter '
Options' noch verschiedene Möglichkeiten der Einstellung. Anhand der guten, weil einfachen Beispiele (Examples), erkennen Sie sehr schnell das Prinzip der Gallerie. Außerdem können Sie somit auch besser nachvollziehen, wie wir die Fotos bei unserer Gallerie responsive angelegt haben, denn diese responsive Anordnung ist ja nicht automatisch im genannten Script der Lightbox enthalten.