Im folgenden finden Sie die schriftliche Hausarbeit im Rahmen meiner Ersten Staatsprüfung für das Lehramt für die Sekundarstufe II BK.

Thema: Erstellung einer Web-Seite
Verfasser: Christian Schell (April, 2007)
Themensteller: Prof. Dr. Ingo Grün
Universität Duisburg-Essen, Standort Essen
Umfang: 147 Seiten
Note: 1.0

Webdesign ist die gestalterische Möglichkeit, Informationen auf einem virtuellen Feld optisch attraktiv und sinnvoll zu präsentieren. Künstler dürfen sich in ihren gestalterischen Möglichkeiten frei entfalten. Der Webdesigner hingegen ist an Regeln gebunden, um die er ein gestalterisches Konstrukt kreiert.
Diese Examensarbeit beschäftigt sich nicht nur mit der digitalen Umsetzung - vom Scribble bis hin zur fertigen Webseite mit (X)HTML und CSS. Webdesign ist die Verbindung von Ästhetik und Informationsgehalt unter Beachtung der Regeln von Umsetzbarkeit, Benutzerfreundlichkeit (Usability) und Zugänglichkeit (Accessibility).

Diese Ausarbeitung soll Privatpersonen, jungen dynamischen Klein-Unternehmern und Firmen die Möglichkeit geben, sich im World Wide Web optimal zu präsentieren. Sie werden Stück für Stück in die Kunst der Erstellung einer Webseite eingeführt und lernen Grundlegendes über

• das World Wide Web,
• die Planung von Webseiten,
• die Auszeichnungssprache (X)HTML,
• Cascading Style Sheets (CSS) und
• die Gestaltung einer Webseite.

Zielgruppe:

"Ein langer Weg beginnt mit dem ersten Schritt." Laotse

Diese Arbeit ist im Großen und Ganzen für Webdesign-Einsteiger gedacht, die das Erstellen von Webseiten mit Webstandards erlernen möchten. Bewusst wird hier auf die Einbeziehung von Skriptsprachen wie PHP und Datenbankanbindungen wie MySQL verzichtet. Mit HyperText Markup Language (HTML) lassen sich rein statische, nicht aber dynamische Seiten (Gästebücher, Foren, Portale etc.) realisieren. Es ist eine Content-based Markup Language, die als Standard Generalized Markup Language (SGML) definiert ist.

Als SGML bezeichnet man ein Auszeichnungsverfahren für elektronische Texte mit Hilfe einfacher Kommandos, die anschließend von einem Programm in konkrete HTML-Befehle umgesetzt werden. Die Auszeichnungssprachen HTML und XHTML (Extensible Hypertext Markup Language) haben somit die Aufgabe, die logischen Strukturen eines Dokuments zu beschreiben. Dazu gehören Kapitel, Unterkapitel, Absätze, Querverweise zu anderen Dokumenten und dergleichen mehr.
Das zieht einige Nachteile mit sich, hat jedoch im Gegenzug für den Neuling im Webdesign auch einen großen Vorteil: Er muss keine Angst vor Computereindringlingen (sogenannten BlackHat-Hackers) haben, da der Code remote (von außen) nicht verändert werden kann. Man muß sich also vor nichts scheuen und kann unbesorgt auch einmal kleine Fehler begehen. Wie sagt man so schön: "Aus Fehlern lernt man"!

Im Laufe der Arbeit sollte auch ab und zu der Quelltext einbezogen werden. Die Bezeichnungen (X)HTML, SGML usw. lassen auf kompliziertes "Fachchinesisch" schließen. Hinter die Fassade geschaut, stellt man schnell fest, dass jedermann die Grundlagen mit schnell sichtbarem Erfolg erlernen kann.

Die Lektüre setzt somit das grundlegende Interesse voraus, sich mit Web-Technologien und Web-Standards auseinander setzen zu wollen, vor allem mit den Sprachen XHTML und CSS.

Möglichkeiten und Grenzen im Webdesign:
Bei der Erstellung von Webseiten gerät man schnell an einen Punkt, wo man glaubt, "ich kann nicht". Möchte man zum Beispiel wie im Printdesign Text um eine Grafik fließen lassen, so treten schnell Probleme auf. In meiner Examensarbeit möchte ich ihnen unter anderem ein paar kleine Tricks zeigen, mit denen sich fast jedes Design in HTML umsetzen läßt.

Wie diese Arbeit aufgebaut ist:
Webdesign ist ein sehr breit gefächertes Thema. Darum kann diese Arbeit auch nicht den Anspruch auf Vollständigkeit erheben. Es lassen sich unmöglich auf 150 Seiten sämtliche gestalterischen Konzepte und Themen zur Umsetzung in aller Tiefe beschreiben. Allein über Bulletproof Webdesign, Barrierefreies Webdesign, Farben im Webdesign, (X)HTML ... lassen sich gut und gerne 500 Seiten starke Bücher schreiben.
In dieser Examensarbeit wird das Augenmerk jedoch auf die elementaren Gesichtspunkte hinsichtlich der Erstellung einer Webseite gelegt.

Nutzen sie diese Informationen für die Erstellung einer erfolgreichen privaten Website.

1. Einführung
   1. Bedeutung des Mediums Internet
   2. Geschichte des World Wide Web
   3. Die Technologie des WWW: Das Client-Server-Prinzip und das OSI-Referenzmodell
2. Planung von Webseiten
   1. Checkliste für Webdesigner
   2. Pfade, Dateinamen, Grafikformate und andere Konventionen im World Wide Web
   3. Auswahl der richtigen Werkzeuge
   4. Informations-Design: Die Zielgruppe verstehen
   5. Layout und Seiten-Navigation
3. Farb- und Form-Gestaltung
   1. Grundlagen der Farb- und Formgestaltung
   2. Hexadezimale Farben
   3. Browserunabhängige Farben
4. HTML-Dokumente gestalten
   1. Printdesign versus Webdesign: Möglichkeiten und Grenzen im WWW
   2. Inhalte positionieren mit XHTML
   3. Grundlagen in Cascading Style Sheets (CSS)
5. Online stellen
   1. Hoster und Domains
   2. Die Benutzung eines FTP-Clients
   3. Rechtliche Aspekte
6. Professionelles Webdesign: Wie geht es weiter?
   1. Bulletproof Webdesign
   2. Barrierefreies Webdesign
   3. Interaktivität mit Scriptsprachen
   4. Flash
7. Literaturverzeichnis
8. Anhang
   1. Fachbegriffe für Webdesigner
   2. Sonderzeichen - ASCII und HEX-Code
   3. Barrierefreie Informationstechnik-Verordnung (BITV)
   4. Interview mit dem Webdesigner Rouven Kegel