Touch Tronic

B-RVL1311-12

Ihle und Schöning

Website

Die Website ist als eigenständiges Projekt parallel zum Projekt Touch Tronic erstellt worden.

Das Layout wurde vorerst auf Papier angelegt, um das grobe Seitendesign und die Platzierung der Buttons und Navigationsleisten festzulegen. Die Vorgaben für die Seitenerstellung sind dem Projektauftrag entnommen. Des Weiteren sollte kein Flash oder Java Script zum Seitenaufbau benutzt werden. Ein einheitliches Design ist grundlegend für jede Internetpräsenz.


Die Anforderungen entsprechen einer minimalen Darstellung mit 800 x 600 Pixel. Außerdem wurden die Hintergrund- und Schriftfarbe vorgegeben, da immer mehr so genannte Webdesigner dunkle Hintergründe verwenden und diese für die Augen eher unangenehm sind. Daher sind hier nur helle Farben und leichte Akzente zum Einsatz gekommen. Auch die Farben für den eigentlichen Inhalt der Website sind vorgegeben worden.

Als kleiner optischer Effekt sind Schatten, Rahmen und Farbverläufe verwendet worden, um die Seite ein wenig interessanter zu machen, aber sie dennoch modern und schlicht zu halten. Diese Seite ist statisch programmiert, das heißt, alle Elemente sind händisch in die einzelnen Seiten eingetragen und nicht automatisch von einem Server generiert. Die Seite ist auf einem Webserver abgelegt und bekommt daher keine Daten von Datenbanken oder anderen Quellen, so dass sich der Inhalt ändern könnte.

Der Quellcode der einzelnen Seiten, sprich HTML, sowie die CSS-Datei sind selbst verfasst worden. Das Programm Phase 5 diente nur als Syntax-Parser für den geschriebenen Quelltext, um kleine Schreibfehler im Code schon vorher zu erkennen. Dieser Parser kontrolliert den Quelltext (Grammatik) auf Fehleingaben. Falls ein Befehl nicht korrekt geschrieben werden sollte, wird dieser nicht farblich dargestellt.



Alle vorhandenen Schatten, Buttons und Leisten, sprich Navi, Top und Mainbox, werden über CSS dargestellt, da keine Framesets mehr benutzt werden und auch nicht sollten.
An diesem Beispiel ist sehr schön zu sehen, wie CSS strukturiert wird. Das ist der Aufbau der Navigation. Es werden die Größe und die Position der Navigationsleiste angegeben,
außerdem der Farbverlauf und der Schatten der Box.

In der Webseitenerstellung sind Framesets einfach veraltet. Sie sind aufwendiger zu warten, stellen bei Benutzung von verschiedenen Browsern manchen Inhalt schlecht dar und gehören auch nicht mehr zum XHTML-Standard. Da strikt zwischen Inhalt und Stilangaben getrennt wird, bietet sich CSS geradezu an, diese Stile auszulagern. Der Browser erkennt diese Befehle und setzt die Blockanweisungen dann in ein visuelles Seitendesign um.

Um den Inhalt für eine Auflösung von 800 x 600 Pixel darzustellen, werden Texte, Bilder und Buttons automatisch angepasst. Über diese Auflösung hinaus, die übrigens sehr veraltet ist und die auch kaum noch jemand benutzt, werden alle Objekte optimal dargestellt. Diese Funktion lässt sich auch problemlos mit CSS realisieren. In der Galerie findet man eine kleine Übersicht über den Werdegang des Projektes.
Geht man mit dem Mauszeiger über ein Bild - das ist der so genannte Hover-Effekt - erscheint ein Rahmen mit dem anzuzeigenden Bild in vergrößerter Form. Dieser Inhalt wird ebenso wie der Text in der Mainbox dargestellt und ist auch in der CSS-Datei deklariert.

Aufgrund der nicht aktuellen Software war es nicht möglich, diese Website im BFW zu erstellen. Die Browser sind so alt, dass sich verschiedenste Effekte überhaupt nicht darstellen lassen. Deshalb geschah der größte Teile in Heimarbeit.

Alle Bilder sind mit dem Programm Paint.Net bearbeitet worden. Da ihre Auflösung sehr groß war, mussten sie verkleinert werden, damit sie auf der Webseite schnell geladen werden können.
Immer mehr Webseiten arbeiten mit CSS, weil Inhalt und Stilangaben strikt geteilt werden.