Искусство оформления сайта. Практическое пособие
Шрифт:
Допустим, веб-дизайнер задумал сделать кликабельную картинку в виде сердечка, при наведении курсора на которое появляется надпись «Добавить в избранное», так что юзеру останется нажать на этот рисунок, чтобы внести ресурс в память компьютера. Для этого он пишет следующий код. Сначала открывает ссылку
‹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”› –
И уж если речь пошла о ссылках, то надо именно сейчас рассказать об этой основе гипертекста, главном достоинстве 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 – цвет ссылки в момент клика. Разумеется, выставлять все цвета вовсе необязательно, обычно достаточными оказываются два – цвет простой ссылки (синий) и цвет использованной ссылки (фиолетовый). Профи не советуют экспериментировать с цветами гиперссылки, ее внешний вид должен быть привычен и понятен для юзера. Само собой, нельзя пускать ссылку не подчеркнутой. И одновременно нельзя подчеркивать в тексте слова, не являющиеся гиперссылками.
О кодах цветов мы уже говорили. Каждый такой код представляет собой последовательность из шести знаков, которая на самом деле состоит из трех чисел, записанных в шестнадцатиричной системе счисления. При этом первые две цифры показывают значение красной составляющей, вторые две – зеленой, а третья пара – синей. Узнать коды можно из специальных справочников, в том числе публикуемых в Интернете (см., а также самостоятельно – при помощи Фотошопа, в котором есть палитра цветов и оттенков с указателем их номеров (см. рис. 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.
13
Вот почему выгоднее не переписывать скрипты с книг, а копировать из Интернета. Все выложенные в этом издании скрипты, а также некоторые другие можно скачать в файлах формата *.txt с сайта «Образованные котята» .
А пока сделаю ценное предупреждение. Все эти дожди, листопады, метели и т. д. страшно мешают читать текст. Кое-кого попросту раздражают. А на некоторых броузерах еще и не видны вдобавок. Вместо них появляется суровое предупреждение: «Активное содержимое страницы может ПОВРЕДИТЬ ВАШ КОМПЬЮТЕР» (хотя на самом деле не может). Неопытный юзер на ваш сайт после пережитого испуга ни за что в жизни не вернется.
3.3. Сила слова
Сеть – это область текстовых массивов, разбитых на маленькие блоки. Подача внушительного массива на одной страничке неоправданна, если только нам заранее не известно, что читатель намеревается не наслаждаться данным текстом, а работать с ним. Скажем, текст какого-нибудь закона проще выложить на одной страничке, чтобы бедный читатель не метался со ссылки на ссылку, а спокойно скопировал себе весь закон за один присест, чтобы потом, отключив модем, внимательно изучить каждый пункт данного правового акта.
Всегда на страничке должна преобладать информация, представляющая интерес для пользователя. Она должна бросаться в глаза и быть пространственно обособленной от прочих сообщений. Это еще одна причина, почему не следует бояться пустых, «белых» областей, считая их бесполезной тратой пространства. Вдобавок к тому слова и картинки должны визуально уравновешивать друг друга, иначе композиция страницы окажется дисгармоничной. Дело в том, что каждый объект на белом или цветном полотне обладает визуальным «весом», а потому ищет противовес.