Искусство оформления сайта. Практическое пособие - Сергей Бердышев

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

В общем виде потребности приобретают форму древа. Рассмотрим такое древо, используя для этой цели специальные обозначения. Обозначим главную цель как АА, тогда сопутствующие второстепенные цели получают обозначения Аа, аА и аа. Главная задача пользователя состоит в том, чтобы найти АА. Очевидно, что первое сообщение – это то, которое удержит посетителя на сайте, то есть сообщение вида Аа – «вы нашли то, что искали, вот общие сведения, за конкретикой переходите сюда». Контент Аа напрямую ведет к контенту АА. Рядом с контентом АА соседствуют ссылки на контенты вида аА – комментарии, дополнения, полезные сведения, прямо или косвенно затрагивающие существо главного вопроса. Со страничек, заполненных контентом аА, должны быть переходы на контент аа, который малосущественен и используется главным образом для не очень занятого посетителя, собирающего дополнительные данные о компании. (Кроме того, дополнительный контент хорош тем, что повышает посещаемость сайта в целом и улучшает его обнаружение поисковыми системами; поэтому, кстати, со страниц с контентом аа должны иметься переходы на страницу с наполнением АА.)

Предположим, вами создается ресурс по продвижению работ по озеленению садов, балконов и квартир, выполняемых некой условной фирмой «Аленький цветочек». Запустим Мастера Сайтов в HTML-редакторе Net Objects Fusion и быстренько сверстаем нужный нам сайт. Укажем для него следующие странички:

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

От нее ответвляется страница About – О компании (очень кратко о главном: деятельность компании, спектр услуг, расценки, консультации).

Другая дочерняя страница: Contact Us – Контакты (e-mail компании, телефоны контактных лиц с указанием имен и должностей); от нее ответвляется Location – Расположение (продолжая страничку контакты, указывает фактические адреса филиалов в разных городах страны с картами маршрутов).

Затем с главной ведет страница Services – Работы. Это подробный рассказ об услугах компании «Аленький цветочек» с упором на конечный результат, то есть рассказ о том, что может приобрести в этой компании потенциальный клиент. От данной странички отходят дочерние Catalog, Download(s), Listings.

Catalog – Каталог. Это иллюстрированный указатель конкретных работ по дому и саду, которые выполняет компания; на этот раз конечный результат не описывается, но сообщается, сколько потребуется времени и денег на ту или иную работу; здесь же имеются калькулятор и формы для оформления заказа. Download(s) – Скачай. Здесь помещаются скачиваемые в виде zip-архивов прейскуранты (допустимо включить, при желании, секцию ботанической литературы, подборку занимательных статей по садоводству). Listings – Списки, то есть списки видов и сортов растений, с которыми работает компания; списки семян, которые рассылает компания своим клиентам; списки обслуженных VIP-клиентов, оставивших хорошие рекомендации.

Теперь обратимся к отходящей от домашней странички Events – События (собственные мероприятия и промо-акции компании, награждения, участие в конкурсах, демонстрация работ, корпоративные праздники). С ней логически связана Photo Gallery – Фотогалерея (преимущественно образцы работ: поменьше раздражающих физиономий, побольше радующей глаз зелени; отдельную секцию галереи стоит посвятить обоям на рабочий стол, изображающим радующие глаз цветники[20]).

Завершают ресурс FAQ и Links, тоже отходящие от домашней. FAQ – Часто задаваемые вопросы (по садоводству, цветоводству, по условиям оказания услуг компанией «Аленький цветочек»). Links – Ссылки (на родственные и дружественные ресурсы, в том числе посвященные комнатным и садовым растениям).

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

Допустим, что первичный шаблон сайта нам не особенно понравился, и мы его решили немного оживить. В данном редакторе для этого есть замечательная возможность в виде библиотеки стилей. По завершении работ с конструированием сайта нам достаточно лишь кликнуть на иконку Style на панели управления и сделать свой выбор, просмотрев коллекции стилей. В коллекции Classic Site Styles для нашего «Аленького цветочка» нашлись два хороших шаблона – Gardening (садоводство) и Sunflower (подсолнух). Можно выбрать для примера «Садоводство» (см. рис. 37), потому что этот стиль дает красивый интерфейс сайта и славное меню. Кликаем теперь на иконку Set Style (установить стиль) и подтверждаем, что выбранный нами стиль должен быть применен к конструируемому сайту.

В дальнейшем странички можно дорабатывать здесь же или в другом HTML-редакторе. Встроенный в Net Objects Fusion редактор удобен тем, что наглядно показывает структуру готового html-документа и поэтому снижает вероятность ошибки при редактуре гипертекста и/или вставке новых html-объектов. Открыть HTML-код странички можно, проделав путь Go › HTML Source. Выполнив все доработки, готовый сайт можно запустить в Интернет, просто кликнув на иконку Publish Site (опубликовать сайт), хотя удобнее загрузить тщательно отредактированные странички через страничку загрузки самого хоста.

Консультационный центр может быть обособленным либо являться продолжением сетевого ресурса компании. Предположим простоты ради, что у нас консультационный центр является рубрикой сайта «Аленький цветочек» либо прикрепленным к последнему подсайтом. Консультационный центр тесно связан гиперссылками с FAQ, отчасти даже повторяя его. Инструментарий на сайте консультационного центра должен предоставлять посетителю возможность активно работать с предоставляемой информацией, своевременно и полноценно обрабатывать часть документальных материалов он-лайн, чтобы не приходилось искать в кипе бумаг на столе справочники и т. д. (А если юзер вообще работает через Интернет-кафе, то мы приятно порадуем его.)

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

С этой целью в редактор кодов программы Web Page Maker или непосредственно в тело документа через блокнот либо иной упрощенный редактор записывается соответствующий скрипт «Калькулятор» со странички http://obrazcats.narod.ru/pages/scripts/scripts.html (готовый результат проверьте в действии на страничке http://obrazcats.narod.ru/pages/scripts/calculator.html).

Рассмотрим теперь пример другого веб-инструмента, пригодного для активного использования на сайте консультационного центра. Это счетчик расстояний по прямой между разными городами мира, что может показаться интересно и полезно как бизнесменам, так и любителям авиапутешествий и морских круизов. Такой счетчик можно разместить в центре консультаций по выбору услуг турагентств и авиакомпаний. Чтобы сконструировать подобное устройство, требуется скачать код на нашем учебном сайте со странички http://obrazcats.narod.ru/pages/scripts/scripts.html, при этом обратив внимание на тот факт, что часть кода внедряется в шапку html-документа ‹head›, сразу после всех мета-тэгов и титула ‹title›.

Понятно, что этот скрипт управляет работой счетчика расстояний. В body документа нужно скопировать кое-что другое: сам счетчик, то есть его интерфейс и некоторые вспомогательные механизмы, работающие по приведенному выше скрипту. Код интерфейса и скрытых «под ним» механизмов записывается целиком внутри тегов ‹form›. Окончательный результат можно увидеть и опробовать в действии на страничке http://obrazcats.narod.ru/pages/scripts/airdistance.html.