Auto-Webdesign @ PS-Trainer

Die Herstellung einiger Webseiten ist heute auch für ungelernte Personen kein Problem mehr, die Präsentation einiger Daten (Texte, Bilder, ...) auf einer Webseite zählt fast schon zu den Grundfertigkeiten, die man von durchschnittlichen Büro-Angestellten erwartet.
Wenn es allerdings darum geht, ein Web zu erstellen, dann wird die Arbeit für Amateure aufwendig, dsas Ergebnis lässt zu wünschen übrig.

Auf dieser Seite finden sie einige Tips für den Übergang zum professionellen Webdesign, hier an Hand des Web-Editors Dreamweaver.

Selbstverständlich ist die Arbeitstechnik mit allen Profi-Webeditoren gültig, die entsprechenden Befehle lauten lediglich etwas anders und sind an anderen Stellen der Menüs zu finden.

Website anlegen:
Der Site.Manager sieht nur aus wie der kleine Bruder eines beliebigen FileManagers. Sie benötigen ihn hauptsächlich für die automatische Verwaltung der relativen Links (Links auf Seiten des eigenen Webs): Wenn sie eine Webseite mit dem SiteManager an einen anderen Speicherplatz verschieben, dann werden die relativen Links automatisch richtiggestellt.

Legen sie einen Web-Ordner auf ihrem PC an.

Definieren sie eine Website: Befehl Site-Neue Site. Der "lokale Stammordner" ist ihr selbst erstellter Web-Ordner.

Legen sie die wichtigsten Ordner an, zumindest einen für die Bilder (hier: pics).
Verwenden sie für Namen von Dateien und Ordnern nur Kleinbuchstaben, keine Leer- oder Sonderzeichen.

Legen sie mit Datei-Neues Fenster eine Webseite an und speichern sie diese in ihrem Webordner. Aus dieser Seite entsteht später ein "Template".

Verschieben sie ihre bestehende Startseite (index.htm) in ihren Webordner oder legen sie eine Startseite dort neu an. Mit dieser Seite öffnet später der Webserver ihr Web, wenn im Browser keine andere Seite angegeben wird.

Tip: Mit dem SiteManager können sie beliebig viele verschiedene Webs verwalten.

Templates anlegen:
Damit sie das "Rad nicht ständig neu erfinden" müssen, ist es notwendig, Vorlagen für Webseiten zu erstellen. Die Vorlage enthält alle Elemente, die auf jeder ihrer Webseiten vorkommen (z.B. Logo, Titel, Navigation, ...).
Sie sollten ein "master"-template anlegen, dazu eigene templates für jede Art von Webseiten, die in ihrem Web öfters vorkommen.

Herstellung des master-Templates: Stellen sie zunächst eine Webseite her, die keine Details enthält, aber alle wichtigen Elemente, die auf allen ihren Webseiten vorkommen. Speichern sie die Seite zuerst normal, dann "Als Vorlage speichern"

Planen sie "Bearbeitbare Bereiche":
+ Alles, was sich innerhalb dieses Bereichs befindet, wird später beim Anlegen neuer Seite dorthin kopiert, kann aber geändert werden.
+ Alles ausserhalb der Bearbeitbaren Bereiche ist zwar auf jeder neuen Webseite vorhanden, kann aber nicht geändet werden.
+ Eine spätere Änderung des Templates wirkt sich auf bestehende Webseiten so aus: Bearbeitbare Bereiche bleiben unverändert, der Bereich ausserhalb wird jedoch automatisch auf den neuen Stand des templates aktualisiert.
+ Sie können auf den späteren Webseiten auch den gesamten Inhalt von Bearbeitbaren Bereichen löschen

Herstellung eines Bearbeitbaren Bereichs: Bereich markieren, Befehl Modifizieren-Vorlagen-Neuer bearbeitbarer Bereich

Die Strategie beim Anlegen jedes Templates ist es den besten Kompromiss zu finden: Mehr und grössere Bearbeitbare bereiche bedeutet mehr Flexibilität bei den späteren Webseiten. Je mehr Seiten-Teile sich in nicht-bearbeitbaren Bereichen befinden, desto mehr Möglichkeiten und weniger Aufwand haben sie bei späteren Änderungen des templates.

Legen sie bearbeitbare Bereiche auch für unsichtbare Seitenteile an, wie z.B. meta-tags, styles und scripts. Das können sie tun, wenn sie in der Code-Ansicht einen Bereich markieren, dann in die Seitenansicht umschalten und den Bereich (obwohl hier nicht sichtbar) als Editable definieren.
Die Editor-Tags bestehen aus speziell formatierten HTML-Kommentaren: diese können sie auch selbst kopieren, einsetzen, verschieben, etc. , danach muss die Vorlage jedoch aktualisiert werden.

Speichern sie die Vorlage - sie befindet sich nun im automatisch angelegten Ordner Templates.

Neue Seiten auf Grundlage dieses Templates erstellen sie mit Befehl Datei-Neu von Vorlage. Führen sie auf einer neuen Seite nur einige Änderungen durch (damit sie die neue Seite wiedererkennen) und speichern sie diese möglichst bald am gewünschten Zielort. Ab nun arbeitet das automatische Management der relativen Links auf dieser Seite und von Links zu dieser Seite.

Änderung von Templates: Bevor sie Templates ändern, schliessen sie alle anderen bearbeiteten Webseiten, denn sonst scheitert deren Aktualisierung. Speichern sie das Template nach Änderung - sie werden gefragt, ob alle angeschlossenen Seiten aktualisiert werden sollen. Wenn sie bestätigen, werden die von ihenn durchgeführten Änderungen auf allen betroffenen Webseiten ausgeführt.

Library anlegen:
Library-Bausteine eignen sich für Teile ihrer Webseite, die sie an vielen verschiedenen Stellen einsetzen wollen. Jeder HTML-Code eignet sich dazu, auch <script>...</script> u.a. Elemente.
Library-Bausteine können sie sowohl in den editierbaren Bereichen ihrer Webseiten als auch auf den Templates einsetzen.
Library-Bausteine enthalten keine editierbaren Bereiche. Sie können trotzdem unterschiedliche Wirkung haben, wenn sie darin dynamischen HTML-Code unterbringen.

Herstellung eines Library-Bausteins: Bereich markieren, Befehl Modifizieren-Bibliothek-Objekt in Bibliothek einfügen. Der Baustein befindet sich nun im automatisch angelegten Ordner Library.

Einfügen eines Library-Bausteins: Befehl Fenster-Bibliothek zeigt das Library-Fenster. Einfügemarke an die gewünschte Stelle, Im Lib-Fenster den gewünschten Baustein auswählen, Klick auf Einfügen. Sie können später den gesamten Baustein wieder netfernen, ihn jedoch nicht ändern.

Änderung eines Library-Bausteins: Schliessen sie vorher alle anderen bearbeiteten Webseiten, denn sonst scheitert deren Aktualisierung.
Befehl Fenster-Bibliothek zeigt das Library-Fenster. Doppelklick auf einen Baustein öffnet diesen zum Editieren.
Speichern sie den Baustein nach Änderung - sie werden gefragt, ob alle angeschlossenen Seiten aktualisiert werden sollen. Wenn sie bestätigen, werden die von ihenn durchgeführten Änderungen auf allen betroffenen Webseiten ausgeführt.

Javascript-Library anlegen:
Wenn sie Javascript überhaupt verwenden, dann sammeln sich im Laufe der Zeit scripts an, die sie auf jeder oder zumindest auf den meisten Webseiten verwenden. Diese scripts gehören in eine zentrale Javascript-Library.
Damit sind ihre Standard-scripts sind automatisch auf jeder ihrer Webseiten verfügbar. Einzelne scripts mit lokaler Bedeutung können sie zusätzlich auf ihre Webseiten stellen.

Herstellung einer Javascript-Library: Erstellen sie ein allgemein verwendbares script und testen sie es sorgfältig.

Kopieren sie den Javascript-Code in eine Text-Datei und speichern sie diese in ihrem Webordner unter dem Namen *.js . Schalten sie den Code auf ihrer Webseite mit Hilfe von Kommentaren /* ... */ ab, entfernen sie ihen vorläufig noch nicht.

Integrieren sie die Library auf ihre Testseite:
<script type="text/javascript" src="mylib.js"></script>
Testen sie die Funktion ihrer Library (Webseite neu laden).

Integrieren sie die getestete Library in alle Templates, welche mit diesen scripts arbeiten sollen. Testen sie nach erfolgter Aktualisierung, ob die scripts auf allen Webseiten richtig funktionieren. Falls Fehler auftreten, liegt das meistens daran, dass die Library falsch adressiert ist:
Wenn sich die Library in ihrem Webordner befindet, das Template im Ordner Templates, dann sieht die Einbindung so aus:
<script type="text/javascript" src="../mylib.js"></script>

Änderung und Ergänzung der Javascript-Bibliothek: Ihre Webseiten benötigen keine Änderung, lediglich die im Browser geöffneten Fenster müssen aktualisiert werden.

Stylesheet anlegen:
Für die Formatierung allgemeiner Bausteine ihrer Webseiten definieren sie eigene Styles. Der <body> sollte unbedingt so definiert werden.
Einige Tips für Styles:
+ Tabellen, insbesondere spezialisierte, wie z.B. Inhaltsverzeichnis
+ Überschriften, Bild-Unterschriften, usw. - alle wiederkehrenden Textarten
+ Quellcode
Falls sie auf einzelnen Seiten zusätzliche Styles benötigen, so definieren sie diese lokal in <style>-Objekten.
Hinweise für die Erstellung und Verwendung von Styles finden sie u.a. auf der Styles-Seite PS-Trainer.

Stylesheet anlegen: Erstellen sie ein <style>-Objekt im <header> einer Webseite: Befehl Text-CSS-Stile-Neuer Stil, Option Nur dieses Dokument.

Testen sie diesen Style durch Anwendung auf einige Elemente ihrer Webseite:
Element markieren, Befehl Text-CSS-Stile

Legen sie unbedingt einen CSS-Style für ihr <body>-Element an. Entfernen sie alle formatierenden Attribute aus dem <body>-tag und testen sie die Wirkung des CSS-body-Styles.

Kopieren sie die getesteten Styles in eine Textdatei *.css. Dort befindet sich nur CSS-Code, nicht die HTML-tags <style> ... </style>. Schalten sie die CSS-Styles ihrer Webseite ab, damit sie das externe Stylesheet testen können.

Integrieren sie das Stylesheet auf ihre Testseite:
<link rel=stylesheet type="text/css" href="mystyles.css">
Testen sie die Funktion ihres stylesheets.

Integrieren sie das getestete Stylesheet in alle Templates, welche mit diesen Styles arbeiten sollen. Testen sie nach erfolgter Aktualisierung, ob die Styles auf allen Webseiten richtig funktionieren. Falls Fehler auftreten, liegt das meistens daran, dass das Stylesheet falsch adressiert ist:
Wenn sich das Stylesheet in ihrem Webordner befindet, das Template im Ordner Templates, dann sieht die Einbindung so aus:
<link rel=stylesheet type="text/css" href="../mystyles.css">

Änderung und Ergänzung in Stylesheets: Befehl Text-CSS-Stile-Stylesheet bearbeiten. Auf ihren Webseiten müssen sie sonst keine Änderung durchführen. Nun steht ihnen die Möglichkeit zur Verfügung, mit einer kleinen Änderung im Stylesheet die Formatierung zahlreicher Webseiten in wenigen sekunden zu ändern.

Aktuelle Daten dieser Seite	Letzte Änderung: