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
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.
Weitere Beiträge:
- 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
- Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
- Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
- Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
- Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
- 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
- Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.
Loading ...
Schöne Übersicht, vielen Dank!
Kurze Korrektur: Moolio = _6_ templates (A-F), nicht 7.
Gruss,
Christoph
Stimmt Danke
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
Da dürfte wirklich für jeden das “richtige” Beispiel dabei sein. Vielen Dank, wiedereinmal für eine klasse Zusammenstellung!
> 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.
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
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.
> 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….
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.
Fehlt:
http://www.openwebdesign.org/
@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
table(-Geschichte) fehlt…
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.
Merci,
wieder einmal Süßes für uns CSSler…
@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
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.
>>> 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….
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
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-Layouts. Die Lean-Variante setze ich z.B. auf meiner privaten Website ein.
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.
Danke für deine Auflistung. Da sind sehr viele gute dabei.
Das beste an diesen Layouts ist aber immer noch die Inspiration.
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…
Sehr nützlich!
Danke!
Das ja mal eine richtig gute Liste.
Danke
Auch Jahre später, nachdem ich diese Liste hier nun mehrfach durchstöbert habe, bin ich immer wieder begeistert von dieser. Echt ne klasse Zusammenstellung! Danke dafür!
Sehr gute Seite mit sehr vielen Informationen und Beispielen.
Mein Problem liegt eher an den durchweg englischen Seiten und Templates. Ich habe Schwierigkeiten die Infos in dieser Sprache so zu verstehen, dass ich ein freies Template meinen Bedürfnissen anpassen kann.
Nebenbei fällt mir auf, dass fast ausschließlich mehrspaltige Templates angeboten werden. Zur Erstellung einer einfachen, aber ansprechenden Seite würde die klassische Ansicht mit nur einer Spalte reichen.
Oben ein Header, in den ich mein PNG-Logo einbauen kann darunter eine Seitennavigation in der Mitte ein Bereich in den ich Text und Bilder eingeben kann und ganz unten eine kleinere Zeile für die Telefonnummer und andere kurze Infos. Dabei sollte die Hauptzeile, also der Hauptbereich sich automatisch der Text- bzw. Contentlänge anpassen.
So etwas bekomme ich als Anfänger per Tabellenlayout ohne Probleme hin, tu mich aber schwer, das per CSS zusammen zu basteln.
Im Prinzip sollte das so aussehen wie hier: http://www.maxdesign.com.au/articles/css-layouts/one-fixed/
Solch ein einfaches Design mit einer deutschen Erklärung würde mich zum kleinen König bei der Überarbeitung meiner alten Tabellenseiten machen. Hat jemand eine Idee wo ich so etwas finden kann?
Vielen Dank im Voraus
Rainer
Danke, super Arbeit, super!
Super Übersicht! Ich schau hier seit längerem immer wieder vorbei. Sind wirklich einige gute Seiten dabei.
Vielen Dank hat mir sehr weiter geholfen. Ich finde in der Heutigen Zeit brauch eine Internetseite nicht mehr so überladen sein. Grade mit einen kleinen einfachen Grundgerüst kann man gut Arbeiten. Desto weniger Codes desto besser und schneller findet Big G einen.
css html tema super Danke, super Arbeit, super