Руководство по эксплуатации программного средства
Разработанный Web-сайт “Sport” основан на блочной структуре данных. На главной странице Web-сайта размещены блоки, каждый из которых имеет свой собственный стиль оформления. В первом блоке содержится титульная информация, во втором – меню сайта. В третьем блоке представлена основная информация сайта. Главная страница сайта приведена на рисунке 2.1.
Для того чтобы загрузить Web-сайт, необходимо запустить файл index.html, с помощью одного из установленных на компьютере браузеров.
Рисунок 2.1 – Главная страница сайта
При создании сайта использовались каскадные таблицы стилей – CSS (внедренные, внутренние и внешние таблицы стилей) для оформления Web-страниц сайта в едином стиле, а также для реализации динамических эффектов. Пример динамического эффекта, созданного средствами CSS, является изменение цвета ссылки при наведении на нее курсором (рисунок 2.2).
| |
Рисунок 2.2 – Изменение цвета ссылки
При создании сайта также использовались динамические эффекты, реализованные при помощи языка JavaScript. Примеры использования скриптов приведены на рисунке 2.3 и 2.4.
Рисунок 2.3 – Скрипт “Текущее время”
Рисунок 2.4 – Скрипт “Хвостик”
Для того чтобы перейти на раздел сайта “Футбол”, необходимо выбрать соответствующий пункт меню (рисунок 2.5).
Рисунок 2.5 – Страница “Футбол”
На данной странице приведен перечень основных новостей футбола. Для более подробного ознакомления с интересующей статьей необходимо перейти по ссылки на новую страницу. Для этого необходимо нажать на ссылку в заголовке статьи. Пример просмотра статьи приведен на рисунке 2.6.
Рисунок 2.6 – Просмотр статьи “Когда гостям совсем не рады…”
Для возврата на предыдущую страницу в конце статьи имеется соответствующая ссылка (рисунок 2.7).
Рисунок 2.7 – Ссылка для возврата в раздел “Футбол”
Для того чтобы перейти на раздел сайта “Хоккей”, необходимо выбрать соответствующий пункт меню (рисунок 2.8).
Рисунок 2.8 - Страница “Хоккей”
На данной странице приведен перечень основных новостей хоккея. Для более подробного ознакомления с интересующей статьей необходимо перейти по ссылки на новую страницу. Переход осуществляется аналогичным образом, который был рассмотрен в разделе “Футбол”.
Для того чтобы перейти на раздел сайта “Баскетбол”, необходимо выбрать соответствующий пункт меню (рисунок 2.9).
Рисунок 2.9 - Страница “Баскетбол”
Структура данной страницы аналогична двум страницам, рассмотренным ранее.
Вид страниц “Теннис” и “Формула 1” приведены на рисунке 2.10 и на рисунке 2.11.
Рисунок 2.10 - Страница “Теннис”
Рисунок 2.11 - Страница “Формула 1”
Для того чтобы перейти на раздел сайта “Другие”, необходимо выбрать соответствующий пункт меню (рисунок 2.12).
Рисунок 2.12 - Страница “Другие”
На данной странице приведен перечень новостей из видов спорта не вошедших в рассмотренные разделы, а также новости, касающиеся спорта в целом.
Для того чтобы перейти на раздел сайта “Гостевая книга”, на сайте имеется ссылка, расположенная над меню в левой части экрана. Вид окна гостевой книги приведен на рисунке 2.13.
Рисунок 2.13 - Страница “Гостевая книга”
В гостевой книге необходимо указать:
- тип отправляемого сообщения;
- раздел спорта, к которому относится сообщение;
- текст сообщения;
- фамилию;
- электронный адрес.
При вводе в поле “Фамилия” отображаться будут только символы кириллицы, все остальные символы ввести не возможно.
При отправке сообщения имеются проверки на правильность формата введенного адреса электронной почты, а также проверка, что необходимые поля были заполнены.
Данные проверки на корректный ввод осуществлялись при помощи JavaScript.
На рисунке 2.14 приведен пример, когда не все поля формы заполнены.
Рисунок 2.14 – Некорректное заполнение формы
При нажатии на кнопку отправить выводится соответствующее сообщение об ошибке (рисунок 2.15).
Рисунок 2.15 – Ошибка, когда не все поля заполнены
На рисунке 2.16 приведен пример, когда введенный электронный адрес не соответствует необходимому формату.
Рисунок 2.16 – Некорректный ввод электронного адреса
При нажатии на кнопку отправить выводится соответствующее сообщение об ошибке (рисунок 2.17).
Рисунок 2.17 – Ошибка, когда введен неверный формат почты
Корректный ввод данных приведен на рисунке 2.18.
Рисунок 2.18 – Правильное заполнение гостевой книги
Заключение
В результате выполнения расчетно-графического задания был разработан информационный динамический Web-сайт по тематике “Спорт”, позволяющий получить полную и достоверную информацию о событиях, происходящих в мире спорта.
Данный Web-сайт содержит элементы дизайна, реализованные с помощью языка HTML, такие как, формы, таблицы, фреймы, карты изображений, графика и мультимедиа.
Помимо этого, осуществлялось использование каскадных таблиц стилей – CSS (внедренные, внутренние и внешние таблицы стилей) для оформления Web-страниц сайта в едином стиле. При помощи таблиц стилей также были реализованы динамические эффекты, фильтры и блоковые элементы.
Для организации динамических эффектов были использованы различные элементы языка управления сценариями JavaScript. Такие как, проверка вводимых данных в поля формы, вывод на экран текущего времени и динамические эффекты с курсором мыши.
Web-сайт также содержит гостевую книгу для связи с посетителями. Была организована обработка данных пользователя из форм на стороне клиента средствами языка JavaScript (проверка заполненности обязательных полей, проверка на корректный ввод полей “фамилия” и “электронный адрес”).
Таким образом, цель расчетно-графического задания по закреплению теоретических знаний и приобретению практических навыков разработки динамических Web-сайтов достигнута.
| |