Eigenes Design erstellen

Gehen Sie in den Web to Date-Designordner C:\Programe\DATA BECKER\web to date\designs\- FLEXI\.
Zunächst kümmern wir uns nur um die grafischen Design-Elemente:
Erstellen Sie die Eyecatcher-Grafiken, alle in derselben Größe und speichern diese als jpg- oder gif-Dateien im FLEXI-Designordner. Zur Orientierung: die Eyecatcher dieser Seiten haben eine Größe von 974x107 Pixeln. Dies ergibt zusammen mit der Breite der Rahmengrafiken von je 3 Pixeln links und rechts eine gesamte Design-Breite von 980 Pixeln, ideal für Bildschirmgrößen von 1024x768 Pixeln und größer.

Wenn Sie eine eigene Rahmen-Grafik verwenden wollen, erzeugen Sie diese jetzt: erstellen Sie in einem Grafikprogramm den kompletten Rahmen und schneiden daraus die Elemente heraus, die Sie für FLEXI benörigen: die linke obere Ecke, rechte obere Ecke, linke unter Ecke, rechte unter Ecke; die Breiten und Höhen hängen von der gewünschten Rahmenstärke ab.
Ferner benötigen wir zwei Grafikstücke für die linke und die rechte Rahmenseite (=das Stück zwischen oberer und unterer Ecke). Für die Höhe reicht 1 Pixel aus.
Schließlich fehlen noch zwei Grafikstücke für die obere und untere Rahmenseite (=zwischen linker und rechter Ecke). Für die Breite reicht 1 Pixel aus.

Sobald die Grafiken stehen, öffnen Sie die Datei substyle_flexi.ccml mit einem normalen Editor (komfortabel hilft z.B. Notepad+) und speichern die Datei sofort unter einem neuen Namen, vorzugsweise mit dem Namen Ihres neuen Designs, z.B. substyle_mydesign.ccml.
Suchen Sie nun die Stelle, an der die Eyecatcher definiert werden (sollte Zeile 20 sein).
Ändern Sie dort die Zeile
<cc:*>Standard-Eyecatcher</cc:*> <cc:picture obj="pic.eyecatcher.std" dst="peye_w2d4u.jpg" src="pic_eyecatcher_w2d4u_01.jpg">
und geben Ihre eigenen Grafiken an. Das obj="pic.eyecatcher.std" wird als Standard-Eyecatcher eingesetzt, wenn Sie in W2D bzw. S2D keine individuellen Grafiken definieren.
Wählen Sie ein paar Zeilen weiter die Breiten für die linke und die rechte Spalte:
<cc:set obj="TopicBar.grosswidth" value= "200"><cc:*>Breite der TopicBar inkl. Rahmengrafik und paddings</cc:*>
<cc:set obj="SideBar.grosswidth" value= "275"><cc:*>Breite der SideBar inkl. Rahmengrafik und paddings</cc:*>
Die verfügbare Breite für die Contentbar (=mittlere Spalte) errechnet sich FLEXI selbstständig.

Mit den Definitionen für Ihre Rahmengrafik ist dann fast schon alles erledigt:
<cc:picture obj="pic.frm_tl" dst="... <cc:*>linke obere Ecke</cc:*>
<cc:picture obj="pic.frm_tr" dst="... <cc:*>rechte ober Ecke</cc:*>
<cc:picture obj="pic.frm_br" dst="... <cc:*>rechte untere Ecke</cc:*>
<cc:picture obj="pic.frm_bl" dst="... <cc:*>linke untere Ecke</cc:*>
<cc:picture obj="pic.frm_b" dst="... <cc:*>unteres Rahmenstück</cc:*>
<cc:picture obj="pic.frm_t" dst="... <cc:*>oberess Rahmenstück</cc:*>
<cc:picture obj="pic.frm_l" dst="... <cc:*>linkes Rahmenstück</cc:*>
<cc:picture obj="pic.frm_r" dst="... <cc:*>rechtes Rahmenstück</cc:*>

Wenn Sie möchten, ändern Sie noch weitere Parameter z.B. für Hintergründe von Body, Topicbar, Contentbar, Sidebar, Teasern, Tabellen,
oder modfizieren die Abstände zwischen den drei Spalten und/oder zwischen Teaserelementen, die Farbe von Links, die Werte für paddings, margins für Tabellen oder was auch immer.

Mit all diesen Angaben erstellt FLEXI die korrekte CSS-Style-Datei. Sie brauchen sich um nichts weiter zu kümmern.

In der config.ccml fügen Sie ziemlich am Ende (vor den Zeilen , die mit "substyle(..." beginnen), das neue Design ein:
<cc:substyle caption="mein erstes Design" src="substyle_mydesign.ccml" preview="preview_flexi_mydesign.gif" palette="palette_mypalette.ccml">
starten W2D bzw S2D neu, und schon kann es losgehen.