BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Вебмастеру » Удобные настройки в «Notepad++» для веб-мастера

Удобные настройки в «Notepad++» для веб-мастера

2014-04-17 / Вр:19:34 / просмотров: 17465

Когда-то я пользовался редактором dremriwer, но когда стал верстать сайты для движка WordPress, то остановился на редакторе Notepad++. Я им доволен.
Сегодня я расскажу вам об удобных настройках в редакторе Notepad++. Благодаря этим настройкам вы сможете сэкономить уйму времени.
Итак, если у вас нет  редактора Notepad++, тогда вы сможете скачать его бесплатно тут.

Удобные настройки в «Notepad++» для веб-мастера

Удобные настройки в «Notepad++»

Быстрая кодировка UTF-8 в HTML документе

Каждый раз, когда вы создаете новый HTML документ в программе Notepad++, вам постоянно нужно менять кодировку файла из ANSI в UTF-8 (без BOM). Если это делать постоянно, то это забирает кучу времени, да и надоедает, а бывает порой, что и забыть можно.
Чтобы при создании нового HTML документа кодировка была автоматически UTF-8 (без BOM), нужно проделать такие действия:
1). В верхнем меню нажмите на пункт «Опции» => «Настройки…»

Удобные настройки в «Notepad++»

2). Далее откройте вкладку «Новый документ».
3). Выставьте там такие значения:
формат — UNIX и кодировкаUTF-8 без метки BOM

Удобные настройки в «Notepad++» для веб-мастера

4). Жмите на кнопку «Закрыть».

После таких настроек, при создании нового документа, у вас в HTML документе сразу будет стоять кодировка UTF-8 (без BOM). Кстати, рекомендую почитать статью про HTML кодировки.

Быстрая вставка готового кода

Не знаю как вы, но я постоянно, когда создаю новый html документ, вначале прописываю стандартный код HTML, либо копирую его из других html документов:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
 <title>Пример взят с блога BlogGood.ru </title>
 </head>
 <body>
 ...
 </body>
</html>

Я упростил себе жизнь, что и рекомендую сделать вам. Достаточно записать HTML код один раз и, как только вам понадобиться код, достаточно нажать на соответствующие горячие клавиши.
Итак, как это можно сделать? Да легко!

1). Откройте редактор Notepad++ и создайте новый документ
2). Теперь жмите на кнопку «Старт записи»:

Удобные настройки в «Notepad++» для веб-мастера

3). После того, как нажали на кнопку «Старт записи», вводим основной HTML код пальчиками или вставляем готовый.
4). Когда дописали код, жмите кнопку «Стоп»:

Удобные настройки в «Notepad++» для веб-мастера

5). Теперь нужно сохранить запись. В верхнем меню перейдите по вкладке «Макросы» => «Сохранить запись макро…» и появится вот такое окошко:

Удобные настройки в «Notepad++»

Настройки:

- «Name» – здесь запишите имя записи, например: основной код HTML.
Ниже укажите горячие клавиши для вызова записи. Например: я поставил птички на «CTRL+SHIFT+ALT»+«K»

Теперь, если вам нужен будет основной код HTML, достаточно будет нажать на горячие клавиши, которые вы указали или перейти в меню «Макросы» и выбрать название записи

Быстрая вставка готового кода

Таким способом можно сделать свою собственную библиотеку различных шпаргалок кодов, скриптов и т. д.

Автопродление кода

Автопродление кода – это еще одна полезная возможность, которую дарит нам, веб-мастерам, редактор Notepad++. Если кто не знает, что это за возможность, рассказываю. Когда вы будете писать код в редакторе Notepad++, вы увидите предлагаемые теги в списке:

Быстрая вставка готового кода

Итак, существуют два способа вызова окна атопродления кода:

1). Чтобы вызвать окно атопродления кода, воспользуйтесь горячими клавишами «CTRL» + «Space (пробел)». Минус такого способа в том, что нужно часто нажимать на клавиши;

2). Этот способ позволит забыть о горячих клавишах для вызова окна атопродления кода, так как окно будет появляться автоматически.  Для этого нужно зайти в настройки и кое-что подкрутить. Итак, откройте «Опции» => «Настройки» => «Резерв/Автозавершение» и отметьте нужные настройки галочками:

Автопродление кода

Внимание: два способа работают в том случае, если файл сохранен и указано расширение файла, например: «html, css, php».

Выделение кода разным цветом

Иногда бывают такие ситуации, что нужно выделить некоторые куски кода разным цветом. Такая потребность возникает, когда код огромный и вам часто нужно возвращаться какому-то  месту. Выделенный код (подсветка) остается до тех пор, пока вы не закроете документ.

Итак, выделите нужный кусок кода и нажмите правой кнопкой мыши. В открывшемся списке выберите «Style token» и любой стиль 1-5.

Результат я отметил стрелочкой и цифрой (5)

Выделение кода разным цветом

Работа с проектами

Если вы работаете с большим количеством файлов, тогда для ускорения времени рекомендую использовать функцию «Проект»:

1). Нажмите в меню на вкладку «Вид» => «Проект» => «Панель проекта 1»

 

Удобные настройки в «Notepad++» для веб-мастера

2). Дальше следует нажать правой кнопкой мыши по пункту «Рабочая область» и в открывшемся списке выбрать вкладку «Добавить Новый проект». Сразу напишите проекту имя:

Удобные настройки в «Notepad++» для веб-мастера

3). Кликните по вашему проекту правой кнопкой мыши. В выпадающем списке выберите пункт «Добавить файлы из директории»:

Удобные настройки в «Notepad++» для веб-мастера

Вот таким способом мы сделали дерево файлов, в котором легко ориентироваться и редактировать, добавлять и сохранять файлы. Удобно и быстро!

Вот такой будет вид после добавления файлов из директории:

Удобные настройки в «Notepad++» для веб-мастера

Проверка орфографии

В редакторе Notepad++, есть возможность проверить текст на наличие ошибок.
1). Итак, чтобы подключит такую возможность, нажмите на кнопку «проверка орфографии»:

Удобные настройки в «Notepad++» для веб-мастера

2). Откроется вот такое маленькое окошко, где вам нужно будет перейти по ссылке http://aspell.net/win32/:

Удобные настройки в «Notepad++» для веб-мастера

3).  Закройте редактор Notepad++. Скачайте и установите вначале полную версию Aspell, а потом русский, украинский и английский словарь:

Удобные настройки в «Notepad++» для веб-мастера

4). Откройте блокнот Notepad++ снова, теперь у вас появилась возможность проверять текст на орфографические ошибки. Для проверки орфографии документ должен быть в кодировке UTF-8 (Юникод) или UTF-8 без BOM, иначе работать не будет. Далее выделяете нужное слово или весь текст и жмете на кнопку «проверка орфографии». Вот результат:

Проверка орфографии

Внимание:  Еще раз напомню, что кодировка файла должна быть UTF-8 (Юникод) или UTF-8 без BOM, иначе проверка орфографии не найдет ошибок:

Удобные настройки в «Notepad++» для веб-мастера

Если у вас файл сохранен в кодировке ANSI, преобразуйте файл в кодировку UTF-8 или UTF-8 без BOM. Для этого в меню перейдите «Кодировки» => «Преобразовать в UTF-8» или «Преобразовать в UTF-8 без BOM»:

Удобные настройки в «Notepad++» для веб-мастера

Горячие клавиши в редакторе Notepad++

Чтобы посмотреть или поменять горячие клавиши для вызова каких либо действий, вам нужно в меню перейти по вкладке «Опции» => «Горячие клавиши…»

А вот пару необходимых горячих клавиш, которыми пользуюсь я для ускорения работы:

«Ctrl» + «S» - сохранить файл
«Ctrl» + «C» - копировать
«Ctrl» + «V» - вставить
«Ctrl» + «Z» - отмена
«Ctrl» + «A» - выделить все

Полезное дополнение

1). Если выделить текст, правой кнопкой мыши нажать по нему и выбрать вкладку «Закомментировать выделенное», то весь выделенный текст будет закомментирован вот так:

<!-- то весь выделенный текст будет закомментирован  -->

2). Если правой кнопкой мыши нажать на поле и выбрать вкладку «Закомментировать выделенное», то появиться быстрая возможность закомментировать код:

<!--  -->

Кстати, как закомментировать код в HTML, CSS, PHP, JavaScript, почитайте тут.

Удобные настройки в «Notepad++» для веб-мастера

Вот и все! Конечно возможностей в редакторе Notepad++ валом, просто для меня это самые необходимые.  Если у вас есть что-то интересное рассказать о возможностях редактора Notepad++, пишите в комментариях.

P.S. Всем спасибо за внимание и не забывайте подписываться на обновление моего блога :smile:.
Удачи!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

15 Ответов на комментарий - Удобные настройки в «Notepad++» для веб-мастера

  1. Маргарита

    Автопродление кода теперь настроила как надо. В изначальных настройках было не удобно.
    В целом статья интересная, спасибо.

    Ответить

  2. Дмитрий

    Добрый день! Подскажите, пожалуйста, как из слов расписанных в строку и разделенных пробелом сформировать столбец?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Дмитрий! Надеюсь, я Вас правильно понял. Откройте «Notepad++» и в меню найдите «Вид» => «Перенос строк».

    Ответить

  3. Дмитрий

    Спасибо! Я уже нашел ответ)

    Ответить

  4. Qnotes

    dremriwer, lol :grin:

    Ответить

  5. А

    Подскажите, почему надо выставлять Unix в настройках? Какое преимущество даёт перед Windows?

    Сейчас уже можно настроить проверку орфографии по нормальному, сразу на нескольких языках. Сегодня делал с новой версией. Там есть тонкости.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    это для оформление конца строки.
    читайте тут

    Ответить

  6. Михаил

    Здраствуйте! А можно ли в notepad, переводить css в html?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Михаил!
    Можно, но я не могу понять для чего это.
    Что Вы хотите сделать?

    Ответить

    Михаил отвечает:

    У меня такая проблема:
    Не могу кнопку read more(читать далее) перевести!
    Установил тему,и сам тег скрывается в стилях css
    Вот как изменить? Всё облазил нет ответа!
    Не подскажете? :sad:

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пробуйте вот так:
    1) Найдите в файле “index.php” вашей темы вот такой кусок кода:

    <?php the_content(); ?>
    

    Замените на вот такой:

    <?php the_content('Читать далее...'); ?>

    Если не поможет, верните все назад как было и попробуйте вот это:
    1) В файле “footer.php” в самом конце сразу после тега вставьте вот такой код:

    <script>
    document.getElementsByClassName('more-link')[0].innerHTML = "Читать далее...";
    </script>
    

    Работает на все 100%, проверял на вашем сайте.

    Ответить

    Михаил отвечает:

    Спасибо Степан!
    Получилось, только со вторым вариантом
    в index/php такого файла не нашёл.
    Сейчас работает но только на первом посте,
    на остальных так и есть.
    Но я ещё по колдую
    Спасибо!

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста, Михаил!

  7. Михаил

    Всё Степан, сделал!Теперь везде отображается!
    Саму надпись (Read more)нашёл и заменил
    Вообще нашёл в подпапке случайно!
    Хотя поиск элементов не показал.
    3 дня мучался!Если бы не ты так бы и плюнул!

    Спасибо!
    Я тебе полайкал в сетях!

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста, Михаил!
    И спасибо за лайки в соц. сетях!

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки:

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 716
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3894