Интернет-сайт своими руками

Редакторы веб-страниц

27.02.2009
12:00
Дмитрий Бергер

 

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

 

Для начала нам необходимо определиться с именем проекта и размещением. И тут есть два варианта – платный и бесплатный. Так, если вы хотите получить адрес типа www.имя.ru, вам придется обратиться к компании-посреднику (например - nic.ru), которая за определенную плату зарегистрирует для вас необходимый домен (при условии его незанятости). Если же вас устраивает адрес типа www.имя.narod.ru (или www.имя.by.ru), то задача упрощается, так как домены третьего уровня бесплатно предоставляют множество сервисов, самым известным из которых является narod.ru. Кроме того, при регистрации домена третьего уровня вы, как правило, получаете бесплатно еще и площадку для размещения сайта – хостинг. А вот в случае с доменом второго уровня размещение придется оплачивать дополнительно (конечно, можно воспользоваться и бесплатным хостингом, но тут есть некоторые «подводные камни»).

 

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

 

 

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

 

После этого вам предстоит создать дизайн проекта, составляющими которого являются: цветовая схема, графические элементы, шрифты и их сочетание. Как правило, сначала в графическом редакторе (например, Adobe Photoshop) «отрисовывается» внешний вид страницы полностью, а потом изображение режется на части, которые собираются уже в html-редакторе. Но вполне возможно обойтись и минимумом графики (например, нарисовать только «шапку» страницы).

 

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

 

Существует два вида html-редакторов. Первый – текстовые html-редакторы – предназначены для пользователей, хорошо владеющих данным языком. Со вторым – визуальными редакторами – могут работать как специалисты, так и любители, каждый на своем уровне. Именно этот тип лучше всего подходит для наших задач. Но прежде чем перейти к обзору специализированных html-редакторов, сделаем одну оговорку. Несложный сайт можно быстро создать и в MS Office – и Word, и PowerPoint, и Publisher предоставляют пользователю минимальный набор инструментов, необходимых для разработки простых страниц. Однако у такого подхода есть очевидные недостатки: их функциональность ограничена, а часто получаемый код неоптимизирован.

 

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

 

 

Namo WebEditor 8

 

Shareware, 99.95$

Разработчик: SJ Namo

Сайт: www.namo.com

 

Неплохой редактор с дружественным, интуитивно понятным интерфейсом. Предоставляет пользователю все необходимые для работы инструменты: есть возможность создания сайтов с помощью конструктора (предлагаются шаблоны дизайна), встроенный FTP-клиент для размещения готовых страниц на удаленном сервере, удобные помощники для добавления на страницы скриптов (затемнение фона, динамические меню, анимация, активные кнопки и т.д.) и медиафайлов. Доступны инструменты для работы со слоями, фреймами, закладками, веб-формами, объектами, формулами и таблицами. Также включены: мастер создания фотоальбома, редактор цветовых схем (есть предустановленные темы), менеджер макросов, а также оптимизатор html-кода. Полученные результаты можно оценить в разных браузерах (Opera, Mozilla, Explorer).

 

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

 

 

DreamWeaver CS4

 

Shareware, 399$

Разработчик: Adobe Systems

Сайт: www.adobe.com

 

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

 

Повышению эргономичности способствует отдельная панель «Вставка»: с помощью имеющихся на ней вкладок можно добавить на страницу самые разные объекты – гиперссылки, таблицы, изображения, Flash- и ActiveX-компоненты, дату, источники данных, сценарии. Кроме того, на этой панели расположены инструменты для работы с фреймами, слоями, панелями Spry, веб-формами и данными. Каждая из перечисленных функций обеспечена гибкими и удобными настройками, а также имеет разные подварианты. В программе реализованы удобный файл-менеджер и библиотека фрагментов кода. Стоит отметить и множество инструментов тестирования и отладки, таких как инспектор кода и тегов, средства проверки гиперссылок. Есть даже команда, позволяющая исправить html, созданный в Word.

 

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

 

 

NVU 1.0

 

Freeware

Разработчик: Linspire

Сайт: http://nvu.mozilla-russia.org

 

Это небольшая, полностью бесплатная программа, русифицированная и обладающая простым интерфейсом, станет хорошим решением начального уровня для создания несложных сайтов. При этом лаконичный интерфейс и просторная рабочая область содержат все необходимое для полноценной работы. В наличии четыре режима отображения – обычный (технический внешний вид), код, предварительный просмотр (вид в браузере) и «html-теги» (сочетание первого и второго, когда на картинку накладываются значки тегов). Имеются также простые инструменты для добавления различных объектов: парой кликов можно добавить изображение, таблицу, веб-форму (кнопку, метку, выпадающий список, текстовое поле и т.д.), гиперссылку, якорь, разделители. Детально реализованы функции форматирования текста. Также присутствуют редактор CSS, оптимизатор html-кода, функция проверки орфографии и несложный FTP-клиент.

 

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

 

 

Итак, мы рассмотрели три программных продукта различных «весовых категорий», предназначенные для создания интернет-страниц. NVU – для новичков, только познающих азы сайтостроения, Namo WebEditor – для тех, кто решил сделать более серьезный сайт. И, наконец, Dreamwever – для настоящих профессионалов.

 

Но вернемся к процессу создания проекта. Следующий этап – тестирование готового узла. Здесь происходит проверка работоспособности ссылок на всех страницах, корректируется текст и устраняются опечатки, исправляются мелкие недочеты. Протестированный сайт готов к размещению на удаленном сервере, и это действие, как правило, производится путем простого копирования файлов по протоколу FTP через специальную программу-клиент (при наличии встроенного клиента в программе-редакторе можно воспользоваться им). Финальный «штрих» создания интернет-проекта – удаленная проверка его работоспособности.

 

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