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

Полезный совет: начинающему веб-дизайнеру полезно знать, как хранить ценные скрипты, которые он может прочесть в справочнике или скачать с Интернета.[19] Для этих целей следует создать специальную папку «Скрипты» на диске D, а в ней субдиректории: «Графика», «Текст», «Математика», «Открытие странички», «Другие» – смотря по виду эффектов, которыми управляют скрипты. Когда у вас под рукой оказался полезный скрипт, который вы будете не раз использовать в работе, запустите простенький редактор вроде HTML Pad или Front Page. В нем создайте файл под кодовым номером, например script_007, и внедрите туда ваш скрипт в положенную часть (шапку и тело). В титуле документа укажите свойства скрипта, скажем: ‹title›Продвинутый калькулятор‹/title›. В дальнейшем из такого файла будет легко в нужный момент скопировать скрипт в разрабатываемый сайт.

Глава 5. Приложения

5.1. Готовые решения

В заключительной главе мы рассмотрим еще одну дизайнерскую программу из семейства W.Y.S.I.W.Y.G., которая позволяет новичку в деле веб-дизайна за считанные минуты создавать не просто отдельные странички, которые потом еще надо скреплять вместе, а сразу готовые сайты – правда, сайты небольшие и не очень сложные, но полученную заготовку всегда можно «обвешать» дополнительными страничками и дополнить различными хитростями. Знакомьтесь: HTML-редактор Net Objects Fusion. Поищите его на своем диске с веб-приложениями. Заметим, что начать рассказ о веб-дизайне можно было бы с описания этой программки, однако в этом случае на упрощение лучше не идти. Деятельность дизайнера, тем более, если рассматривать ее как искусство, становится понятнее, когда вдоволь поработаешь над каждой страничкой в отдельности. И ученический проект наш по этой же причине оказался столь сложным и необычным, связанным с астрологическими услугами.

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

Одновременно нам предстоит освоить на практике справедливость требования Net– centric corporate culture – требования необходимости веб-ориентированной корпоративной культуры. Сайт не должен копировать помятый клочок бумаги, который всунул мне в руку вчера сосед, сказав при этом: «Вот телефончик, звякни этим ребятам, у них купишь то, что тебе надо». Соседу-то спасибо огромное, но вот если какая-то фирма или любая другая организация задумает тем же способом заявлять о себе, то ничего хорошего нам ожидать не придется. Ориентация корпоративной культуры на интернет-маркетинг означает на практике тот факт, что сайт является не покоробленной от морского ветра вывеской на трактире «Адмирал Бенбоу», а полноценным электронным представительством компании.

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

Иногда сайт-визитка бывает биографическим или фактографическим. Допустим, что мы создаем сайт «Жизнь и удивительные приключения Даниэля Дефо», посвященный биографии, а также литературному и научному наследию английского писателя и экономиста Даниэля Дефо, известного в России как «отец» Робинзона Крузо. Установим 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), но мне такой подход совершенно не по душе. Пусть люди заходят и копируют, качают все, что им только в голову взбредет. И вам советую поступать также при верстке своего проекта. Повторим заполнение имен для всех остальных страничек, для чего нам понадобится выделить нужную страничку и с помощью плашки Properties выставить свои значения в окошках Name, Title, Custom Name. При этом вызывая Custom Name, не забудем установить для каждой странички File Extension – расширение файлов. Пусть оно будет *.htm или *.html, поскольку именно с таким мы прежде имели дело.

Если вы вдруг решите, что объема некоторой странички окажется недостаточным, то вам потребуется доделать нужное количество дочерних страничек для того или иного раздела сайта. Например, вся биография Дефо явно не уместится на страничке About, вот почему мы выделяем эту страничку курсором и кликаем на иконку New Page на панели управления. В результате получаем добавленную дочернюю страничку. Она пока безымянная и лишена многих свойств, настройку которых мы производим с помощью плашки Properties.

Когда этот этап работ остался позади, можно вернуться к главной, выделив ее, и кликнуть на иконку Page на панели инструментов, что позволит перейти к редактированию выделенной странички, то есть Домашней. На этом рассказ о создании сайта можно завершить. Работа с отдельными страничками нами хорошо изучена, а по интерфейсу Net Objects Fusion сильно напоминает старую добрую Microsoft Expression Web (при этом кое в чем даже попроще, так что с дизайном странички легко будет разобраться).