Top im Web
Webpublishing mit Dreamweaver und Fireworks
Kurs der Volkshochschule Bern

Hier gehts zurück zur Übungs-Übersicht

Nutzen Sie diese Übungen ausserhalb meiner Kurse in Bern? Eine kleine Spende ist freiwillig, doch immer willkommen!

Achtung: Diese Übungen werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier.

Allgemeines zu den Übungen in diesem Kurs

• Zu Beginn jeder Übung finden Sie die Lernziele - nach der Übung sollten Sie zu diesem Thema Bescheid wissen oder in der Lage sein, dazu Fragen zu stellen.
• Sie können jede Übung problemlos als PDF abrufen und ausdrucken (Link zuoberst auf der Seite). Seien Sie sich aber bewusst, dass die Übungen in jedem Kurs ergänzt und geändert werden! Mit etwas Geschick können Sie auch mit Alt+Tab zwischen der Übungsseite und Dreamwever hin und her switchen.
• Mit sind wichtige Tips eingeleitet, mit Querverweise zum Kursheft (KnowWare Heft 12, "Dreamweaver 8/CS3 leicht & verständlich").
• Die meisten Bildschirmausschnitte (=Screens oder Screenshots) beziehen sich auf die Versionen Dreamweaver MX 2004, 8 und CS3. Sollten sie sich sehr unterscheiden, finden Sie jeweils mehrere Screens.
• Am Ende jeder Übung finden Sie den Link zurück zur Übersicht. Vergewissern Sie sich vor dem Weitergehen, dass Sie alles intus haben - wenn nicht, stellen Sie ungeniert Fragen!
• Sie können in Ihrem Tempo arbeiten. Am Ende jeder Kurseinheit erfahren Sie, was Sie eventuell daheim nacharbeiten müssen bzw. was in der nächsten Kurseinheit vorausgesetzt wird.
• Gerade am Anfang kommt eine immense Fülle vielleicht völlig neuer Infos auf Sie zu - seien Sie nicht frustriert, wenn mal was nicht klappt (meist liegts an einem Punkt zuviel bzw. einem Buchstaben zu wenig - äusserst genaues Arbeiten ist Pflicht) oder wenn Sie etwas nicht auf Anhieb begreifen. Fragen kostet nichts.
• Entdecken Sie Fehler? Danke für den Hinweis!
• Last but not least: Die Übungen haben aus gutem Grund einen bestimmten Aufbau. Gehen Sie bitte der Reihe nach, lesen Sie alles genau und vollständig. Spontane Fragen beantworten sich meistens im nächsten oder übernächsten Abschnitt. Sollten aber denoch offene Punkte bleiben: Jederzeit nachhaken!

Übung 1: Und los gehts - Dreamweaver einrichten

Software für seine Verhältnisse einrichten ist eine individuelle Sache - etwa wie eine Wohnung einzurichten. Die Tipps auf dieser Seite sind lediglich Ideen, die nicht allen gefallen müssen. Gewisse Grundschritte sollte man aber unternehmen - das Arbeiten mit einem Programm geht schneller, wenn man weiss, wo auf dem Bildschirm jeweils was zu finden ist.

Sie werden sehen, dass Dreamweaver via verschiedene Fensterchen, sogenannte Bedienfeldgruppen, bedient wird.

Falls Sie nicht nur lesen, sondern bereits alles mal ausprobieren wollen, kein Problem: Erstellen Sie sich dann aber unbedingt zuerst mittels Ctrl+N (oder Datei / Neu) / Einfache Seite / HTML-Seite eine neue, leere Seite. Erst dann wird das meiste sichtbar.

Und los gehts: Die wichtigste Bedienfeldgruppe ist das Eigenschaften-Fenster oder Properties-Window. In diesem werden die Eigenschaften des gerade angewählten Objektes dargestellt (Textart, Tabellenbreite, Formularfeld usw.). Es erscheint in Dreamweaver MX meistens zuunterst:

Wenn Sie in einen leeren (grauen) Bereich dieses Fensters doppelklicken, wird es entweder grösser oder kleiner (entsprechend ergeben sich mehr oder weniger Auswahlmöglichkeiten).

Bedienfeldgruppen gibts noch mehr, oben z.B. "Einfügen" (zuerst Screen aus Dreamweaver MX2004, direkt darunter aus CS3):

Oder "CSS" (in Version MX und MX 2004 "Design") - diese wird z.B. für das Vergeben vordefinierter Schriftarten mittels CSS (Stylesheets) gebraucht (Hinweis: diese Gruppe sieht erst später so aus, wenn einmal Formate definiert wurden!):

Oder die zweitwichtigste, "Dateien" - hier sind (ähnlich dem Windows-Explorer) alle Ordner und Dateien aufgeführt, die zum aktuellen Webprojekt ("Site") gehören, zudem kann man hier Uploads starten oder die Site verwalten (Hinweis: diese Gruppe sieht erst später so aus, wenn einmal einige Elemente der Website bestehen):

Diese Gruppen können Sie auch mit der Maus schnappen und an einen beliebigen Ort im Fenster schieben. Wenn Sie die Eigenschaften lieber oben haben - ziehen Sie sie dorthin.

Das ganze Fenster sieht in der Regel so aus:

Sie haben also Ihre eigentliche Seite auf dem Bildschirm, umgeben oben, unten und rechts von Bedienfeldgruppen, die Sie fast minütlich benötigen. Ich empfehle, "Design > CSS-Stile" und "Dateien > Site" immer offen zu haben.

Wenn es Ihnen aber mal zuviel wird, können Sie die Gruppen auch kurzfristig loswerden. Sie haben bestimmt gemerkt, dass man die Bedienfeldgruppen mit dem weissen Pfeil oben links in jeder Gruppe schliessen und öffnen kann. So lässt sich Platz in vertikaler Richtung sparen.

Die Gruppen rechts lassen sich mit dem "Unterteilungsbalken" schmaler oder breiter machen. Einfach draufklicken, Maustaste gedrückt halten und schieben. In der Regel reicht die schmalste Ausführung - so haben Sie nämlich gleich Gewähr, dass Sie sicher für 800x600 Pixel optimiert arbeiten (immer noch verbreitete Monitorauflösung). Wenn Sie die Gruppen rechts aber einmal zackig ausblenden möchten, doppelklicken Sie einfach auf den kleinen hervorgehobenen Bereich in der Mitte des Balkens:

(Unter Mac nicht möglich) - Wiedereinblenden geht genau gleich.

Alle Fenster gleichzeitig ein- und ausblenden können Sie übrigens mit der Taste F4.

Und sollten Sie sich einmal entschliessen, eine Gruppe für immer auszublenden, klicken Sie mit der rechten Maustaste auf den weissen Pfeil oben links und wählen Sie "schliessen". Mittels dem Menü "Fenster > Name der Gruppe" können Sie sie später nötigenfalls wieder einblenden. Versuchen Sie's!

Noch ein Wort zum oberen Teil der Seite, genauer gesagt zu diesem Teil:

(oben: Dreamweaver MX 2004, unten: CS3)

Sie haben gemerkt, dass dieser Teil immer sichtbar ist. Mit gutem Grund - hier können Sie u.a. zwischen Code- und Designansicht wählen, einen sinnvollen Seitentitel (title-Tag) eingeben, die Browservorschau vornehmen oder visuelle Hilfsmittel ein- und ausblenden. Auch hier: Versuchen Sie's mal!

Zum Nachlesen: KnowWare-Heft 12, Seite 6-13

Wer nicht gerne mit Tastaturshortcuts oder Menüpunkten arbeitet, mag es vielleicht, via "Einfügen"-Menu diverse Objekte in eine Website zu integrieren, z.B. Tabellen oder ein sich bei jedem Speichern selbst aktualisierendes Datum.

Fahren Sie mit der Maus über die entsprechenden Menupunkte und schauen Sie, was sich hinter den Schaltflächen verbirgt. Kaputtgehen kann nichts - klicken Sie also ruhig auch mal drauf.

Andererseits ist es ratsam, sich rasch die wichtigsten Shortcuts einzuprägen - die Arbeit geht so schneller:

• Ctrl+Alt+I für Bild (Image) einfügen
• Ctrl+Alt+T für Tabelle (Table) einfügen
• Ctrl+Alt+A für Ankerpunkt (Anchor) einfügen
• Ctrl+J für Seiteneigenschaften anzeigen
• Ctrl+M für Tabellenzeile einfügen
• Ctrl+Shift+M für Tabellenzeile löschen
• F12 für Vorschau der Seite im Hauptbrowser
• Ctrl+S für Speichern
• Ctrl+N für neue Seite öffnen
• Ctrl+Z für letzte(n) Befehl(e) rückgängig machen

Erstellen Sie nun (wenn Sie es nicht schon getan haben) ihre erste kleine Seite - egal, wenn sie nur aus Blindext oder "hjagsfduztwejha siufui saidfzc", also schwarzem Text auf weissem Grund, besteht.

Kleiner Hinweis: Wenn Sie Texte von anderen Websites kopieren, z.B. Blindtexte von hier, kopieren Sie diese vor dem Einfügen am besten zuerst in einen Texteditor wie Notepad (Start > Programme > Zubehör > Editor), damit sicher alle Formatierungen verloren gehen. Nur so können Sie den Text in Dreamweaver nachher sauber layouten. Also: Text kopieren, in Notepad einfügen, dort alles wieder kopieren, in Dreamweaver einfügen.

Neue Seiten beginnt man - wenn kein Dreamweaver-Fenster offen ist - wie oben erwähnt am besten mit "Datei > Neu >Einfache Seite > HTML" (Dreamweaver MX2004/8) bzw. "Datei > Neu > HTML > Layout > Kein" (CS3).

Wählen Sie im Dialog, der bei "Datei / Neu" erscheint, nicht "HTML-Vorlage" - das kommt später an die Reihe. Was Sie aber durchaus einmal versuchen können, sind die vorgefertigten Seitendesigns:

(Oben: Screenshot aus Dreamweaver MX 2004/8; unten: Screenshot aus CS3)

Stellen Sie sich vor, Sie erstellen ein Worddokument. Diese Datei muss irgendwann auf der Harddisk gespeichert werden. Dasselbe gilt natürlich für eine Webpage. Sie wollen die soeben erstellte Beispieldatei also speichern?

Kein Problem: Erstellen Sie einen Ordner auf der Festplatte (im Kursraum Muesmatt oder Engehalde: Laufwerk D) und speichern Sie die Datei am besten als "index.htm" in diesen Ordner - so lautet bei unserem Servertyp immer die erste Seite (Startseite).

Eventuell weist Sie Dreamweaver darauf hin, dass noch keine Site definiert sei - aus gutem Grund, wie wir sehen werden. Falls dies passiert: Lassen Sie das mit dem Speichern vorerst sein und lesen Sie weiter, in der Übung 2 wird dann vieles klarer.

Merke also: Während Word-Dokumente mit .doc enden, enden Web-Dokumente mit .htm oder .html (zumindest vorerst, später ist z.B. auch .php möglich).

Weitere Fenster brauchen wir erst später zum Arbeiten. Nun sollten wir dran denken, eine Site zu definieren. Wie das geht, steht in der Übung 2.

Hier gehts zurück zur Übungs-Übersicht

Achtung: Diese Übungen werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier.