= 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|http://twitter.github.com/bootstrap/], wenn man ein Startup gründen will ;-)
* [HTML KickStart|http://www.99lime.com/]
* [Foundation 3|http://foundation.zurb.com/]
* [Skeleton|http://www.getskeleton.com/]
* [HTML5 Boilerplate|http://html5boilerplate.com/]
* [HTML5 UP!|http://html5up.net/] - sieben verschiedene responsive HTML5 Templates
* [HTML5 Bones|http://html5bones.com/] - eine einfache Vorlage als Grundlage für das eigene Template
* [Pure|http://purecss.io/] - 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|http://use.perl.org/~acme/journal/35568] wundert sich, dass er das CSS-Framework noch nicht erwähnt hat.
* [http://www.1234.info/webtemplates] - Multiflex Templates

==== Grafiken ====
* [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)

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

\\
[{Tag Web HTML}]