Текст книги "Искусство оформления сайта. Практическое пособие"

2.5. Программы для работы с текстом

Программы для обработки текста носят название текстовых редакторов. Чаще всего веб-дизайнер при составлении контента использует тексты, набранные в Microsoft Word. Word облегчает обработку и, самое главное, корректуру текста. Тщательно отредактированный в этой программе файл желательно вставить в Блокнот и сохранить там как документ *.txt в кодировке ANSI.

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

И напоследок назову Microgetics Font Effects, представляющий собой программу для создания оригинальных логотипов и заголовков для Web с использованием различных шрифтов. Впрочем, сложные логотипы, которые впоследствии придется переделывать под Web, удобно создавать и в другом продвинутом «софте». На меня произвели впечатление программы «AAA Logo» и «Green Box Logo».

2.6. Броузеры

Броузер (браузер) – это программа для просмотра документов, размещенных в Интернете. Тому, кто хочет вести персональную страничку, вполне достаточно одного броузера. Но для серьезной работы нужно установить на ПК несколько программ такого рода. Многие рекомендуют Internet Explorer (потому что он стандартный), Mozilla Firefox (потому что он обрел в последние несколько лет бешеную популярность) и Opera (потому что она нетипичная, сильно отличается от остальных). В ходе разработки сайта используется только один броузер, но когда ресурс почти готов, его следует открыть поочередно во всех трех программах, что позволит выявить недочеты и ошибки, незаметные в одной программе.

Полезный совет: на многих компьютерах жесткий диск (винчестер) разбит надвое, то есть имеются диски C и D. Начинающий юзер задается вопросом, зачем такие трудности, и в результате превращает «комп» в свалку. Дизайнер себе такого позволить не может. Диск D предназначается для хранения рабочих файлов – графики, html, текстов и прочих материалов, с которыми приходится иметь дело. Диск С предназначается только для программ, включая и дизайнерские. Автоматически машина стремится сохранить какой-нибудь рабочий файл на диске С в папочке «Мои документы». Когда вы не знаете, куда лучше сохранить свой файл, поступайте, как велит машина: это позволит не искать долго ваш файл впоследствии. Но когда найдете подходящую директорию на диске D, немедленно перебросьте туда свой файл. И дело даже не столько в порядке, сколько в безопасности. Во-первых, в случае системного сбоя рабочие файлы на С будут безнадежно разрушены. Во-вторых, есть риск, что системный сбой произойдет сам собой, если «комп» ошибочно примет рабочий файл за программный.

Глава 3. Сайт – инструмент для работы

3.1. Ответы на вопросы: «зачем» и «как»

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

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


[Закрыть] Так, издательство работает главным образом с четырьмя группами посетителей:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Главное меню рекомендуется располагать вверху странички, под главным рисунком и логотипом, причем желательно все пункты разложить в строку. Второстепенное меню встраивается сбоку, обычно слева. Главное меню иногда, при развитой структуре сайта, стоит снабдить выпадающими, или всплывающими подменю (см. рис. 10). Единственный минус подменю состоит в сложности реализации, поскольку для этого требуется писать скрипты, то есть команды. Но зато и публику удастся порадовать, поскольку выпадающее подменю повышает скорость работы с сайтом. Например, писателям очень удобно пользоваться меню, в котором пункт «Авторам» разбивается в подменю на три подпункта: «Постоянным авторам»,[12]12
  Иной раз полезно ТРИЖДЫ ПОДУМАТЬ, а уже потом что-то писать. Например, сюда так и просятся слова «Старые авторы», но лучше таких авторов назвать постоянными. Как по-вашему, приятно ли будет какой-нибудь тридцатилетней поэтессе услышать про себя, что она – старуха?!


[Закрыть] «Новым авторам», «О наших авторах». Заметим, что пункт «О наших авторах» должен присутствовать и в подменю к пункту «Об издательстве»: хорошие авторы – это живая реклама.

Рис. 10. Выпадающее подменю (образец)

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

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

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

«Вы на ‹…›-й странице. Все страницы: 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, но думать за других – не самое благородное занятие);

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

Рис. 11. Эскиз сайта, выполненный в CorelDraw

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

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

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

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

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

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

3.2. Язык HTML

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

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

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

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

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

Рис. 12. Структура html-кода простейшего документа

Запись кода тривиальна, в теле имеются всего две строки. Первая описывает рисунок: ‹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›. Попробуйте сами, проще не бывает!

Рис. 13. Пример альтернативного текста (воображаемый сайт)

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

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