Иллюстрированный самоучитель по созданию сайтов :: Меню :: Главная [index.htm] 1. Как создают веб-страницы 1.1 Как создают веб-страницы 1.2. Как разместить веб-страничку на сервере 1.3. Как написать веб-страницу 1.4. Обзор программ для просмотра веб-страниц 1.5. Обзор программ для создания веб-страниц 1.6.(Часть-I) Создание веб-страниц при помощи программы Allaire Homesite/Cold Fusion 1.6.(Часть-II)Автоматизация ввода 2. Основные средства языка htmL 2.1. Простейшее форматирование текста 2.2. Самое главное на любой веб-странице — гиперссылки 2.3. Как создать списки на веб-странице 2.4. Создание таблиц 3. Графика на веб-странице 3.1.(Часть-I) Основные способы применения графики 3.1.(Часть-II)Изображение-карта 3.2. Графические форматы Интернета 3.3. Графические элементы оформления веб-страниц 3.4. Графические маркеры 3.5. Подготовка рисунков в программе Xara Webstyle 3.6.(Часть-I)Подготовка рисунков в программе Adobe Photoshop 3.6.(Часть-II)Украшение изображения мелкими деталями 4. Оформление веб-страницы с использованием стилей 4.1. Оформление с помощью атрибута STYLE 4.2. Определение стилей в специальной таблице 4.3. Обзор других возможностей стилевых таблиц 5. Использование звука на веб-странице 5.1. Добавление звукового оформления 5.2. Программы для сжатия звуковых фрагментов 5.3. Маленькие хитрости 6. Динамические веб-страницы на основе JavaScript 6.1. Простейшие примеры 6.2. Как писать собственные функции 6.3. Динамическое изменение внешнего вида страницы 6.4. Другие возможности языка JavaScript 7. Веб-страницы, реагирующие на действия пользователя 7.1. Ввод данных пользователем в формы htmL 7.2.(Часть-I)Страница, управляемая при помощи мыши 7.2.(Часть-II)Динамическое управление позиционированием элементов 7.3. Страница, управляемая с клавиатуры 7.4.(Часть-I)Динамическое отображение текста веб-страницы 7.4.(Часть-II)Использование других свойств при работе с текстом 7.5. Динамическое изменение графических элементов веб-страницы 8. Размещение элементов на веб-странице и навигация по сайту 8.1. Использование структуры фреймов 8.2. Управление расположением элементов веб-страницы с помощью таблиц 9. Дополнительные возможности формирования веб-страниц 9.1. Пример использования элемента управления Tabular Data 9.2. Пример простейшего серверного сценария Наш белый каталог сайтов | Добавить сайт Гостевая книга Контакты Добавить в избраное :: Друзья :: SiteUa - Створити свій сайт безкоштовно 1 авиабилеты в грецию стоимость | компрессор кондиционера :: Статистика :: - - 7.3. Страница, управляемая с клавиатуры А теперь давайте рассмотрим, как можно обрабатывать еще некоторые события, которые могут возникать при просмотре веб-страниц. Если в прошлом разделе мы в основном занимались обработкой событий мыши, то сейчас займемся событиями, связанными с клавиатурой. Действительно, в некоторых случаях бывает удобно использовать клавиатуру, например, для навигации по странице. В качестве примера давайте немного усовершенствуем словарь терминов. Не правда ли, логично было бы, если бы пользователь мог перейти к соответствующей букве алфавита, просто нажав клавишу с ее символом на клавиатуре? Реакция на нажатие клавиши Давайте попробуем реализовать эту возможность. Для начала назначим элементу обработчик событий, реагирующий на нажатие клавиш. Он называется onKeyPress: Теперь давайте напишем саму функцию press(), которая будет вызываться при нажатии какой-либо клавиши. Поскольку у нас в примере букв всего шесть (от А до Е), то пусть нажатие на эти клавиши будет перемещать нашу страницу к соответствующей букве. Нажатие на любую другую клавишу можно обработать как перемещение в начало файла. Обратите внимание на то, что для организации доступа к каждой букве (и к началу файла) нам не придется прикладывать никаких дополнительных усилий! Ведь мы уже ранее создали соответствующие якоря с помо щью тега <А>, и хотя они и не имеют атрибута ID=, у них есть атрибут NAME=, который тоже можно использовать для доступа к элементам. Итак, при нажатии на клавишу нужно проверить, какая буква была нажата. Это можно сделать, прочитав значение свойства window event keyCode. Оно равно ASCIIJ-коду нажатой клавиши. Например, если нажата клавиша с русской буквой а, то значение свойства window event keyCode равно 1072, то есть коду этой буквы. Таким образом, мы можем использовать оператор switch, чтобы назначить различные действия в зависимости от кода нажатой клавиши: switch(window.event.keyCode) { case 1072: // какие-то действия case 1073: // какие-то действия и т.д. Чтобы прокрутить страницу к заданному элементу, можно воспользоваться методом scrolllntoView( ). Например, если мы напишем document.all.BukvaA.scrolllntoView() ; то в результате страница будет прокручена так, что якорь BukvaA окажется в верхней части окна броузера. Учет раскладки клавиатуры Теперь надо подумать еще о том, что пользователь может забыть переклю- читься на русскую раскладку клавиатуры. Давайте не будем заставлять его это делать. Поскольку мы знаем, что на одной клавише с русской бук вой а расположена буква f, на одной клавише с б — знак < и т. д., мы можем осуществить проверку не только кодов букв а, б, в, г, д, е, но и кодов сим волов f, <, d, u, I, t. Можно написать, например, так: case 1072: case 102: document.all.BukvaA.scrolllntoViewO; break; case 1073: case 44: document.all.BukvaB.scrollIntoView() ; break; В этом случае прокрутка к букве а осуществится, даже если пользователь нажмет клавишу с буквой а или f, забыв переключиться на русскую рас-кладку клавиатуры. Аналогично можно осуществить прокрутку и к дру- им буквам. Чтобы при нажатии какой-нибудь иной клавиши вернуться началу файла, можно присвоить это возвращение случаю “default”: default”: document.all.Top.scrollIntoView(); break; Вот, собственно говоря, и все. Но чтобы изучить еще некоторые обработчики событий, давайте добавим еще эффект уменьшения яркости текста во время нажатия клавиши. Так обращают внимание пользователя на то, что “что-то происходит” (а именно: прокрутка). Для этого нужно использо-вать обработчики событий, реагирующие раздельно на нажатие и на отпускание клавиши. Они называются, соответственно: onKeyDown и onKeyUp: Теперь во время нажатия на клавишу цвет текста изменится на серый, а после отпускания клавиши — обратно на черный. Как видите, ничего сложного. Подсказка для читателя И в качестве последнего штриха давайте добавим подсказку для пользователя. Пусть, когда он начнет прокручивать страницу вручную (с помощью полосы прокрутки), в строке состояния отобразится такая подсказка: Вы можете перемещаться к нужной букве, используя клавиатуру'. Это можно сделать, используя обработчик событий, реагирующий на прокрутку страницы (есть и такой!). Он называется onScroll: Кстати, один раз появившись, подсказка так и останется в строке состояния, но в данном случае в этом нет ничего плохого. Строка состояния — место не самое заметное, так что подсказка в ней выглядит вполне корректно. Вот чего делать не надо, так это использовать бросающиеся в глаза методы типа alert: В этом случае при попытке прокрутки страницы вручную пользователь < разу же получит окно-предупреждение. Если же он просто хочет почему- либо использовать ручную прокрутку, это окно будет его раздражать и мешать работе. Так что предыдущее решение как нельзя более подходит для данного случая — небольшая подсказка в строке состояния и все. Ладно, давайте посмотрим, что у нас получилось, здесь введено еще несколько усовершен ствований, связанных с использованием таблицы стилей. Например, нет необходимости каждый термин заключать в теги <В> и . Вместо этого для тега

заранее определено стилевое свойство font-weight: bold;.