zur Startseite vom TP

1Aufbau einer Tabelle

Fireworks generiert in der Regel Code in Form von Tabellen. Eine Tabelle ist ein alles umfassender Container. In diesem Container befinden sich je nach Aufbau der Seite die einzelnen Zellen. Im folgenden Bild sind diese Zellen rot markiert und die alles umfassende Tabelle blau (Abb. 1).

Dieser einfache Aufbau ist nichts schlechtes, sofern nicht mehr Inhalt vorgesehen wird. Fireworks exportiert das auch so in der Standardeinstellung, sofern man das so segmentiert hat. Mit Segmenten in Fireworks bestimmt man genau diese rot umrahmten Zellen. Die Zwischenräume zwischen den einzelnen Zellen bitte wegdenken, die sind hier nur zur Darstellung bestimmt! Wenn das nun so gut ist, warum zerschießt es dann die Layouts immer wieder?

2Zerschossen

Mit Inhalt der nun über das ursprüngliche Layout hinausgeht, erhält man genau den Effekt wie im folgenden Bild. Nichts sitzt mehr schön untereinander, es entstehen Zwischenräume. Selbst die - nach oben - Ausrichtung der Bilder in den einzelnen Zellen (2 Bild rechts) oder die Angabe der Zellhöhen bringt keinen Erfolg, es bleibt zerschossen. Ohne aufwendige Nacharbeit kommt man hier nicht weiter (Abb. 2).

3Ursachenforschung

Eine Tabelle mit ihren Zellen ist, einmal bestimmt, eine feste Struktur (Anzahl Zellen). Ändert sich die alles umfassende Tabelle durch mehr Inhalt in den Abmaßen, dann ändern sich zwangsläufig auch die Zellen. Diese werden entsprechend prozentual an die Tabelle angepasst. Um alles stabil zu halten, müsste die Software selbstständig Stützen oder gar neue Zellen an den richtigen Stellen einfügen, aber wieso sollte sie in Ihr Layout eingreifen und zudem noch erraten, was sie sonst noch so vorhaben? Kurz, die Ursache ist auf jedenfall der Anwender.

4Inhalt mit extra Tabellen strukturieren

Zellen werden immer an die Tabelle angepasst, so weit haben wir das. Damit bestimmmte Inhaltsteile unabhängig vom Rest bleiben, gibt es nur einen sinnvollen Weg! Man setzt diese Teile in jeweils eine separate Tabelle. Im Beispiel wäre das eine Tabelle für die Navigation und eine für die rechten Bilder. Da diese extra Tabellen nicht in der Größe geändert werden, sind innerhalb davon auch keine Zellen betroffen. Diese Tabellen bleiben wie vorgesehen. Im folgenden Bild passt es noch nicht ganz, aber einen Umstand haben wir schon mal beseitigt, die Navigation und die Bilder sind untereinander nicht mehr zerschossen, so wie es oben der Fall ist (Abb. 3).

5Den Umstand der Zellerweiterung zu Nutze machen

Wir haben nun für Navigation und Bilder jeweils eine Tabelle. Diese Tabellen sitzen innerhalb der alles umfassenden Tabelle und dort nur in jeweils einer Zelle links und rechts. Diese Tabellen selbst werden nicht geändert, sondern als ganz normaler Inhalt in den beiden Zellen betrachtet. Diesen Inhalt kann man in der entsprechenden Zelle einfach nach oben ausrichten und das Layout passt immer, egal wie lang sich alles nach unten ändert (das Prinzip gilt auch in der Breite). Der Vorteil ist aber noch ein anderer. Die beiden Zellen, in denen jetzt unsere extra Tabellen sitzen, werden immer in der Größe angepasst. Man braucht ohne neue Zellen hinzufügen zu müssen, nur ein Hintergrundbild oder eine Farbe für diese beiden bestimmen und das wird ins unendliche fortgeführt (Abb. 4).

6Die Fireworkspraxis

Das Grundverständnis, warum es Layouts zerschiesst, sollte nun da sein. Fireworks bietet mehrere Optionen zum Export. Um nun zu einer verschachtelten Struktur zu kommen, muss man das auch wie folgt einstellen (Abb. 5).

Die Segmentierung dazu würde so aussehen (Abb. 6).

7Kurze Erläuterung dazu

Das HTML-Segment erzeugt eine leere Zelle in die man gleich etwas in Fireworks reinschreiben kann. Dieser Inhalt ist dann kein Bild beim Export. Schreibt man nichts rein, dann wird dort eine Platzhaltergrafik eingefügt, sofern in den HTML-Einstellungen für Leere Zellen angegeben. Wer das jetzt alles wirklich verstanden hat, dem sollte einleuchten, dass es dieses Lauyout nach dem Export als verschachtelte Tabellen (ohne Platzhaltergrafik an der Stelle) wieder etwas verhaut und zwar wie folgt (Abb. 7).

Die Höhe ist nur der eine Faktor, es gibt ja noch die Breite, die wir hier noch gar nicht hatten! Kein Problem, als schnelle Lösung, einfach die Zellbreite eintragen (siehe Segmentbreite, Abb. 8).