Sådan Cut og kort Grafik til CSS Web Design

September 19

Skæring eller "udskæring" en grafik til en CSS webdesign er en måde at optimere et stort billede til din hjemmeside. Skiverne slå stort grafisk i en samling af mindre grafik, der vil indlæses hurtigere. Adobe Fireworks er specielt designet til at skabe web-grafik, herunder skiver til CSS. Det skaber også CSS lag og HTML-kode automatisk, når skiverne eksporteres, at kortlægge skiverne tilbage til den oprindelige grafik. En web-redigering værktøj som Adobe Dreamweaver kan derefter bruge de filer og at kode til at konstruere en CSS hjemmeside.

Instruktioner

Udskæring af billedet

1 Sådan Cut og kort Grafik til CSS Web Design

Åbn Adobe Fireworks og oprette din hjemmeside image. Det viste eksempel er en webside oprettet med afrundede rektangler, en cirkel, noget tekst og et fotografi indsat i cirklen.

2 Klik på menuen Filer og gemme denne fil. Det vil være i PNG-format.

3 Undersøg din grafiske og bestemme de bedste områder til at skære i mindre portioner. Du ønsker at gøre logiske snit og holde unified objekter sammen. For eksempel vil teksten i toppen af ​​skærmen gør ét udsnit, daisy hjørne anden, og knappen kolonnen en tredje og efterlod hvide centrale område som den sidste skive.

4 Sådan Cut og kort Grafik til CSS Web Design

Klik på Slice Tool i web sektion af værktøjskassen, omkring halvvejs ned. Det ligner en lys grøn firkant med en kniv foran det. Det fungerer som en form værktøj.

5 Sådan Cut og kort Grafik til CSS Web Design


Klik og træk for at markere den første skive. I det viste eksempel er Daisy i hjørnet sat til at være en skive. I lagpaletten i højre side af skærmen et nyt objekt vises i Web Layer repræsenterer denne skive.

6 Sådan Cut og kort Grafik til CSS Web Design


Dobbeltklik på skive etiketten i Web Layer paletten og omdøbe objektet fra "Slice" til noget mere konkret, som vil være lettere at forstå, hvis man ser på HTML-koden senere.

7 Sådan Cut og kort Grafik til CSS Web Design


Opret flere skiver til at dække resten af ​​din grafiske og gemme din fil igen.

Eksport af billeder og HTML / CSS kode

8 Klik på menuen Filer og derefter Export.

9 Sådan Cut og kort Grafik til CSS Web Design

Vælg "CSS Lag .htm" fra Export menuen nederst i dialogboksen. Lad Kilde som "Fyrværkeri udsnit."

10 Klik på "Ny mappe" og oprette en ny placering til de eksporterede filer, hvis du ikke vil have dem eksporteret til den samme placering på den oprindelige PNG grafiske fil, du har arbejdet på.

11 Klik på knappen Eksporter.

12 Sådan Cut og kort Grafik til CSS Web Design


Afslut Fyrværkeri og find den mappe, som du har eksporteret filerne. Du bør se individuelle JPG-filer for hver skive og et HTML-dokument, der indeholder koden til at sætte dem sammen igen som en webside.

13 Sådan Cut og kort Grafik til CSS Web Design


Åbn HTML-filen i Adobe Dreamweaver at se koden Fyrværkeri genererede og at fortsætte med at arbejde med dine eksporterede skiver for at afslutte websiden.

TIPS

  • Hvis du vil eksportere dine skiver med kode til HTML-tabeller i stedet for CSS-lag, skal du vælge "HTML og billeder" i stedet for "CSS Lag" fra drop down menuen i dialogboksen Eksporter.

relaterede artikler