<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>

размещаются различные элементы, на которых щелкает посетитель), иначе называе-
мая пользовательским интерфейсом (Front end)), и функция на языке JavaScript
(наспех написанная программа, которая заставляет работать меню переходов, также
называемая прикладной частью (Back end)). В инструментарии, приведенном в дан-
ной главе, демонстрируется, как создавать оба компонента.


Совет
Меню переходов -это приятная дополнительная возможность для
сайта, однако не доверяйте ей всю вашу навигацию. Не существует
замены для доброй, старомодной панели навигации.
63
ГЛАВА 8. Использование меню переходов

Что касается меню переходов, то существует два подхода. Первый подход заключает-
ся в использовании кнопки Go (Перейти) или чего-то еще, на чем посетитель может
щелкнуть после выбора страницы в меню. Ничего не произойдет, пока посетитель не
щелкнет на кнопке. Альтернативным подходом является использование самоактиви-
рующегося меню переходов. Это означает, что как только посетитель выбрал страни-
цу, меню переходов автоматически выполняет соответствующий переход.
Какой подход лучше? Трудно сказать. Если использовать кнопку Go (Перейти), веро-
ятность совершения ошибки посетилелями уменьшается. Если они решат, что не хо-
тят использовать меню переходов после того, как открыли его (на радость отдела рек-
ламы), или если они захотят открыть другую страницу после осуществленного выбо-
ра, кнопка Go (Перейти) предоставит им возможность выбрать другую страницу пе-
ред переходом. С другой стороны, для кнопки Go (Перейти) требуется дополнитель-
ный щелчок, что замедляет посетителей. Для самоактивирующегося меню переходов
необходим всего один щелчок, поэтому оно быстрее. Вы можете испытать оба типа
меню переходов на вашем сайте, чтобы увидеть, какой подходит лучше, но, если сом-
неваетесь, сделайте некую защиту от дурака и используйте кнопку Go (Перейти).

Инструментарий Меню переходов с кнопкой Go - пользовательский интерфейс
Этот фрагмент кода на языке HTML реализует пользовательс-
кий интерфейс вашего меню переходов.
<form naitte=" jumpmenu">
<select name˜"pages">
<!— Следующая строка'представляет первый элемент в
меню. Атрибут s e l e c t e d тега option означает, что
этот элемент появится по умолчанию в меню, когда
загрузится страница. — >
<option selected>Choose a page...</option>
<!— Следующая строка вставляет название раздела в
список элементов меню. При желании эту строку мож-
но удалить. —>
<option>First category</option>
<!— Следующими идут элементы меню переходов. В
качестве значения атрибута v a l u e укажите, пут.ь .к
странице, на которую вы желаете осуществить пере-
ход, например, aboutua/index.htm или .
../products/brochure.htm. Путь, как и гиперссыл-
ка, может быть абсолютным, относительно документа
или относительно корня. —>
<option value="firstpath">First page name
</option>
<option value="secondpath">Second page name
</option>
<option value="thirdpath">Third page name
</option>
64 Строим Web-сайты

<!— Повторите строки, наподобие представленных вы-
ше,' столько раз, сколько элементов меню вы хотите
видеть в данной части списка. —>
<option>Second category</option>
<!— Здесь- идут дополнительные элементы меню' пере-
ходов . Повторите эту строку столько раз, сколько
элементов меню вам необходимо, после чего закройте
тег select. —>
<option value="fourthpath">Fourth page
name</option>
</select>S
<!— Следующая строка добавляет кнопку на форму. —>
<input type="button" name="go" value="Go"
onClick="doJumpMenu();">
<!— Теперь закройте тег form и все готово. —>
</form>

Инструментарий Самоактивирующееся меню переходов - пользовательский
интерфейс
Используйте этот фрагмент кода на языке H T M L для размеще-
ния самоактивирующегося меню переходов на вашей странице.
<form name="jumpmenu">
<!— Следующая строка добавляет объект выбора, из-
вестный также как открывающийся список, на форму
и дает указание следить за событием onChange языка
JavaScript. Когда посетитель изменит значение фор-
мы, запустится функция перехода. —>
<select name="pages" oiiChahge="doJumpMenu();">
<!— Остальная часть формы выглядит и работает так
же, как и предыдущая форма. —>
<option selected>Choose a page...</option>
<option>First category</option>
<option value="firstpath">First page name
</option>
<option value="secondpath">Second page name:
</option>
<option value="thirdpath">Third page names
</option>
<option>Second category</option>
ГЛАВА 8. Использование меню переходов 65

page
value="fourthpath">Fourth
<option
name</option>
<!— Добавьте необходимое количество разделов и
элементов перехода. —>
</select>
</form>

Инструментарий Меню переходов - прикладная часть
Добавьте эту функцию на языке JavaScript на ваш сайт, чтобы за-
работало меню переходов. Данная функция одинакова как для
меню переходов с кнопкой Go (Перейти), так и для самоактиви-
рующихся меню переходов.
<script language="JavaScript">
/* Используйте теги s c r i p t только в том случае, ес-
ли вставляете эту функцию внутрь HTML-страницы.
Опустите теги s c r i p t , если вы добавляете эту функ-
цию во внешний JavaScript-файл. */
function doJumpMenu() {
var menu = document.jumpmenu.pages;;
/* Следующая строка получает значение атрибута
value для выбранного элемента меню. */
var menuValue = menu.options[menu.
selectedlndex].value;
/* Следующая конструкция if/then выполняет переход
на выбранную страницу, если значение атрибута value
не было пустым. */
if (menuValue != "") {
location.href = menuVaiue;



</script>




3-191
Строим Web-сайты
66

Меню переходов с графической кнопкой Go (Перейти) -
Инструментарий
Пользовательский интерфейс
Если вы желаете использовать графическую кнопку Go (Перей-
ти) вместо стандартной серой кнопки языка HTML, все, что не-
обходимо, - это разработать кнопку в любимой программе для
работы с графикой. Затем добавьте следующий фрагмент кода на
языке HTML на свою страницу, чтобы создать меню:
<form name="jumpmenu" onSubmit="return doJumpMenu
GraphicButtonf);">
<!— Тег form, расположенный выше, ожидает события
onSubmit, -чтобы выполнить скрипт меню переходов. — >
<!— Ниже представлено меню. Оно работает также, как
и все остальные. Добавьте желаемое количество р а з -
делов и элементов меню. —>
<select name="pages">
<option selectecbChoose a page...</option>
<option>First category</option>
<option v a l u e = " f i r s t p a t h " > F i r s t page name
</option>
<option value="secondpath">Second page name
</option>
value="thirdpath">Third page name
<option
</option>
<option>Second category</option>
<option value="fourthpath">Fourth page name
</option>
. </select>
<!- Здесь добавляется графическая кнопка Go (Перей-
ти). —>
<input type="image" name="go" src="imagepath"
width="imagewidth" height="imageheight" bor-
der="0">
</form>
ГЛАВА 8. Использование меню переходов 67

Инструме нтарий Меню переходов с графической кнопкой Go (Перейти) -
прикладная часть
Для меню переходов с графической кнопкой Go (Перейти) необ-
ходима немного отличающаяся функция на языке JavaScript.
Web-браузеры, например, Internet Explorer и Netscape, рассматри-
вают кнопки-изображения в качестве кнопок отправки данных -
когда посетитель щелкает на такой кнопке, браузер пытается
отправить форму, что нежелательно и в чем нет необходимости
для простого меню переходов. Эти небольшие дополнения в
функцию предотвратят отправку формы браузером.
<script language="JavaScript">
/* Если вы вставляете этот скрипт во внешний
JavaScript-файл, теги s c r i p t , находящиеся в начале
и в конце данного листинга, не нужны. Если вы
вставляете этот фрагмент кода в HTML-документ, ос-
тавьте теги s c r i p t , и добавьте код в -раздел head
вашей страницы. Ч
function doJumpMenuGraphicButton() {
var menu = document.jumpmenu.pages;r
/* Следующая строка получает значение атрибута
value для выбранного элемента меню. */
menu.options[menu.
var menuValue
selectedlndex].value;
if (menuValue == "") {
/* Следующая строка предотвращает отправку формы. */
return false;
} else {
/* Следующая строка выполняет переход на выбранную
страницу, если значение атрибута value не было пус-
тым . * /
location.href = menuValue;
/* Следующая строка предотвращает отправку формы. */
return false;



</script>
ГЛАВА 9.
Управление всплывающими окнами
В фэн-шуй Web-дизайна всплывающие окна подобны кабинету с углами странной фор-
мы, который не всем подходит. Некоторые люди никогда не любили всплывающие ок-
на, называя их враждебными по отношению к пользователю, считая их лично оскор-
бительными и полагая что их могут делать только люди, у которых нет других про-
блем. Однако всплывающие окна стали конкурентоспособными. Они заняли свое мес-
то в Web-дизайне. Всплывающие окна отлично подходили для вызова экранов помо-
щи, быстрых определений, расширенных описаний и других кусочков полезной, но
второстепенной информации, которая не заслуживала помещения на собственн\ю
страницу. При правильном использовании всплывающие окна помогали сделать схе-
му навигации более изящной и сфокусированной.



Определение
Всплывающее окно - это отдельное, обычно меньшее по размерам
окно браузера, в котором загружается предопределенная страница.




Позднее корыстные рекламодатели, вроде людей из отдела рекламы, взяли на воору-
жение всплывающие окна и превратили их в раздражающую сферу спама. Скоро вы не
сможете посетить какой-либо ресурс в Интернете без многократно повторяющихся,
сверкающих, медленно загружающихся окон с содержимым, едва имеющим отноше-
ние к сайту, которое вам не нужно, которое вы не запрашивали или не хотели полу-
чить. Поэтому всплывающие окна везде потеряли доверие, и дизайнеры не использу-
ют ихтю назначению. Необычно видеть всплывающие окна, содержащие существую-
щий сервис Web-сайта, в то время как продолжают открываться всплывающие окна с
рекламой.
Если вы желаете перевоспитать своих посетителей и иметь дело со случайными
электронными письмами, наполненными ненавистью, всплывающие окна все еще
могут оставаться ценным свойством вашего сайта. Они не стали менее полезными
для отображения второстепенного содержимого со времени, когда всплывающие ок-
на были на пике популярности. Они могут превратить во всех отношениях неудоб-
ный дизайн, как представленный на рисунке 9.1, в более понятный, как показано на
рисунке 9.2.
ГЛАВА 9. Управление всплывающими окнами 69




Рис. 9.1. В этом дизайне щелчок на термине приводит к загрузке страницы
с определением. Хорошая идея, но неуклюжая реализация. Посетитель вынужден
переходить по страницам взад и вперед, что прерывает поток основного текста




Collectively, the planets, moons,
solar system
(n.) ' comets, and other heavenly bodies in
orbit around a star




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

Хитрость заключается в эффективном использовании всплывающих окон. Вот нес-
колько руководящих принципов:
• Делайте их небольшими. Это относится к физическим размерам всплываю-
щего окна (которые можно контролировать) и к помещаемому в него объему
содержимого. Не пытайтесь его переполнять слишком большим количество ч
дизайна. Большие всплывающие окна с множеством изображений и сложны-
ми макетами могут слишком долго загружаться, что даст вашим посетителям
все причины полагать, что загружается моргающее приставание.
• Фокусируйтесь на его содержимом. Содержимое всплывающих окон долж-
но быть коротким и приятным. Если вы развернулись так, что появляется не-
обходимость создания в окне полос прокрутки, возможно, вам следует еще
раз подумать о своей стратегии. Помните, что всплывающие окна наилучшим
образом подходят для быстрого отображения второстепенной информации.
Большие порции информации находятся на законченных страницах вашего-
сайта.
• Не полагайтесь на них. Поскольку некоторые люди никогда не побеспокоятся
посмотреть на самое невинное, разработанное с умом всплывающее окно, не
используйте их для критически важного содержимого. В любом случае, эта ра-
бота ложится на основные страницы. Всплывающие окна приобретают бол ь-
ший смысл, выполняя вспомогательную функцию; например, коротенькие
страницы помощи.
Предоставьте управление посетителям. Не заставляйте всплывающие окна

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



Создание Всплывающих окон
Всплывающее окно на самом деле является такой же простой страницей, как и лю-
бые другие. Содержимое всплывающего окна помещается в HTML-файл, как это де-
лается для обычной Web-страницы, и в любом месте на сайте можно создать ссылку
на всплывающее окно. Однако вместо указания пути.к странице, как в случае обыч-
ной ссылки:
<а href="popup.htm">0pen t h e popup window</a>
мы направляем браузер на простую функцию, написанную на языке JavaScript:
<а href="javascript:doPopup('popup.htm');">0pen the popup win-
dow</a> •

Эта функция приказывает браузеру открыть страницу в отдельном окне, а не загру-
жать ее в основном окне. Вы можете написать собственный код на языке JavaScript,
выполняющий эту задачу, или можете использовать следующий код:
ГЛАВА 9. Управление всплывающими окнами 71

<script language="JavaScript">
function doPopup(popupPath) {
window.open(popupPath,'name',
'width=400,height=200,scrollbars=YES');
}
</script>
Вот и все. Инструкция window. open позаботится обо всем, если вы передали в функ-
цию правильный путь. Поэтому, если HTML-файл вашего всплывающего окна нахо-
дится не в той папке, где расположена вызывающая страница, следует отформатиро-
вать ссылку подобным образом:
<а href="javascript:doPopup('../help/info.htm');">Get help</a>
или любой возможный правильный путь. Вставьте путь между одинарными кавыч-
ками. Если передать в функцию неправильный путь, во всплывающем окне загру-
зится неожиданное содержимое или знаменитая страница File Not Found (Файл не
найден).
Язык JavaScript предоставляет достаточное количество возможностей для управления
размерами и поведением нового окна. Всплывающему окну можно присвоить уникаль-
ное имя, которое передается в инструкцию window, open в качестве второго пара-
метра, следующего за путем. Замените слово name в предыдущем скрипте на слово
popup, help, window, Charlie или любое другое слово, которое вам нравится.
За именем окна следует список свойств, в котором определяется внешний вид всплы-
вающего окна. В одной строке можно объединить столько свойств, сколько пожелае-
те, - просто отделяйте свойства друг от друга запятой и не вставляйте пробелы после
запятых. В таблице 9.1 приведены некоторые распространенные свойства.
Итак, если вы хотите для всплывающего окна отобразить поле адреса и строку сос-
тояния в функции doPopup ( ) , просто расширьте набор свойств, как в следующем
примере:
<script language="JavaScript">
function doPopup(popupPath) {
window.open(popupPath,'name',
'width=300,height=15 0,scrollbars=YES,location=YES,
status=YES');'


</script>
На рисунке 9.3 показаны различные части окна браузера, если вам необходимо осве-
жить память.
Строим Web-сайты
72

Табл. 9.1. Распространенные свойства всплывающего окна

Свойство Описание Пример
height Задает высот)' всплывающего окна в пикселах height=300

location Отвечает за отображение поля адреса во location=YES
всплывающем окне

menubar Отвечает за отображение строки меню во menubar=YES
всплывающем окне

resizable Позволяет посетителю изменять размер и фор- resizable=YES
му всплывающего окна

Отвечает за отображение горизонтальных и scrollbars=YEE
scrollbars
вертикальных полос прокрутки во всплываю-
щем окне, если необходимо

Отвечает за отображение строки состояния во status=YES
status
всплывающем окне

toolbar Отвечает за отображение Панели инструмен- toolbar=YES
тов во всплывающем окне

width Задает ширину всплывающего окна в пикселах width=150




Рис. 9.3. Вот части окна браузера: (А) Адресная строка, (В) Строка меню,
(С) Панель инструментов, (D) Полоса прокрутки, (Е) Строка состояния
ГЛАВА 9. Управление всплывающими окнами 73


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

<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>