Webdesign – wie kann man die Technik lernen?

Das Feld der Gestaltung von Medien ist sehr weit. Wie aus meinem Lebenslauf zu ersehen, bin ich eine von vielen Selfmade-Quereinsteigerin. Manchmal erreichen mich E-Mails von – vor allem – LeserINNEN, die fragen wie ich das gemacht habe und welche Tipps ich geben könnte um z.B. die Technik der Erstellung von Webseiten zu erlernen.

Zum Thema Webdesign habe einen langen Vorlauf gehabt. Das waren Zeiten in denen ich noch ganz weit weg war von einem Gedanken mich selbständig zu machen und in denen ich bewundernd vor so mancher Webseite gestanden habe bei mir dachte: Wär das schön, wenn du das auch können würdest ! Es war ein tief gehender Herzenswunsch, der in mir brannte und immer noch brennt. Und wenn ich zurückblicke, dann ist es wohl immer wieder dieser Wille, der vorhanden sein muss, eine Leidenschaft, bei der man sich zu nichts zwingen muss und die stark genug ist, dass man sich wieder aufrappelt, wenn es mal nicht so läuft, wenn man kleine Dämpfer bekommt, wenn man enttäuscht ist und wenn man mit sich selbst ins Gericht geht und sieht, was man alles nicht kann und sich dabei eigentlich lieber in ein Mauseloch verkriechen möchte. Wenn jedoch die Leidenschaft größer ist, dann vergehen solche Tage. Und eigentlich ist das auch gar nicht so schlimm, denn für mich sind solche Zeiten auch immer Abschnitte der inneren Klärung, da muss man einfach durch. Wenn sie vorbei sind ist meist wieder richtig viel Platz für was Neues und die Erkenntnisse werden aufeinmal so klar.

Aber genug vom Philosophischen.

Ganz konkret: Wie kann man sich der Technik des Webdesigns nähern, wie kann man es lernen?

Ich gehe jetzt einfach mal davon aus, dass die Funktionsweise von html bekannt ist. Wenn nicht, hier noch mal im Schnellverfahren: Html ist keine Programmier- sondern eine Auszeichnungssprache. Es ist ein Hilfsmittel mit welchem man dem Browser einer Webseite mitteilen kann, wie er etwas darstellen soll. Um eine ganz einfache Webseite zu erstellen braucht man noch nicht einmal einen html-Editor, was die wenigesten wissen: es geht  mit primitivsten Mittelen wie  z.B. mit dem Windows-Texteditor. Da schreibt man dann das, was auf einer Webseite angezeigt werden soll rein und lädt die Inhalte via FTP auf einen Webserver hoch. Voilá.

Ein ebenso falscher wie weit verbreiteter Irrtum ist es zu glauben, dass man „Dreamweaver“ lernen muss um eine Webseite erstellen zu können. Dreamweaver ist nur einer unter vielen html-Editoren. So wie man zum Erstellen eines Briefes Word braucht, braucht man zum Erstellen einer Webseite einen html-Editor. Aber auch bei Word muss man wissen was man in den Brief reinschreibt, Word ist nur ein Werkzeug und ein html-Editor ist ebenfalls nicht mehr und nicht weniger als  ein Werkzeug. Brauchen tut man so was nicht, es erleichtert einem nur die Arbeit – wenn man mit html umgehen kann. Ich selber nutze den Webbuilder. Dieser Editor kann sich via FTP mit deinem Webspace verbinden. So bin ich in der Lage Änderungen an einer Webseite direkt auf dem Server auszuführen. Das lästige Hochladen und Überschreiben entfällt.

Kurzer Abriss zum Verständnis vom html

Wichtig zu wissen ist, dass eine Webseite einen head und einen body-Bereich hat. Wer das noch nie gesehen hat, der kann einfach mal in seinem Browser auf => Ansicht => Quelltext klicken. Das was da für die meisten Menschen aussieht wird hochwissenschaftliches und schrecklich kompliziertes, kryptisches Zeug ist im Grunde ganz einfach zu verstehen – wenn man weiß wie man das lesen muss.

Klick doch einfach mal und lasse dir den Quelltext dieser Webseite anzeigen.
Suche <head> und </head> und <body> und </body> Alles was im head Bereich steht, wird auf der Webseite nicht angezeigt, alles was im body steht, ist das was du auf einer Webseite sehen kannst – vereinfacht gesagt.

Was im head-Bereich wichtig ist

Der Doctype

Der Doctype ist wichtig und wenn du eine moderne Webseite erstellen willst. Anhand des dovtypes erkennen die Browser, wie eine Webseite gerendert werden soll. Bis vor einigen Jahren gab zwei Doctypes: xhtml strict und xhtml transitional. Inzwischen hat sich das geändert, moderne Webseiten benutzen html5.

Du solltest dich also als erstes über Doctypes schlau machen. das kannst du z.B. hier tun:
Mehr lesen zum Thema doctypes auf mediaevent

CSS-Stylesheet

Weiterhin wirst du im head-Bereich entweder CSS-Formatdefinitionen finden oder – weitaus häufiger – einen Link einer Datei, die die CSS-Formatdefintionen enthält. CSS ist die Abkürzung für CasCadingStylesheets. Das ist ein Prinzip, mit welchem man beschreiben kann wie eine Webseite aussehen soll.

Ich will kurz erläutern, was es damit auf sich hat. Im Quelltext kannst du die html Elemente sehen. Sie stehen in spitzen Klammern, den „Tags“. <p>wäre z.B. ein solches Element. P ist die Abkürzung für „paragraph“ und bedeutet „Absatz“. Wenn ich also im Quelltext folgenden Inhalt finde:

<p>Dies ist eine netter kleiner Satz<p>, dann weiß der Browser, aha, das ist ein Absatz und keine Überschrift oder Aufzählungsliste.Eigentlich ist CSS nicht notwendig, denn wenn ich schreibe <p font-face=“Arial“ color=“red“>Dies ist eine netter kleiner Satz<p>, dann weiß der Browser, dass er den Satz mit der Schrift „Arial“ schreiben und in rot darstellen soll.

Wenn man das jedoch auf diese Weise für jedes html-Element, welches man in einer Webseite verwendet machen würde, wird schnell klar, wie umfangreich der Quelltext würde. Irgendwann sieht man vor lauter Wald die Bäume nicht mehr und bei großen Webseiten ist es sehr zeitaufwändig das Aussehen der Elemente zu ändern. Hat man z.B. eine Webseite deren Links in roter Schriftfarbe dargestellt werden und möchte nun, dass diese Links blau werden, dann müsste man das für jeden Link, der sich in der Webseite befindet, einzeln machen. Und das wäre z.B. bei einer Webseite wie dieser hier so zeitaufwändig, dass ich wahrscheinlich eine ganze Woche lang damit zu tun hätte. Geht also gar nicht.

Aus diesem Grund verwenden moderne Webseiten CSS. Dabei legt man eine zentrale Datei an, in welcher für die ganze Webseite beschrieben wird, wie z.B. alle Links auszusehen haben, alle Absätze,  alle Überschriften und  alle Zitate und einfach alles, was an html-Elementen vorkommt. Durch das Prinzip der Kaskadierung ist es jedoch möglich zu differenzieren. Man wendet es an, wenn man z.B. die Absätze auf der Startseite in blau schreiben möchte, die Absätze auf einer Unterseite jedoch in rot.

Im Unterschied zu alten Webseiten, werden zum Layouten einer Webseite mit CSS die Inhalte auch nicht mehr in Tabellen gepresst sondern in Containern, den viel zietierten<div>.
Ein div (diversity) ist nichts anderes als ein Vierkant-Kasten in welchen ich meine Inhalte hineinlege. Z.B. findet man im CSS dieser Seite :  div#header.

Die Raute spricht man als ID [EI-DI], englisch „identity“ an, heißt „Kennummer“. Mit einem Punkt statt einer Rauete, also: div.header, wäre es ein div mit der Klasse „header“. Während eine ID innerhalb einer Webseite immer nur einmal vorkommen darf, dürfen Klassen mehrmals verwendet werden.

Und wenn ich nun so einen Kasten (div) mit dem Namem „header“ erstellen will, dann spreche ich in der CSS-datei über die CSS-spezielle Syntax diesen Kasten an:

Sieht dann so aus:

div#header  {
width:100%;
margin: 0 auto 0 auto;
background: #2B2D37 url(images/bg-header.png) repeat-x;
border-bottom: 10px solid #fff;}

und heißt: Der Kasten mit dem Namen „header“ soll 100% breit sein, zentriert, im Hintergrund wird ein Bild verwendet und unten hat er einen Rahmen von der Stärke 10px und der Farbe #fff (weiß). Wenn du also eine Webseite erstellen möchtest, dann solltest du dich mit CSS vertraut machen.

Deine nächste Frage wird sein: Wo kann ich CSS lernen?
Methode 1 für Unerschockene: Ins kalte Wasser springen.

Oder anders gesagt: Learning by doing. Nachdem mir die basics von CSS klar waren, habe ich mich einfach ins kalte Wasser geschmissen und unter Einsatz aller Ressourcen mein erstes WordPress-Weblog „frische-zitronen“ aufgesetzt. Es gibt für WordPress zahlreiche Templates anhand derer man viel lernen kann. Wenn du es genauso machen möchtest, dann solltest du aber jetzt nicht hergehen und gleich das tollste und eindrucksvollste Template aussuchen und dich z.B. gleich an einem magazin-theme versuchen. Probier es erstmal ein paar Nummer kleiner und nimm das standard-theme vom WordPress. Das sieht nicht so ganz so schön aus, aber wenn es dir gelingt z.B. das blaue Bild im Kopf gegen dein eigenes auszutauschen, dann hast du schon etwas verstanden und bist schon ein ganzes Stück vorangekommen.

Wie man WordPress installiert dazu findest du hier eine Anleitung:

http://wpde.org/installation/

Du solltest natürlich wissen wie man eine FTP-Verbindung einrichtet und wie man Dateirechte (Stichwort: CHMOD) ändern kann. Ich kann dir auch empfehlen auf deinem PC einen lokalen Webserver einzurichten. Dazu benutzt du xampp. Dann hast du Datenbanken so viel du willst und kannst schneller arbeiten. Wenn dir das jedoch im Moment noch zu heavy ist, dann lass es und bleib bei deinem Webspace.

Du musst es also irgendwie schaffen eine WordPress-Installation online zu stellen und ein child-theme anzulegen. Hast du das fertig, kannst du mit der CSS-Datei im child-themes Ordner spielen. Entweder du änderst sie lokal und lädst die geänderte Datei via FTP immer wieder neu auf deinen Webspace hoch (Orginal-Datei vor dem Überschreiben umbenennen oder sichern nicht vergessen) oder du änderst die Dateirechte auf 777, dann kannst du die CSS-Datei auch in der Administration von WordPress online ändern. Ich empfehle dir jedoch für den Anfang die Version mit FTP.

Probier einfach aus dies und das in der Datei mit dem Namen „style.css“ zu verändern und dabei das standard-theme von WordPress ein bisschen nach deinen eigenen Vorstellungen zu gestalten. Nach und nach kannst du auch mal versuchen andere themes zu installieren und daran lernen, wie sie aufgebaut sind.

Das alles ist natürlich ein ziemlich unkonventioneller Weg und einer, bei dem du auf viele Fehler gefasst sein musst. Es kann passieren, dass du dein Layout komplett verhackstückst, dass nichts mehr geht und du erschrocken vor dem Bildschirm hockst und eine Panikattacke bekommst, weil du denkst, dass du jetzt das Internet kaputt gemacht hast. Ist also nicht unbedingt eine Methode für Vorsichtige. Außerdem werden dir viele Dinge begegnen, bei denen du noch nicht weißt was das ist – aber glaub mir, einfach dran bleiben und weiterstochern. WordPress ist vielleicht keine klassische Anwendung für einen Einsteig in die Technik des Webdesigns, aber da es sehr weit verbreitet ist, findet du zu fast jeder Frage eine Antwort im Netz und wenn du da nicht weiterkommst, kannst du im Forum fragen. Die WordPress-Community ist sehr nett und sehr hilfsbereit – allerdings sollte man das natürlich nicht überstrapazieren.

Wenn du der Ansicht bist, dass so ein eiskalter Einstieg too much ist, dann kannst du es vielleicht etwas weniger anspruchsvoll versuchen. Schau dich mal auf http://www.oswd.org um. Da gibt es viele Templates (wähle ausschließlich solche mit xhtml und css), die du dir installieren kannst. Auch hier wieder: Probieren geht über Studieren. Template runterladen, auf den eigene Webspace hochladen und versuchen über die CSS Datei das Design nach deinen eigenen Vorstellungen zu ändern. Es sind nicht alle Templates empfehlenswert, wenn du mal weiter bist in Sachen CSS, dann wirst du es irgendwann selber merken. Zum Üben und für den Anfang reicht das jedoch vollkommen.

Methode 2 für Denker: Klassische Tutorials

TEIA kostenlose und sehr umfangreiche Lehrgänge zu bieten:
http://www.teialehrbuch.de/Kostenlose-Kurse/HTML-Grundlagen/
http://www.teialehrbuch.de/Kostenlose-Kurse/HTML-CSS/

Weitere Anlaufstellen:
http://de.html.net/tutorials/CSS/

In Sachen CSS wäre es zudem nicht verkehrt sich ein paar Bücher anzuschaffen.
Unter den Stichworten css und tutorials wirst du damit schon fast mit Büchern und tuts erschlagen. Du musst selber rausfinden, was du davon gebrauchen kannst. Wenn jedoch irgendetwas das A&O bei der Erstellung einer Webseite ist, dann bist du das selbst und dein Wille dich durchzubeißen und dranzubleiben. Es ist noch kein Meister vom Himmel gefallen, aber wer bereit ist seine Komfortzone zu verlassen, kann es schaffen. Es gibt im Netz kaum ein anderes Thema zu dem so viel erkärt und erzählt wird wie zum Thema Webdesign.

Ich habe mich seinerzeit einem Forum angeschlossen, in welchem ich hilfsbereite Leute fand, von denen ich viel gelernt habe. Ich habe Angebote gemacht zum Erstellen von grafischen Designs und dafür Hilfe in der Technik erhalten. Immer nach dem Motto: first give – than take. Später habe ich gebloggt und durch das Erbarmen einer meiner Leser, der sich meine selbstgebaute Hütte mal angeschaut hat, erst so richtig kapiert, wie das mit WordPress läuft. Ja – manchmal braucht man einfach mal nette Menschen und glückliche Zufälle die einem helfen auf die nächste Stufe zu kommen … und das Talent diese Chancen zu erkennen.

So, damit will ich meinen Beitrag vorläufig schließen. Ich habe versucht auf unterhaltsame Weise zwei mögliche Wege aufzuzeigen, wie man sich der Technik des Wendesigns nähern kann.
Wenn du noch Fragen hast, dann nur zu. Es gibt keine dummen Fragen, nur dumme Antworten. Benutze die Kommentarfunktion und wenn du selber eine Geschichte hast wie du zum Webdesign gekommen bist und wie du die Technik gelernt hast oder wenn du noch empfehlenswerte, anfängertaugliche  Quellenn nennen kannst, dann würde ich mich freuen diese zu lesen.

So long :-)

Kommentare (2)

  1. Das ist ja ein grandioser Ritt durch ein ganzes Spektrum Webdesign!

    Mein Zugang war übrigens ähnlich, auch Quereinstieg und learning by doing.

    Die erste Lektüre war ein schon etwas im Regal verstaubtes Überblicksbüchlein über HTML, CSS und Javascript – schon mit modernen Methoden, aber durchaus auch noch mit spacer.gif’s ;-). Da mir der Erstkontakt mit neuen Konzepten immer etwas mühsam ist, brauchte ich einiges Durchhaltevermögen, um die HTML-Tags und den ganzen Rest zu verdauen – obwohl in diesem Buch aus heutiger Sicht nur die absoluten Basics beschrieben waren. Dann wollte ich aber Praxis, und dazu probierte ich mit Hilfe des Editors Kompozer herum. Als Referenz diente mir selfHTML.de, das ich immer noch als hervorragende Basis zum Nachschlagen empfehlen würde. Aber nicht alles ließ sich durch Probieren erschließen. Anekdote am Rande: Es dauerte eine Weile, bis ich den Unterschied zwischen „margin“ und „offset“ verstand. „Offset“ konnte ich nirgends erklärt finden, es bezeichnete aber im Kompozer ganz einfach die Randabstände eines absolut positionierten Elements.

    Sehr bald stieß ich auf fortgeschrittenere CSS-Probleme, nämlich die Tücken des Objekts IE 6. Da half Probieren alleine wirklich nicht mehr weiter. Ausgiebige Suche im Netz war angesagt. So stieß ich auf die ganzen Avantgardisten des modernen Webdesign, ich hangelte von Quelle zu Quelle zu Quelle …. und nahm eine Menge Techniken mit. Nebenbei fand ich auch ein paar hervorragende deutsche Tutorialseiten, und schließlich stieß ich auf YAML. Die YAML-Dokumentation kam mir als vollständige, aber knapp und sehr verständlich geschriebene Zusammenfassung der wichtigsten Probleme und Lösungen gerade zur rechten Zeit, quasi als Synthese des vorher Zusammengeklaubten. Wenn man so will, habe ich mit Hilfe von YAML erst richtig CSS gelernt. Viel später übrigens habe ich mir als Nachschlagewerk „Fortgeschrittene CSS-Techniken“ von Chao/Rudel besorgt, das erschlägt dann den Rest. Sehr zu empfehlen!

    Meine Initiation in Sachen Content Management Systeme hatte ich gleich am lebenden Objekt, sprich Kunden. Es war zudem die erste Seite, die ich online stellte, noch vor meiner eigenen. Und das dauerte – ich hatte ja bis dahin noch keinen Server in Aktion gesehen (außer Xampp auf meinem Localhost natürlich), und es gibt mehr als man denkt, das beim Installieren schief laufen kann ;-). Aber irgendwann war es geschafft – und alles bestens!

    Tja, die Anfänge … Genau genommen hören sie nie auf, zumindest nicht, wenn man sich mit Webdesign beschäftigt. Das ist auch einer der Gründe, warum sich Webdesign so gut fürs autodidaktische Lernen eignet: jeder ist gezwungen, ständig dazu lernen, und weil es jeder muss und weil das Netz kommunikativ ist, gibt es auch die Ressourcen dazu.

    Aber wie Du sagst, es braucht schon eine gewisse Verbissenheit, und für diese sind Begeisterung und Neugier die beste Voraussetzung. Und wahrscheinlich muss jeder seinen eigenen Weg suchen. Im Rückblick muss ich sagen, dass für mich die Trennung, erst statische Webseiten mit HTML/CSS zu machen und dann erst PHP, Dynamik und CMS hinzu zu nehmen, viel Klarheit gebracht hat. Von vornherein mit einer WordPress-Seite zu beginnen, wäre mir zuviel der Pracht gewesen, mit Template-Tags, PHP und all dem im Schlepptau, bevor noch die grundlegenden Konzepte sitzen. Aber es ist ja nicht jeder Jeck gleich, schon gar nicht, wenn es um autodidaktisches Lernen geht …

    Was WordPress betrifft, habe ich übrigens auch sehr viel von bueltge.de gelernt. Es gibt dort wie bei Perun ein mehrteiliges Theming-Tutorial – und viele weitere Codebeispiele. Übrigens würde ich empfehlen, die Tutorials zu nutzen, um möglichst viel mit Bordmitteln, also den sogenannten Template-Tags bauen zu lernen und am Anfang möglichst wenig Fertiglösungen, sprich Widgets und Plugins, einzusetzen. Davon braucht man ohnehin noch genug.

    Du hast Dich zwar (sicher bewusst) auf deutsche Quellen beschränkt, aber eine englischsprachige möchte ich doch noch nennen: Bei css-tricks.com gibt es jede Menge sehr gute Video-Tutorials zu den verschiedensten Webdesign-Themen – und mit Videos lernt es sich nochmal so gut!

  2. Hallo Ursula,

    Ja, für mich war es ein kalter Einstieg, aber bei jedem Problem, was durch Ausprobieren entsteht (und bei dieser Methode entstehen genug davon ;-)) kann man googeln und kommt so Schritt für Schritt voran.

    Bücher habe ich inzwischen eine ganze Bibliothek und schlage auch heute noch hier und da etwas nach. Und es stimmt: Man ist niemals fertig und auch als alter Hase begegnen einem immer wieder Bugs und Probleme, die man noch nicht kannte und die man dann einfach lösen muss.

    Danke für deinen Beitrag – toll !!

Kommentare sind geschlossen.