HTML-Dokumente bearbeiten mit Dreamweaver CS5

Mit Dreamweaver können unterschiedlichste Dokumenttypen, die auf Textdateien basieren, erstellt und bearbeitet werden. Nicht jeder Dateityp wird jedoch gleich komfortabel unterstützt. Für PHP- oder XML-Dokumente beispielsweise gibt es bessere Editoren, für ActionScript ebenfalls. Dennoch: Nichts spricht dagegen diese Dateien auch mit Dreamweaver zu erstellen und zu bearbeiten.

Neue Webdokumente erstellen mit Dreamweaver CS5

Ein neues Webdokument erstellen Sie entweder direkt aus dem Begrüßungsfenster heraus oder über das Menü Datei/Neu, das deutlich mehr Möglichkeiten bietet.

Nach dem Klick auf Datei/Neu öffnet sich das Dialogfeld Neues Dokument. Wählen Sie nun zunächst in der linken Spalte die Kategorie Leere Seite, als Seitentyp wählen Sie HTML und als Layout: <kein>.

Als DocType schlägt Dreamweaver mit XHTML 1.0 Transitional eine nicht ganz so strenge Regelauslegung vor.

Wir akzeptieren den Vorschlag und bestätigen die Angaben mit Erstellen.

Die Entwurf-Ansicht in Dreamweaver CS5

Das neue Dokument scheint auf den ersten Blick völlig leer zu sein, was daran liegt, dass Sie sich gerade in der Entwurf-Ansicht befinden.

Die Ansicht Entwurf zeigt die Seite so, wie sie auch später im Browser zu sehen ist.

Sie erkennen den eingestellten Ansicht- Modus an den drei Buttons in der Symbolleiste - Code, Teilen und Entwurf.

Die Code-Ansicht in Dreamweaver CS5

Klicken Sie jetzt auf den Button Code, wird der HTML-Quellcode des geöffneten Dokuments angezeigt, der bereits durch das Erstellen des neuen Dokuments entstanden ist - ohne dass Sie ein einziges Wort davon eingeben mussten.

Ein erster Eindruck, wie viel Tipparbeit Dreamweaver Ihnen abnehmen kann.

Jeder, der schon einmal Quellcode von Hand geschrieben hat weiß, wie leicht sich Tippfehler einschleichen, die oft nur nach längerer Suche entdeckt werden.

Die Teilen-Ansicht in Dreamweaver CS5

Wenn Sie auf den Button Teilen klicken, sehen Sie sowohl die Entwurf- als auch die Code-Ansicht. Ob die Teilung vertikal oder horizontal durchgeführt wird, steuern Sie mit dem Menübefehl Vertikal teilen im Menü Ansicht.

Geteilte Fenster sind für das Arbeiten, speziell bei kleineren Monitoren, etwas unpraktisch.

Allerdings sind sie ein hervorragendes Mittel, die Schreibweise von HTML zu verinnerlichen und neue Tags oder Attribute kennenzulernen.

Das wollen wir direkt einmal ausprobieren. Speichern Sie das Dokument vorher ab.

Ein Dokument, das noch nicht oder noch nicht in aktuellster Fassung gespeichert wurde, erkennen Sie an einem Stern neben dem Dokumentnamen oben links innerhalb des Dokumentenfensters.

Nach dem Speichern ist der Stern weg. In der Regel muss vor der Bearbeitung eines Dokuments immer zuerst eine Site eingerichtet werden. Da es momentan jedoch nicht um ein Projekt geht, sondern nur darum, verschiedene Bearbeitungsschritte zu lernen, verzichten wir erst einmal darauf.

Ganzen Artikel lesen...

Den ersten Text in Dreamweaver CS5 eingeben

Texte können auf vielerlei Arten in Ihren Dokumenten landen. Oft erhalten Sie Texte in Form von Word-Dokumenten oder reinen Textdateien. Diese können Sie einfach per »Copy & Paste« einfügen. Es empfiehlt sich immer, nur den reinen Text ohne Formatierungen zu übernehmen, was später bei der Arbeit an einem Projekt deutich gemacht wird. Jetzt soll es sich zunächst um das Erstellen von Text mit Dreamweaver drehen.

Sobald Sie in die Entwurf-Ansicht klicken, sehen Sie eine blinkende Einfügemarke. Schreiben Sie den Text Texteingabe in Dreamweaver CS5.

Doppelklicken Sie mit der Maus irgendwo innerhalb Ihres Satzes auf ein beliebiges Wort, um es zu markieren. Versichern Sie sich, dass unten am Bildschirm das Bedienfeld Eigenschaften angezeigt wird. Falls nicht, aktivieren Sie dessen Anzeige im Menü Fenster/Eigenschaften.

Das Eigenschaften-Bedienfeld bietet die Möglichkeit, ausgewählte Elemente gezielt zu bearbeiten.

Die Anzeige im Bedienfeld ist abhängig vom ausgewählten Objekttyp. Ist das ausgewählte Objekt eine Tabelle, stehen andere Buttons und Icons zur Verfügung als bei Bildern oder Texten.

Je nach Auswahl und beabsichtigter Änderung wirken die Maßnahmen entweder nur auf das ausgewählte Element oder auf den Block, in dem das Element liegt. Werfen Sie einen Blick auf das Dokumentfenster. Noch immer ist ein Wort des eingegebenen Textes markiert. Achten Sie darauf, dass unten links im Eigenschaften-Bedienfeld die Option HTML eingestellt ist. Klicken Sie im Bedienfeld Eigenschaften auf den Schalter B für fetten Text und heben die Markierung auf. Das Wort wird nun fett dargestellt. Stellen Sie die Einfügemarke in das so formatierte Wort, sehen Sie im Eigenschaften-Bedienfeld, dass die Schaltfläche aktiviert ist. In der Code-Ansicht zeigt sich, dass der Tag <strong> und nicht <b> für die Auszeichnung verantwortlich ist.

Diese Einstellung könnte man in den Voreinstellungen ändern, doch ist die voreingestellte Variante mittlerweile vorzuziehen. Markieren Sie nun das letzte Wort des Satzes und wählen Sie aus der Dropdownliste Format den Eintrag Überschrift 1 aus. Nun betrifft die Änderung trotz der Auswahl nicht das einzelne Wort, sondern den ganzen Satz. Überschriften gehören wie Absätze zu den Blockelementen.

In einer einzelnen Zeile können nicht zwei Blockelemente ohne weitere Maßnahmen nebeneinander existieren. Deshalb kann in einer Zeile nicht eine Überschrift neben normalem Text stehen. Auch zwei unterschiedliche Überschriftengrößen innerhalb einer Zeile funktionieren nicht.

An solchen Beispielen sieht man bereits am Anfang deutlich, dass der sinnvolle Umgang mit Dreamweaver ohne grundlegende HTML- und CSS-Kenntnisse kaum möglich ist.

Die Empfehlung an dieser Stelle lautet: Beschäftigen Sie sich weiter mit HTML und CSS, denn nur so verstehen Sie bei der Arbeit mit Dreamweaver, warum das Programm manche Dinge vielleicht nicht so durchführt, wie Sie es erwarten. Nutzen Sie die Foren und Communities zu diesen Themen und beschäftigen Sie sich mit den Tücken der Webbrowser.

Denn nicht alles, was zum Beispiel in Mozilla Firefox perfekt aussieht, wird in Apple Safari, Opera oder Microsofts Internet Explorer identisch interpretiert. Dann wird Dreamweaver zu dem, was es eigentlich ist: einem wertvollen und mächtigen Werkzeug zur schnellen und komfortablen Erstellung professioneller Webprojekte.

Die passende Ergänzung zu diesem Artikel: