Um fürs Web gestalten zu können muss man zunächst einmal CSS verstehen, denn damit legt man fest, wie eine Seite aussieht. Dafür braucht man allerdings ein gewisses Fundament was den Aufbau von HTML angeht.
Um andere Techniken (JavaScript für Interaktivität im Browser, PHP und andere Skriptsprachen für dynamisch generierte Seiten auf dem Server) kann man erst mal einen ganz großen Bogen machen, wenn es nur um Gestaltung gehen soll.
Für das Verständnis gibt es einige ziemlich gute Seiten im Netz:
https://developer.mozilla.org/en-US/docs/Web_Development/Introduction_to_Web_development
Hier gibt es gute Einführungen in HTML & CSS, außerdem eine gute Linkliste für Einführungen auf anderne Seiten. Generell ist das MDN momentan so ziemlich die Top-Anlaufstelle was Informationen zu Webentwicklung angeht.
http://docs.webplatform.org/wiki/
Eigentlich ganz ähnlich wie das MDN, auch mit guten Einführungstexten aber insgesamt noch etwas lückenhafter aber dafür nicht mit der Mozilla Foundation verbandelt.
Die nächste gute und relativ umfassende Dokumentation, auch gute Einführungstexte und gut zum Nachschlagen
Hier findet man das ganze Grundwissen, das man benötigt. Man muss es nicht auswendig lernen, es reicht zunächst, dass man ein Gefühl dafür kriegt wie das ganze funktioniert und vor allem was (im Vergleich zu herkömmlicher Bildschirm- und Printgestaltung) geht und was nicht geht.
Alles andere lernt man dann schon mit der Zeit, eben dann, wenn es gebraucht wird.
Nach dem man sich also ein bisschen eingelesen hat bleiben einem eigentlich nur zwei Dinge zu tun.
Auf den Seiten von oben gibt es jeweils auch Step-by-Step-Tutorials für einfache Seiten. Am besten, man arbeitet sich durch eins oder mehrere durch und fängt auf dieser Grundlage dann an, etwas eigenes daraus zu machen: Layouts, Farben, Schriften, grafische Elemente können hinzugefügt und angepasst werden, bis es irgendwann dann hoffentlich gefällt. Webtechniken kann man nicht besser lernen, als sie anzuwenden. Es bietet sich an sich selber dabei ein gewisses Ziel zu stecken, zum Beispiel eine eigene Portfolio-Webseite oder eine Seite zu einem Thema, die man schon immer mal im Netz sehen wollte. So bleibt die Motivation erhalten, man bekommt vielleicht einmal etwas heraus, was man auch wirklich verwenden kann und nebenbei ist es viel einfacher zu einem konkreten Thema Ideen zu finden als einfach nur eine "schöne Seite" zu erstellen.
Für alles, was man im Bereich Webentwicklung macht kann nur Google Chrome empfohlen werden, weil er die aktuell mit Abstand besten Entwickler-Tools schon mitbringt. Mit denen kann man sich auf jeder beliebigen Seite anschauen, wie die Gestaltung in HTML & CSS umgesetzt wurde. Zu den Entwicklertools gibt es eine Einführung. Wichtig ist erst mal vor allem, was auf dem Tab "Elements" passiert. Hier sieht man das HTML als einen Baum und kanns sich die entsprechend vergebenen CSS-Styles anschauen. So kann man dann sehen, wie die Gestaltung anderer Seiten umgesetzt wurde. Aber auch für die Arbeit an eigenen Projekten ist das unverzichtbar.
Es gibt viele CSS-Techniken, die immer wieder gebraucht werden und für die man das Rad nicht neu erfinden muss, hier kann man sehr gut auf die Arbeit von anderen zurückgreifen, die bestimmte Probleme gelöst haben.
Exemplarisch seien hier ein paar der wichtigeren Probleme und Lösungen aufgeführt:
- CSS Box model
- CSS Normalization & CSS Reset
- Sliding doors
- CSS Sprites
- Faux columns
- Object oriented CSS
Um gute Ergebnisse zu produzieren, braucht man die richtigen Tools.
Um mit HTML und CSS zu arbeiten, braucht man auf jeden Fall einen guten Texteditor, der einem die Arbeit erleichtert. Auf dem Mac benutzen viele den einfachen und kostenlosen TextWrangler, aber es gibt eine Menge Alternativen, die man (später) ausprobieren kann, und die teilweise mehr Funktionalität bieten.
Wichtig ist bei HTML, dass es valide ist, das heißt den Spezifikationen der Sprache entspricht, damit Browser es auch verstehen können. Mit dem Validator vom World Wide Web Consortium (W3C) kann man überprüfen, ob der HTML-Code Fehler enthält und erhält Vorschläge, woran das liegen kann, falls das der Fall ist.
http://jigsaw.w3.org/css-validator/
Es gibt auch einen Validator, der das gleiche für CSS-Code leistet. Während man bei HTML allerdings schon eine sehr gute Entschuldigung haben muss, wenn man Code schreibt, der nicht valide ist, ist das bei CSS etwas anders: hier gibt es viele Fälle, in denen auch nicht-valider Code sinnvoll (und nötig) sein kann, z.B. um ältere Browser zu unterstützen. Dennoch sollte man versuchen seinen Code zu validieren (und kriegt hier gute Hinweise, wenn mal etwas nicht funktioniert, wie man es sich erhoffte).
Natürlich braucht man auch ein Bildbearbeitungsprogramm, Photoshop und Gimp bieten sich hierfür an. Einige Gestalter schwören auch darauf Seitenentwürfe mit Adobe Fireworks statt Photoshop zu erstellen, weil dieses auf Gestaltung für das Web zugeschnitten ist.
Im Web konnte man ohne weiteres lange Zeit nur die Schriften benutzen, die auf (fast) jedem Rechner vorhanden sind, die sogenannten Web Safe Fonts. Dabei gibt man immer auch eine Liste von Fallback-Fonts an, falls die gewünschte nicht zur Verfügung stehen sollte. Glücklicherweise hat sich die technische Situation in den letzten Jahren sehr verbessert, so dass man mittlerweile problemlos viele Fonts einsetzen kann. Diese müssen jedoch immer auch als Webfont zur Verfügung gestellt werden, was man meist über einen Dienstleister macht. Viele (und gute) freie Fonts findet man bei Google Web Fonts aber auch bei Adobe Edge Web Fonts oder FontSquirrel. Viele aus dem Print bekannte, kommerzielle Schriften bekommt man zum Beispiel über Typekit und Fontdeck.
Frameworks mit denen man schneller zum Ergebnis kommt werden heute ziemlich oft verwendet, es gibt gute Gründe dafür und dagegen. Hat man sich dafür entschieden eines zu benutzen sind diese hier wahrscheinlich interessant, vertreten aber vollkommen verschiedene Ansätze.
In jedem Fall kann man hier viel lernen und ein Framework als Basis für die eigene Arbeit oder auch nur einzelne Teile davon benutzen.
Die Webtechnologie befindet sich immer im Umbruch, weshalb es sich lohnt, hier auf dem laufenden zu bleiben. Deshalb im folgenden eine kurze Liste von empfehlenswerten Portalen, die über neue Entwicklungen berichten (und sich auch zum Nachschlagen gut machen).