Kontakt aufnehmen

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.

Vorlagen

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

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

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

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,

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

Weiterlesen: ⯈ Publizieren von Websites

Über uns

Stefan Wienströer

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

Cookie-Einstellungen

Helfen Sie dabei, uns noch besser zu machen. Wir nutzen Cookies und ähnliche Technologien, um die Website auf Ihre Bedürfnisse anzupassen. Zur Datenschutzerklärung

Auswahl speichern