Мазмун
Illustrator CC 2014 менен, сиз CSSти макеттериңизден чыгарып, сүйүктүү код редакторуңузга чаптасаңыз болот, анын ичинде Adobe өзүнүн Dreamweaver CC же Edge Reflow. Бул макалада биз ал процесстин кандайча иштээрин карайбыз.
Баштоо
Төмөндө Illustrator программасында Layers панели ачык турган жөнөкөй схема келтирилген. Ар бир катмар CSS элементине аталып калган.
Ар бир компонент боюнча CSS алуу үчүн, терезе: CSS касиеттерине өтүү жетиштүү. Бул панель сизге төмөнкүлөрдү берет:
- Тандалган объектилердин CSS кодун көрүү
- Тандалган объектилер үчүн CSS кодун көчүрүңүз
- Бир же бир нечесин, же бардык тандалган Illustrator элементтерин CSS файлына экспорттоңуз
- Колдонулган растеризацияланган сүрөттөрдү экспорттоо
- Браузерге арналган CSS кодун түзүү
Катмарлар панелиндеги объекттердин атын класс аттары менен атабасаңыз, анда CSS Properties диалог терезесинде бул билдирүү келерин билиңиз: ’CSS коду түзүлгөн жок. Аты аталбаган объекттер үчүн CSS түзүү үчүн, объектини катмарлар панелинде атап коюңуз, же CSS Экспорттук Жолдор диалогундагы Аталышы жок объектилер үчүн CSS тандаңыз.’
Төмөндө тартылган экранда, CSSке кирүүгө мүмкүнчүлүк берген кутуча элементи тандалган.
CSSти Illustratorдон ар кандай жолдор менен колдонсоңуз болот. Диалог терезесинин ылдый жагында бир нече белгиленген сүрөтчөлөр бар: Export Options, Export CSS, Copy Copy Selected Style and CSS. Дагы бир вариант - CSSти экспорттоо параметрлери диалог терезесинен CSS көчүрүп алып, ошол бойдон колдонуу. Бул параметрлер диалог терезесинин жогору жагында калкыма менюда пайда болот.
Экспорттоо параметрлери
Экспорттук Жолдорду тандасаңыз, экспорттой турган нерсени тандап алган CSS Экспорттук Жолдор диалог терезеси пайда болот. Диалог терезеси пайда болгондо, демейки орнотуулар орнотулганда болот.
Жолдор бөлүмүндө "Белгисиз объектилер үчүн CSS түзүү" деген бир куту белгисиз. Эгер сиз Illustrator программасында катмарлардын аталышын бербесеңиз, анда бул параметр сизге ачык. Бирок бардык CSS элементтерин Illustrator программасында атаган жакшы, анткени бул аларды код редакторунда көзөмөлдөөнү жеңилдетет.
Ошондой эле, Жолдор бөлүмүндө Illustrator программасы Webkit, Firefox, Internet Explorer жана Opera үчүн сатуучулардын префикстерин түзө алат.
Диалог терезесинде дагы эки бөлүмдү көрө аласыз: Объекттин көрүнүшү жана орду жана көлөмү. Объекттин көрүнүшү бөлүмүндө бардык параметрлер иштетилген. Позиция жана Өлчөм бөлүмүндө биз өлчөө кутучасын иштетебиз, ошондуктан CSS биздин тандаган код редакторубузда чагылдырылат (бул учурда Dreamweaver болот).
Көчүрүү же экспорттоо
Сиздин тандооңузга ыраазы болгондон кийин, кабыл алуу үчүн OK баскычын чыкылдатыңыз. CSSти дизайн программаңызга кошуу үчүн, аны түздөн-түз көчүрүп алсаңыз болот же CSS экспортунун параметрлерин колдонсоңуз болот.
Көрүнүп тургандай, Illustrator программасындагы кутучабыз эми Dreamweaverде бар.
Дагы бир вариант - төмөндө көрсөтүлгөн кутучадагы тексттин үстүнөн көчүрүп алуу. Ал үчүн текстти чыкылдатып, аны тандаңыз. CSS CSS касиеттери диалог терезесинде пайда болот. Текст төмөнкүдөй көрүнөт: NormalCharacterStyle.
Эгерде сизде тексттин ар кандай блоктору бар болсо, анда алардын атын h1, h2 ж.б.у.с. элементтери деп атоону каалашыңыз мүмкүн. Дагы бир вариант - бул тексттин үстүнөн Dreamweaverге көчүрүп, анын атын веб-элементтин атына алмаштыруу, бул учурда 'p'. Текстти Dreamweaverге көчүрүп алсаңыз, ал төмөндөгүдөй болуп калат.
SVG экспорттолууда
Татаал көркөм чыгарма CSS катары көрсөтүлбөйт жана SVG (Масштабдуу Вектордук Графика) катары чыгарылышы керек. Ал үчүн Файл: Сакта дегенге өтүңүз. Диалог терезесинен SVG тандап, файлдын атын киргизиңиз. SVG Options диалог терезесинде, More Options баскычын чыкылдатыңыз.
Кеңейтилген көрүнүштө, Responsive кутучасы иштетилгенин текшериңиз. Көркөм чыгарманы сактаганда, ал браузерде масштабдуу болот.
Чектөөлөр
Көрүнүп тургандай, Adobe веб-дизайнерлерге долбоорлорун CSSке айландырууга жардам берүү үчүн бир нече ресурстарды түздү. Бирок, окуу ийри сызыгы бар жана ар кандай окуу куралдарынан өткөнүнө карабастан, бардык иш процесси картага киргизилген эмес. Бул боштуктар колдонуучуга кошумча жумуш жаратат.
Photoshopтон айырмаланып, Adobe Illustrator үчүн Генератор плагинин түзө элек. Ошол боштуктун ордун толтуруу үчүн Дэвид Дераедт Layer Exporter деп аталган кеңейтүүнү түзүп, анын жардамы менен сүрөт активдеринин жаралышын автоматташтырууга болот. Сизге жардам бере турган видео окуу куралы бар, бирок баяндамасы жок, аны аткарууну кыйындатат.
Бул маселелерден тышкары, Adobe сөзсүз түрдө CSS которуу куралдары менен туура багытта баратат, мунун бардыгы веб-дизайнерлердин иштешин тездетет.
