Webseitengestaltung, Seite 7
Die Begleitung zur Seite 28 - 29 der Nvu Anleitung mit Nvu / KompoZer
Für diese Seite wurde das externe stylesheet zu "kurs1b.css" weiter entwickelt und das Logo in die Navigation übernommen. Für die Anwendung des zu Tabellen Gelernten gibt es diesmal drei Beispiele mit den unterschiedlichsten Tabellen hier zu sehen. Hast du selbst ein Beispiel, sende es bitte ein oder emaile dessen Webadresse. Eine Tabelle mit deutlichem Rand habe ich im zusätzlichen Laborseminar eingesetzt

Blatt 28, 3.6.2.6, Zellgrößen

Mit unbestimmten Tabellenbreiten und auch vorgegeben Maßen hast du schon gearbeitet. In einigen Fällen wurden die Ausdehnungen der Zellen durch die Maße der eingefügten Grafiken festgelegt. Jetzt folgt eine blinde Tabelle mit einer einzigen Zelle. Diese Grafik  nehme ich für den Hintergrund, um einen Farbverlauf zu erzeugen.
Die kleine Grafik in der Textzeile hier drüber ist mit Nvu auf  100 x 10 Pixel reduziert worden.  In Wirklichkeit und völlig unnötig ist sie 891 x 34 Pixel groß. Erzeugt habe ich sie mit einem Rechteck ohne Rahmen und zweifarbigem Verlauf mit Excel. Senkrecht kann jetzt die Tabelle jede Höhe haben. Diese Tabelle hier ist unbestimmt und richtet sich nach dem Text hier und deinem Windowsfenster. Durch das vertikale Kacheln wird der Farbverlauf senkrecht immer weiter wiederholt. Soll die Höhe der Tabelle oder Zelle eingestellt werden, kann im table- oder td-Tag genauso  wie border="0" an gleicher Stelle auch height="800" zum Beispiel eingesetzt werden.

Bei dem Beispiel hier werden die meisten Besucher viel Rot sehen. Erst bei einer Fensterbreite über 800 px hinaus geht die Grafikfarbe schön in die Hintergrundfarbe über. Für ein Bisserl Rot würde ich den Verlauf in meiner Grafik auf 100 Pixeln Breite oder nur 50 abwickeln.
TABELLE 1

Die Farbe in der Tabelle 1 zerstört die ansonsten schöne Seite, aber Schönheit war bis jetzt noch nie Gegenstand in diesem Kurs. Zu viele verschiedene  Farben hinterlassen beim Besucher den Eindruck von Chaos. Außerdem kippt die ganze Seite nach links. Deshalb wäre zu überlegen, das Rot oder eine geeignetere Farbe auf die rechte Seite zu legen. Wenn es überhaupt passt? Ist ja nur zum Lernen gedacht.

Blatt 28, 3.6.2.7 Tabelleneigenschaften

Tabelle mit dem caption-tag
BILD 1

Zum Ausprobieren der Anweisung habe ich vorübergehend eine Tabelle hier eingefügt. Bild 1. Der Dialog 'Tabelleneigenschaften', Blatt 29 oben, kennt keine Eingabe des Titels. Da ist es praktisch, dass Nvu den Editiermodus 'HTML-Tags' hat. Der Cursor wird hinter 'Caption' platziert. Die Schrift des Titels kann über den Button Erweitert eingestellt werden. Hier haben wir aber das Rechtsklicken in der Statuszeile schon geübt. Dort werden die inline styles auch nachträglich schneller verändert. <caption> gehört zum HTML-Standard 4.0, die im Bild Blatt 29 oben in der Auswahl genannten 'Unter der Tabelle' oder 'links/Rechts von der Tabelle' bitte weglassen. Das steht beim W3C auf der Abschussliste, das zugehörige align-Attribut ist als deprecated ausgewiesen. Das Beispiel Tabelle 2 setze ich in eine Blindtabelle mit 2 Zellen über der ganzen Breite hinein, damit ich in der rechten Zelle rechts davon ungestört weiter schreiben kann.
Tabellenkopf
Tabellenfuß
Tabellenkörper
TABELLE 2 		Seit HTML-Standard 4.0 gibt es auch <thead>, den Tabellenkopf, <tfoot>, den Tabellenfuß und <tbody>, den Tabellenkörper. In der hier genannten Reihenfolge müssen sie verwendet werden, und kein Element davon darf wegfallen. Aus Daffke habe ich Schwarz-Rot-Gold in dieser Reihenfolge im Quelltext eingesetzt und du siehst, dass daraus keine Flagge wird. Der Quelltext lautet:
<table border="0"><thead style="background-color: black;"><tr><th style="color: white;">Tabellenkopf</th></tr></thead><tfoot style="background-color: red;"><tr><td>Tabellenfuß</td></tr></tfoot><tbody style="background-color: gold;"><tr><td>Tabellenkörper</td></tr></tbody></table>.

Was wäre, wenn Mensch eine zu komplizierte Tabelle zuerst in einem auf Tabellen spezialisiertem Programm erstellt, zum Beispiel mit OpenOffice.org Calc oder Excel, und es dann mit diesem Programm in eine HTML-Datei konvertiert?
Beide Programme erzeugen viel zu viel Code, weil sie auch das Zurückladen erlauben. In jedem Fall kann eine HTML-Tabelle nicht rechnen, es geht ja nur um das Format der Darstellung. Formeln werden durch ihre Werte ersetzt. Du kannst hierzu mein Excelbeispiel (162kB, keine Makros) und die alternative OpenOffice Calc-Tabelle (220kB, keine Makros) mit deinem Browser im Extrafenster laden, aber auch mit Nvu natürlich und mit Excel bzw. OpenOffice Calc. Beide Tabellen in HTML werden von ihren Mutterprogrammen mitsamt Formaten wiedererkannt und vollwertig ins Tabellenprogramm zurückgelesen. Daher der gewaltige Codeumfang.


Auftrag 7

Lade und bearbeite mit Nvu die Dateien "www.elew.de/kurs1/auftrag07.html" und dann "www.elew.de/kurs1/auftrag07a.html". Kehre dann wieder hier her zurück.

Die Ergebnisse können von deinen abweichen. Hier 07fertig und 07afertig. Weiter mit Seite 8 per Navigation.

Was jemand, der bisher keine Ahnung hatte, nach dieser Seite getan haben, bzw. können sollte:

Die von Nvu zur Anzeige verwendete Schriftart einstellen (A7, a,b)
In Nvu und Firefox die Schriftgröße mit [Strg]-[+] und [Strg]-[-]  wählen (A7, a)
Die Schriftart Courier als mit fester Breite erkennen (A7, a)
Nvu- und Browser-Schriftart unterscheiden (A7, c)
Eine Tabelle 3x4 erstellen (A7, f)
Die Tabellen-Schrift per inline style festlegen (A7, g)
Tabellenbreiten im Quelltext ändern oder einsetzen (A7, j)
Inline styles in ein internes style sheet umwandeln (A7, k)
Aus einem inline style eine Klasse im internen style sheet erzeugen (A7, k)(A7a, i)
Das interne style sheet im CSS Editor editieren (A7, k)
Ein internes style sheet im Quelltext entdecken (A7, k)
Ein internes style sheet im Quelltext ändern (A7a, a)
Eine vorhandene Tabelle im Quelltext durch zusätzliche <table>-Tags aufspalten (A7a, c,d)
Einer Tabelle per Auswahl eine Klasse zuweisen (A7a, e)
Einer Tabelle im Quelltext <thead> und <tfoot> zuweisen (A7a, g)
Textstellen eine <span>-Klasse zuweisen (A7a, j)
CSS-Regeln im CSS Editor löschen (A7a, k)


Garantie: Falls nicht(s) verstanden, erfolgen Zusatzinformationen nach Erhalt einer eMail mit Beschwerde an garantiert at huscholz punkt de senden.

Vorschläge, Fragen, Kritik zum Kurs

Frage 18.12.2005 R.F.: "Das Tabellen bauen und NVU helfen mir schon weiter. Gerne würde ich mir mit NVU bekannte HPs ansehen. Ich denke, dass www.rtlshop.de auch mit Tabellen arbeitet, kann die aber nicht laden. Liegt das an NVU?
Antwort: Unter der angegebenen Adresse erhältst du eine mit "frames" aufgebaute Seite und frames werden von Nvu nicht unterstützt. Bei Nvu gab es einen Absturz, KompoZer hängt sich auf. Nach so einem fehlgeschlagenen Ladevorgang befreie ich Nvu / KompoZer mit einem Neustart von allen Trümmern. Dir bleibt aber, mit deinem Browser den Quelltext zu speichern, und außer einem schönen internen style sheet siehst du auch viele <table>-Tags. Aus einem Quelltext kannst du geeignete Stellen in eine Nvu-Seite kopieren und dann untersuchen.