Написання сторінок та веб-додатків

Размещено на http://www.allbest.ru/

КИЇВСЬКИЙ КОЛЕДЖ ЗВ'ЯЗКУ

Циклова комісія «Прикладної математики та програмування»

Курсова робота

На тему: Тема вашої курсової роботи

Студента(ки)

Романова Вячеслав Сергійовича

2019 р



ЗАТВЕРДЖЕНО

Цикловою комісією ПМП

Голова циклової комісії

О.В. Жидка

Індивідуальне завдання на курсову роботу

З предмету: Конструювання програмного забеспечення

Студента __4__ курсу групи _____РПЗ-64______Київського коледжу зв'язку_______________Романова Вячеслава Сергійовича____________ (Прізвище, ім'я, по батькові)

Тема:_Розробка веб-сайту з використанням базових технологій веб-розробки___________

Завдання на курсову роботу: сайт-довідник «ТОП 10 пам'яток м.Києва»_______________

Зміст Пояснювальної записки до курсової роботи:

Індивідуальне завдання

Зміст

Вступ

1 Огляд …

2 Розробка сайту…

Висновки

Перелік посилань

Додатки (за необхідності)

Перелік наочного матеріалу: програмний продукт …, пояснювальна записка, презентація результатів роботи.

Календарний план виконання роботи

№ з/п	Назва етапу курсової роботи	Термін виконання	Примітка
1.	Отримання завдання на курсову роботу.	01.04.2020
2.	Огляд джерел технічної інформації за темою роботи	08.04.2020
3.	Виконання аналізу методів реалізації завдання	15.04.2020
4.	Розробка алгоритму реалізації завдання	22.04.2020
5.	Програмування алгоритму, створення програмного продукту	06.05.2020
6.	Тестування розробленого програмного продукту	10.05.2020
7.	Написання пояснювальної записки	17.05.2020
8.	Подача роботи керівнику для написання відгуку	18.05.2020
9.	Корегування роботи за результатами розгляду керівника	23.05.2020
10.	Написання доповіді, створення слайдів	25.05.2020
11.	Захист курсової роботи	26.05.2020

Студент _______ / ___________/ Викладач-керівник ________ / (підпис) (ініціали, прізвище) (підпис) (ініціали, прізвище)

Завдання видане «___» _________ 2019 року



Вступ

До того як почати написання курсової роботи я ознайомився зі списком тем, та обрав, на мій погляд, найбільш підходящу для мого рівня знань та навиків.

Тему обрано через те що веб програмування - є дуже актуальним направленням на ринку IT, так як попит безмежний, кожного дня створюються тисячі сторінок та різноманітних веб-додатків, інтернет розширюється.

Проблемою в написанні сторінок та веб-додатків являється затрачений час, так як для того щоб написати дійсно хороший продукт потрібно витратити не один тиждень клопіткої та важкої роботи, тому створюються команди, які розділяють на себе зобов'язання по проектуванню різних блоків сторінок.

Також розвивається список технологій та інструменів, котрі використовуються при розробці веб додатків, створюються сотні бібліотек, фреймворків, шаблонізаторів, які полегшують і пришвидшують проектування сторінок/веб-додатків.

Ціллю курсової роботи є освоєння навичок програмування, дизайну, правильного побудування лаконічного та зрозумілого інтерфейсу взаємодії між користувачем та інформацією розміщеною на веб-сторінці.

Задачі курсової роботи:

· Створення плану роботи, підбір ресурсів які будуть використані при написанні

· Визначення з оточенням та інструментами, які будуть задіяні при розробці

· Проектування інтерфейсу взаємодії для користувача

· Визначення структури сторінок

Курсова робота складається з двох частин: теоретичні відомості по роботі;

практична реалізація.

Гіпотез в даній курсовій роботі немає, по причині недоцільності.

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

Середовище програмування

Для створення проекту я користувався текстовим редактором від

Microsoft - “Visual Studio Code” найновішої версії. Встановлені плагіни: “Auto Rename Tag”, “Bracket Pair Color”, ”Code Spell Checker”, “CSS Peek”, “HTML CSS Support”, ”Live Server”.

Були використані технології HTML, SCSS, JS.

Для перетворення CSS-файлів у SCSS я використовував “Prepros”.

VS Code

Prepros



1. Постановка завдання

Потрібно створити веб-сайт довідник по пам'яткам міста.

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

Написання бекенд частини не передбачається, HTTP-сервер запускати не потрібно, завантаження сторінки відбувається локально.

Оформити та здати звіт відповідно всім методичним вимогам та правилам.

Відомості по розробці

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

Html та JS частини були написані вручну, та не являються динамічно згенерованими, і для того щоб вносити поправки, оновлення, потрібно переписувати значну частину коду.

Була реалізована задумка за якою користувач міг би переміщатися по сайту з головного меню та переглядати короткі відомості відносно кожної пам'ятки, панель навігації є на кожній сторінці, а не тільки на головній.

На сторінці «Замовити екскурсовода» можна переглянути доступних екскурсоводів, обрати місце проведення екскурсії та дізнатися час і вартість послуги.

Є можливість додати більшу кількість пам'яток для того щоб перетворити сайт в щось масштабніше, напиклад повноцінний сайт для якогось туристичного агентсва.

Практична реалізація

Скріншот головної сторінки - “Пам'ятки”



2. Скріншот сторінки “Замовити екскурсовода”

Додатки

Додаток А. Вміщає в собі Html-код основної сторінки

«Пам'ятки»

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Топ-10 пам'яток Києва</title>

<a href="https://ru.freepik.com/free-photos-vectors/icon"></a>

<link href="https://fonts.googleapis.com/css?family=Playfair+Display:900|Yanone+Kaffeesatz|Odibee+Sans|Russo+One|Comfortaa|Montserrat+Alternates|Pangolin&display=swap" rel="stylesheet">

<link rel="stylesheet" href="styles.css">

</head>

<script src="index.js"></script>

<body>

<div class="wrapper">

<div id="header">

<div id="header_title">Топ-10 пам'яток Києва</div>

<ul id="contact_info">

<li>(096) 449-01-68</li>

<li>м. Київ, вул. Лейпцизька 6, оф. 514</li>

</ul>

</div>

</div>

<ul id="navbar">

<a><li>Про нас</li></a>

<a href="index1.html"><li>Замовити екскурсовода</li></a>

<a href="index.html"><li>Пам'ятки</li></a>

</ul>

<table>

<tr class="main_body">

<td></td>

<td>

<div class="place_window" onclick="goToPage('index2.html')">

<div class="place_description">

<p>Андріївський узвіз</p>

<p>Непогане місце для шопінгу та відпочинку серед різноманіття товарів. Завітайте за посиланням для більш детальної інформації.</p>

</div>

<img src="andriy_changed 4.png" alt="Андріївський узвіз">

</div>

<div class="place_window" onclick="goToPage('index4.html')">

<div class="place_description">

<p><a>Музей Булгакова</a></p>

<p>Дуже атмосферний та чудовий музей присвячений Михайлу Булгакову. Завітайте за посиланням для більше детальної інформації.</p>

</div>

<img src="bulgakov_changed 2.png" alt="Музей Булгакова">

</div>

<div class="place_window" onclick="goToPage('index5.html')">

<div class="place_description">

<p><a>Голосіївський парк</a></p>

<p>Казковий парк в Голосіївському районі м.Києва. Чудово підходить для сімейного відпочинку на природі та їзди на роликах і скейтах.</p>

</div>

<img src="golosiya_changed 3.png" alt="Голосіївський парк">

</div>

<div class="place_window" onclick="goToPage('index6.html')">

<div class="place_description">

<p><a>Художній музей</a></p>

<p>Національний художній музей України у Києві. Якщо давно бажали сходити в музей, то цей чудово для вас підійде, один з кращих музеїв Києва, якщо не України.</p>

</div>

<img src="hud_changed.png" alt="Художній музей">

</div>

<div class="place_window" onclick="goToPage('index6.html')">

<div class="place_description">

<p><a>Києво-Печерська лавра</a></p>

<p>Класика в списку місць, яку повинен відвідати кожен. Під храмами проведена система тунелів, з захованнями святих та священнослужителів.</p>

</div>

<img src="lavra_changed 4.png" alt="Києво-Печерська лавра">

</div>

<div class="place_window" onclick="goToPage('index7.html')">

<div class="place_description">

<p><a>Маріїнський палац</a></p>

<p>Велична споруда, збудована іноземним архітектором для царської сім'ї. Нині являється резиденцією президента. Повна інформація всередині.</p>

</div>

<img src="mariya_changed 2.png" alt="">

</div>

<div class="place_window" onclick="goToPage('index8.html')">

<div class="place_description">

<p><a>Національний науково-природничий музей України</a></p>

<p>На мою думку один з кращих музеїв України. Досить великий щоб вмістити колекцію з 30 тис. експонатів.</p>

</div>

<img src="pruroda_changed 2.png" alt="">

</div>

<div class="place_window" onclick="goToPage('index9.html')">

<div class="place_description">

<p><a>Театр ім.Т.Шевченка</a></p>

<p>Топовий український театр. Захоплює дух різноманіттям іноземних та вітчизняних спектаклів. Казковий вид всередині та ззовні будівлі</p>

</div>

<img src="scheva_changed 4.png" alt="">

</div>

<div class="place_window" onclick="goToPage('index10.html')">

<div class="place_description">

<p><a>Софійський собор</a></p>

<p>Софійський собор, або Софія Київська -- визначна пам'ятка історії та архітектури України, розташована на Софійській площі міста Києва.</p>

</div>

<img src="sofiya_changed 4.png" alt="">

</div>

<div class="place_window" onclick="goToPage('index11.html')">

<div class="place_description">

<p><a>Володимирський собор</a></p>

<p>Володимирський собор -- православний собор у Києві, до створення Православної Церкви України був головним храмом Української Православної Церкви Київського Патріархату.</p>

</div>

<img src="volodymyr_changed 3.png" alt="">

</div>

</td>

<td></td>

</tr>

</table>

<div class="bottomPageBorder">

</div>

<div id="footer">

<div id="info_block">

<p>Увага! Цінові пропозиції на даному сайті не являються ні рекламою, ні офертою, вони являються орієнтовними, можуть різнитися в</p>

<p>залежності від курсів валют та періодів високих/низьких сезонів. Оплата здійснється виключно національною валютою - гривнею.</p>

</div>

<div>

&copy; 2020-2020 "Топ-10 пам`яток". Всі права захищені.

</div>

</div>

</div>

</body>

</html>

Вміщає в собі Html-код сторінки «Замовити екскурсовода»

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Топ-10 пам'яток Києва</title>

<a href="https://ru.freepik.com/free-photos-vectors/icon"></a>

<link href="https://fonts.googleapis.com/css?family=Playfair+Display:900|Yanone+Kaffeesatz|Odibee+Sans|Russo+One|Comfortaa|Montserrat+Alternates|Pangolin&display=swap" rel="stylesheet">

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="wrapper">

<div id="header">

<div id="header_title">Топ-10 пам'яток Києва</div>

<ul id="contact_info">

<li>(096) 449-01-68</li>

<li>м. Київ, вул. Лейпцизька 6, оф. 514</li>

</ul>

</div>

<ul id="navbar">

<a href=""><li>Про нас</li></a>

<a href="index1.html"><li>Замовити екскурсовода</li></a>

<a href="index.html"><li>Пам'ятки</li></a>

</ul>

<div id="pur_body">

<div class="category" id="start_data">

<div>Екскурсовод</div>

<div>Місця</div>

</div>

<div>

<form method="POST" action="">

<div class="category">

<ul id="ecscurs_peoples">

<li>

<input type="radio" id="r1" name="rb1" onclick="checkRadio()">

<label for="r1"><span></span>Микитич Ганна Павлівна</label>

</li>

<li>

<input type="radio" id="r2" name="rb1" onclick="checkRadio()">

<label for="r2"><span></span>Нінова Галина Петрівна</label>

</li>

<li>

<input type="radio" id="r3" name="rb1" onclick="checkRadio()">

<label for="r3"><span></span>Пилипов Петро Андрійович</label>

</li>

<li>

<input type="radio" id="r4" name="rb1" onclick="checkRadio()">

<label for="r4"><span></span>Фількін Анатолій Єгорович</label>

</li>

</ul>

<ul id="ecscurs_places">

<li>

<input type="checkbox" id="c1" name="cb1" onclick="checkCheck()">

<label for="c1"><span></span>Андріївський узвіз</label>

</li>

<li>

<input type="checkbox" id="c2" name="cb1" onclick="checkCheck()">

<label for="c2"><span></span>Дім Листовничого</label>

</li>

<li>

<input type="checkbox" id="c3" name="cb1" onclick="checkCheck()">

<label for="c3"><span></span>Голосіївський парк</label>

</li>

<li>

<input type="checkbox" id="c4" name="cb1" onclick="checkCheck()">

<label for="c4"><span></span>Художній музей</label>

</li>

<li>

<input type="checkbox" id="c5" name="cb1" onclick="checkCheck()">

<label for="c5"><span></span>Києво-Печерська лавра</label>

</li>

<li>

<input type="checkbox" id="c6" name="cb1" onclick="checkCheck()">

<label for="c6"><span></span>Маріїнський палац</label>

</li>

<li>

<input type="checkbox" id="c7" name="cb1" onclick="checkCheck()">

<label for="c7"><span></span>Науково-природничий музей України</label>

</li>

<li>

<input type="checkbox" id="c8" name="cb1" onclick="checkCheck()">

<label for="c8"><span></span>Театр ім.Т.Шевченка</label>

</li>

<li>

<input type="checkbox" id="c9" name="cb1" onclick="checkCheck()">

<label for="c9"><span></span>Софійський собор</label>

</li>

<li>

<input type="checkbox" id="c10" name="cb1" onclick="checkCheck()">

<label for="c10"><span></span>Володимирський собор</label>

</li>

</ul>

</div>

<div id="final_data">

<ul class="data_list" id="date_list">

<li>Дата</li>

<li><input type="datetime-local" value="2020-02-20T21:52:40"/></li>

</ul>

<ul class="data_list" id="price_list">

<li>Ціна</li>

<li>

<div id="ecscurs_price"><span>1488</span></div>

</li>

</ul>

<ul class="data_list" id="dur_list">

<li>Тривалість екскурсії</li>

<li>

<div id="ecscurs_duration">4 години</div>

</li>

</ul>

</div>

<input type="button" value="Замовити" onclick="sumaCostEcscurs()">

</form>

</div>

</div>

<div class="bottomPageBorder">

</div>

<div id="footer">

<div id="info_block">

<p>Увага! Цінові пропозиції на даному сайті не являються ні рекламою, ні офертою, вони являються орієнтовними, можуть різнитися в</p>

<p>залежності від курсів валют та періодів високих/низьких сезонів. Оплата здійснється виключно національною валютою - гривнею.</p>

</div>

<div>

&copy; 2020-2020 "Топ-10 пам`яток". Всі права захищені.

</div>

</div>

</div>

</body>

<script src="index.js"></script>

</html>

<!--<a href="google.com"><img src="viberIcon.png" alt=""></a> <a href=""><img src="telegramIcon.png" alt=""></a> <a href=""><img src="instagramIcon.png" alt=""></a>-->

Вміщає в собі Html-код сторінки “Андріївський узвіз”

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Топ-10 пам'яток Києва</title>

<a href="https://ru.freepik.com/free-photos-vectors/icon"></a>

<link href="https://fonts.googleapis.com/css?family=Playfair+Display:900|Yanone+Kaffeesatz|Odibee+Sans|Russo+One|Comfortaa|Montserrat+Alternates|Pangolin&display=swap|Open+Sans&display=swap" rel="stylesheet">

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="wrapper">

<div id="header">

<div id="header_title">Топ-10 пам'яток Києва</div>

<ul id="contact_info">

<li>(096) 449-01-68</li>

<li>м. Київ, вул. Лейпцизька 6, оф. 514</li>

</ul>

</div>

<ul id="navbar">

<a href=""><li>Про нас</li></a>

<a href="index1.html"><li>Замовити екскурсовода</li></a>

<a href="index.html"><li>Пам'ятки</li></a>

</ul>

<div id="main_info">

<div id="first_block">

<p><span class="tittle_rozdils">Андрімївський узвіз</span></p>

Узвіз в Подільському районі міста Києва, що сполучає Поділ зі Старим Києвом. Пролягає від Контрактової площі до Володимирської та Десятинної вулиць. Прилучаються вулиці Покровська, Боричів Тік, Фролівська і Воздвиженська.

Пам'ятка містобудування місцевого (охор. № 675-Кв), та, одночасно, національного значення (разом з Замковою горою, охор. № 260060-Н).

<img src="andriy_uzvizFranc.jpg" alt="">

</div> дизайн інтерфейс сайт пам'ятка

<div id="second_block">

<p><span class="tittle_rozdils">Історія</span></p>

Верхня частина Андріївського узвозу виникла на шляху, який вже за часів Київської Русі зв'язував Старий Київ (Гору) із Подолом, пролягаючи між пагорбами Андріївської (Уздихальниці) та Замкової, Хоревиці та Старокиївської гір. За доби середньовіччя відгалуження Андріївського узвозу було прокладено і до замку на горі Киселівка. У 1711 році за наказом тодішнього київського губернатора проїзд між Замковою та Андріївською горами було розширено, і він став придатним для користування не лише для пішоходів і вершників, а і для проїзду запряжених кіньми й волами возів. Назву узвіз одержав, імовірно, у XVIII столітті від Андріївської церкви (збудована в 1744-1754 роках, архітектор Бартоломео Растреллі). У 1928 році перейменований на вулицю ім. Лівера[4], на честь Георгія Лівера, революціонера-більшовика, борця за встановлення Радянської влади у Києві, у списку вулиць 1931 року -- узвіз Лівера. Історичну назву узвозу було відновлено 1944 року.

Існує легенда, відповідно до якої місце, де тепер тече Дніпро, було морем. Коли св. Андрій прийшов у Київ і побудував на горі, де зараз стоїть Андріївська церква, хрест, то все море спливло униз. Але деяка частина його залишилася і сховалася під Андріївською горою. Коли пізніше тут побудували церкву, то під престолом відкрилася криниця. В Андріївській церкві нема дзвонів, тому що, за легендою, при першому ж ударі вода прокинулася б і залила не тільки Київ, але і все Лівобережжя.

Основна забудова вулиці виконана в 90-х роках XIX -- на початку XX століття. Нині, відтворений у стародавньому виді, узвіз -- це місце виставки-продажу живопису і виробів народної творчості просто неба. Андріївський узвіз називають київським Монмартром. Тут завжди можна побачити художників, що демонструють свої роботи, зразки прикладного мистецтва -- прикраси, посуд із скла і кераміки, кумедні фігурки з дерева, іграшки, медалі, монети і багато чого іншого. Тут також іноді виступають співаки й артисти. На Андріївському узвозі багато невеликих барів і кафе, де можна відпочити.

На узвозі панує атмосфера міста кінця XIX -- початку XX століття. Вулиця славиться тим, що в будинку № 13 жив Михайло Булгаков, нині в цьому будинку діє присвячений письменнику літературно-меморіальний музей. Також в будинку 22-а (де з 1995 року працює одна з перших галерей сучасного мистецтва в Україні -- «Карась Галерея»), за словами диригента та композитора Олександра Кошиця, що проживав у цьому будинку пізніше, першим власником будинку був той самий Сірко, що його змальовано в п'єсі «За двома зайцями» драматурга та письменника Михайла Старицького:

« Виходячи на Воздвиженську вулицю з свого будинку, я зупинявся на розі біля забитої в паркані хвіртки, і знав що тут колись сиділа безсмертна Проня Прокопівна та чекала на свого Голохвастова. »

На Андріївському узвозі також працює унікальний Музей однієї вулиці. У ньому показано історію Андріївського узвозу у картинах, фотографіях та інших речах від давнини до наших часів. Вздовж усієї вулиці багато картинних галерей, художніх салонів.

<img src="Andreevskaja_cerkov.jpg">

</div>

<div id="third_block">

Пам'ятки національного значення, місцевого значення та щойно виявлені об'єкти культурної спадщини на Андріївському узвозі.

<img src="andriy_uzviz_schema.jpg">

</div>

</div>

<div class="bottomPageBorder">

</div>

<div id="footer">

<div id="info_block">

<p>Увага! Цінові пропозиції на даному сайті не являються ні рекламою, ні офертою, вони являються орієнтовними, можуть різнитися в</p>

<p>залежності від курсів валют та періодів високих/низьких сезонів. Оплата здійснється виключно національною валютою - гривнею.</p>

</div>

<div>

&copy; 2020-2020 "Топ-10 пам`яток". Всі права захищені.

</div>

</div>

</div>

</body>

</html>

Не бачу доцільним вставляти подальший код сторінок, так як всі вони ідентичні цій по своїй структурі, відмінність полягає тільки в записаній інформації.

Вміщає в собі CSS-код всіх сторінок проекту

@charset "UTF-8";

/* Указываем box sizing */

*,

*::before,

*::after {

-webkit-box-sizing: border-box;

box-sizing: border-box; }

/* Убираем внутренние отступы */

ul[class],

ol[class] {

padding: 0; }

/* Убираем внешние отступы */

body,

h1,

h2,

h3,

h4,

p,

ul[class],

ol[class],

li,

figure,

figcaption,

blockquote,

dl,

dd {

margin: 0; }

/* Выставляем основные настройки по-умолчанию для body */

body {

min-height: 100vh;

scroll-behavior: smooth;

text-rendering: optimizeSpeed;

line-height: 1.5; }

/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/

ul[class],

ol[class] {

list-style: none; }

/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */

a:not([class]) {

text-decoration-skip-ink: auto; }

/* Упрощаем работу с изображениями */

img {

max-width: 100%;

display: block; }

/* Указываем понятную периодичность в потоке данных у article*/

article > * + * {

margin-top: 1em; }

/* Наследуем шрифты для инпутов и кнопок */

input,

button,

textarea,

select {

font: inherit; }

#header {

position: relative;

height: 100px;

width: 100%;

padding: 5px; }

#header_title {

position: absolute;

top: 50%;

left: 15%;

-webkit-transform: translate(0, -50%);

-ms-transform: translate(0, -50%);

transform: translate(0, -50%);

text-align: center;

display: block;

font-size: 30px;

width: 400px;

font-family: 'Russo One', sans-serif; }

#contact_info {

position: absolute;

margin-left: 55%; }

#contact_info li:first-child {

list-style-image: url(Icon-phone.png);

font-size: 22px;

font-family: 'Odibee Sans', cursive; }

#contact_info li:nth-child(2) {

list-style-image: url(Icon-home.png);

font-size: 22px;

font-family: 'Odibee Sans', cursive; }

#navbar {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: horizontal;

-webkit-box-direction: reverse;

-ms-flex-direction: row-reverse;

flex-direction: row-reverse;

-ms-flex-pack: distribute;

justify-content: space-around;

-webkit-box-shadow: 0 0 0 #000 inset, 0 -2px 0 gainsboro inset;

box-shadow: 0 0 0 #000 inset, 0 -2px 0 gainsboro inset;

margin-bottom: 10px;

margin: 0;

margin-left: 15%;

width: 71%; }

#navbar li {

cursor: pointer;

border-bottom: 2px solid gainsboro;

padding-top: 5px;

text-align: center;

font-size: 25px;

height: 40px;

margin-left: 10px;

color: black;

display: inline-block;

font-family: 'Comfortaa', cursive; }

#navbar li:hover {

border-bottom: 2px solid red; }

.main_body td:first-child {

height: 1400px;

width: 200px;

margin: 0px;

padding: 0px; }

.main_body td:nth-child(2) {

display: -ms-grid;

display: grid;

-ms-grid-columns: 295px 295px 295px;

grid-template-columns: 295px 295px 295px;

width: 900px;

height: 1400px;

margin: 0;

padding: 0; }

.main_body td:last-child {

height: 1400px;

width: 200px;

margin: 0px;

padding: 0px; }

.place_window {

margin: 20px;

width: 275px;

height: 300px; }

.place_window:hover > .place_description {

display: block; }

.place_window:hover > img {

opacity: 0.2; }

.place_description {

display: none;

position: absolute;

width: 250px;

height: 300px;

margin-top: 15px;

margin-left: 15px; }

.place_description p:first-child {

text-decoration: underline;

font-weight: bold;

font-size: 26px;

font-family: 'Playfair Display', serif; }

.place_description p:nth-child(2) {

margin-top: 10px;

font-weight: 400;

line-height: 1.2;

font-family: 'Yanone Kaffeesatz', sans-serif; }

#pur_body {

margin-top: 2%; }

#ecscurs_peoples {

font-family: 'Montserrat Alternates'; }

#ecscurs_places {

font-family: 'Montserrat Alternates'; }

.category {

margin-left: 7%;

width: 1200px;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-ms-flex-direction: row;

flex-direction: row;

-ms-flex-pack: distribute;

justify-content: space-around; }

.category ul {

list-style-type: none; }

.category div {

display: inline-block; }

.category input[type="checkbox"] {

display: none; }

.category input[type="checkbox"] + label span {

display: inline-block;

width: 19px;

height: 19px;

margin: -1px 4px 0 0;

vertical-align: middle;

background: url(checkbox.png) left top no-repeat;

cursor: pointer; }

.category input[type="checkbox"]:checked + label span {

background: url(checkbox.png) -19px top no-repeat; }

.category input[type="radio"] {

display: none; }

.category input[type="radio"] + label span {

display: inline-block;

width: 19px;

height: 19px;

margin: -1px 4px 0 0;

vertical-align: middle;

background: url(checkbox.png) 68% top no-repeat;

cursor: pointer; }

.category input[type="radio"]:checked + label span {

background: url(checkbox.png) 100% top no-repeat; }

#start_data {

width: 870px;

margin-left: 15%;

background-image: -webkit-gradient(linear, left top, right top, from(#9EEFE1), color-stop(51%, #4830F0), to(#9EEFE1));

background-image: -webkit-linear-gradient(left, #9EEFE1 0%, #4830F0 51%, #9EEFE1 100%);

background-image: -o-linear-gradient(left, #9EEFE1 0%, #4830F0 51%, #9EEFE1 100%);

background-image: linear-gradient(to right, #9EEFE1 0%, #4830F0 51%, #9EEFE1 100%);

color: black;

border-bottom: 3px solid grey;

border-top: 1px solid grey;

border-radius: 25px;

font-family: 'Pangolin'; }

#final_data {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-ms-flex-direction: row;

flex-direction: row;

-ms-flex-pack: distribute;

justify-content: space-around; }

#final_data input[type="datetime-local"] {

border: none;

background-color: black;

color: white;

margin-left: 5%; }

#final_data ul:first-child li:first-child {

width: 300px; }

#final_data ul li:first-child {

width: 250px; }

.data_list li:first-child {

border-bottom: none; }

.data_list li {

border: solid black 2px;

text-align: center;

background-color: black;

color: white;

font-family: 'Pangolin'; }

.data_list li:first-child {

border-radius: 25px 25px 0px 0px; }

.data_list li:nth-child(2) {

border-radius: 0px 0px 5px 5px; }

input[type="button"] {

margin-top: 2%;

margin-left: 10%;

width: 200px;

border-radius: 15px;

text-decoration: none;

outline: none;

display: inline-block;

color: white;

padding: 20px 30px;

margin: 10px 43%;

border-radius: 10px;

font-family: 'Montserrat', sans-serif;

text-transform: uppercase;

letter-spacing: 2px;

background-image: -webkit-gradient(linear, left top, right top, from(#9EEFE1), color-stop(51%, #4830F0), to(#9EEFE1));

background-image: -webkit-linear-gradient(left, #9EEFE1 0%, #4830F0 51%, #9EEFE1 100%);

background-image: -o-linear-gradient(left, #9EEFE1 0%, #4830F0 51%, #9EEFE1 100%);

background-image: linear-gradient(to right, #9EEFE1 0%, #4830F0 51%, #9EEFE1 100%);

background-size: 200% auto;

-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

-webkit-transition: .5s;

-o-transition: .5s;

transition: .5s; }

input[type="button"]:hover {

background-position: right center; }

.bottomPageBorder {

width: 71%;

height: 2px;

background-color: gainsboro;

margin-left: 15%; }

#footer {

margin-left: 5%; }

#info_block {

color: grey;

font-size: 11px;

margin-top: 1%; }

#main_info {

font-family: 'Open Sans', sans-serif;

padding-left: 15%;

padding-top: 2%;

display: -ms-grid;

display: grid;

-ms-grid-rows: ()[3];

grid-template-rows: repeat(3); }

#main_info #first_block {

margin-bottom: 2%;

width: 75%; }

#main_info #second_block {

margin-bottom: 2%;

width: 75%; }

Для сторінок, на жаль, не передбачено окремих CSS-файлів, всі стилі знаходяться в одному місці.

Додаток Ґ. Вміщає в собі JavaScript-код для сторінки

«Замовити екскурсовода». Відповідає за обрахунок вартості екскурсії.

var costEcscurs = 0;

var costDuration = 0;

var radioCost = 0;

function checkRadio() {

var inp = document.getElementsByName("rb1");

for (var i = 0; i < inp.length; i++) {

if (inp[i].type == "radio" && inp[i].checked) {

switch (inp[i].id) {

case "r1":

radioCost = 0;

radioCost = radioCost + 500;

break;

case "r2":

radioCost = 0;

radioCost = radioCost + 600;

break;

case "r3":

radioCost = 0;

radioCost = radioCost + 550;

break;

case "r4":

radioCost = 0;

radioCost = radioCost + 650;

break;

}

}

}

return radioCost;

}

function checkCheck() {

var checkCounter = 0;

var inp = document.getElementsByName("cb1");

for (var i = 0; i < inp.length; i++) {

if (inp[i].type == "checkbox" && inp[i].checked) {

checkCounter = checkCounter + 1;

}

}

return checkCounter;

}

function sumaCostEcscurs() {

var x1 = checkCheck();

var x2 = checkRadio();

var price = document.getElementById("ecscurs_price");

var hours = document.getElementById("ecscurs_duration");

costEcscurs = x1 * 100 + x2;

costDuration = x1 * 1;

price.textContent = costEcscurs + "грн";

hours.textContent = costDuration + "год";

}

function goToPage(site) {

window.open(site);

}

Висновки

Отже, я вважаю що цілі задані для даної курсової роботи були виконані та досягнуті. Звісно роботу можна було б виконати набагато краще, використовуючи бібліотеку React або ж фреймворк Angular.В ідеалі потрібно було реалізувати підтримуваність та масштабування. Можливість мати доступ редактору для додавання нових матеріалів та редагування існуючих.

Размещено на Allbest.ru

...