Министерство образования и науки Российской Федерации

Федеральное агентство по образованию

Саратовский государственный технический университет

О.А. Торопова, И.Ф. Сытник

ДОБАВЛЕНИЕ ИНТЕРАКТИВНОСТИ В WEB-СТРАНИЦУ

С ПОМОЩЬЮ JAVA SCRIPT

Учебное пособие

по курсам «Мировые информационные ресурсы», «Информационные технологии в маркетинге и коммерческой рекламе», «Информационные технологии»

для студентов специальности 351400

Саратов 2010

УДК 681.3.06

ББК 32.973.26

Т 61

Рецензенты:

Кафедра математической экономики Саратовского государственного университета им. Н.Г. Чернышевского

Доктор физико-математических наук, профессор Саратовского государственного социально-экономического университета

В.Н. Гусятников

Одобрено

редакционно-издательским советом

Саратовского государственного технического университета

Торопова О.А.

Т 61 Добавление интерактивности в web-страницу с помощью JAVA SCRIPT: учеб. пособие / О.А. Торопова, И.Ф. Сытник Саратов: Сарат. гос. техн. ун-т, 2009, 106 с.

ISBN 987-5-7433-2084-4

Содержит теоретический материал по основам web-дизайна. Дается характеристика современного состояния данной предметной области. Изложены основы языка Java Script, приведены многочисленные примеры готового, отлаженного программного кода и практические задания.

Предназначено для студентов, аспирантов и преподавателей экономических специальностей.

УДК 681.3.06

ББК 32.973.26

©Саратовский государственный технический университет, 2010

© Торопова О.А., Сытник И.Ф., 2010

ISBN 987-5-7433-2084-4

Введение

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

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

Жизненный цикл сайта состоит из следующих основных этапов:

• Проектирование структуры сайта.

• Разработка структуры и содержания страниц.

• Публикация на Web-сервере.

• Сопровождение - обеспечение работоспособности, возможно, дополнения и изменения содержания.

Три уровня web-документа

Говорят, что размеченный HTML-документ образует структурный уровень web-страницы.

Это основа, над которой надстраиваются уровень представлений: инструкции по передаче и отображению элементов и уровень поведения (скрипты и интерактивная работа).

Уровень представлений реализуется путем использования технологии CSS – каскадных таблиц стилей. Они определяют внешний вид документа.

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

Навигация

Навигация – это искусство перемещения из одного места в другое. Существует ряд средств осуществления навигации на странице:

• Текстовые ссылки

• Карты изображений

• Кнопки

• Навигационные элементы, вид которых меняется (ролловеры)

• Динамические и раскрывающиеся меню

• фреймы

При создании навигации, так же, как и при планировании структуры web-страницы, необходимо ответить на основные вопросы:

1. Где я нахожусь?

2. Куда я могу пойти?

3. Как я могу добраться туда, куда мне нужно?

То есть необходимо таким образом продумать структуру вашей страницы, чтобы пользователь мог легко ответить на данные вопросы, а также, желательно, и на дополнительные:

1. Был ли я здесь раньше?

2. Как вернуться обратно?

При создании сайтов необходимо учитывать те традиции, которые успели сложиться в области web-дизайна. Не отступайте от общих принципов построения интерфейса:

• У страниц должен быть заголовок (где я?);

• Навигационные элементы должны быть понятны, расположены на привычных местах;

• Текстовые ссылки должны быть продублированы в нижней части страницы для того, чтобы пользователю не пришлось проматывать страницу для перехода на следующую страницу;

• Применение на длинных страницах ссылок, возвращающих в верхнюю часть страницы;

• Необходимо предусмотреть специальные формы для вывода на печать у страниц, часто подвергающихся распечатке;

• То, на чем возможен выбор, синего цвета и подчеркнуто;

• Желательно наличие карты сайта – например, специальной страницы, содержащей в структурированном виде гиперссылки на все страницы;

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

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