AVIVA-BERLIN.de im April 2024 - Beitrag vom 05.05.2004


Tutorials für DurchstarterInnen. Anlegen einer Musterseite mit Dreamweaver MX
Gerlinde Behrendt

Wir zeigen Ihnen, wie Sie als Webdesign-Einsteigerin ohne detailierte html-Kenntnisse mit dem Dreamweaver eine Website erstellen können...

powered by

Macromedia - Studio MX/Dreamweaver: Tutorial für Einsteiger

Studio MX ist ein Megapaket aus Dreamweaver, Fireworks, Flash und Freehand sowie Cold Fusion für EntwicklerInnen und DesignerInnen für Websites aller Art. Angefangen beim Erstellen von Grafiken in Freehand und der html-Layoutgestaltung in Dreamweaver bis zur Zusammenstellung multimedialer Projekte in Flash bekommen DesignerInnen und EntwicklerInnen mit dem Macromedia - Studio MX eine Komplettlösung für den professionellen Bedarf.

Anlegen einer html-Musterseite mit dem Dreamweaver MX

Vor der Gestaltung einer Seite mit Dreamweaver kann die Entwicklungsumgebung für die Bedürfnisse des Projekts eingestellt werden. Wir empfehlen, die Codeansicht mit dem WYSIWYG - Modus zu kombinieren, dadurch erscheint der eingetragene html-Code sofort im darunter liegenden Fenster als grafisches Layout.



Denken Sie daran, schon vor Beginn der ersten html-Seite einen Ordner für die Website anzulegen. In Dreamweaver kann ein Site-Name vergeben werden: in der rechten Spalte befindet sich ein Ausklappfenster mit dem Titel "Datei" - , wenn Sie nun Unterordner erstellen, z.B. für Bilder, übernimmt Dreamweaver automatisch die Siteverwaltung und die Definition der Pfade.

Gehen Sie nun an die Aufgabe, globale Seiteneigenschaften einzustellen, wie Hintergrund- und Textfarbe, Titelzeile etc. Dreamweaver hält dazu das Dialogfenster "Seiteneigenschaften" bereit (Modifizieren - Seiteneigenschaften). Dazu sei allerdings gesagt, dass es möglicherweise sinnvoller ist, die Seiteneigenschaften mit Hilfe von Stylesheets festzulegen, doch dazu gleich mehr....



Für den weiteren Arbeitsverlauf ist es hilfreich, wenn Sie sich eine Layouthilfe als Seitenraster einrichten. Das kann z.B. eine Tabelle mit unsichtbaren Rändern sein. Am schnellsten geht es, wenn Sie in der oberen Symbolleiste auf das Tabellensymbol klicken und im Dialogfenster die gewünschte Spalten- und Zeilenanzahl festlegen. Keine Angst, das kann auch später noch geändert werden, z.B. durch einfaches Ziehen an den Spaltenrändern.

Im unteren Monitorbereich sehen Sie den "Eigenschaften- Inspektor" von Dreamweaver. Je nachdem, welches Objekt Sie im Layoutfenster markiert haben, zeigt der Eigenschaften-Inspektor kontextsensitiv alle Änderungsmöglichkeiten an, die Sie für das jeweilige Objekt haben. In der Tabelle können Sie nun z.B. die Tabellengröße in % oder in festen Pixelangaben definieren, Sie können eine Hintergrundfarbe oder ein Hintergrundbild einstellen und festlegen, ob Sie einen Tabellenrand anzeigen wollen oder nicht. In unserem Fall soll die Textzelle eine andere Farbe als der übrige Hintergrund erhalten.

Bilder einfügen ist besonders einfach: Klicken Sie auf das Bildsymbol in der oberen Symbolleiste und wählen Sie das Passende aus dem Verzeichnisfenster aus. Hier noch einmal der Hinweis: Achten Sie darauf, dass das Bild im richtigen Verzeichnis bzw. Unterverzeichnis liegt! Wählen Sie für alle Verzeichnisse die Namen aus, die später auch auf dem Webserver verwendet werden sollen - Dreamweaver trägt automatisch den Verweis auf diesen Pfad ein!



Wenn Sie alle Folgeseiten Ihrer Website konsistent halten wollen, richten Sie jetzt sinnvollerweise ein Stylesheet ein, in dem Sie Schriftart, Farben, Definitionen für unterschiedliche Bereiche festlegen können. In der rechten Spalte der Dreamweaver Arbeitsfläche befindet sich unter der Rubrik "Design" das Bedienfeld "Css-Stile". Hier klicken Sie auf "Stile bearbeiten", wählen Sie "Neuer CSS-Stil" und definieren Sie sie als "Neue CSS-Datei". Damit erstellen Sie eine externe Datei im CSS Format, auf die Sie später auch von weiteren Dokumenten zugreifen können. Veränderungen brauchen Sie so nur noch einmal vorzunehmen, sie wirken sich dann auf alle Dokumente gleichermaßen aus. Wir haben in unserem Beispiel zunächst die Schrift definiert, mit Fonts, Schriftgröße, Schriftfarbe etc. Sie können mit Stylesheets auch Ebenen, Hintergründe, Rahmen und anderes definieren, experimentieren Sie ein wenig damit!

Zum Schluss können Sie die html-Seite als Vorlage speichern, Macromedia hat dafür das Format .dwt vorgesehen. Sie können bearbeitbare Bereiche definieren, das ist sinnvoll, wenn z:B. weiterhin zwar Texte eingeben werden sollen, aber nichts am Design verändert werden darf. Wenn Sie nun eine ähnlich gestaltete Seite mit etwas anderem Inhalt benötigen, rufen Sie die Vorlagendatei auf.