Operation Manual

Nach oben
CSS-Code aus PSD-Dateien extrahieren
Von den Elementen in einer PSD-Komposition können Sie alle oder nur bestimmte CSS-Eigenschaften
kopieren und die Stile direkt in den CSS Designer oder die Elementanzeige in der Live-Ansicht oder direkt in
Ihre CSS-Quelle bzw. Ihr HTML-Dokument einfügen.
Außerdem werden Codehinweise automatisch mit den CSS-Eigenschaften des Elements gefüllt, das Sie in
der PSD-Komposition auswählen. Wenn Sie lieber direkt im Code arbeiten, können Sie diese Codehinweise
verwenden, um die CSS-Eigenschaften in den Code zu extrahieren.
1. Klicken Sie im Bedienfeld „Extract“ („Fenster“ > „Extract“) auf die gewünschte PSD-Datei.
Die Miniaturansicht des PSD wird erweitert, sodass Sie die Komposition deutlich sehen
können.
2. Klicken Sie in der PSD-Datei auf das gewünschte Element. Es wird ein Popup mit einer
Liste der CSS-Eigenschaften des Elements angezeigt, in der Sie die Eigenschaften
auswählen und kopieren können. Sie können die Breite und Höhe des ausgewählten
Elements in Pixel oder in Prozent anzeigen.
Hinweis: Wenn Sie hier „Prozent“ wählen, werden auch die Abstände in
Prozenteinheiten angezeigt.
Option „CSS kopieren“ im Bedienfeld „Extract“
Um CSS-Code zu kopieren, wählen Sie die Eigenschaften aus, die Sie kopieren wollen,
und klicken auf „CSS kopieren“.
3. Fügen Sie den CSS-Code in Ihr Dokument ein. Dafür haben Sie verschiedene
Möglichkeiten:
Um den CSS-Code in den CSS Designer einzufügen, klicken Sie mit der rechten
Maustaste auf den erforderlichen Selektor und klicken auf „Stile einfügen“.
Um den CSS-Code mithilfe der Elementanzeige einzufügen, klicken Sie mit der
rechten Maustaste auf einen Selektor und wählen „Stile einfügen“.
Um den CSS-Code der Eigenschaft in den Code im Dokument einzufügen, setzen
Sie die Einfügemarke auf die gewünschten Position, klicken mit der rechten
Maustaste und wählen „Einfügen“.
574