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. Bitte klicken Sie diese Links, denn sie dienen auch als Beispiel für den Einbau verschieden großer Bildgruppen.

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 drei gute Möglichkeiten ein responsives Layout zum 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 Internet Explorer bzw. Firefox [2] auf, bei der dritten Möglichkeit [3] ist die Browserwahl egal, es funktioniert in jedem Browser, nehmen Sie Ihren Lieblingsbrowser.

Und zwar soll bei [1] und [2] 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.

Testen mit IE-Tools

Der Browser Internet-Explorer ab der Version 11 hat Entwicklertools an Bord. Zum Aufrufen klicken Sie auf Ihrer Tastatur die Funktionstaste F12. Alternativ dazu können Sie auch bei eingeschalteter Menüleiste unter Extras diese Tools anklicken.

Im eingeschalteten Entwicklertools-Bereich wählen Sie dann den Reiter "Emulation". Dann können Sie unter Anzeige im Feld "Auflösung" unterschiedliche Auflösungen anklicken.

Testen mit Firefox-Tools

Richtig gut gemacht, das Tool. Wir selber testen übrigens auch damit. Klicken Sie im Menü des Browsers Firefox den Button Entwicklerwerkzeuge. Wählen Sie dann die Option "Bildschirmgrößen testen".

Toll ist bei diesem Testwerkzeug, das sich die jeweilige Auflösung leicht per Klick (Button mit kleinem Pfeil) drehen läßt. So hat man einen guten Überblick über den Portrait- und Landscapemodus, um das Verhalten von Smartphone und Tablet zu prüfen (Hoch-und Querformat).

Mittlerweile hat Firefox diesen Tester um noch eine weitere Option erweitert, nämlich die Möglichkeit verschiedene Marken-Geräte zu testen. Das kann aber auch leicht verwirrend sein, da es ja auch etliche Zwischengrößen bei den Geräten gibt und ja auch niemand wohl bei jeder wechselnden Testauflösung alle Geräte durchklicken möchte.

Eine Möglichkeit es übersichtlicher zu gestalten ist, das Sie im Firefox-Tester unter 'Liste anpassen' eigene Geräte-Profile anlegen und zwar Standard-Größen (die ja auch jeweils umschaltbar sind in Hochkant und Quer-Modus) , auf jeden Fall: 320x480, 360x640, 600x800, 768x1024. Unter der Rubrik 'Custom' sehen Sie dann Ihre Profile. Hier ein Foto, welches zeigt, wie es aussehen könnte.

Der schnelle Weg zum Testen

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. Sie benötien hierzu auch keine Entwickler-Tools.

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

Viele weitere Icons sind möglich bzw. zu ersetzen, denn die wohl beliebteste und verbreiteste Icon-Schrift "FontAwesome" ist ja bereits in dieser Vorlage installiert. So fügen Sie ggfls. weitere Icons hinzu oder ersetzen die vorhandenen.

Die Icon-Schrift kann alternativ auch leichter durch einen entsprechenden Link im Kopfbereich der Seite aufgerufen werden, die Schrift wird dann serverseitig geladen, sehen Sie hierzu die Erklärungen auf der Seite des Anbieters.

Dies mag für manche der leichtere Weg sein, falls man ein Versions-Update aktualisieren möchte. Nachteil: Ohne Internet-Verbindung wird kein Icon angezeigt.

Box-Fenster Impressum

Die Information

Dies ist die Seite 'index1.html'.

Weite Welt

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.

Der Aufbruch

Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht - ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik.




Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.

Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy.




Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.

Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mißbrauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch.

 

Box-Fenster Datenschutz

Datenschutz 01

Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine.

Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet. Ich könnte jetzt nicht zeichnen, nicht einen Strich, und bin nie ein größerer Maler gewesen als in diesen Augenblicken.

Datenschutz 02

Wenn das liebe Tal um mich dampft, und die hohe Sonne an der Oberfläche der undurchdringlichen Finsternis meines Waldes ruht, und nur einzelne Strahlen sich in das innere Heiligtum stehlen, ich dann im hohen Grase am fallenden Bache liege, und näher an der Erde tausend mannigfaltige Gräschen mir merkwürdig werden; wenn ich das Wimmeln der kleinen Welt zwischen Halmen, die unzähligen, unergründlichen Gestalten der Würmchen, der Mückchen näher an meinem Herzen fühle, und fühle die Gegenwart des Allmächtigen, der uns nach seinem Bilde schuf, das Wehen des Alliebenden, der uns in ewiger Wonne schwebend trägt und erhält; mein Freund!

Datenschutz 03

Wenn's dann um meine Augen dämmert, und die Welt um mich her und der Himmel ganz in meiner Seele ruhn wie die Gestalt einer Geliebten - dann sehne ich mich oft und denke : ach könntest du das wieder ausdrücken, könntest du dem Papiere das einhauchen, was so voll, so warm in dir lebt, daß es würde der Spiegel deiner Seele, wie deine Seele ist der Spiegel des unendlichen Gottes!

 

Box-Fenster Disclaimer

Allein in der Dunkelheit

Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mitten im übel beleumundeten Hafenviertel? Gerade jetzt, wo er das Ding seines Lebens gedreht hatte und mit der Beute verschwinden wollte!

Hatte einer seiner zahllosen Kollegen dieselbe Idee gehabt, ihn beobachtet und abgewartet, um ihn nun um die Früchte seiner Arbeit zu erleichtern? Oder gehörten die Schritte hinter ihm zu einem der unzähligen Gesetzeshüter dieser Stadt, und die stählerne Acht um seine Handgelenke würde gleich zuschnappen? Er konnte die Aufforderung stehen zu bleiben schon hören.




Gehetzt sah er sich um. Plötzlich erblickte er den schmalen Durchgang. Blitzartig drehte er sich nach rechts und verschwand zwischen den beiden Gebäuden. Beinahe wäre er dabei über den umgestürzten Mülleimer gefallen, der mitten im Weg lag.

Er versuchte, sich in der Dunkelheit seinen Weg zu ertasten und erstarrte: Anscheinend gab es keinen anderen Ausweg aus diesem kleinen Hof als den Durchgang, durch den er gekommen war. Die Schritte wurden lauter und lauter, er sah eine dunkle Gestalt um die Ecke biegen. Fieberhaft irrten seine Augen durch die nächtliche Dunkelheit und suchten einen Ausweg. War jetzt wirklich alles vorbei?