Контрольная работа: Создание тематического web-сайта с использованием методов CSS и языка Java Script

Рис.1. Схема навигации по web-сайту

3.2 Разработка интерфейса

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

При выборе данного сайта из множества других, ему подобных, мы сначала попадаем на страничку “index.html”.

Это страничка аутентифицированного входа на сайт, т.е. здесь необходимо ввести свой логин и пароль и нажать кнопку “Войти”. При неверном заполнении этих полей выдаются сообщения:

1. при неверном заполнении поля “Логин”

2. при неверном заполнении поля “Пароль”

При правильном заполнении полей происходит переход на главную страницу. А если данное посещение является первым, то следует выбрать ссылку “Зарегистрироваться”. При этом открывается страничка регистрации reg.html.

На данной странице выполняется регистрация посетителей. Для этого необходимо правильно заполнить обязательные поля: Фамилия, Имя, Отчество, Пол, E-Mail, Пароль, Подтверждение пароля, Дата рождения и Телефон, а также необязательные поля: ICQ и О Себе. Если вдруг посетителю понадобилось исправить всю информацию, то достаточно нажать кнопку “Очистить поля”.

Здесь я предусмотрел несколько проверок вводимых данных:

1. Не все обязательные поля заполнены!!!

2. Введите пароль!!!

3. Слишком короткий пароль!!!

4. Пароль не совпал!!! Повторите попытку!!!

5. Неверно введён адрес e-mail!!!

При этом выдаются соответствующие сообщения, аналогично странице index.html.

После завершения ввода данных, следует нажать кнопку “ОК”. После чего выдаётся следующее сообщение

и происходит переход на главную страничку.

На главной страничке слева и снизу расположены ссылки на страницы spec.html и news.html. А чуть правее – информация о факультете.

Аналогично главной странице, на spec.html расположены ссылки, только вместо Специальностей, справа – Объявления.

А news.html выглядит следующим образом: