Nun, da Ihr wisst, was Euch in diesem Workshop erwartet und Euch hoffentlich gut darauf vorbereitet habt, fangen wir doch direkt mit der ersten Lektion an.
Ich benutze z. Z. den Editor Phase 5, um Webseiten zu schreiben. Wer schon Erfahrung mit einem anderen Programm hat, hat einen Vorteil und sollte sein Programm weiter nutzen. Ich werde hier nicht weiter auf Phase-spezifische Details eingehen. Studenten relevanter Fächer (also Fächer, die sich mit IT, Computer, dem Ingenieurswesen oder ähnlichen Dingen beschäftigen) haben oftmals die Möglichkeit, sich über den MSDNAA kostenlos Software zu beschaffen. Auf der Homepage sind alle berechtigten Fächer und teilnehmenden Universitäten aufgelistet. (Die Universität zu Köln nimmt auf jeden Fall mit einigen Fächern teil.)
Falls Sie bereits einen Editor haben, überspringen Sie den nächsten Teil.
Um bspw. den Phase 5 zu installieren, müssen Sie nur den Anweisungen folgen. Laden Sie sich den Editor auf der Homepage herunter und öffnen Sie die heruntergeladene Datei (meist setup.exe). Duch den Rest werden sie ganz leicht geleitet.
Während das Programm nun installiert wird (das geht bei Phase eigentlich recht schnell), beginnen Sie mit der eigentlichen heutigen Lektion.
Jede Homepage findet ihren Anfang nicht in einem Editor, sondern für gewöhnlich auf einem ganz normalen Blatt Papier. Und ob Sie es glauben oder nicht, dieser Teil wird auf die gesamte Zeit, die Sie mit dem Erstellen Ihrer Homepage verbringen werden, gerechnet wahrscheinlich am meisten Aufwand erfordern, es sei denn, Sie sind einer derjenigen, die spontan ein perfektes Bild im Kopf haben und es sofort aufmalen können.
Sind Sie eher jemand wie ich, der immer und immer wieder Kleinigkeiten findet, die es zu verbessern gilt, versuchen Sie, sich von Ihren Vorstellung von Perfektion ein Stück weit zu trennen und erst einmal einfach kreativ zu sein.
Denn im allerersten Schritt jeder Homepage, wird zunächst aufgemalt, wie die Seite ungefähr aussehen soll. Ungefähr.
Im ersten Teil haben Sie bereits alle wichtigen Elemente, die Ihre Homepage enthalten soll, zusammengetragen und sich versucht vorzustellen, wie das Endergebnis aussehen soll.
Im zweiten Teil wird es um eine erste, nicht-digitale Realisierung dieser Vorstellungen gehen.
Machen wir uns aber zunächst einmal mit dem grundlegenden Aufbau einer Homepage vertraut. Um sich nebenher etwas inspirieren zu lassen, surfen Sie einfach durchs Internet, rufen Sie Homepages von Personen oder Institutionen auf, die dem von Ihnen gewählten Schema am ehesten entsprechen.
Eine Homepage zieht sich über den ganzen Bildschirm. Bildschirm ist aber nicht gleich Bildschirm! Für Neulinge auf diesem Gebiet sei zu sagen: für den Aufbau einer Homepage ist es tatsächlich wichtig, sich immer wieder bewusst zu machen, dass jeder Nutzer einen anderen Bildschirm hat.
Zentral ist natürlich die Größe: Auf einem Netbook z. B. werden Internetseiten kleiner dargestellt, hat man das nicht von Anfang an bedacht, kann es passieren, dass die Seite entweder völlig verzerrt oder nur der linke obere Teil angezeigt wird.
Bedenken sollte man aber auch, dass eine Seite auf einem großen Bildschirm viel kleiner wirken kann, als auf einem kleinen.
Die fertige Seite wird aus vielen Bereichen bestehen, die jeder für sich aus weiteren Bereiche oder Inhalt bestehen werden. Diese Bereiche kann man von einander abgrenzen, durch Raum oder aber durch Linien.
Doch kann ein Haufen Trennlinien eine Seite "zukleistern", wohingegen zu wenig Trennung unübersichtlich wirken kann. Hieran will gedacht werden, wenn man eine Homepage gestaltet.
Bei der Wahl der richtigen Farben (näheres später) sollte man ebenfalls nicht außer Acht lassen, dass eine Seite schnell wie ein Wasserfarbkasten aussehen kann, der sprichwörtlich in den Augen brennt.
Und auch bei der Schrift sollte man sich nicht zu viel Abstruses vornehmen: denn letztendlich will man eine Seite ja lesen und nicht nur angucken.
Und obwohl die eigentliche Arbeit an diesen Kleinigkeiten erst später beginnt, sollte man sich Gedanken darüber machen.
Für gewöhnlich hat eine Homepage eine Navigation: eine Liste aus Stichpunkten, gut sichtbar angebracht, die der Übersichtlichkeit der Homepage und dem schnellen Auffinden einzelner Themenbereiche dienen.
Und da war auch schon das Stichwort: gut sichtbar angebracht sollte die Navigation sein und übersichtlich.
Die meisten packen ihre Navigation an die Seite (meist links) oder horizontal an den oberen Rand. Nach oben und nach links schaut der Mensch zuerst, denn das ist die allgemeine Leserichtung (was nicht bedeutet, dass in China oder Japan die Navigation rechts stehen sollte, auch dort schreibt und liest man in den neueren Medien von links nach rechts). So kann man eigentlich nichts falsch machen.
Mit der Übersichtlichkeit hingegen kann so einiges schiefgehen. Ich erinnere mich gut an einige große Internetseiten, die so viel Inhalt auf so wenig Platz zu pressen versuchten, dass man sich im Menü so gar nicht mehr zurecht fand. Die Navigation sollte kompakt sein, man sollte aber auch versuchen, sie nicht allzu sehr zu komprimieren. Hier und da vielleicht lieber versuchen, Inhalt unter einem anderen Oberbegriff zusammen zu fassen.
Und da wären wir auch: Oberbegriffe.
Denken Sie in Kategorien! "Was ich gerne mache" wird zu "Hobbies", "Womit ich mich gut auskenne" wird zu "Fachgebiete". Eine längere Überschrift können Sie später im Inhalt einfügen.
Hier auch wieder der Tipp: schauen Sie sich Webseiten an und beurteilen Sie selbst, was Sie als Leser der Seite gut und bequem finden und was Sie eher stört. Versuchen Sie dies bei Ihren Überlegungen mit ein zu beziehen.
Und was Sie sich letztendlich auch noch überlegen sollten: wo soll welcher Inhalt eigentlich hin?
Muss wirklich alles in die Navigation oder wäre nicht ein Button wo anders auf der Seite die bessere Wahl?
Wo bringe Verknüpfungen zu anderen Seiten an (viele Vernetzen Portale wie Facebook oder Twitter direkt mit ihrer Homepage), sodass sie gut sichtbar sind, aber nicht stören?
Über welchen Raum soll sich Text auf meiner Seite erstrecken? Soll er zentral von oben nach ganz unten laufen (bietet sich bei viel Text an) oder sollte er in einem oder mehreren kleineren "Blöcken" verteilt sein?
Möchten Sie vielleicht später eine Hintergrundgrafik verwenden, die man gut sehen soll? Dann sollten Sie den Textbereich auf ein kleineres Fenster begrenzen.
Oder bevorzugen Sie einfach ein eher minimalistisches Bild und möchten den gesamten "Körper" ihrer Seite auf eine kleine Fläche legen?
Machen Sie sich ruhig länger Gedanken, probieren Sie Alternativen aus, versuchen Sie, sich nicht an einem bestimmten Bild festzukrallen.
Ein kleiner Zusatz zu den "Bereichen", die ich die ganze Zeit anspreche.
Im Web kommt man heute kaum mehr ohne die sogenannten "divs" aus. Divs (ein div) sind Bereiche im Raum ihres Browsers, die technisch zusammengehören.
Nehmen wir an, Sie wollen eine Seite mit einer Navigation, einem Inhaltsbereich, einem Header (der "Kopf" ihrer Seite) und einem Footer (quasi die Fußzeile) erstellen.
Würden Sie diese Bereiche einfach hintereinander notieren, sähe ihre Homepage wie eine bloße Untereinanderreihung verschiedener Inhalte aus. Denn im Browser steht alles zunächst nebeneinander, wird der Platz nach rechts hin jedoch knapp, wird der Inhalt nach unten verschoben. Übrigens etwas, was Sie sich für später merken sollten.
Divs sind deswegen hilfreich, weil man sie mithilfe von CSS formatieren und an eine bestimmte Position im Browser setzen kann, sodass die Seite dynamischer wirkt und sich viel mehr Möglichkeiten, kreativ zu sein, bieten. Überhaupt kommt heute kaum mehr jemand ohne CSS aus (auch wenn man gewisse Formatierungen des Textes und auch Bereiche, mithilfe von Tabellen, nur mit HTML bewerkstelligen kann).
Wer noch mehr Dynamik will, sollte sich allerdings irgendwann mit Programmiersprachen auseinandersetzen (z. B. Javascript und PHP). Das behandle ich in diesem Anfängerworkshop allerdings nicht.
Wir nehmen uns für unsere Beispielseite also zunächst einen großen Bereich (div1), in den wir dann divs für Navigation, Inhaltsbereich, Header und Footer (div2 bis div5) unterbringen. Und weil die Navigation sich alleine links so gut macht, packen wir den Rest mal in ein separates div6. Möchten Sie, dass der Footer direkt unter dem Inhalt ist? Dann machen Sie noch einen div7, in den Sie die divs für Inhalt und Footer reinpacken.
Die Sache mit divs ist, dass man sie jedes für sich bearbeiten kann. Sie können bei dem Beispiel oben später also nicht nur die einzelnen divs für Navigation etc. bearbeiten, sondern auch div1, das um die anderen divs herum liegt und auch div7, das zwei andere divs beinhaltet. So können Sie z. B. Inhalt und Footer insgesamt an eine bestimmte Stelle schieben und vielleicht auch einen gemeinsamen Rand (border) einrichten, aber auch jedes der beiden divs für sich noch einmal mit einzelnen Eigenschaften versehen.
Um das Ganze mit einem Beispiel mit Ihnen ganz sicher bekannten dingen zu verdeutlichen:
Stellen Sie sich vor, Sie haben einen großen Karton. In diesem Karton wollen Sie folgende Dinge packen: zwei Paar Schuhe, fünf Bücher, einen weiteren kleinen Karton und ein Bild.
Das Bild könnten Sie einfach irgendwo an den Rand tun, den kleinen Karton stellen Sie wahrscheinlich auf den Boden des großen. Die fünf Bücher werden Sie wahrscheinlich in eine Tasche oder Tüte packen oder zumindest in einer Ecke übereinander stapeln. Die Schuhe könnten Sie eigentlich einfach oben drauf werfen, aber wir wollen ja Ordnung halten und nichts dreckig machen, also packen wir die Schuhe, wer mag auch die einzelnen Paare, in eine Tüte und legen sie dann in den Karton.
Heraus kommt eine Art System: Dinge, die einfach gut in Kartons passen und nicht weiter stören, können leicht an den Rand gelegt werden (so wie z. B. unsere Navigation). Dinge, die zwar nicht einzeln verpackt werden müssen, aber dennoch zusammen bequemer zu lagern sind, werden zusammen verpackt (wie unser div6 für Inhalt, Header und Footer). Die Schuhe fallen ein wenig aus dem Rahmen: es sind nicht zwei gleiche Paare, dennoch sind beides Schuhe. Und so bietet es sich an, beides zusammen zu fassen (wie man es mit dem Inhalt und dem Footer machen könnte). Und wenn Sie mal einen kleinen Karton haben, den man ganz einfach verstauen kann, passt er überall rein: neben die Bücher, unter die Schuhe, neben das Bild oder auch oben drauf.
Mit einer Internetseite verhält es sich... ähnlich. Es ist, als würden Sie einen großen Karton mit vielen kleineren Dingen füllen und müssten darauf achten, was zusammengehört und was einfach zusammenpasst.
Haben Sie nun endlich eine allgemeine Vorstellung darüber gefunden, wie ihre Homepage aussehen soll, nehmen Sie sich ein Blatt Papier und einen Bleistift und fangen Sie an, ihre Vorstellungen aufzuzeichnen.
Fangen Sie an mit ihrem Bildschirm: zeichnen Sie ein großes Rechteck.
Darin platzieren Sie zunächst die nötigen Bereiche (divs) und darin die einzelnen Elemente (Navigation etc.). Keine Sorge, Sie können alles später noch ändern. Wichtig ist an dieser Stelle, dass Sie die Aufteilung physisch parrat haben, um später Änderungen vorzunehmen oder Notizen daran zu machen.
Nun denn, fangen Sie an! Beginnen Sie, mit Ihrer eigenen Homepage!
