1035112

Aus Fireworks CS4 als CSS exportieren

19.05.2010 | 15:15 Uhr |

Das Layouten mit Cascading Style Sheets ist nicht unbedingt jedermanns Sache, da man sich beim Gestalten eigentlich mit Quellcode herumschlagen muss.

Icon_FireworksCS4
Vergrößern Icon_FireworksCS4

Einen eleganten und einfachen Einsteig bietet Newsletter Tipps und Tricks Newsletter Tipps und Tricks Tipps und Tricks der Macwelt im Newsletter Der Macwelt-Newsletter Tipps und Tricks erscheint zweimal wöchentlich. url link http://www.macwelt.de/newsletter Hier können Sie den Newsletter abonnieren. _blank Fireworks CS4 mit seinem CSS-Export. Um CSS-Layouts zu erzeugen legt man zunächst eine gewöhnliche Grafik an, etwa in der Bildschirmauflösung, für die das Weblayout optimiert sein soll. Dann zeichnet man Rechtecke für die Seitenbereiche, etwa Navigation, Seitenleiste und Inhalt und färbt sie wenn gewünscht mit den Werkzeugen ein. Über „Datei > Exportieren" und mit der Einstellung „CSS und Bilder" lässt sich ein solch simples Layout in HTML-Code und CSS übersetzen. Im Exportdialog lässt sich dabei über „Optionen..." steuern, ob der CSS-Code in einer externen Datei oder direkt ins HTML-Dokument geschrieben werden soll.

Die Eigenschaften-Palette steuert, was als Pixelgrafik oder HTML umgewandelt wird.
Vergrößern Die Eigenschaften-Palette steuert, was als Pixelgrafik oder HTML umgewandelt wird.

Solange die Elemente im Layout mit CSS umsetzbar sind, übersetzt Fireworks die Grafik in reines HTML und ein externes Stylesheet, das die Farben und Position der DIV-Container festlegt. Erst wenn man mit Besonderheiten wie abgerundeten Rechtecken, Fotos oder Text in besonderen Schriftarten arbeitet, erzeugt Fireworks beim Export auch Pixelgrafiken. Wer möglichst genau steuern möchte, wie jedes Element auf der Seite umgewandelt wird, kontrolliert das segmentieren. Mit dem Werkzeug „Segment" lassen sich die Bereiche der Seite logisch unterteilen. Jedes Segment lässt sich markieren und in der Eigenschaften-Palette kann man exakt definieren wie dieser Bereich exportiert werden soll, etwa als gewöhnliche Vordergrund-Grafik, HTML (Text bleibt dabei auch Text) oder Hintergrundbild. Der CSS-Export in Fireworks ist natürlich kein Ersatz für einen Webeditor wie Dreamweaver oder die Arbeit im Quellcode, aber eine praktische Möglichkeit, erste Entwürfe schnell und ohne Aufwand umzusetzen.

0 Kommentare zu diesem Artikel
1035112