Мова HTML. Плагін EMMET презентация

Для чого потрібен Emmet Проекти типу ZenCoding і його подальший розвиток Emmet дозволяє прискорити і автоматизувати даний процес

Слайд 1 МОВА HTML. Плагін EMMET


Слайд 2Для чого потрібен Emmet
Проекти типу ZenCoding і його подальший розвиток Emmet

дозволяє прискорити і автоматизувати даний процес

Слайд 3Sublime Text
Например, html + tab создаст готовый каркас для html-документа, а

div.wrapper + tab превратится в 


Слайд 4Встановлення Emmet
Потрібна вкладка «Package Control», вона знаходиться в «Preferences»


Слайд 5Package Control
«View -> Show console»,  «Вид -> Показать консоль». До рядку

введення додаємо код:
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», а потім натискаємо на «Package Control». «Install Package» («Встановити пакет») на шостому рядку. Бачимо ще одне вікно, в яке потрібно ввести «Emmet», з'являється багато пропозицій, але нам потрібна найперша.

Слайд 7Після встановлення Emmet
набрати скорочення, натиснути Tab і Emmet розшифрує його в

документі в повний текст. Наприклад, якщо ви збережете новий документ в Sublime Text з розширенням html, наберете в редакторі «!» І натиснете Tab, то Emmet вставить наступний набір тегів

Слайд 9Синтаксис Emmet


Слайд 10Синтаксис Emmet


Слайд 11Синтаксис Emmet


Слайд 12Синтаксис Emmet


Слайд 13HTML скорочення


Слайд 14HTML скорочення


Слайд 15HTML скорочення


Слайд 16HTML скорочення


Слайд 17HTML скорочення


Слайд 18Синтаксис Emmet


Слайд 19Синтаксис Emmet


Слайд 20Скорочення CSS


Слайд 21Скорочення CSS


Слайд 22Скорочення CSS


Слайд 23Скорочення CSS


Слайд 24Створить за зразком


Слайд 25Створить за зразком


Слайд 27Створення списків
Свойство, определяющее тип маркера, - list-style-type. Используемые в примере значения:
circle

— пустая окружность;
square — квадрат;
lower-latin — строчные латинские (английские) буквы;
upper-latin — прописные латинские (английские) буквы;
lower-roman — римские цифры из строчных букв;
upper-roman — обычные римские цифры.

Слайд 28Створення списків
Заполненная окружность и арабские цифры используются для маркированных и нумерованных

списков по умолчанию.
При создании многоуровневых списков вложенный список помещается внутрь соответствующего тега liвнешнего списка.



Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.


Для правообладателей

Яндекс.Метрика