HTML & CSS Version 3.3

Variante mit einer grossen HTML Tabelle, relativen Größen und Abständen sowie multipel kombinierbaren Style-Klassen und verschachtelten Definitionen für Links.

[Stand Mai 2005]

Alle Versionen >> 

Grundsätzliches

Erläuterungen >> 

Aufbau und Struktur >> 
CSS-Zuweisung >>
Besonderheiten >>

HTML

Erläuterungen >>

HEAD & BODY >>
Kopf-Navigation >>
Kopf-Container >>
Content-Container >>
Mehrzeilige Content-Container >>
Fuß-Navigation >>
Trenner >>

CSS

Erläuterungen >>

Globaldefinitionen >>
Globaldefinition Tabelle >>
Containertypen >>
Containerfarbe >>
Containerabstand links >>
Containerabstand oben >>
Spezialzeile >>
Edit-Zelle >>
Dynamische Container >>
Soundsteuerung >>
Blockelemente (Content) >>
Formulare (Content) >>
Listen (Content) >>
Inlineelemente (Content) >>
Textfarben (Content) >>
Globaldef. Links (Content) >>
Links in Listen (Content) >>

Beispiel HTML-Seiten

Masterseite >> 
Masterseite mit sichtbaren Platzhalter (blank.gif) >>
Spezielle Statuszeilen >>
Editcontainer >>
Tabelle in einer Zelle >>
Vorlesungscontainer >>

Grafiken und CSS-Datei

Grafiken [Übersicht] >>
CSS-Datei 3.3 [CSS] >> 
CSS-Datei 3.3 [TXT] >> 

Grundsätzliche Erläuterungen

Aufbau und Struktur

Diese Version entspricht dem Entwicklungsstand Anfang Mai 2005. Gegenüber der Version 3.0 gibt es folgende Veränderungen:

• Die Definitionen für die Farbe und Text-Unterstreichung der Links erfolgen nicht in speziellen Klassen, sondern in Anhängigkeit von der Klasse der Tabellenzelle (Veränderung in Version 3.1).
• Aufnahme spezieller Definitionen für Tabellen innerhalb einer Zelle (Veränderung in Version 3.2)
• Korrektur zur Sprachausgabe (Veränderung in Version 3.2)
• Korrektur der Kopfcontainer (Veränderung in Version 3.3).
• Die Definition für die Breite von Eingabefeldern erfolgt nicht im HTML-Element des Eingabefeldes ondern in Anhängigkeit von der Klasse der Tabellenzelle (Veränderung in Version 3.3).

Im wesentlichen besteht der Aufbau dieser Variante aus einer vierspaltigen HTML Tabelle. Die Abstände und Größen für die Schriften als auch die Container sind relativ in "em" definiert, entsprechen den in Version 1 und 2 verwendeten Pixelgrößen (bei Normalansicht) und skalieren die Seite insgesamt sehr gut.

Desweiteren sind alle Style-Definitionen in CSS-Klassen untergebracht worden. Auch diese Variante enthält transparente Grafiken (Platzhalter) als Mindestgrößen-Garantie für die Breitenangaben der Tabellenzellen (blank.gif), da viele Browser das "min-width"-attribut noch nicht interpretieren. Diese Grafik-Datei sowie alle anderen benötigten Logo-Grafiken sind im Verzeichniss ico_v3 zu finden.

Die wesentliche Änderung in Version 3.0 im Vergleich zu den Vorgängerversionen besteht nun zum einen, darin auf verschachtelte Tabellen zu verzichten. Zum anderen wurden die Style-Angaben in sinnvolle, kombinierbare Klassen ausgelagert. Das heisst dass es Klassen für Farbigkeit, Abstände usw. gibt und den verschiedenen Tabellenzellen mehrere Klassen zugewiesen werden, damit sie ihre spezifische Erscheinung erhalten.

Unter CSS-Datei 3.3 [TXT] liegen die letzten für diese Variante gültigen Style-Definitionen als Textdatei. Unter CSS-Datei 3.3 [CSS] liegt die Datei als CSS-Datei. Die Erläuterungen auf dieser Seite beziehen sich immer auf diese CSS-Datei.

Da wir die Styles und den HTML-Code weiter entwickeln, kann es immer wieder neue Versionen geben. Unter Alle Versionen sind alle Versionen archiviert. Die einzelnen CSS-Definitionen sind unten mit dem jeweiligen Quelltext erläutert. Die Links zu den Erläuterungen rechts verweisen auf die einzelnen Abschnitte.

CSS-Zuweisung

Globaldefinitionen

Hierüber werden grundsätzliche Formatierungen für den body, die Tabelle und Schrift und Farbe vorgenommen, die aber - je nach Bedarf - durch weitere Klassen überschrieben werden. Näheres dazu wird in den CSS-Erläuterungen deutlich.

Container

Wie oben schon erwähnt, werden hier sogenannte "multiple" Klassen verwendet. Das bedeutet, daß einem td-tag mittels des "class"-attribut mehrere Klassen zugeordnet werden. Insofern es sich um Container im eigentlich Sinne handelt, müssen diesen td-tags jeweils eine Klasse für die Container-Art (Textcontainer, Textcontainer mit Einzug rechts, Bildcontainer oder Navigationscontainer), eine Klasse für die Container- und Schriftfarbe, eine Klasse für die Abstände zur linken Seite hin und ggf. - insofern erwünscht - eine weitere Klasse für den vertikalen Abstand der Container zugewiesen werden.

Trenner

Es gibt nur zwei Maße für Trenner: 8-Pixel und 24-Pixel Abstände. Wenn Container getrennt werden, so geschieht dies mit dem Standart-Wert von 8 Pixeln. Möchte man Containergruppen, die bereits 8er-Trenner enthalten von anderen Gruppen trennen, so kommt hier der 24-Pixel-Trenner zum Tragen.

Besonderheiten

Spezial-Trenner

Es gibt einen Spezial-Trenner zwischen der Hauptnavigation oben und dem Kopfcontainer (der mit dem Logo). An dieser Stelle wird auch ein 24-Pixel-Trenner eingeseztt, wobei diese Tabellenzeile und ihre Zellen ein Sonderfunktion einnehmen: Über diese Tabellenzellen wird die Global- und Mindestbreite der vier Tabellenspalten erzeugt.

Spalten/Reihen

Da der gesamte Tabellenaufbau vierspaltig ist, muß man - insofern man einen Container größer als eine Spalte nutzen möchte - das "colspan"-Attribut nutzen. Das gleich gilt für Container, die "mehrzeilig" sein sollen. Ein Beispiel wäre hier ein Container, der so hoch ist, wie zwei neben ihm stehende Container zusammengenommen. In diesem Fall muß man Gebrauch vom "rowspan"-Attribut machen. Allerdings muß man hierbei bedenken, daß jede Tabellenzeile eine eigene "tr" (table-row) ist. Ergo wäre im Falle des gerade genannten Beispiels der Trenner zwischen den beiden Containern auch eine eigene Tabellenzeile, die es als "row" mitzuzählen gilt, wenn man dem "rowspan"-Attribut einen Wert zuweist.