Webseiten - Erstellung #

Hier im Wiki wirklich neues zum Thema "Erstellung von Webseiten" ("Webdesign") schreiben zu können, glaube selbst ich nicht. Dennoch habe ich diese Seite erstellt, um interessante Links rund um das Thema zu sammeln.

Einführung #

Als kurze Einführung für Neulinge in das Thema sei gesagt, daß Webseiten in HTML erstellt werden. An sich ist eine Webseite nur eine ganz normale Datei, die vom Webserver auf Anforderung ausgeliefert wird. Was jetzt mit dieser HTML-Datei gemacht wird, hängt vom Browser ab. Und da sind die Unterscheide leider riesig. In älteren HTML-Versionen (z.B. mit alten Netscape-Browsern bis zur Version 4) wurden Layout-Angaben, Farben und Fonts mit in den HTML-Text geschrieben. Dann hat man sich so langsam besonnen, daß die ursprüngliche Idee von HTML war, Inhalt und Präsentation zu trennen. Wenn alles klappt, enthält die HTML-Datei nur den reinen Content und es gibt eine CSS-Datei (oder einen abgegrenzten CSS-Bereich in der HTML-Datei), um die Präsentation zu beschreiben. In CSS schreibt man nun alles, was mit Farben, Fonts, Rahmen, Hintergründen, und Layout zu tun hat.

Diese kurze Einführung soll nicht bedeuten, daß das heute immer so gemacht würde. Es ist immer noch üblich, die Präsentation mitten in den Text der Seite hineinzuschreiben. Allerdings leidet darunter erheblich die Übersichtlichkeit und Wartbarkeit der Seite. Also sollte man sich bei der Neuerstellung von Seiten (darum gehts ja hier) bemühen, beides zu trennen.

Als dritte Komponente kann man noch Javascript sehen. hiermit ist es möglich, Programme zu schreiben, die beim Starten der Seite oder bei bestimmten Ereignissen die Seite, die CSS-eigenschaften oder den Browser manipulieren können.

Die beste deutschsprachige Einführung in das Thema ist http://de.selfhtml.org. Dort steht erstmal alles drin.

Ein grosses Problem, das in keiner CSS-Anleitung angesprochen wird, ist, daß CSS eigentlich voll SCH... ist. Die Sprache ist denkbar ungeeignet, um normale Layoutprobleme zu lösen. Fast jedes nur etwas aufwendigere Layout ist nur mit Hacks, Tricks und Browserweichen zu erreichen. Das allergrößte Problem bei der Erstellung umfangreicherer CSS-Dateien ist jedoch, daß jeder Browser seinen eigenen Befehlssatz und seine eigenen Fehler hat. Also muss man ständig um verschiedene Browser und Browserversionen herumprogrammieren.

Links #

• http://de.selfhtml.org - die deutsche Bibel zum Thema
• http://developers.whatwg.org - HTML5 für Entwickler (engl.)
• http://csszengarden.com - eine immergleiche HTML-Seite mit hunderten von CSS-Layouts - sehenswert!
• http://www.positioniseverything.net - interessante und hilfreiche Seite über CSS-Probleme
  • http://www.positioniseverything.net/easyclearing.html - Wer nicht glaubt, was Browserunterschiede sind, sollte z.B. mal das lesen
• http://www.fu2k.org/alex/css/onetruelayout/example/holygrail - Beispiel für ein dreispaltiges Layout mit wachsender Mittelspalte

spezielle CSS-Links #

• http://www.westciv.com/style_master/academy/css_tutorial/index.html - gute und komplette englische CSS-Anleitung
• http://nettuts.com/html-css-techniques/10-principles-of-the-css-masters/ - 10 ultimative CSS-Tipps (29.08.2008)?
• http://www.css4you.de - deutsche CSS-Referenz (29.08.2008)
• http://www.csszengarden.com - viele CSS-Beispiele (s.o., 29.08.2008)

Vorlagen für Web-Seiten #

• Twitter Bootstrap, wenn man ein Startup gründen will ;-)
• HTML KickStart
• Foundation 3
• Skeleton
• HTML5 Boilerplate
• HTML5 UP! - sieben verschiedene responsive HTML5 Templates
• HTML5 Bones - eine einfache Vorlage als Grundlage für das eigene Template
• Pure - ein solides CSS Template
• http://www.blueprintcss.org/ - HTML4 Template

freie Ressourcen #

Design Entwürfe

• http://www.freecsstemplates.org/ - Free CSS Templates
• http://www.oswd.org/ - Open Source Web Design
• http://www.openwebdesign.org/ - Open Web Design
• http://andreasviklund.com/templates/ - Andreas Vilund stellt mehrere Webdesigns frei zur Verfügung
• http://wp-themes.com/grey-matter/ - ein schickes Wordpress Template unter der GPL
• http://www.blueprintcss.org/ - acme wundert sich, dass er das CSS-Framework noch nicht erwähnt hat.
• http://www.1234.info/webtemplates - Multiflex Templates

• http://gemicon.net/ - 600 Icons
• http://adamwhitcroft.com/batch/ - noch 300 Icons
• http://www.freewebpageheaders.com - Bilder für Seiten-Header
• http://iconza.com - hier kann man einen Satz Icons mit passender Farbe- und Hintergrundfarbe generieren
• http://rrze-icon-set.berlios.de/ - freies Satz Icons zu IT-Themen des RRZE (Erlangen)

• http://fotogrph.com/ - Stock Images unter CC-BY Lizenz
• http://www.pdphoto.org - freie Photos
• http://www.freephotos.se - Public Domain Fotos