Лабораторная работа: Технологии создания гипертекстовых документов

Технологии создания гипертекстовых документов

Содержание

• © 2005 maillink("e-teach","mail","ru","Прохоров Виктор Сергеевич"); Рис.6. Страница сайта, содержащая ссылку на электронный адрес. Рис.6. Форма для электронного письма, которая открывается, если щелкнуть ссылку на электронный адрес. 6. ПРОВЕРКА ПОЛЕЙ ФОРМЫ ТЕХНОЛОГИЯ: Java Script ПОДДЕРЖКА: все распространенные браузеры с поддержкой Java Script. Часто на web-сайте размещают форму для отправки сообщений на e-mail: E-mail отправителя: Текст письма: Она состоит из полей ввода e-mail, текста и кнопки отправки данных серверному скрипту mail.php. Для формы и полей данных в атрибутах id и name указаны уникальные имена, которыми оперируют из JavaScript. С помощью события документа (action) onsubmit, возникающего при отправке формы, вызывают функцию JavaScript: function checkmailform() { if ( (document.forms.mailer.mailsender.value == null) || (document.forms.mailer.mailsender.value.length < 7) ) { alert("Заполните поле: E-mail отправителя"); document.forms.mailer.mailsender.focus(); return false; } if (! (/w+@w+.[a-z]{2,4}/.test(document.forms.mailer.mailsender.value)) ) { alert("Введите правильный e-mail адрес"); document.forms.mailer.mailsender.focus(); return false; } if ( (document.forms.mailer.mailtext.value == null) || (document.forms.mailer.mailtext.value.length < 10) ) { alert("Заполните поле: Текст письма"); document.forms.mailer.mailtext.focus(); return false; } return true; } Функция делает три проверки: ● введен ли текст в поле «E-mail» и не меньше ли он 7 символов; ● является ли адрес правильным e-mail-адресом; ● введен ли текст сообщения и не меньше ли он 10 символов. Если хотя бы одна из проверок не пройдена, пользователь получает сообщение об ошибке. Если проблем не обнаружено, скрипт не мешает отправке данных. Листинг 6_form_check - Проверка полей формы для отправки сообщений на e-mail. Форма отзыва // E-mail отправителя: Текст письма: Рис.7. Отображение формы для отправки сообщений на e-mail. Рис.8. Сообщение о неправильно введенном адресе электронной почты (пропущена собака). 7. ПОВЫШЕНИЕ УДОБСТВА РАБОТЫ С ФОРМАМИ ТЕХНОЛОГИЯ: Java Script ПОДДЕРЖКА: все распространенные браузеры с поддержкой Java Script. Форма поискового запроса размещена на каждой странице современного сайта. Не всегда дизайнер может выделить для нее достаточно места, и тогда приходится разъяснять назначение формы текстом внутри нее. Это допустимое решение, но трудно осуществимое. Чтобы отправить поисковый запрос, пользователю приходится кликнуть внутри формы мышью, выделить объяснительный текст, удалить его уже с клавиатуры, вписать свой поисковый запрос и нажать кнопку поиска или «Enter». Простой код на JavaScript избавляет посетителя от этих многочисленных действий: Эта форма передает запрос серверному скрипту search.php. Форма состоит из текстового поля для ввода запроса и кнопки отправки данных на сервер. Фраза «Поиск», вписанная в текстовое поле, задана атрибутом value. С помощью события документа onfocus запускают код на JavaScript. Можно использовать событие onclick, срабатывающее при клике на элементе, но оно менее универсально. В любом случае событие запускает программный код. В этот раз код не вынесен в отдельную функцию, а записан в качестве значения this.value = "" и фактически означает «установить значение текущего (this) поля равным пустоте». События обеспечивают большой простор для деятельности, например, есть форма, мимо которой посетитель не должен пройти: Используя onmouseover='this.value = ""; this.focus();', можно поймать курсор мыши, очистить форму ввода и переместить в нее курсор. Событие onmouseover срабатывает при прохождении курсора мыши над объектом, a this.focus() активизирует текущий объект. Листинг 7_input_reset - Формы поискового запроса. Форма поиска Рис.9. Формы поискового запроса – выбирайте лучшую! 8. ВЫПАДАЮЩЕЕ МЕНЮ ТЕХНОЛОГИЯ: Java Script, CSS ПОДДЕРЖКА: все распространенные браузеры с поддержкой Java Script и W3C DOM (IE5 и старше, Mozilla, Opera) Если на сайте много ссылок в меню, необходимо сделать его ниспадающим: Информация Новости Учебные планы Пчеловодство Об авторе Учебные дисциплины Схемотехника Теория информации Надежность, эргономика, качество АСОИУ Интернет-технологии Первый блок ссылок имеет уникальное имя navbodyl, второй — navbody2. Для каждого раздела при наведении мыши на элемент и уходе мыши с элемента вызывается функция JavaScript. CSS-оформление минимально: .navhead { font-weight: bold; background-color: #ccc; } #navbody1, #navbody2 { visibility: hidden; } Для navbodyl и navbody2 указано свойство visibility: hidden;. При этом JS получает номер блока и меняет его атрибут видимости: // При наведении мыши на блок активизируется функция menushow(menunum). Menunum — переменная, хранящая строку с номером меню. Функция выбирает элемент страницы, имя складывается из navbody и номера (menunum). Далее для элемента задается свойство visibility: visible. Функция menuhide() срабатывает, когда курсор мыши покидает область меню. Листинг 8_menu – Выпадающее меню. Выпадающее меню // .navhead { font-weight: bold; background-color: #ccc; } #navbody1, #navbody2 { visibility: hidden; } Информация Новости Учебные планы Пчеловодство Об авторе Учебные дисциплины Схемотехника Теория информации Надежность, эргономика, качество АСОИУ Интернет-технологии Рис.10. Выпадающее меню на экране монитора. ЗАДАНИЕ НА САМОСТОЯТЕЛЬНУЮ РАЗРАБОТКУ Используя решения, изложенные в приведенных примерах, разработать web-сайт, содержащий не менее трех страниц. Тематику сайта выбрать самостоятельно и согласовать с преподавателем. Тематика сайта может отражать Ваши научные интересы, хобби, направление деятельности компании, где Вы работаете и т.д. В процессе работы над web-сайтом у Вас возникнут интересные решения. Пополните ими эту коллекцию и используйте в своих последующих работах! ЛИТЕРАТУРА 1. Земсков Ю. Тайны гипертекста. CHIP SPECIAL 08.05. c. 26-31.