Основы веб-конструирования §28. Представление о веб-конструировании

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

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

Было бы неправильным рекомендовать вам некоторые "лучшие" редакторы, потому что выбор всегда зависит от ваших нужд, основных целей, навыков и опыта. Поэтому в этой статье мы попытались дать вам обзор разных, полезных и не очень WYSIWYG-редакторов.
Надеемся, Вы найдете новые редакторы о которых вы никогда не слышали раньше. Или, может быть, вы найдете некоторые функции, которые вы пропустили в Вашем любимом редакторе, или рискнете поэкспериментировать с рядом перспективных вариантов для улучшения вашего рабочего процесса. Кроме этого, вы можете узнать, какие редакторы можно использовать и какие инструменты вам не следует использовать.

Что же означает WYSIWYG ?
В таких редакторах можно изменять не исходный код ваших документов, а его представление, которое (по-возможности) будет опубликовано в итоговом документе. Таким образом, вместо написания блоков кода вручную, вы управляете проектированием при помощи компонентов, используя окно редактора. Это означает, что Вы видите что-то очень похожее на конечный результат, хотя документ или изображение еще только создается.
Примечание : эта статья содержит рецензии только desktop-ориентированные WYSIWYG-редакторы, которые работают под Windows, Linux или Mac. Она не дает обзор WYSIWIG-редакторов на JavaScript, но вы можете найти обширный обзор таких редакторов на или .

Adobe Dreamweaver

Dreamweaver (Win / Mac)

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

Dreamweaver также предоставляет различные полезные инструменты, такие как, библиотеки фрагментов кода, ftp управление, сервер отладки и комплексного кодирования. Например, Вы можете просматривать CSS информацию в единой, унифицированной CSS панели, что позволяет легко увидеть стили применительно к конкретным элементам, определить, где атрибуты определяются и редактировать существующие стили. Смотрите также наш список обучающих материалов по Dreamweaver . Цена: $ 400 (версия CS3).

Некоторые из многочисленных возможностей Dreamweaver:
* Расширенное CSS редактирование
* Integrated coding environment
* Spry framework для Ajax
* Проверка совместимости браузеров.
* Интеграция с Photoshop CS3 и Fireworks.
* Code snippets (например, CSS форматов)
* Управление FTP
* Поддержка XML
* Поддержка FLV
* Обучающие ресурсы (например, Adobe CSS Advisor)
* Многочисленные расширения для Dreamweaver.
Amaya
Amaya (Win / Mac / Linux)
Что действительно делает Амайя непохожей на остальных, то что это гибрид веб-браузера и редактора веб-страниц, таким образом, Вы можете просмотреть страницы в Интернете и редактировать Ваши страницы в одном и том же приложении. Созданный WWW-консорциомом, этот инструмент позволяет управлять веб-сайтами, изменять и обновлять их содержание, добавить новые изображения и ссылки. Конечно, если Амайя сможет отображать эти страницы.

Последняя версия редактора, Амайя 10 , была выпущена в феврале 2008 года. Он способен работать с нескольких документах одномременно ((X)HTML, MathML(. Mml) и SVG (. Svg) документы, могут быть отображаться и редактироваться одновременно). Например Вы можете вставить математические формулы, с помощью pop-up: Амайя преобразует их через Math-ML "на лету".

Амайя также включает в себя объединенное приложение аннотаций (аннотации, внешние комментарии, примечания, замечания, которые могут быть прикреплены к любому веб-документу или отдельной части документа) и он поддерживает SVG, RDF и XPointer. Open-source.

Rapidweaver
RapidWeaver (Mac)
RapidWeaver является мощным, основанным на шаблонах, инструментом для создания веб-сайтов, который может генерировать страницы разного рода, такие как, например, текстовые страницы, блоги, контактные формы, графические галереи и Flash слайд-шоу, а также имеет встроенный в FTP-менеджер и интеграция с iPhoto и.Mac.

Редактор включает в себя подкастинг, встроенные комментарии, RSS-ленты, permalink и поддержку тегов. RapidWeaver также будет SEO-дружелюбен. Он также имеет много мощных функций, таких как модифицирование тем, php-рендеринг, mix and match WYSIWYG and HTML, smart publishing, XHTML and CSS based site output, просмотр исходного кода, встроенная проверка ошибок. Все шаблоны основаны на XHTML и CSS. Что является замечательным так это то, что RapidWeaver генерирует код валидный. Цена: $ 49.

Adobe Contribute
Adobe Contribute

Основная цель Adobe Contribute, является возможность редактирования веб-сайтов и блоги для пользователей не имеющих каких-либо технических знаний. Contribute CS3 позволяет авторам обновить существующие сайты и блоги, сохраняя целостность сайта. Contribute предлагает интеграцию с Dreamweaver, дает возможность размещения материалов с Microsoft Office и редактирования из IE 7 и Firefox.

С этим WYSIWYG-редактором, авторы могут изменять или обновлять любой веб-сайт или блог без необходимости изучать HTML. Цена: $ 169 (версия CS3).

Adobe Golive
Adobe Golive (Win / Mac)

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

Некоторые Adobe GoLive 9 возможности:
* Designer styles
* Visual CSS layout
* Place command
* Adobe InDesign® integration
* Color management
* Platform support
* Site management tools
* Publish Server
* Smart Objects

Microsoft Expression Web
Microsoft Expression (Win)

В свое время подвергшийся резкой критике за его действительно плохой веб-редактор (Frontpage), Microsoft недавно создал редактор, Expression, который кажется, наследовал многое из его предшественников. Expression попытался создать комфортную обстановку для интернет-пользователей, с чертами, которые являются чрезвычайно похожими на Adobe Dreamweaver. Однако, при прямом сравнении Dreamweaver предлагает больше и производит более чистой код. Тем не менее, Expression производит достойный, совместимый со стандартами код и знает, как работать с CSS и CSS-макетами.

Studio edition с прочими программными приложениями (graphic design tool, video encoding tool т.д.) стоит прим. $500. Одна лицензия Expression стоит $350. Вы можете получить Expression, обновив Frontpage и тем самым сэкономив деньги. Trial-версию на 60 дней можно загрузить бесплатно, однако требуется регистрация.

Обратите внимание: Expression не преемник Frontpage, это довольно разные инструменты разработки. Microsoft Expression имеет большее сходство с Microsoft SharePoint Designer, это скорее конструктор ориентированный и направленный на обеспечение общей веб-разработки. Microsoft SharePoint Designer делает акцент на разработке и адаптации к SharePoint-based сайтах, его можно рассматривать как старшего брата Frontpage.

Некоторые Microsoft Expression возможности:
* ASP.NET 2.0 Integration
* Advanced CSS rendering
* XPath Expression Builder
* Build and format views of industry-standard XML data
* Tag Property Grid
* Accessibility Checking
* Real-time Standards Validation
* Full Schema Support

NVU (Win / Mac / Linux)

Этот редактор должен стать реальной альтернативой доминирующим продуктам: WYSYWIG-редактор для Linux, Microsoft Windows и Mac, мог бы соперничать с FrontPage и Dreamweaver. А в некоторых аспектах Nvu действительно предоставляет больше возможностей, чем можно было ожидать от абсолютно бесплатного программного обеспечения.

Nvu (произносится как N-view, от "new-view - новый взгляд") предлагает интегрированный FTP-менеджер, мощную поддержку для форм, таблиц и шаблонов, и он действительно очень прост в использовании. CaScadeS, хорошо известный редактор CSS, как дополнительный модуль интегрируется в Nvu и позволяет легко создавать и управлять стилями и видеть как применяются Ваши стили "на лету" в документе Вы изменяете.

Nvu является open source и выпускалась под Mozilla Public License (MPL). К сожалению, развитие NVU не продолжается в последние лет. Усовершенствованную версию NVU можно взять тут - KompoZer .

Некоторые из возможностей NVU:
* Сайт-манаджер позволяет просматривать сайты, которые вы создаете.
* Поддержка XML.
* Встроенный валидатор.

Kompozer
KompoZer (Win / Mac / Linux)

Этот инструмент является ответвлением от NVU, которая была разработана после того дальнейшее развитие NVU замедлилось. KompoZer является веб-авторской системой, которая сочетает в себе менеджер для веб-файлов и WYSIWYG-редактор.

KompoZer чрезвычайно прост в использовании, что делает его подходящим решением для пользователей, которые хотят создавать сайты без получения технических знаний. По сравнению с NVU, Kompozer производит чистый код разметки.

Последняя версия была выпущена в августе 2007 года. Kompozer может рассматриваться в качестве альтернативы для небольших проектов и для пользователей, без технических знаний. Но она, безусловно, слишком слаба для профессиональных веб-разработчиков.

Namo WebEditor 2006
Namo WebEditor 2006 (Win)
Namo WebEditor сочетает в себе практически все инструменты, необходимые для создания веб-сайтов в простой и интуитивно понятный интерфейс. Элементы интерфейса являются чрезвычайно понятными, простыми и удобными в использовании. Вы можете переключаться между дизайн-редактором, HTML-браузером и просмотром фотографий. Вы можете также использовать ряд мастеров, чтобы автоматизировать рабочий процесс. Namo является мощным, однако его WYSIWYG-возможности ограничены. Редактор не обновлялся с 2006 года в связи с чем генерирование исходного кода иногда чрезвычайно странно. Веб-редактор Namo Pro поставляется с Flash-редактором, а также с графическими программами. Тест-версия доступна. Цена: $ 99,95.

Некоторые из Namo Webeditor возможностей:
* Code Helpers для авто закрытия тегов
* Quick Tag Editor
* Tag Selector
* HTML/CSS Reference

Evrsoft First Page 2006
Evrsoft First Page 2006 (Win)
На самом деле этот редактор очень недооценивается. Он не очень популярный и он не обновлялся с 2006 года, но у него есть много весьма полезных функций, которые можно было бы включить в современные WYSIWYG-редакторы. Например, функция Auto History - история помнит все атрибуты и значения, которые использовались и предлагает " правильное" значение автоматически.

Dual Preview Engine позволяет Вам просматривать веб-документы в нескольких браузерах с помощью First Page 2006. Вы можете просмотреть вашу работу в Internet Explorer, Mozilla или просматривать страницы в обоих браузерах бок о бок (горизонтальные / вертикальные панели). И в режиме реального времени просматривать код и редактировать документы.

First Page является бесплатной. Аналогичная бесплатная альтернатива (тоже не обновлялась с 2005): Selida HTML Editor.

Некоторые из возможностей First Page:
* CSS Class Support & Auto Detection
* Syntax Highlighting
* Tag Document Selection Tool
* Tag Auto Completion
* Tidy HTML Power Tools
* Preview in IE as you type
* Image Mapper
* CSS Style Sheet Designer
* Server Side Includes Support
* Highly customizable Toolbars and Interface
* FTP client
* Advanced Find & Replace In Files

Microsoft SharePoint Designer
Microsoft SharePoint Designer 2007 (Win)

Это преемник Microsofts Frontpage. SharePoint Designer является стандартом WYSIWYG-редактора. Помимо поддержки интерактивных страниц ASP.NET, он не предлогает что-то революционное. Бесплатные trial-версия доступна. Существует online-версия, которая требует Internet Explorer и большого терпения.

Некоторые из возможностей Sharepoint:
* support for interactive ASP.NET pages
* create Data Views from RSS, XMl, Office XML
* collaborate with the built-in Workflow Designer
* CSS tools
* track customized pages
* spelling checker
* SharePoint Server 2007 integration

NetObjects Fusion
NetObjects Fusion
Этот редактор когда-то был, вероятно, худшим, но тем не менее очень популярным WYSIWYG-редактором. Он генерировал ужасный исходный код (только MS Word делал это хуже), но часто использовался у веб-хостинговых компаний и провайдеров. NetObjects Fusion позволяет создавать веб-сайты без каких-либо технических знаний. Особенно, если вы хотите создать визитную карточку, Вы можете сделать это в считанные минуты. Но если вы хотите создать профессиональный веб-сайт, NetObjects это не вариант который заслуживает рассмотрения.

В настоящее время доступена 10 версия NetObjects Fusion. Качество генерируемого исходного кода, возможно, изменилось, однако это не имеет большого значения. Существует trial-версия, которая требует от вас зарегистрироваться в магазине. Вот почему у нас нет screenshot-a этого продукта. Цена: ? 100.

Quanta Plus

Quanta Plus (Linux)
Quanta Plus является стабильным, имеет очень удобные и богатые функции среды веб-разработки. Quanta создал редактор предназначеный для эффективной и естесственной разработке и с максимальной для пользователя расширяемостью.

Редактор поддерживает как handcoding, так и WYSIWYG-интерфейс. Он имеет следующие возможности: авто завершение тегов по мере ввода и редактирования тегов в рамках диалогового интерфейса, управление проектами, возможность выполнять от отлаживать PHP-код. Он также имеет визуальный редактор CSS, автодополнение для CSS, предлагает высокую расширяемость и предварительный просмотр.

Редактор также интересные особенности для управления проектами, включая поддержку для локального и удаленного (через сеть) проектов. Проекты могут быть загружены с различных серверов с использованием различных протоколов. CVS поддержка включена, поддержка Subversion возможна за счет внешних подключаемых модулей. Quanta базируется на KDE. Выпускается в соответствии с GPL-лицензией.

Freeway
Freeway (Mac)

Freeway (первоначально Uniqorn) поставляется в двух вариантах, Freeway Pro и Freeway Express. Freeway 5 Pro может быть использована для создания CSS макетов с использованием абсолютного позиционирования. В расширенным варианте, например, подключение к базе данных MySQL, используя скриптовый язык, такой как PHP, производится с помощью подключаемых модулей называемый "Actions". Некоторые Actions могут быть загружены бесплатно на нескольких веб-сайтах, но есть и коммерческие, такие как 3rd Party Actions.

Существует trial-версия, которая требует от вас заполнить довольно долгую веб-форму. Freeway был номинирован на Macworld 2008 Awards в номинации Creative Web Product года. Если вы используете Mac, то Freeway вместе с RapidWeaver является с первым вариантом, который заслуживает рассмотрения.

Некоторые из возможностей Freeway:
* Multiple Master Pages
* Layout Tools
* Link Map
* Link Styles
* Integrated .Mac upload
* Internet Explorer Compatibility
* Support for Sliced Background Images
* Built-in preview within Freeway (Safari/Webkit)
* Full EPS (Panther & later), Illustrator, Photoshop layered file import
* Freeway Shop
* Work with Blogger Templates

Seamonkey Composer
SeaMonkey Composer (Win / Mac / Linux)
Этот редактор является простой, но очень мощной альтернативой, крупных коммерческих приложений. Будучи наследником Netscape Composer, SeaMonkey Composer в действительности не имеют ничего общего с ним.

Редактор является мощным и одновременно простым и предлагает динамичные изображения и table resizing, быструю вставку и удаление из ячеек таблицы, расширеную CSS-поддержку, и поддержку позиционированных слоев. WYSIWYG-редактор встроен в SeaMonkey.

Create
Create (Mac)
Create сочетает в себе основные функции приложений таких как Illustrator, InDesign, Pages, GoLive, Canvas, Dreamweaver, QuarkExpress, и упорядочил их для удобного использования, он недорогой, предназначен для OS X. Среди прочего, вы можете добавить ссылки на текст и графику с помощью drag-n-drop, имееется инструмент который автоматически создает навигацию и индекс, и вы можете создавать PDF и веб-сайты из одного документа.

WYSIWYG Web Builder
WYSIWYG Web Builder
Web Builder является высоко настраиваемым и расширяемым приложением с множеством функций, скриптов и шаблонов. Новые элементы дизайна могут быть добавлены с помощью drag"n"drop, имеется множество скриптов. Возможно редактирования изображений в рамках программного обеспечения.

PayPal eCommerce Tools интегрирован; имеется RSS Feed объект, блог с встроенным RSS и SiteMap генератор совместимый с Google. Редактор также имеет множество расширений, таких как защита паролем, RSS канал, RSS парсер, фотоальбом и lightboxes.

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

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

Попадание в десяточку

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

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

(https://notepad-plus-plus.org/)

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

PSPad (http://www.pspad.com/)

Также как и предыдущая программа, PSPad – это инструмент общего назначения, который подсвечивает css и html текст, автоматически сохраняет изменения после завершения программы, проверяет правильность написанного кода, позволяет включить режим предпросмотра разрабатываемых страниц в . Данный визуальный редактор содержит в себе больше полезных функций, чем Notepad++, однако он все еще относится к простым средствам разработки.

KompoZer (http://www.kompozer.net/)

Программный продукт относится к WYSIWYG-редакторам, что означает «что ты видишь, то ты и получишь». KompoZer входит в список лидеров среди визуальных редакторов и неспроста. Он позволяет разработчикам и дизайнерам работать вместе, так как наделен 3-мя режимами работы. Начнем с моего любимого – режима кода.

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

Komodo Edit (http://www.activestate.com/komodo_edit/)

Мощный инструмент с доступным исходным кодом. В основе его создания лежит коммерческая среда разработки Komodo IDE, поэтому продукт наделен множеством дополнительных плюшек: контекстное автоматическое заполнение и закрытие тегов, генерация случайного текста для заполнения полей, предварительный просмотр стилевой разметки, встроенные регулярные выражения и многое друге.

Ко всему этому хочу добавить, что возможности программы можно значительно расширить при помощи специальных утилит!

jEdit (http://www.jedit.org/)

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

Однако лично для меня камнем преткновения на пути к этому редактору стал его неаккуратный и неудобный интерфейс.

Aptana Studio (http://www.aptana.com/)

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

Fraise (https://www.assembla.com/home)

Это текстовый редактор, который подходит для создания веб-ресурсов, к сожалению, только под платформу Mac OS X 10.6. Программа поддерживает цветную подсветку текста различных языков, обеспечивает предпросмотр созданных страниц, оснащена специальными командами для ускорения набора кода и проверки синтаксиса, позволяет пользоваться регулярными выражениями, а также автоматически дописывает вводимые свойства.

Gedit (http://projects.gnome.org/gedit/)

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

Автозавершение парных элементов;
Генерация временного текста;
Проверка синтаксиса кода;
Предпросмотр в любом браузере.

Vim (http://www.vim.org/)

Тяжелый в освоении консольный редактор, обладающий множеством плюсов для программистов. Оснащен 3-мя режимами работы.

ICEcoder (https://icecoder.net/downloads)

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

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

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

С уважением, Роман Чуешов

Не для кого уже не секрет, что создание функционального, красиво оформленного динамического интернет-сайта сегодня по силам не только профессиональным 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 имеется больше сотни готовых шаблонов, которые могут послужить каркасом для вашего сайта. Кроме того, имеются многочисленные примеры JavaScript кодов, которые позволяют вносить в сайт такие динамические элементы, как часы, возможность одним кликом добавлять страницы сайта в закладки, отключение контекстного меню при щелчке правой кнопкой мыши и т.д. Кроме того, существует большое количество дополнений, которые могут как вносить новые элементы в создаваемый сайт, так и расширять функциональность самого web-редактора.

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

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

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

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

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

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

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

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

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

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

Программы для верстки

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

Evrsoft First Page;
Amaya;
WYSIWYG Web Builder;
Web Page Maker;
CoffeeCup Visual Site Designer;
WebSite X5 Evolution;
KompoZer;
BestAddress HTML Editor.

Покопавшись в Интернете, вы пополните этот список, наверное, еще парой десятков названий.

Рассмотрев характеристики, возможности, достоинства и недостатки WYSIWYG редакторов, достаточно просто понять, что все они содержат профессиональные средства разработки, необходимые для создания веб-страниц. И, в принципе, если не заниматься перфекционизмом, для успешной работы достаточно использования любого современного визуального редактора. Но если говорить о постоянной профессиональной работе, то по-настоящему конкурентных программ, все же, не так много. Рассмотрим на наш взгляд лучшие из них: Microsoft Expression Web и Adobe Dreamweaver в качестве платных, и NVU и KompoZer – как бесплатные альтернативы.

Adobe Dreamweaver

Dreamweaver обладает всеми необходимыми средствами для генерации страниц HTML любой сложности и масштаба в визуальном режиме.

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

Основные возможности программы:

полная поддержка формата CSS, с функцией проверки его совместимости с различными браузерами;
функциональный редактор кода веб-страниц;
возможность работать с такими технологиями, как: XML, JavaScript, PHP, Adobe ColdFusion, ASP и ASP.NET;
среда для разработки Ajax-приложений, которые могут выполнять самые разные функции (получение информации из RSS каналов и баз данных, создание визуальных эффектов и многое другое);
возможность создания сайтов на основе тегов DIV;
тесная интеграция с другими программами Adobe, например, с программой Adobe Device Central, которая поможет создать и протестировать работу веб-сайта для мобильных устройств;
многие другие нововведения и улучшения.

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

Упрощение ключевых моментов процесса разработки и верстки – одна из главных особенностей редактора. Прямая работа с кодами сведена к разумному минимуму. Сам код получается достаточно легким для понимания и использования, а визуальные средства, интегрированные в Dreamweaver , позволяют упростить создание различных визуальных эффектов всего до нескольких кликов мышкой.

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

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

Dreamweaver автоматически находит ошибочный код в ведущих браузерах и подскажет причину и решение потенциальной проблемы. Он проверяет код по XHTML- и CSS-стандартам. В этом плане просто необходимо вспомнить про плагин Zen Coding под Dreamweaver от которого в восторге все, кто занимается версткой.

Также, редактор дает возможность получить решение CSS-проблем при помощи специального ресурса Adobe – CSS Advisor: сообщества разработчиков и дизайнеров. Редактор кода Dreamweaver – это хороший инструмент, позволяющий автоматизировать нахождение и решение множества наиболее популярных CSS-ошибок, что позволяет вести кроссбраузерную разработку.

Другое преимущество - интеграция с Adobe Photoshop. Используя Dreamweaver и Photoshop можно непосредственно копировать и вставлять изображения в Dreamweaver . Просто надо выбрать тип компрессии и файл, а также место вставки в документ.

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

Отдельно надо отметить встроенную поддержку популярных CMS: Joomla, Drupal и WordPress. Для тех, кто работает в этих системах, возможность создавать шаблоны с адаптацией под требования используемой CMS – это очень удобно.

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

В свете последних тенденций использования сетевых сервисов для решения индивидуальных задач компания Adobe предоставляет пользователям своих продуктов доступ к своим сетевым службам: интеграции с Adobe BrowserLab, новой онлайн-службой Adobe CS Live. Сервис Adobe BrowserLab дает возможность веб-дизайнерам быстро протестировать свои сайты на работоспособность в разных браузерах и в разных операционных системах.

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

В качестве недостатка надо отметить то, что программа довольно требовательна к ресурсам компьютера.

Microsoft Expression Web

Microsoft Expression Web обладает несомненно большими достоинствами, чем любой бесплатный продукт. В паре с SuperPreview этот редактор дает необходимые инструменты для работы над созданием сайта: PHP, HTML/XHTML, CSS, JavaScript, ASP.NET, ASP.NET AJAX, Silverlight, Flash, Windows Media и Photoshop, а также интеграцию с Microsoft Visual Studio. Он обеспечивает визуальную диагностику проблем верстки, возможность кроссбраузерной верстки, возможность отладки кода при сложных разработках, CSS дизайн. Поставляется он в составе пакета Microsoft Expression Studio Web Professional , который позволяет еще и обрабатывать графику и видео.

В можно добавлять свои собственные компоненты – меню, панели инструментов, кнопки и даже диалоговые окна, используя только HTML, CSS, javascript и XML. Встроенные инструменты SEO-аналитики позволяют веб-мастеру не только провести проверку повторяющихся или недостающих заголовков и мета-тегов, но также проверить содержимое на "чувствительность" к поиску, чтобы убедиться в том, что компоненты страницы не содержат общеприменимых значений.

Проектировщики Expression попытались создать комфортную обстановку для интернет-пользователей с чертами, которые являются чрезвычайно похожими на Adobe Dreamweaver . Этот редактор от Microsoft производит достойный, совместимый со стандартами код и знает, как работать с CSS и CSS-макетами.

Expression - не преемник прежнего редактора Frontpage - это довольно разные инструменты разработки. Microsoft Expression – скорее, конструктор ориентированный и направленный на обеспечение общей веб-разработки.

Надо отметить, что Microsoft Expression Web не поставляется сам по себе, а только в пакете. Профессиональный пакет Web Studio 4 содержит полный набор профессиональных инструментов для проектирования и разработки при создании современных веб-узлов, для потокового видео и веб-графики. Это включает в себя три профессиональных приложения, которые работают совместно: Expression Web, Expression Encoder и Expression Design .

Expression Encoder позволяет кодировать широкий спектр видео форматов и использовать их в веб-проектах. Expression Design упрощает рабочий процесс с помощью инструментов рисования.

Основные возможности Microsoft Expression :

Полный набор профессиональных инструментов для проектирования и разработки при создании современных веб-узлов, для потокового видео и веб-графики.
Широкая поддержка стандартов сети.
Создание профессиональной графики для вашего сайта.
Кодировка видео Silverlight для потоковой передачи Web.
Широкая поддержка современных технологий: PHP, HTML/XHTML, XML/XSLT, CSS, JavaScript, ASP.NET или ASP.NET AJAX, Silverlight, Flash, Windows Media, Photoshop, а также интеграцию с Microsoft Visual Studio и Expression Studio.
Создание интерактивных динамических сайтов, с размещением на них видео, аудио или анимации.
Визуальная кроссбраузерная диагностика. SuperPreview поддерживает Internet Explorer, Firefox, Macintosh, Сафари.
Инструменты SEO аналитики помогут сделать информационное наполнение сайта более дружественным для поискового механизма.
Импортирование файлов Photoshop.

NVU и KompoZer

Особенность редактора NVU состоит в его кроссплатформенности: есть версии под Linux, Microsoft Windows и Mac. Он вполне достойно соперничал с FrontPage и Dreamweaver , а в некоторых аспектах Nvu действительно предоставляет больше возможностей, чем можно было ожидать от абсолютно бесплатного программного обеспечения.

Помимо типовых функций для веб-редакторов, Nvu предлагает интегрированный FTP-менеджер, мощную поддержку для форм, таблиц и шаблонов, и он действительно очень прост в использовании. Одна из сильных сторон этого редактора работа со стилями. Этот реализовано благодаря CaScadeS, хорошо известному редактору CSS, который интегрируется в Nvu как дополнительный модуль и позволяет легко создавать и управлять стилями и видеть, как применяются стили "на лету" в документе.

Nvu является open source-решением и выпускался под Mozilla Public License (MPL). К сожалению, в последние несколько лет развитие NVU не продолжается. Однако потенциал этого редактора продолжает реализовываться в редакторе KompoZer, который есть ни что иное как ответвление (форк) от NVU. KompoZer является веб-авторской системой, которая сочетает в себе менеджер для веб-файлов и WYSIWYG-редактор. По сравнению с NVU, Kompozer производит более чистый код разметки.

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

Некоторые из возможностей NVU:

Сайт-менеджер позволяет просматривать сайты, которые вы создаете.
Поддержка XML.
Встроенный валидатор.

Резюме

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

Непрофессионалам и пользователям других операционных систем можно попробовать Nvu и его развитие – Kompozer.

Роберт Басыров

Что же означает WYSIWYG ?

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

Примечание : эта статья содержит рецензии только desktop-ориентированные WYSIWYG-редакторы, которые работают под Windows, Linux или Mac и не дает обзор WYSIWIG-редакторов на JavaScript.

Adobe Dreamweaver

Amaya

Основная цель Adobe Contribute, является возможность редактирования веб-сайтов и блоги для пользователей не имеющих каких-либо технических знаний. Contribute CS3 позволяет авторам обновить существующие сайты и блоги, сохраняя целостность сайта. Contribute предлагает интеграцию с Dreamweaver, дает возможность размещения материалов с Microsoft Office и редактирования из IE 7 и Firefox.
С этим WYSIWYG-редактором, авторы могут изменять или обновлять любой веб-сайт или блог без необходимости изучать HTML. Цена: $ 169 (версия CS3).

Adobe Golive

Microsoft Expression Web

Некоторые Microsoft Expression возможности:
* ASP.NET 2.0 Integration
* Advanced CSS rendering
* XPath Expression Builder
* Build and format views of industry-standard XML data
* Tag Property Grid
* Accessibility Checking
* Real-time Standards Validation
* Full Schema Support

Kompozer

Главная > Красота > Основы веб-конструирования §28. Представление о веб-конструировании

Основы веб-конструирования §28. Представление о веб-конструировании

Попадание в десяточку

Adobe Dreamweaver

Microsoft Expression Web

Рекомендуем также