Здравствуйте уважаемые начинающие веб мастера. Раз уж Вы взялись за создание своего собственного сайта, то Вам не обойтись без такого инструмента, как редактор файлов. В интернете предлагается много подобных программ. Это и различные фотошопы, и программа Dreamweaver и ещё много различных редакторов. В этой статье мы подробно рассмотрим, как скачать, установить и использовать одну из самых популярных программ — Notepad++. Это бесплатный, очень удобный редактор, с подсветкой синтаксиса, русскоязычным интерфейсом, поддержкой почти всех языков программирования, и кучей других полезных примочек. Чтобы кого нибудь сразу не испугать, ведь раз необходима такая программа, то всю её нужно будет изучать, сразу, в двух словах, поясню, что всю её изучать Вам возможно и не придётся. Первое, чему Вам нужно будет научиться, и что Вам, безусловно, очень понравиться делать — это написать в редакторе некоторый код, и тут же открыть результат в браузере, чтоб посмотреть, что получилось, и исправить то, что получилось не так, как Вам бы хотелось. То есть сделать, как бы песочницу, или отладочный полигон. Хоть подобных программ и полно в интернете, но Notepad++ в этом случае вне конкуренции. Ведь он открывает результат кода непосредственно в браузере, что уже реалистичнее песочницы, и в нём можно применить аналитику, к примеру Веб инспектор. В дальнейшем, если Вы серьёзно возьмётесь за веб-программирование, и Вам, естественно, станет тесно в рамках редактора CMS, можно будет углубиться в изучение возможностей Notepad++. А возможности эти не маленькие, и многие из них мы в этой статье, после установки, рассмотрим. Но сначала — установка. Как обычно набираем в поисковике «Notepad++ русский скачать бесплатно». Щёлкаем по «Поиск», и открывается столько предложений, что глаза разбегаются. Поискав немного, я выбрал ссылку с адресом «Softoland.ru/notepad-plus-plus.html». Можно просто скопировать этот адрес без кавычек, и вставить в поле поиска поисковика. Оказавшись на этом сайте, щёлкаем по красной полоске со ссылкой «Скачать». Откроется несколько вариантов скачивания. Выбираем «Перейти на страницу загрузок». Здесь Вам предложат несколько версий редактора. Выбрать лучше полную, с установщиком, то есть первую сверху. В IE, в строке загрузки (внизу экрана) выбрать «Выполнить». А в браузере Chrome, в появившемся окне загрузок, нужно выбрать «Сохранить», и на иконке загрузок, в нижнем левом углу экрана, щёлкнуть по треугольнику справа, и в открывшемся меню выбрать «Открыть по завершении». Затем появится окно контроля учётных записей. Нажмите «Да». В следующем окне выбирается язык интерфейса редактора. По умолчанию там уже стоит «Русский», так что просто жмём «ОК». После этого Вас поприветствует мастер установки, которому нужно дать команду «Далее». Затем будет предложено ознакомиться с лицензионным соглашением, которое лучше просто «Принять», так как они все стандартные. После этого указывается папка, в которую устанавливается редактор, обычно это Program Files, нажимаем «Далее». Затем спрашивается, какие компоненты программы Вам нужно установить. Зачастую бывает, что в таком списке прячутся рекламные приложения, но я проверил здесь ничего подобного нет, так что «Далее». Здесь нужно указать где, и какие ярлыки будут созданы. Можно тоже ничего не менять, и просто нажать «Установить» Произойдёт установка, и вновь откроется окно мастера установки, в котором нужно дать команду «Готово». После этого, на панели задач, внизу экрана, появится иконка с изображением блокнотного листа с карандашом, и если щелкнуть по ней, то откроется главная страница редактора. Если иконка редактора не появилась на панели задач, то нужно зайти в меню «Пуск» (первый символ внизу экрана), найти там строчку «Notepad++», щёлкнуть по ней, и в открывшемся подменю, щёлкнуть правой клавишей по строке с иконкой Notepad++(блокнот с карандашом), откроется ещё одно меню, в котором нужно выбрать «Закрепить на панели задач». На панель задач её нужно поместить потому, что в дальнейшем пользоваться им придется очень часто, а с панели задач открывать редактор можно одним кликом. Редактор Notepad++ установлен. Теперь начинается самое интересное. Руководство по применению Первым делом научимся делать то, о чём я говорил в начале статьи, а именно тестировать, написанный в редакторе код, в браузере. Для этого нужно будет сделать некоторые приготовления на Вашем компьютере. Они совсем не сложные, и делаются один раз. После их выполнения, можно будет открывать в Вашем браузере сколько угодно, написанных Вами, файлов. Даже написать целый сайт. Итак, чтобы написанный в Notepad файл, открылся в браузере Вашего компьютера, нужно чтоб этот файл, на Вашем компьютере, присутствовал. А так как по умолчанию он в Вашей ОС, конечно же, не предусмотрен, то нам нужно его создать, вернее создать место (папку), в которую мы сохраним, написанный в Notepad файл. А уж браузер его там увидит, и выведет на экран. Папку проще всего создать в библиотеке «Документы», из-за простоты доступа. Можно, конечно, для этих целей выбрать любое другое место на компьютере. Заходим в библиотеку «Документы» (Пуск — Компьютер — Документы), и щёлкнув по полю с файлами правой клавишей, выбираем, в открывшемся меню, «Создать». В меню «Создать», выбираем «Папку», после чего, в столбце файлов библиотеки «Документы», появиться строка, с эмблемой папки, и окрашенной в синий цвет, строкой — «Новая папка». Нажимаем клавишу «Bachspace», строка «Новая папка» очищается, и пишем вместо неё название «site». Напоследок щёлкаем по пустому полю — папка «site» сохранена. Это значит, что место на Вашем компьютере для файлов, написанных в Notepad++, готово. Если Вы планируете создавать и открывать php файлы, то директория сайта создаётся намного по другому, так как для скриптов потребуется интерпретатор, функции которого может выполнить Денвер. Теперь открываем редактор, щёлкнув по его иконке, и попадаем на главную страницу Notepad++. На этой странице находим иконку «Новый», которая расположена в самом начале панели инструментов редактора (самая верхняя строка), и щёлкнув по ней открываем новую вкладку, nev1, в которой и будем создавать файл. . Следующим шагом находим меню «Кодировки», в той же верхней строке, и щёлкнув по нему, выбираем UFT8(без BOM). Эта кодировка предназначена для правильного отображение русских букв. В других кодировках все русские буквы будут отображены в виде знаков вопроса, или каких нибудь других непонятных символов. Файл — это html документ, и чтобы не тратить время на написание его каркаса, предлагаю зайти в главу Каркас страницы , скопировать приведённый в начале статьи код, и вставить его в nev1. Кстати, в той же статье можно узнать, из чего состоит каркас html документа. Пригодится. Теперь щёлкаем по меню «Файл» (верхняя строка), выбираем «Сохранить как…», и в открывшемся поисковом окне проводника, находим созданную нами папку «site». Открываем её (откроется пустое поле), и внизу убираем название nev1, а вместо него вписываем index.html, и «Сохранить». Соответственно, если Вы создаёте файл таблицы стилей, или php, то в место nev1, нужно вписать style.css или index.php. После этого наш файл в редакторе приобретёт вот такой симпатичный вид. Теперь можно попробовать что либо написать в теле документа (тег body), и посмотреть, как отобразит нашу запись браузер. Давайте, для пробы, напишем самый большой заголовок h1. Сохраняем написанный код, щёлкнув по третьей слева, на панели инструментов, иконке — «Сохранить». Кстати, у каждой иконки, расположенной на панели инструментов редактора, при наведении на неё курсора, появляется название соответствующего ей инструмента, на русском языке, что исключает ошибку. При сохранении, дискетка файла окрашивается из красного, в синий цвет, что так же всегда предостережёт Вас от ошибки. Чтобы открыть результат, находим меню «Запуск», и выбираем в нём Ваш браузер. Так как у меня Chrome, то и открою файл я в нём. Ну Вот теперь можно смело экспериментировать с html кодом, и таблицами стилей (их так-же можно писать в html файле, в теге head), и сразу смотреть, что из этого получается. Для веб-мастеров использующих для управления сайтом CMS, редактор Notepad++ тоже очень даже пригодиться, и к тому же в самом начале. Ведь при самостоятельной установке движка, в нём придётся кодировать файл «config», а сделать кодировку можно только в этом редакторе. А теперь давайте посмотрим ещё некоторые способности Notepad++. Следующим свойством, которое мне очень нравиться, является возможность вернуться к предыдущему варианту. Например если Вы сделали ошибку, и браузер отобразил чёрте что, можно быстро сделать шаг назад, и количество таких шагов не ограничивается. Что назад, что потом вперёд. Такая возможность реализуется кнопками с полукруглыми стрелками на панели инструментов. Размер шага составляет один клик, так что можете, не боясь запороть весь код, экспериментировать сколько душе угодно. Следующим замечательным свойством, здорово облегчающим написание кода, является перетаскивание. Перетащить мышкой можно любой участок кода, в любое место кода, нужно лишь выделить нужный участок, и тащи куда пожелаешь. Очень часто, после просмотра результата, появляется желание поменять некоторые элементы местами, и вот тут перетаскивание очень упрощает процесс. Кстати перетаскивать можно и открытые вкладки, совсем как в браузере. Если Вы не совсем уверены в правильности написания некоторых тегов и атрибутов html, свойств и значений css, функций, операторов и других элементов php, то для подсказки можно включить авто-завершение. При активации этой опции, стоит Вам только набрать первую букву, как Notepad предложит вам несколько готовых вариантов слова. Включается эта опция так. В меню «Опции» выбираем «Настройки». В окне настроек выбираем вкладку «Резерв/Авто-завершение». Затем под заголовком «Авто-завершение» ставим галочку в чекбоксе «Включать для каждого ввода». В самом начале изучения языков программирования, эти подсказки просто палочка выручалочка. Ведь невозможно быстро выучить и запомнить все элементы кода, да ещё и правильность их написания на английском языке. В этом же разделе можно активировать опцию «Резерв», или бекап, которая позволит сохранять написанный Вами файл, в отдельной папке на компьютере. Для этого под заголовком «Резервное копирование», ставите точку в чекбоксе «Простое», затем галочку в «Пользовательская папка для сохранения». После этого нажимаете на квадратик с тремя точками, и в открывшемся поисковом окне выбираете папку, в которую редактор будет сохранять все копии написанных Вами файлов. Следующая удобнейшая «примочка» — это автоматическое добавление закрывающего тега. Особенно эта опция необходима при работе с тегом div, когда в одном диве, располагается ещё десяток встроенных. Проконтролировать каждую пару на наличие закрывающего тега, в таком случае, бывает весьма затруднительно. Notepad++ может сделать это за Вас. Реализует эту опцию плагин TextFX. Если он установлен по умолчанию,то перед меню «Опции», в Вашем редакторе будет присутствовать меню «TextFX». Если его нет то нужно этот плагин добавить. Делается это так. В меню «Плагины» выбираем «Plugin Manager», затем «Show Plugin Manager». В результате должно открыться вот такое окно. В нем представлены доступные для загрузки плагины редактора. Но возможно, в открывшемся у Вас окне, будет всего одна строка, что говорит о том, что менеджер плагинов в Вашем варианте редактора ещё не установлен. Вам достаточно будет нажать кнопку «Install», и менеджер загрузится и установиться, редактор перезагрузится, и все плагины в окне появятся. Находим в списке «TextFX», ставим галочку. И нажимаем «Install». Появиться окно уточнения, нажимаем «Да», затем окно учета контрольных записей, тоже «Да», после чего меню «TextFX», появиться на панели редактора. Открываем его и выбираем «TextFX Setting», и «Autoclose XHTML/XML <Tag>». После этого, как только Вы напишете html тег, тут же рядом появится закрывающая пара. Но есть один нюанс, который меня вначале не на шутку озадачил. Дело в том, что по укоренившейся привычке, я вначале ставил угловые скобки, и уже после, в них вписывал название тега. При таком исполнении, закрывающая пара ни за что не хотела образовываться. Я уж решил, что плагин не работает. Потом уж додумался, что писать нужно без выкрутасов: открывающая скобка, название, закрывающая скобка. И тут же по написании закрывающей скобки, появляется закрывающий тег. Ещё один плагин о котором невозможно сразу не сказать — это Compare. Только представьте: У Вас есть файл, и Вам нужно его немного изменить. Причем не просто изменить, а сохранить исходник в первозданном виде, а изменения сделать отдельным файлом. С помощью «Compare», сделать это очень удобно, так как он позволяет открыть рядом, в одном окне, сразу два файла, и редактировать, и сохранять их по отдельности. Представляете да? Открываем файл, затем открываем рядом новый, потом запускаем плагин, открываются рядом два окна, копируем и вставляем исходник в новый документ, и исправляем. Причём, оба варианта запускаются в браузере, так что можно сразу посмотреть, что было, и что получилось. Устанавливается «Compare» так же как и «TextFX», то есть заходим в «Плагины — Plugin Manager — Show Plugin Manager», находим в списке «Compare», и ставим галочку. На панели меню, вкладка этого плагина не создаётся, и доступ к нему осуществляется из меню «Плагины». Как только Вы щёлкните по «Compare» в дополнительном меню, так сразу рядом с открытым файлом, откроется соседний справа. Если навести курсор между ними, и при появлении стрелочек «Перемещение», щёлкнуть правой клавишей, то появиться окошко разворота, в котором можно выбрать горизонтальное размещение файлов. Причем развернуть файлы предлагается как вправо, так и влево. Очень удобно. А теперь вернёмся немного назад, к установке плагина. Обратите внимание, что как только Вы выберете плагин, до нажатия «Install», в нижнем поле появляется текст. Это информация о выбранном плагине, правда на английском языке, но для этого есть переводчик Google. Теперь о том, как выйти из этого режима, ведь не всегда же Вам нужны будут два файла рядом. Делается это просто. Нужно зайти в меню «Файл», и выбрать «Закрыть», после чего открытый в данный момент документ закроется, и сохраниться в «Недавние файлы». Откуда его можно будет потом в любой момент открыть, и работать только с ним одним. Файлы в Notepad++, сохраняются до тех пор, пока они есть на Вашем компьютере. И даже после их удаления с компьютера, и попытке запуска из «Недавние файлы», редактор спросит: удалить или восстановить документ. Пока всё. Конечно статья не закончена, и по мере изучения, я буду добавлять описания новых опций. Желаю творческих успехов.
Возможности русской версии редактора Notepad++. Это может понадобиться, если нужно проводить работу с документом в. но было бы хорошо сделать пошаговую инструкцию для начинающих, а сайт как я.
Привет, друзья! Сегодня поговорим о текстовом редакторе Notepad++( Plus Plus). В предыдущих постах я неоднократно советовал пользоваться именно им, да и в дальнейшем, без этого редактора нам будет просто не обойтись. Вот поэтому, в этом посте, я хотел бы попробовать написать небольшую инструкцию по редактору Notepad++, показать функции и фишки столь замечательного и бесплатного блокнота, созданного для того, чтобы облегчить жизнь всем вебмастерам и нам с вами в том числе ! Начнем с того, что блокнот Notepad++(Plus Plus), в отличии того же Dreamweaver или других Html и PHP редакторов совершенно бесплатен и более легок и шустрее в работе… а это уже ++ ! Ну ладно, давайте перейдем к функциям блокнота. В редакторе присутствует подсветка синтаксиса, т.е. каждый элемент кода выделяется своим цветом (обычный текст просто черным цветом), так же, при клике мышкой на какой-либо тег ( [], {}, <>,(), [/], {/}, </>,(/), ) редактор автоматически выделяет цветом закрывающий (или открывающий) парный тег, выделяя, таким образом, HTML и PHP код заключенный между тегами. например: 1. При нажатии на открывающий тег div, 13 строка автоматически выделилась и закрывающий div окрасился таким же цветом как открывающий, показывая нам весь блок div с классом «entry»; 2. Просто текст, блокнот показывает обычным черным цветом; 3. Номера строк; 4. При нажатии на минус, определенный участок кода свернется, что позволяет более удобно работать в редакторе. На месте минуса появится плюсик, при нажатии на который свернутый блок развернется; 5. Как говорил выше, у каждого элемента свой цвет. Идем дальше. В текстовом редакторе нотепад++ имеется очень полезная функция — неограниченное количество шагов назад. Объясню подробнее: например вы что-то редактировали в файле (удаляли, добавляли, меняли и т д) и вдруг совершили ошибку, а как было изначально вы не помните, и как быть?!… все просто, необходимо воспользоваться горячими клавишами Ctrl+Z (шаг назад), либо в меню «правка-отмена», либо можно воспользоваться загнутыми стрелочками на панели инструментов: Шагов назад может быть сколь угодно много, вплоть до первоначального файла. Точно также можно отменить отмену (простите за масло масленое) так сказать шаг вперед. Для этого служат горячие клавиши Ctrl+Y, «правка-отмена», и стрелочка вправо. В общем функция вперед -назад может отлично помочь при редактировании Html и PHP код в текстовом редакторе Notepad++. Редактор Notepad++ в кодировке UTF-8 (без BOM). Текстовый редактор Notepad++ может преобразовывать и сохранять файлы Html и PHP в кодировку UTF-8 (без BOM). Если вы в файлах шаблона добавите какую-либо запись на русском языке, то на сайте эта запись отобразится кракозябрами или знаками вопроса, причина тому кодировка Windows-1251, в которой был сохранен исходный файл. Таким образом, при редактировании файлов движка, необходимо преобразовать эти файлы в кодировку UTF-8 (без BOM). Делается это следующим образом: 1. Вписываем вместо английского текста перевод; 2. Идем во вкладку кодировки; 3. Жмем преобразовать в UTF-8 (без BOM); 4. Дискетка, если файл не сохранен, окрасится в красный цвет. Чтобы сохранить жмем на нее. Все, файл преобразован и сохранен. Следует сказать пару слов про BOM. Когда вы работаете с Html или PHP файлами сайта в обычном блокноте Windows, то при сохранении его в кодировке UTF-8 происходит добавление невидимых символов (BOM), которые могут негативно сказаться на работоспособности данного файла (PHP файл может выдавать ошибку, вопросики вместо букв и прочей белеберды… ). Если после редактирования у вас на сайте появились кракозябры – проверьте кодировку! Настоятельно рекомендую не работать с кодировкой UTF-8 в стандартном блокноте Windows, а использовать для этого редактор Notepad++. В текстовом редакторе можно одновременно работать сразу с несколькими файлами, и открываться они будут не в разных окнах, а в одном окне по вкладкам. Эти вкладки можно перемещать, сворачивать, закрывать. Так же можно две копии файла открыть в одном окне: Иногда это очень удобно, если нужно работать с документом в разных его частях (где-то посмотреть или скопировать, а где-то вставить). Активировать данные режим очень просто, достаточно на нужной вкладке нажать правой кнопкой мыши и выбрать пункт «дублировать в другое окно», либо зажать левой кнопкой мыши и перетащить нужную вкладку на главное окно Html и PHP редактора Notepad++, затем также выбрать пункт «дублировать в другое окно». При сохранение изменения одного из файлов, копия второго так же обновится. Поиск в Notepad (Plus Plus). Ну, здесь я думаю все ясно и вопросов с проблемами возникнуть не должно. Можно искать как по текущему документу, так по всем файлам. Обязательно научитесь пользоваться поиском, сэкономите кучу времени! Автоматическое завершение набираемого слова, вот еще одна отличная функция блокнота нотепад плюс плюс. Это может быть очень удобно, если вы не уверены в правильность написания того или иного оператора Html или PHP кода. Включить автозавершение Html или PHP кода в редакторе Notepad++ можно так: «опции-настройки» вкладка «резерв/автозавершение» и поставить галочку «включить для каждого ввода» Советую включить эту функцию, иногда бывает очень полезно! Notepad++ и FTP соединение. Что мне еще нравится в Notepad++, это то, что в нем присутствует встроенный FTP-клиент, который позволяет без лишних сторонних программ скачивать файлы с сервера, редактировать их, и закачивать непосредственно с блокнота на хостинг. Согласитесь, не всегда удобно той же FileZilla (статья о FTP клиент FileZilla) сначала скачать файл с сервера (например, таблицу стилей css), затем в редакторе поменять цвет ссылки , далее сохранить файл на компьютере, потом снова открывать FileZilla и закачивать этот файл обратно на сервер… долго! Так вот, а в Notepad эти все телодвижения можно сделать намного быстрее: открыл редактор, подключился по FTP к серверу, подправил код и тут же закачал файл обратно! Я считаю – просто супер!!! Как подключить FTP соединение в Notepad++. Итак, запускаем Notepad++, в панели инструментов находим значок соединения «Show Npp FTP Window» Кликаем на этот значок, в результате справа увидите часть, отвечающую за FTP-соединение. Нажимаем на «шестерёнку», чтобы настроить наш FTP-клиент в notepad++ Выбираем profile settings и в открывшемся окне настраиваем соединение с сервером. В поля для заполнения следует вписать стандартные данные, которые используются для соединения. 1. Имя соединения (любое); 2. Адрес хостинга; 3. Ваш логин на хостинге; 4. Пароль соединения; 5. Директория, которая при подключении будет открываться на хостинге (public_html ); 6. Готово. После всех настроек, станет активным значок «Connect» жмем на него и выбираем наше установленное соединение (в моем случае, это бегет). После этого откроются все папки и файлы, находящиеся на нашем сервере. Выбираем необходимый нам файл для редактирования, нажимаем в FTP-клиенте Notepad++ «загрузить»(зеленая стрелочка вниз). После того, как мы загрузили и подредактировали файл, теперь необходимо вернуть его на сервер Чтобы обновить файл на сервере, нужно нажать на кнопку со стрелочкой вверх. Таким вот образом, используя текстовый редактор Notepad++ и FTP соединение, можно быстро редактировать файлы шаблона! Ну вот, основные функции, которые нужно знать всем, я вам рассказал. Конечно в нотепаде (плюс плюс) еще полно различных настроек и возможностей, но я сам пока не разобрался, и не могу учить вас. Просто,чтобы знали, в Notepad++ имеется поддержка плагинов, запись макросов, проверка грамматики русского языка. Много дополнительных функций можете активировать через меню «TextFX». В одном из следующих уроках будем разбирать программу Total Commander и там я покажу как Notepad интегрировать в него. В следующем уроке с помощью блокнота Notepad++ научимся переводить шаблон WordPress (Перейти к уроку) Если подыскиваете хороший и стабильный хостинг, то хостинг vds серверов это то, что нужно — отличное железо, отличные цены, отличная защита, и комфорт! Так же, посмотрите инструкцию по редактору Notepad++ Удачи вам! Все возникшие вопросы задавайте в комментариях ниже…
