Eine Website planen und programmieren
Hier wird die Vorgehensweise des Programmierens einer kleinen Website beschrieben. Die Schritte sind:
- Überlegung: Wer ist die Zielgruppe (Personengruppe, Alter, Bildung, Berufsgruppe) meiner Website?
Danach richten sich: Inhalte inkl. der Bilder, Layout, Formate (z. B. Schriftgröße) - Die Website mit ihren einzelnen Seiten und Inhalten inkl. der Verlinkung planen:
Inhalte suchen, zusammenstellen, schreiben, auf die einzelnen Seiten aufteilen, Verlinkung mit den Namen für die Hyperlinks planen. - Ev. Fotos in richtiger Größe und vorbereiten (laut Plan).
- Den Stammordner mit ev. Unterordnern (z. B. für Fotos) anlegen.
- Das Layout der Einzelseite und die Formatierungen planen (auf Papier).
- In Dreamweaver die neue Site anlegen: Site / Neue Site (der Site einen Namen geben, Stammordner auswählen).
- Das Stylesheet: Das Stylesheet anlegen (Datei / Neu / CSS) und gleich mit einem aussagekräftigen Namen speichern.
Das Layout der Seite und die Formate im Stylesheet umsetzen:
Boxen anlegen (div#boxname{…}
Schriftformate, Hyperlinks programmieren:
h1{font-family …} - Namenskonventionen (Regeln für Dateinamen im Web):
ausschließlich Kleinschreibung
keine Umlaute
keine Sonderzeichen ausser Unterstrich (_) - Eine Musterseite (kann die index.html sein) anlegen:
Datei / Neu / HTML und sofort speichern.
Erst nach dem Speichern die Seite mit dem Stylesheet verbinden: Stylesheet anfügen (Symbol) - Im Stylesheet definierte Boxen (div-Elemente) in die Musterseite einbinden: Einfügen / Layoutobjekte / DivTag
Darauf achten, dass die Boxen nacheinander sind und nicht ineinander (verschachtetlt). Der Mauszeiger darf niemals in einer Box stehen, wenn die nächste eingefügt wird!
In der Codeansicht der Seite sieht das richtig so aus:
<div id=”kopf”> Inhalt </div>
<div id=”navigation”> Home … </div>
<div id=”inhalt”>Bla bla bla </div> - Wenn mit der Musterseite alles in Ordnung ist, die Musterseite durch “Speichern unter” neuen Namen vervielfältigen (z. B. schulprofil.html; kontakt.html).
- Texte und andere Inhalte (Bilder etc.) in die Seiten einfügen.
- In die index.html die Namen für die Navigation hineinschreiben, die Verlinkung durchführen und die fertige Verlinkung in die weiteren Seiten kopieren.
- Die Verlinkung testen.