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.

Macwelt Marktplatz

1035112