Видео. Изучаем меню и его элементы

https://www.youtube.com/watch?v=Y91XMBIjtsY&list=PLPpaecEYRC8ZjBQ1OsGOKmxBF8lTTO4BZ&index=3

 

Видео. Добавление SideBar

https://www.youtube.com/watch?v=4vUUhP88pEA&list=PLPpaecEYRC8ZjBQ1OsGOKmxBF8lTTO4BZ&index=4

- Создаем папку images и размещаем в ней картинку

- Добавляем SideBar. Для этого в главном меню  View – SideBar – Show Open Files.

- Появляется дополнительная панель и на ней наши открытые файлы. Эту панель можно скрывать и открывать, в нее можно просто переносить папки.

 

Видео. Настройка цветовой гаммы редактора

https://www.youtube.com/watch?v=qDvh3_svmY8&index=5&list=PLPpaecEYRC8ZjBQ1OsGOKmxBF8lTTO4BZ

 

 

Видео. Установка плагина

https://www.youtube.com/watch?v=3ME7durhy6s&index=6&list=PLPpaecEYRC8ZjBQ1OsGOKmxBF8lTTO4BZ

 

 Как скачать и добавить плагинPackage Control  

- Скачиваем плагин Package Control для Text 3 с ресурса по ссылке: https://packagecontrol.io/installation#st3

- или копируем текст, приведенный ниже:

 

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler())); by = urllib.request.urlopen('http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh!= h else open(os.path.join(ipp, pf), 'wb').write(by)

 

Устанавливаем плагин  Package Control:

- Активируем окно плагинов - нажимаем [Ctrl]+[~]. Внизу появляется консоль – поле, в которое копируем плагин Package Control и нажимаем Enter.

- В меню Preference появилась команда Package Control (самая нижняя позиция меню).

 

Добавляем функции плагина Package Control – всплывающее меню

Видео: https://www.youtube.com/watch?v=8I0dJTd58kI&index=7&list=PLPpaecEYRC8ZjBQ1OsGOKmxBF8lTTO4BZ

 

Добавляем дополнительные функции контекстного меню файлов:

- Выбираем в главном меню команду  Tools – Command Palette - Package Control.  Открывается окно с перечнем функций для установки.

- Вводим в строке Install Control:  SideBarEnhactment.

- Проверяем контекстное меню открытых файлов SideBar и видим массу дополнительных функций.

- Надо посмотреть и попробовать многие функции этого меню.

 

Установка расширения Google Hrome

Ниже описан процесс установки для Google Chrome.

1. Для Sublime Text 3 установить Package Control.

2. В Sublime Text открыть Tools - Command Palette (Ctrl+Shift+P) и выбрать Package Control: Install Package.

3. В списке найти и установить расширение LiveStyle.

4. Установить расширение для Google Chrome.

5. Открыть в Sublime Text CSS-файлы.

6. Открыть в браузере страницу для редактирования.

7. Открыть DevTools (Ctrl+Shift+I) и во вкладке LiveStyle связать файлы стилей сайта с открытыми в Sublime Text. Для работы плагина DevTools необходимо держать открытым для каждого окна.

Команда Source в браузере.

https://www.youtube.com/watch?v=Pb18NHfQxxg&list=PLPpaecEYRC8ZjBQ1OsGOKmxBF8lTTO4BZ&index=8

Устанавливаем LiveStyle и далее идем в google по ссылке

https://chrome.google.com/webstore/detail/emmet-livestyle/diebikgmpmeppiilkaijjbdgciafajmg

 

и устанавливаем Emmet LiveStyle

 

Дополнительно. Обзор редакторов.

 

https://www.youtube.com/watch?v=hSK_jF1b78M

 

Видео для учащихся 1-го года очень полезный обзор редакторов HTML-кода и установка Sublime Text3

 

(ссылка для установки http://www.sublimetext3.com/3)

 

 

Вопросы по уроку

1. Что такое редактор HTML-кода?

2. Какие бывают редакторы HTML-кода?

3. Что такое редакторы исходного кода?

4. Какие редакторы исходного кода вы знаете?

5. Какие самые популярные редакторы исходного кода?

6. Что такое WYSIWIG-редакторы?

7. Какие WYSIWIG-редакторы вы знаете?

8. Какие самые популярные?

9. Какие преимущества и недостатки у редактора Notepad++?

10. Какие преимущества и недостатки у Sublime Text?