Բովանդակություն
Illustrator CC 2014-ի միջոցով դուք կարող եք CSS արդյունահանել ձեր դասավորությունից և տեղադրել այն ձեր նախընտրած կոդի խմբագրում, որը կարող է ներառել Adobe- ի սեփական Dreamweaver CC կամ Edge Reflow: Այս հոդվածում մենք նայում ենք, թե ինչպես է աշխատում այդ գործընթացը:
Սկսել
Ստորև բերված է պարզ դասավորություն Illustrator- ում `Շերտերի վահանակը բաց: Յուրաքանչյուր շերտ անվանվել է CSS տարր:
Յուրաքանչյուր բաղադրիչի համար CSS ստանալու համար պարզապես անցեք Պատուհան. CSS հատկություններ: Այս վահանակը թույլ է տալիս Ձեզ ՝
- Դիտեք ընտրված օբյեկտների CSS կոդը
- Պատճենեք CSS կոդը ընտրված օբյեկտների համար
- Արտահանեք մեկ կամ ավելի կամ Illustrator- ի բոլոր ընտրված տարրերը CSS ֆայլ
- Արտահանեք օգտագործված rasterizable պատկերներ
- Ստեղծեք զննարկչի հատուկ CSS կոդ
Տեղեկացեք, որ եթե դասերի անուններով շերտեր վահանակում օբյեկտներ չեք անվանում, այս հաղորդագրությունը կստանաք CSS Properties երկխոսության դաշտում.CSS կոդ չի ստեղծվել: Անանուն օբյեկտների համար CSS ստեղծելու համար կա'մ օբյեկտը անվանեք շերտերի վահանակում, կա'մ CSS- ի արտահանման ընտրանքների երկխոսության մեջ միացրեք "Generate CSS for Unnamed Objects" տարբերակը:’
Ստորև նկարված էկրանի վրա ընտրվում է տուփի տարրը, որը հնարավորություն է տալիս մուտք գործել CSS:
Դուք կարող եք օգտագործել CSS- ը Illustrator- ից `տարբեր ձևերով: Երկխոսության տուփի ներքևում կան մի քանի ընդգծված պատկերակներ. Արտահանման ընտրանքներ, Արտահանման CSS, Պատճենել ընտրված ոճը և Ստեղծել CSS: Մեկ այլ տարբերակ `CSS- ի արտահանման ընտրանքներ երկխոսության պատուհանից պարզապես պատճենելն ու օգտագործել այն, ինչպես կա: Այս ընտրանքները հայտնվում են նաև ելնող ցանկի երկխոսության տուփի վերևում:
Արտահանման տարբերակները
Արտահանման ընտրանքների ընտրությունը բերում է CSS Export Options երկխոսության պատուհանը, որտեղ կարող եք ընտրել, թե ինչ արտահանել: Երբ հայտնվում է երկխոսության տուփը, դա արվում է նախնական պարամետրերի տեղում:
Ընտրանքներ բաժնում մեկ պատուհանը չի ընտրվում, որը «Ստեղծել CSS անանուն օբյեկտների համար»: Այս տարբերակը բաց է ձեզ համար, եթե չեք անվանում շերտերը Illustrator- ում: Բայց Illustrator- ում ավելի լավ է անվանել CSS- ի բոլոր տարրերը, քանի որ դրանով հեշտ կլինի հետևել դրանց կոդերի խմբագրում:
Ընտրանքներ բաժնում նույնպես կնկատեք, որ Illustrator- ը կարող է վաճառողի նախածանցեր ստեղծել Webkit- ի, Firefox- ի, Internet Explorer- ի և Opera- ի համար:
Երկխոսության դաշտում դուք կտեսնեք երկու այլ բաժիններ `Օբյեկտի տեսքը և Դիրքն ու չափը: Օբյեկտի տեսք բաժնում բոլոր ընտրանքները միացված են: «Դիրք և չափ» բաժնում մենք միացնելու ենք չափսերի վանդակը, այնպես որ CSS- ը դա կարտացոլի մեր ընտրած կոդերի խմբագրում (որն այս դեպքում կլինի Dreamweaver):
Պատճենել կամ արտահանել
Երբ բավարարվեք ձեր ընտրություններով, կտտացրեք OK ՝ ընդունելու համար: CSS- ը ձեր նախագծային ծրագրի մեջ մտնելու համար կարող եք ուղղակիորեն պատճենել այն կամ օգտագործել Export CSS ընտրանքները:
Ինչպես տեսնում եք, Illustrator- ի մեր տուփն այժմ առկա է Dreamweaver- ում:
Մեկ այլ տարբերակ է պատճենել տեքստը ստորև նշված վանդակում: Դա անելու համար կտտացրեք տեքստի վրա ՝ այն ընտրելու համար: CSS- ը կհայտնվի CSS Properties երկխոսության դաշտում: Նշենք, որ տեքստը հայտնվում է որպես ՝ NormalCharacterStyle:
Եթե ունեք տեքստի տարբեր բլոկներ, կարող եք դրանք վերանվանել վեբ տարրերի, ինչպիսիք են h1, h2 և այլն: Մեկ այլ տարբերակ է պատճենել տեքստը Dreamweaver- ին և վերանվանել այն համապատասխան վեբ տարրին, այս դեպքում `p`: Երբ տեքստը պատճենեք Dreamweaver- ի մեջ, այն կարծես ներքևում նշված լինի:
SVG- ի արտահանում
Կարևոր է գիտակցել, որ բարդ արվեստի գործերը չեն կարող ներկայացվել որպես CSS և պետք է թողարկվեն որպես SVG (մասշտաբային վեկտորային գրաֆիկա): Դա անելու համար անցեք File: Save As: Երկխոսության դաշտում ընտրեք SVG և մուտքագրեք ֆայլի անուն: SVG Ընտրանքների երկխոսության դաշտում կտտացրեք Լրացուցիչ ընտրանքներ կոճակին:
Ընդլայնված տեսքում համոզվեք, որ Պատասխանատու վանդակը միացված է: Երբ նկարը պահում եք, այն ընդարձակելի կլինի զննարկչի մեջ:
Սահմանափակումներ
Ինչպես տեսնում եք, Adobe- ը ստեղծեց մի քանի ռեսուրսներ, որոնք կօգնեն վեբ դիզայներներին իրենց նախագծերը վերածել CSS- ի: Այնուամենայնիվ, կա ուսուցման կոր, և չնայած տարբեր ձեռնարկների միջով անցնելուն, ամբողջ աշխատանքային հոսքը չի գծագրվել: Այս բացերը լրացուցիչ աշխատանք կստեղծեն օգտագործողի համար:
Ի տարբերություն Photoshop- ի, Adobe- ը չի ստեղծել Generator plug-in Illustrator- ի համար: Այդ բացը լրացնելու համար Դեյվիդ Դերեդտը ստեղծել է Layer Exporter կոչվող ընդլայնում, որը կարող է օգտագործվել պատկերային ակտիվների ստեղծումը ավտոմատացնելու համար: Գոյություն ունի տեսանյութի ձեռնարկ, որը կօգնի ձեզ, բայց բացակայում է, ինչը դժվարացնում է հետևելը:
Այս խնդիրները մի կողմ թողնելով, Adobe- ը հաստատ CSS- ի փոխակերպման գործիքներով ճիշտ ուղղությամբ է շարժվում, որոնք բոլորը կարագացնեն վեբ դիզայներների աշխատանքային հոսքը:
