Home Welcome
Ein One-Pager
Dies ist ein responsive One-Pager. Auch bezeichnet als Single-Page-Website. Im Prinzip bedeutet es, das die Webseite nur aus einem einzigen Webdokument, also nur einer HTML-Seite besteht. Alles läuft also auf einer Seite ab. Klicken Sie die Links Home, Primus, Secundus, Tertius, Quartus, Quintus und Sextus und sehen Sie wie innerhalb dieser Seite die verschiedenen Sektionen angesprungen werden.
Smooth Scrolling
Diese Sprungziele werden sanft und sichtbar angesteuert. Das sogenannte 'Smooth Scrolling', dient der Übersichtlichkeit und besseren Orientierung, denn man registriert also auch optisch, wohin man gelangt, im Gegensatz zum normalen HTML-Anker.
Die Box-Fenster
Im Fuss-Bereich öffnen sich die Links Impressum, Datenschutz und Disclaimer innerhalb dieser Seite ohne eine neue Seite bzw. ohne ein neues Browserfenster zu öffen, eben ganz so, wie es für einen One-Pager im strengen Sinne üblich ist. Dies wurde realisiert per div-Boxen, welche sich per CSS-Toogle-Funktion öffnen und schließen lassen.
Primus About Us
Fusce fermentum. Nullam cursus lacinia erat. Praesent blandit laoreet nibh. Amor convallis metus id felis luctus adipiscing. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus.
A Short Notice. Lorem ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus.
Lorem ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.
Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor.
Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam.
Secundus Gallery
Hier ist unsere Foto-Gallerie. Es ist das Jquery-Script namens Lightbox. Klicken Sie auf die Bilder. Im sich öffnenden Fenster können Sie alle Bilder der gesamten Kollektion per Pfeil links bzw. Pfeil rechts durchklicken.
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.
Tertius Technik
Responsive Webdesign
Responsive Webdesign 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.
Wie testet man Responsive?
Hier zwei gute Möglichkeiten ein responsives Layout zu testen. Laden Sie zunächst wie gewohnt unsere Vorlage ganz normal herunter, entpacken die zip-Datei und rufen dann die Startdatei index.html in ihrem Browser auf.
Bei nachfolgend genannter Möglichkeit [1] rufen Sie den Browser Firefox auf, bei der zweiten Möglichkeit [2] ist die Browserwahl egal, es funktioniert in jedem Browser, nehmen Sie Ihren Lieblingsbrowser.
[1] Testen mit Firefox-Tools
Und zwar soll mit sogenannten Entwicklertools gearbeitet werden. Das Gute ist, der Browser hat diese gleich mit an Bord, man braucht also nicht auf externe Tools zurückgreifen. Richtig gut gemacht, das Tool.
[2] Der schnelle Weg
Noch schneller und einfacher, aber eher für einen ersten allgemeinen Überblick gedacht, testen Sie wie folgt: Wir gehen davon aus, daß Sie Ihre größte Bildschirmauflösung auf dem Desktop-PC eingestellt haben.
Minimieren Sie nun das Browser-Fenster in Ihrem Lieblingsbrowser und ziehen Sie dann das Browser-Fenster mit gedrückt gehaltener Maustaste ganz langsam von rechts nach links in der Breite immer schmaler zusammen und dann wieder umgekehrt von links nach rechts wieder ganz auf.
Achten Sie darauf, wann das Layout umbricht, zum Beispiel von zwei-spaltig auf ein-spaltig oder Objekte sich in der Größe verändern.
Quartus Kontakt
Box 'Kontakt'. Wir haben hier die Font-Icons als Hintergrund-Grafik eingebaut, sieht man auch nicht so oft, denn die Font-Icons sind ja Schriftzeichen. Es hat so ein bisschen den Look einer Visiten-Karte und macht einen kreativ-sachlichen Eindruck.
- Mustermann, Thompson & Partner GmbH
- Sample-Muster-Street No. 232
- 12345 Big City Of Nowhere
- Phone: (0000) 0000000-50
- Mobile: (+49) 0000-1234567
- Mobile: (+49) 0000-7654321
- Fax: (0000) 7654321-4141
- MO - FR:10.00 - 18.00 Uhr
- DO:09.00 - 13.00 Uhr
- SA:09.00 - 16.00 Uhr
Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus.
Quintus Idee
Labortis Lactus
Phasellus blandit leo ut odio. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In auctor lobortis lacus. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Vestibulum ullamcorper mauris at ligula.
Documenta Moderna
Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse platea dictumst. Curabitur at lacus ac velit ornare lobortis.
Vestibulum ante
Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu.
Tristique
Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Sed hendrerit. Morbi ac felis.
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
Sextus Information
Bella Terra
Vestibulum dapibus nunc ac augue. Curabitur vestibulum aliquam leo. Praesent egestas neque eu enim. In hac habitasse platea dictumst. Fusce a quam. Etiam ut purus mattis mauris sodales aliquam. Curabitur nisi. Quisque malesuada placerat nisl. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus.
Eine Kurze Notiz..
Die Fotos in dieser Vorlage sind von https://picjumbo.com/ .
Wir haben diese responsive angelegt. Gerne können Sie natürlich auch Ihre eigenen Fotos verwenden.
Nachstehend hier im Block als Beispiel eine kleine Gallerie verlinkt (Klicken Sie die folgenen Fotos) mit 6 Pics.
Die Icons
Icons sind kleine grafische Symbole. Font-Icons sind sozusagen grafisch wirkende Schriftzeichen, die aber wie normaler Text behandelt werden (denn es sind ja Textzeichen) und damit eine schnellere und leichtere Formatierung gegenüber grafischen Icons per Bildformat (z.b. gif, jpg oder png) ermöglichen.
Viele weitere Icons sind möglich, denn die sehr verbreitete kostenlose Icon-Schrift vom Anbieter
"Fontawesome" wird ja durch einen entsprechenden Link im Kopfbereich des Templates aufgerufen. So fügen Sie ggfls. weitere Icons hinzu oder ersetzen die vorhandenen.
Wir haben die Icons schon für Sie angepasst. Denn ohne weitere Bearbeitung sind die Font-Icons immer genauso groß und erscheinen in gleicher Farbe wie die aktuell verwendete Schrift für den Text.