Ein guter Editor sollte den Programmierer in allen Bereichen unterstützen, Schritte und damit Zeit einsparen sowie für einen sauberen Quellcode sorgen. Dreamweaver bietet dazu zahlreiche Assistenten an, etwa zur Textformatierung, zum Einfügen von Bildmaterial oder für Metainformationen.
Voraussetzungen
Ich gehe in diesem Beitrag davon aus, dass eine Dreamweaver-Website erstellt und dieser ein erstes Dokument, wie etwa eine einfache HTML-Datei, zugeordnet wurde. Bevor man sich mit dem Grundaufbau der Website beschäftigt, könnten einige der Metatags eingefügt werden, die innerhalb des Head-Bereichs Informationen zu den Inhalten bieten. Der Titel gehört genau so dazu, wie die Schlüsselwörter, die jeweils mit einem Komma getrennt werden, und eine kurze Beschreibung. Diese Metainformationen waren einmal für das Suchmaschinenranking relevant, haben jedoch sehr an Bedeutung verloren. Trotzdem ist die Angabe lohnenswert, da eine gewisse Wertung dennoch von allen aktuellen Suchmaschinen erfolgt.
In Dreamweaver aktiviert man die Code-Ansicht, klickt in den Head-Bereich unter den Title-Tag und wählt in der Leiste »Einfügen« den Reiter »Allgemein« an. Hier findet man weiter rechts den Button »Head«, der die Eingabe der entsprechenden Informationen über einfache Assistenten ermöglicht. Übrigens kann auch in der Entwurfsansicht der Head-Bereich bearbeitet werden. Dazu klickt man auf den Button »Ansichtsoptionen«, wo Head-Inhalt abgehakt wird. Natürlich bleibt die Seite weiterhin leer, doch werden nun darüber Icons geboten, über die man einen schnelleren Zugriff auf die Inhalte der Metatags erhält.
Icons für den schnellen Zugriff auf die Metatags
Erster Content
Nach den Metatags wollen wir auch schon erste Inhalte wie Bilder oder Text einfügen. Genau wie etwa von Word gewohnt, könnte man einfach in die Entwurf-Ansicht wechseln und ein paar Worte schreiben, die dem Body-Bereich zugeordnet werden. Nun ist es doch oft so, dass der Auftraggeber die eigentlichen Inhalte für das Projekt erst später überreichen wird, weshalb für einen ersten Entwurf zumeist Textbausteine wie »Lorem Ipsum« zum Einsatz kommen.
Die Website designertoolbox.com bietet dazu einen guten Online-Generator an, aber auch über Dreamweaver kann ein ähnliches Tool aufgerufen werden. Dazu klickt man im Menü auf »Hilfe > Dreamweaver Exchange«. Exchange ist eine von Adobe angebotene Plattform zum Austausch von Erweiterungen, Aktionen, Skripten, Vorlagen und anderen Ressourcen, die man selbst anbieten oder herunterladen kann. Neben Dreamweaver werden dort auch weitere Produkte der Creative Suite-Zusätze geboten.
Über die Suchfunktion ist der »Lorem Ipsum«-Generator für Windows und Mac schnell gefunden, installiert und kann fortan als integriertes Tool für die Textbausteine sorgen, die uns als Platzhalter dienen. Über Exchange kann also Dreamweaver um weitere Funktionalitäten oder Vorlagen erweitert werden. Eine Anmeldung mit der Adobe-ID ist allerdings erforderlich. Damit die Erweiterungen in Dreamweaver abrufbar sind, muss das Programm neu gestartet werden. Der »Adobe Extension Manager« vereinfacht übrigens deren Installation. Auch dieses Hilfsprogramm, das Dreamweaver, Fireworks und Flash unterstützt, ist auf der Website Exchange erhältlich.
Lorem-Ipsum-Generator auf designertoolbox.com
Text strukturieren
Das Erscheinungsbild der Absätze, die Zeilenabstände, Schriftarten und -größen sollten natürlich per CSS definiert werden. Nicht nur für die bessere Lesbarkeit, sondern auch für das Suchmaschinenranking und die Barrierefreiheit ist dabei eine logische Struktur eine Grundvoraussetzung. Bei Überschriften sollte etwa <h1> als Überschrift erster Ordnung und <h2> als Überschrift zweiter Ordnung definiert werden. Nur wird <h1> mit den voreingestellten Werten natürlich viel zu groß dargestellt, doch in Dreamweaver kann die Wirkung einzelner Tags leicht festgelegt werden. Dazu markiert man einen Text und wählt in der Palette »Eigenschaften« aus dem Drop-Down-Menü bei »Format« die gewünschte Überschrift aus. Sinnvoll wäre es nun, eine externe CSS-Datei zu definieren, in der die gewünschte Formatierung »global« über alle Seiten hinweg abgespeichert wird.
Dazu wählt man bei Stil »Stylesheet anhängen« aus und könnte nun auf eine schon existierende CSS-Datei zugreifen oder sich von Dreamweaver helfen lassen, in dem eines der Muster-Stylesheets ausgewählt wird. Leichte Änderungen der Seiteninhalte bis hin zu einem vollständigen Design werden da geboten. Ich habe in diesem Beispiel »Einfach: Verdana« aktiviert, um eine gute Grundlage für weitere Anpassungen zu erhalten. Jetzt ist es ein Leichtes, die Textgröße und -farbe nach eigenem Geschmack in der Eigenschaften-Palette festzulegen.
Dreamweaver bietet zahlreiche Muster-Stylesheets an
Falls man keine vorgefertigte CSS-Datei verwenden möchte, legt Dreamweaver nach der ersten Formatierung etwa einer Überschrift automatisch den »Stil1« an, was auch im CSS-Bedienfeld am oberen rechten Rand ersichtlich ist, wo ».Stil1« als Klasse definiert wurde. Weitere Formatierungen werden mit .Stil2, .Stil3 und so weiter gekennzeichnet. Diese Namen entsprechen vermutlich nicht der eigenen Vorstellung und sind auch nicht sehr aussagekräftig, was sich aber recht einfach ändern lässt. Im Drop-Down unter »Stil« findet man den Punkt »Umbenennen«. So könnte aus .Stil1 schnell .content werden.
Soll sich die Formatierung statt auf eine definierte Klasse auf ein HTML-Tag auswirken, klickt man im CSS-Bedienfeld am oberen, rechten Rand des Fensters auf den Button »Neue CSS-Regel« und ändert den Selektor-Typ von Klasse auf Tag ab. Neben »Tag« kann nun aus der Drop-Down-Liste ein eben solches wie etwa <p> oder das »body«-Tag ausgewählt werden. Im sich öffnenden Dialog könnte man nun zahlreiche Einstellungen in Bezug auf das gewählte Tag vornehmen.
CSS-Regel global festlegen
Bilder einfügen
Neben schön formatierten Text wird das Hauptinteresse sicher darin liegen, erste Bilder einfügen zu können. Auch hierbei unterstützt Dreamweaver den Programmierer. So könnte man über den Menüpunkt »Einfügen > Bild« einen Dialog aufrufen, über den man eine Grafik oder ein Foto von der Festplatte auswählt. Bevor das Bild erscheint, können noch die Eingabehilfen-Attribute für das Image-Tag angegeben werden. Einen Alternativ-Text sollte man immer dazu schreiben, schon aus Gründen der Barrierefreiheit. Noch weiter geht die »Lange Beschreibung«. Hier wird per Link auf eine Webseite verwiesen, welche die Abbildung genauer erklärt.
Einen weiteren Zugang, um Bildmaterial aufzurufen und sogar um Rollover-Effekte zu generieren, hat man über den Reiter »Allgemein« und dort über das Icon «Bilder«. So können schnell Fotos, ein Bildplatzhalter, eine Grafik mit Rollover-Effekt oder auch eine Navigationsleiste eingefügt werden. Alle Bilder und Grafiken sollten natürlich in einem eigenen Ordner neben der HTML-Datei abgespeichert sein, um die Übersicht zu bewahren und um alle Dateien später geordnet und ohne großes Suchen auf den Server laden zu können.
In den Eigenschaften wurde mit dem Setzen der Bilddatei die Größe angegeben, sowie der Pfad zum Bild und ein Alternativ-Text. Werte, die man jederzeit ändern kann. Soll das Bild auf eine andere Webseite des Projekts weiterführen, bietet Dreamweaver eine nette Funktion mit Effekt an. Neben »Hyperlink« findet man das Icon »Auf Datei zeigen«. Drag&Drop darüber sorgt dafür, dass ein Pfeil präsentiert wird. Mit dem Pfeil zeigt man einfach auf die Datei, auf welche das Bild verweisen soll. Der unschöne Rahmen um das Bild ist schnell entfernt, wenn die Rahmenbreite auf 0 gesetzt wird. Dazu klickt man das Bild an und gibt in den Eigenschaften unter »Rahmen« den entsprechenden Wert ein. Dreamweaver bietet noch Optionen an, um das Bild zu bearbeiten, wobei eine Schärfung oder Kontraststeigerung im besten Fall doch eher in einem Grafikprogramm wie etwa Photoshop vorgenommen werden sollte.
Auswahl der Bildfunktion
Natürlich ist es selbst für den unerfahrenen Programmierer kein Problem, Text per CSS zu formatieren oder Fotos einzufügen und doch geht Dreamweaver hierbei eigene, oftmals viel kürzere Wege. Von einer gut gestalteten Website ist man allerdings noch zwei Schritte entfernt. ™
Erstveröffentlichung 12.02.2007
