Разработка сайта — интеграция гуманитарных познаний: маркетинга, психологии рекламы, PR, дизайна с многочисленными техническими навыками, в том числе чисто программистскими. К этому надо добавить креативные наклонности, уравновешенные безупречным вкусом и чувством меры.

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

Какие программы понадобятся для самостоятельной верстки сайта?

Выбор достаточно широк! Статические страницы создаются в каком-либо редакторе. В принципе, для написания HTML достаточно стандартного Блокнота. Главный недостаток — то, что писать все теги необходимо вручную, а какого-либо контроля синтаксиса в нем не предусмотрено. Специализированные HTML-редакторы делятся на две группы.

Первая — текстовые редакторы с функциями автоматической вставки и завершения тегов, скриптов, проверки правильности кода. Широко известны две бесплатных программы: HTML Notepad и Tea. Существуют и проприетарные приложения, например Note Tab — редактор со встроенным преобразованием обычного текста в HTML и обратно, инструментами для раскраски текста, добавления ссылок и т. п. Подсветка и проверка синтаксических конструкций заметно упрощает работу. Тем не менее она не избавляет от необходимости знать и хорошо понимать HTML. Чтобы увидеть результат работы, созданный и сохраненный файл нужно открыть в браузере.

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

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

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

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

В крайнем случае для разработки веб-страниц можно использовать Microsoft Word. Создайте папку, сложите в нее необходимые изображения. Затем создайте новый документ, наберите текст, отформатируйте его, вставьте рисунки. Для вставки гиперссылок на другие документы воспользуйтесь командой Вставка → Связи → Гиперссылка. Сохраните полученный документ как веб-страницу (файл HTML): в диалоговом окне сохранения в раскрывающемся списке Тип файла выберите Веб-страница (*.htm, *.html) или Веб-страница с фильтром (*.htm, *.html). Второй вариант предпочтительнее, т. к. «фильтр» — обработка, сокращающая объем исходного кода. Заметим, что в виде веб-страниц позволяют сохранять свои документы и другие приложения всенародно используемого офисного пакета! О «крайнем случае» мы сказали намеренно.

Чем плохи веб-страницы, созданные с помощью Microsoft Word, Excel или PowerPoint?

Они содержат массу «лишнего» кода и долго загружаются. Программы не задумывались как веб-редакторы, их прямое назначение несколько иное. Сохранение документов в формате HTML — всего лишь одна из дополнительных возможностей, и не стоит ожидать от нее слишком много! Точно так же вы можете сохранить в формате HTML документы, создаваемые в приложениях пакета OpenOffice.org. У использования офисных приложений в качестве веб-редакторов есть только одна положительная сторона: они и так присутствуют на компьютере, а вы к ним уже привыкли. Если ради «одноразовой» работы вы остановитесь именно на таком способе — определенная логика в этом есть!

С чем работают профессиональные веб-дизайнеры?

В состав Microsoft Office вплоть до версии 2003 входил мощный и эффективный веб-редактор Microsoft FrontPage. В Microsoft Office 2007 место FrontPage заняла другая программа — Microsoft Expression Web. В Microsoft Office 2010 специализированный веб-редактор снова другой — Microsoft Office SharePoint Designer. В целом они унаследовали философию FrontPage. Однако эти приложения доступны только по лицензии наиболее полных, «старших» выпусков пакета.

Среди известных визуальных веб-редакторов назовем Dreamweaver и SiteCenter. Это профессиональные и довольно дорогие инструменты, явно не однократного применения. Куда же податься любителю? Выход есть, притом парадоксальный.

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

Такими «конструкторами» являются уже упомянутые Joomla!, WordPress, Drupal и другие системы управления содержимым (CMS). Фактически это всего лишь папки с файлами, которые содержат код HTML, PHP, JavaScript, таблицы стилей и т. д. Все скрипты и шаблоны разработали создатели соответствующей CMS. Кроме того, папка содержит средства редактирования проекта (веб-интерфейс разработчика и администратора). Ваша задача — выбирать нужные шаблоны, команды, размещать элементы управления на страницах, настраивать ссылки, добавлять картинки и т. п.

Доступ к этим файлам обеспечивает веб-сервер, например программа Apache. Обработкой сценариев PHP занимается программа-интерпретатор — модуль PHP. Скрипты обращаются к базе данных, которую обслуживает программа-сервер SQL, например MySQL 5. Наконец, для управления базой данных через наглядный веб-интерфейс используют модуль phpMyAdmin. Если вы собираетесь разработать сайт, необходимо установить и запустить перечисленные программы на своем локальном компьютере. Вместо этого можно использовать Denwer — набор дистрибутивов тех же самых программ, дополненный общей графической оболочкой. Подробные инструкции вы найдете в любом самоучителе по веб-дизайну.

Далее вы берете дистрибутив понравившейся вам системы управления сайтом, например Joomla!. Это архив с файлами — «заготовкой» проекта. Распакуйте его в определенную папку на диске своего компьютера. Создание сайта с помощью Joomla! заключается в редактировании файлов в папке проекта через его же веб-интерфейс и добавлении файлов изображений. Так что готовый проект (сайт) — просто папка с файлами.

На веб-серверах в Интернете обычно установлены те же самые программы: Apache, модуль PHP, MySQL, phpMyAdmin. Размещение сайта в Интернете заключается в том, что вы копируете («заливаете», «выкладываете») созданную вами папку на веб-сервер. Сайт становится доступным посетителям из Интернета. Вы можете продолжать управление содержимым, администрирование сайта. Для этого вы будете обращаться к своему проекту, теперь находящемуся на сервере в Интернете, через все тот же веб-интерфейс.

В чем достоинства и недостатки CMS?

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

Поскольку интерфейс управления Joomla! и phpMyAdmin вы слегка освоили в процессе создания проекта, то справитесь и с поддержкой своего сайта, когда разместите его на сервере. С каждым разом опыт будет прибавляться, и вы сумеете постепенно совершенствовать и дорабатывать сайт. С другой стороны, CMS — мощные инструменты с большими возможностями и «хитростями». Серьезное овладение ими ничуть не проще (но и не сложнее), чем любыми другими средствами веб-дизайна. Однако вам вряд ли нужно становиться профессионалом в этой области, а «для себя» хватит и начального уровня!