Webseiten erstellen mit Dreamweaver

Transkript

1 Dreamweaver Dreamweaver ist ein HTML-Editor der Firma Adobe Systems bestehend aus einer Kombination eines WYSIWYG-Editors (what you see is what you get) mit paralleler Quelltextbearbeitung. Dreamweaver läuft derzeit auf den Betriebssystemen Mac OS X und Microsoft Windows. Ein Vorteil dieses Autorenprogramms liegt nach Anwendermeinungen darin, dass verhältnismässig ordentlicher HTML-Code erzeugt wird, bei der Bearbeitung bestehender HTML-Seiten verändert Dreamweaver so wenig Code wie möglich. Dreamweaver ermöglicht die übersichtliche grafische Bearbeitung von Webseiten und bietet Funktionen wie Farbkennzeichnung und Autovervollständigen für HTML-Code und Skriptsprachen wie PHP und JavaScript. Kritiker bemängeln gelegentliche Instabilitäten, mühselig zu erstellendes Layout sowie eine manchmal schwerfällige Handhabung von Skriptsprachen. Die erste Dreamweaver-Version erschien Zurzeit ist Dreamweaver Version 6 die Aktuellste. Webseite Dreamweaver: Testversion (für 30 Tage): F+F Grafikfachklasse, elektronische Medien, Silvia Popp S. 1/6

2 Neues Projekt aufsetzten Nach dem ersten Start von Dreamweaver öffnet sich automatisch ein Begrüssungsfenster. Damit nicht alle einzelnen Seiten, Bilder und anderen Inhalte einer Webseite manuell verwaltet werden müssen, empfiehlt es sich besonders für Einsteiger/innen, zu Beginn immer erst ein Projekt anzulegen. Mit einem Klick auf "Dreamweaver-Website" öffnet sich ein Assistent, in dem nur Name und Speicherort einer Webseite angegeben werden müssen. Wer möchte, kann im Reiter "Server" schon jetzt die Zugangsdaten seines Providers hinterlegen, um eine Webseite später per FTP-Protokoll dahin zu übertragen. Name und Verzeichnis einer neuen Site müssen zwingend festgelegt werden: F+F Grafikfachklasse, elektronische Medien, Silvia Popp S. 2/6

3 Inhalt einfügen Nachdem eine neue Webseite erstellt wurde, gilt es, sie mit Leben zu füllen: Zu diesem Zweck müssen Nutzende eine neue HTML-Datei anlegen - allerdings am besten nicht über den entsprechenden Punkt im Begrüssungsfenster. Stattdessen sollte im Datei-Menü auf "Neu..." geklickt werden, was wiederum ein neues Fenster öffnet, in dem mehrere Vorlagen für HTML-Seiten zur Verfügung stehen. Unter anderem gibt es dort bereits ein fertiges dreispaltiges Layout mit Kopf- und Fusszeile, das für die meisten Seiten passen sollte. Unter "Layout-CSS" sollte Sie einstellen, dass die Formatierungen einer Seite nicht im HTML- Quelltext direkt eingebettet, sondern in eine externe Datei ausgelagert werden. Auf diesem Weg lässt sich die CSS-Datei nicht nur leichter bearbeiten, sondern auch ganz einfach in mehreren Seiten gleichzeitig verwenden. Nach einem Klick auf "Erstellen" fragt Dreamweaver nur nach dem Speicherort des CSS-Stylesheet und schlägt praktischerweise gleich einen Namen vor. Die HTML-Datei wird erst später gesichert. F+F Grafikfachklasse, elektronische Medien, Silvia Popp S. 3/6

4 Entwurfsmodus Standardmässig öffnet Dreamweaver eine neue HTML-Datei - sofern das nicht in den Einstellungen geändert wurde - im sogenannten Entwurfmodus. In diesem bekommen Nutzende den Quelltext einer Seite nicht zusehen, sondern können Text fast wie in Word eingeben. Allerdings fehlt eine Symbolleiste für die Formatierung: Um die Schriftart oder Schriftgrösse zu ändern, einen Text fett oder kursiv zu markieren oder andere Änderungen durchzuführen, müssen Nutzende rechts in der Seitenleiste unter "CSS-Stile" doppelt auf den font-eintrag klicken. Anschliessend öffnet sich ein Fenster, in dem sie die Formatierungen komfortabel ändern können. Dreamweaver setzt sie im Hintergrund automatisch in die entsprechenden CSS-Kommandos um. Alternativ existiert noch die Möglichkeit, einige wichtige Formatierungen in der Eigenschaften- Leiste am unteren Rand des Bildschirms festzulegen - meist ist die Verwendung des CSS-Editors aber viel praktischer, da Nutzende hier alle Stile auf einen Blick sehen können. Um den Umgang mit HTML zu lernen, ist der Modus "Teilen" sinnvoll: In diesem können Einsteiger verfolgen, welche Änderungen im HTML- oder WYSIWYG-Bereich etwas in der jeweils anderen Spalte bewirken. F+F Grafikfachklasse, elektronische Medien, Silvia Popp S. 4/6

5 Bilder einfügen Das Einfügen von Bildern erfolgt über die Seitenleiste: Im nächsten Schritt öffnet sich ein Fenster, in dem Nutzende die Bilddatei auswählen können. Sie sollte immer im Format JPEG, PNG oder GIF vorliegen, da die meisten Browser keine anderen Grafiken öffnen können - eine Grafik aus Photoshop muss also gegebenenfalls erst noch exportiert werden. Ferner müssen Anwender darauf achten, dass sich Bilder immer im Hauptordner des Website-Projekts befinden ansonsten kann es passieren, dass sie nach dem Hochladen auf den Server möglicherweise nicht gefunden werden. F+F Grafikfachklasse, elektronische Medien, Silvia Popp S. 5/6

6 Veröffentlichen Sobald Nutzende mit der ersten Seite ihrer neuen Internetpräsenz fertig sind, können sie diese speichern. Der Dreamweaver fragt beim Schliessen des Dokuments automatisch nach, unter welchem Namen es gesichert werden soll. Für Einsteiger/innen bietet sich hierzu "index.html" an, damit die zuletzt bearbeitete Datei als Startseite der Präsenz erkannt wird. Ist alles fertig, können Nutzende ihre Webseite zum Provider hochladen: Bevor die Übertragung losgehen kann, muss zunächst im Fenster Dateien von der lokalen Ansicht auf Remote-Server gewechselt werden. Dort befindet sich ein Link, um die Zugangsdaten des FTP-Servers einzutragen, sofern das nicht bereits zu Beginn des Projekts geschehen ist. Sobald in Dreamweaver ein FTP-Server eingetragen wurde, wird versucht, eine Verbindung zu ihm herzustellen. Ob das erfolgreich geklappt hat, können Anwendende daran erkennen, dass die entfernten Ordner und Dateien in der Seitenleiste angezeigt werden. Anschliessend ist es möglich, über den Menüpunkt "Ganze Site synchronisieren" im Menü "Site" alle geänderten Dateien von der lokalen Festplatte auf den FTP-Server zu kopieren. Die erste Synchronisation kann je nach Umfang der eigenen Webseite mehrere Minuten dauern, danach geht es dann viel schneller - schliesslich gleicht Dreamweaver nur geänderte Dateien mit dem Server ab. F+F Grafikfachklasse, elektronische Medien, Silvia Popp S. 6/6