Notepad настройка для html


Как настроить Notepad - ftp клиент Notepad++

Тем, которые решились дерзнуть и создать свой блог или сайт лично, будет нелишне изучить программку — текстовый редактор Notepad++ ! её возможности нынче и рассмотрим:

подстроим первичные, но необходимые рычаги управления редактором, а также, что очень важно, научимся работать с Нотепад как с FTP клиентом (неплохая примочка). Словом, поближе ознакомимся с её редакторскими способностями и выгодными отличиями от IT собратьев.

Текстовый редактор Notepad++ может очень многое из того, что будет необходимо на дальнейшем пути веб разработок. Текстовый редактор Notepad++ — распространяется бесплатно !!

Вот основные его достоинства.

Итак.

Непременно доложу, — большинство веб мастеров, перепробовав многое разнообразие html редакторов, возвращается снова к Нотепад. И это неудивительно (зачем сложное, когда нужно использовать только нужное).

 

 

Первое — как и говорилось: текстовый редактор Notepad++ распространяется совершенно бесплатно. Регулярно обновляется…

 

Второе — Реальная и завидная скорость работы. Не нагружает систему и всегда под рукой.

 

Третье — Можно работать с несколькими файлами (Это очень-и-очень удобно, когда мы станем сравнивать наши наработки с оригинальными документами, например).

 

И — четвёртое — Подсветка синтаксиса при работе с документами …поддерживаются все возможные расширения и языки программирования. Причём, для каждого расширения можно настраивать свою цветовую схему.

 

…и многое-многое другое. Но обо всём по порядку — в продолжении статьи. Перво-наперво скачиваем программу и переходим к первичной настройке.

 

 

 

 

текстовый редактор — установка программы Notepad

 

 

 

 

Идём на официальную страничку программы Notepad и скачиваем последнюю версию (в том формате, в котором она Вам удобнее, либо архив, либо – выберите сами…)

 

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

 

 

 

настройка текстового редактора Notepad

 

 

 

Все основные настройки находятся во вкладке «Опции» – Настройки: здесь научимся подстраивать редактор именно под свои задачи и требования.

 

Разберём самое необходимое для начала работы с файлами.

 

Вкладка «Общие»: возможен выбор языка интерфейса (тем которые этого не сделали на этапе установки).

 

Далее отмечаем чекбокс галочкой напротив «Кнопка закрытия на вкладке» — так удобнее закрывать вкладки с редактируемыми документами.

Если что-то упустим из настроек, всегда можно вернуться и подстроить!

 

 

(фотки кликабельны))

 

 

 

Теперь переходим в подраздел или опцию «Новый документ» — выбираем кодировку в которой (по новому пользовательскому умолчанию)) будут создаваться все новые же документы.

 

Будет логично, коли выберем UTF-8 без метки BOM.

 

Ниже есть интересный чекбокс типа «Применить при открытии… ANSI файла…» тут галочку мы ставить не будем, иначе все вновь открываемые документы будут перекодироваться в UTF-8, даже если вы не собираетесь вносить в них изменения, а только хотите взглянуть в недра документации — это нецелесообразно, ведь кодировки требуются разные.

 

 

 

 

 

Продолжим настройку текстового редактора Notepad ++

 

Ниже идет подраздел типа «выбор вариаций синтаксиса».

Здесь нужно из выпадающего меню выбрать тот, с которым вы будете чаще работать – HTML или CSS, словом, тот, который вам необходим.

 

 

 

Раздел «Автозавершение», — полезная функция, которая позволит избежать ошибок с незакрытыми кавычками, скобками… Отмечаем все чекбоксы, кроме HTML/XML.

А в общем, после первичного тестирования заданных настроек Нотепад ++ поправите под себя, если что…

 

 

 

 

 

С окошком «Настройки» редактора закончили. Дальше переходим во вкладку «Вид» и помечаем опцию «Перенос строк».

Полезная штучка: предположим, если редактируемый файл (что очень частенько бывает) написан в одну длинную строку… помеченная опция заставит документ отображаться (только в редакторе) и прокручиваться не горизонтально (что весьма неудобно), но — вертикально!

 

Эта ГОРИЗОНТАЛЬНАЯ прокрутка выведет из себя, если вовремя не разобраться с настройками текстового редактора Notepad++ и вообще… с вариантами и выгодами того или иного способа программного письма документов.

 

 

 

 

 

 

Вот как бы вроде как что ли и всё))

 

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

 

 

Однако давайте научимся тому

 

 

МИГ подписки - ЭРА полезных знаний!!

 

 

как активировать в Notepad++ функцию ftp клиента

 

 

 

 

Наверное — удивлю, если скажу, — заставить нотепад работать в роли ftp клиента — элементарно! И необязательно быть Уvотсаном)

 

 

Для этого вновь обратим взор на панельку инструментов (фото)

 

 

 

 

кликнем по значку папка/ссылка (обведено).

Справа (в основном окне редактора) раскроется небольшое окошко настроек ftp клиента Notepad++

 

Готово дело! вот мы и активировали функцию ftp клиента в программе нотепад. Однако этого мало…

 

Теперь необходимо:

 

 

 

настроить ftp соединение с сервером

 

 

 

 

 

Далее кликнем значок шестерёнки; в выпавшем окошке изберём «Profile settings».

 

 

Далее вот такое чудо пред глазами…

 

 

 

 

Весьма логично перво-наперво создать имя ftp доступа: кликаем «Add nev». В выпавшем окошке, задайте какое-то имя понятное вам — англицкими литерами (в этом случае возможно записать имя и русскими буквами, но для привычки /на будущее/, будет правильнее использовать английское наречие).

 

Далее следует заполнить все поля. Необходимое помечено!

 

 

что эти данные значат:

это те данные, которые вам обязан сообщить хостер. На любом хостинге есть раздел настроек, содержащий все нужные административные данные.

Стоит посетит панель управления аккаунтом хостинга и разобраться. Либо обратитесь в поддержку…

 

 

После того прописываем необходимую информацию в соответствующих полях.

 

1 — Hostname — имя хоста.

 

2 — значение порта подключения (по умолчанию 21) уточните «своё» значение!

 

3 — логид входа

 

4 — пароль!

 

 

По завершении ввода данных:

 

Подключаемся к серверу возможностями нотепад…

 

 

на панели инструментария жмём значок

 

 

 

 

…и выбираем соответственно — имя клиент-соединения, которое задавали на начальном этапе. У меня, как видите, MIHA

 

 

Процесс соединения с сервером по ftp средством Notepad запущен. Через секунды в окошке клиента появятся папки вашего сайта, расположенные далеконько сервере (но теперь под рукой).

 

 

 

Управление обычное, думаю, сорить скринами далее нет смысла…

 

Двойным кликом, открывается папка (директория/подпапки) и соответственно парой кликов открывается для редакции файл-докумет: его кодированная повесть появится в правом окне для редакций…

 

Так и предстоит работать.

 

Всё остальное по редактуре как и с файлами на локалке или из папки компа: кнопь «Сохранить» и… всё наредактированное замечательно сохраняется (каламбур)

 

 

На этом моё повествование решительно окончено!..

 

 

…иначе закаламбурюсь)) да и вы обидитесь: скажете — куда уж жевать-то — мы не такие и глупые))

 

 

 

 

 

 

 

Плодотворного творчества !!

 

 

 

 

 

 

 

Если что-то не ясно и остались вопросы, делитесь в комментариях. Вместе мы многое сможем! Берегите себя - complitra.ru !

Самое время делиться в соцсетях, буду признателен... complitra.ru !

complitra.ru

Emmet в Notepad++. Установка и настройка

Если вы уже начали писать проекты на html то пора вам ознакомиться с техниками ускорения написания кода, типа Zen Coding или Emmet. Наибольшую часть времени при работе с HTML занимает написание тегов. Длинные конструкции, особенно с написанием классов или id занимают очень много времени и являются рутинными операциями. Проекты типа ZenCoding и его дальнейшее развитие Emmet позволяет ускорить и автоматизировать данный процесс.

Для начала давайте установим плагин Emmet для Notepad++. Откройте Notepad++ и перейдите в Плагины → Plugin Manager → Show Plugin Manager. Найдите Emmet и установите его. При установке плагин потребует от вас установки Python script. Согласитесь на установку. А теперь внимание! Та версия Python script которая тянеться из репозитария устарела и не позволяет использовать Emmet, выдавая ошибку «unknown exception» и «Python Script Plugin did not accept the script». Как это исправить? Просто скачайте python script. Распакуйте архив и скопируйте в папку, где установлен Notepad++ все файлы. Если потребуется заменить некоторые файлы — соглашайтесь. Перезапустите Notepad++ и начинайте работу.

Читайте также как установить Emmet и другие плагины в Brackets

Принципы работы с Emmet

Принцип работы простой — вы пишете сокращенную формулу, после чего выбираете опцию Expand Abbreviation (Ctrl+Alt+Enter).

Давайте попробуем. Откроем новый документ и наберем html:5 после чего нажмем Ctrl+Alt+Enter. Итак, было:

Стало:

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

</body>

</html>

Таким образом, плагин Emmet, разворачивает код и дополняет его. Давайте ознакомимся с наиболее распространенными сокращениями.

Для создания любого элемента с id используйте синтаксис p#yy. Где p — элемент, yy — id элемента. Для класса — p.yy.

Развернется в:

Также можно комбинировать ввод id и класса. Для этого используется запись p.class#id

Для добавления атрибутов используйте синтаксис p[title=»hello»]. Данный текст развернется в:

Как вы уже догадались, для добавления любого элемента необходимо просто набрать его имя: div, p, h2.

Если необходимо добавить содержимое элемента, то этом можно сделать с помощью фигурных скобок. Так код h2{Привет} преобразуется в:

Для вложенных элементов используется селектор: <

Конструкция div>p>span преобразуется в :

<div> <p><span></span></p> </div>

<div>

<p><span></span></p>

</div>

Для генерации двух элементов на одном уровне необходимо применять знак +. Так div+p дадут:

Довольно простая логика, согласны?

Больше всего я не люблю вводить списки. Скучно, долго и нудно. Особенно если эти списки содержат гипессылки. Раньше я набирал одну строку списка и копировал нужное количество раз. Теперь все стало намного проще: ul>li*3>a[href=»#» title=»»]

<ul> <li><a href="#" title=""></a></li> <li><a href="#" title=""></a></li> <li><a href="#" title=""></a></li> </ul>

<ul>

<li><a href="#" title=""></a></li>

<li><a href="#" title=""></a></li>

<li><a href="#" title=""></a></li>

</ul>

Таким образом, модификатор *3 продублировал строку 3 раза.

Описанных выше опций хватает для написания любого сложного HTML кода.

Хорошая шпаргалка по написанию кода с помощью Emmet здесь и здесь

w3.org.ua

Notepad++ Emmet. Ускоряем написание кода при помощи плагина

По советам посетителей решил написать статью о плагине Emmet для Notepad++, ускоряющем разработку скриптов и составление гипертекстовых страниц. В данной статье мы рассмотрим установку плагина и попробуем ввести несколько команд для создания html-страницы.

Установка плагинов

Что касается установки плагинов для Notepad++, то здесь все кажется простым. Воспользуемся командой «Show Plugin Manager» из меню «Плагины» - «Plugin Manager».

 

В открывшемся окне менеджера плагинов можно увидеть список доступных для установки расширений.

Выделяя в чекбоксах нужный плагин, и нажимая кнопку «Install», можно обвесить этот редактор кучей полезных (и не очень) функций. В других вкладках «Updates» и «Installed» отображаются доступные обновления и уже установленные плагины соответственно. На последней вкладке кроме просмотра уже установленных плагинов, можно удалить расширение способом, аналогичным установке. Отмечу, что установленные плагины не отображаются во вкладке доступных («Available») вплоть до удаления плагина.

Кроме такой процедуры установки плагинов доступна и ручная, которая заключается в копировании файлов плагина в директорию plugins. Плагин включится сразу после перезапуска редактора. Обычно плагин имеет следующую структуру: динамическую библиотеку (*.dll) с названием плагина и каталог с файлами плагина. При копировании редактор должен быть выключен.

Установка Emmet

В списке доступных мы можем найти два плагина: «Emmet» и «Zen Coding – Python». На самом деле Emmet является развитием Zen Coding.

 

Установим Emmet. На данный момент плагин использует python 2.7, который так же присутствует в системе. После установки необходимо перезапустить редактор.

В списке плагинов вы найдете строчку «Emmet» и выпадающее меню с командами плагина. Самая верхняя строчка и основная команда преобразования строки «Expand Abbreviation». Эта команда вызывается сочетанием клавиш Ctrl+Shift+Enter.

Настройка и применение Emmet в Notepad++

Я использую редактор на ОС MS Windows 8 Pro x64 в стандартной комплектации с настройками, которые описаны в статье «Настройка Notepad++». И, честно говоря, у меня Emmet не стал работать, как говорится, «из коробки». При написании пробного div и нажатия указанного сочетания получилось только вызвать ошибку, точнее две ошибки:

Первым делом я полез менять настройки сочетания клавиш, предположив, что есть конфликт и назначил сочетание, которое тоже занято (косяк), а потом еще раз назначил, но уже свободное.Назначение происходит в мастере Shortcut Mapper («Опции» - «Горячие клавиши…»). Менеджер имеет пять вкладок и третья из них «Plugins commands», где можно найти требуемое сочетание «Expand Abbreviation». Я поставил Alt+Z.

По после применения настроек все равно работать плагин не захотел и в этот раз даже ошибок не нарисовал..

Сначала я грешил на кривые руки автора статьи, кривую ОС автора статьи и кривые настройки Notepad++ автора статьи. Мама автора всегда говорила, что у него золотые руки и неважно откуда они растут… Кривая система автора статьи на данный момент была абсолютно свежераспакованной из резервной копии и не могла содержать великих глюков. Настройки редактора автор статьи сбросил на дефолт, удалив config.xml в корне каталога редактора.

В общем, после всех манипуляций и переустановок Emmet и Python я не получил результатов и прибег к помощи великих знатоков, предлагающих "погуглить". И вколотив ошибку в google вышел на иностранный форум, где предлагалось скачать полную версию Python 0.9.2.0, якобы родной питон не дружит с не менее родным Emmet.

И действительно, после распаковки архива, который содержал папку plugins и библиотеку питона в.2.7 в корень редактора с заменой файлов, Emmet стал работать.

 

Насколько хорошо работать мне пока оценить не удалось, однако после набора команды div и нажатия Alt+Z на экране появилась запись открывающего и закрывающего тега <div></div>. Вот так удача.

После замены питона в менеджере плагинов в разделе обновлений появилось упоминание о новой версии питона. Оказалось, что я установил более раннюю версию и она заработала. Когда я обновился до новой версии при помощи менеджера плагинов, то снова получил неработающий Emmet. 

Разумеется мне пришло в голову найти все там же последнюю версию питона. И я нашел. На этот раз это был установочный пакет windows (PythonScript_1.0.8.0.msi) и при установке он не спросил директории установки (и я предположил, что он сам найдет Notepad++, наивный), не ругался на отрытый редактор (он реально был в это время открыт). Значит он копировал файлы не в каталог редактора.

Оказалось, что установщик заботливо положил все в каталог c:\Program Files (x86)\Notepad++\.  Содержимое я, опять же вручную, скопировал в каталог редактора с заменой содержимого. В менеджере плагинов отобразился Python Script последней версии и якобы в хорошем самочувствии. Проверим Emmet – работает.

При установке Python Script мне было предложено указать дополнительные компоненты пакета (отмечено только 3 из 6 на установку), но я решил использовать настройки по умолчанию, оставляя за собой право поиграть с компонентами в случае нерабочего Emmet. Этого не случилось, так что ждем новых глюков.

Знакомство с Emmet

Настало время попробовать ускорение набора кода. Ждать реального ускорения от плагина, не зная тех самых команд ускорения, не приходится и тогда я обратился к справке.

Автозавершение. Эту тему мы уже просекли, когда писали div и плагин заворачивал тег в скобки и приплюсовывал закрывающий тег. Интересно, что кириллический набор символов («блабла» пытался) он не смог завернуть, а вот <blabla></blabla> я все же получил. Дискриминация родного языка. При написании одиночного тега (img) я получил шаблон конструкции <img src="/" alt="">. Очень интересно. Таким образом человеку, незнакомому с html, станет понятно, что есть два обязательных атрибута, нуждающихся в значениях.

Вложенность элементов. Занимательно построена вложенность элементов. Вся суть в перечислении тегов, разделенных знаком «больше» (>), отображающих глубину вложенности слева направо (от родителя к дочерним элементам). Так, если я напишу порядок div>p>span, то получу конструкцию:

<div>    <p><span></span></p></div>

Разумеется, результат впечатляющий, а уж польза просто неоценима для профессиональных верстальщиков.

Аналогичным способом создается сразу несколько последовательных элементов, если заменить знак на «+». Итак, div+p+span:

<div></div><p></p><span></span>

Знак «^» в записи, содержащей вложенность позволяет элемент после этого знака вывести на один уровень вверх в иерархической структуре (в дереве). Комбинируя эти приемы, можно из одной строки получить сразу более сложную структуру.

div>p>span+span^ul>li:

<div>    <p><span></span><span></span></p>    <ul>        <li></li>    </ul></div>

В рамках этой статьи совсем неправильно было бы давать подробное описание при работе с этим чудесным плагином, так как достаточная информация содержится на сайте разработчика, там она будет всегда актуальна и доступна. Однако, некоторые моменты с минимальными разъяснениями я буду стараться включать в некоторые статьи по верстке. При всем выше сказанном я остаюсь верен мысли, что начинающим сайтостроителям (целевая публика) важно понабивать код ручками, совершать и исправлять ошибки, разбираться в атрибутах и значениях.

 

На этом заканчиваю обзор. Спасибо за внимание. В комментариях можно приводить интересные конструкции использования Emmet, а так же глюки и недочеты, будем коллективно что-то решать.

seoskop.ru

Плагин WebEdit для Notepad++

Установка плагина WebEdit

Удобный плагин, который добавляет на панель кнопки для вставки html-тэгов. Чтобы не вводить дивы, параграфы, списки и прочее, нужно просто выделить нужный текст и нажать мышкой на нужную кнопку. Значительно упрощает ввод, правку html-кода, при этом кнопки можно настроить по своему вкусу и предпочтениям в настройках плагина.

Открываем редактор, выбираем следующею команду: Меню → Плагины → Plugin Manager → Show Plugin Manager, в открывшемся окне находим название плагина, ставим галочку, жмём install, соглашаемся на перезагрузку программы.

После перезагрузки, в Панели инструментов появляются различные иконки, назначение которых говорит само за себя, тут никаких особых пояснений не требуется.

Изображение 1. Панель инструментов с иконками плагина WebEdit

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

То есть, если у вас готовый текст скопированный откуда-то, то проще применять второй способ, если же вы сначала набираете текст в редакторе, как сейчас это делаю я, то проще ... то тоже проще второй способ. Первый способ, мне вообще трудно представить, так как если вы делаете сначала разметку, то гораздо удобнее это делать с использованием плагина Emmet, чем тыкать иконки, например, для варианта 1 достаточно набрать .>h2+p+p>span.^p, хотя всё относительно, нужно пользоваться чем удобнее.

<!-- Вариант 1 --> <div><h2></h2><p></p><p><span></span></p><p></p></div> <!-- Вариант 2 --> <p>Разметка этой статьи, выполнена при помощи плагина <strong>WebEdit</strong></p>

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

Модификация плагина WebEdit

В случае если вы решили настроить плагин, как говорится "под себя", сделать это очень просто, что мне, например, очень нравится.

Команд, а следовательно и иконок согласно описания можно использовать не более 30, чего на мой взгляд вполне достаточно.

Иконки являются рисунками в формате bmp и имеют размеры 16×16 пикселей (при этом, размеры эти не обязательные, я ставил и 14×14 и 17×17) следовательно, вы можете, как найти иконки в интернете, так и создать сами в любом редакторе изображений.

Для редактирования команд и смены иконок предназначен файл WebEdit.ini, открыть его можно непосредственно из редактора Меню – Плагины – WebEdit - Edit Config.

Первым делом, чтобы у нас ничего «не сломалось» выделяем весь текст открытого файла, создаем новый файл и вставляем в него скопированный текст. Затем сохраняем новый файл, где вам удобнее с любым названием, сделаем мы это для того чтобы была возможность "откатиться назад" и сделать всё «как было раньше». Думаю, как это сделать понятно, делаем всё тоже самое, только в обратном порядке, из сохраненного файла всё копируем в WebEdit.ini.

Файл WebEdit.ini имеет следующую структуру, сначала перечислены команды - заголовок [Commands] и далее строчки, примерно такого вида …

[Commands] &A=<a href="">|</a> Якорь=<a name="">|</a> Div &Class=<div>|</div> Div &Id=<div>|</div> &class= &id= Style=<style>|</style>

… и так далее.

Затем следует список иконок - заголовок [Toolbar] и далее строчки, примерно такого вида …

[Toolbar] 1=a.bmp 2=jk.bmp 3=dc.bmp 4=di.bmp 5=class.bmp 6=id.bmp 7=style.bmp

… и так далее.

Обратите внимание, что все иконки пронумерованы, а команды нет, однако должно быть полное совпадение. Если скажем, вы хотите вставлять тег <style></style>, и в списке команд он у вас введен седьмым по счету, то и в списке файлов с иконкой должен быть под седьмым номером по счету, а не скажем двадцать седьмым по счету с цифрой 7=style.bmp

Сам вид команд, имеет следующее значение, до знака равенства = это то, что будет отображаться в редакторе при наведении на иконку указателя мыши, своеобразная подсказка для вас же, о том какой тег будет вставлен при нажатии на эту иконку.

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

Возьмем для примера тег, которого нет в стандартной установке плагина - <a name="">|</a>.

В списке команд [Commands] он у нас имеет вид: Якорь=<a name="">|</a> и расположен вторым по счету, следовательно, файл с картинкой также должен быть вторым по счету в списке иконок [Toolbar], в примере он имеет вид: 2=jk.bmp.

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

Тем более, что узнать куда нужно помещать файлы с картинками иконок, очень легко с помощью самого редактора, а именно, когда у вас открыт файл WebEdit.ini можно просто посмотреть путь в шапке редактора. Второй способ это навести курсор на вкладку файла, и нажать ПКМ (правая кнопка мыши), в открывшемся контекстном меню выбрать пункт Полный путь к файлу в буфер. Затем нажать вставить, в любом открытом документе, чтобы посмотреть путь к папке, куда следует поместить файлы с рисунками иконок.

Вот собственно и всё.

P.S.

Не забывайте после того как внесли нужную вам команду сохранять файл WebEdit.ini и перезапустить редактор Notepad++.

При этом скорее всего, иконка попадет у вас в конец Панели инструментов, перемещать куда вам нравится, а также удалять ненужные иконки можно с помощью плагина настройки Панели инструментов, которой находится в Меню → Плагины → Customize toolbar → Customize ....

Если у вас такой плагин не установлен, то нужно это сделать, он позволяет настраивать Панели инструментов, как устанавливать объяснять думаю излишне ... а ладно напишу, мне не долго, а кому-то может пригодится. Идём в файловый менеджер, Меню → Плагины → Plugin Manager → Show Plugin Manager, в открывшемся окне находим название плагина, ставим галочку, жмём install, соглашаемся на перезагрузку программы. Комментариев пока нет!

www.royal-agency.ru

Текстовый редактор NotePad — знакомство с программой.

Приветствую, друзья. Я вот тут подумал, что довольно часто упоминаю в своих статья текстовый редактор NotePad++, но до сих пор, про него ничего не написал. Поэтому, сегодня я хочу познакомить вас с текстовым редактором NotePad++. И рассказать об основных моментах, которые пригодятся любому вебмастеру, особенно начинающему. Обо всем, конечно же, я не расскажу, так как возможностей у редактора очень много и какие-то из них я запросто могу не знать, так как не использую. Почему именно этот редактор? Он бесплатный, удобный, довольно простой и работать в нем одно удовольствие, по сравнению с тем же блокнотом. В блокноте нет ни такого функционала, ни подсветки кода, что не очень удобно, и других полезных возможностей.

[box_green]Ну и сразу хочется отметить, что данная программа постоянно поддерживается разработчиками: выходят новые версии и различные дополнительные модули, что является несомненным плюсом бесплатной программы.[/box_green]

Скачать текстовый редактор NotePad++

Программу NotePad++ можно скачать чуть ниже, а также почитать о ее возможностях и функционале. Единственная проблема в том, что сайт программы не на русском языке, но она тоже решаема, с помощью переводчика Google, например.[button_blue link=»http://notepad-plus-plus.org/»]Скачать[/button_blue]

Итак, скачать последнюю версию программы очень просто. Переходим на сайт разработчика и нажимаем на кнопку «download».

Затем, нам предлагают выбрать в каком виде скачать программу, а также ознакомиться со списком изменений в последней версии программы. Я обычно выбираю exe-файл, то есть обычный установщик программ. Для этого, жмем еще раз на кнопку «download» и сохраняем в нужном нам месте на компьютере.

Установка программы NotePad++

После скачивания, устанавливаем программу. Установка NotePad++ такая же, как и у любых других программ, поэтому с этим проблем не должно возникнуть. Единственное, на что стоит обратить внимание — это выбор компонентов программы, которые необходимы именно вам. По умолчанию уже все необходимое выбрано. Описание компонентов, к сожалению не на русском языке, но в принципе должно быть итак все понятно. Если не понятно оставляем, как есть и идем дальше. После установки, нам сразу предлагают запустить программу, мы так и поступим.

Коротко о строении программы NotePad++

Теперь, коротко, рассмотрим строение программы NotePad++. Программа состоит из панели меню, панели инструментов, для быстрого редактирования, панели вкладок, на которой располагаются вкладки наших редактируемых документов. Затем, идет рабочее поле, которое делится на три составляющих: колонка нумерации строк редактируемого документа, колонка для закладок(маркеров), которые можно использовать для запоминание той или иной строки и само рабочее пространство. И последнее, в самом низу окна программы находится панель статуса. Смотрите изображение(кликабельно):

Теперь, давайте по порядку

Панель меню NotePad++

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

Вид: Начнем с кнопки «вид». Здесь можно много чего настроить и изменить, но нам это не интересно. Нас интересуют «операции с документом», а именно «дублировать в другом окне».

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

Но есть и возможность синхронизировать оба окна. С помощью синхронизации можно прокручивать оба документа в окнах одновременно, причем можно синхронизировать, как вертикальную прокрутку, так и горизонтальную. Для синхронизации удобнее всего использовать панель инструментов. См. изображение.

Еще здесь может пригодиться пункт «масштаб», если есть необходимость увеличить код документа или же наоборот уменьшить. Для этого, можно пользоваться панелью меню.

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

Кодировки: В данном пункте мы можем назначать и изменять кодировку документа. Я не могу сказать, какую кодировку выбрать лучше всего, но практически всегда можно использовать кодировку UTF-8 без Bom, так как в обычном виде данная кодировка почему-то не всегда воспринимается правильно и может выводиться в браузере непонятная белиберда состоящая из иероглифов.

Первая(верхняя) половина выпадающего меню предназначена, для назначения кодировки нового документа.

Вторая(нижняя) половина служит, для преобразования кодировки документа, в котором уже содержится какая-то информация. Не путайте «кодировать» и «преобразовать».

Синтаксис: Служит, для назначения или изменения формата документа. Обычно, если у нас не настроено, формат документа (при создании нового) назначается, как текстовый, но если, при этом писать php или html-код, то код не будет подсвечен, так как у нас выбран текстовый формат. А при выборе необходимого синтаксиса, код начнет подсвечиваться. Параметр по умолчанию можно изменить в настройках NotePad++. Об это чуть ниже.

Опции: В опциях мы можем поменять до неузнаваемости внешний вид редактора, подсветку и многое другое, назначить горячие клавиши, для различных действий, импортировать темы и плагины для редактора и редактировать контекстное меню. Но мы рассмотрим только некоторые настройки NotePad++. По умолчанию редактор настроен довольно не плохо и особой надобности менять что-то нет. Но для удобства можно в общих настройках поставить галочку «кнопка закрытия на вкладке», что позволит нам закрывать любую вкладку, а по умолчанию мы можем закрывать только активную, либо все.

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

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

Остальные пункты данной панели мы рассматривать не будем, потому что некоторые из них рассмотрим в панели инструментов, а некоторые просто не нужны, для начинающего пользователя. Единственное, что хочется добавить, это, можно почитать онлайн документацию, если вам что-то не понятно.

Панель инструментов NotePad++

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

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

Поиск: Первая кнопочка «найти», из названия я думаю все понятно. Если мы нажмем на эту кнопку, мы сможем найти определенную часть документа. При чем поиск очень гибкий и настраиваемый, что позволяет искать так, как нам удобно. А также искать в папках или каких-то файлах, что просто супер.

«Замена» — это в принципе тот же поиск, только с помощью замены можно искать необходимую часть кода и автоматически заменять ее на другой код. Эта функция очень полезна, когда нам нужно сделать правку в коде, например добавить всем ссылкам атрибут nofollow. Тогда мы указываем, что необходимо найти

<a href=

и заменить на:

<a rel="nofollow" href=

И все что будет найдено, будет исправлено на то что нужно.

Перенос строк:

Первая кнопка так и названа: «перенос строк». Она отвечает за перенос строк документа, если тот не влезает в рабочее пространство. Если же данная кнопка будет неактивна, то строки переноситься не будут, а будет появляться горизонтальная прокрутка, что не очень удобно.

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

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

И последняя, «Задать свой язык» — не разу не пользовался данной кнопкой, поэтому и рассказать ничего не могу.

Макросы: Макрокоманды, с помощью которых мы можем записать часто повторяющиеся действия производимые в коде, а затем воспроизвести их. Это очень удобно, при написании кода, так как записать можно любое действие, которое вы часто используете в коде. А благодаря макросам, данное действие можно воспроизвести, чтобы не писать вручную.

Для создания и управления макросами, у нас в распоряжении целых пять кнопок: «Старт записи», для начала записи, «Стоп записи», для остановки записи макроса, «Прокрутить запись», что является непосредственным воспроизведением записанного макроса, «Запустить многократно», для воспроизведения макроса какое-то количество раз, которое вы можете выбрать при нажатии на кнопку, и «сохранить запись» — позволяет сохранить записанное действие и назначить ему имя и сочетание горячих клавиш. Кстати, все эти клавиши продублированы в панели меню.

FTP: Предпоследняя клавиша в панели инструментов NotePad++ предназначена, для открытия окна ftp-клиента. Данный клиент должен был установиться с программой, если вы не снимали никаких галочек, при установке. По сути это плагин, для NotePad. Еще одно удобное решение данной программы. Хотя я по привычке использую FileZilla.

При нажатии на кнопку, справа появляется дополнительное окошко ftp-клиента. В нем также есть панель инструментов, с помощью которой мы можем управлять непосредственно ftp. При первом открытии, у нас активны только две кнопки: это настройки и включение окна, которое будет показывать нам статус подключения.

Для создания подключения жмем на «settings» и из выпавшего списка выбираем «profile settings».

Затем в открывшемся окне, нажимаем на «Add new».

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

После этого, заполняем все необходимые поля. Как заполнять поля, можно прочитать в статье, про ftp-клиент filezilla и сделать все по аналогии. Единственное, что хочется отметить, это возможность указать название папки или файла в директорию которого можно сразу подключиться. То есть можно подключиться не к корневой папке сайта, как обычно, а например указать папку с шаблоном и сразу подключиться туда. В остальных вкладках можно ничего не трогать. После того, как все данные заполнены, просто закрываем окно.

Теперь, у на появилась еще одна активная кнопка «connect», то есть подключиться или отключиться. Жмем на нее и выбираем имя подключения, которое нам необходимо. После подключения, в правом окне появится список папок и файлов. Теперь, чтобы открыть какой-то файл в программе NotePad++ достаточно кликнуть два раза по файлу и он будет открыт и готов к редактированию. А для закачивания обратно отредактированного файла, достаточно его сохранить и он автоматически будет загружен на наш сервер.

И последняя кнопка — это проверка языка. Но я ее рассматривать не буду, так как для ее работы необходимо загружать дополнительные файлы, да и нет в ней необходимости.

После панели инструментов у нас идет панель вкладок документов, но с ней все довольно понятно, как ей пользоваться, поэтому не будем на этом останавливаться.

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

Панель статуса NotePad++

И последнее, о чем стоит коротко поговорить — это панель статуса.

Первая запись говорит нам о типе документа, который мы можем в любой момент поменять. Затем, длина (length), то есть количество символов и количество строк (lines) документа. Следующая часть панели статуса говорит нам о том, где в данный момент находится наш курсор (строка и колонка). Сразу за этим, идут данные о выделенной части кода, то есть количество символов и количество строк. Затем, формат документа (под какую операционную систему создается документ). Предпоследняя часть говорит нам о выбранной или назначенной кодировке редактируемого файла. И последнее — это состояние клавиши «Insert». Чтобы активировать данную клавишу можно кликнуть по надписи «INS» в панели статуса NotPad, а можно нажать комбинацию клавиш на клавиатуре «Shift+Ins». Что дает нам это действие? Во-первых, если вы обратите внимание, после активации данной клавиши у нас курсор стал горизонтальным, чтобы можно было его отличить от стандартного ввода. Во-вторых меняется принцип ввода символов, то есть если поставить курсор в какую-нибудь строку и начать что-то вводить, то старый код, который находится спереди курсора, будет заменяться на новый, который мы пишем в данный момент.

Вот в принципе и все о чем я хотел вам рассказать. Получилась конечно целая эпопея, но зато теперь вы знаете об основных и самых необходимых опциях программы NotePad++. Надеюсь, что вам поможет данная информация, при написании кода. И хочу напомнить, что это была только малая часть возможностей, которые есть в тестовом редакторе NotePad++. Да, и не забывайте делать backup сайт, чтобы его потом можно было восстановить. Я очень вам признателен, если вы смогли дочитать этот пост до конца, значит не зря я его писал.

Удачи, всем посетителям SdelaemBog!

sdelaemblog.ru


Смотрите также