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 \u2013 vor allem \u2013 LeserINNEN, die fragen wie ich das gemacht habe und welche Tipps ich geben k\u00f6nnte um z.B. die Technik der Erstellung von Webseiten zu erlernen.<\/p>\n
Zum Thema Webdesign habe einen langen Vorlauf gehabt. Das waren Zeiten in denen ich noch ganz weit weg war von einem Gedanken mich selbst\u00e4ndig zu machen und in denen ich bewundernd vor so mancher Webseite gestanden habe bei mir dachte: W\u00e4r das sch\u00f6n, wenn du das auch k\u00f6nnen w\u00fcrdest ! Es war ein tief gehender Herzenswunsch, der in mir brannte und immer noch brennt. Und wenn ich zur\u00fcckblicke, 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\u00e4uft, wenn man kleine D\u00e4mpfer bekommt, wenn man entt\u00e4uscht ist und wenn man mit sich selbst ins Gericht geht und sieht, was man alles nicht<\/strong> kann und sich dabei eigentlich lieber in ein Mauseloch verkriechen m\u00f6chte. Wenn jedoch die Leidenschaft gr\u00f6\u00dfer ist, dann vergehen solche Tage. Und eigentlich ist das auch gar nicht so schlimm, denn f\u00fcr mich sind solche Zeiten auch immer Abschnitte der inneren Kl\u00e4rung, da muss man einfach durch. Wenn sie vorbei sind ist meist wieder richtig viel Platz f\u00fcr was Neues und die Erkenntnisse werden aufeinmal so klar.<\/p>\n Aber genug vom Philosophischen.<\/p>\n 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\u00a0 mit primitivsten Mittelen wie\u00a0 z.B. mit dem Windows-Texteditor. Da schreibt man dann das, was auf einer Webseite angezeigt werden soll rein und l\u00e4dt die Inhalte via FTP auf einen Webserver hoch. Voil\u00e1.<\/p>\n Ein ebenso falscher wie weit verbreiteter Irrtum ist es zu glauben, dass man „Dreamweaver“ lernen muss um eine Webseite erstellen zu k\u00f6nnen. 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\u00a0 ein Werkzeug. Brauchen tut man so was nicht, es erleichtert einem nur die Arbeit – wenn<\/strong> man mit html umgehen kann. Ich selber nutze den Webbuilder.<\/a> Dieser Editor kann sich via FTP mit deinem Webspace verbinden. So bin ich in der Lage \u00c4nderungen an einer Webseite direkt auf dem Server auszuf\u00fchren. Das l\u00e4stige Hochladen und \u00dcberschreiben entf\u00e4llt.<\/p>\n Wichtig zu wissen ist, dass eine Webseite einen head<\/strong> und einen body<\/strong>-Bereich hat. Wer das noch nie gesehen hat, der kann einfach mal in seinem Browser auf => Ansicht => Quelltext<\/strong> klicken. Das was da f\u00fcr die meisten Menschen aussieht wird hochwissenschaftliches und schrecklich kompliziertes, kryptisches Zeug ist im Grunde ganz einfach zu verstehen \u2013 wenn man wei\u00df wie man das lesen muss.<\/p>\n Klick doch einfach mal und lasse dir den Quelltext dieser Webseite anzeigen. 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\u00e4ndert, moderne Webseiten benutzen html5.<\/p>\n Du solltest dich also als erstes \u00fcber Doctypes schlau machen. das kannst du z.B. hier tun: Weiterhin wirst du im head-Bereich entweder CSS-Formatdefinitionen<\/strong> finden oder \u2013 weitaus h\u00e4ufiger \u2013 einen Link einer Datei, die die CSS-Formatdefintionen enth\u00e4lt. CSS ist die Abk\u00fcrzung f\u00fcr CasCadingStylesheets. Das ist ein Prinzip, mit welchem man beschreiben kann wie eine Webseite aussehen soll.<\/p>\n Ich will kurz erl\u00e4utern, was es damit auf sich hat. Im Quelltext kannst du die html Elemente sehen. Sie stehen in spitzen Klammern, den „Tags“. <p>w\u00e4re z.B. ein solches Element. P ist die Abk\u00fcrzung f\u00fcr „paragraph“ und bedeutet „Absatz“. Wenn ich also im Quelltext folgenden Inhalt finde:<\/p>\n <p>Dies ist eine netter kleiner Satz<p>, dann wei\u00df der Browser, aha, das ist ein Absatz und keine \u00dcberschrift oder Aufz\u00e4hlungsliste.Eigentlich ist CSS nicht notwendig, denn wenn ich schreibe <p font-face=“Arial“ color=“red“>Dies ist eine netter kleiner Satz<p>, dann wei\u00df der Browser, dass er den Satz mit der Schrift „Arial“ schreiben und in rot darstellen soll.<\/p>\n Wenn man das jedoch auf diese Weise f\u00fcr jedes html-Element, welches man in einer Webseite verwendet machen w\u00fcrde, wird schnell klar, wie umfangreich der Quelltext w\u00fcrde. Irgendwann sieht man vor lauter Wald die B\u00e4ume nicht mehr und bei gro\u00dfen Webseiten ist es sehr zeitaufw\u00e4ndig das Aussehen der Elemente zu \u00e4ndern. Hat man z.B. eine Webseite deren Links in roter Schriftfarbe dargestellt werden und m\u00f6chte nun, dass diese Links blau werden, dann m\u00fcsste man das f\u00fcr jeden Link, der sich in der Webseite befindet, einzeln machen. Und das w\u00e4re z.B. bei einer Webseite wie dieser hier so zeitaufw\u00e4ndig, dass ich wahrscheinlich eine ganze Woche lang damit zu tun h\u00e4tte. Geht also gar nicht.<\/p>\n Aus diesem Grund verwenden moderne Webseiten CSS. Dabei legt man eine zentrale Datei an, in welcher f\u00fcr die ganze Webseite beschrieben wird, wie z.B. alle<\/strong> Links auszusehen haben, alle <\/strong>Abs\u00e4tze,\u00a0 alle<\/strong> \u00dcberschriften und\u00a0 alle <\/strong>Zitate und einfach alles, was an html-Elementen vorkommt. Durch das Prinzip der Kaskadierung ist es jedoch m\u00f6glich zu differenzieren. Man wendet es an, wenn man z.B. die Abs\u00e4tze auf der Startseite in blau schreiben m\u00f6chte, die Abs\u00e4tze auf einer Unterseite jedoch in rot.<\/p>\n 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>. Die Raute spricht man als ID [EI-DI], englisch „identity“ an, hei\u00dft „Kennummer“. Mit einem Punkt statt einer Rauete, also: div.header, w\u00e4re es ein div mit der Klasse „header“. W\u00e4hrend eine ID innerhalb einer Webseite immer nur einmal vorkommen darf, d\u00fcrfen Klassen mehrmals verwendet werden.<\/p>\n Und wenn ich nun so einen Kasten (div) mit dem Namem „header“ erstellen will, dann spreche ich in der CSS-datei \u00fcber die CSS-spezielle Syntax diesen Kasten an:<\/p>\n Sieht dann so aus:<\/p>\n und hei\u00dft: 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\u00e4rke 10px und der Farbe #fff (wei\u00df). Wenn du also eine Webseite erstellen m\u00f6chtest, dann solltest du dich mit CSS vertraut machen.<\/p>\n 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\u00fcr WordPress zahlreiche Templates anhand derer man viel lernen kann. Wenn du es genauso machen m\u00f6chtest, 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\u00f6n 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\u00fcck vorangekommen.<\/p>\n http:\/\/wpde.org\/installation\/<\/a><\/p>\n Du solltest nat\u00fcrlich wissen wie man eine FTP-Verbindung<\/strong> einrichtet und wie man Dateirechte<\/strong> (Stichwort: CHMOD) \u00e4ndern kann. Ich kann dir auch empfehlen auf deinem PC einen lokalen Webserver einzurichten. Dazu benutzt du xampp<\/a>. 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.<\/p>\n 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 \u00e4nderst sie lokal und l\u00e4dst die ge\u00e4nderte Datei via FTP immer wieder neu auf deinen Webspace hoch (Orginal-Datei vor dem \u00dcberschreiben umbenennen oder sichern nicht vergessen) oder du \u00e4nderst die Dateirechte auf 777, dann kannst du die CSS-Datei auch in der Administration von WordPress online \u00e4ndern. Ich empfehle dir jedoch f\u00fcr den Anfang die Version mit FTP.<\/p>\n Probier einfach aus dies und das in der Datei mit dem Namen „style.css“ zu ver\u00e4ndern 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.<\/p>\n Das alles ist nat\u00fcrlich ein ziemlich unkonventioneller Weg und einer, bei dem du auf viele Fehler gefasst sein musst. Es kann passieren, dass du dein Layout komplett verhackst\u00fcckst, 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\u00fcr Vorsichtige. Au\u00dferdem werden dir viele Dinge begegnen, bei denen du noch nicht wei\u00dft was das ist \u2013 aber glaub mir, einfach dran bleiben und weiterstochern. WordPress ist vielleicht keine klassische Anwendung f\u00fcr 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<\/a> fragen. Die WordPress-Community ist sehr nett und sehr hilfsbereit \u2013 allerdings sollte man das nat\u00fcrlich nicht \u00fcberstrapazieren.<\/p>\n 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<\/a> um. Da gibt es viele Templates (w\u00e4hle ausschlie\u00dflich solche mit xhtml und css), die du dir installieren kannst. Auch hier wieder: Probieren geht \u00fcber Studieren. Template runterladen, auf den eigene Webspace hochladen und versuchen \u00fcber die CSS Datei das Design nach deinen eigenen Vorstellungen zu \u00e4ndern. Es sind nicht alle Templates empfehlenswert, wenn du mal weiter bist in Sachen CSS, dann wirst du es irgendwann selber merken. Zum \u00dcben und f\u00fcr den Anfang reicht das jedoch vollkommen.<\/p>\n TEIA kostenlose und sehr umfangreiche Lehrg\u00e4nge zu bieten:<\/strong>Ganz konkret: Wie kann man sich der Technik des Webdesigns n\u00e4hern, wie kann man es lernen?<\/h3>\n
Kurzer Abriss zum Verst\u00e4ndnis vom html<\/h3>\n
\nSuche <head> und <\/head> und <body> und <\/body> Alles was im head<\/strong> Bereich steht, wird auf der Webseite nicht angezeigt, alles was im body<\/strong> steht, ist das was du auf einer Webseite sehen kannst \u2013 vereinfacht gesagt.<\/p>\nWas im head-Bereich wichtig ist<\/h4>\n
Der Doctype<\/h5>\n
\nMehr lesen zum Thema doctypes auf mediaevent<\/a><\/p>\nCSS-Stylesheet<\/h5>\n
\nEin div (diversity) ist nichts anderes als ein Vierkant-Kasten in welchen ich meine Inhalte hineinlege. Z.B. findet man im CSS dieser Seite :\u00a0 div#header.<\/p>\ndiv#header {\r\nwidth:100%;\r\nmargin: 0 auto 0 auto;\r\nbackground: #2B2D37 url(images\/bg-header.png) repeat-x;\r\nborder-bottom: 10px solid #fff;}<\/pre>\nDeine n\u00e4chste Frage wird sein: Wo kann ich CSS lernen?
\nMethode 1 f\u00fcr Unerschockene: Ins kalte Wasser springen.<\/h3>\nWie man WordPress installiert dazu findest du hier eine Anleitung:<\/h4>\n
Methode 2 f\u00fcr Denker: Klassische Tutorials<\/h3>\n
\nhttp:\/\/www.teialehrbuch.de\/Kostenlose-Kurse\/HTML-Grundlagen\/<\/a>
\nhttp:\/\/www.teialehrbuch.de\/Kostenlose-Kurse\/HTML-CSS\/<\/a><\/p>\n