<< Пред. стр.

стр. 9
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

будьте разместить таблицу между тегами div, кото-
рые вставляют элемент в слой.
Обратите внимание на тег div, у которого свойство
id задает ID слоя, чрезвычайно важный для
JavaScript-функций, приведенных выше. В значении
атрибута style обратите внимание, как размещение
слоя выражается в виде смещений от левой и верхней
границ.
Значения атрибутов width и height задают физичес-
кие размеры слоя. Ширина, равная 152, получилась,
исходя из ширины навигационной панели (7 60 пиксе-
лов) , деленной на число основных категорий, пять.
Высота, равная 114, - это высота элемента меню (19
пикселов), умноженная на число элементов в меню,
шесть (включая ссылку Close (Закрыть)). Высота слоя
Строим Web-сайты
84

изменяется в зависимости от высоты каждого элемен-
та меню и общего числа элементов в меню. Число 19,
используемое в качестве высоты каждого, элемента ме-
ню, не высечено в камне. После того, как вы пора-
ботаете с размером и форматом каждого меню для раз-
мещения на вашем сайте, не забудьте соответствую-
щим образом изменить значение высоты.
Обратите внимание, что значение атрибута visibili-
ty установлено в hidden, что делает слой невидимым
по умолчанию. —>
<div id="menul" style="position: absolute; lefts
Opx; top: 19px; width: 152px; height:114px; visi-
bility: hidden;">
<table width="152 border="0" cellpadding="O"
cellspacing="O">
<tr>
<tdxa href="path01">Subcategory l</ax/td>
</tr>
<tr>
<tdxa href="path02">Subcategory 2</ax/td>
</tr>
<tr> • •

< t d x a href="path03">Subcategory 3</ax/td:>
</tr> '
<tr>
< t d x a href="path04">Subcategory 4</ax/td>
</tr>
<tr>
< t d x a href ="path05">Subcategory 5</ax/td>
</tr>
<!— Эта строка содержит элемент Close (Закрыть)
внизу меню. Щелчок на этой ссылке запускает функцию
doHide. Ссылка передает ID меню для закрытия. — >
<tr>
<tdxa href =" javascript :doHide ( 'menul' ) ;"
>Close</ax/td>
</tr>
</table>


<!— Этот элемент div содержит второе открывающееся
меню. Оно работает так же, как и первое. — >
85
ГЛАВА 10. Создание открывающихся меню

<div id="menu2" style="position: absolute; left:
152px; top: l-9px; width: 152px; height: 114px; vis-
ibility: hidden;">
<table width="152" border="0" cellpadding="O"
cellspacing="0">
<tr>
<tdxa href="path06">Subcategory l</ax/td>
</tr>
<tr>
<tdxa href="path07">Subcategory 2</ax/td>
</tr>
<tr> . .-
<tdxa href = "path08">Subcategory 3</ax/td>
</tr>
<tr>
<tdxa href="path09">.Subcategory 4</ax/td>
</tr>
<tr> '
<tdxa href="pathlO">Subcategory 5</ax/td>
</tr>
<tr>
< t d x a href = " javascript :doHide ( 'menu2 ' ) ; "
>Close</ax/td>
</tr>
</table>


<!— Этот элемент div содержит третье открывающееся
меню. —>
<div id="menu3" style="position: absolute; left:
304px; top: 19px; width: 152px; height: 114px; vis-
ibility: hidden;">
<table width="152" border="0" cellpadding="O"
cellspacing="O">
<tr>
<tdxa href="pathll">Subcategory l</ax/td>
</tr>
<tr>
<tdxa href="pathl2">Subcategory 2</ax/td>
</tr>
<tr>
Строим Web-сайты
86

<tdxa href ="pathl3">Subcategory 3</ax/td>
</tr>
<tr>
<tdxa href ="pathl4">Subcategory 4</ax/td>
</tr>
<tr>
<tdxa href="pathl5">Subcategory 5</ax/td>
</tr>
<tr>
<tdxa href = " javascript :doHide ( 'menu3 ') ; "
>Close</ax/td>
</tr>
</table>


<!— Этот элемент div содержит четвертое открываю-
щееся меню. —>
<div id="menu4" style="position: absolute; left:'
456px; top: 19px; width: 152px; height: 114px; vis-
ibility: hidden;">
•stable width="152" border="0" cellpadding=":"
cellspacing="O">
<tr>
<tdxa href="pathl6">Subcategory l</ax/td>
</tr>
<tr>
<tdxa href = "pathl7">Subcategory 2</ax/td>
</tr>
<tr>
<tdxa href ="pathl8">Subcategory 3</ax/td>
</tr>
<tr>
<tdxa href="pathl9">Subcategory 4</ax/td>
</tr>
<tr>
<tdxa href="path20">Subcategory 5</ax/td>
</tr>
<tr>
<tdxa href =" ja\rascript :doHide ('menu4 ') ;"
>Close</ax/td>
ГЛАВА 10. Создание открывающихся меню 87

</tr>
</table>


<!— Этот элемент div содержит пятое открывающееся
меню. —>
<div id="menu5" style="position: absolute; left:
608px; top: 19px; width: 152px; height: 114px; vis-
ibility: hidden;">
<table width="152" border="0" cellpadding="O"
cellspacing="O">
<tr>
<tdxa href="path21">Subcategory l</ax/td>
</tr>
<tr> .
<tdxa href = "path22">Subcategory 2</ax/td>
</tr>
<tr>
<tdxa href="path23">Subcategory 3</ax/td>
</tr>
<tr>
<tdxa href="path24">Subcategory 4</ax/td>
</tr>
<tr>
<tdxa href="path25<">Subcategory 5</ax/td>
</tr>
<tr>
<tdxa href = " javascript :doHide('menu5') ; "
>Close</ax/td>


</table>


<!— И, наконец, таблица, создающая навигационную
панель. Это первый (и единственный) видимый элемент
на странице. Остальное содержимое спрятано в неви-
димых слоях. —>
cellpadding="O"
<table width="760" border="0
cellspacing="O">
<tr>
<td width="152">
Строим Web-сайты
88

<!— Событие onMouseOver возникает, когда посетитель
помещает указатель мыши над «горячей» точкой.
В данном случае горячей точкой является ссылка ряя
Category 1. Посетитель наводит указатель мыши на
эту ссылку, и браузер запускает функцию doShowHide,
передавая в функцию ID соответствующего меню. —>
<а href="path26" onMouseOver="doShowHids
('menul');">
Category 1


</td>
<td width="152">
<a href="path27" onMouseOver="doShowHid-;
('menu2');">
Category 2


</td>
<td width="152">
<a href = "path28" onMouseOver="doShowHi in
('menu3');">
Category 3


</td>
<td width="152">
<a href="path29" onMouseOver="doShowHide
" 'menu4 ' ) ; ">
(
Category 4


</td>
<td width="152">
<a href="path30" onMouseOver="doShowHide
('menu 5') ; " >
Category 5


</td>
</tr>
</table>
</body>
</html>
ГЛАВА 11.
Обеспечение путей отхода
Представьте, что вы вошли в комнату через дверь, а когда повернулись, чтобы выйти,
дверного проема уже не было. Вы бы не стали разрабатывать проект такого дома, кро-
ме как для карнавала. Однако в Интернете существует достаточное количество сай-
тов, похожих на павильон смеха, которые по существу делают то же самое - выбрасы-
вают посетителей на страницу, не предоставляя при этом пути назад.
Разработка хорошей навигации помогает предотвратить эффект павильона смеха.
Рассмотрим диаграмму на рисунке 11.1. В этой схеме навигации посетители перехо-
дят от страницы верхнего уровня к страницам нижних уровней шаг за шагом, удачно
разработанным, понятным, прямолинейным способом. Предоставление обратного
пути сводится к простому размещению на каждой странице нижнего уровня ссылки,
ссылающейся на следующую верхнюю страницу в структуре сайтадочно так же, как на
каждой странице верхнего уровня размещается ссылка на следующую страницу ниж-
него уровня.
Множество Web-сайтов не строго придерживается подобной прямолинейности.
На самом деле, хороший Web-сайт обычно является нелинейным, позволяя посетите-
лю выполнять большие скачки по структуре сайта в интересах скорости. Схемы, напо-
добие представленной на рисунке 11.2, совсем не редкость. В данном случае посети-
тель может попасть на страницу продукта несколькими различными путями: выпол-
няя переход по иерархии шаг за шагом, перейдя через раздел Specials (Специальные
предложения) или перепрыгнуть прямо на страницу продукта, воспользовавшись оп-
ределенными элементами на начальной странице.


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

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




Начальная страница




Музыка

±±
Страницы
исполнителей



Страницы продуктов


Рис. 11,1. Когда сайт построен с использованием линейного способа,
обеспечивайте связи в обоих направлениях: со страницы верхнего уровня
на страницу нижнего и со страницы нижнего уровня на страницу верхнего




Начальная страница




Музыка Специальные предложения




Страницы исполнителей




Страницы продуктов

Рис. 11.2. Нелинейный сайт предоставляет множество способов получения одной
и той же страницы. Предоставление обратного пути не является таким же простым,
как связывание страниц в обоих направлениях
ГЛАВА 1 1 . Обеспечение путей отхода 91

Если посетители потеряются, они воспользуются кнопкой Back (Назад) своего браузера,
который выполнит эту работу. Это также отвлечет их внимание от сайта и его содержимо-
го, что не очень хорошо. Это плохо и для посетителя, поскольку замедляется его работа.
Простая ссылка с использованием языка JavaScript полностью решает эту проблему:
<а h r e f = " j a v a s c r i p t : h i s t o r y . b a c k ( ) ; " > G o back</a>
Метод h i s t o r y . back работает точно так же, как и кнопка Back (Назад). Метод загру-
жает предыдущую страницу. Не имеет значения, какую дверь используют ваши посети-
тели, ссылка Go Back (Перейти назад) оставит открытой для них ту же самую дверь.


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




Совет
Сделайте так, чтобы ссылку Go Back (Перейти назад) было просто
найти, иначе ваши посетители будут просто использовать кнопку
Back (Назад) своего браузера, что делает бессмысленным размеще-
ние ссылки Go Back (Перейти назад) на странице.


Метод h i s t o r y . b a c k - это не единственный метод объекта h i s t o r y языка
JavaScript. В таблице 11.1 перечислены некоторые другие методы для справки, однако
применяйте их умеренно. Ссылка Go Back (Перейти назад) на самом деле очень полез-
на, однако ссылка Go Forward (Перейти вперед) или ссылка Go Two Steps Back (Перей-
ти на два шага назад) создают неразбериху.
Табл. 11.1. Методы объекта history языка JavaScript

Пример
Описание
Метод

history.back()
back() Переходит на один шаг назад

history.forward))
Переходит на один шаг вперед
forward()

Переходит на х шагов вперед (положитель-
history.go(3),
ное значение) или на х шагов назад (отри-
go(x)
history.go(-2)
цательное значение)
ГЛАВА 12.
Работа со скриптами и таблицами стилей
Интернет больше не описывается только языком HTML., Такая ситуация наблюдае в я
уже несколько лет. Даже если не принимать во внимание технологии, например, Д. [я
соединения с базой данных, и языки программирования сервера, например, РНР и
Cold Fusion, разработчики Web-сайтов полагаются на интерактивную мощь скриптов
и управление стилями каскадных таблиц стилей (Cascading Style Sheets - CSS), чтобы
сделать свои сайты более интерактивными и эстетичными. Если вы уже попробовали
некоторые инструментарии в данной книге, то заметили, что в них широко использу-
ются язык JavaScript и таблицы CSS.


Определение
Внедрение такого материала, как JavaScript- или CSS-кода, означает
его включение в HTML-документ. Присоединение означает сохране-
ние материала в отдельном файле и его последующее связывание с
Н TML -докумен том.


Используя на Web-сайте так много дополнительного материала, хорошо было бы пос-

<< Пред. стр.

стр. 9
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>