Top im Web
Webpublishing mit Dreamweaver und Fireworks
Kurs der Volkshochschule Bern

Hier gehts zurück zur Übungs-Übersicht

Übung 16: Einfaches XHTML/CSS

Achtung: Diese Übungen werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier abrufbar.

Wir haben in Übung 6 gesehen, was mit CSS für Erleichterungen im Bereich Schiftartenformatierungen möglich sind. Es wurde auch erwähnt, dass man mit CSS2 (und später CSS3) ganze Websites ohne Tabellen designen kann.

CSS-Konstrukten sind an sich simpel: Im Stylesheet steht, wie sich die im HTML-Dokument angeordneten Elemente Verhalten sollen, z.B. dass die Navigationsleiste links vom Inhalt sein soll und 150 Pixel breit.

Versuchen wir das mit einem einfachen Beispiel, mit dem man - mit einigen Bild-, CSS- und Farbänderungen - sehr viele verschiedene Designs fertigbringen kann. Ohne grossen Aufwand!

Sie können ein Beispiel hier als ZIP herunterladen. Entpacken Sie den Inhalt in einen Ordner und definieren Sie eine neue Site im Dreamweaver auf diesen Ordner.

Anhand dieses Test-Layouts können Sie mit wenigen Anpassungen absolut problemlos eine tabellenfreie, moderne CSS-basierte Website in Betrieb nehmen.

Passen Sie einfach die Hintergrundbilder und Farben an, lassen Sie Ihrer Phantasie freien Lauf! Haben Sie keine Angst vor Experimenten.

Wenn etwas schief geht, laden Sie das ZIP nochmals runter und beginnen Sie von vorne. Learning by Doing ist das Allerbeste!

Weitere gute CSS-Seitendesign-Vorlagen finden Sie hier oder auch hier. Ein Beispiel von unserem sporadischen Gastdozenten Bernhard Sturm finden Sie in diesem Zip.

Hier gehts zurück zur Übungs-Übersicht

Achtung: Diese Übungen werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier abrufbar.