Schritt für Schritt zur fertigen Website

Im Folgenden findest Du eine Anleitung zur Herangehensweise beim Erstellen eines Webauftritts. Natürlich ist das nur eine von verschiedenen Möglichkeiten und unterschiedliche Aufträge verlangen eventuell spezielle Arbeitsabläufe – vor allem, wenn man mit Content Management Systemen arbeitet. Aber als Grundlage ist die untenstehende Anleitung gut zu gebrauchen. Und so geht's ...

1. Lege Dir als Erstes eine geeignete Ordnerstruktur für Dein Projekt an. Erstelle dazu in Deinem Projektordner einen upload-Ordner (alles, was sich im Uploadordner befindet, wird später auf einen Webserver hochgeladen und ist im Internet zu erreichen). Außerdem brauchst Du einen Ordner für die vom Kunden oder anderen Abteilungen in der Werbeagentur angelieferten Rohmaterialien. Du brauchst im upload-Ordner mindestens zwei Unterordner: einen Ordner für die Bilder und einen Ordner für CSS-Dateien.
   Denke daran, dass Du Deine Bilder später ausschließlich aus dem upload-Ordner lädst. Sonst werden Deine Seiten auf dem Webserver nicht funktionieren!
2. Kopiere Dir die gelieferten Materialien, die Texte, die originalen Fotos und Photoshopdateien und andere Materialien in Deinen Rohmaterialienordner.
3. Überlege jetzt, wie Du die Seite aufbauen wirst, in welche Bereiche/Container Du die Texte und Bilder verpackst. Analysiere dazu das Screendesign und andere Vorgaben. Zeichne diese Struktur am besten auf einem Blatt Papier auf. Hilfreich ist dabei eine Bildbearbeitungssoftware wie Photoshop oder Gimp. Damit lässt sich aus einer Vorlage, wenn sie als Bilddatei geliefert wird, Angaben zu Farben, Breiten von Containern etc. einfach ermitteln.
4. Aus den gelieferten Bilddateien kannst Du jetzt die benötigten Bilder aufbereiten und diese im upload-Ordner im geeigneten Format abspeichern. Damit hast Du die Vorarbeiten erledigt.
5. Jetzt geht es endlich an das Bauen der HTML-Seiten. Erstelle mit einem Editor (z.B. in Dreamweaver, Brackets, Bluefish oder einem ähnlichen Programm) eine neue HTML-Datei und speichere diese gleich in den upload-Ordner. Kopiere die gelieferten Texte in die HTML-Seite und füge die benötigten Bilder ein. Von woher darfst Du noch ausschließlich die Bilder laden? ;-)
   Fasse die Inhalte in Absätzen, Listen, Überschriften, in Tags wie footer oder header oder in DIV-Containern zusammen.
6. Erstelle eine CSS-Datei und speichere diese sofort im Ordner css ab. Verknüpfe die externe CSS-Datei mit der HTML-Datei.
7. Lege anschließend in der CSS-Datei die ersten Formatierungen für Fließtext, Überschriften und andere HTML-Tags an. Hier reicht es, wenn Du zunächst nur die wichtigsten grundlegenden Formatierungen deklarierst. Das Feintuning für Schriftart, Schriftgröße oder Zeilenabstand folgt zum Schluss.
8. Erstelle dann die für das Seiten-Layout benötigten Klassen und Individualformate in der CSS-Datei. Du hattest ja bereits die entsprechenden Container auf Papier eingezeichnet und dabei idealerweise auch gleich die Klassennamen festgelegt.
   Tipp: Angaben zu Höhen sollte man bei den Containern in der Regel nicht machen. Die Höhe eines Containers ergibt sich üblicherweise automatisch aus dessen Inhalt.
9. Deine HTML-Seite sollte jetzt schon mal brauchbar aussehen.
10. Sieht noch nicht so aus, wie gedacht? Hmm, eine gute Idee ist es, das Dokument zu validieren, also HTML und CSS auf korrekte Syntax zu überprüfen. Setze Werkzeuge wie „Element untersuchen“ oder die Webdeveloper Extension ein. Deaktiviere Teile der CSS-Anweisungen vorübergehend, indem Du sie in Kommentare setzt. Kennzeichne Container testweise mit auffälligen Hintergrundfarben oder Rahmen, um zu sehen, wo die Elemente stehen und welchen Raum sie einnehmen.
11. Teste Dein Werk sorgfältig in verschiedenen Webbrowsern.
12. Jetzt nimmst Du in der CSS-Datei noch notwendige Korrekturen und Verschönerungen vor, bis die Seite in allen relevanten Webbrowsern Deinen Vorstellungen entspricht. Achte darauf, dass komplexere CSS-Anweisungen mit sinnvollen Kommentaren versehen sind.
13. Auf der Basis dieser ausführlich getesteten Seite kannst Du jetzt die weiteren HTML-Seiten des Webauftritts erstellen. Dupliziere einfach Deine soeben erstellte HTML-Seite unter neuem Namen und tausche Bilder und Texte aus. Alles ganz einfach :-)
14. Lade zum Schluss die komplette Website auf Deinen Webserver hoch und führe online letzte Kontrollen durch.
15. Fertig!

Tipps

Die Startseite Deines Projekts solltest Du „index.html“ oder „index.php“ nennen.
Datei- und Verzeichnisnamen dürfen keine Sonderzeichen oder Leerzeichen enthalten.
Du brauchst erstmal nur eine einzige CSS-Datei. Später kommen noch für nicht standardkonforme Browser wie ältere Versionen des Internet Explorers oder einzelne Bausteine (zum Beispiel kopierte Lösungen aus dem Internet) weitere CSS-Dateien dazu.
Ändere nach Möglichkeit nachträglich nichts mehr an der Ordnerstruktur Deines Projekts, verschiebe vor allem keine Dateien und benenne Dateien nicht nachträglich um. Das könnte sonst zu erheblicher Mehrarbeit führen. Überlege Dir beim Speichern von Dateien also immer, ob Du sie gerade an den richtigen Ort sicherst!
Teste Deine Webseiten unter verschiedenen Webbrowsern. Mindestens mit Firefox, IE, Chrome und Safari unter Windows und Mac OS.
Wenn Du die Container zu Anfang testweise mit einer auffälligen Hintergrundfarbe versiehst, kannst Du Dich leichter auf Fehlersuche machen.
Lass Dich nicht entmutigen, wenn Dein Layout nicht gleich in allen Browsern fehlerfrei funktioniert. Seitenlayout mit CSS ist am Anfang nicht ganz einfach, bietet aber faszinierende Möglichkeiten, wenn man das Prinzip erst durchschaut hat.