A Guide To Be Happy How To Feel Real Good!
Home

This is Home.

Das Layout

Das Design

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.


Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Picture of the month

Romantische Herz-Utensilien.

Vero Eos

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Agua liquid dolor sit amet. Magna dias es bella terra mi sol.

Social Media



Kontakt

Tel: +49 089 12345 67
Fax: +49 089 12345 68
infokontaktmail@muster.de

Address - Location

Professor Dr. Archibald Robertson
Roxanne Street No. 12
Great Britain - London
© 2040 A Guide To Be Happy