Kostenlose CSS Layouts – Download

Alles muss man nicht selber machen oder neu erfinden. Wenn es schnell gehen muss, eine Idee fehlt oder man nicht sattelfest ist, bieten sich Vorlagen an. Sie eignen sich außerdem hervorragend zum Lernen. Unter einem Template versteht man einen kompletten Seitenentwurf inklusive Grafiken. Ein Layout hingegen bietet nur ein Grundgerüst.

Screenshot

Die folgenden tabellenlosen (X)HTML/CSS-Vorlagen werden gratis zur Verfügung gestellt. Im Falle eines bloßen Layouts ist das auch kaum anders möglich. Bei Templates hingegen verhält es sich anders. Hier ist mehr kreative Leistung im Spiel. Eine Belohnung, oft in Form eines Links, wird zumeist eingefordert. Vor dem Einsatz also immer genau hinschauen.

  • CSS Design Templates
    12 Templates
  • ThreeColumnLayouts von CSS Discuss
    Jede Menge dreispaltiger Layouts aus unterschiedlichen Quellen gesammelt.
  • CSSFILL
    Eine kleine Auswahl mit eigener Website
  • CSS Frames Layouts
    Frames mit CSS sind auch kein Problem
  • CSSplay
    Stu Nicolls ist so etwas wie ein Altmeister wenn es um CSS geht. Frei verfügbare Layoutgerüste finden sich deshalb auch bei ihm. Manchmal muss man vor dem Einsatz um Erlaubnis fragen.
  • CSS Template Gallery
    Schöne Suchmöglichkeiten für allerdings „nur“ 32 Templates. Diese sind zumeist von eher durchschnittlicher Qualität.
  • CSS Intensivstation
    15 Layouts
  • Ex-Designz
    98 XHTML CSS-Templates
  • Code-Sucks
    Sechs Templates und diverse Layouts mit verschiedener Spaltenanzahl.
  • Jimmy Lin
    Acht einfache Templates
  • Layout Gala
    40 Layouts folgen demselben Schema.
  • Little Boxes
    16 Layouts, ein Klassiker
  • Changingman
    Ein einzelnes dreispaltiges Layout. Ausgeführt als Liquid Design.
  • Mollio
    Ein Template in sieben hochwertigen Varianten. Inklusive eines kleinen Styleguides im PDF-Format
  • Open Source Templates
    15 recht schicke Templates
  • OSWD
    Ein riesiges Angebot von Templates aller Arten, aber weitgehend unsortiert.
  • OSWT
    Ein ebenfalls großes Angebot. Mit besseren Such- und Sortiermöglichkeiten. Viel Werbung dabei.
  • Maxdesign
    23 Layouts und Problemlösungen
  • Six Shooter Media
    15 Templates
  • Solucija
    19 Templates, leider ohne nähere Angaben zur Verwendbarkeit.
  • Tinderbox
    Ein Layout in Variationen
  • Yahoo! UI Library: Grids CSS
    Eine komplexe Lösung für viele Probleme. Es wird gerastert. Ein Prinzip, das aus Bildbearbeitungs- oder Layoutprogrammen bekannt ist.

Als Gründer habe ich Magazine für Webdesigner und -Entwickler aufgebaut. Das Smashing Magazine, das zu den 10 bekanntesten und trafficstärksten Blogs der Welt gehörte. Oder das Dr. Web Magazin, das nicht nur als Blog in Deutschland ganz vorn dabei war. Ich helfe dir, im Internet mit Blogs und Webseiten Erfolg zu haben.

Sortiert nach:   neueste | älteste | beste Bewertung
Christoph
Gast

Schöne Übersicht, vielen Dank!

Kurze Korrektur: Moolio = _6_ templates (A-F), nicht 7.

Gruss,

Christoph

Webdesign Berlin
Gast

Stimmt Danke

Lorenz
Gast
Hallo Vielleicht ist hier nicht der richtige Platz dazu, aber meiner meinung nach geht bei der ganzen CSS-Layout-Diskussion ein Aspekt der Usability verloren. Nehmt mal eine Website, die ausschliesslich mit div-tags aufgebaut ist, und setzt den Schriftgrad im Browser auf 250% – die Site wird mit ziemlicher Sicherheit unlesbar. Grund dafür sind die absolut positionierten Elemente. mit dem guten alten table-tag passiert das nicht, es mag sich zwar einiges verschieben, aber immerhin bleibt der Text sichtbar. Wer kommt nun auf die Idee, die Textgrösse auf 250% aufzublasen? Nun, sehbehinderte Leute wie ich. Wir sind zwar zugegebenermassen eine Minderheit, aber wie… Read more »
Heiko
Gast

Da dürfte wirklich für jeden das „richtige“ Beispiel dabei sein. Vielen Dank, wiedereinmal für eine klasse Zusammenstellung!

freedimension
Gast
> Die Moral? Aufpassen, dass neue Technologien nicht neue Barrieren schaffen! Im Gegenteil, die neue Technologie soll Barrieren abschaffen; einem guten Webdesigner gelingt das auch durchaus, da kannst du dann auch auf 1000% vergrößern. Du kannst nicht das Werk eines schlechten Webdesigners mit der Technologie die er benutzt gleichsetzen. So ein Designer verwendet, evtl. weil es gerade so schön ‚in‘ ist oder es ihm aufgezwungen wurde, nur noch CSS, möchte sich dabei aber einfach nicht von den alten Design-Grundlagen des Table-Layouts verabschieden. Wer erinnert sich nicht mehr an die „alten“ Zeiten als die ganzen Printdesigner aufgeschlagen sind (Stichwort: „Der Abstand… Read more »
sralph
Gast

Vielen Dank für diese sehr gute Ideen- & Wissensübersicht über Css-Layouts. Mich begeistert immer wieder die kreativen Ideen und deren Umsetzung mit Hilfe von Css.

RALPH

doerthe
Gast

Ich frage mich nur wer benutzt die freien Layouts und Templates. Als Webentwickler und Designer mache ich die Sachen doch lieber direkt selber, oder? Ich brauche doch auch so einige Zeit um mich in den Quellcode von anderen einzuarbeiten.
Oder wie seht ihr das?

Doerthe
PS: Allgemein zu Dr. Web und WWW – Ich bin immer wieder begeistert. Internet ist einfach faszinierend.

Frank
Gast
> Die Moral? Aufpassen, dass neue Technologien nicht neue Barrieren schaffen! Im Moment kommt mir Layouts entwerfen mit CSS so vor wie damals ein Tabellen-Layout mit NN4 und IE4. Ewig rumprobieren, Code einfügen der eigentlich keinen Sinn macht (Hacks) und dann Angst haben, dass die nächste Browsergeneration wieder anders funktioniert. Mir kommt das oft so vor, als ob nur gezeigt werden soll was geht. Superschöne Seiten! Mit Benutzerfreundlichkeit hat das oft nicht viel zu tun. Aufs Design kommts halt an…. Die Vorteile eines CSS-Layouts sind meiner Meinung nach nicht groß bzw. gibt es keine. Weniger Code? Mit Tabellen UND CSS… Read more »
Matthias
Gast

Ich vermisse ein bisschen YAML (http://www.yaml.de/). Das hat mir bisher sehr geholfen und ist sowohl für Anfänger als auch für Fortgeschrittene sehr hilfreich.

trackback

CSS Layouts und Templates…

Eine Sammlung diverser CSS Layouts und Templates für den schnellen Einsatz

Dr. Web erweitert mal wieder die Linksammlung. Diesmal mit Links zu CSS Layouts und Templates für Webseiten.

Alles muss man nicht selber machen oder neu erfinden. Wen…

trackback

[…] Nachdem Borussia heute schon wieder auswärts verloren hat, musste ich unbedingt was für mein angeknackstes Ego tun. Schön, daß Dr.Web heute in seinem Blog CSS Templates für ümme vorstellt. Die Templates von Sixshootermedia sind mir schon des öfteren ins Auge gefallen. Nun haben einige fleissige Bienen ausgewählte Templates für WordPress portiert. Solemnity Two ist derzeit im Einsatz und ich fühl mich wieder gut. Ausserdem: Juhu, Urlaub! Abgelegt unter Borussia, blog von fayol […]

trackback

[…] CSS Layouts und Templates (tags: css templates creativity) […]

trackback

[…] » CSS Layouts und Templates – Dr. Web Weblog […]

trackback

[…] » CSS Layouts und Templates – Dr. Web Weblog css (tags: css) […]

trackback

[…] CSS Layouts und Templates Kleine Sammlung bei Dr. Web (tags: webdesign) […]

trackback

[…] » CSS Layouts und Templates – Dr. Web Weblog […]

trackback

[…] CSS Layouts und Templates Posted by James Filed in Design, Web […]

trackback

[…] CSS Layouts und Templates (tags: Tech WebDesign CSS Template) […]

trackback

Rundflug 4 – Das (Un)Wichtigste in Kürze…

Firmen entdecken Second Life
Second Life scheint derzeit nicht zu stoppen.

[…]Täglich entdecken Unternehmen Second Life als eine innovative Marktnische, in der neue Marketing- und Geschäftsformen erprobt werden.[…]

Wenn man sich die Li…

trackback

[…] Für Anfänger wie Fortgeschrittene dürfte es von Interesse sein, wie CSS Layouts aufgebaut werden bzw. Programmierer ihre Layouts realisiert haben. Dr. Web hat hierzu eine ganze Reihe Webseiten zusammengetragen, auf denen kostenlose CSS Layouts angeboten werden. Wer etwas mehr in die Materie eindringen möchte kann sich das Tutorial bei Andreas Kalt ansehen. Dort wird Schritt für Schritt die Erstellung eines CSS Layouts erklärt.  […]

trackback

Layouts mit CSS…

Bisher habe ich Seitenlayouts immer mit Tabellen gebaut. Dabei hab ich auch immer das gewünschte Ziel erreicht. Jetzt möchte ich aber auch in diesem Bereich mit der Zeit gehen und stelle alles auf CSS-Layouts um. Ich muss sagen, dass der Code für da…

trackback

[…] beides bei Dr.Web gefunden: erstens eine lässige Möglichkeit, eine Vorschau von verlinkten Websites anzuzeigen, nämlich als Tooltipp mit Screenshot (gibts auch als Bookmarklet und als WordPress Plugin!) und zweitens eine lange Liste an CSS-Layoutvorlagen und Templates zum Herumspielen. Notiz an mich selber – durchsurfen. | | | Ernst | 23:11 | HTML,CSS & Co., Blogging | […]

trackback

[…] » CSS Layouts und Templates – Dr. Web Weblog (tags: webdev xhtml css design templates) […]

trackback

[…] Falls man für eine Website ein neues Layout benötigt und keine Zeit und Lust hat oder das Wissen fehlt, bietet die Linkliste von Dr.Web ein nützlicher Startpunkt für die Suche. Danke Herr Doktor. […]

trackback

[…] CSS Layouts und Templates (tags: templates css) […]

Björn
Gast
@doerthe: da muss ich Dir Recht geben. Als Webdesigner (mit Anspruch;) erhält man mit Vorlagen nie das gewünschte Ergebnis. Erstens nimmt erfahrungsgemäß die Auswahl und Anpassung einer Vorlage inkl. Sourcecode-Review genauso viel Zeit in Anspruch wie die Erstellung eines Templates und zweitens ist meiner Meinung nach (zumindest arbeite ich so) die Template-Erstellung erst der zweite logische Schritt. Zunächst muss ja erstmal ein Content/Design-Konzept her. Während des Designprozesses entwickle ich im Hinterkopf ja sowieso schon ein CSS-Gerüst und die Stärken von CSS liegen für mich ja auch in der schnellen Umsetzung eines Templates. Natürlich kann man rudimentäre Layouts immer wieder verwenden,… Read more »
Björn
Gast

table(-Geschichte) fehlt…

trackback

[…] CSS Layouts und Templates (tags: design free german graphics internet links) […]

trackback

[…] Und viele viele mehr Dr.Web bietet eine Linkliste von vielen freien CSS Layouts […]

Joerg
Gast
Hallo zusammen, ich entwickel ebenfalls auch Webseiten für Firmen und Privatpersonen. Die Diskusionen ob man als Designer Tabellen oder Div-Tags benutzen soll, verfolge ich schon eine ewigkeit. Ich finde doch jetzt sehr interssant, das hier zwei Sehbehinderte Besucher sich über Div-Tags beschweren. Der Aufwand für Sehbehinderte Menschen eine Webseite zu realisieren finde ich enorm und viele Firmen schließen die Gruppe aus. Wieso? Weil der Preis den ein vernünftiger und legaler Designer fordert zu hoch ist. Der zweite Punbkt ist, dass viele Firmen sich sagen „Pech gehabt“. Aber was ist denn nun Besser? Was den Browserkrieg angeht ist Div-Tags besser. Die… Read more »
trackback

[…] Hey, falls dir die Templates bei CSS4you nicht ausreichen, bei Dr. Web gibt’s ne Menge Links zu CSS Templates… […]

trackback

[…] » CSS Layouts und Templates – Dr. Web Weblog Posted in bookmarks | Trackback | del.icio.us […]

robert
Gast

Merci,

wieder einmal Süßes für uns CSSler…

trackback

[…] einen guter Einstiegt und Übersicht gibt Dr. Web HIER… […]

bo
Gast

@Lorenz, hab nich alle antworten gelesen ;-)

genau aus diesem grund verwendet man doch css :/
man kann es ohne probleme im browser abschalten (2xklicken) und hat alle informationen in chronologischer reihenfolge, ohne bilder und in beliebiger größe. lesbar für JEDEN.
einfach mal ausprobiern ;-)

trackback

[…] Hi! mir ist die Schrift im linken Men

trackback
Templates gegen Cash - Anbieter von kommerziellen Templates in der Übersicht | Dr. Web Weblog
[…] So viele frei verfügbare Templates, Vorlagen und Layouts es auch gibt, sie genügen nicht immer und nicht jedem Anspruch. Eine respektable Anzahl von Anbietern buhlt deshalb um die Gunst des zahlenden Kunden. So viele sind es dann aber doch nicht, denn es drängen sich zahlreiche Affiliatenehmer im Netz. So werden zum Beispiel die Produkte der Firma Template Monster gleich hundertfach über das Partnerprogramm Template-Help verbreitet. Eine hundertprozentige Rechtssicherheit gibt es auch beim Händler nicht. Gut möglich, dass der eine oder andere Anbieter auch einmal rechtlich unsauberes ausliefert und man sich dann einer Abmahnung oder Lizenzforderung gegenübersieht. Das gilt insbesondere… Read more »
Tom Traunstein
Gast

Die DIV Programmierung hat ja nicht nur Vorteile für Sehbehinderte, sondern auch für den Betreiber der Seite. Man denke bei den größeren Firmen an Traffic, Ladezeit etc.

trackback

[…] seit Jahren eher die kostenlosen „Baukastensysteme“ und Template-Sammlungen im Web (Beispiel: Linksammlung bei Dr. Web), die schnell zu realisierende Lösungen für den Anfang bieten. Oft beinhalten die generierten […]

trackback

[…] Lernen bestens geeignet sind die Templates der Layout Gala. Bei Dr.Web gibts eine Liste von 22 Seiten mit kostenlosen Layouts. Im CSS Zengarden kann man sich durch […]

Tristan
Gast

>>> Ich frage mich nur wer benutzt die freien Layouts und Templates. Als Webentwickler und Designer mache ich die Sachen doch lieber direkt selber, oder? Ich brauche doch auch so einige Zeit um mich in den Quellcode von anderen einzuarbeiten.
Oder wie seht ihr das?

Schüler wie ich ^^‘ die Praktikumspraesis erstellen sollen mithilfen von HTML und CSS….

CSS-Layouts
Gast

Warum verwenden Programmierer eigentlich auch Vorlagen (sprich: Frameworks)?
Weil dadurch eine Menge Arbeit gespart wird und sich die Entwickler des Frameworks extrem gut in ihrem Themengebiet auskennen und auf Dinge achten, auf die man in derselben Zeit nicht einmal kommt.
Man muss sich um bestimmte Dinge nicht mehr kümmern und hat eine gute Qualität von Code und Architektur.
YAML z.B. hat viele Vorteile:
* Basierend auf Web Standards
* Barrierearm
* Flexibel
* Anwendungsorientiert
* Umfassend dokumentiert

trackback

[…] Angaben und dazwischen oder daneben der Content. Wie man das mit CSS realisiert? Du kannst ja mal hier st

Jenny
Gast

Hallo!

Ich verwende auch solche Vorlagen.
Wir lernen gerade in der Schule, wie man Websiten mit CSS baut.
Mit diesen Vorlagen habe ich geübt und mir viel es garnicht schwer, mich da reinzudenken.
Meine jetzige Homepage habe ich mit Hilfe solch einer Vorlage gebaut.
Es war eine große Hilfe für mich als Anfängerin.

Was stimmt denn nun? Sind CSS-Layouts nun barrierearm oder nicht?

Also ich finde, jede informative Seite sollte barrierefrei sein.

trackback

[…] Web Design, CSS-Technik, Layouts, CSS Layout Technique (Glish), CSS Web Layouts, strictly CSS, Dr. Web Weblog, CSS Library Webdesign: Internet Explorer 6 zeigt Inhalte nicht […]

Sandra
Gast

Danke für deine Auflistung. Da sind sehr viele gute dabei.
Das beste an diesen Layouts ist aber immer noch die Inspiration.

trackback

[…] Fehler anzeige unter IE Gehe mal hierrauf ist sehr informativ und sollte dir helfen. Gruss __________________ Marcus […]

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen