Responsive Webseiten-Vorlage

Menü≡

Startseite

Ein Muster-Layout für Ihre neue Website?

Hier sehen Sie eine schlichte, klar gegliederte und responsive Webseiten-Vorlage ohne optischen Schnickschnack. Dieses Muster-Layout eignet sich für Webseiten mit den Schwerpunkten Text, Tabellen, Listen und Bilder(galerien). Alle benötigten Elemente (HTML, CSS, Javascript) sind in der Layout-Vorlage enthalten. Es werden keine Elemente von fremden Servern eingebunden, auch nicht von Google™. Von dieser Webseiten-Vorlage werden keine Cookies gespeichert. Großen Wert lege ich auf kurze Ladezeiten und schnellen Seitenaufbau. Dann freuen sich Ihre Besucher und die Suchmaschinen gleichermaßen.

Zur Seitenstruktur: Unterhalb der Kopfzeile wird auf breiten Bildschirmen links das Menü und rechts der Inhalt der Seite angezeigt; darunter folgt die Fußzeile. Die (suchmaschinenfreundliche) Reihenfolge im HTML-Quelltext ist: Kopfzeile, Inhalt, Menü, Fußzeile. Mit CSS3-flexbox-Eigenschaften wird die Reihenfolge von Inhalt und Menü zur Bildschirm-Anzeige umgedreht. Auf Wunsch kann Text (bei ausreichender Bildschirmbreite) auch in zwei Spalten dargestellt werden (CSS3-Mehrspalten-Layout) und wird damit leichter lesbar. Auf breiten Bildschirmen ist die Navigation sticky angeordnet: während im Seiteninhalt gescrollt wird, bleibt das Menü ständig sichtbar. Auch eine zweite Menüebene ist möglich: die zweite Ebene klappt nach rechts aus.

Das Layout ist responsiv: Eine CSS3-Medienabfrage mit Umschaltpunkt bei 700px sorgt für eine besucherfreundliche Anzeige auf mobilen Endgeräten einschließlich Smartphones. Dann rutscht das Menü von der linken Seite nach unten.

Die Inhalte werden in PHP-Dateien gespeichert. Es wird keine Datenbank verwendet.

Musterseiten als HTML-Kopiervorlagen, fertige CSS-Klassen

Viele kopierbereite HTML-Beispiele für text- und bildorientierte Webseiten einschließlich fix und fertiger CSS-Klassen sind in meiner Layout-Vorlage enthalten. Zum Verständnis sind zumindest Grundkenntnisse in HTML und CSS erforderlich.

Eine kurze Übersicht der HTML-Beispiele: Textabsätze und Textgestaltung, Textumfluß um ein Bild, vorformatierte Textblöcke (Quelltext), Zitatblock nach Forumsart, ausgehende Links setzen, Text statt Grafik verwenden, Aufzählungslisten, Datentabellen, Akkordeons, Spaltensatz, Bildergalerien mit und ohne Untertexten, Seite mit Einzel-Bild, Formular-Layout, HTML-Seitenübersicht ... Die Musterseiten mit den Kopiervorlagen werden auf den folgenden Seiten ausführlich beschrieben.

Die Webseiten-Vorlage enthält vier Farbschemata (Designs), unter denen Sie wählen können. Auf dieser Website verwende ich das Farbschema Rhodos.

Browser- und PHP-Kompatibilität der Layout-Vorlage

Die in der Layout-Vorlage enthaltenen Elemente werden in allen aktuellen Browsern fehlerfrei dargestellt. Test erfolgte unter den aktuellen Windows-Versionen der Desktop-Browser Firefox (Gecko), Vivaldi, Opera und Edge (alle drei: Chromium/Blink). Die Darstellung auf mobilen Geräten teste ich mit den Bildschirmgrößen-Emulatoren von Firefox und Vivaldi, da ich keine Mobilgeräte habe.

Einschränkungen gibt es nur bei älteren Browsern: Internet Explorer 11 (und älter), Edge (EdgeHTML) sowie Opera 12 (Presto) kennen weder die CSS-position: sticky noch die HTML-Elemente details und summary. Der IE 11 zeigt das CSS3-flexbox-Layout falsch an. Auf diese älteren Browser mit nur noch geringer Verbreitung nehme ich keine Rücksicht mehr. Außerdem gönnt Opera seiner aktuellen Windows-Version immer noch keine Silbentrennung (Stand September 2022): Wie schade!

Die Vorlage verwendet HTML5 mit dem Dokumenttyp <!DOCTYPE html> und läuft unter den PHP-Versionen 5.6, 7.x und 8.x. Das übersichtliche PHP-/HTML-Seitengerüst (PHP-Template) ist für alle Musterseiten gleich.

Urheberrecht, Nutzungsrechte, Lizenz

Diese Webseiten-Vorlage wird von mir, Gösta Thomas (Urheber, Entwickler) als zip-Archiv und 7zip-Archiv zum Runterladen angeboten. Die Vorlage darf unter den Bedingungen der GNU GPL Version 3.0 zur Erstellung privater und geschäftlicher Websites genutzt werden:

  1. Erlaubt ist die Verwendung der in der Vorlage enthaltenen technischen Muster (PHP-, HTML- und CSS-Code) für vom Nutzer erstellte Websites. Anpassungen, Änderungen, Weglassungen und Ergänzungen sind erlaubt.
  2. Verboten ist die produktive Nutzung der in der Vorlage enthaltenen Beispiel-Texte und Beispiel-Bilder. Sie müssen vom Nutzer durch eigene Texte und Bilder ersetzt werden.
  3. Die Nutzung der Vorlage erfolgt auf eigenes Risiko des Nutzers. Ich übernehme keine Haftung oder Gewährleistung für etwaige Schäden.
  4. Für die Nutzung der Vorlage besteht kein Anspruch auf persönliche Beratung oder auf Support.
  5. Vom Nutzer müssen mein Name als Urheber und die Lizenz im Impressum der Website und in der Stylesheet-Datei genannt werden, zB in dieser Form: Für diese Website wurde die Webseiten-Vorlage von Gösta Thomas genutzt. Das Urheberrecht liegt bei Gösta Thomas. Die Vorlage ist unter GNU GPL 3.0 lizenziert. Änderungen & Anpassungen erfolgten durch [Ihr Name] am [Datum].
  6. Ich stelle dem Nutzer die Vorlage zu den genannten Bedingungen kostenlos zur Verfügung.

Wer bin ich, wer schreibt hier?

Mein Name ist Gösta Thomas. Beruflich war ich als Anwendungsprogrammierer an Siemens- und IBM-Großrechnern tätig. Seit etwa 2000 befasse ich intensiv mit Webdesign und Suchmaschinenoptimierung. Jetzt bin ich Rentner. Mehr über mich erfahren Sie auf meiner persönlichen Website.

Warum diese öffentlich zugängliche Webseiten-Vorlage? Eigentlich wollte ich nur ein variables Muster-Layout zum Redesign zweier eigener Websites erstellen. Aber die viele Arbeit, die ich reingesteckt habe, soll auch anderen zugute kommen, die eine Kopiervorlage für ihre Website suchen.

Natürlich habe ich auch für diese Website meine eigene Webseiten-Vorlage verwendet :-)

Ist diese Webseiten-Vorlage für Sie geeignet?

Hilfreich sind zumindest Grundkenntnisse in HTML und CSS (aber die kann sich jeder aneignen). Denn Sie arbeiten direkt mit HTML-Quelltext, auch wenn ich Ihnen für viele Zwecke Kopiermuster bereitstelle. Und wenn Sie die Anzeige-Eigenschaften eines Elements gegenüber der Vorlage ändern wollen, sind CSS-Kenntnisse nützlich. Die Seiten werden zwar als PHP-Seiten erstellt, aber Sie benötigen keine PHP-Kenntnisse.

Zu Beginn dieses Jahrtausends gab es in Deutschland viele private Websites, die zB Reiseberichte und Urlaubsbilder zum Gegenstand hatten. Nach meinen Beobachtungen ist die Anzahl solcher Websites gerade im Reisebereich drastisch zurückgegangen, was ich schade finde. Ich vermute als Gründe für den Rückgang sowohl die Hürde der Mobilgerätetauglichkeit als auch manche abschreckende Bestimmungen der DSGVO.

Mit meiner Webseiten-Vorlage entfallen diese Gründe. Die Vorlage ist responsiv und mobilgerätetauglich. Fremdserver-Elemente, die nachhause telefonieren, werden nicht eingebunden. Und es werden keine Cookies bei Ihren Besuchern gespeichert.

Ich wünsche Ihnen für Ihre Website mit meiner Webseiten-Vorlage viel Spaß und viel Erfolg.
Gösta Thomas

« vorige Seite
nächste Seite »
 
⇧