В заключительной главе мы рассмотрим еще одну дизайнерскую программу из семейства 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 (при этом кое в чем даже попроще, так что с дизайном странички легко будет разобраться).

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

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

Предположим, вами создается ресурс по продвижению работ по озеленению садов, балконов и квартир, выполняемых некой условной фирмой «Аленький цветочек». Запустим Мастера Сайтов в 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.

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

Прежде всего для отправки заказа в режиме он-лайн можно использовать контактную форму. Формы удобны, понятны, приятны. Ими легко и с удовольствием пользуются все посетители. Откроем html-код странички для формирования заказов (ссылки на которую ведут СО ВСЕХ ПРОЧИХ СТРАНИЦ ресурса) и в тело документа внесем описание простейшей формы:

‹Н2›Доброго времени суток, уважаемый посетитель нашего магазина!‹Н2›

‹p›Огромное спасибо вам за живой интерес к нашим товарам. Здесь вы сможете легко и быстро оформить заказ, после чего с вами непременно свяжется наш менеджер, и ваша покупка благополучно будет вам доставлена.‹/p›

‹form name=“mailer” method=“post”

enctype=“text/plain” onSubmit=“(document.mailer.action += mailtoandSubject)”›

Введите ваше имя:‹br›

‹input type=“text” name=“Name” size=“ 24”

onChange=“msg(this.form)”›‹br›

Укажите тему сообщения (Заказ/Дозаказ):‹br›

‹input type=“text” name=“Subject” size=“ 24”

onChange=“msg(this.form)”›‹br›

Сюда впишите наименование товара и ваши контактные данные:‹br›

‹textarea name=“Message” cols=“ 40” rows=“ 6”

onChange=“msg(this.form)”›‹textarea›‹br›

‹input type=“submit” value=“Отправить”

onClick=“return checkIt()”›

‹input type=“reset” value=“Очистить”›‹/form›

‹p›Благодарим за покупку! Пусть наши цветы всегда радуют ваш взгляд.‹/p›

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

‹script language=“JavaScript”›

function checkIt() {

//____________________

if (document.forms.mailer.Name.value!= “”) {

} else {

alert (“\nОбласть \ “Имя\” в форме. \n\nБудьте добры ввести свое имя.”);

document.forms.mailer.Name.focus();

return false;

}

//____________________

if (document.forms.mailer.Subject.value!= “”) {

} else {

alert (“\nОбласть \ “Тема\” в форме. \n\nБудьте добры указать тему.”);

document.forms.mailer.Subject.focus();

return false;

}

//____________________

if (document.forms.mailer.Message.value!= “”) {

} else {

alert (“\nОбласть \ “Сообщение\” в форме. \n\nБудьте добры назвать товар и контактные сведения.”);

document.forms.mailer.Message.focus();

return false;

}

//____________________

}

function msg() {

document.mailer.action = “mailto: здесь ваш почтовый адрес”

mailtoandSubject = ((`?Subject=` +

document.mailer.Subject.value) + ` amp;Body=` +

document.mailer.Message.value);

}

‹/script›

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

Но пока рассмотрим еще один способ эффективной отправки сообщений, а именно – активный e-mail. Напишите на веб-страничке свой или любой другой адрес электронной почты, после чего откройте код документа и внесите в этот адрес следующие изменения. Во-первых, выделите его как ссылку ‹a href=“mailto: ваш адрес”›Пишите, чтобы оформить заказ!‹/a›. Готово – адрес активен, хотя сейчас им неудобно пользоваться. Поэтому введем несколько дополнительных указаний для компьютера. Сделаем так, чтобы полученное менеджером по этой ссылке письмо отличалось от остальных, то есть заранее имело указание темы: ‹a href=“mailto: ваш адрес?subject=Заказ”›Пишите, чтобы оформить заказ!‹/a›. Отлично, а теперь создадим в письме некое подобие формы, чтобы клиенту оставалось только заполнить пустые строчки: ‹a href=“mailto: ваш адрес?subject=Заказ amp;Body=Здравствуйте! Заказываю… (впишите наименование товара) под номером… (впишите №) по цене… (впишите цену) руб. в количестве. Мой e-mail:… (если есть); телефон:… (если есть).”›Пишите, чтобы оформить заказ!‹/a›.

Когда менеджер использует несколько почтовых ящиков, то неплохо направить письмо сразу на все или, по меньшей мере, некоторые из них. Для этого вносим в код дополнительные адреса: ‹a href=“mailto: ваш адрес?subject=Заказ amp;Body=Здравствуйте! Заказываю… (впишите наименование товара) под номером… (впишите №) по цене… (впишите цену) руб. в количестве… (укашите количество). Мой e-mail:… (если есть); телефон:… (если есть). amp;cc=ваш второй адрес (будет записан как копия)”›Пишите, чтобы оформить заказ!‹/a›.

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

‹p›Доброго времени суток, уважаемый посетитель нашего магазина! Что вы думаете о нашем веб-узле, товарах, организации? Что вы считаете нужным сказать нам? Мы будем признательны за предоставленные сведения.‹/p›

‹form name=“mailer” method=“post”

enctype=“text/plain” onSubmit=“(document.mailer.action += mailtoandSubject)”›

‹p›‹strong›Тип отправляемого сообщения:‹/strong›‹/p›

‹dl›‹dd›‹input type=“radio” name=“MessageType” value=“Praise”›Благодарность ‹input type=“radio” name=“MessageType” value=“Problem”›Вопрос ‹input type=“radio” name=“MessageType” value=“Suggestion”›Предложение ‹input type=“radio” name=“MessageType” value=“Complaint”›Жалоба ‹/dd›‹/dl›

‹p›‹strong›К какой области относится ваше сообщение?‹/strong›‹/p›

‹dl›‹dd›‹select name=“Subject” size=“1”›

‹option selected›Веб-узел‹/option›

‹option›Фирма‹/option›

‹option›Товары‹/option›

‹option›Офис‹/option›

‹option›Персонал‹/option›

‹option›(Другое)‹/option›‹/select›

Другое:‹input type=“text” size=“ 26” maxlength=“ 256” name=“SubjectOther”›‹/dd›‹/dl›

‹p›‹strong›Введите текст сообщения в следующее поле:‹/strong›‹/p›

‹dl›‹dd›‹textarea name=“Comments” rows=“ 5” cols=“42”›‹/textarea›‹/dd›‹/dl›

‹p›‹strong›Как с вами связаться?‹/strong›‹/p›

‹dl›‹dd›‹table›‹tr›

‹td›Ваше имя‹/td›‹td›‹input type=“text” size=“ 35” maxlength=“ 256” name=“Username”›‹/td›‹/tr›

‹tr›‹td›Эл. адрес‹/td›‹td›‹input type=“text” size=“ 35” maxlength=“ 256” name=“UserEmail”›‹/td›‹/tr›

‹tr›‹td›Телефон‹/td›‹td›‹input type=“text” size=“ 35” maxlength=“ 256” name=“UserTel”›‹/td›‹/tr›‹/table›‹/dd›‹/dl›‹dl›

‹dd›‹input type=“checkbox” name=“ContactRequested” value=“ContactRequested”›

Свяжитесь со мной по данному вопросу как можно быстрее.‹/dd›‹/dl›

‹p›‹input type=“submit” value=“Отправить”›

‹input type=“reset” value=“Сброс”›‹/p›‹/form›

Такая форма весьма сложна для начинающего веб-дизайнера, но у вас все получится. Начинать ее конструирование следует с наиболее простых элементов, например удалив или объединив в одну некоторые ячейки. И всегда ставьте пункт «Благодарность» на первое место: начинать перечень с жалобы опасно для бизнеса.

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

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

1) всегда и повсюду пользуйтесь только английским языком (кроме написания самого контента, разумеется);

2) не ставьте пробелов в названиях и ссылках, в крайнем случае на месте требуемого пробела поместите нижнее подчеркивание вот такого вида _ (например: ded_moroz.jpg);

3) никогда не используйте больших (прописных, то есть заглавных) букв в названиях и ссылках, поскольку это повышает вероятность ошибок (тем более что Web Page Maker и некоторые другие визуальные редакторы обладают кошмарной способностью превращать заглавные буквы в названии импортируемых картинок в строчные);

4) никогда не применяйте в названиях знаков препинания, звездочек, математических и иных символов и т. д.;

5) не пишите слишком длинные, «километровые» названия для рисунков, вроде i_know_you_love_only_me_…_etc.gif. Это ни к чему!

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

‹br›‹br›‹p style=“filter: Shadow(Color= #000000 , Direction= 130 ); width: 400; height: 60; font-size: 30pt; font-weight: bold; text-align: center; color: green”›ПРОСИМ ПРОЩЕНИЯ!‹/p›‹br›

‹p align=“left”›По техническим причинам настоящая страничка временно не открывается.‹br›Вы можете вернуться на предыдущую страничку либо перейти на новые, указанные в перечне ниже.‹br›Спасибо за понимание.‹/p›‹br›‹br›

‹HR width=80 % align=“center”›‹/HR›‹br›

‹H2 align=“center”›ПЕРЕЧЕНЬ ДОСТУПНЫХ СТРАНИЧЕК‹/H2›

Далее пойдут ваши ссылки. Код тривиален и хорошо вам известен. Его не нужно учить наизусть: достаточно понимать, что тут написано – и он крепко-накрепко запомнится сам. Линии, заголовки, фильтры, абзацы – все это мы учили. Не спешите немедленно забивать в Блокнот или веб-редактор все то, что здесь упомянуто. Сначала попробуйте мысленно представить себе, какой именно будет окончательная страничка. Затем попытайтесь добавить чего-нибудь своего в код, хотя бы измените цвет надписи «Просим прощения!» с зеленого на красный или синий. Что делать с ургентной страничкой, думаю, вам понятно.

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

Рассмотрим сказанное на примере моего ресурса. Первоначально на страничке download.html (для скачивания книг) использовано форматирование текста ‹div class=right›, но потом верстку усложнена:

‹div style=“position: absolute; overflow: hidden; left:278px; top:300px; width:781px; height:2813px; z-index:17"›‹DIV class=right›‹H3›Наше место в экологической истории‹/H3›

… (и т. д., и т. п.)‹/div›‹/div›

Казалось бы, ничего страшного. Однако если оставить старое форматирование ‹div class=right› наравне с новым, то итогом станет не более сложная визуальная структура текста, а просто напросто отсутствие видимого текста в броузере. Так что тэги ‹div class=right›‹/div › придется удалить. Наверняка и у вас произошло нечто похожее.

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

Даже гуру Нильсен не удержался и пожурил как-то раз сайт Международного Олимпийского комитета. Простим Нильсену то, что он поддался влиянию бездарной толпы. Давайте-ка поразмыслим над обоснованностью критики мастера. Строго говоря, МОК – организация такого масштаба и такой специфики, что вправе позволить себе даже черные буквы на черном фоне. Ее сайт – не для гуляки праздного и не для веб-дизайнера, который снаряда тяжелее мышки в жизни не держал. Сюда приходят любящие спорт люди, приходят с определенной целью, а не для того чтобы посмеяться и поиронизировать. Видимо, Нильсен решил, что МОКу надо бы нарастить посещаемость всеми правдами и неправдами, например провести на сайте акцию: скачай бесплатно спортивный рингтон «Оле-оле-оле!».

Вам смешно, а мне грустно. Сайты создаются под разные категории посетителей, абсолютного качества и всемирного признания ищут, наверное, лишь новостные издания. МОК ориентирован на строго определенную публику, безразличную к мелочам, которые профи сочтет недоработками и непонятками. Ругать за такое – это то же самое, что бросить в лицо доктору медицинских наук: «Почему ваша новая книга по ренографии опять написана языком, непонятным для пятиклассника?». Умные авторы персональных страничек, конечно, извиняются перед случайной публикой (вежливость, господа, вежливость!), а затем сообщают, что им важнее донести информацию, а не упражняться в изысках дизайна. К слову, так поступаю и я, поскольку веду ресурс на ограниченный круг посетителей. И вам советую во время работы думать про целевую аудиторию, а не про случайных прохожих. На всех не угодишь. Как говорится в таких случаях: что русскому в радость, то немцу смерть!

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

Начнем с авторского права. Нарушить его в Интернете очень и очень трудно, для этого надо быть или бесконечно беспечным человеком или прирожденным бандитом. Дело в том, что вам не воспрещается свободно брать с других ресурсов тексты, картинки, идеи, аудио и видео и размещать у себя в неограниченном количестве. От вас требуется лишь не выдавать скачанное добро за свое и всякий раз помещать ссылочку на тот сайт, с которого все это вами скопировано. Только и всего! По большому счету вам даже благодарны будут, поскольку наличие такой ссылки означает рост индекса цитируемости и рост числа посетителей.

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

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

> нет ли у вас где националистических или расистских лозунгов;

> нет ли у вас где пропаганды экстремизма и насилия, социального неравенства и несправедливости к социально незащищенным;

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

> нет ли у вас где порнографии (текстов, картинок, видео), а также материалов, растлевающих несовершеннолетних или провоцирующих на сексуальную агрессию;

> нет ли у вас призывов к свержению нынешнего конституционного строя;

> нет ли у вас разглашения государственных тайн;

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

Грань между добром и злом очень тонкая, ее легко преступить. Многие фразы и идеи легко истолковать превратно. Эротическое фото очаровательной девушки с обнаженным бюстом можно при желании назвать порнографией. Патриотические суждения о будущем России совсем нетрудно представить фашистскими лозунгами. Ну а резкое высказывание некой дамы на форуме о том, что «все мужики – НЕГОДЯИ», любой в два счета примет за оскорбление достоинства. Между тем лицо, желающее преступить закон, непременно найдет лазейку. Например, при запрете на порновидео станет распространять порноаудио (?) или рекламировать услугу «секс по ICQ».

И все-таки один надежный признак есть, он пришел к нам из восточной мудрости. Настоящее добро сияет подобно ледяным вершинам Гималайских гор! Пусть ваш сайт источает позитив, словно белоснежная шапка Эвереста, и тогда неприятности с законом вас наверняка минуют.