Искусство оформления сайта. Практическое пособие
Шрифт:
Сайт-визитка необходим, как нетрудно догадаться, для того, чтобы представлять какое-либо лицо – физическое или юридическое – в Сети, если этому лицу выгодна такая самореклама. Сайт-визитка конструируется с учетом тех целей, которые преследует его заказчик, а цели эти могут быть различны. Нередко они не связаны с материальным интересом напрямую, то есть веб-узел не выполняет коммерческих функций, но призван повысить популярность и солидность, представительность заказчика. Такой человек может заниматься наукой, литературой, живописью, фотографией, политикой, коллекционированием, ролевыми или компьютерными играми, так что его сайт, во-первых, сообщает об успехах этого человека и серьезности его намерений, а во-вторых, позволяет расширить круг единомышленников,
Иногда сайт-визитка бывает биографическим или фактографическим. Допустим, что мы создаем сайт «Жизнь и удивительные приключения Даниэля Дефо», посвященный биографии, а также литературному и научному наследию английского писателя и экономиста Даниэля Дефо, известного в России как «отец» Робинзона Крузо. Установим HTML-редактор Net Objects Fusion на свой ПК, запустим и на панели управления кликнем на иконку Site, поскольку мы хотим создать целый веб-узел сразу. Перед нами откроется диалоговое окно, в котором нужно выбрать опцию Site Wizard – Мастер Сайтов (см. рис. 35). Перед нами появится перечень шаблонов, сгруппированных по тематике. На рисунке показана тема «Правительство и политика» (Government and Politics), предлагающая шаблоны разных интерфейсов. Найдем для себя подходящую тему и шаблон, после чего нажмем на Next (Далее). Перед нами появится панелька по заданию страничек и исходных базовых характеристик каждой из них (см. рис. 36).
Выставим рядом с отобранными страничками флажки. При установке каждого флажка появляется плашка с предложением четырех вариантов взаимного расположения слоев на будущей страничке. Если устраивает расположение, заданное по умолчанию, то можно оставить все как есть. Из всего разнообразия предложенных страничек мной были выбраны: Home (Домашняя), About (О герое сайта), Downloads (Скачать), Contact Us (Контакты), Events (События), Photo Gallery (Фотогалерея), FAQ (Часто задаваемые вопросы), Links (Ссылки). Кликаем на Next и заполняем форму с личными и контактными данными, указывая в ней то, что, по нашему мнению, поспособствует установлению скорейшего контакта с посетителями сайта. Если что-то вас не устроит, то жмите на Back (Назад), если же все сочтете верным, то выбирайте Finish (Готово).
Когда вы кликаете на «Готово», программа сохраняет весь проект как один файл под деловым названием (Business Name) с расширением *.nod, что, очевидно, содержит аббревиатуру от наименования самого редактора (Net Objects). Перед вами появляется древовидная структура сайта. Остается только выбирать странички, верстать их и задавать им необходимые свойства. Разберем этот процесс пошагово на примере одной типовой странички – Домашней, с которой и предлагает нам начать работу Мастер Сайтов.
На панельке Properties (Свойства) выбираем имя странички (желательно index), после чего записываем в ячейку Title мета-тэг титула «Дефо: Главная». После кликнем на кнопку Custom Names и зададим названия баннеров и навигационных кнопочек, которые приведут нас на главную со всех частей сайта. А попутно укажем формат странички – HTML. На следующих вкладышах панельки Properties находим окошко для указания ключевых слов, заполним его: Даниэль Дефо, Даниель Дефо, английская литература, романы, жизнь и удивительные приключения, Робинзон Крузо, Моль Фландерс, Великобритания, Daniel Defoe, de Foe и т. д. Поставим флажок в окошке напротив надписи «Применить мета-тэги ко всем страничкам» (Apply Meta tags to all pages).
Установим защиту для странички, пользуясь закладкой Protect Page на плашке Properties. Выставим здесь флажки там, где сочтем необходимым. Некоторые, например, защищают странички своих ресурсов от копирования (From copying), но мне такой подход совершенно
Если вы вдруг решите, что объема некоторой странички окажется недостаточным, то вам потребуется доделать нужное количество дочерних страничек для того или иного раздела сайта. Например, вся биография Дефо явно не уместится на страничке About, вот почему мы выделяем эту страничку курсором и кликаем на иконку New Page на панели управления. В результате получаем добавленную дочернюю страничку. Она пока безымянная и лишена многих свойств, настройку которых мы производим с помощью плашки Properties.
Когда этот этап работ остался позади, можно вернуться к главной, выделив ее, и кликнуть на иконку Page на панели инструментов, что позволит перейти к редактированию выделенной странички, то есть Домашней. На этом рассказ о создании сайта можно завершить. Работа с отдельными страничками нами хорошо изучена, а по интерфейсу Net Objects Fusion сильно напоминает старую добрую Microsoft Expression Web (при этом кое в чем даже попроще, так что с дизайном странички легко будет разобраться).
Обратимся теперь к верстке сайта по предложению работ и услуг. Жизнь полна противоречий, отчего в каждом деле приходится считаться с разными нюансами. Только что мы говорили о важности ориентированной на Сеть корпоративной культуры, а теперь вынуждены признать и то, что структура сайта не должна в точности отображать структуру компании, но исключительно структуру потребностей пользователя – главных и второстепенных, сопутствующих.
В общем виде потребности приобретают форму древа. Рассмотрим такое древо, используя для этой цели специальные обозначения. Обозначим главную цель как АА, тогда сопутствующие второстепенные цели получают обозначения Аа, аА и аа. Главная задача пользователя состоит в том, чтобы найти АА. Очевидно, что первое сообщение – это то, которое удержит посетителя на сайте, то есть сообщение вида Аа – «вы нашли то, что искали, вот общие сведения, за конкретикой переходите сюда». Контент Аа напрямую ведет к контенту АА. Рядом с контентом АА соседствуют ссылки на контенты вида аА – комментарии, дополнения, полезные сведения, прямо или косвенно затрагивающие существо главного вопроса. Со страничек, заполненных контентом аА, должны быть переходы на контент аа, который малосущественен и используется главным образом для не очень занятого посетителя, собирающего дополнительные данные о компании. (Кроме того, дополнительный контент хорош тем, что повышает посещаемость сайта в целом и улучшает его обнаружение поисковыми системами; поэтому, кстати, со страниц с контентом аа должны иметься переходы на страницу с наполнением АА.)
Предположим, вами создается ресурс по продвижению работ по озеленению садов, балконов и квартир, выполняемых некой условной фирмой «Аленький цветочек». Запустим Мастера Сайтов в HTML-редакторе Net Objects Fusion и быстренько сверстаем нужный нам сайт. Укажем для него следующие странички:
Home – Домашняя (содержит предложение посетителю сайта помочь с озеленением его дома, балкона, дачи, с перечислением всех сопутствующих выгод – финансовых, эстетических, экологических, рекреационных и т. д.).
От нее ответвляется страница About – О компании (очень кратко о главном: деятельность компании, спектр услуг, расценки, консультации).
Другая дочерняя страница: Contact Us – Контакты (e-mail компании, телефоны контактных лиц с указанием имен и должностей); от нее ответвляется Location – Расположение (продолжая страничку контакты, указывает фактические адреса филиалов в разных городах страны с картами маршрутов).