Невизуальные HTML-редакторы


Оглавление (нажмите, чтобы открыть):

Иллюстрированный самоучитель по Adobe Dreamweaver MX

Зачем нужны HTML-редакторы

На этом завершим краткое введение в интернет-технологии. Вы узнали, что создавать Web-страницы очень просто, и для этого достаточно простейшего текстового редактора. Также вы познакомились с программами Web-серверов и узнали, как работает клиент-серверная архитектура. В связи с этим возникает вопрос: если язык HTML так прост, а в состав Windows входит Блокнот, прекрасно с ним справляющийся, то зачем нужны еще и Web-редакторы вроде Macromedia Dreamweaver?

«Уберите от меня подальше этот проклятый HTML. – кричит один читатель. – Я ничего в нем не смыслю! Он слишком сложен для меня, а у меня нет времени ему учиться. Дайте мне нормальный текстовый редактор, тот же Microsoft Word, и я буду работать в нем.» И он будет прав.

HTML, конечно, прост. Но для кого-то он может оказаться невероятно сложным, ведь люди все разные. Кроме того, сложные Web-страницы писать «врукопашную» крайне неудобно. Уж поверьте! Поэтому вам понадобятся программы, автоматизирующие ваш труд – эти самые Web-редакторы, к славной плеяде которых относится и Macromedia Dreamweaver.

«Но мне нравится HTML! – возразит другой читатель, собаку съевший в Web-дизайне. – Мне проще вводить вручную HTML-теги, чем елозить по тексту мышкой и тыкать кнопки.» И он тоже будет прав.

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

Выходит, правы и первый, и второй читатели. Так как же помирить два враждующих лагеря: HTML-поклонников и HTML-ненавистников? Похоже, что никак…

Вот поэтому на свете и существуют две разновидности Web-редакторов: визуальные и невизуальные. Или, как еще говорят, WYSIWYG – и не-WYSIWYG-редакторы. (WYSIWYG или What You See Is What You Get – «что ты видишь, то ты и получишь».)

Невизуальные редакторы работают с «чистым» (или «сырым») HTML-кодом. Они предоставляют возможность быстрого ввода тегов, синтаксического подсвечивания, проверки правильности получившегося кода и ссылок. К ним относится, в частности, известная Arachnophilia.

Примечание
Невизуальные Web-редакторы часто называют HTML-редакторами
.

Визуальные редакторы позволяют работать с самой Web-страницей «как она есть». Пользователь редактирует и форматирует текст, вставляет рисунки, таблицы, как в обычном текстовом редакторе, а уж сама программа формирует соответствующий HTML-код. К такого рода редакторам относится популярный Microsoft FrontPage и целый ряд программ попроще.

Как вы уже поняли, невизуальные редакторы прекрасно подходят для опытных Web-дизайнеров, съевших собаку на HTML и прекрасно представляющих, как должна выглядеть Web-страница в результате тех или иных изменений в ее коде. Визуальные редакторы – отличная стартовая площадка для начинающих Web-дизайнеров, плохо знакомых с HTML. Но и опытные дизайнеры часто пользуются визуальными редакторами, чтобы быстро «набросать» Web-страничку, а потом довести ее до ума «врукопашную».

Специально для таких пользователей, совмещающих прекрасное знание HTML с пристрастием к визуальным средствам редактирования, существуют так называемые гибридные,редакторы. Они имеют мощные средства визуального редактирования, одновременно предоставляя доступ к получившемуся HTML-коду. Именно к таким редакторам и относится Macromedia Dreamweaver.

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

Вдобавок, как правило, все более-менее мощные редакторы Web-страниц – и визуальные, и невизуальные – имеют в своем составе развитые средства управления сайтом. Они знают, из каких страниц состоит ваш сайт, помогут опубликовать его на Web-сервере, предупредят о гиперссылках, указывающих «в никуда», и даже позволят вам составить список всех действий, которые вы хотите проделать с сайтом. Конечно же, Dreamweaver это тоже может.

Что дальше?

Вот и закончился наш краткий курс интернет-технологий. Конечно, многое здесь не описано. Все, что вам будет необходимо для создания и публикации Web-страниц, будет рассмотрено по ходу дела. А сейчас давайте, не углубляясь в дебри Интернета, перейдем к нашей главной цели – к работе с замечательным пакетом Web-редактора Macromedia Dreamweaver MX.

Невизуальные HTML-редакторы

Рисунок 4-19. Вид HTML редактора (Microsoft Expression Web). Источник: https://expression.microsoft.com/en-us/dd450355

Для создания веб-страницы можно использовать различные инструменты от простых до самых сложных. Выбор инструментов зависит от того, кому и для какой цели создаётся сайт (сайты фирм создают профессиональные специалисты при помощи дорогих программ, сайт сделанный руками любителя создаётся при помощи простых инструментов). Простой программой может быть, например, текстовый редактор Notepad, к числу сложных принадлежат MS Expression Web и Adobe DreamWeaver.

Простые и дешёвые инструменты не всегда просто использовать. Для того чтобы создать веб-страницу при помощи Notepad, необходимо очень хорошо знать язык HTML, что при использовании Expression Web совершенно не обязательно. Тут необходимость использования языка HTML зависит от настроенного комплекта инструментов.

Программы, необходимые для разработки веб-сайтов, делятся на две категории: визуальные и невизуальные.

Визуальные редакторы называют также WYSIWYG-редакторами («What You See Is What You Get» — «Что ты видишь, то и получишь). При администрировании сайта проще и легче использовать визуальные программы, которые позволяют с веб-страницей в окне дизайна. Пользователь редактирует и оформляет текст, добавляет картинки, таблицы как в текстовом редакторе (например, Word) и программа сама создаёт HTML код. Веб-страница выглядит в браузере такой же, как и в окне программы, при помощи которой страница создавалась. Распространённые визуальные программы это DreamWeaver, MS Expression Web и SeaMonkey.

  • Достоинства:
    • просты в использовании
    • не требуют знания HTML.
  • Недостатки:
    • не оптимизированный код, в результате которого увеличивается размер файла
    • код страницы трудно редактировать
    • отображение документа в разных браузерах может быть разным.

HTML был изначально предназначен для ручного написания кода и плохо поддаётся автоматизации. Поэтому ни один визуальный редактор не обеспечивает полного использования HTML и не гарантирует полностью корректного кода. Поэтому необходимо в конце каждую страницу редактировать вручную. При использовании невизуальных редакторов можно создавать оптимальный код, в котором можно избежать лишних конструкций и который позже просто редактировать. Для облегчения работы предусмотрено быстрая вставка тегов, выделение ключевых слов цветом, контроль полученного кода и ссылок. Невизуальные редакторы называются зачастую просто HTML-редакторами. Редакторами этого типа являются к примеру AceHTML, 1st Page, HotDog, Arachnophilia. В профессиональных программах, как правило, есть обе возможности — как визуальные, так и редактирование кода.

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


Обзор визуальных редакторов для создания сайтов

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

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

Существует множество инструментов, с помощью которых веб-дизайнер осуществляет верстку страниц. Такие программы называются HTML-редакторами. В веб-дизайне используется два типа редакторов — визуальные и невизуальные (текстовые). Первые работают по принципу WYSIWYG (от англ. — What You See Is What You Get — что видишь, то и получаешь. Другими словами, это способ подразумевает, что при редактировании материал выглядит так же, как он и будет выглядеть в конечном результате. Текстовыми же редакторами, в основном, пользуются профессиональные веб-дизайнеры — так как такие инструменты подразумевают написание кода самостоятельно. С помощью текстовых редакторов создается чистый программный код, который позволяет веб-дизайнерам полностью воспроизводить задуманное, без вмешательства инструмента “по умолчанию”. Существуют также редакторы, которые поддерживают оба принципа работы.

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

— Microsoft FrontPage
— Adobe Dreamweaver
— Adobe GoLive
— IBM WebSphere Studio Homepage Builder
— Macromedia HomeSite (до версии 5.0)
— NetObjects Fusion
— Namo Web Editor
— WYSIWYG Web Builder

— Microsoft FrontPage Express
— OpenOffice. org
— HTMLArea
— TinyMCE
— FCKeditor
— Quanta Plus
— Nvu

Далее я рассмотрю редактор Microsoft Front Page (Microsoft). Это HTML-редактор, входящий в пакет приложений Microsoft Office. Последняя версия — 2003-его года (11-ая). В 2007-ом году на смену программе приходят SharePoint Designer и Microsoft Expression Web.
FrontPage считается простейшим визуальным редактором и популярным среди тех, кто отдает предпочтение программным инструментам Microsoft Office и создает сайт специально для сервера на основе технологий Microsoft. К тому же при разработке веб-сайтов данный редактор пользуется движком Interner Explorer (Tirend), что означает, что в браузерах с другими движками сайт, написанный с помощью FrontPage, может отображаться неверно. Эта проблема, в свою очередь, решается при правильно выбранном режиме совместимости браузеров.

FrontPage поддерживает HTML, JavaScript (скриптовый язык), CSS (каскадные таблицы стилей), DHTML (сочетание HTML, JavaScript, CSS и DOM — объектной модели документа), совместим с технологиями ASP (создание веб-приложений), XML (язык разметки, текстовый формат, применяемый для хранения структурированных данных), VBScript (скриптовый язык программирования), XSL (расширяемый язык таблиц стилей — смена CSS). FrontPage также имеет неплохие возможности по управлению изображениями, flash-роликами, и вообще, по заявлениям его разработчиков, способен создавать сайты с широкими возможностями и предоставляет средства управления ими, а также производить в режиме реального времени автоматическую отправку изменений, внесенных веб-дизайнером в исходные тексты.

По сути, FrontPage является чуть ли не типичным приложением Microsoft Office, и интеграция редактора с этой серией является его очевидным преимуществом. Любой пользователь, имеющий опыт работы с такими приложениями как Word, Excel, Access, не будет испытывать особых сложностей в работе с редактором FrontPage — знакомые панели инструментов, наборы мастеров и редакторов, шаблонов, автоматических функций и т. д. Другими словами, FrontPage — прекрасное решение для начинающих пользователей и веб-мастеров.

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

Простота использования — главное качество этого редактора, как, впрочем, и других продуктов серии Microsoft Office. Множество шаблонов и помощников освобождают пользователя от рутинной и сложной работы — допустим, термин “веб-компонент” в FrontPage может подразумевать под собой фотогаллерею, которую можно вставить буквально с помощью двух-трех переходов: Insert > Web Component или Insert > Picture > New Photo Gallery. Пользователь может работать с традиционный интерфейсом, представляющим превью-картинки, которые, в свою очередь являются активными ссылками на изображения в их полном качестве и размере. Есть возможность организации монтажа, слайд-шоу, фотогаллереи с пояснениями к изображениями и т. д. Впрочем, с веб-компонентами вполне может возникнуть сложность — под ними редактор понимает и динамические эффекты, и содержания, указателя, счетчики посещений и т. д., другими словами — сделать выбор не так-то легко и быстро, как могло бы показаться.

Как и Word, позволяющий открывать одновременно несколько файлов, FrontPage позволяет оперировать несколькими страницами, что очень удобно, когда пользователю необходимо отслеживать согласованность информации и переходить от одной страницы к другой. С помощью FrontPage можно скопировать страницу вместе с HTML-кодом и отредактировать ее, что незаменимо в тех случаях, когда веб-мастеру нужно быстро получить информацию с других своих сайтов, или с сайтов других дизайнеров. Правда, при копировании подобной информации желательно соблюдать авторские права и не допускать их нарушений.

Так как FrontPage прекрасно работает с серверами Microsoft, то это дает такие дополнительные возможности, как просмотр статистики посещений ресурса с указанием операционных систем пользователей и URL, с которых был совершен переход на сайт, интеграция с содержимым и веб-технологиями Microsoft.

Считается, что совместимый в первую очередь с серверами Microsoft, редактор FrontPage способен также поддерживать и Unix-сервера. Для этого необходима установка FrontPage Extensions на любом из серверов.

Другими словами, FrontPage довольно простой визуальный редактор, но очень удобен в тех случаях, когда от пользователя не требуется создание уникального дизайна, сложной структуры сайта. С помощью FrontPage любой пользователь, обладающими базовыми знаниями, способен сделать за короткий период времени простейший (хотя и банальный) сайт с гостевой книгой, форумом, обратной связью и HTML-формами. В некоторых случаях этого бывает вполне достаточно. Но стоит понимать, что FrontPage практически не предоставляет пользователю создать с его помощью что-то действительно идеальное, а лишь предлагает воспользоваться своего рода “заготовками”.

Конечно, у FrontPage есть и недостатки — такие, какие могут быть у редактора для “шаблонных сайтов”. Другими словами, именно шаблонность создающихся с его помощью продуктов — и является главной отрицательной стороной этого визуального редактора. К тому же, сам по себе FrontPage зависим от своих же расширений, без установки которых какие-то параметры сайта уже после его запуска могут отображаться некорректно, несмотря на то, что при локальном тестировании все отвечало запросам веб-дизайнера. К тому же, совместимость редактора исключительно с программным обеспечением Microsoft, делает его невозможным для использования пользователями таких операционных систем, как, например, Linux или Mac OS.

В Microsoft Office 2007 FrontPage был сменен на Microsoft Expression Web и SharePoint Designer. Microsoft Expression Web отличается тем, что предоставляет своим пользователям больше свободы, производит чистый, совместимый со стандартами, код, работает с CSS и CSS-макетами. По сути, это не приемник FrontPage, он, скорее, представляет собой конструктор и имеет большее сходство с SharePoint Designer, делая акцент на разработке и адаптации к сайтам, выполненных с помощью последнего. Приемником является SharePoint — хотя и не предлагает ничего революционного и также вызывает недовольство среди веб-мастеров. Среди возможностей — поддержка интерактивных страниц ASP. NET, создание вида данных из RSS, XML, Office XML, сотрудничество со встроенным Workflow Designer, инструменты CSS, отслеживание статистики страниц, проверка орфографии, интеграция с SharePoint Server 2007.

Мастер Йода рекомендует:  Простой эффект боке для текста

И снова про визуальные редакторы

Доброго дня всем!

Прошу помощи сообщества. Обновил сайт до 0.96 (ура, ага, тему переписал, решил застарелую проблему с выравниванием картинок в слайдере . точнее переписал код слайдера, сделал более менее приличный адаптив..). Всё чудесно, если бы не одно «но»: жесть, а не редактор. Что не нравится? У меня исторически там встречается «чуть-чуть» html. Если в старой версии был редактор, толерантный к «такому», то в новой — нет и в помине. Увы. (Нетолерантность проявляется в том, что редактор считает например ссылку в тексте — просто символами, и ее приходится пересоздавать).

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

Вопрос — известен ли уважаемому сообществу либо

а) работающий визуальный редактор, либо

б) невизуальный редактор, поддерживающий html-теги

и все это для версии 0.96

ПС. Со своей стороны тоже планирую неспешно поисследовать вопрос.

Возможно вас вполне устроит и стандартный редактор, если поправить парсер. Сейчас у вас, скорее всего, дефолтный парсер стоит. Он и ломает, обычно, html-вёрстку, которая не заключена в бб-код [html]. Попробуйте для теста выключить в одной из записей парсер и посмотрите что получится с html.

Если дело именно в парсере, то задача сведётся к правке дефолтного парсера для ваших условий, а потом прописывание для всех записей использование этого парсера.

Я не очень разобрался, где отключать парсер. и поэтому решил задачу «в лоб», путем вскрытия и правки исходников. Смысл был в том, что с любым редктором (испровобал все плагины с максхаба) — не работают табы. ну я и сделал, чтобы табов не было

Пришлю Вам патченный файл, в котором нет табов и работает любой визуальный редактор.

Не разобрался, как тут файлы выкладывать.

Выложил в облако: https://cloud.mail.ru/public/A11r/4PiEFFV7J

Суть: заменяете в папке /application/maxsite/admin/plugins/admin_page файл form.php аналогичным из архива. Вместо вкладок появляется длинная страница. Активируется любой редактор (я для себя пока поставил trumbowyg) и спокойно работает.


Илья, а подскажите, если не сложно — где можно отключить парсер? Спасибо!

ПС. Второй файл в архиве — чистый от MaxSite 0.96 (для возможного отката)

Невизуальные HTML-редакторы

Внимание! По редакторам все вопросы/обсуждения, не связанные напрямую с созданием сайтов/написанием кода, только в Программах в соответствующих темах!

Macromedia Dreamweaver (сайт, смотреть , extentions ) — один из лучших редакторов. Имеются возможности: одновременного просмотра кода и дизайна страницы, проверки правильности ссылок по всему сайту, синхронизации локальных и удалённых файлов, подсказки/автодополнение для HTML-тэгов и атрибутов (только в MX-версии), удобные поиск/замена (обработка многострочного текста/кода, замена по рег.выражениям, множество операций с отдельными тэгами/атрибутами и т.д.). На офф.сайте имеется множество как бесплатных, так и коммерческих плагинов (extentions), доступных для скачивания.
обсуждение Macromedia Dreamweaver / FAQ по Macromedia Dreamweaver

RJ TextEd
бесплатный, быстрый, простой и навороченный одновременно

Brackets
Едитор/Editor бесплатный, быстрый и простой одновременно ( Windows, MAC OS & Debian )

AkelPadтекстовый редактор с открытым исходным кодом, созданный, чтобы быть маленьким и быстрым.

SciTE [GPL (free)]— возможность «сворачивания» (folding) частей кода, экспорт файлов с сохранением подсветки кода в HTML, PDF, RTF, возможность подключения библиотеки с подсказками для автодополнения по разным языкам.

Aditor ( смотреть , схемы подсветки кода)— Несмотря на то, что редактор не обновлялся с 1999 года, он остаётся одним из наиболее удобных простых текстовых редакторов. Возможности: замена в т.ч. по рег.выражениям, в т.ч. по всем открытым документам (хоть и нет возможности производить многострочную замену и др. дримвиверных «фич», но замена производится значительно быстрее, чем в Dreamweaver’e), одновременная работа с несколькими документами внутри одного окна прогараммы, автосохранение резервных копий редактируемых файлов, экспорт подсвеченного кода в HTML, перекодирование документов и изменение регистра выделенной части текста и мн. др.

HomeSiteтекстовый HTML-редактор [куплен компанией Macromedia (версии 5+) у компании Allaire (версии 4.5- )]

1st page 2000 [free] (сайт, страница с зеркалами для скачивания)— текстовый редактор, помимо прочих полезностей, включает библиотеку из более чем 450 Javascript‘ов, готовых для вставки на страницу.

VIM [free] (сайт)— «VI IMproved»— редактор на базе Vi: возможность «вытаскивания» меню и использования их как плавающих панелей, схемы подсветки синтаксиса для огромного количества языков, настраиваемый backup для редактируемых файлов и мн. др. Имеются версии для многих платформ, возможность использовать как версию с интерфейсом, так и консольный режим.

EditPlus (сайт, смотреть )— текстовый редактор для HTML, Perl, C++ и др. Имеется возможность создания пользовательских схем подсвечивания кода для любого языка, предпросмотр HTML во встроенном ИЕ, автодополнение кода и т.д.

EditPro (сайт, смотреть )—
Цитата:

. позволяет одновременно редактировать несколько файлов неограниченного размера. Подсветка синтаксиса для HTML, Perl, CSS . Поддерживает проекты, пользовательские инструменты. Неограниченное Undo/Redo, поиск/поиск в файлах/замена, закладки (bookmarks и favorites), история действий, печать, импорт/экспорт HTML и RTF и т.д.

AceHTML Proтекстовый редактор с возможностью предпросмотра во втроенном ИЕ, автодополнение для тэгов и удобная панель для редактирования/вставки атрибутов; поддерживает проекты.

TigerPad (сайт, прочесть read_me) — блокнот, намного более удобный для работы, чем стандартный блокнот Windows.
Знает/правит кодировки/раскладки/теги/мат/RTFM. Примеры DHTML,JS, подсветка/форматирование/мультипоиск/замена/шаблоны. При этом не надо инсталить, размер-

WinVi [free] (сайт)— версия под виндовз известного никсового текстового редактора Vi: нумерация строк, возможность замены по рег. выражениям, тж. есть возможность редактирования в HEX-режиме, но к HTML это уже не имеет никакого отношения , нет подсветки кода.

EmEditor (сайт)— возможность замены по нескольким файлам, в т.ч. и по рег.выражениям.

CoffeeCup (сайт, зеркала для скачивания, смотреть ) —встроенный редактор для создания DHTML-меню (о качестве кода не будем ), имеются готовые шаблоны, скрипты, графика, менеджер сайта, встроенная утилита для нарезки картинок, ФТП-клиент.

HtmlPad FishermanЕщё один очень неплохой русский текстовый HTML-редактор с тонкой настройкой

PSPad editor (ПСПад редактор) — бесплатный текстовый редактор для программистов. Рекомендуется к употреблению людям, которые:
работают одновременно с разными языками программирования;
предпочитают подсвеченный исходный код;
умеют и любят пользоваться клавиатурой;
мечтают о маленьком инструменте с простым управлением и мощными возможностями редактора кода;
подыскивают инструмент для работы с тестом plain text;
хотят пользоваться профессиональным инструментом, не платить денег, и при этом не воровать!

Notepad (win: start>run>notepad или пуск>выполнить>notepad )

Gr >архива ) — Windows 9x/NT/2000/XP, freeware, 742 kb, zip.
Автор
: DeDok
Цитата:

Предназначен для людей, которым не хватает функциональных возможностей стандартного блокнота Windows. Подсветка синтаксиса для более 25 форматов (HTML, ASP, PHP, Perl, Pascal, C++, и др.). Есть возможность предварительного просмотра перед печатью, закладки.

NVU — визуальный (WYSIWYG) HTML редактор. стоит присмотреться.

Frontpageлучший редактор для продвинутых домохозяек

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

KWrite/Kate (сайт)— нумерация строк, подсветка кода

Quanta Plus (сайт)— под KDE,
Цитата:

easyman: » проекты она поддерживает, теги она вставляет, мастера картинок там таблиц, поддержка пхп вроде есть, фейс похож на эдит плюс, но возможностей вроде больше.»

vi, emacs, pico, joe, fte (консоль)

Gradient 1.0 (сайт) — утилита для создания градиентного текста в HTML

* В Нетскейпах/Мозилле имеется встроенный HTML-редактор (WYSIWYG и текстовый)
* Как превратить MSIE 4+ в простейший WYSIWYG-редактор (рецепт)
* HTML Search and Replace (сайт, смотреть )— программа позволяет производить поиск и замену внутри группы HTML-документов.

* Тема по скриптам для редактирования/создания HTML-кода из браузера
* Тема по текстовым редакторам
* Тема по HTML-редакторам в Программах Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 21:18 02-06-2003 | Исправлено: vs6262, 04:45 27-11-2020

QuickeneR

Advanced Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Вот это коллекция!

Вообще-то я в программах уже спрашивал, но может тут больше спецов
Мне нужен WYSIWYG редактор, который бы:
1) создавал чистый код и не портил имеющийся
2) нормально работал на больших файлах (хотя бы 500 кб)


Подходит Mozilla Composer, но он насквозь глючный, и не похоже, чтобы его исправили в обозримом будущем. Может есть еще что-нибудь? Подскажите пожалуйста!

Всего записей: 1388 | Зарегистр. 02-02-2002 | Отправлено: 11:08 07-06-2003
Voodoos

Местный киноман

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Cамый крутой редактор: Блокнот! Советую всем.

———-
«Вместе гуляем, вместе умрем. Плохие Парни навсегда. «
Всего записей: 2224 | Зарегистр. 31-12-2001 | Отправлено: 11:39 07-06-2003
Svarga

Moderator

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору QuickeneR

Цитата:

Мне нужен WYSIWYG редактор, который бы:
1) создавал чистый код и не портил имеющийся

Dreamweaver можно настроить— убрать все indent’ы в настройках, убрать автозамену ошибок и т.д., но даже в этом случае он будет расставлять некоторые тэги, идущие в одну строку, по разным строчкам, напр., если ячейка таблицы в коде имеет вид

Код:

инфа

то при редактировании её в WYSIWYG-режиме, код преобразуется в

Код:

инфа

Отчасти и из-за этого я Dreamweaver как текстовый редактор юзаю

Цитата:

2) нормально работал на больших файлах (хотя бы 500 кб)

Это уже не о висивигах, наверно, речь идёт
С большими файлами они все тормоза ещё те.
Можешь попробовать сделать WYSIWYG из ИЕ (см. в шапке ссылку), может и вытянет нормально большие файлы, хотя не уверен.
Voodoos

Цитата:

Cамый крутой редактор: Блокнот! Советую всем.

«Обоснуй ответ» © анекдот про Вовочку

Цитата:

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

Я как-то файлик на 700К пытался в нём поредактировать— думал, что пошустрее Dreamweaver’a будет— оказалось одно и то же

А вообще, однозначно самые шустрые— Far и VIM, но никакие это не висивиги

———-
away.
Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 12:01 07-06-2003
QuickeneR

Advanced Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Svarga

Цитата:

(хотя бы 500 кб)
Это уже не о висивигах, наверно, речь идёт

Как раз о них. Я пытаюсь использовать html в качестве формата для книг и ищу для этого редактор. Обычным, невизуальным редактором (far+colorer), конечно, тоже пользуюсь, но это не то. Все равно что word со всеми включенными символами. Текста (полезного) почти не видно.
Dreamweaver пробовал — не подходит. Грузится долго, переключение между визуальным и source режимом еще дольше, с большими файлами тормозит по страшному и вываливается.
Ладно, попробую обойтись Мозиллой. Тем более, там по идее где-то исходники есть — может и подправлю что.

Цитата:

Я как-то файлик на 700К пытался в нём поредактировать— думал, что пошустрее Dreamweaver’a будет— оказалось одно и то же

Может быть, там было слишком много html? С почти текстовыми файлами мне работать удается.

Всего записей: 1388 | Зарегистр. 02-02-2002 | Отправлено: 19:36 07-06-2003
easyman

Full Member

Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору вот еще Quanta

https://quanta.sourceforge.net/

Всего записей: 483 | Зарегистр. 25-10-2002 | Отправлено: 22:04 07-06-2003
Svarga

Moderator

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору easyman

Цитата:

вот еще Quanta

описание бы дал небольшое (чего есть, чего нету, чего есть уникального )

Цитата:

(хотя бы 500 кб)
Это уже не о висивигах, наверно, речь идёт

Как раз о них.

да не бывает таких висивигов шустрых, скорость и WYSIWYG, по-моему, малосовместимые понятия

Цитата:

Я пытаюсь использовать html в качестве формата для книг и ищу для этого редактор. Обычным, невизуальным редактором (far+colorer), конечно, тоже пользуюсь.
Текста (полезного) почти не видно.

У фара разукраска какая-то слишком пёстрая— мешает восприятию. Можешь попробовать SciTE или Aditor поюзать— просто настроить подсветку тэгов или атрибутов каким-нибудь светло-серым цветом (чтоб они почти незаметны были)— работаться будет почти как с простым текстом (я когда под 98-й жил в bred’e в таком духе развлекался— вполне нормально).
Ещё. Смотрел это ? Может вполне и такого хватит.

Цитата:

переключение между визуальным и source режимом еще дольше

странно, то ли речь идёт об очень больших файлах, то ли о слабенькой машине У меня тормоза наблюдаются только при какой-нибудь сложной автозамене.

Цитата:

Ладно, попробую обойтись Мозиллой. Тем более, там по идее где-то исходники есть — может и подправлю что.

Если вдруг действительно подправишь и соорудишь что-то, плс поделись— интересно посмотреть что за зверь будет, заодно в местный файловый архив добавим

Кстати, если любитель порасковыривать что-то, можешь попытаться «облегчить» дримвивер— там большая часть интерфейса, плагинов и т.п. написана просто в виде html и js-файлов: можно повыкашивать мусор, который тебе не нужен и все упоминания о нём— по идее должно ему полегчать и с загрузкой и в работе.

Цитата:

Может быть, там было слишком много html? С почти текстовыми файлами мне работать удается.

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

———-
away.
Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 02:13 08-06-2003 | Исправлено: Svarga, 03:09 08-06-2003
Voodoos

Местный киноман

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Svarga

Цитата:

«Обоснуй ответ» © анекдот про Вовочку

Обосновать? Да проще простого! Очень легко и удобно мона его подстроить под себя, легко редактировать и мона быстро посмотреть что у тебя получилось, достаточно сохранить файл в форме html.

———-
«Вместе гуляем, вместе умрем. Плохие Парни навсегда. «
Всего записей: 2224 | Зарегистр. 31-12-2001 | Отправлено: 09:41 08-06-2003
QuickeneR

Advanced Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору easyman
https://quanta.sourceforge.net
Quanta Plus is a web development tool for the K Desktop Environment.
Похоже, это только для линукса?

Цитата:

да не бывает таких висивигов шустрых, скорость и WYSIWYG, по-моему, малосовместимые понятия

MS Word Как он редактирует и сохраняет — отдельный вопрос, но скорость у него нормальная. Теоретически это вполне возможно, дело лишь за реализацией.

Цитата:

это

Видел, но это уж слишком примитивно.

Еще гляну на Dreamweaver (MX ведь последний?). Может я не разобрался тогда или авторы чего пофиксили.

Всего записей: 1388 | Зарегистр. 02-02-2002 | Отправлено: 12:51 08-06-2003
fehler

Silver Member

Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору Достаточно мощный редактор — Web Studio 4.0 .
Включает в себя :
1.Visual Workshop 4 — собственно сам редактор
2. LightPad 4 — Маленький редактор с подсветкой кода .
Есть поддержка русского языка . Также на сайте можно найти ещё немного интересного.

———-
Я бегу с нетонущего корабля, потому что знаю куда он плывет!
Всего записей: 2063 | Зарегистр. 04-02-2003 | Отправлено: 15:42 08-06-2003
DrX


Newbie

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Если че-нить делать, то сначала сделать наброски в Dreamweaver MX (если того требует сложность проекта), а потом всё это править в блокноте.
Всего записей: 25 | Зарегистр. 06-02-2003 | Отправлено: 17:17 08-06-2003
easyman

Full Member

Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Цитата:

описание бы дал небольшое

А я квантой не пользуюсь

Но говорят что эта штука аналогична Дримвайверу, за тем исключением что нет режима визивиг, который впрочем сейчас к кванте приделывают.

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

Цитата:

Похоже, это только для линукса?

так вроде в заголовке темы нигде не сказано — only for win

И не только для Линукса.
во FreeBSD тоже можно использовать

Всего записей: 483 | Зарегистр. 25-10-2002 | Отправлено: 19:20 08-06-2003 | Исправлено: easyman, 20:33 08-06-2003
Svarga

Moderator

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Voodoos

Цитата:

Да проще простого! Очень легко и удобно мона его подстроить под себя, легко редактировать и мона быстро посмотреть что у тебя получилось, достаточно сохранить файл в форме html.

Ну. практически обосновал
Вот только что там подстраивать не пойму— перенос строк и шрифт?
Подсветки кода и нумерации строк в нём нет, в 9х-виндах ограничение на размер открываемого файла (60, вроде, К), в 2k время от времени проглючивает перенос строк при копировании текста из блокнота (лишние строчки появляются в скопированном куске). а так, в принципе, одна из самых полезных прог by M$

Цитата:

MS Word Как он редактирует и сохраняет — отдельный вопрос, но скорость у него нормальная. Теоретически это вполне возможно, дело лишь за реализацией.

Тот же StarOffice, по-моему, побыстрее работает с крупными HTML-файлами, но при сохранении такая же замусоренность кода (файл в 2-3 раза больше, чем должен быть).
Реализация, если тебе Ворд нравится, — простая: вроде как имеются для Ворда макросы, расчищающие его мусорный native HTML.
А вообще, для книг идеально подошёл бы Штирлиц, если б он HTML не только открывать мог, а ещё и сохранял бы в нём, а не только в rtf и txt

Цитата:

Еще гляну на Dreamweaver (MX ведь последний?). Может я не разобрался тогда или авторы чего пофиксили.

Да мало чего там пофиксили— поддержки CSS добавили при отображении документов, автодополнение тэгов/атрибутов и мн. др.— короче с большими файлами и с большим количеством мелких так же медленно и работает как и 4-й.

Цитата:

Если че-нить делать, то сначала сделать наброски в Dreamweaver MX (если того требует сложность проекта), а потом всё это править в блокноте.

Странно, а в самом Dreamweaver’е в режиме редактирования кода то же самое сделать нельзя?

———-
away.
Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 20:51 08-06-2003
Lechii

Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Не совсем согласен с классификацией TopStyle Pro :

Цитата:

На мой взгляд , он также один из самых удобных HTML-редакторов , один только intellisense чего стоит !

Всего записей: 273 | Зарегистр. 26-12-2002 | Отправлено: 22:18 08-06-2003
DrX

Newbie

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Svarga
привычка
Всего записей: 25 | Зарегистр. 06-02-2003 | Отправлено: 22:45 08-06-2003
Svarga

Moderator

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Lechii

Цитата:

Не совсем согласен с классификацией TopStyle Pro

пасиб за замечание!

я его почти сразу же после установки снёс— мне CSS намного проще руками в чём угодно писать , поэтому основательно не расковыривал TopStyle Pro

исправил инфу в шапке

———-
away.
Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 02:26 09-06-2003
bredonosec

Platinum Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Вот еще текстовый редактор. Замена для Виндового блохнета. Очень простой и быстрый.

Цитата:

TigerPad.[free](сайт, читатьread_me)
Блокнот, намного более удобный для работы, чем стандартный блокнот Windows.
Знает/правит кодировки/раскладки/теги/мат/RTFM. Примеры DHTML,JS, подсветка/форматирование/мультипоиск/замена/шаблоны. При этом не надо инсталить, размер-

———-
Вопрос: ‘Что человек курит?’ как правило возникает не когда ты слышишь, как он дышит, а когда видишь, что он пишет
Пропеллер играет роль вентилятора, он останавливается -пилот потеет
Аськи нету.
Всего записей: 15886 | Зарегистр. 13-02-2003 | Отправлено: 06:07 13-08-2003
DeDok

Member

Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Цитата:

Вот еще текстовый редактор. Замена для Виндового блохнета. Очень простой и быстрый.
———-
Сайт художника https://www.gridin.poltava.ua
Сайт программиста https://www.gridinsoft.com
Всего записей: 361 | Зарегистр. 26-06-2002 | Отправлено: 16:40 15-08-2003
WinCHESter

Advanced Member

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору Advanced HTML Editor v.1.0.0
Product: Dreamweaver MX, Dreamweaver MX 2004, UltraDev 4
Type: Server Behavior
Server Model: ASP JavaScript, ASP VBScript, ASP.NET C#, ASP.NET VB, PHP MySQL
— Fully integrated with Dreamweaver
— Works like a Word Processor
— Copy and Paste from MS Word or any Web page
— Fully Customizable Toolbar
— Multiple Skins available
— Full integration with Pure ASP/PHP/ASP.NET Upload extensions for uploading images
— Use the Smart Image Processor to limit image sizes
— Full integrated with the standard Dreamweaver insert/update record behaviors
— Let your users create formatted content without having to know any HTML code.
— Fully XHTML Compatible
——————————
Подробней: https://www.dmxzone.com/ShowDetail.asp?News >

———-
Best regards,
WinCHESter
Всего записей: 641 | Зарегистр. 28-09-2003 | Отправлено: 03:41 30-01-2004
Kraft

Newbie

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору как всегда, слона-то и не приметили

Adobe GoLive — безграничные возможности по созданию сайта, как у Photoshop среди графических редакторов

сам я начинал писать в блокноте, потом HomeSite 4.5 (кстати, вещь хороша тем, что как в Delphi подсказки есть и поиск не в одном файле, а сразу во всех файлах проекта)

Популярные визуальные редакторы HTML

Визуальные редакторы HTML работают по принципу WYSIWYG. Это аббревиатура от слов What You See Is What You Get, что переводится так: «То, что ты видишь, это то, что получишь».

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

WYSIWYG Web Builder


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

Функционал предусматривает добавление кода JavaScript для создания визуальных эффектов. Чтобы посмотреть получившийся результат, пользователю нужно нажать кнопку F5 — страница появится в обозревателе, который используется по умолчанию.

Если вы работаете с деревом страниц, перемещаться по нему можно в специальном менеджере. Программа проверяет работоспособность представленных ссылок, оценивает размеры страниц, составляет карту сайта. HTML-редактор с визуальным просмотром WYSIWYG Web Builder поддерживает внедрение расширений, что позволяет увеличить программные возможности. Чтобы использовать дополнения, программу нужно зарегистрировать.

Web Page Maker

Визуальный редактор HTML и CSS Web Page Maker подходит для того, чтобы создавать полноценные многостраничные сайты. С его помощью интегрируются графические файлы, видео, таблицы, формы отправки файлов, текст и т. д. Как и в предыдущей программе, здесь есть базовые шаблоны для быстрого старта. Программа предусматривает возможность размещения одного элемента на нескольких страницах.

Программное окно поделено на две части. Слева находится панель Site contents, которая предназначается для навигация по страницам сайта. Правая часть — рабочая область, в которой идет работа.

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

CoffeeCup Visual Site Designer

Это платный визуальный редактор HTML. Он поставляется с десятью бесплатными шаблонами, правда, можно приобрести дополнительные — по 9 долларов за шаблон. Рабочее место занимает все окно программы, что очень удобно. Есть разные средства для добавления прозрачности, теней, объема, изменения формы блока при наведении на него курсора мыши.

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

WebSite X5 Evolution 8

Визуальный редактор HTML WebSite X5 Evolution использует немного другие методы создания сайтов. Библиотека программы содержит более сотни вариантов оформления. Создание страницы происходит поэтапно.

  1. Сначала настраиваются основные части сайта. Здесь вводится название, имя автора, язык, ключевые слова, иконки. Выбирается способ отображения меню.
  2. Нужно продумать структуру и создать карту сайта, отметить скрытые ресурсы, указать частоту обновления страницы.
  3. Чтобы отредактировать страницу, по ней нужно щелкнуть мышью. После появления рабочего окна указывается число блоков на странице, вставляются медиафайлы, текст, таблицы и слайд-шоу.
  4. Дополнительные настройки, например флеш, реклама и лента новостей, настраиваются на самом последнем этапе.

После окончания работы сайт заливается на сервер с помощью встроенного FTP-клиента.

KompoZer

HTML-редактор с визуальным просмотром KompoZer — абсолютно бесплатная программа с открытым кодом. Она работает на всех популярных операционных системах (Windows, Mac, Linux), отлично понимает язык JavaScript, поддерживает все современные стандарты. Для расширения базового функционала с официального сайта можно загрузить сторонние модули.

Для работы устанавливается пакет для русификации программы. Редактор способен работать одновременно с несколькими страницами, загрузить сайт на сервер, отредактировать коды буквально на лету. В программе есть встроенная система проверки орфографии. KompoZer предназначена для профессиональных веб-мастеров.

HTML-Online

Это один из популярнейших онлайн-редакторов. Для начала работы необходимо перейти на страницу веб-приложения. Программа поддерживает форматирование текстового документа в HTML-разметку, отлично работает с «Гугл.Докс», PDF, Excel. В отдельных вкладках редактируется CSS, JavaScript. Верстка обновляется в окне браузера при внесении изменений. Одно из преимуществ в том, что HTML-online не нужно устанавливать на компьютер.

Brackets

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

Список популярных расширений для верстальщиков:

  • Emmet — ускоряет написание кода CSS, HTML за счет сокращения основных команд.
  • Beautify форматирует файлы HTML, CSS, Javascript.
  • W3C validation проверяет код на соответствие установленным стандартам.

Это краткое описание популярных визуальных HTML-редакторов. Выберите тот, который вам действительно понравился. Каждый из них имеет свои преимущества и недостатки. Оценить по достоинству эти программы можно только после тестирования функционала самостоятельно.

Программы, которые помогут создать сайт

Эффективность баннеров. Как лучше?

Где взять дешевый контент для сайта

Падает посещаемость в блоге? Ищем причины и способы поднять.

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

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

Встречаются html-редакторы двух видов — невизуальные и визуальные. Невизуальные оказывают помощь в процессе редакции текста , проверки тегов и так далее. Но код в них нужно всё равно печатать самостоятельно. Более удобные визуальные редакторы, которые имеют удобный визуальный режим. В таком режиме можно видеть страничку почти так , как она будет выглядеть в браузере и можно редактировать её не вписыванием кода , а добавлением картинок , таблиц , текста. Для создания страничек в визуальном редакторе , не нужно знать язык html очень хорошо.

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

Рассмотрим несколько известных бесплатных визуальных редакторов на настоящий момент:


Kompozer — это редактор , который подходит как для профессионалов , так и для начинающих. Существуют версии для Linux и Windows.

Amaya является редактором и браузером одновременно. Браузер , одобренный W3C , правильно поддерживает всевозможные стандарты html.

SeaMonkey — является набором программ , предназначенным для работы в сети интернет , которая включает в себя почтовую программу , браузер , редактор страниц IRC-чат . Создателем является известная компания Mozilla.

BlueGriffon -это новая разработка , которая появилась в 2010 году. Ее принято считать преемником наиболее раннего редактора NVU.

Платных визуальных редакторов гораздо больше. Среди них можно выделить следующие: Namo WebEditor , CoffeeCup HTML Editor , Rap >, Web Builder и другие. Но самым популярным является редактор Dreamweave.

Dreamweaver — это визуальный редактор , который многие годы удерживает первое место среди программ для создания сайтов. Изначально он был разработан и продолжительное время развивался под началом компании Macromedia , но позже был куплен компанией Adobe , которая отказалась от развития своего html-редактора из-за Dreamweave. Сейчас этот редактор входит в набор продуктов Adobe Creative Suite , который представляет отличное решение для создания сайтов. Но , его можно использовать и отдельно.

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

Выбирайте качественный хостинг , для своих сайтов!

Каковы преимущества и недостатки ручной верстки сайтов?

Давайте рассмотрим преимущества и недостатки ручной верстки страниц сайта. Подумаем, стоит ли использовать специальные программы и какими они должны быть?

Термины и определения

Для начала «пройдемся» по терминам и определениям:

Верстка — это процесс создания страниц web-сайта по макету дизайна (как правило, PSD-файла) при помощи кода специального языка разметки (HTML, XHTML), так же состоящий из подключенных к ней каскадных таблиц стилей (CSS) и подключаемых дополнительных скриптов (JavaScript и др.) и объектов (Flash-анимация и др.). Язык HTML и стили интерпретируется интернет-браузерами и отображается в виде документа (страницы сайта) в удобной для человека форме.

Визуальный редактор (WYSIWYG-редактор) — редактор с набором инструментов для редактирования текстовой информации, вставки графики и прочих объектов, а также для создания различных документов, в том числе web-страниц.

WYSIWYG (от англ. «What You See Is What You Get» — «что видишь, то и получишь») — свойство прикладных программ или веб-интерфейсов, в которых содержание в процессе редактирования выглядит максимально близко похожим на конечную продукцию, которая может быть печатным документом, интернет-страницей или презентацией.

Ручная верстка — это верстка, код которой набран вручную, т.е. в любом НЕвизуальном редакторе.

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

Визуальные редакторы

К наиболее распространенным визуальным редакторам относятся: Microsoft Office FrontPage, Adobe Dreamweaver. Начиная с версии 2010 набора Microsoft Office, на смену FrontPage пришла оболочка Microsoft SharePoint Workspace. В составе систем управления сайтами очень популярным редактором является TinyMCE (платформонезависимый JavaScript HTML WYSIWYG редактор на основе WEB). Однако TinyMCE, в отличие от Microsoft Office FrontPage или Adobe Dreamweaver, не является полноценным редактором для разработки страниц на HTML. Это лишь надстройка к различным CMS, предназначенная для удобного редактирования контента сайта.

Как правило, визуальные редакторы имеют 3 режима редактирования документов: визуальный редактор, режим редактирования HTML-кода и совмещенный режим (объединяющий в себе предыдущие 2 режима). В дополнение к этому — инструменты для автоматического форматирования стилей создаваемых страниц, возможность применения различных тем оформления.

Именно поэтому многие начинающие (да и «опытные») верстальщики используют визуальные редакторы, т.к. в них легко разобраться и, соответственно, несложно создавать страницы для WEB, либо по созданным в редакторе шаблонам, либо своими усилиями, где знание языка HTML не является основным требованием.

Основной минус при использовании визуальных редакторов — это, как правило, захламленный код, «паразитный» мусор в HTML-коде и отсутствие семантики.

При описании семантики в рамках операционного подхода к языкам программирования обычно исполнение конструкций языка программирования интерпретируется с помощью некоторой воображаемой (абстрактной) ЭВМ и описывает последствия выполнения конструкций языка с помощью языка логики и задания пред- и постусловий. Иными словами, «семантика» — это определенная логика представления и работы языка программирования; в нашем случае — языка HTML.

Все эти минусы можно устранить и отформатировать после визуального редактора html-код вручную, но зачем делать работу дважды и тратить свое драгоценное время на «чистку» кода, когда можно сразу все сделать правильно и красиво. На помощь к нам приходит ручная верстка сайтов!

Ручная верстка сайтов

Как и в любом деле, в ручной верстке сайтов существуют свои преимущества и недостатки. Давайте разберемся.

К преимуществам ручной верстки сайтов следует отнести:

  • Четкое представление исходного кода страницы и сайта — верстальщик совершенно четко понимает ЧТО он делает и КАК;
  • Отсутствие мусора в коде страницы — код получается правильный, легкий и не нагроможденный лишними тегами и символами;
  • Наличие нужных тегов в коде страницы, например «!DOCTYPE» и «meta»;
  • Возможность выбора конструкции верстки — блочная и/или табличная модель;
  • Быстрое усвоение языка разметки — постоянно набираются повторяющиеся элементы разметки и стилей.

К недостаткам ручной верстки относятся:

  • Человеческий фактор — возможны опечатки и ошибки при наборе тегов разметки и их атрибутов;
  • Отсутствие визуального просмотра страницы — при наборе HTML-кода невозможно оценить внешний вид страницы до тех пор, пока она не будет открыта в интернет-браузере;
  • Большие временные затраты на написание кода — все необходимые изменения производятся вручную;
  • Необходимы специализированные знания языков разметки, стилей и скриптов.

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

Профессионалы за работой

Профессиональные верстальщики работают быстро и качественно, с четким пониманием того, ЧТО они делают и КАК. Работу профессионала несложно увидеть по исходному HTML-коду любой страницы сайта. В дополнение ко всему — хороший верстальщик обязательно учитывает необходимость кроссбраузерной верстки (одинаковое отображение сайта в любом интернет-браузере).


Хороший верстальщик, как и программист, умеет логически думать и создавать необходимые конструкции в разметке при решении поставленной перед ним задачи, отлично знает HTML и CSS, использует JavaScript и другие современные технологии интернет-строительства.

Кроме того, существует ряд специальных текстовых редакторов с функциями подсветки синтаксиса, авто-тегами и другими вспомогательными инструментами, благодаря которым процесс создания HTML-страниц значительно упрощается. К таким редакторам относятся: Notepad++, HomeSite, TextMate и другие.

Советы начинающим

Если Вы планируете разработку сайтов собственными силами, конечно же, необходимо тщательное изучение HTML, CSS и прочих специализированных языков программирования. Использовать визуальные редакторы следует только для облегчения работы, но никак не для создания сайтов и страниц целиком.

Все услуги

Битрикс24

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

Визуальные Web–редакторы. Что выбрать новичку для создания сайта

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

Не для кого уже не секрет, что создание функционального, красиво оформленного динамического интернет-сайта сегодня по силам не только профессиональным web-разработчикам, но и начинающим сайтостроителям, лишь поверхностно знакомым с такими сетевыми технологиями, как язык гипертекстовой разметки HTML, каскадные таблицы стилей CSS, не говоря уже о JavaScript, PHP, SQL и других «премудростях».

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

Существует также большое количество бесплатных вариантов. Но сейчас мы их коснёмся лишь слегка, а поговорим в основном о коммерческих WYSIWYG (или визуальных) web-редакторах.

Суть их применения состоит в том, что разработчик, создавая сайт, не пишет код, используя специальные HTML и CSS теги, а просто создаёт таблицы, пишет текст, вставляет в него изображения и видео точно так же, как это делается в обычном текстовом редакторе Word. А web-редактор уже самостоятельно преобразует его усилия в полноценный код страниц.

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

Новичкам же для написания простых статических сайтов визуальные web-редакторы подойдут как нельзя лучше. Если же есть необходимость в создании сложного динамического сайта или блога, то в этом случае правильнее всего будет использовать одну из CMS — систем управления сайтом, будь то DLE, Joomla!, WordPress и некоторые другие. От вас в этом случае не требуется написания ни HTML и CSS кода, ни создания скриптов на PHP. Единственное, что необходимо — подобрать понравившийся шаблон — лицо, или обёртку сайта — и отредактировать его под свои нужды. И в этом случае вам также окажет неоценимую помощь визуальный web-редактор.

Какой же редактор выбрать? Одно из возможных решений — WYSIWYG Web Builder. Это очень простой в использовании инструмент, генерация кода в котором происходит полностью автоматически. В составе WYSIWYG Web Builder имеется больше сотни готовых шаблонов, которые могут послужить каркасом для вашего сайта. Кроме того, имеются многочисленные примеры JavaScript кодов, которые позволяют вносить в сайт такие динамические элементы, как часы, возможность одним кликом добавлять страницы сайта в закладки, отключение контекстного меню при щелчке правой кнопкой мыши и т.д. Кроме того, существует большое количество дополнений, которые могут как вносить новые элементы в создаваемый сайт, так и расширять функциональность самого web-редактора.

Другой популярный WYSIWYG редактор — это Web Page Maker. Кроме готовых шаблонов, он позволяет разработчику выбрать вид и стиль меню навигации для создаваемого сайта. Кроме того, если вам понравился дизайн какого-либо уже существующего в Сети сайта, и вы хотите взять его за основу при создании своего ресурса, то вы легко сможете импортировать web-страницу при помощи специальной функции импорта Web Page Maker. Следует отметить, что в данном редакторе также присутствуют примеры кода JavaScript.

Также для новичков подойдёт визуальный редактор WebSite X5 Evolution. В нем реализован принцип пошаговой разработки сайта. Для начинающих он подходит как никакой другой, так как, следуя рекомендациям пошагового мастера, вы не сможете пропустить какого-либо важного этапа, необходимого при разработке сайта. Здесь нет дополнительных примеров JavaScript, зато имеются дополнения, позволяющие настроить вид меню сайта, добавить RSS-ленту новостей, задать параметры форматирования текста и многие другие.

Ну и конечно, было бы неправильным не уделить внимания самому на сегодняшний день популярному и самому мощному коммерческому средству разработки сайтов — Adobe Dreamweaver. Этот продукт стал своего рода эталоном для всех визуальных web-редакторов. При этом необходимо отметить, что Dreamweaver одинаково хорош в роли как визуального, так и сложного текстового HTML-редактора, благодаря широким возможностям настройки под запросы конкретного пользователя, многочисленным информативным подсказкам по коду, мощным библиотекам и гибкой работе с сайтами как на локальном, так и на удалённом серверах. Такие широкие возможности и высокая стоимость программы делают её незаменимым инструментом, скорее, в руках профессионала, нежели начинающего web — мастера. Хотя, стОит признать, что нет такой задачи в вебмастеринге, которая была бы ему не по силам (ну, разве что обработка графики для сайтов — для этого у Dreamweaver есть «брат» — Adobe Fireworks, с которым он прекрасно работает в связке).

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

Редакторы эти обладают достаточно большим набором средств, умеют работать как в WYSIWYG, так и в режиме кода. Причём делают это достаточно корректно, не загромождая страницу ненужными тегами. Естественно, они не могут всерьёз соперничать с такими коммерческими «монстрами» как Dreamweaver, и не обладают такой большой встроенной библиотекой готовых скриптов и различных элементов веб-страниц. Но со своими задачами справляются превосходно. А если пользователь возьмёт на себя труд хотя бы поверхностно ознакомиться с основами сайтостроения, структурой страниц и HTML, то NVU или Kompozer могут в его руках стать мощным инструментом, способным с одинаковой лёгкостью как править уже готовые страницы, так и создавать их с нуля.

Кроме того, что эти редакторы весьма бережно относятся к коду, соблюдая все веб-стандарты и выдавая в итоге довольно чистый «продукт», они ещё имеют и приятный «бонус» в виде кроссплатформенности — то есть у них имеются версии как под Windows и Linux, так и под MacOS X.

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

Невизуальные HTML-редакторы

1) Текстовые редакторы для работы с “чистым” HTML-кодом. Поскольку HTML-документ представляет собой текстовый файл, его можно подготовить в простейшем текстовом редакторе, например, в блокноте (notepad), но при этом все команды разметки придется вводить вручную.

2) Программные средства, которые имеют специальные встроенные компоненты для конвертирования данных, созданных в этих продуктах, в HTML формат. Например, программы широко используемого пакета MS Office, начиная с версии 97, позволяет сохранить документ в формате HTML. При этом сохраняются, насколько это возможно, особенности форматирования символов и абзацев, изображения, таблицы, списки и так далее. Многие современные графические редакторы предоставляют возможность сохранить коллекцию картинок в виде HTML-документа. Надо отметить, что при таком конвертировании исходный текст HTML-документа получается крайне избыточным и нуждается в коррекции.

3) Специализированные программные средства — web-редакторы , предназначенные специально для разработки web-сайтов. Современные требования, предъявляемые к web-редакторам, включают в себя:

  • Поддержку каскадных таблиц стилей.
  • Использование современных скриптовых языков, таких как JavaScript и т.д.
  • Генерацию Dynamic HTML для различных браузеров.
  • Средства наглядного дизайна: вставка изображений, таблиц и фреймов.
  • Динамическое отображение создаваемой страницы в браузере.
  • Шаблоны WWW-страниц или специальные программы — «мастера» по их созданию.
  • Средства по управлению web-сайтом (создание файловой структуры сайта, отслеживание связей и проверка ссылок между страницами, публикация сайта в Интернет).

Существуют две разновидности web-редакторов: визуальные и невизуальные.

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

Визуальные редакторы позволяют работать с самой web-страницей «как она есть», в режиме WYSIWYG (What You See Is What You Get — То, что ты видишь, то и получаешь). Редактирование и форматирование текстов, вставка рисунков, таблиц, гиперссылок и других элементов происходит как в обычном текстовом редакторе, а сама программа формирует (генерирует) соответствующий HTML-код. Кроме средств визуального редактирования эти web-редакторы одновременно предоставляют доступ к получившемуся HTML-коду. Визуальные редакторы — отличная стартовая площадка для начинающих web-дизайнеров, плохо знакомых с HTML. Но и опытные дизайнеры часто пользуются визуальными редакторами, чтобы быстро «сверстать» web-страничку, а потом довести ее до ума вручную.

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

1) Свободно распространяемые (бесплатные). В основном это невизуальные html-редакторы, разработанные небольшой группой авторов. Визуальные редакторы этой группы имеют ограниченный набор средств визуального редактирования. Характеризуются небольшим объемом занимаемой памяти, а некоторые из них даже не требуют специальной установки.

2) Условно-бесплатные. Web-редакторы этой группы характеризуются невысокой ценой – от 300 рублей.

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

В Интернет существуют специальные каталоги программных средств (https://soft.mail.ru/subcat_list.php?cat=22, https://www.softlinks.ru/files/s23p1.php), с помощью которых можно ознакомится с имеющимися в настоящее время web-редакторами и выбрать нужный.

Далее в методических рекомендациях будут рассмотрены невизуальные и визуальные web-редакторы из бесплатной и платной групп.

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