CSS/fertige Layouts

Hier bieten wir fertige Layouts und Design-Vorlagen an. Sie können sie hier ansehen, herunterladen und sowohl für private als auch kommerzielle Projekte kostenfrei verwenden. Alle Layouts sind responsiv, zugänglich und bestehen natürlich aus validem HTML5.

Abweichend von den Beispielen im Wiki werden die Layouts statisch gehostet, damit externe Ressourcen wie Grafiken, Unterseiten und Stylesheets einfacher referenziert werden können.

Design-Vorlagen

	CSS-Garten Eine auf dem HTML-Grundgerüst und dem Seitenstrukturierungs-Tutorial aufbauende übersichtliche Webseite, die mit neun verschiedenen Layouts ausgeliefert wird.
	Design Nr. 01 Dies ist eine farblich ansprechende Seite für eine kleine Firma, Kanzlei oder Privatperson. Die Hintergrundfarben und Schatten sind direkt in der CSS-Datei definiert und können leicht geändert werden. Die grafischen Elemente wie Cliparts und Logos sind als SVG-Grafiken direkt im HTML enthalten und können so ebenfalls mit CSS gestaltet werden.
	Design Nr. 02 Eine poppige Seite im 3-Spalten-Layout mit einem auffälligen Header. Mit einigen wenigen Handgriffen kann das Theme der Seite farblich angepasst werden.
	Design Nr. 03 Firmenseite in sachlichem Blau in 3-Spalten (im Grid Layout) mit der Navigation links. Die grafischen Elemente neben den Menüpunkten und den Überschriften werden ohne Grafiken, sondern nur durch CSS {border-left: 5px solid blue;} erzeugt.
	Design Nr. 04 Diese grafisch ansprechende Seite eines Sportvereins hat 3 feste Spalten im Grid Layout, die sich bei kleinerem Bildschirm untereinander positionieren. Die Icons und grafischen Elemente wurden nicht mit Hintergrundbildern, sondern mit dem Icon-Font font-Awesome verwirklicht.
	Design Nr. 05 "Kennt man eine - kennt man alle!" – Moderne Webseiten leiden oft an ihrer Beliebigkeit: Ein mehr oder weniger komplexes Raster aus viereckigen Bereichen. Mit SVG sind auch andere geometrische Formen möglich. Natürlich ebenfalls responsiv und mit allem drin!
	Design Nr. 06 Webseite im Grid Layout mit responsivem Slider und einer Reihe von social-Buttons
	Design Nr. 07 farbenfrohe Seite mit großem Header für eigenes Logo und einem (abgeschalteten) Flexslider
	Design Nr. 08 Eine grafisch gelungene Seite mit einem großen Teaser, dessen Bilderklärung (figcaption) beim Überfahren mit der Maus einschwebt. Die Pfeile der Navigation sind keine Grafiken, sondern mit CSS erzeugte Pseudoelemente. Der 4-farbige Streifen unter der Überschrift ist ebenfalls nur CSS.
	Design Nr. 09 Grafisch sehr ansprechende Autoseite, die aber mit 2 Navigationen und vielen verschiedenen Block-Elementen nur schwer anzupassen wäre.
	Design Nr. 10 Eine grafisch abwechslungsreiche Seite, die mit einem strukturierten Hintergrund daherkommt. Der Kopf und die Navigation sind oben fix positioniert. Auf der Startseite findet sich ein Bilder-Karussell, dass man entweder manuell anklicken oder mit wenigen Handgriffen automatisch rotieren lassen kann. Es ist ab einer Breite von 750px responsiv, schmalere Ansichten müssten noch eingestellt werden.
	Visitenkarte Ein eleganter OnePager als Landing Page oder Portfolio für eine Bewerbung. Natürlich responsiv und mit allem drin!
	Design Nr. 15 Ein einfaches Design von Jeena Paradies, in dem alle HTML-Strukturen und CSS-Einstellungen in Kommentaren erklärt sind. Umsetzung in floats, die man heute so nicht mehr machen würde, sich aber in Maßen sogar an die Seitenbreite anpasst.
	HTML-Einstieg Noch kein fertiges Layout, sondern der Start für die ersten Schritte in HTML und CSS. Webseiten-Ansicht: https://src.selfhtml.org/kurse/html-einstieg/ Download: https://src.selfhtml.org/kurse/html-einstieg.zip (ZIP, 8.9MB)

Design Vorlagen herunterladen und verwenden

ZIP-Datei herunterladen

Wenn Sie dieses Layout für ein eigenes Web-Projekt verwenden möchten, klicken Sie auf den folgenden Verweis, um das Layout zu speichern:

• ZIP-Datei.

Speichern Sie die ZIP-Datei in ein Verzeichnis Ihrer Wahl. Die ZIP-Datei enthält HTML-, CSS- und Grafik-Dateien, die zum Layout gehören. Damit Sie diese Dateien bearbeiten können, müssen Sie die ZIP-Datei entpacken.

• Windows: Rechtsklick und "Dateien entpacken" wählen
• Mac: Doppelklick

Entpacken Sie den Inhalt der ZIP-Datei in das Verzeichnis, in dem Sie Ihr Web-Projekt bearbeiten möchten. Falls dieses Verzeichnis noch nicht existiert, legen Sie es vor dem Entpacken der Datei an. Nachdem Sie die ZIP-Datei erfolgreich entpackt haben, können Sie die Projektdateien bearbeiten.

Hinweise zu den Vorlagen

Zu den Layouts gehören folgende Projektdateien:

• index.html
• 1-unterseite.html
• 2-kontakt.html

ein Verzeichnis /css

… in dem sich eine oder mehrere separate CSS-Dateien (meist: style.css) mit globalen Definitionen zur Formatierung von Text und Design befinden. Diese CSS-Datei ist in allen HTML-Dateien des Projekts eingebunden. Zum Verstehen und Bearbeiten dieser Datei sind Kenntnisse in Kapitel CSS erforderlich.

ein Verzeichnis /img

… Grafikdateien, die zur Anzeige verwendet werden. Schauen Sie sich die Grafikdateien mit einem Grafikprogramm oder mit dem Browser einzeln an, um zu verstehen, wie sie im Layout wirken. Falls Sie das Layout farblich verändern, werden Sie vermutlich auch die zum Layout gehörenden Grafiken bearbeiten müssen. Dazu benötigen Sie Kenntnisse in Techniken und Begriffen der Bildbearbeitung.

Hinweis:

Urheberrecht: Die Templates unterliegen abweichend von den Lizenzbedingungen ausdrücklich nicht der Lizenz CC-BY-SA 3.0 (de), sondern sie sind im Sinne der Lizenz CC0 1.0 (de) als public domain veröffentlicht. Sie dürfen diese Templates kopieren, verändern, veröffentlichen, sogar zu kommerziellen Zwecken, ohne um weitere Erlaubnis bitten zu müssen. SELFHTML verzichtet weltweit auf alle urheberrechtlichen und verwandten Schutzrechte, soweit dies gesetzlich möglich ist.

Weiterführende Tutorials

Den Quelltext dieser HTML-Dateien können Sie mit einem Text- oder Code-Editor bearbeiten. Um den Quelltext zu verstehen und darin arbeiten zu können, benötigen Sie Kenntnisse in HTML und CSS.

Eine gute und leicht verständliche Einführung bietet unser Einstieg in HTML-Tutorial, in dem Sie Schritt für Schritt lernen eine Webseite aufzubauen.

Der Kurs Einstieg in CSS vermittelt die Grundlagen der Formatierung mit Stylesheets.

Dort wird, wie auch in den hier verwendeten Vorlagen, oft das neue Grid Layout verwendet, für das wir ebenfalls einen Kurs erstellt haben:

• Einstieg in Grid Layout

Weblinks

• htmlup.net ... makes spiffy HTML5 site templates
• t3n.de: CSS- und HTML5-Templates: 6 Quellen für dein nächstes Webprojekt