HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum |
 

 
 

Anzeige 
 
               Forum
 
 
HTMLWorld » Dreamweaver MX » Webseiten - Layout mit Dreamweaver

Dreamweaver MX: Webseiten - Layout mit Dreamweaver

von Oliver Schonschek

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.

Anzeige

Vorlagen  nach oben

Anwender, die noch wenig Erfahrung mit der Gestaltung von Webseiten haben, können auch in Dreamweaver verschiedene Vorlagen nutzen, die individuell ohne großen Aufwand angepasst werden können. So kann man sehr schnell zu einem ansehnlichen Ergebnis gelangen. Die Vorlagen findet man über das Startfenster unter der Rubrik "Aus Beispiel erstellen" oder unter dem Menüpunkt "Datei - Neu". Der sich öffnende Dialog zeigt unter dem Reiter "Allgemein" die Vorlagen aus Dreamweaver, unter dem Reiter "Vorlagen" verbergen sich zu einem späteren Zeitpunkt jedoch die selbst erstellten Sites, die man gegebenenfalls zum Teil wiederverwenden möchte.

Wählt man zum Beispiel die Kategorie "CSS - Stylesheets" aus, findet man in der zweiten Spalte eine Vielzahl solcher vordefinierter Styles, darunter sogar komplette Design-Vorschläge. In dem Dialog erscheint zum markierten Style jeweils eine Vorschau und eine Kurzbeschreibung. Über die Schaltfläche "Erstellen" kann man den gewählten Style übernehmen und dann weiterbearbeiten.

Vorlagen für ein Seitenlayout
Darstellung: Vorlagen für ein Seitenlayout

Tabellen  nach oben

Jeder, der schon einmal Tabellen in HTML beschrieben hat, wird sich freuen, dass Dreamweaver diese zum Teil recht zeitaufwändige und fehlerträchtige Arbeit abnehmen kann, indem eine Tabelle so einfach erzeugt wird wie in einem Textverarbeitungsprogramm. Tabellen erfüllen neben ihrer üblichen Funktion als übersichtliche Informationsdarstellung im Webdesign auch eine wichtige Layout - Funktion. Wenn Tabellen als Layout-Hilfe eingesetzt werden, verwendet man meist die so genannten "blinden" Tabellen, die die Zelleninhalte sauber strukturieren, ohne dass man einen Tabellen-Rahmen sehen kann.

Das Erstellen einer Tabelle innerhalb Dreamweaver ist sehr einfach. Man wählt entweder in der "Einfügen - Leiste" oberhalb des Dokumentenfensters im Register "Allgemein" das Tabellen - Symbol, oder geht direkt zu dem Menü-Punkt "Einfügen - Tabelle". Es öffnet sich in jedem Fall ein Dialog, der sehr an die Dialoge in Textverarbeitungsprogrammen erinnert. Man bestimmt dort einfach die Anzahl der Zeilen und Spalten, die Tabellenbreite in Prozent der Bildschirmbreite oder in Pixel, die Randstärke in Pixel, die Zellauffüllung und den Zellabstand. Die HTML-Kenner haben die entsprechende Tags sicher vor Augen, die anderen können nach Einfügen der Tabelle gleich einmal in der Code - Ansicht nachsehen.

In dem Dialog kann auch die Orientierung der Kopfzeile bestimmt und eine Tabellen - Beschriftung samt deren Ausrichtung definiert werden. Nach Bestätigen der Auswahl durch die OK-Taste befindet sich die gewünschte Tabelle schon auf der Webseite. In dem zugehörigen Eigenschaftsinspektor unterhalb des Dokumentenfensters kann auch ein Hintergrundbild, eine Hintergrundfarbe sowie die Rahmenfarbe bestimmt werden.
Die zum Layouten genutzte "Blinde Tabelle" erhält man, indem man eine Randstärke von Null Pixel einstellt. Über das Eigenschaftsbedienfeld können die Angaben für die Tabelle auch nachträglich leicht geändert werden. Einträge in die einzelnen Tabellen-Zellen macht man am einfachsten in der Entwurfsansicht, indem man wie bei WORD die Texte oder Bilder nach vorherigem Platzieren des Cursors in das jeweilige Tabellenelement direkt einfügt.

Wie von einer Textverarbeitung her gewohnt, lassen sich in bestehenden Tabellen auch Zeilen und Spalten einfügen oder löschen. Dazu markiert man das Tabellenelement, in dessen Umfeld man eine Spalte oder Zeile einfügen möchte. Unter "Einfügen - Tabellenobjekte" kann man Zeilen oben oder unten sowie Spalten links oder rechts davon integrieren.

Tabellenelemente können auch ohne weiteres verbunden werden. Die entsprechenden Elemente werden mit der Maus markiert. Dann nutzt man den Menüpunkt "Modifizieren - Tabelle" und dort die Option "Zellen verbinden". Im Eigenschaftsinspektor gibt es dafür sogar einen speziellen Knopf links unten.

Diese Modifikationen sind auch bei "blinden Tabellen" ohne Rätselraten möglich, da der an sich unsichtbare Rahmen in der Entwurfsansicht gestrichelt dargestellt wird. Hat man die Tabelle nach den eigenen Design-Vorstellungen erstellt, kann man die Elemente nach Lust und Laune befüllen. Wichtig ist immer der Kontrollblick mit Hilfe der Browser-Vorschau, die man oberhalb des Dokumentenfensters mit einem Klick auf die "Erdkugel" erreicht. Man sollte alle auf dem Rechner zur Verfügung stehenden Browser-Versionen für die Vorschau nutzen, um einen umfassenden Überblick über das Layout der Webseite zu bekommen. So kann man weitestgehend sicherstellen, dass möglichst viele Internet - User die Webseite auch so sehen, wie man es geplant hat.

Frames  nach oben

Die Meinungen über die Verwendung von Frames sind geteilt. Dennoch soll in dieser Dokumentation zumindest kurz behandelt werden, wie man mit Hilfe von Dreamweaver ein Frameset erstellen kann. Zuerst wählt man dazu unter dem Menüpunkt "Ansicht" die "Visuellen Hilfsmittel" und dort den "Frame - Rahmen", da dieser standardmäßig nicht aktiv ist. Unter "Modifizieren - Frameset" kann man nun das Dokumentenfenster nach seinen Wünschen (oben, unten, links oder rechts) unterteilen. Will man eine weitere Unterteilung vornehmen, ist dies möglich, indem man den Cursor in den entsprechenden Frame setzt und erneut "Modifizieren - Frameset" und die Wunschoption auswählt. Das Löschen von Frames geschieht etwas unkonventionell, indem man den zu löschenden Frame mit der Maus auf eine Stelle außerhalb des Dokumentenfensters zieht. Allerdings lässt sich so kein komplettes Frameset löschen. Das geht nur, indem man das ganze Dokumentenfenster schließt. Hat man die Datei bereits gespeichert, bleibt nur ein Löschen der ganzen Datei übrig. Man sollte also das Einsetzen von Frames genau planen oder sein lassen.

CSS  nach oben

Der Einsatz von CSS ist für ein professionelles Layout fast unumgänglich, zumindest wenn man eine Website mit mehreren Webseiten plant, was in der Regel sicherlich der Fall sein wird. Eigentlich haben Sie bereits CSS-Anweisungen mit Dreamweaver erstellt, wenn Sie das Kapitel zur Textformatierung bearbeitet haben. Allerdings merkt man dies bei Dreamweaver nicht unbedingt, da vieles im Hintergrund geschieht.

Man kann natürlich in Dreamweaver auch bewusst CSS-Stile erzeugen und einsetzen. Dazu wählt man unter dem Menüpunkt "Text" die Option "CSS - Stile" und dort "Neu". Der sich öffnende Dialog erwartet die Eingabe eines Namens für den neuen Stil. Nun kann man den Stil als Klasse definieren, so dass er für alle Tags verwendet werden kann. Dreamweaver möchte dann noch wissen, ob der CSS-Stil nur für ein Dokument erstellt werden soll, oder ob man eine eigene CSS-Datei erstellen will, um sie später erneut nutzen zu können.

Nach der Bestätigung mit "OK" öffnet sich das Fenster zur CSS-Stil - Definition. Dort kann man Einstellungen für die Kategorien Schrift, Hintergrund, Block, Box, Rahmen, Liste, Positionierung und Erweiterungen vornehmen. Jede einzelne Einstellung gehört dann zu der Stil-Definition und hat Auswirkungen auf die Web-Seite, in der man den neuen CSS-Stil einbinden wird.

CSS - Stil-Definition
Darstellung: CSS - Stil-Definition

Will man nun einem bestimmten Element oder Abschnitt der in Erstellung befindlichen Webseite diesen neuen CSS-Stil zuweisen, so nutzt man das Eigenschaftsbedienfeld, das zu dem Text oder auch der Tabelle gehört. Man markiert den Textabschnitt und wählt unter Stil im Eigenschaftsinspektor den Namen des neuen CSS-Stils aus. Genauso verfährt man auch bei der Verwendung bereits in Dreamweaver verfügbarer Stylesheets. Will man eine CSS-Anweisung auf eine Tabelle oder einzelne Zellen anwenden, so markiert man die Tabelle beziehungsweise Teile davon und stellt im entsprechenden Eigenschaftsinspektor die gewünschte "Klasse" ein.

Es ist auch möglich, einen ID - Stil zu nutzen oder zu definieren. Jedes Seitenelement, das das ID -Attribut trägt, wird dann entsprechend formatiert. Man markiert dazu beispielsweise einen Tabellenabschnitt und trägt im Eigenschaftsbedienfeld einen Namen unter "Tabellen - ID" ein. Dann verwendet man im Feld "Klasse" die Option "Stile verwalten". Es öffnet sich ein Dialog mit der Bezeichnung "Stylesheet bearbeiten". Nach Drücken des Buttons "Neu" sieht man den bereits bekannten Dialog "Neuer CSS-Stil". Nun entscheidet man sich aber für die Option "Erweitert (IDs, …)" und definiert dies für "nur dieses Dokument". Auch hier landet man wieder bei "CSS - Stil - Definitionen" und kann seine Einstellungen vornehmen, die dann für jedes Element gelten sollen, die das jeweilige ID - Attribut erhalten.

In der Praxis erweist sich die Verwendung von externen CSS-Dateien als sehr nützlich, da man auf diese von mehreren, verschiedenen Webseiten verweisen kann. Dadurch muss man nicht in jeder Webseite einzeln eine CSS-Definition einfügen. Außerdem erleichtert dieses Vorgehen auch eine spätere Änderung des Styles, die man einfach an der externen CSS-Datei vornehmen kann. Eine CSS-Datei hat die Extension *.css

Die Erstellung einer solchen CSS-Datei ist in Dreamweaver sehr bequem möglich. Unter "Datei - Neu" öffnet man das Fenster "Neues Dokument". Dort wählt man die Kategorie "Einfache Seite" und in der entsprechenden rechten Spalte dann die Option "CSS". In das sich öffnende Dokumentenfenster kann man dann die CSS-Befehle eintragen und abspeichern. Den passenden Code kann man auch mittels Dreamweaver generieren, indem man unter dem Menüpunkt "Text" die Option "CSS - Stile" - "Neu" auswählt und wie oben beschrieben die Formatfestlegungen über den Dialog vornimmt.

Die Verknüpfung einer HTML-Seite mit einer externen CSS-Datei ist möglich über den Menüpunkt "Einfügen" und dort durch die Auswahl "HTML - Head - Tags - Verknüpfung". Der sich öffnende Dialog erlaubt die Auswahl einer CSS-Datei in Form eines Hyperlinks. In das Dialogfeld "Rel" muss man nur noch "stylesheet" eintragen.

Wenn Sie eine fertig gestellte Webseite, die CSS verwendet, in der Formatierung ändern wollen, passen Sie einfach die dort gültige externe CSS-Datei oder die internen CSS-Anweisungen an. Das könnte man über die Code-Ansicht direkt machen, oder aber man nutzt die visuelle Hilfe von Dreamweaver, um den vorhandenen Stil zu bearbeiten.

Man öffnet dazu unter dem Menüpunkt "Fenster" die CSS-Stile. Alternativ klickt man einfach auf die Überschrift "Design" in den rechts vom Dokumentenfenster stehenden Bedienfeldgruppen. Dort werden dann unter dem Reiter "CSS - Stile" alle verwendeten CSS-Anweisungen in einer Art Explorer-Baum aufgelistet. Klickt man auf eine spezielle Regel, zum Beispiel auf die für den BODY - Bereich gültigen Formatierungen, öffnet sich ein neues Fenster, das wiederum alle für diesen Bereich gültigen CSS-Anweisungen auflistet. Nun klickt man auf die zu ändernde Anweisung und hat Zugriff auf einen Dialog, der die zur Verfügung stehenden Einstellmöglichkeiten hierfür anbietet. So kann man sich Stück für Stück durch die Anweisung arbeiten und diese punktuell anpassen. Zwischendurch kann man immer wieder die Browser-Vorschau nutzen. Wichtig ist die Verwendung möglichst vieler Browser-Versionen, um sicherzugehen, dass möglichst viele User später das Layout auch wie eigentlich geplant zu Gesicht bekommen.



« zurück weiter »
Bewerten

 

Dreamweaver MX

.Autor:Jan Winkler.
. Bewertung:
Dreamweaver MX: Webseiten - Layout mit Dreamweaver HTMLWorld
(5/5 bei 1 Votes)
.
. Community: 18 Beiträge im Dreamweaver MX Forum .

Navigation


 
     
 

Anzeige