Методическое пособие по установке и настройке текстового редактора Sublime Text3
методическая разработка по информатике и икт

Методическое пособие по установке и настройке
текстового редактора Sublime Text3

Автор Петриченко В.А.

Педагог дополнительного образования
научно-технического отдела

Санкт-Петербург 2019

Содержание

1. Как и где скачать дистрибутив редактора Sublime Text3        1

2. Поэтапная настройка работы редактора на
корневую папку сайта         1

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

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

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

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

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

8. Установка расширения Goofle Hrome        7

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

10. Вопросы по уроку        7

11. Меню редактора Sublime Text 3        7

Аннотация

Пособие рекомендуется учащимся, интересующимся веб-дизайном и программированием.

Редактор Sublime Text3 является свободно распространяемым программным продуктом, удобным в разработке документов  около 40 типов. Данный редактор прост в установке и удобен в работе. В редакторе предусмотрена возможность установки дополнительных плагинов, расширяющих функционал. В методическом пособии даны ссылки на короткие видеоуроки, которые помогут быстро освоить все этапы установки  и настройки редактора.

Установка и настройка текстового редактора Sublime Text3

1. Как и где скачать дистрибутив редактора Sublime Text3

Основные ссылки для скачивания.

Скачать Sublime Text3 нужной версии http://www.sublimetext.com/3

Скачать plagin Package Control –  дополнительные пакеты для встраивания в редактор Sublime Text3 - https://packagecontrol.io/installation#st3

Запускаем установку редактора. Установку можно осуществлять на любой диск. И запускаем редактор.

2. Поэтапная настройка работы редактора на корневую папку сайта

Создаем папку для тестового сайта в любом месте (можно даже на флэшке) – папка  test-sublime.ru  и внутри этой папки создаем папку css. Открываем папку test-sublime через редактор командой   Файл -> Открыть папку…, находим нужную папку. Получаем в редакторе:

В редакторе выбираем команду Файл -> Создать новый файл. Открывается окно

 В левом нижнем углу вместо Plain Text выбираем тип файла HTML

и далее создаем новый файл.  Выбираем команду Файл -> Новый файл. В первой строке пишем:  

нажимаем на подсказку с тэгом  html  и редактор генерирует базовую структуру страницы.

Далее сохраняем этот файл под именем, например,  index.html в папку test-sublime.ru под именем index (расширение можно не писать, т.к. редактор присвоит его самостоятельно).

Далее аналогично создаем файл стилевого оформления.

В нижнем левом углу вместо HTML выбираем тип – CSS  и создаем еще один файл style.css и сохраняем его в папку CSS. Обязательно выбираем кодировку  - Save with encording  utf-8.

Получаем в папке CSS файл style.css

Далее в файле index.html  в разделе …  подключаем файл style.css строкой

, сохраняем файл index.html. Далее проверяем взаимосвязь работы этих файлов.

При запуске файла index.html в браузере должно получиться следующее отображение страницы:

Теперь у вас все работает и можно продолжать создавать страницы сайта.

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

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

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

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

• Создаем папку images и размещаем в ней картинку
• Добавляем SideBar. Для этого в главном меню  View – SideBar – Show Open Files.
• Появляется дополнительная панель и на ней наши открытые файлы. Эту панель можно скрывать и открывать, в нее  можно просто переносить папки.

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

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

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

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 (самая нижняя позиция меню).

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

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

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

• Выбираем в главном меню команду  Tools – Command Palette - Package Control.  Открывается окно с перечнем функций для установки.
• Вводим в строке Install Control:  SideBarEnhactment.
• Проверяем контекстное меню открытых файлов SideBar и видим массу дополнительных функций.
• Надо посмотреть и попробовать многие функции этого меню.

8. Установка расширения 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

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

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

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

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

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

1. Что такое редактор HTML-кода?
2. Какие бывают редакторы HTML-кода?
3. Что такое редакторы исходного кода?
4. Какие редакторы исходного кода вы знаете?
5. Какие самые популярные редакторы исходного кода?
6. Что такое WYSIWIG-редакторы?
7. Какие WYSIWIG-редакторы вы знаете?
8. Какие самые популярные?
9. Какие преимущества и недостатки у редактора Notepad++?
10. Какие преимущества и недостатки у Sublime Text?

11. Меню редактора Sublime Text 3

Источники информации

1. https://www.sublimetext.com/  сайт разработчика программного продукта

2.Youtube.ru – видеоуроки по установке, настройке и работе редактора.