Schneiden und Zuordnen von Grafiken für CSS Web-Designs

October 25

Schneiden oder "schneiden" einer Grafikformats für ein CSS ist Webdesign ein Weg, um ein großes Bild für Ihre Website zu optimieren. Die Scheiben verwandeln die große Grafik in eine Sammlung von kleineren Grafiken, die schneller geladen werden. Adobe Fireworks ist speziell für die Erstellung von Web-Grafiken, einschließlich Scheiben für CSS. Es auch CSS-Ebenen und HTML-Code wird automatisch erstellt, wenn die Scheiben exportiert werden, um die Scheiben wieder die ursprüngliche Grafik zuordnen. Eine Web Tool wie Adobe Dreamweaver bearbeiten können der Dateien und Code dann um eine CSS-Website zu erstellen.

Anweisungen

Schneiden das Bild

1Schneiden und Zuordnen von Grafiken für CSS Web-Designs

Öffnen Sie Adobe Fireworks und erstellen Sie Ihre Webseite-Bild. Das hier gezeigte Beispiel ist eine Webseite, erstellt mit abgerundete Rechtecke, eines Kreises, etwas Text und ein Foto eingefügt in den Kreis.

2 Klicken Sie im Menü Datei, und speichern Sie diese Datei. Es werden im PNG-Format.

3 Überprüfen Sie Ihrer Grafik und bestimmen Sie die besten Gebiete in kleineren Portionen zu schneiden. Möchten Sie logische kürzen und einheitliche Objekte zusammenhalten. Zum Beispiel der Text am oberen Rand des Bildschirms ein Slice machen würde, die Gänseblümchen corner, Schaltflächenspalte eine dritte, verlassen die zentrale weiße Fläche als die letzte Schicht.

4 Klicken Sie auf das Slice-Werkzeug im Abschnitt Web der Tool-Palette über auf halbem Weg nach unten. Es sieht aus wie ein Licht grünes Quadrat mit einem Messer vor ihm. Es funktioniert wie ein Formwerkzeug.

5 Klicken Sie und ziehen Sie, um das erste Segment zu markieren. Im hier gezeigten Beispiel ist das Gänseblümchen in der Ecke eines Segments werden festgelegt. In den Schichten erscheint die Farbpalette auf der rechten Seite des Bildschirms ein neues Objekt in der Web-Ebene, die in diesem Segment darstellt.

6Schneiden und Zuordnen von Grafiken für CSS Web-Designs

Doppelklicken Sie auf das Segment-Label in der Web-Ebene-Palette und benennen Sie das Objekt von "Scheibe" zu etwas genauer, die leichter zu verstehen, wenn Sie den HTML-Code später betrachten werden.

7 Erstellen Sie mehrere Segmente um den Rest Ihrer Grafik und speichern Sie die Datei erneut.

Bilder und HTML/CSS-Code exportieren

8 Klicken Sie im Menü Datei auf exportieren.

9Schneiden und Zuordnen von Grafiken für CSS Web-Designs

Im Export-Menü am unteren Rand des Dialogfelds "CSS-Ebenen .htm" wählen. Lassen Sie die Quelle als "Feuerwerk Slices."

10 Klicken Sie auf "Neuer Ordner", und erstellen Sie einen neuen Speicherort für die exportierten Dateien, wenn Sie nicht möchten sie exportiert an denselben Speicherort auf die ursprünglichen PNG-Grafik-Datei, die, der Sie gearbeitet haben.

11 Klicken Sie auf die Schaltfläche "Exportieren".

12 Verlassen Sie Feuerwerk zu und suchen Sie den Ordner, in den Sie die Dateien exportiert. Sie sollten sehen, dass einzelne JPG-Dateien für jedes Segment und ein HTML-Dokument, das enthält den Code, um sie wieder als Webseite zusammen.

13Schneiden und Zuordnen von Grafiken für CSS Web-Designs

Öffnen Sie die HTML-Datei in Adobe Dreamweaver, Fireworks generierten Code zu sehen und weiter zu arbeiten mit exportierten Segmente, die Web-Seite zu beenden.

Tipps & Warnungen

  • Wenn Sie Ihre Scheiben mit Code für HTML-Tabellen anstelle von CSS-Ebenen exportieren möchten, wählen Sie "HTML und Bilder" statt "CSS-Ebenen" aus dem Drop-down-Menü im Dialogfeld Exportieren.