Dreamweaver MX – Tutorial - Homepage erstellen

Dreamweaver ist auch nach der Übernahme von Macromedia durch Adobe das branchenführende Web-Autorensystem, um mit visueller Unterstützung professionelle Websites und Web-Applikationen entwickeln und pflegen zu können. Dabei werden die aktuellen Web-Standards ebenso beachtet wie die Besonderheiten der verschiedenen Internet-Browser.

Für die Erstellung von Webseiten benötigt man bekanntlich nicht viel. Ein Text-Editor reicht, um die notwendigen HTML-Dokumente zu erzeugen. Durch diese geringen Anforderungen ist es möglich geworden, dass jeder Internet-Nutzer selbst Web-Dokumente verfassen und veröffentlichen kann. Dazu sind lediglich HTML-Kenntnisse erforderlich.

Komfortabler ist jedoch die Erstellung von HTML-Seiten mit Hilfe von Browser-Applikationen wie Netscape Composer. Hierin kann man ohne weiteres einfache, aber auch aufwändigere Webseiten entwickeln und im Web publizieren.

Das Profi-Autorentool Dreamweaver bietet bedeutend mehr als solche HTML-Editoren, ist aber auch nicht ganz billig. Zum Test der Anwendung und dem ersten Kennen lernen anhand dieser Dokumentation empfiehlt sich der Download und die Installation einer Demo-Version. Mit Dreamweaver kann man zum Beispiel eine Webseite im WYSIWYG-Modus (What you see is what you get) verfassen, und Dreamweaver schreibt im Hintergrund den passenden HTML-Code zu der im Layout-Modus erstellten Webseite. Doch diese Service-Leistung für Web-Autoren, die nicht direkt in HTML schreiben wollen, vollbringt auch der bereits erwähnte Netscape Composer.

Wie wir in dieser Dokumentation sehen werden, liegt die echte Besonderheit von Dreamweaver im geschlossenen Angebot der ganzen Fülle von Möglichkeiten, wie man eine Webseite erzeugen kann und was darin alles integriert werden kann. So bietet Dreamweaver zum Beispiel:

die Erstellung, den (browserspezifischen) Test und die Pflege von HTML-Seiten
umfangreiche Unterstützung bei der Bearbeitung von HTML-Code mit Codebearbeitungswerkzeugen und Referenzmaterialien
die Verwendung von bestehenden und eigenen Vorlagen
die Importierung von Texten aus anderen Anwendungen
die Einbindung und Ausrichtung von Grafiken
die bequeme Verlinkung von Dokumenten
das komfortable Layouten von Webseiten mit Hilfe von Tabellen und Frames
die Erstellung von Formularen und deren Anbindung an Datenbanken
den Einsatz und die Entwicklung von Cascading StyleSheets (CSS)
die bequeme Verwendung von JavaScript
die einfache Nutzung von PHP in Web-Projekten
die Erstellung dynamischer, datenbankgestützter Web-Applikationen
die Anlage, Fehlerüberprüfung und Verwaltung von Websites
die zuverlässige Veröffentlichung von Websites auf Test-Servern und bei Providern
sowie die direkte Zusammenarbeit mit anderen professionellen Webentwicklungstools wie Fireworks MX und Flash MX

Sicherlich haben Sie in dieser Auflistung das enorme Potenzial entdeckt, das in diesem Programm steckt. Lernen Sie in dieser Dokumentation die wesentliche Funktionen des Branchenführers Dreamweaver kennen. Es gibt so manches zu entdecken, was bei Ihren aktuellen und zukünftigen Web-Projekten sehr nützlich sein dürfte.

Starten

Nach der Installation von Dreamweaver und dem ersten Start unter Windows kommt es bereits zu einer ersten Entscheidung. Es öffnet sich das Dialogfenster "Arbeitsbereich-Setup" und fragt nach den persönlichen Vorlieben für das Programm-Layout. Gewählt werden kann zwischen einem Designer- und einen Coder-Layout. Grundlage dieser Dokumentation ist das Designer-Layout, da man hiermit die visuelle Entwicklung einer Web-Seite vornehmen kann. Wenn man zu einem späteren Zeitpunkt doch das andere Layout nutzen möchte, ist dies unter "Bearbeiten - Voreinstellungen" unter der Kategorie "Allgemein" über die Schaltfläche "Arbeitsbereich ändern" jederzeit möglich.

Nach Auswahl des Arbeitsbereiches erscheint das Dreamweaver Startfenster, das einen ersten Überblick über die umfangreichen Möglichkeiten dieses Programms geben kann. Hier ist es möglich, die zuletzt bearbeiteten Dateien direkt auszuwählen, neue Dateien erzeugen zu lassen und Beispiele / Vorlagen anzeigen zu lassen. Wenn das Startfenster später nicht mehr angezeigt werden soll, kann man dies im Fenster unten links so auswählen. Überlegt man es sich später dann doch anders, kann man es wieder unter "Bearbeiten - Voreinstellungen" zum Leben erwecken.

Darstellung: Das Startfenster von Dreamweaver

Die Programmoberfläche

Auf den ersten Blick kann die Programmoberfläche von Dreamweaver etwas verwirren, da hierüber zahlreiche Funktionen im Zugriff stehen. Mit etwas Erfahrung und wenigen Klicks lassen sich fast kleine Wunder damit vollbringen. Es lohnt sich also, die Oberfläche genau zu untersuchen und einzelne Features gleich einmal auszuprobieren.

Webseiten – Layout mit Dreamweaver

Das Layout von Webseiten entscheidet wesentlich über den professionellen Eindruck, den man bei den Usern erzielen kann. Im Internet findet man selbst bei namhaften Unternehmen immer noch Webauftritte, die heute kaum eine Privatperson mit Webdesign – Kenntnissen ins Netz stellen würde. Dabei gibt es doch auch für das Seiten-Layout umfangreiche Unterstützung durch Programme wie Dreamweaver.

Publizieren von Websites

Ob man mit Dreamweaver einfache statische HTML-Seiten erzeugt oder komplexe dynamische Web-Anwendungen entwickelt, in jedem Fall ist es das Ziel, die Website im Internet zu veröffentlichen. Auch diese Prozedur wird durch das professionelle Werkzeug Dreamweaver elegant unterstützt. Auch die spätere Pflege und Weiterentwicklung von bestehenden Websites ist sehr komfortabel möglich.

Textformatierung in Dreamweaver

Wenn auch Bilder mehr als tausend Worte sagen können, haben Texte eine tragende Rolle für jeden Web-Auftritt. Mit Dreamweaver ist es ein Kinderspiel, Texte professionell zu gestalten und zu pflegen. Formatierung, Textfarbe und Schriftarten sind mit wenigen Klicks festgelegt oder bei Bedarf zu einem späteren Zeitpunkt änderbar.

Integration von Hyperlinks und Multimedia-Elementen

Der Erfolg des World Wide Web resultiert wesentlich von der Möglichkeit, Dokumente und Dateien im Web miteinander zu verknüpfen, und Multimedia-Elemente wie Bilder, Sounds, Videos und Flash-Animationen zu integrieren. Da steht es außer Frage, dass ein Profi-Webeditor wie Dreamweaver entsprechende Funktionen anbietet und den Anwender umfassend bei der Integration unterstützt.

Formulare

Webseiten gewinnen ungemein durch das Angebot von interaktiven Elementen. Für geschäftliche Websites, aber zunehmend auch auf privaten Homepages, sind Formulare kaum noch wegzudenken. Mit Dreamweaver ist es möglich, individuelle HTML-Formulare zu erzeugen, die nicht nur professionell aussehen, sondern auch die Formulardaten an ihren Bestimmungsort bringen.

Erstellung von HTML-Formularen

Einsatz von JavaScript

Zu der Interaktivität einer Webseite gehört, dass bestimmte Reaktionen auf Benutzerereignisse wie dem Bewegen des Mauszeigers folgen. Bekannte Beispiele sind Navigationsleisten oder andere Schaltflächen, die ihr Aussehen ändern, wenn man mit dem Mauszeiger darüber fährt. Eine andere Reaktion könnte ein sich öffnendes Informationsfenster im Browser sein. Dahinter stecken bestimmte JavaScript-Befehle, die in Dreamweaver bereits vordefiniert sind und deshalb nicht mehr geschrieben werden müssen, sondern nur noch in die Webseite eingefügt werden.

Verwendung von PHP und MySQL

Die visuelle Unterstützung durch Dreamweaver hört nicht bei der Entwicklung statischer Webseiten auf. Gerade die Möglichkeit zur Erzeugung von dynamischen Webseiten werden viele Web-Entwickler zu schätzen wissen. Welche Voraussetzungen bestehen und welche Techniken in Dreamweaver zur Verfügung stehen, ist Gegenstand dieses Kapitels.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ Microsoft Expression Web

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project