zur Startseite vom TP

1Vorbereitung

Es gibt immer wieder Probleme ein Frameset zu strukturieren, vorallem in Verbindung mit den in Fireworks erstellten Grafiken. Mit ein bisschen Übung ist es aber gar nicht so schwer.

21. Schritt

Erstellen Sie in Fireworks ein neues Dokument in der Browserauflösung für die Sie die Website gestalten wollen. Z.B. 800x600.

32. Schritt

Nun teilen Sie die Leinwand virtuell in ein Frameset mit Hilfe von Segmenten. Achten Sie darauf, dass die Segmente genau oben bzw. links der Leinwand abschließen und sich nicht überlagern.

43. Schritt

Haben Sie die gewünschten Größen der Segmente bestimmt, nehmen Sie sich Zettel und Stift und schreiben den Wert Höhe des oberen Segmentes und den Wert Breite des linken Segmentes aus dem Bedienfeld Info auf. [Abbildung 2 - Werte (B/H) der Segmente aufschreiben

54. Schritt

Wechseln Sie nun nach Dreamweaver und erstellen Sie ein Grundgerüst dieses Framesets.

65. Schritt

Gehen Sie auf Menü Ansicht / Visuelle Hilfsmittel / Framerahmen, damit blenden Sie die Rahmen ihrer Frames ein.

76. Schritt

Nun klicken Sie zuerst den oberen Rahmen an und wechseln ins Eigenschaftenfenster.

87. Schritt

Im Eigenschaftenfenster schreiben Sie bei Wert die vorher notierte Höhe des oberen Segmentes aus Fireworks rein. Als Einheit geben Sie Pixel an.

98. Schritt

Tun Sie dasselbe für den linken Frame. Beim linken Frame tragen Sie die notierte Breite des linken Segmentes ein, nicht die Höhe. Als Einheit nehmen Sie auch hier Pixel.

109. Schritt

Speichern Sie Ihr Frameset wie gewohnt ab. Nun sind Sie fertig.

Wechseln Sie wieder nach Fireworks. Anhand der folgenden Grafik wird die Vorgehensweise verdeutlicht.

1. Erstellen Sie eine Grafik mit einer abgerundeten inneren Kante, wie sie bei vielen Webseiten zu sehen ist. 

2. Zeichnen Sie für den oberen Bereich ein Segment wie folgt. Achten Sie darauf, dass von der Grafik evtl. Effekteinstellungen mit dem Segment abgedeckt werden. Ein paar Pixel nach unten überstehend macht dabei gar nichts. 

3. Zeichnen Sie anschließend das linke Segment. Auch hierbei darauf achten, dass die Grafik komplett abgedeckt wird. Für genaues arbeiten empfiehlt sich die Einstellung Ansicht / Hilfslinien / An Hilfslinien ausrichten. Damit rastet ein Segment genau am anderen ein, ohne das sich diese überlagern. 

4. Schreiben Sie wieder die Höhe für das obere und die Breite für das linke Segment auf. Den Rest kennen Sie. Stellen Sie wie oben beschrieben die Werte der Frames in Dreamweaver um. Exportieren Sie mit rechtsklick auf die einzelnen Segmente die Bilder mit aussagekräftigen Namen in Ihr Websiteverzeichnis und fügen Sie diese z.B. als Hintergrundbilder in die entsprechenden Framedateien ein.

5. Wenn Sie die Bilder direkt bzw. als Hintergrundbild in einer Tabelle verwenden, richten Sie diese mit marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" im Bodytag aus. Damit entfällt der standardmäßige Browserrand. Arbeiten Sie sehr genau mit dieser Methode. Die verschiedene Browser stellen Abweichungen von 1, 2 Pixel auch unterschiedlich dar, deswegen ebenfalls die margin Attribute.

11Anmerkung

Diese hier genannte Vorgehensweise funktioniert genauso mit Navigationen. Es ist demzufolge durchaus möglich, "Framesets" komplett in Fireworks zu erstellen und als die jeweilige Framedatei zu exportieren. Es lassen sich auch nur bestimmte ausgewählte Segmente exportieren, alles kein Problem.