Итак, мы убедились, что наш компьютер пригоден для верстки сайтов, а заодно оснастили его разнообразным ультраполезным «софтом». Теперь можно приступить к созданию пробного, ученического ресурса. Разумеется, куда более серьезного в сравнении с нашим первым шедевром – страничкой про образованных котят. Пусть этот ресурс будет сайтом издательства. Дело в том, что сайт издательства особенно сложен по устройству логической и физической структуры, а также наделен многочисленными функциями, которые не так уж просто сделать. Поэтому если браться за дело – то пусть это дело того стоит. Именно на издательском сайте мы многое изучим и освоим.

На начальном этапе главным является создать грамотный контент, вникнуть в его логическую структуру и расставить приоритеты при разработке. Эти три вопроса решаются комплексно. Прежде всего, нужно подумать, на кого рассчитан наш сайт, иными словами, «user forever»![11] Так, издательство работает главным образом с четырьмя группами посетителей:

1) читающая публика, которая забредает на сайт в стремлении узнать что-нибудь о книгах и авторах. Читатели являются одновременно и покупателями, вот еще почему заслуживают обхождения и внимания;

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

3) штатные работники на вакантные должности – верстальщики, корректоры, редакторы, иллюстраторы и все прочие люди, которые нетленное творение иного автора превращают в книгу;

4) партнеры – книготорговые организации, типографии, библиотеки и т. д.

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

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

Лапидарность при составлении контента главной странички (равно как и некоторых других) – это и великая радость и большое зло для веб-дизайнера. Радость потому, что маленький текст легко и быстро читается и возбуждает интерес, желание продолжить ознакомление с ресурсом. Зло состоит в том, что поисковая система тем быстрее и легче находит ваш сайт, чем крупнее и богаче его контент. Сразу скажу, что эта проблема решается использованием скрытого текста. Дизайнер берет большой кусок текста, объемом около 500 знаков, и вставляет его в открытый html-код главной странички сразу после слова ( тэга) ‹body›. Чтобы этот текст был скрытым, он заключается в кавычки вида: ‹! – здесь ваш текст– ›. На страничке этот кусок не объявится, зато поисковик будет его свободно читать и засчитывать. (Убрав лишнее, возмести ущерб!)

Вопрос: какой контент лучше всего выбрать для скрытого текста? Ответ: наиболее полно отражающий тематику сайта. В случае с издательским ресурсом проблема снимается сама собой: скрытый текст требуемого объема напишет любой редактор, рассказав в этом кусочке о книгоиздательской деятельности вообще и своего издательского дома в частности. Когда приходится работать с лесоперерабатывающим предприятием, у которого в штате нет редакторов, то в скрытый текст можно скопировать куски текста про деревообрабатывающую промышленность, современные технологии лесопереработки, использовав специальную литературу и/или статьи из электронной энциклопедии. Совет: когда копируете статьи из электронной энциклопедии, не забывайте заменять сокращения полным написанием слов. Поисковой системе неинтересен контент вида: «ДАВИД-ГОРОДОК, г. (с 1940) в Беларуси, Брестская обл., на р. Горынь. 7,7 тыс. жит. (1991). Инструмент. пр-во. Возн. в кон. 11 или нач. 12 вв.». Вы думаете, машина поймет эти сокращения?

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

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

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

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

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

> «Наши книги» – знакомство с продукцией чрезвычайно важно, поскольку фирма познается по товарам ее, равно как лев – по когтям;

> «Авторам» – тоже верный подход, поскольку чем больше авторов, тем больше продукции хорошей и разной;

> «Магазин» – то есть электронный, если таковой имеется. А если нет, то ссылке придается вид «Магазины» и здесь указываются адреса и телефоны книготорговых организаций, осуществляющих сбыт продукции данного издательства;

> «Контакты» – раздел представляет всех контактных лиц издательства, готовых к общению с вами по любому вопросу.

В меню второго уровня могут и должны значиться следующие, менее важные в плане влияния на доходность пункты:

> «Приветствие директора» – открытое письмо директора посетителям ресурса и друзьям издательства. Большой пространный документ, полный слоганов и теплых слов, вроде американского The President’s Letter, который никто и никогда читать не станет, но который все посмотрят. Приятно все-таки. Размещать эту вещь на главной страничке нелепо;

> «Вакансии» – вакантные должности издательства. Сюда не следует относить авторов, но только верстальщиков, менеджеров, корректоров, уборщиц и прочий персонал. Автор – это особый человек, так что, по традиции, пишущей братии выделяется отдельная ссылка;

> «Партнерство» – информация для деловых партнеров: финансовая, юридическая, контактная и прочая, какая только уместна;

> «Наши баннеры» – здесь, после предложения обменяться рекламными картинками-баннерами, при клике на который можно перейти на другой ресурс. Здесь же даются баннеры для скачивания и коды к ним;

> «Ссылки» – сайт предлагает обменяться ссылками с другими заинтересованными ресурсами;

> «Скачать» – халява от издательства: картинки и тексты (обычно: отдельные главы из собственных книг), которые могут живо заинтересовать гостей.

Главное меню рекомендуется располагать вверху странички, под главным рисунком и логотипом, причем желательно все пункты разложить в строку. Второстепенное меню встраивается сбоку, обычно слева. Главное меню иногда, при развитой структуре сайта, стоит снабдить выпадающими, или всплывающими подменю (см. рис. 10). Единственный минус подменю состоит в сложности реализации, поскольку для этого требуется писать скрипты, то есть команды. Но зато и публику удастся порадовать, поскольку выпадающее подменю повышает скорость работы с сайтом. Например, писателям очень удобно пользоваться меню, в котором пункт «Авторам» разбивается в подменю на три подпункта: «Постоянным авторам»,[12] «Новым авторам», «О наших авторах». Заметим, что пункт «О наших авторах» должен присутствовать и в подменю к пункту «Об издательстве»: хорошие авторы – это живая реклама.

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

В добавление к сказанному назовем особый вид навигации – пейджинг, то есть перелистывание страничек. Пейджинг пригоден для ориентации в большом и сложном тексте, который заведомо представляет интерес для внушительной части вашей аудитории. В навигационной панельке для листания страниц выдеяются в оптимуме две строки, которые имеют вид:

«ПЕРВАЯ, ПРЕДЫДУЩАЯ, СЛЕДУЮЩАЯ, ПОСЛЕДНЯЯ» – верхняя и

«Вы на ‹…›-й странице. Все страницы: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10» – нижняя. И рад бы сделать удобнее, но это предел вирутального комфорта.

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

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

Чтобы получить хорошую страничку, полезно чертить эскизы от руки или на компьютере. Электронные эскизы можно готовить непосредственно в Web Page Maker, ибо он словно специально создан для веб-экспериментирования. А можно и в CorelDraw, поскольку это одинаково удобно и даже имеет некоторые преимущества. Такой эскиз можно экспортировать в файл растровой графики для распечатки, задав необходимые параметры, тогда как с эскиза из Web Page Maker нужно сначала сделать скриншот (снимок с экрана, выполняется нажатием на клавишу Print Screen, сокращенно PrtScr), а потом еще вставлять этот скриншот в Фотошоп (Crtl + V) и обрабатывать там. На рис. 11 вы видите эскиз, выполненный в Кореле. На лицо явные ляпы при симпатичном, в целом, дизайне:

> слишком много графики – причем графики на главной страничке, отчего ждать ее загрузки, видимо, тридцать лет и три года;

> надписи не кликабельны, жать приходится на картинки, а это плохо для сайта (особенно если навигационные картинки скверно грузятся);

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

> нет ни имени URL, ни намека на контактную информацию, ни даже традиционной ссылки «Контакты» (я предположил, что гость, кликнув на нужную рубрику, увидит сразу контактную форму и e-mail, но думать за других – не самое благородное занятие);

> текст неотредактирован (въедливый посетитель заметит досадную опечатку «ПРОДКТОВ» и вознегодует: ладно бы ошиблись в большом куске из инструкции к какой-нибудь кофемолке, так нет – допустили ляп в крохотном контенте, причем на главной страничке!).

Несомненные плюсы эскиза, которые мы сохраним в новом варианте сайта:

> классное, запоминающееся название;

> удачный логотип;

> эффектное обрамление текста, обеспечивающее запоминаемость сайта;

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

Стоит ли расстраиваться? Отнюдь, радоваться надо, так как на ошибках учатся. Не пугайтесь, если у вас поначалу что-то пойдет не так! И не стремитесь к полному идеалу, ибо идеальность – понятие относительное. Что хорошо для одного ресурса, то будет погибелью для другого. Не питайте иллюзий, не корите себя, не повышайте планку день ото дня: за те два дня, что вы читали эту книжку, вы и так добились невероятно многого. С чем вас и поздравляю. А чтобы добиться большего, нам придется познакомиться поближе с языком HTML-программирования.

Изучение веб-дизайна начинается с юзабилити и артистичности, пусть даже веб-странички приходится рисовать в Corel. Глубокое изучение HTML начинается потом, поскольку незнакомый с требованиями гармоничности и юзабилити человек никогда не поймет, какой же смысл заключается в тех или иных возможностях гипертекста, даже если узнает эти возможности.

Вдобавок для работы в программе Web Page Maker знать основы программирования совершенно не нужно, если создаешь любительский персональный узел. Солидный сайт, однако, такого легкого отношения не потерпит. О минусах визуальных редакторов мы уже говорили. Вдобавок поддержка некоторых важных эффектов и свойств возможна лишь, как мы убедились, за счет внесения изменений в html-код. Вот почему нам придется отвлечься на миг от высокого искусства и вернуться к ремеслу. Что ж, да Винчи изучал химию красок, которые готовил для себя сам, и добился того, что обеспечил исключительную стойкость цвета и долговечность полотен. Одновременно с мастером жили не менее талантливые живописцы, но они не знали химии красок, отчего полотна этих гениев увяли и истлели. Мы лишились красоты, потому что кто-то знал только искусство и не признавал ремесла.

Помня об этом, вновь откроем в Блокноте нашу первую html-страничку. Посмотрим, с чего она начинается. Это тэг ‹HTML›. А теперь посмотрим, чем она заканчивается: это тэг ‹/HTML›. Нам открылось главное свойство языка HTML: его тэги по большей части двойные, они состоят из тэга открывающего и тэга закрывающего. Внутри документа выделяются заголовок и тело, которые также обособляются двойными тэгами:

‹html›‹head›Здесь заголовок документа, не путайте его с заголовком страницы!‹/head›‹body›Здесь тело документа, включающее видимый юзеру текст.‹/body›‹/html›

Другой примечательной особенностью языка HTML является то, что в документе, написанном на этом языке, видимый текст не отделяется от программного: «смешались в кучу кони, люди». В Word’e все не так, здесь текст для юзера дается отдельно от языка программирования. Это еще одна причина почему писателю с его Word’ом незачем мучаться над программированием, а нам приходится. Ранее было сказано, что не все тэги парные, некоторым не требуется закрытие. Таковы тэги иллюстраций, например, ‹img› (от английского слова image – рисунок). Разберем сказанное на примере. Вот перед нами страничка с фоткой девушки и с романтической подписью: «Девушка, по которой я схожу с ума» (рис. 12).

Запись кода тривиальна, в теле имеются всего две строки. Первая описывает рисунок: ‹img border=“ 0” src=“file://images.files/girl.jpg” width=“ 275” height=“416”›. Кстати, сразу видно, что перед нами код, сгенеренный каким-то редактором. Веб-дизайнер написал бы короче и проще: ‹img width=275 height=416 border=0 src=“images.files/girl.jpg”›. Следующая строка – текстовый абзац. Он ограничивается тэгами ‹p›‹/p›. Внутри них размещаются тэги ‹b›‹/b›, задающие полужирное (bold) начертание фразы. И наконец, внутри этих тэгов комфортно разместился текст, который увидит юзер.

Итак, что такое язык HTML, мы, в общем, поняли. Теперь нужно научиться писать и редактировать на нем то, что не способна сделать машина без участия человека. В первую очередь сюда относится служебный тег ‹!DOCTYPE›. Какие-то редакторы его ставят сами, какие-то – нет, поэтому научимся писать его самостоятельно. Обойтись без него можно… теоретически. А вот на практике броузеры да и другие программы обработки иногда требуют, чтобы в начале HTML-документа (хотя бы главной странички) обязательно помещался он. В традиционной записи тэг имеет вид:

‹!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.1//EN”›

Теперь познакомимся с мета-тэгами. Так называются тэги, целиком и полностью размещаемые в заголовке html-документа, между метками ‹head›‹/head›. Они обозначаются meta name= и предназначаются в целях размещения сведений для поисковых машин и рекламной информации. В Web Page Maker, как и в других веб-редакторах, есть функция вставки некоторых мета-тэгов (Properties › Document Properties – Свойства › Свойства документа). Однако возможности таких программ по части внедрения мета-тэгов ограничены.

Тэг ‹meta name=“revisit” content=“… days”› задает периодичность переиндексации сайта некоторыми поисковыми машинами, которые на это рассчитаны. Остается только поставить число дней. Тэг ‹meta name=“robots” content=“index, all”› управляет работой поисковых роботов, заставляя их прочитывать весь текст, а не начальные несколько строк. Эти два тэга лучше использовать на главной и еще нескольких важных страницах, но только не на всех. У меня они занимают примерно 10 % страниц ресурса. Роботы не любят, когда их упорно к чему-то принуждают. Тэг ‹meta name=“site-created” content=“…”› устанавливает дату создания страницы. Соответственно тэг ‹meta name=“expires” content=“…”› отображает дату закрытия страницы. Использовать два последних тэга необязательно.

Тэг ‹meta name=“autor” content=“…”› служит для указания имени автора и дополнительной информации о нем, обычно контактной (e-mail). В тэг ‹meta name=“copyright” content=“…”› вносится название организации в целях защиты авторских прав. Тэг ‹meta name =“resource-type” content =“document”› показывает тип ресуса (для обычных HTML документов значение мета тэга – всегда «document»). Иногда полезно включить тэг ‹meta name=“generator” content=“…”›, чтобы показать, в какой программе сверстана страничка, поскольку это нередко помогает броузеру прочитать ту ахинею, которую накрутил визуальный редактор.

Но это не тэги, а баловство одно. Лучше посмотрим вот на эти два: ‹meta name=“description” content=“…”› и ‹meta name=“keywords” content=“…”›. Мета-имя «description» носит примечание content. Контент – это, как сообщалось ранее, текстовое (информационное) наполнение странички. Контент в мета-тэгах включает в себя два компонента – описание и ключевые слова. В контент «description» следует внести лаконичное, но полное и понятное описание проекта либо текущей странички. Описание должно быть выполнено так, чтобы оно индивидуализировало страничку, выделяло ее среди прочих страничек во Всемирной Сети. Следующее мета-имя – «keywords» (ключевые слова), куда относятся термины, словосочетания и, реже, обрывки фраз, обеспечивающие быстрый и легкий поиск вашего ресурса пользователям Интернет. Придумывая ключевые слова, нужно подбирать их так, чтобы они:

> сообщали, о чем этот сайт;

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

При этом мета-тег «keywords» включает не свыше 800 знаков, а «description» – 200 знаков. Но практика показывает, что это многовато: веб-дизайнеры советуют использовать ключевых слов на 150–200 знаков и описание на 60-100 знаков. Обратим внимание, что тэг «Ключевые слова» может иметь разное оформление:

‹meta name =“title” content=“…”› или

‹meta name=“page-topic” content=“…”›

Нежелательно копировать сюда содержание тэгов ‹title› и «description». Кстати, мета-имя «description» тоже обладает другой формой записи: ‹meta name=“abstract” content=“…”›.

Не все, что вставляется в «шапку», относится к рекламе и командам для робота. Сюда входят и другие тэги, из которых мне хотелось бы отметить ‹title› – заголовок страницы. Посмотрите вновь на рис. 12, на титульный тэг. Иллюстрация показывает, какой эффект дает ‹title›: это название страницы, отображаемое поисковиком и броузером. По длине тэг не должен превышать 70–75 символов (это примерно 20 слов). Чем длиннее тэг, тем труднее вашу страничку сохранить на ПК пользователя. По собственному опыту знаю, что сохранить на свой ПК полюбившуюся страничку с названием более чем из 7 слов в Internet Explorer уже невозможно.

Лучше познакомимся с кодом body документа. На многих сайтах случается видеть указания: «сделать стартовой» или «добавить в избранное». Это ценные указания, которые помогают юзеру не забывать про ваш ресурс, часто бывать на нем и рекомендовать друзьям. А самое главное, такие надписи уже подчеркивают значимость ресурса. Запишем код этих команд.

Добавить в избранное: ‹a href=“#” onClick=“window.external.addFavorite('URL', 'title'); return false;”›сюда текст или рисунок‹/a›. Сделать стартовой: ‹a onclick=“this.style.behavior='url(#default#homepage) ;this.setHomePage('URLSite'); return false;” href=“#”›сюда текст или рисунок‹/a›

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

‹a href= – вот таким значком. Потом вношу команду: “#” onClick=“window.external.addFavorite('URL', 'title'); return false;”›

Теперь указывает свойства рисунка, изображающего сердечко: ‹img width=468 height=60 border=0 – это указание размеров, как нам известно, а после них ставится:

alt=“Добавить в избранное” – альтернативный текст, обозначаемый сокращением alt. Этот текст появляется при наведении курсора на рисунок (см. рис. 13). Также альтернативный текст можно видеть на загрузившейся страничке, картинки которой пока еще запаздывают с загрузкой. И заканчивает описание рисунка вот это:

src=“images.files/herz.gif”› – наименование его самого и папочки, в которой он расположен. После закрываем ссылку тэгом ‹/a›. Попробуйте сами, проще не бывает!

И уж если речь пошла о ссылках, то надо именно сейчас рассказать об этой основе гипертекста, главном достоинстве HTML. Все ссылки имеют вид ‹a href=“адрес”›видимое посетителю название‹/a›. Вместо текста можно поместить картинку, которая станет кликабельной (как баннер, например). При этом ссылка примет вид: ‹a href=“адрес”›‹img srс=“адрес графического файла”›‹/a›. Страничка, на которую мы переходим, может открыться в этом же окне, а может в новом. Чтобы открыть ее в новом окне, нужно в теге ‹a href› установить атрибут target= со значением “_blank”: ‹a href=“адрес” target=“blank”›видимое посетителю название‹/a›. Значение “_self” открывает новую страничку в старом окне броузера, однако писать такую команду необязательно: компьютер выполняет открытие в том же окне по умолчанию, то есть и в отсутствие комментариев.

Перечисленное необязательно делать вручную, визуальные редакторы хорошо пишут ссылки сами. Так, в Web Page Maker достаточно выделить изображение, кликнув на него, затем кликнуть на иконку «Гиперссылка» (Hyperlink) и в появившемся диалоговом окошечке набить адрес и выбрать значение атрибута target (см. рис. 14).

Ссылки по способу написания адреса различаются на абсолютные и относительные. Профессионалы советуют применять относительные ссылки. Например, вместо “http://obrazcats.narod.ru/index.html” достаточно написать просто “index.html”, и компьютер переместит юзера куда надо. Однако подобная простота хуже воровства. Мой собственный опыт показывает, что без указания папки легко находится единственно и только главная страничка, иногда еще несколько. Более трех адресов компьютер уже обслуживает с трудом, нередко отмечаются сбои. Впрочем, если вы усложнили физическую структуру узла, то вам уже необязательно писать в ссылке имена всех директорий. Так, вместо “http://obrazcats.narod.ru/pages/scripts/rain.html” можно записать лаконичное “pages/scripts/rain.html”, пропустив название корневой папки. Это удобно по ряду причин. Во-первых, уменьшает вес страничек, а во-вторых, позволяет менять адрес сайта, не меняя внутренних ссылок.

Закрывая тему ссылок, скажем несколько слов об их цвете. Цвет ссылок полагается указывать в тэге body, при этом выполняется запись: ‹body link=“#код цвета № 1” vlink=“#код цвета № 2” alink=“код цвета № 3”›. В этой записи используются атрибуты link – цвет неиспользуемой ссылки; vlink – цвет ссылки при наведении мыши; alink – цвет ссылки в момент клика. Разумеется, выставлять все цвета вовсе необязательно, обычно достаточными оказываются два – цвет простой ссылки (синий) и цвет использованной ссылки (фиолетовый). Профи не советуют экспериментировать с цветами гиперссылки, ее внешний вид должен быть привычен и понятен для юзера. Само собой, нельзя пускать ссылку не подчеркнутой. И одновременно нельзя подчеркивать в тексте слова, не являющиеся гиперссылками.

О кодах цветов мы уже говорили. Каждый такой код представляет собой последовательность из шести знаков, которая на самом деле состоит из трех чисел, записанных в шестнадцатиричной системе счисления. При этом первые две цифры показывают значение красной составляющей, вторые две – зеленой, а третья пара – синей. Узнать коды можно из специальных справочников, в том числе публикуемых в Интернете (см. http://obrazcats.narod.ru/pages/txt/colors.html), а также самостоятельно – при помощи Фотошопа, в котором есть палитра цветов и оттенков с указателем их номеров (см. рис. 15).

Ссылки могут не только куда-то вести, но и помогать нам производить некоторые действия. Таковы ссылки для скачивания и почтовые ссылки. Рассмотрим сейчас первые из них. Допустим мы создаем страничку загрузок downloads. Запустим вновь Web Page Maker и создадим в нем страничку. Теперь кликнем на Insert (Вставить) на навигационной панели и выберем опцию Html Code or Script Code (см. рис. 16), чтобы перед нами появилось окошко редактора кодов. Сюда и нужно записывать дополнительные команды на языке гипертекста, которые мы хотим разместить на сайте. Производим запись ссылки для скачивания:

‹а class=act href=“download или имя другой папочки, где хранятся материалы для скачивания/название архива. rar”›Скачать книгу «Я. Нильсен. Веб-дизайн»‹/а›.

Несомненно в глаза вам бросилась надпись Script Code. Ранее в книге уже говорилось о скриптах – командах для броузера, которые позволяют добиться появления различных визуальных эффектов. Познакомимся с некоторыми скриптами, которые могут оказаться очень полезны в повседневной работе веб-дизайнера. Начнем с «украшательного», поскольку с такими, конечно же, интереснее работать. Предположим, что мы оформляем страничку сайта, посвященного осенней теме в русской поэзии, и нам понадобился для этих целей эффект дождя. Эффект дождя воспроизводит на экране падение сотен капель. Чтобы получить то же самое на своей страничке, нужно открыть ее html-код и вписать в body документа следующий скрипт: табл. 2. (Чтобы вам не пришлось корпеть над столбцом из непонятных значков длиной в несколько страниц, скрипт разбит на блоки и размещен в столбцах таблицы).

Чаще всего требуется поставить или убрать пробел между какими-то из значков, а этого на листе бумаги так просто не передашь. Внимательно следите за сообщениями вашего HTML-редактора. Как правило, при неверном написании цвет атрибутов меняется на неактивный, а также при просмотре конечного результата через обозреватель появляется надпись «Ошибка в строке такой-то…». Запомните или запишите номер строки, а потом, вновь открыв код, посмотрите, что в этой строке не так.[13] Возвращаемся к нашему скрипту: желательно вписать эту абракадабру в самом начале «тела» документа, так чтобы определение языка скрипта ‹script language=“JavaScript”› шло под тэгом ‹body›. Теперь сохраните изменения в документе и откройте веб-страничку через броузер. Вот как это получилось у меня: см. страницу http://obrazcats.narod.ru/pages/scripts/rain.html.

А пока сделаю ценное предупреждение. Все эти дожди, листопады, метели и т. д. страшно мешают читать текст. Кое-кого попросту раздражают. А на некоторых броузерах еще и не видны вдобавок. Вместо них появляется суровое предупреждение: «Активное содержимое страницы может ПОВРЕДИТЬ ВАШ КОМПЬЮТЕР» (хотя на самом деле не может). Неопытный юзер на ваш сайт после пережитого испуга ни за что в жизни не вернется.

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

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

Взаимное размещение отдельных контентов также требует соблюдения баланса. Опыт газетной верстки показывает высокую эффективность шаблона, разработанного советником по стратегиям Всемирной газетной ассоциации Дж. Чишольмом.[14] Опираясь на данные психологии, Чишольм составил карту распределения объема внимания на разных участках страницы (бумажной и электронной). Стопроцентной эффективностью при беглом просмотре не обладает ни один участок, однако есть наиболее продуктивные, которые способны заинтересовать читателя. Образец этой карты (на примере странички busbook.narod.ru/baikal.html) рассмотрен на рис. 17.

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

Нужно помнить о том, что не каждый компьютер в состоянии поддерживать экзотические шрифты. Вот почему следует пользоваться наиболее простыми и расхожими – такими, как Arial, Times New Roman, Tahoma, Verdana. Для пущей самобытности стиля можно применять различные гарнитуры, то есть вариации в рамках одного шрифта (например, Arial Black для заголовков). Вдобавок стоит использовать, где положено, разные начертания – курсив, полужирный и полужирный курсив, кроме подчеркнутого, поскольку последний напоминает гиперссылку и станет вводить юзеров в заблуждение на грани раздражения. Веб-дизайнеру не помешает изучать принципы тайп-дизайна (шрифтового дизайна), подсказывающие, как правильно использовать шрифты, чтобы обеспечить адекватное восприятие текста и поддержать заинтересованность читателя. Подбор шрифтов осуществляется с учетом используемых основных элементов текста.

К основным текстовым элементам относятся:

1) текст документа;

2) заголовок;

3) девиз, слоган, цитата;

4) контактные данные.

Базовый текст документа желательно набирать кеглем 10–14. Это область стандартных решений: легкочитаемые шрифты, преимущественно без засечек: Arial, Helvetica, Times New Roman.

Заголовок рекомендуется выполнять более крупным шрифтом, привлекающим внимание. В данном случае можно побаловаться трудно читаемым шрифтом с неординарной гарнитурой (Helvetica, Tahoma, Arial – без засечек, Baltica – c засечками). Впрочем, разумнее всего ставить заголовки в виде изображений или кодировать их на языке HTML, о чем мы поговорим ниже.

Девизы, слоганы и цитаты принято набирать шрифтами на 1–2 пункта меньше базового текста. Поскольку буквы такого размера мелки, их лучше пускать шрифтом без засечек – Helios, Helvetica, Arial, Tahoma. Показано пускать текст цитат курсивом, а слоганов – еще и полужирным курсивом, чтобы он стал более заметен.

Контактные данные включают в себя адреса, телефоны, имена и тому подобную информацию. Обычно эти сведения набираются шрифтом на 1–2 пункта больше базового текста, но допустимо пускать их такими же по размеру, однако при этом с полужирным начертанием.

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

Современные технологии позволяют подстраивать сайт под кегль (размер) и вид шрифта, удобные и доступные для пользователя. Новичку осилить подобные хитрости с ходу не удастся, поскольку для этого требуется изучение языка CSS. Вдобавок в ходе применения стандартных шрифтов подобные трудности вряд ли возникнут. Вот почему пока ограничимся только одним несложным кодом. Допустим, некоторые заголовки в тексте выполнены неброским, но красивым шрифтом Copperlate Gothic Bold синего цвета. Этот шрифт встречается едва ли не повсеместно, однако найдется немало юзеров, у которых ПК отобразить его не умеет. Для таких посетителей сайта пишется стиль:

‹style›

‹!-

Example{font-family: Copperlate Gothic Bold, Tahoma;

font-weight; bolder; font-size: 20 pt;

color: blue}

– ›

‹/style›

Запись font-family показывает, что в отсутствии шрифта Copperlate Gothic Bold броузеру надлежит применять шрифт Tahoma.

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

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

‹img src=“images.files/bukvica_s.gif” width=“ 120” height=“ 110” border=“ 0” align=“left” аlt=“С”›коро сказка сказывается, да не скоро сайт верстается…

Настоятельно рекомендуется установка атрибута align=“left”, чтобы текст обтекал буквицу. Обязательно поставить альтернативный текст, чтобы при медленной загрузке рисунка или при отключенной графике не приходилось гадать, какую букву изображает гиф.

Действенный способ обойтись без какой-либо графики, но при этом создать оригинальный текст, – применение фильтров и кодирование заголовков. Начнем с самого простого – закодируем заголовок. Для этого достаточно выделить в HTML нужный текст парными тэгами заголовков: ‹Н1›, ‹Н2›, ‹НЗ›, ‹Н4›, ‹Н5› и ‹Н6› (показаны в порядке убывания без закрывающих тэгов). Использовать заголовки выгоднее потому, что их обожают поисковики. Обилие заголовков с интересными фразами гарантирует приток к вам на ресурс посетителей. То есть заголовки для поисковых роботов имеют такое же значение, как и ключевые слова, при этом значимость заголовка тем выше, чем меньше его индекс: заголовок Н1 значит для робота больше, чем заголовок Н2 и уж тем более Н6. Каждому заголовку можно придать свойства, добавив атрибут style с подходящими значениями:

‹H2 style=“font-family: вид шрифта; font-size: размер (рекомендуется в процентах от базового); color: ваш цвет на английском”›ЗАГОЛОВОК‹/H2›

А теперь рассмотрим применение фильтров, благодаря которым мы можем получить своеобразные надписи. Из наиболее востребованных фильтров нужно назвать Blur, Shadow, DropShadow, FlipH, FlipV, Wave, Mask и Glow. Фильтр Blur придает буквам объемность, Shadow и DropShadow – разные виды теней, FlipH и FlipV – обеспечивают поворот слова (фразы) по горизонтали и вертикали соответственно, Wave – волнистость, Mask – показывает шрифт таким, словно бы он выделен курсором, а Glow – размытость краев. Ниже приводится запись этих фильтров, а на рис. 18 показан готовый результат. Все коды даны для надписи, пущенной по центру с параметрами width – 400, height – 60, font-size (размер) – 30pt, font-weight (начертание) – bold (полужирный), color – green (зеленый цвет).

Код для фильтра Blur: ‹p style=“filter: Blur(Add= 1', Direction= 30 , Strength= 10 ); width: 400; height: 60; font-size: 30pt; font-weight: bold; text-align: center; color: green”›ИНДУСТРИЯ‹/p›

Этот фильтр, как видно, реализуется за счет параметров Add (определяет степень размытия текста), Direction (направление размытия), Strength (смещение размытия). При этом возможны две степени размытия – 1 (умеренная) и 0 (сильная). Направление размытия задается числами от 0 до 315, поэкспериментируйте с ними и проверьте, что дает каждое из них.

‹p style=“filter: Shadow(Color= #000000 , Direction= 130 ); width: 400; height: 60; font-size: 30pt; font-weight: bold; text-align: center; color: green”›ЗАГАДКА ПРИРОДЫ‹/p›

Фильтр имеет параметры Color, задающий цвет тени, и Direction, задающий направление, в котором эта тень отбрасывается (опять-таки от 0 до 315).

‹p style=“filter: DropShadow(Color= #000000 , OffX= 3', OffY= 3', Positive= 130 ); width: 400; height: 60; font-size: 30pt; font-weight: bold; text-align: center; color: green”›ПЛЯШУТ ТЕНИ НА СТЕНЕ‹/p›

Та же тень, но более удаленная от текста, для чего и нужны параметры OffX – смещение по оси абсцисс, OffY – смещение по оси ординат, Positive – размещение тени справа или слева. При этом правой позиции соответствует значение 1, а левой позиции – 0.

‹p style=“filter: FlipH; width: 400; height: 60; font-size: 30pt; font-weight: bold; text-align: center; color: green”›КОРОЛЕВСТВО КРИВЫХ ЗЕРКАЛ‹/p›

Здесь комментарии излишни. FlipH можно свободно поменять на FlipV, чтобы получить поворот текста по вертикали.

‹p style=“filter: Wave(Freq= 5', Add= 0', LightStrength= 1', Phase= 2', Strength= 2'); width: 400; height: 60; font-size: 30pt; font-weight: bold; text-align: center; color: green”›БЕГУТ РУЧЬИ…‹/p›

Здесь мы встречаем массу новых параметров. Freq задает число волн, Add отображает или скрывает окантовку (в зависимости от значения – 0 или 1), LightStrength устанавливает силу волн, Phase показывает начальную фазу волны, ну а Strength – волнистость вообще, то есть интенсивность волн.

‹p style=“filter: Mask(Color='green'); width: 400; height: 60; font-size: 30pt; font-weight: bold; text-align: center”›ЧЕЛОВЕК-НЕВИДИМКА‹/p›

Предельно простой фильтр, имеющий лишь один параметр – цвет фона, окружающего буквы.

‹p style=“filter: Glow(Strength= 6', Color= #00FF00 ); width: 400; height: 60; font-size: 30pt; font-weight: bold; text-align: center; color: green”›ПОСЛЕ ДОЖДЯ‹/p›

Фильтр обладает двумя параметрами. Strength показывает интенсивность ореола, а Color – его окраску.

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

Говоря о спецэффектах, нельзя не вспомнить про динамические эффекты, из которых здесь будет рассмотрена бегущая строка. Она легко вставляется через Web Page Maker, в котором достаточно пройти путь Insert › Marquee – «Вставка › Бегущая строка». В диалоговое окошко всплывающего текстового редактора заносится фраза, которую мы хотим прокручивать (рис. 19). Словам строки можно придать разные цвет и начертание, а некоторые даже сделать гиперссылками. Так мы и поступим, внесем в редактор следующую фразу: «Компания „Сказочная роскошь“ предлагает вашему вниманию унитазы плюшевые (в широком ассортименте), скамеечки для ног золотые (с подогревом), самонаполняющиеся джакузи». Подчеркнутые слова будут ссылками, кликая на которые потенциальный покупатель сможет больше узнать о рекламируемом товаре. В коде документа данная запись принимает вид:

‹marquee width=… height=…›‹font style=“font-size:13px” color=“#000000” face=“Tahoma"›‹div›Компания «Сказочная роскошь» предлагает вашему вниманию ‹font color=“#0000ff”›‹i›‹a href=“http://www.skazka.ru/unitaz.html”›унитазы плюшевые‹/a›‹/i›‹/font› (в широком ассортименте), ‹font color=“#0000ff”›‹i›‹a href=“http://www.skazka.ru/skameika.html”›скамеечки для ног золотые‹/a›‹/i›‹/font› (с подогревом), ‹font color=“#0000ff”›‹i›‹a href=“http://www.skazka.ru/djakkuzi.html”›самонаполняющиеся джакузи‹/a›‹/i›‹/font›‹/div›‹/font›‹/marquee›

На этом можно было бы успокоиться, но Web Page Maker не дает нам полного управления бегущей строкой. Допустим, что мы захотели кое-что изменить в этом тексте. Во-первых, нас совершенно не устраивает движение словесной ленты справа налево. Затем мы найдем, что прокрутка неудобна для покупателя, поскольку ему приходится ловить ссылки. Вот почему наш идеал – сдвиг, при котором текст выкатывается на страничку из ниоткуда, движется до некоего предела, а потом замирает неподвижно. И конечно, нам хотелось бы отрегулировать скорость строки, а также как-то зрительно обособить ее от остального текста, например специфическим фоном и рамочкой. Для этого добавим к тэгу ‹marquee› следующие атрибуты:

‹marquee width=… height=… behavior=“slide” direction=“right” scrolldelay=“ 70” style=“border-style: double; border-width: 5; padding-left: 3; padding-right: 3; padding-top: 2; padding-bottom: 2” bgcolor=“#C0C0C0”›‹font style=“font-size:13px” color=“#000000” face=“Tahoma"›‹div›Компания «Сказочная роскошь» предлагает вашему вниманию ‹font color=“#0000ff”›‹i›‹a href=“http://www.skazka.ru/unitaz.html”›унитазы плюшевые‹/a›‹/i›‹/font› (в широком ассортименте), ‹font color=“#0000ff”›‹i›‹a href=“http://www.skazka.ru/skameika.html”›скамеечки для ног золотые‹/a›‹/i›‹/font› (с подогревом), ‹font color=“#0000ff”›‹i›‹a href=“http://www.skazka.ru/djakkuzi.html”›самонаполняющиеся джакузи‹/a›‹/i›‹/font›‹/div›‹/font›‹/marquee›

Атрибут «поведение» behavior имеет значение «сдвиг» – slide. Атрибут «направление» direction получил значение «направо» – right. Атрибут «задержка прокрутки» scrolldelay принят равным 70. Атрибут «стиль» style (который весьма вместителен и может включить в себя немало чего другого) содержит следующие параметры: стиль рамочки border-style – двойная (double), с шириной (border-width) 5 пкс, при отступе текста от рамки слева (padding-left) в 3 пкс, справа (padding-right) в 3 пкс, сверху (padding-top) в 2 пкс, снизу (padding-bottom) в 2 пкс. Цвет фона для бегущей строки задается атрибутом «фоновый цвет» bgcolor.

Разумеется, текст украшают не только буквицы и заголовки, но и аккуратное форматирование. Заветным желанием всех начинающих дизайнеров является сохранение текста в такой верстке, какая ему предана в Блокноте. Оказывается это возможно. Для данной цели вам потребуется заключить весь текстовый массив между тэгами ‹pre›‹/pre›, которые сохранят разбиение на строки, выполненное в блокноте. Разрывы между абзацами и принудительные переносы на новую строку удобнее всего не отбивать в визуальном редакторе, а помечать непарным тэгом ‹br› (не нуждается в закрытии).

Что касается непосредственно абзаца, то как вы могли видеть, для его верстки применяется два рода парных тэгов – ‹р›‹/р› и ‹div›‹/div›. Они почти одинаковы, так что применять вы можете в равной степени и тот и другой, вот только ‹div› – это новшество последних лет, ожидается, что он вытеснит собой ‹р›. Броузеры пока понимают оба тэга, но вот веб-редакторы пишут преимущественно ‹div›. И лучше переходить на новые тэги.

Главный атрибут тэга ‹div› (‹р›) – align=, обозначающий выравнивание. Выравнивание осуществляется по центру (center), по левому краю (left) и по правому краю (right). Например: ‹div align=“right”›А вот и я!‹/div›.

Другим важным способом организации текста является маркированный и нумерованный список, удобный для каких-либо перечислений. Он приятен для глаз и облегчает чтение большого массива информации. Задается маркированный список всегда парным тэгом ‹ul›‹/ul›. Каждый отдельный элемент, напротив которого стоит маркер, буква или число, полагается обозначать парным тэгом ‹li›‹/li›, который обладает тем удивительным свойством, что не требует к себе закрытия. То есть ‹/li› можно писать, а можно и не писать, греха в том не будет. Маркированный список задается в Web Page Maker через текстовый редактор точно так же, как в Word’е (см. рис. 20).

Но в этой программе маркер всегда является черным кружочком (Bullet style). Если нам нужно воспользоваться другим видом маркера – незакрашенным кружочком, квадратиком или картинкой-иконкой из папочки images.files, то нам придется научиться вносить свою правку в html-код. Пишем к тэгу маркированного списка атрибут стиля ‹ul style=“list-style-type:…;”›. На место многоточия нужно внести название выбранного нами маркера. Черный кружочек называется disc, но он нам не нужен, так как ставится программой самостоятельно. Незакрашенный кружочек обозначается словом circle, а квадратик – square. Если нам понадобилось поместить на место маркера картинку, то атрибуту придаем новое значение, меняя type (тип) на image (изображение): ‹ul style=“list-style-image: url( ваша папка для картинок/название рисунка. gif);”›.

Нумерованный список быстро и легко задается также через текстовый редактор в веб-конструкторе. Однако и в этом случае код знать полезно на случай внештатных ситуаций. Например, нам нужно поменять нумерацию с арабской на латинскую. Тогда мы открываем код и вносим правку в тэг ‹ol›. Изначально он не имеет атрибутов, поскольку арабская нумерация ставится по умолчанию. Мы подставляем type=“I” или “i”, что дает нумерацию римскими цифрами, прописными или строчными (обратите внимание на то, что арабский нумерованный список тоже может задаваться через type=, значение которого будет “ 1”). Аналогично задается буквенный список, атрибут которого принимает значение TYPE=“A” или “а”, что означает использование прописных или строчных латинских букв.

Если список разрывается, а потом возобновляется, нужно использовать атрибут start=. К примеру, если список оборвался на числе 15, то его продолжение мы начнем с записи ‹ol start=“16”›.

Напоследок скажем несколько слов про допустимые объемы контента. Здесь справедливо правило «магической семерки», как называется ключевой принцип минимизации текста, найденный опытным путем неутомимыми рекламистами: максимальное число букв в слове – 7, максимальное число слов в предложении – 7, максимальное число предложений в тексте – 7, максимальное число коротких абзацев (по 2–3 предложения) на странице – 7.[15]

С текстом мы разобрались, но сайт может говорить с нами не только через письменные слова, но и через звуковое сопровождение. Звуковое сопровождение бывает двух видов – фоновый звук и звук с проигрывателя. С проигрывателем все понятно. Посетитель заходит на сайт, видит интерфейс аудиоплейера и прокручивает запись, которую ему пообещали. Подобные трюки очень хороши для музыкальных и персональных ресурсов. Организовать нечто подобное у себя вы можете, открыв в Web Page Maker спецально для этих целей сверстанную вами страничку и пройдя путь Insert › Object › Audio, а затем выбрав нужный объект (см. рис. 21). Одна беда – этот проигрыватель запускает запись сразу, как только загрузилась страничка.

Откроем код документа, чтобы исправить это недоразумение. Размещение аудиофайла задается тэгом ‹embed› (он же может использоваться и для видео, если только видеоролик не имеет формата AVI). Здесь мы увидим, что тэгу по умолчанию присвоен атрибут autostart= со значением true, хотя для наших целей нужно другое – false. Производим замену. Проверяем правильность написания кода, внося по ходу и другие необходимые поправки, чтобы в конечном итоге тэг принял вид:

‹embed src=“адрес папки с аудиофайлами/название файла” width=… (введите нужное значение) height=… (введите нужное значение) autostart=false›

Значения ширины и высоты рекомендую оставлять именно такими, какие предложил конструктор, поскольку они обычно наиболее удобны. Обратите внимание: на рисунке нетрудно заметить, что название файла записано русскими буквами – «Титаник». Прежде чем импортировать такой файл, переименуйте его, записав буквами латинского алфавита, причем пользуйтесь только строчными буквами: «titanik». Почему так, вы узнаете позднее, из п. 5.2.

Перейдем к фоновым звукам на сайте. К сожалению, они сильно раздражают, мешают работать, а иногда и просто пугают своей неожиданностью и резкостью. Вот почему применять их следует вдумчиво и очень осторожно. Если перед нами ресурс, посвященный какой-нибудь эстрадной певице, но на главной странице или в фотоальбоме можно разместить звуковой фон (например, на одном из сайтов про Бритни Спирс звучит песенка «Oops, I did it again»). Но в остальных случаях звуковой фон почти всегда неуместен. Впрочем, на моем ресурсе есть страничка релаксации – на тот случай, если гостям захочется чего-нибудь оригинального (http://busbook.narod.ru/relax.html). Ссылка, ведущая туда, предупреждает, что нужно предварительно включить колонки или встроенный динамик, чтобы насладиться музыкой природы. На страничке размещается гиф с анимированным изображением водопада, а звуковым фоном служит приятный звук падающей воды – слушай, смотри, медитируй.

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