In der Nvu-Anleitung geht es jetzt um Tabellen in Nvu und ich bin froh, dass mit den externen style sheets dir ein zeitgemäßes Layout ohne Tabellen im Kurs vorher begegnet ist. Nur deswegen, damit du nicht auf Tabellen abfährst. Tabellen sind für Tabellen, also notwendig, aber nicht für das Layout.
3.6 Tabellen,
Anleitung, Blatt 23
In 2005 bat ich, die ehemalige Seite "www.uni.de" mit Nvu zu studieren und anzusehen. Inzwischen scheint Anfang 2007 www.uni24.de der Nachfolger zu sein. Noch mehr Tabellen und weniger Rundungen als in 2005. Wenn du mit Nvu die uni24-Seite lädst, erhälst du von Nvu im Editiermodus 'Normal' die roten Hilfslinien. Meine zwei Bildschirmfotos von 2005 zeigen oben die Modi 'Normal und darunter 'Vorschau' von uni.de in 2005.
Ebenfalls eine Tabellenstruktur hat dieser Televersand.
Lädst du das mit Nvu, siehst du, wie Tabellen verschachtelt
werden können. Ein von Nvu rot markiertes Viereck außen enthält
innen weitere rote Vierecke, die wiederum rote Vierecke enthalten.
Das ist früher notwendig gewesen, um das Layout zusammen zu halten.
Früher. Aber
diese Webseite trägt die Farben der Saison und gilt Anfang 2007
vielleicht von daher als zeitgemäß. Klicke irgendwo hinein und sieh'
die z.B. die Tags <td> für Zelleninhalt und <tr> für
Tabellenzeile.
Bitte vergleiche mit Nvu bei den gleichen Farben der Saison die Seite www.web.de. Das ist nicht nur das Design von heute sondern auch der Stand der Technik: Keine Tabellen und keine <td> oder <tr> in der Nvu-Statuszeile. Klicke bei web.de hinein wo du willst, nur <div>-Container und <li>-Elemente mit CSS überall.
Aber wer merkt das schon, wirst du vielleicht denken. Hauptsache es funktioniert und sieht gut aus. Nur wenige Jahre zurück hat es eben nur mit Tabellen funktioniert. Die Tabellenränder und Zellenrahmen wurden auf unsichtbar gesetzt und die Tabelle ergab als Blindtabelle das Gerüst für einen stabilen Seitenaufbau. Im Auftrag 6 kommt das vor.
Ich selbst sitze ja im Glashaus. Meine eigenen Seiten zu ändern, vor Jahren mit Tabellen konzipiert, komme ich nicht dazu. Wie der Schuster mit den Löchern in den Sohlen. Oder hier diese Webdesigner, http://www.hipp-online.de/. Nvu zeigt mit den roten Linien das Layout mit Blindtabellen. Hier noch einmal Webprofis, diesmal mustergültig http://www.tibco.com/devnet/index.html. Die Ausrufezeichen im Editiermodus 'Normal' markieren jeweils Kommentare im Quelltext. Wenn sie stören, gibt es eine Existenzberechtigung für den Vorschaumodus. Da sind sie weg. Ansonsten ist eine richtige Vorschau ja nur mit dem Browser möglich.
Auf Blatt 23 steht einer der Nachteile von Tabellen. Ein weiterer Nachteil ist, dass der Browser die ganze Haupttabelle laden muss, um dann die Bildaufteilung zu berechnen. Du siehst erst etwas, wenn der Browser fertig ist. Bei soviel Inhalt wie bei web.de würden die meisten Besucher bis dahin unruhig werden. Stattdessen, ohne Blindtabelle, gibt es sofort viel zu sehen und allmählich schiebt sich das Nachgeladene eventuell noch in die richtige Position.
Auftrag 6
Die Datei "www.elew.de/kurs1/auftrag06.html" mit Nvu laden und bearbeiten. Komme dann wieder hierher zurück.
Ergebnis 6
Zurück? Das Ergebnis vom Auftrag 6 siehst du hier.
Was jemand, der bisher keine Ahnung hatte, nach dieser Seite getan haben, bzw. können sollte:
Eine Tabelle mt Nvu erstellen. (A6, a)
Die Zellenbreite einer Tabelle im Quelltext verändern. (A6, a)
Eine randlose Blindtabelle in Nvu entdecken (A6, b) und erstellen (A6, d).
Die Zellenbreite einer Tabelle im Normalmodus anhand der Nvu-Lineale verändern. (A6, b)
Mit den Nvu- Einfüge und Löschsymbolen die Zellenzahl einer Tabelle verändern. (A6, e)
Eine Tabelle in einer Tabelle verschachteln. (A6, f)
Hintergrundbilder in Tabellen einbauen. (A6, g)
Mit einem Rahem von 3 pixeln Breite einen 3D-Effekt erzeugen. (A6, h)
Ein Hintergrundbild kacheln. (A6, j)
Mit "runden" Grafiken "runde" Tabellen erzeugen. (A6, h-i)
Einzelnen Zellen eine Hintergrundfarbe geben. (A6, h-i)
Tabellencode im Quelltext editieren und kontrollieren. (A6, h, l)
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 8.12.2005 B.M.: "Mit Tabellen habe ich noch so meine Probleme. So schaut z.B. die HP mit dem Firefox OK aus, mit dem Internet Explorer ist aber zwischen der Kopfgrafik und der linken Grafik darunter ein Spalt, den ich nicht weg bekomme. Kannst du mir hierzu ´nen Tipp geben?
Antwort: Ich habe von deiner HP die Grafiken mit deinem Spalt als Prblem No.5 auf diese Seite ins Laborseminar geladen (Bitte zum Betrachten den IE benutzen). Oben auf der Seite dein Problem, das mit dem Firefox und Nvu nicht erkannt werden kann. Unten eine komplette Kopie deines Quelltextes wiederholt und repariert. In den Zeilen 45, 48 und 51 habe ich jeweils ein Leerzeichen gelöscht.
Frage 25.12.05 A.S.: "Ich habe deine Kurse bis zum Teil 6 gemacht, mit den Tabellen komme ich aber nicht klar. Bei mir schiebt sich die innere roten Tabelle nach links über den Rand hinaus, ich verstehe nicht warum. Hier der Quelltext." (Als Auszug hier mit der Nvu-Vorschau gut zu sehen.)
Antwort: Hier die vier Reparaturen mit Nvu. Webadresse öffnen... http://elew.de/kurs1/ergebnisse/as051225.html . 1. Im Quelltext Zeile 32 ; width:80% entfernen. 2. Dann Zeile 31 komplett ersetzen mit <td align="center" valign="middle"> und 3. in Zeile 39 vspace="1" auf 0 ändern. Schließlich 4. Im Normal-Editiermodus auf die linke runde rote Ecke doppelklicken und im Dialog 'Grafik-Eigenschaften / Dialog Erscheinungsbild den Text an der Grafik unten ausrichten.
Weiter mit Seite 7, jedoch gibt es dafür jetzt die Navigation links oben. Nach oben
