Dr.Web - Das Online Magazin für Seitenbetreiber

Free 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. Siehe auch im Dr. Web Shop: Peter Müller: CSS lernen mit Little Boxes

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.

Über Sven Lennartz

Sven ist der Erfinder des Dr. Web Magazins, Autor und Herausgeber verschiedener Fachbücher. Als Webdesigner und Texter früher freiberuflich für verschiedene Unternehmen und Verlage tätig. Jetzt Geschäftsführer der Smashing Media GmbH. Website. Weitere Beiträge für Dr. Web: 1231

59 Kommentare zu “Free CSS Layouts - Download”

59 Kommentare

1

Christoph
25.10.2006 07:53
Schöne Übersicht, vielen Dank!

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

Gruss,

Christoph

Antwort
2

Lorenz
25.10.2006 09:12
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 heisst es so schön? Ein System wird nicht daran gemessen, wie es mit dem Durchschnitt umgeht, sondern daran wie es die Extreme bewältigt.

Was ist mit Screen-Magnifier? (Das sind Tools, die ein Ein- und Auszoomen des Bildschirms ermöglichen.) Wer keinen Apple hat - beim OS X ist die Funktionalität auf vorbildliche Weise eingebaut - muss für eine gute Funktionalität 600 Euro hinlegen, was sicher nicht jedermanns/jederfraus Sache ist.

Die Moral? Aufpassen, dass neue Technologien nicht neue Barrieren schaffen!

Einen schönen Tag wünscht

Lorenz

Antwort
3

Heiko
25.10.2006 09:15
Da dürfte wirklich für jeden das "richtige" Beispiel dabei sein. Vielen Dank, wiedereinmal für eine klasse Zusammenstellung!

Antwort
4

freedimension
25.10.2006 09:38
> 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 hier muss ein Zentimeter sein, sonst passt das nicht in mein Seitenverhältnis! Blub.")? Nun, etwas ähnliches passiert meiner Ansicht nach hier.

Sowohl gute als auch schlechte Arbeiten konntest du immer schon mit beiden Techniken abliefern.

Antwort
5

sralph
25.10.2006 09:41
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

Antwort
6

doerthe
25.10.2006 10:24
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.

Antwort
7

Frank
25.10.2006 11:39
> 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 kann man auch sparsam Coden. Und die ganzen Buttons, die auf vielen CSS-Seiten sind um zu zeigen, welche Standards alle eingehalten werden, brauchen auch Platz....

Wartungsärmer? Wenn ein CMS zum Einsatz kommt muß man sowieso nur eine Datei bearbeiten. Außerdem kann man nur durch das Ändern der CSS-Datei nicht ein ganzes CSS-Layout umwerfen. Auch da kommt es auf die Positionierung der DIVs an.

Barrierefrei? Stimmt auch nicht ganz, wie oben steht. Ich hatte einen Blinden Surfer als Kunden. Die Software, die Blinde nutzen um die Seiten zu betrachten, versteht mittlerweile sehr gut mit Tabellen umzugehen.

Ein Design für "alle" Geräte? Auch Käse. Wer will schon ne normale Website auf einem Handy lesen. Hierfür muß dann auch Text etc. angepasst werden.

So, ich wollte mal ne Lanze fürs gute, alte Tabellen-Layout brechen. Auch wenns gerade out ist....

Antwort
8

Matthias
25.10.2006 12:56
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.

Antwort
9

rtauchnitz
25.10.2006 16:22
Fehlt:

http://www.openwebdesign.org/

Antwort
10

Björn
1.11.2006 16:57
@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, aber am Besten taucht man in eine Seite ein wenn man sie doch (fast) komplett selbst macht. Man kennt sich einfach besser aus und ist schneller beim bug-fixen...
Und bzgl. der -Geschichte: ich benutze noch Tabellen, aber nicht für das Layout, da ist CSS flexibler, schneller und genauer.
Aber nichtsdestotrotz sind die Links sehr nützlich als Ideen-Input, werde zumindest gleich mal stöbern gehen

Antwort
11

Björn
1.11.2006 16:58
table(-Geschichte) fehlt...

Antwort
12

Joerg
4.11.2006 07:30
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 Webseite sieht in allen Brwosern gleich aus, was bei Tabellen schwieriger ist. der Aufwand ist bei mir geringer. Und Hacks? Wozu? AUch ohne kann man sehr gute Designs erstellen.

Antwort
13

robert
14.12.2006 14:52
Merci,

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

Antwort
14

bo
26.12.2006 12:56
@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

Antwort
15

Tom Traunstein
19.03.2007 23:24
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.

Antwort
16

bruno
28.05.2007 17:10
fehlt
http://www.freecsslayouts.de

Antwort
17

Tristan
10.09.2007 10:09
>>> 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....

Antwort
18

CSS-Layouts
13.09.2007 09:24
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

Antwort
19

Dieter
25.09.2007 17:30
Schöne Auflistung von CSS-Layouts.

Wie aber zuvor schon angemerkt wurde fehlt .

Darüber hinaus gehört m.E. auch die noch in die Liste freier CSS-

Antwort
20

Jenny
14.12.2007 10:19
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.

Antwort
21

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

Antwort
22

Webdesigner
12.05.2008 08:52
tolle sammlung von wo aus man immer wieder neue vorlagen/inspirationen bekommt ...

Antwort
23

webmaster
4.07.2008 22:44
Hier sind auch noch schöne CSS Layouts: http://www.mediaup.de/free-tem

Antwort
24

Matthias
21.07.2008 20:28
Die Vorlagen von Dreamweaver CS3 sind sehr gut auf alle Browser abgestimmt, und eignen sich hervorragend für den Anfang.

Sicher gibt es die Auffassung Dinge von 0 an zu entwickeln.

Aber selbst Webdesigner sollten sich des Kosten-Nutzen Faktors erinnern...

Antwort
25

Mustafa
20.10.2008 21:21
Sehr nützlich!

Danke!

Antwort
26

Paul
8.11.2009 03:36
Das ja mal eine richtig gute Liste.
Danke

Antwort