Створення веб-сайту - Курсовая работа

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ Житомирський державний технологічний університет Факультет інформаційно-компютерних технологійТому й було поставлене завдання попрактикуватися у використанні цих засобів веб-розробки.Найчастіше використовується як частина браузера, що надає можливість коду на стороні клієнта (такому, що виконується на пристрої кінцевого користувача) взаємодіяти з користувачем, керувати браузером, асинхронно обмінюватися даними з сервером, змінювати структуру та зовнішній вигляд веб-сторінки. Мова JAVASCRIPT також використовується для програмування на стороні серверу (подібно до таких мов програмування, як Java і C#), розробки ігор, стаціонарних та мобільних додатків, сценаріїв в прикладному ПЗ (наприклад, в програмах зі складу Adobe Creative Suite), всередині PDF-документів тощо. Крім того, JAVASCRIPT має ряд властивостей, притаманних функціональним мовам, - функції як обєкти першого класу, обєкти як списки, каррінг (currying), анонімні функції, замикання (closures) - що додає мові додаткову гнучкість. JAVASCRIPT має С-подібний синтаксис, але в порівнянні з мовою Сі має такі корінні відмінності: · обєкти, з можливістю інтроспекції і динамічної зміни типу через механізм прототипів; JAVASCRIPT містить декілька вбудованих обєктів: Global, Object, Error, Function, Array, String, Boolean, Number, Math, Date, REGEXP.У PSD макеті, який я вибрав, має велику кількість елементів. Видно розмежування між верхньою частиною (хедером), центральною частиною (контент) та нижньою частиною (футером). Кожен блок містить ще по декілька блоків з елементами. Вагомим недоліком макету є відсутність відображення певних дій (наведення курсора на елементи, натискання на кнопки та посилання).Сайт поміщений у один блок, який розміщений по центру й фіксовано, відносно сторін браузера (Рис. Хедер починається з форми з трьома текстовими полями( пошукова система, поля введення логіна та пароля), кнопкою "входу" за своїм обліковим записом та посиланням "Регистрация", яке відкриває сторінку з формою реєстрації. Ліва частина має меню "Категории" з посиланнями, блок "Акція" з відображенням товару та ціни на нього, блок "Наши данные", який містить контактну інформацію. Другим блоком є "Каталог", який містить три посилання у правій частині заголовку, й повторювані блоки з зображенням та назвою товару, посиланням у вигляді кнопки "Купить", ціною, посиланням на відгуки "Отзывы" й кнопкою-посиланням like. Далі блок "Варианты оплаты" з посиланням на різні банкові фірми, які можуть використовуватися для оплати.Виокремлення елементів дизайну з PSD-макетуНа даному етапі я провів аналіз дизайну макету та оцінив складність виконання завдання. З самого верху була присутня частина (довгий чорний блок) з посиланнями на автора макету. Фон, вочевидь, фіксований блакитний блок зі смугою більш темного кольору знизу й градієнтом, який займає приблизно 40% від розміру екрану. Весь контент розміщений на білому блоці із заокругленими кутами, який розміщений по центру відносно сторін екрану й має певні відступи від них. Деякі блоки у заголовках мають однаковий дизайн.Оскільки макет має велику кількість однотонно зафарбованих блоків, то зручним було вирізання зображень декількох пікселів (так звані "слайси"), які потім можна "розтягувати" завдяки властивостям background-repeat у CSS.Далі я створив основний div-блок box якому задав наступні параметри: width: 1000px; Після цього створив блок header, у який помістив форму із текстовими полями, кнопкою та посиланням. Створив блок #left-menu та задав йому наступне форматування: float: left; Містить у собі 4 блока .price4 з картинкою, написами та кнопкою, для якої задано нестандартне форматування з використанням властивостей CSS3: display: inline-block; Другий блок це .center-content, який містить у собі: блок заголовок, форматування якому ми задавали раніше (але в цьому випадку довелося дещо змінити, бо він відрізняється розміром і наявністю посилань у кінці заголовку) та повторювані блоки .article, які містять надпис, картинку, посилання у вигляді кнопки, ціну, посилання на форум, та посилання Like.Ця сторінка містить ті ж самі блоки, що й головна сторінка.Змінилася лише центральна частина.При реєстрації на сторінці registration.html форма відправляє усі дані на reg2.php, де вони будуть оброблені, перевірені, та, у випадку, якщо вони коректні, занесені до бази даних Bd, яка підключається у файлі db.php. Якщо реєстрація вдалася, користувач буде пере направлений до сторінки regged.php й буде повідомлений про успішну реєстрацію (рис. Дані, введені у цій форм, будуть відсилатися на login.php, де будуть перевірені на коректність та наявність у базі даних зареєстрованих користувачів. У випадку, якщо все коректно, користувач буде перенаправлений до сторінки logged.php і буде повідомлений про успішну авторизацію (рис. Дані зберігаються у базі даних Bd у таблиці users (рис.На даному етапі усі сторінки ph

Зміст

Вступ

1. Теоретичні відомості

1.1 JAVASCRIPT(JS)

1.2 JQUERY

1.3 PHP (Hypertext Preprocessor)

1.4 MYSQL

2. Опис PSD макету

3. Керівництво користувача

3.1 Сторінка "Главная"

3.2 Сторінка "Регистрация"

3.3 Сторінка "О нас"

4. Керівництво веб-розробника

4.1 Оцінка макету

4.2 Виокремлення елементів дизайну

4.3 Верстка головної сторінки

4.4 Верстка сторінки registration.html

4.5 Верстка сторінки about.html

5. Програмування функціональної частини

6. Виправлення помилок

Висновок

Список використаної літератури

Додаток