В РАБОТЕ - ЕЩЕ НЕ ЗАКОНЧЕНА
Первым делом предлагаем ученику выбрать, как же будет выглядеть наш редактор, для этого выберем тему для Brackets.
Просим ученика пройти по этой ссылке
https://brackets-themes.github.io/ и выбрать тему, которая ему нравится. Мне нравится тема Lion и я покажу пример ее установки (все темы устанавливаются по такому же принципу). Это можно сделать пока устанавливается и качается редактор.
Для того, чтобы поставить выбранную тему надо запомнить или скопировать ее название. Переходим в редактор Brackets и надо попасть в менеджер расширений. Есть два способа в него попасть.
- Файл > Менеджер расширений
- Специальная кнопка (значок) в правом верхнем углу
Когда нажали на Менеджер расширений появляется новое окно, ждем когда оно прогрузится. После этого выбираем вкладку Themes, вбиваем в поиске название нашей темы и жмем установить.
Происходит установка темы, после этого закрываем менеджер расширений.
Если по какой-то причине дает сбой, говорит нет подключения к серверу, то это антивирус блокирует нашу программу. Тогда отключаем антивирус и перезапускаем редактор.
Дальше в меню редактора выбираем: Вид > Themes. Появляется новое окно
- Это темы которые установлены (имеются две по умолчанию темная и светлая)
- Размер текста в редакторе (также можно менять клавишами Ctrl++ и Ctrl+-, вернуть изначальный размер, установленный в этом окне Ctrl+0)
- Шрифты которые используются для отображения текста в редакторе
Итак в появившемся окне выбираем тему, которую установили(1), выбираем размер который нас устраивает(2). Можно поменять и шрифт(3). Делается это просто, стираем шрифт SourseCodePro-Medium, но кавычки оставляем и вместо него вставляем название шрифта, который установлен в нашей системе.Установленные шрифты в системе для Windows находятся по пути C:\Windows\FontsЧерез проводник проходим в эту папку, выбираем понравившейся шрифт с русскими буквами, запоминаем его название и прописываем его в нашем редакторе вместо SourseCodePro-Medium внутри кавычек. После всех изменений жмем готово и наслаждаемся. Если изменения по какой-то причине не произошли, то перезапускаем редактор Brackets.
Установка расширений
Переходим к установке расширений. Для этого опять запускаем Менеджер расширений и уже остаемся в первой вкладке (Доступные).
Вот перечень расширений, которые я считаю полезными и которые ускорят разработку сайтов и понимание учеником учебного материала.
Brackets Tree Icons Расширение добавляет иконки к файловому дереву на боковой панели. Облегчает поиск документов, с которыми вы работаете.До и после
Autosave Files on Window Blur Плагин автоматического сохранения открытых файлов в тот момент, когда окно программы теряет фокус (например, если вы переключились на браузер).
На мой взгляд, очень полезное расширение и нужное, так как у учеников часто вылетают компьютеры или выключается свет, а он не успел сохранить последние изменение, либо вообще не сохранялся весь урок и т.д..
Beautify Простой комбинацией клавиш (Ctrl+Alt+B), нажатием на специальный значок или при сохранении файла красиво оформит структуру вашей разметки, с отступами и, главное — сделает ее читабельной.Для того, чтобы плагин работал при сохранении идем в меню: Правка > Использовать Beautify во время сохраненияПосле установки этого плагина на правой панеле появится волшебная палочка.
Special Html Characters Таблица спецсимволов на горячие клавиши (Alt+C), без поиска их в интернете. Вставляет код спец символа на место курсора.
CSS Color Preview Быстрый просмотр цветов. Позволяет сразу увидеть какие цвета были использованы.Чтобы активировать расширение переходим в менюВид > Enable Css Color PreviewПосле активации расширения в css файле слева от цифр показываются цвета, которые используются в строчке напротив которой он стоит.
ColorHints Быстрый выбор цветаКогда добавляем цвет для тега и пишем #, появляется подсказка из цветов, которые мы раньше использовали в этом css файле (от черного к белому).
Color Palette Выбор цвета с картинки.Если открыть картинку через редактор, то это расширение позволяет выбрать нужный цвет с картинки (очень полезно при верстке с макета).После установки плагина появится такая палитра в правом верхнем углу.Для работы выбираем картинку, а потом жмем эту палитру. После того, как выбрали нужный цвет, показывается его код. Можно выбрать в каком формате показывать цвета.
Emmet Плагин, который позволяет значительно ускорить написание кода html и css используя сокращения и аббревиатуры. Так, если вы хотите, чтобы знак восклицания (!) после нажатия клавиши tab превращался в полноценную html страницу то этот плагин вам необходим. Также позволяет оборачивать текст тегами HTML и многое другое. Полную документацию можно посмотреть по ссылке
https://docs.emmet.io/ (ссылка не у всех работает, проблема скорее всего в провайдерах, которые блокируют ip связанные с этим сайтом)Частичная документация на русском, но ее достаточно для нашего курса.
https://sitkodenis.ru/wp-content/uploads/2017/03/Emmet.pdf После установки расширения должна появится дополнительная вкладка меню Emmet.