zur Startseite vom TP

1Vorwort

Das Tutorial wendet sich vor allem an User, die ihre Webseiten komplett in Fireworks erstellen wollen und nur noch den Inhalt mit Dreamwaever oder ähnlichen Editoren einfügen. Das Tut ist nur ein kleines einfaches Beispiel. Mit Textsegmenten kann Code z.B. für Layer und mehr auch in Fireworks schon integriert werden (Eingabefeld bei Typ: Text), vom Prinzip eben alles was zwischen den Tags <td>...</td> sonst auch steht.

Kenntnisse der Exportoptionen sowie der grundlegende Umgang mit Segmenten sollten vorhanden sein.

21. Schritt

Ein Rechteck ohne Füllung, nur mit Pinselstrich zeichnen

32. Schritt

Dem Rechteck die gewünschten Effekte zufügen. Im Beispiel ein Schlagschatten und Außen geschliffen mit folgenden Einstellungen.  

So sieht's dann fertig aus. 

Dies wäre eine mögliche Tabelle, deren Aussehen und Größe nun gemäß den eigenen Vorstellungen und natürlich dem späteren Inhalt entsprechend an das gesamt Layout angepasst werden kann.

43. Schritt

Ist das Layout erstellt, muss es noch für den Export vorbereitet werden. In Fireworks kann man durch Zeichnen von Segmenten die Struktur einer Seite bestimmen. Jedes Segment ist später eine Tabellenzelle. Wichtig ist hier vor allem, das Feld innnerhalb der Tabelle für den späteren Inhalt zu kennzeichnen. [Abbildung 7 - Bestimmen der Struktur von Tabellen mit Segmenten]

Die grünen Segmente (Segmente wurden verschiedenfarbig zur Verdeutlichung eingefärbt) sind als Textsegmente festgelegt.

An diesen Stellen kann später beliebiger HTML-Inhalt eingefügt werden. Die Festlegung für das ausgewählte Segment als Typ Text geschieht in folgendem Bedienfeld. Und hier kann, wer will, schon Inhalt einfügen. Die Browservorschau (F12) gibt Aufschluss, wie alles passt. Mal auf einfaches HTML beschränkt, Fireworks kann durchaus auch komplette „Homepages“erstellen! 

Die Segmentierung allgemein ist so zu wählen, das übermäßig viel Segmente vermieden werden.

54. Schritt

Das gesamte Layout nun als HTML-Datei exportieren und in einem Editor den Inhalt in die dafür vorgesehenen Tabellenzellen einfügen.

6Anmerkung

Es ist nicht immer machbar, den Inhalt nun genau in eine solche Tabelle zu bringen. Daher eine Empfehlung an dieser Stelle.

Wer es so macht, wie hier beschrieben, tut gut daran, aus Fireworks eine komplette HTML-Datei zu exportieren und den Code bis auf den Inhalt vorerst nicht zu verändern. Muss man Änderungen der Tabellenstruktur im Fireworksdokument vornehmen, dann lässt sich die eigentliche HTML-Datei über Datei-->HTML aktualisieren direkt aus FW problemlos anpassen.