realwebmaster.net - die Homepage Hilfe mit Webmaster Forum

Tutorial: Dreamweaver 4 bzw. ältere MX mit 4er-Ansicht

Macromedia Dreamweaver 4 - Einleitung

Mit diesem Tutorial möchte ich dir die Möglichkeit geben Macromedia Dreamweaver 4 bzw. MX kostenlos zu lernen. Natürlich kann dieses Tutorial (Workshop) kein gutes Buch ersetzen, aber es reicht um eine einfache Homepage zu erstellen und die Grundlagen von Dreamweaver kennen zu lernen.

Erste Schritte mit Dreamweaver

Lade dir die Demo-Version von Macromedia Dreamweaver MX unter http://www.macromedia.com/software/dreamweaver/ herunter und installiere diese (Falls du schon die Vollversion besitzt brauchst du selbstverständlich keine Demo).

Beachte dass der Download einige Zeit dauern könnte, wenn du kein DSL oder ähnliches hast.

Die Demo Version von Dreamweaver MX war bei mir auf Englisch, deshalb gehe ich in dieser Beschreibung davon aus, dass du auch die englische Version besitzt. Solltest du die deutsche Version besitzen, so kannst du diese Tutorial natürlich auch nutzen, jedoch solltest du auch etwas englisch können. Damit du dich mit Begriffen wie "Preferences", "Workspace", "Advanded" oder "Edit" auch in der deutschen Version zurecht findest. Falls dir Wörter unklar sind, kannst du ja mal bei dict.cc oder LEO vorbeischauen.

Starte nun Dreamweaver.

Als erstes wirst du gefragt, ob du mit der Dreamweaver MX oder 4 Arbeitsfäche arbeiten willst. Wähle die „4“
Sollte diese Frage beim ersten Start bei dir nicht auftauchen klicke im Menü auf
Edit > Preferences... > General > Change Workspace
Wähle dort “Dreamweaver 4 Workspace.

Das waren eigentlich für den Anfang alle Voreinstellungen die man vor der eigentlichen Arbeit machen sollte.

Maushilfe zu Dreamweaver

Diesen Teil können die meisten überspringen.

Hier sind ein paar Maustechniken, da die Maus mit Sicherheit eines der meistgenutzten Hilfsmittel bei der Arbeit mit Dreamweaver ist.

Zeigen/Markieren

Die Mausaktion, bei der du den Mauszeiger auf ein Bildschirmelement setzt bzw. die Markierung bewegst, wird zeigen genannt. Einige Elemente (wie z.B. Menübefehle) werden dadurch auch sofort markiert. Sie müssen fast immer etwas zeigen bzw. markieren, bevor Sie eine Aktion auslösen können.

Klicken

Mit klicken wird gemeint, dass du einmal auf die linke Maustaste drückst, nachdem du auf das Objekt gezeigt hast.

Doppelklicken

Bei einem Doppelklick musst du zweimal schnell hintereinander die linke Maustaste drücken. Mit dieser Aktion öffnest oder startest du ein Objekt bzw. Programm.

Ziehen

Ziehe bei gedrückter linker Maustaste die Maus über den Bildschirm. Der Bereich den du so überstreichst wird somit markiert. Um den Vorgang zu stoppen lasse die linke Maustaste einfach wieder los.

Kontextmenü

Das Kontextmenü erhälst du, indem du mit der rechten Maustaste auf ein Objekt bzw. eine freie Stelle bei Dreamweaver klickst. Nun wird ein Menü ausgeklappt, was ein noch schnelleres arbeiten möglich macht.

Fenster Hilfe zu Dreamweaver

Hier werde ich kurz beschreiben wie die verschiedenen Dreamweaver Fenster in diesem Tutorial/Workshop genannt werden.

 

Dreamweaver 4 - Hauptfenster
Dreamweaver 4 - Hauptfenster

 

 

Dreamweaver 4 - Eigenschaftenfenster
Dreamweaver 4 - Eigenschaftenfenster

 

 

Dreamweaver 4 - Sitefenster
Dreamweaver 4 - Sitefenster

 

 

Dreamweaver 4 - Symbolfenster
Dreamweaver 4 - Symbolfenster

 

Homepager erstellen mit Dreamweaver

Erstellen einer Homepage mit Hilfe von Vorlagen

Am besten fangen wir mit einer einfachen Homepage ohne Frames an, die du mit Hilfe sog. Templates (Vorlagen) erstellst.  Jedoch nicht wie du vielleicht jetzt denkst mit einer fertigen Vorlage. Nein, die Vorlage wirst du selbst erstellen. Deine Homepage wird eine Unterseite bekommen. Außerdem einen „Back“-Link zur Startseite und deine E-Mail-Adresse.

Teil 1 : Vorlage erstellen

Gehe mit der F8-Taste in das Site-Menü
Klicke im Menü auf Site > New Site
Wähle oben die Fläche Advanced aus unten klicke bei Category auf Local Info

Fülle die Felder wie hier aus und klicke dann auf OK:
(Das Verzeichnis kann natürlich bei dir auch an einer anderen Stelle liegen)

 

Local - Dreamweaver 4

 

 

Klicke auf File > New Window
Dort wähle folgendes und klicke dann auf Create:

Neues Dokument - Dreamweaver 4

 

 


Wechsel im Symbolfenster zur Layout Ansicht

Layoutview - Dreamweaver 4

 

 


Klicke im Symbolfenster auf Draw Layout Table

Layouttable - Dreamweaver 4

 
Jetzt ziehe mit der Maus im Hauptfenster vom linken oberen Rand nach unten rechts ein kleines Viereck.
Gebe im Eigenschaftenfenster bei
Width 700 und bei
Height 1000 ein.
Sollte das Eigenschaftenfenster noch nicht geöffnet sein klicke auf
Window > Properties

 


Klicke auf Draw Layout Cell

Cell - Dreamweaver 4

 
Ziehe mit der Maus wieder ein kleines Viereck
Klicke auf den Rand des Vierecks.
Width 700 und bei
Height 150 ein.

 


Klick wieder auf Draw Layout Cell
Beginne mit dem Viereck diesmal am unteren Ende des oberen Vierecks.
Klicke wieder auf den Rand des Vierecks und trage folgendes ein:
Width 200 und bei
Height 850

So jetzt fehlt noch eine Zelle ("Viereck")
Beginne am unteren Rand des oberen Vierecks und am rechten Rand des linken Verecks mit deiner letzten Zelle, mach diesmal eine Viereck mit der folgenden Einstellung:
Width 500
Height 850

So jetzt hast du insgesamt 3 große Zellen
Klick in die obere Zelle und schreibe folgendes hinein:

"Meine erste erstellte Homepage mit Dreamweaver MX"

Markiere den Text und dann stelle im Eigenschaftenfenster als Schriftröße (Size) 5 ein und klicken auf B für Fett (Bold)


Klick auf den Rand der unteren linken Zelle
Klick im Menü auf Insert > Template Objects > Editable Region
Du wirst nun nach dem Namen dieser Region gefragt, trage main ein und klicke dann auf OK.

Klicke jetzt im Menü auf File > Save As Template
Trage folgendes ein und klicke dann auf Save:

Template - Dreamweaver 4


Schließe das Template (Hauptfenster).

 

Homepage erstellen > Die Unterseiten

 

Teil 2: Unterseiten erstellen

Klicke im Site-Fenster auf File > New Window
Wähle oben links diesmal nicht General sondern Template
Und dann das vorher erstellte Template

Dreamweaver 4 - Template

 
Klicke auf Create

 

Du siehst nun eine Seite die aus Ihrem vorher erstellten Template besteht. Wenn du mit der Maus über die verschiedenen Zellen fährst wirst du merken, dass nur die Zelle verändert werden kann die du vorher als "Editable" eingestellt hast. Klicke in diese Zelle

Jetzt könntest du theoretisch hier deinen Text einfügen, da du aber wahrscheinlich keinen Text vorbereitet hast schreibe einfach folgendes:

Dies ist nur ein langweiliger Text,
er soll jedoch mal diese erste Seite füllen, da momentan kein besserer zur Verfügung stand :-(
Ich werde später sicherlich noch einen besseren Text finden, jedoch bin ich im moment viel zu faul.... ich blalblabla, was ich außerdem noch sagen wollte war blabla blabla ond weiß ich jetzt auch leider nicht. Was würdet ihr denn hier hin schreiben? Wisst ihr etwas besseres? Dann schreibt es auf eure Homepage...
Viel Spaß noch...
...ich

Tip: Drücke Enter um einen Absatz zu machen und Shift+Enter für eine neue Zeile.

Schreibe jetzt oben im Hauptfenster bei "Title" folgendes hinein:

"Das ist meine erste Homepage"

Klicke im Menü auf File > Save As
Speicher es in den Ordner den du vorhin als Haupt-Ordner gewählt hast einfach unter dem Namen index

Schließe das aktuelle Hauptfenster und klicke im Site-Fenster wieder im Menu auf
File > New Window
Wähle oben links Template
Und dann das erstellte Template
Klicke auf Create

Auf diese Seite wirst du ein Bild einfügen:

Klicke im Symbolfenster auf den Image-Button
Wähle ein Bild aus und klicke dann auf OK


Klicke nun auf das Bild und gebe dem Bild im Eigenschaftenfenster folgende Größe:
W 500
H 200

Schreibe folgenden Text unter das Bild:

Dies ist nur ein langweiliger Text,
er soll jedoch mal diese erste Seite füllen, da momentan kein besserer zur Verfügung stand :-(
Ich werde später sicherlich noch einen besseren Text finden, jedoch bin ich im moment viel zu faul.... ich blalblabla, was ich außerdem noch sagen wollte war blabla blabla ond weiß ich jetzt auch leider nicht. Was würdet ihr denn hier hin schreiben? Wisst ihr etwas besseres? Dann schreibt es auf eure Homepage...
Viel Spaß noch...
...ich

So, gib deiner Seite jetzt wieder einen Titel (Tilte z.B. unterseite)
Klicke auf File > Save As und nenne es
unterseite

Schließe die offene Seite (Hauptfenster).

Homepage erstellen > Fertigstellen

Teil 3: Homepage fertigstellen

Klicke im Sitefenster auf File > Open
Wähle im Templates-Ordner die Datei homepage und klicke dann auf öffnen
Klicke in die rechte untere Zelle und schreiben folgendes:

Startseite
Drücke die Eingabe-Taste (Enter)

Unterseite
Drücke die Eingabe-Taste (Enter)

Kontakt

Markiere das Wort Starseite und klicke dann auf das Ordner-Symbol im Eigenschaftfenster
Öffne die Datei index in ihrem Haupthomepageordner

Markiere jetzt das Wort Unterseite
Klicke wieder auf das Ordner-Symbol im Eigenschaftenfenster
Öffne die Datei unterseite

Markiere das Wort Kontakt und schreibe folgendes im Eigenschaftenfenster in das Linkfeld:

mailto:meine@e-mail.de

Klicke auf File > Save
Und dann auf Update
Dann auf Close

Deine Homepage ist nun fertig!!!

Schließe Dreamweaver.
Gehe in den Homepage-Ordner und öffne deime index.htm
Das ist nun deine Homepage... sie sieht zwar nicht besonders toll aus, wenn man jedoch die Inhalte durch richtige Inhalte ersetzt kann das noch viel besser aussehen.