Webdesign - Webseiten planen, gestalten - Free-Hack Library

HTML-Prototyp
TIPP: Browser-Erweiterungen zur Websiteentwicklung erleichtern
die Arbeit erheblich. Sie gestatten z. B. eine schnelle Ansicht der
div-Container, Seitenansichten bei ausgeschaltetem JavaScript,
Greyscaleansichten etc. Außerdem bieten Sie direkte Links auf
unterschiedliche Validierungstools (Abb. 7.3.1 a).
Übertragen Sie zunächst das Layoutraster aus dem Photoshopentwurf
in Ihren HTML-Editor. Gliedern Sie die Seite in die vorgesehenen
funktionalen Bereiche und legen Sie dafür jeweils
eigene div-Container an. Überlegen Sie, ob weitere Container-
Unterteilungen zur Substrukturierung sinnvoll sind.
Platzieren Sie Ihre Inhalte (Headline, Mengentext, Bilder, Navigationselemente,
Hintergrundbilder) in der HTML-Struktur.
Bestimmen Sie dann das Aussehen Ihrer Seite mit geeigneten CSS-
Definitionen. Idealerweise arbeiten Sie dabei mit einem externen
Stylesheet, in dem alle CSS-Angaben zentral verwaltet werden.
Bestimmen Sie die Basisschriftgröße des Mengentextes und leiten
Sie davon andere vorkommende Schriftgrößen mittels em- oder
%-Definitionen ab. Definieren Sie dann die Details (Zeilenabstände,
Laufweiten, Linienstärken, Aktivierungsdesigns etc.).
7.3.2 Der HTML-Quelltext
Beachten Sie bei der Erstellung des Quellcodes, dass sowohl Designer
als auch Programmierer mit diesem Dokument zurechtkommen
müssen. So ist es beispielsweise sinnvoll, diejenigen Abschnitte mit
Kommentaren zu markieren, in denen später statt des statischen
ein dynamischer Content eingebaut wird (s. Abb. 7.3.2a). Bei den
ID- und Klassennamen halten Sie sich an die vorher vereinbarten
Konventionen, so dass es nicht zu Konflikten mit dem HTML-
Quelltext und dem Stylesheet kommt.
PROTOTYPING 7
Abb. 7.3.1a: Webdeveloper Tools als Browsererweiterungen
erleichtern die Arbeit, z. B. zur Anzeige
der -Container oder der alt-Texte.
(Beispielseite: http://hammer.informatik.fhgelsenkirchen.de)
Abb 7.3.2a: Markierungen im Quellcode
Die meisten Quelltexteditoren mit Syntax-Highlighting
erlauben es, dieses den Ansprüchen
entsprechend zu konfigurieren. So finden alle
Beteiligten schnell, wonach sie suchen. Hier:
grün für Designer und blau für Programmierer.
245