Руководство по эксплуатации программного средства

 

Разработанный 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-сайтов достигнута.