Слайд 2Для чого потрібен Emmet
Проекти типу ZenCoding і його подальший розвиток Emmet дозволяє
![Для чого потрібен Emmet Проекти типу ZenCoding і його подальший розвиток Emmet](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/988224/slide-1.jpg)
прискорити і автоматизувати даний процес
Слайд 3Sublime Text
Например, html + tab создаст готовый каркас для html-документа, а div.wrapper
![Sublime Text Например, html + tab создаст готовый каркас для html-документа, а](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/988224/slide-2.jpg)
Слайд 4Встановлення Emmet
Потрібна вкладка «Package Control», вона знаходиться в «Preferences»
![Встановлення Emmet Потрібна вкладка «Package Control», вона знаходиться в «Preferences»](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/988224/slide-3.jpg)
Слайд 5Package Control
«View -> Show console», «Вид -> Показать консоль». До рядку введення
![Package Control «View -> Show console», «Вид -> Показать консоль». До рядку](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/988224/slide-4.jpg)
додаємо код:
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
Слайд 6Встановлення Emmet
«Preferences» («Глобальні налаштування»); використовуємо комбінацію клавіш «Ctrl + Shift + P»,
![Встановлення Emmet «Preferences» («Глобальні налаштування»); використовуємо комбінацію клавіш «Ctrl + Shift +](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/988224/slide-5.jpg)
а потім натискаємо на «Package Control». «Install Package» («Встановити пакет») на шостому рядку.
Бачимо ще одне вікно, в яке потрібно ввести «Emmet», з'являється багато пропозицій, але нам потрібна найперша.
Слайд 7Після встановлення Emmet
набрати скорочення, натиснути Tab і Emmet розшифрує його в документі
![Після встановлення Emmet набрати скорочення, натиснути Tab і Emmet розшифрує його в](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/988224/slide-6.jpg)
в повний текст.
Наприклад, якщо ви збережете новий документ в Sublime Text з розширенням html, наберете в редакторі «!» І натиснете Tab, то Emmet вставить наступний набір тегів
Слайд 27Створення списків
Свойство, определяющее тип маркера, - list-style-type. Используемые в примере значения:
circle —
![Створення списків Свойство, определяющее тип маркера, - list-style-type. Используемые в примере значения:](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/988224/slide-26.jpg)
пустая окружность;
square — квадрат;
lower-latin — строчные латинские (английские) буквы;
upper-latin — прописные латинские (английские) буквы;
lower-roman — римские цифры из строчных букв;
upper-roman — обычные римские цифры.