Волзький університет імені В.Н. Татіщева
Факультет "Інформатика і телекомунікації"
Кафедра "Інформатика та системи управління"
розрахунково-графічної роботи
з дисципліни: "Web-технології"
на тему: "Створення тематичного WEB-сайту з використанням методів CSS і мови Java Script "
Виконав: студент гр.
Викладач:
Тольятті
Зміст
1. Постановка завдання
2. Вивчення предметної області
3. Реалізація поставленого завдання
3.1. Розробка навігації по сайту
3.2. Розробка інтерфейсу
Висновок
Додаток
1. Програмний код index.html
2. Програмний код reg.html
3. Програмний код main.html
4. Програмний код spec.html
5. Програмний код news.html
1. Постановка завдання
У своїй розрахунково-графічної роботі я буду створювати web-сайт факультету інформатики ВУіТ. Метою роботи є розробка зручного інтерфейсу сайту.
2. Вивчення предметної області
При створенні web-сайту необхідно передбачити наступні сторіночки і операції на них:
1. Аутентіфіцированний вхід на сайт (index.html);
2. Реєстрацію на сайті (для тих відвідувачів, які перший раз користуються даним сайтом) (reg.html);
3. Головну сторіночку факультету (main.html);
4. Сторіночку зі спеціальностями факультету (spec.html);
5. Сторіночку з оголошеннями (news.html).
На основі всього перерахованого вище будуть відбуватися подальші етапи розробки.
3. Реалізація поставленої задачі
У даному розділі моєї роботи описуються основні етапи розробки web-сайту.
3.1 Розробка навігації по сайту
Створення сайту припускає розробку структурної схеми - навігації сайту, таким чином, в даному розділі я опишу у вигляді схеми принцип функціонування розроблювального мною web-сайту. Ця схема представлена ​​на малюнку 1.
Рис.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 виглядає наступним чином:
Вона абсолютно аналогічна сторінкам main.html і spec.html. Праворуч на ній розташована інформація про події, що відбуваються з факультетом і деяких його новинах.
Висновок
У даній розрахунково-графічній роботі був розроблений web-сайт, що надає деяку інформацію про факультеті інформатики ВУіТ і його спеціальностях. В розробленому web-сайті організований аутентіфіцированний вхід на сайт, реєстрація відвідувачів, перегляд новин, перегляд інформації про факультет і спеціальностях.
Тим самим, поставлена ​​задача вирішена в повному обсязі.
Додаток
1. Програмний код index . html :
Вхід на сайт
Логін
Пароль
Зареєстровано
2. Програмний код reg.html:
Реєстрація
