spacer
spacerwebwriting-magazin.despacer Newsletterspacer Forumspacerspacer Kontaktspacer
spacer
spacer spacer Zur Startseite Webwriting: Text, Design, Usability.... Tipps, Tricks, Tutorials Lob, Kritik, Rezensionen Was das Netz bewegt... Software, Tools Für Euch gelesen Surftipps, Knowhow-Quellen spacer
Logo

Webwriting News
- der Newsletter des Webwriting-Magazins meldet neue Beiträge und Interessantes rund ums Webpublishing - was wir halt so finden in den unendlichen Weiten.

zum BestellfensterAnfordern ?

spacer



Lies auch:

Keine Angst vor XHTML
 
Erste Schritte mit CSS - Gleiches Schriftbild in (fast) allen Browsern
 
Was Betriebssystem und Browser alles mit Schriften anstellen


Webwriting-Magazin > So geht's


Seiten gestalten ohne Tabellen

Eine kleine Einführung in die Arbeit mit CSS-Layern

Für die Positionierung der Inhalte auf Webseiten werden derzeit hauptsächlich Tabellen eingesetzt. Das entspricht zwar nicht ganz den Intentionen der Entwickler von HTML beim W3C, aber es ist unbestreitbar praktisch. Wenigstens solange man die Seiten in einem Browser betrachtet, der auch verschachtelte Tabellen einigermaßen sauber wiedergeben kann - was durchaus nicht alle können.
 
Sobald man zu anderen Wiedergabegeräten greift - Palmtops, Screenreader oder Drucker stehen da an erster Stelle - kommt es zu großen Problemen. Die Vermengung von Content und Darstellung in den Tabellen läßt sich nicht mehr ohne weiteres aufdröseln, die Website wird schwer navigierbar oder ganz unlesbar. Auch Sehbehinderte haben keine Chance.
 
Diese Probleme lassen sich mit Stylesheets weitgehend auflösen. Stylesheets erlauben es, den meisten Elementen von HTML umfangreiche Informationen zu ihrer Darstellung mitzugeben, ohne dabei den Code so zu entstellen, daß er sich auf anderen Devices als dem Lieblingsbrowser nicht mehr sinnvoll darstellen läßt. Diese Informationen betreffen die Position der Elemente, die Formatierung von Schriften, Art und Farbe von Hintergründen und vieles mehr.
 
Im Prinzip (d.h. es gibt Ausnahmen und Abweichungen) gilt das für alle Elemente von HTML. Es gibt jedoch ein "Standardelement", nämlich den Bereich "<div>...</div>", das sich ganz besonders für diesen Zwecke eignet. Deshalb habe ich hier die Grundzüge des Umgangs mit CSS anhand dieses Elements dargestellt. Das meiste davon läßt sich auf andere Elemente wie <p>, <span> , <table> ,<a>, <img> usw übertragen. Über Sonderfälle informiert die Fachliteratur.
 
Ein Tutorial als Demo
 
Damit man die Funktionsweise der einzelnen Styles besser nachvollziehen kann, folgt dieser Einführung ein kleines Tutorial in einem eigenen Fenster. Dort sind die Styles in den Seitentext geschrieben. d.h., man kann sich die Seiten downloaden und die Parameter direkt im Kontext nach Belieben verändern, um anschließend im Browser zu sehen, was man davon hat.
 
Ein Nachteil des Verfahrens ist, daß dabei die Unterschiede zwischen den Browsern nicht abgefangen werden können. So wie beschrieben, funktionieren die Beispiele derzeit nur im MSIE ab 5.5 und (bei minimalen Einschränkungen) auch im NS 6 (dessen Rendering-Machine ja immer noch eine Beta ist) und im neuen Opera 6. Netscape 4.7 ist für diese Seiten nicht geeignet; weitere Browser und Betriebssysteme wurden nicht getestet.
 
Hier geht es aber auch gar nicht darum, die Unterschiede zwischen den Browsern abzufangen oder zu vermeiden. Das ist mit entsprechendem Aufwand in weitem Umfang möglich. Allerdings entstehen dabei recht komplexe Styles, die oft schwer zu durchschauen sind. Es geht hier auch nicht um die Möglichkeiten, Bereiche für DHTML einzusetzen - dieser ganze Sektor bleibt ausgespart. Hier geht es zunächst allein darum, die Grundlagen der Arbeit mit CSS-Layern zu erklären.
 
Und dazu schalten Sie jetzt bitte um auf unser kleines Tutorial.

Michael Charlier

gelber Punkt Diesen Beitrag kommentieren?
Spacer Hier geht's ins Forum »»»

Webwriting-Magazinspacer
spacer spacer zur Startseite Webwriting: Text, Design, Usability.... Tipps, Tricke, Tutorials Lob, Kritik, Rezensionen Was das Netz bewegt... Software, Tools Für Euch gelesen Surftipps, Knowhow-Quellen spacer
spacer
spacerwebwriting-magazin.despacer Newsletterspacer Forumspacerspacer Kontaktspacer
spacer