About

About. Für mehr Informationen klicken Sie die Icons. Diese sind bei Bedarf entsprechend durch Sie zu verlinken. Wir haben es als Beispiel wieder direkt auf diese Startseite verlinkt. Id vel voluptua invidunt, euismod deseruisse ei eam, eam ex salutandi efficiendi. Alia cibo nihil eum no. Illum nobis integre eos ne, ex mei augue quaestio, et salutandi referrentur eos.

About 1

Lorem ipsum dolor sit amet, meliore consectetuer definitiones in per. Eu suas vituperata ius, errem legendos cu pro. Vis dicant principes ei.

About 2

Scripta legimus cum ad, viris laboramus voluptaria eu nam. Has nostro diceret appareat ut, invidunt prodesset dissentiet sed ei, nostro eligendi sit.

About 3

Ad mel laudem offendit, ei vis dignissim forensibus, mea et iuvaret labores scripserit. Iudico doctus sadipscing te vis, an natum atomorum honestatis.

About 4

Rebum essent no vim. Eam harum mandamus quaerendum in, at his natum nemore meliore. Ut option dissentias sed, iisque perpetua at eos.

Informationen

Template

Dieses Template heißt ' ZEN '. Die Seiten 'Home' (diese Seite) sowie die Seiten beim Aufklapp-Menü, welche Sie bei 'Untermenü-A' und 'Untermenü-B' finden (Primus bis Octavus), sind bereits als Beispiel verlinkt. Bitte klicken Sie diese, um zusätzliche Infos zu erfahren und zu sehen wie die Unterseiten angelegt sind.

Das Menü

Das Aufklapp-Menü ist responsive und nur per CSS erstellt. Es funktioniert ganz ohne Javascript und ist außerdem 'touch-friendly', d.h. es läuft auch auf mobilen Geräten. Hinweis dazu: Normalerweise wird die Aufklapp-Funktion ja per Mausberührung (hover) getätigt. Aber mobile Geräte kennen eben keine Maus sondern nur Touch. Unsere Lösung beruht auf der sog. 'Toggle-Funktion per Checkbox-Hack'.

Bei größeren Auflösungen wird das Aufklapp-Menü mit 6 horizontalen Buttons dargestellt. Bei mobilen Auflösungen erscheint nur der sog. Hamburger Menü-Button (3 Striche, quer als Menü-Symbol). Um das Menü dort zu öffen, klicken Sie bitte auf den Hamburger Menü-Button. Aus den 6 Buttons wird bei mobilen Auflösungen ein sog. Akkordeon-Menü mit vertikalen Buttons, welches sehr splatzsparend ist.

Zitate und Anderes

Auf jeder Seite gibt es ein anderes Zitat im Kopfbereich. Das macht jeden Link bzw. jede Seite einzigartig und interessant. Möchten Sie vielleicht auch auf jeder Seite wechselnde Fotos im Kopfbereich? ...OK... Geht auch. Schauen Sie für das Beispiel auf der Seite 'Octavus' (index8.html) vorbei.

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

Bei den Fotos im Inhaltsbereich haben wir uns für zwei Techniken entschieden, nämlich die CSS-Techniken mit'display:Inline-Block' sowie 'float'. Wir beschreiben es Ihnen hier in einem Tutorial auf der Seite 'Quartus' (index4.html). Noch eine kleine Info zu den Fotos, diese haben wir hier mit einem leichten Wasserfarben-Effekt (per Grafikprogramm) versehen. Sie dürfen aber natürlich auch ihre eigenen Fotos benutzen.

Strukturierte Abschnitte

Hier auf der Startseite sehen Sie im Inhaltsbereich mehrere Abschnitte, die farbig bzw. durch gekachelte Hintergrundgrafiken getrennt sind. Wie wir diese angelegt haben und wie Sie auch mehr oder weniger Abschnitte anlegen können, z.B. den ganzen Inhalt in nur einen einzigen Abschnitt packen können (so wie wir es auf den Unterseiten auch getätigt haben, erklären wir Ihnen hier auf der Seite 'Quartus' (index4.html)
© 2025 | Z E N