Репозиторій ЧДТУ
Репозиторій ЧДТУ зберігає і дозволяє легкий і відкритий доступ до всіх видів цифрового контенту, включаючи текст, зображення, анімовані зображення, MPEG і набори даних
Дізнатися більше
Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал:
https://er.chdtu.edu.ua/handle/ChSTU/6899| Назва: | Розробка web-сайту замовлень 3D дизайну інтер’єрів |
| Автори: | Прокопенко , Тетяна Олександрівна Линник, Дмитро Юрійович |
| Ключові слова: | веб-дизайн;дизайн;MAX;3D;моделювання;навігація;html;css |
| Дата публікації: | 14-чер-2022 |
| Короткий огляд (реферат): | Інтернет став невід'ємною частиною нашого життя. Подорожуючи Інтернетом, ми зустрічаємо різноманітні веб-сайти. На одних продають речі, на інших запрошують знайти друзів для спілкування. Є широко потрібні інформаційні портали, а є веб-сайти, присвячені окремим людям або компаніям. Тенденція така, що для успіху необхідно заявити про себе в Інтернеті, а отже, власна персональна сторінка має бути у будь-якої фірми і навіть особистості. Завдання веб-дизайну будь-якого сайту - викликати довіру відвідувача до якості пропонованих нею послуг, зберігаючи при цьому фірмовий стиль, корпоративну культуру та позиціонування на ринку. Дизайн сайту і сама його побудова поєднує різні нюанси, які необхідно враховувати при розробці. Насамперед, це наявність зручної навігації та прозорості структури сайту. При цьому потрібно враховувати художню цінність та відточеність графічного дизайну. Я вибрав для цього html з css. 3D Studio MAX – це єдиний програмний комплекс моделювання, візуалізації та анімації об'єктів, розроблений фірмою Autodesk для операційної системи Windows NT. На основі оцінки сьогоднішнього виявлено, що кожна людина має потребу в тому, щоб оточувати себе красивими предметами. Тому цінність речі охоплює два початки - користь та красу. У кожному предметі закладено технічний та естетичний початок. Підсумком роботи над проектом стала висока оцінка мистецтва, що визначала те, що воно допомагає людині зрозуміти світ і саму себе, а також показувати їй, що вона зрозуміла і що вважає істинною. Все у цьому світі є унікальним, індивідуальним. Але все осягається людським розумом, і це лише тому, що кожна річ складається з моментів, властивих не тільки певному об'єкту, а й є загальними для багатьох інших. |
| URI (Уніфікований ідентифікатор ресурсу): | https://er.chdtu.edu.ua/handle/ChSTU/6899 |
| Розташовується у зібраннях: | 126 Інформаційні системи та технології (Web-технології, web-дизайн) |
Файли цього матеріалу:
| Файл | Опис | Розмір | Формат | |
|---|---|---|---|---|
| РЕП_БАК_Линник_WEB-1811.pdf Restricted Access | 1.7 MB | Adobe PDF | Переглянути/Відкрити Запит копії |
Усі матеріали в архіві електронних ресурсів захищено авторським правом, усі права збережено.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ
Пояснювальна записка
до кваліфікаційної роботи бакалавра
на тему: «Розробка web-сайту замовлень 3D дизайну інтер’єрів»
Виконав студент 4 курсу, групи Web-1811,
спеціальності 126 – Інформаційні
системи та технології,
освітня програма – Web- технології,
Web-дизайн,
Линник Д.Ю
Керівник д.т.н., проф. Прокопенко Т.О.
Рецензент
Черкаси – 2022 року
АНОТАЦІЯ
Інтернет став невід'ємною частиною нашого життя. Подорожуючи Інтернетом,
ми зустрічаємо різноманітні веб-сайти. На одних продають речі, на інших
запрошують знайти друзів для спілкування. Є широко потрібні інформаційні
портали, а є веб-сайти, присвячені окремим людям або компаніям. Тенденція
така, що для успіху необхідно заявити про себе в Інтернеті, а отже, власна
персональна сторінка має бути у будь-якої фірми і навіть особистості. Завдання
веб-дизайну будь-якого сайту - викликати довіру відвідувача до якості
пропонованих нею послуг, зберігаючи при цьому фірмовий стиль, корпоративну
культуру та позиціонування на ринку.
Дизайн сайту і сама його побудова поєднує різні нюанси, які необхідно
враховувати при розробці. Насамперед, це наявність зручної навігації та
прозорості структури сайту. При цьому потрібно враховувати художню цінність
та відточеність графічного дизайну. Я вибрав для цього html з css.
3D Studio MAX – це єдиний програмний комплекс моделювання, візуалізації та
анімації об'єктів, розроблений фірмою Autodesk для операційної системи
Windows NT. На основі оцінки сьогоднішнього виявлено, що кожна людина має
потребу в тому, щоб оточувати себе красивими предметами. Тому цінність речі
охоплює два початки - користь та красу. У кожному предметі закладено
технічний та естетичний початок.
Підсумком роботи над проектом стала висока оцінка мистецтва, що визначала
те, що воно допомагає людині зрозуміти світ і саму себе, а також показувати їй,
що вона зрозуміла і що вважає істинною. Все у цьому світі є унікальним,
індивідуальним. Але все осягається людським розумом, і це лише тому, що
кожна річ складається з моментів, властивих не тільки певному об'єкту, а й є
загальними для багатьох інших.
Ключові слова : 3D, MAX, веб-дизайн, моделювання, навігація, дизайн, html,
css.
ANNOTATION
The Internet has become an integral part of our lives. When we travel the Internet, we
come across a variety of websites. Some sell things, others invite friends to
communicate. There are widely needed information portals, and there are websites
dedicated to individuals or companies. The trend is that in order to be successful, you
need to declare yourself on the Internet, and therefore, any company and even an
individual must have their own personal page. The task of web design of any site - to
inspire confidence in the quality of its services, while maintaining corporate identity,
corporate culture and market positioning.
The design of the site and its construction combines various nuances that must be
considered during development. First of all, it is the availability of easy navigation
and transparency of the site structure. It is necessary to take into account the artistic
value and refinement of graphic design. I chose for this html with css.
3D Studio MAX is the only object modeling, visualization, and animation software
developed by Autodesk for Windows NT. Based on today's assessment, it was found
that everyone needs to surround themselves with beautiful objects. Therefore, the
value of a thing includes two principles - usefulness and beauty. Each subject has a
technical and aesthetic beginning.
The result of the work on the project was a high appreciation of art, which determined
that it helps a person to understand the world and himself, as well as to show him that
he understood and believes what is true. Everything in this world is unique,
individual. But everything is comprehended by the human mind, and this is only
because every thing consists of moments that are not only inherent in a particular
object, but are common to many others.
Keywords: 3D, MAX, web design, modeling, navigation, design, html, css.
ЗМІСТ
ВСТУП. ......................................................................................................................... 6
1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ............................. 9
1.1 Влаштування сайтів .............................................................................. 9
1.2 Типи та види сайтів ............................................................................................ 10
1.3 Стилі сайтів у веб-дизайні .......................................................................... 18
1.4 Опис інтерфейсу 3D SMAX .......................................................................... 21
1.5 Інтерфейс программи ................................................................................. 23
1.5.1 Об'єкти в 3D MAX .................................................................. 23
1.6 Поняття об'єктів 3D MAX ................................................................. 26
1.6.1 Складові об'єкти .............................................................. 28
1.6.2 Підоб'єкти програми .................................................................29
1.6.3 Принципи створення об'єкта сцени ................................................. 29
1.7 Аналіз існуючих аналогів сайту .................................................................. 30
1.7.1 Веб – компанія «BoxBrownie» ................................. 30
1.7.2 Веб – компанія «AbiStyle»................................. 30
1.7.3 Веб – компанія «Architec» ............................... 31
1.7.4 Веб – компанія «Приват Дизайн» .............................. 32
1.8 Висновки до розділу 1 ............................ 33
2 ПОСТАНОВКА ЗАДАЧ ТА РОЗРОБКА ІНФОРМАЦІЙНОЇ СТОРОНИ САЙТУ ................ 34
2.1 Історія веб-дизайну та веб-сайтів ............ 34
Зм. Лист № докумемента Підпис Дата ЧДТУ 221807.0066 ПЗ
Ро зроб. Линник Д.Ю Літ. Лист Листів
Перев. Прокопенко Т.О. Розробка web-сайту замовлень
Н 2 97
3D дизайну інтер’єрів.
Реценз Пояснювальна записка
. ФІТІС, кафедра ІТП,
Н .контр.
Web-1811
Зат в.
Прокопенко Т.О.
2.2 Опис проекту ........................................................................ 37
2.3 Засоби реалізації вашого веб-сайту ................................................... 39
2.4 Висновки до розділу 2 ................................................................................. 41
3 РОЗРОБКА ТА МОДЕЛЮВАННЯ САЙТУ ................................................... 42
3.1 Підготовка програмної частини ................................................................... 42
3.1.1 Архітектура сайту .................................................................................. 42
3.1.2 Практична реалізація ............................................................................. 42
3.2 Висновки до розділу 3 ....................................................................................................... 45
ВИСНОВКИ .................................................................................................. 46
ДОДАТОК А 482 ЧДТУ 21807-066 Розробка web-сайту
замовлень 3D дизайну інтер’єрів ................................................................. 47
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ...................................................... 96
Зм. Лист № докумемента Підпис Дата ЧДТУ 221807.0066 ПЗ
Ро зроб. Линник Д.Ю Літ. Лист Листів
Перев. Прокопенко Т.О. Розробка web-сайту замовлень
Н 2 97
3D дизайну інтер’єрів.
Реценз Пояснювальна записка
. ФІТІС, кафедра ІТП,
Н .контр.
Web-1811
Зат в.
Прокопенко Т.О.
ВСТУП
3D Studio MAX – це єдиний програмний комплекс моделювання, візуалізації
та анімації об'єктів, розроблений фірмою Autodesk для операційної системи
Windows NT. З появою комплексу 3D MAX досягнуто нового рівня
продуктивності, широти можливостей та адаптації під конкретні потреби
⦁користувача. Ось лише деякі риси комплексу 3D MAX:
оновлений інтерфейс користувача, покликаний забезпечити більшу
⦁гнучкість та ефективність роботи
операційна система з високим рівнем продуктивності та з великими
м⦁ ожливостями модернізації
безліч команд моделювання та редагування об'єктів стек – список
модифікаторів, застосованих до геометричного елементу. Можна завжди
повернутися і змінити будь-який модифікатор, що дає можливість
⦁параметричного моделювання
редактор матеріалів, типи матеріалів та набір зразків які забезпечують
практично всіма типами матеріалів, які можуть коли-небудь знадобитися
перегляд треків - для зручного управління анімаційними послідовностями та
ї⦁х редагування
архітектура змінних модулів, названа технологією заміщення компонентів
ядра системи. Змінні модулі які можуть замінювати будь-яку частину
процесу візуалізації, включаючи моделювання, розмальовку, відображення –
HEIDI – технологія відображення затінків. Можна працювати із
затінюваннями в реальному часі, використовуючи апаратне прискорення
візуалізації, що забезпечується відеоадаптерами на базі мікросхем типу
GHNT.
Арк.
ЧДТУ 221807.066 ПЗ 6
Змн. Арк. № докум. Підпис Дата
3D MAX є радикально новим підходом до тривимірного моделювання та
візуалізації. Основні поняття та методи, відповідно до яких 3D MAX керує
об'єктами та даними на сцені, істотно відрізняються від попередніх версій 3D
MAX та інших програм тривимірного моделювання та візуалізації. Ці
поняття слід усвідомити, щоб робота з 3D MAX була продуктивнішою.
Метою даної дипломної роботи є вивчення та демонстрація можливостей 3D
MAX для розробки дизайну інтер'єру.
Візуалізація ідеї дизайнера важлива . Деякі креслення не зрівняються з
тривимірною моделлю в силі на замовника. Та й для дизайнера важливо
бачити результат своєї роботи. Крім того, можна відразу погодити зміни, що
відповідають побажанням замовника.
Дана дипломна робота складається з вступу, 4-х розділів та висновків. Усі
приклади 3D-моделей дизайну інтер'єру та сам розроблений сайт, наведені у
роботі, розроблено мною. Частина їх наводиться у тексті дипломної роботи.
Дизайн сайту і сама його побудова поєднує різні нюанси, які необхідно
враховувати при розробці. Насамперед, це наявність зручної навігації та
прозорості структури сайту. При цьому потрібно враховувати художню
цінність та відточеність графічного дизайну
При виконанні дипломного проекту необхідно досліджувати область, що
вивчається – веб дизайн та його особливості, провести аналіз історичної
зміни тенденцій інтернету та веб дизайну. Розглянути класифікацію та види
оформлення дизайну сайтів. Вивчити можливості створення веб-сайту з
використанням комп'ютера. Скласти технічне завдання. Провести аналіз
аналогічних дизайнів та сайтів. Розробити макет та структуру сайту. При
виконанні дипломного проекту необхідно досліджувати область, що
вивчається – веб дизайн та його особливості, провести аналіз історичної
зміни тенденцій інтернету та веб дизайну. Розглянути класифікацію та види
Арк.
ЧДТУ 221807.066 ПЗ 7
Змн. Арк. № докум. Підпис Дата
оформлення дизайну сайтів. Вивчити можливості створення веб-сайту з
використанням комп'ютера. Скласти технічне завдання. Провести аналіз
аналогічних дизайнів та сайтів. Розробити макет та структуру сайту.
Створити графічний веб-сайт сайту. В результаті роботи має бути отриманий
готовий дизайн веб-сайту студії дизайну інтер'єру «DLD».
Об'єкт дослідження: розробка веб-дизайну.
Предмет: веб-сайт «DLD».
Ціль: розробка дизайну сайту «DLD».
Гіпотеза: у процесі виконання роботи будуть вивчені аспекти графічного
дизайну, розвиток сучасного веб дизайну, методи розробки з використанням
комп'ютерних технологій, проведено аналіз аналогічних веб-сайтів,
розглянуто вимоги ергономіки та особливості розробки дизайну веб-сайтів.
У комп'ютерній графіці об'єкти існують лише у пам'яті комп'ютера. Вони не
мають фізичної форми - це не більше ніж сукупність математичних рівнянь і
рух електронів у мікросхемі 3D MAX. Оскільки об'єкти, про які йдеться, не
можуть існувати поза комп'ютером, єдиним способом побачити їх у всій
красі є додавання нових математичних рівнянь, що описують джерела світла
та знімальні камери. На щастя для вас, програмний комплекс 3D MAX бере
на себе всі турботи про математичну сторону комп'ютерної графіки,
залишаючи вам творчу сторону.
Використання програми, подібної до 3D MAX, багато в чому подібне до
зйомки за допомогою відеокамери кімнати, повної сконструйованих вами
об'єктів. 3D MAX дозволяє змоделювати кімнату та її вміст з використанням
різноманітних базових тривимірних об'єктів, таких як куби, сфери, циліндри
та конуси, які можна просто вибрати у складі інструментарію та додати до
сцени.
Арк.
ЧДТУ 221807.066 ПЗ 8
Змн. Арк. № докум. Підпис Дата
1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ
[21]Веб - дизайн — галузь веброзробки, що охоплює цілий ряд напрямів і
дисциплін із створення та супроводу сайтів або вебзастосунків, таких як
графічний вебдизайн, проєктування інтерфейсів, авторинг, використовність
та оптимізація для пошукових систем.
1.1 Влаштування сайтів
Сторінки сайтів - це текстові файли, що розмічені мовою HTML. Ці файли,
будучи завантаженими відвідувачем з його комп'ютер, обробляються
браузером і виводяться його засіб відображення (монітор, екран КПК,
принтер чи синтезатор промови). [11]
Мова HTML дозволяє форматувати текст, розрізняти в ньому функціональні
елементи, створювати гіпертекстові посилання (гіперпосилання) і вставляти у
сторінку зображення, звукозапису та інші мультимедійні елементи.
Рисунок 1 - Приклад HTML
Відображення сторінки можна змінити додаванням до неї таблиці стилів на
мові CSS [6], що дозволяє централізувати у певному файлі всі елементи
форматування (розмір та колір великих літер 2-го рівня, розмір та вид блоку
вставки та інше) або сценаріїв на мові JavaScript, за допомогою якого є
можливість переглядати сторінки з подіями чи діями.
Арк.
ЧДТУ 221807.066 ПЗ 9
Змн. Арк. № докум. Підпис Дата
Сторінки сайтів можуть бути простим статичним набором файлів або
створюватись спеціальною комп'ютерною програмою на сервері - так званим
движком сайту. Двигун може бути або зроблений на замовлення окремого
сайту, або бути готовим продуктом, розрахованим на певний клас сайтів.
Деякі з движків можуть забезпечити власнику сайту можливість гнучкого
налаштування структурування та виведення інформації на веб-сайті. Такі
двигуни називаються системами управління змістом.
Сайти можуть містити підрозділи, орієнтовані на ту чи іншу аудиторію.
Аудиторія може відрізнятися за видом використовуваного обладнання,
мовою аудиторії. Наприклад, відомі звані мобільні версії сайту, призначені
для роботи з ними з використанням смартфона. Сайти можуть мати мовні
версії.
1.2 Типи та види сайтів
Існує безліч програмних і технічних засобів, що застосовуються при
створенні та використанні веб-сайтів. Для розробки сайту дизайнеру
необхідно дотримуватися основних правил верстки.
Говорячи про верстку спочатку необхідно торкнутися питання
кросбраузерності. Кроссбраузерність – властивість сайту відображатися та
працювати у всіх популярних браузерах ідентична.
Рисунок 2 – Популярні браузери 2022 року
Арк.
ЧДТУ 221807.066 ПЗ 10
Змн. Арк. № докум. Підпис Дата
Основною програмою для роботи з сайтами є браузери, так як виробляються
різними компаніями, то і можливості їх дуже різні.
За стандартами нової версії HTML можливості веб-дизайну[15] фактично
необмежено, але браузерів з повною підтримкою поки що не існує, тому є
кілька варіантів розробки: [20]
- Кросбраузерна - підтримка більшістю браузерів як нових, так і застарілих
версій;
- незалежна – підтримка лише новими браузерами;
- Внутрішня - підтримка певним браузером.
Розробляючи дизайн необхідно розуміти, що користувач переглядатиме
сторінки на дисплеї – це означає, що макет дизайну, як і вся графіка, повинна
розроблятися в адитивній колірній моделі (RGB). [19]
Колір RGB (Red Green Blue) визначається послідовністю шістнадцяткових
цифр, для зображень у браузерів немає обмежень.
Кольори [6], які передаються безпосередньо в залежності від браузера,
можуть відображатися по-різному. Дизайнер може використовувати
спеціальні таблиці або функцію вказівки підтримки веб-кольорів.
Рисунок 3 – приклад RGB
Арк.
ЧДТУ 221807.066 ПЗ 11
Змн. Арк. № докум. Підпис Дата
Сьогодні у всесвітньому павутинні міститься величезна кількість
найрізноманітніших сайтів. Всі вони відрізняються за великою кількістю
параметрів.
При цьому розрізняють 5 типів макетів сайту у веб дизайні: [10]
Фіксовані -Макет зазвичай розташовується по центру вікна браузера,
яке ширина обмежується заданими розмірами в пікселах. Через те, що
ширина всіх колонок відома, простіше вказувати розміри зображень,
відео та інших елементів сторінки. Браузери, як правило, лояльніше
відносяться до таких макетів, тому на верстку та налагодження йде
менше часу.
Гумові - Ширина колонок задається у відсотках або поєднуються
відсотки та пікселі таким чином, що макет займає всю вільну ширину
вікна браузера. При зміні розмірів вікна або іншій роздільній здатності
монітора макет підлаштовується під них. Використовується вся
ефективна область сторінки. Веб-сторінки зручно друкуються на папері
будь-якого формату. Веб-сторінки добре виглядають на різних
пристроях від iPhone до ноутбука;
Еластичні - Цей макет може не відрізнятися від фіксованого або
гумового макета. Доки ви зміните розмір шрифту в браузері, тоді ви
помітите, що розмір змінили і елементи веб-сторінки. Розмір елементів
задається над
пікселях і відсотках, а em, прив'язаному до розміру шрифту. Макет
повністю або окремі його частини легко масштабувати, підганяючи під
комфортний для сприйняття розмір. Макет однаково виглядатиме на
різних операційних системах, що мають відмінності у виборі розміру та
типу шрифту;
Адаптивні - Цей макет підлаштовується під роздільну здатність
монітора та вікна браузера, змінюючи при необхідності ширину макета,
Арк.
ЧДТУ 221807.066 ПЗ 12
Змн. Арк. № докум. Підпис Дата
кількість колонок, розміри зображень та тексту. Для цього
заготовляється кілька стильових правил або файлів під різний діапазон
дозволів, вибір правил відбувається через скрипти або CSS3, які
визначають потрібну для цього інформацію про користувача. Цей тип
макету найбільш зручний для користувача, оскільки не залежить від
роздільної здатності та ширини вікна браузера, пристосовуючись під
них. Макет зручно можна дивитися на будь-якому пристрої;
Комбіновані -Цей макет передбачає використання різної ширини
окремих частин сторінки, наприклад, шапку і підвал роблять гумовими,
а контент фіксованим. Цей макет насправді не є самостійним типом,
тому успадковує всі плюси та мінуси фіксованого та гумового макета.
Щоб розібратися, яке завдання потрібне від сайту, треба вибирати з видів
сайту. Залежно від завдань, ми можемо розділити їх на кілька видів,
представлених на (мал 4).
Рисунок 4 – Види сайтів
Арк.
ЧДТУ 221807.066 ПЗ 13
Змн. Арк. № докум. Підпис Дата
Сайт візитка
Отже, що ж є сайт «Візитка» або сайт малого бізнесу. Найпростіший із усіх
видів сайтів. Фактично є електронною версією звичайної паперової візитки.
На сайті-візитці міститься основна інформація про компанію, її контакти,
діяльність та основні послуги. Як правило, сайт-візитка володіє простою та
зручною навігацією.
Рисунок 5 – Приклад сайту візитка
Такі сайти створюються як "заглушка" або для реклами, тим самим залучення
нових клієнтів через інтернет. Розробник повинен продумувати дизайн так,
щоб клієнти могли вільно знайти всю цікаву інформацію відразу.
Корпоративні сайти [7]
Корпоративні сайти – це повнофункціональні представництва компаній в
Інтернеті. Це повноцінні сайти, що мають великий обсяг даних та матеріалів,
розширену структуру меню та навігації для повного надання даних клієнтам.
Мета такого виду сайту: пошук та обслуговування нових покупців,
просування товарів та послуг та надання зручного сервісу обслуговування.
Арк.
ЧДТУ 221807.066 ПЗ 14
Змн. Арк. № докум. Підпис Дата
Рисунок 6 – Структура корпоративного сайту Вітрини
або інтернет-каталог
Це вид сайтів, основне завдання яких – продавати. На таких сайтах
розміщується інформація про товари та контакти, зазвичай телефони, якими
слід дзвонити бажаючим придбати пропонований товар.
З його допомогою неможливо здійснити угоду купівлі-продажу, тому що на
сайті-вітрині лише надається докладна інформація про товар. Але іноді, на
них вказуються місця, де можна купити товар, що зацікавив
Інтернет магазини
Цей вид сайтів аналогічний до інтернет-вітрин, але має додатковий
функціонал: можливість замовити пропонований товар прямо через сайт.
Арк.
ЧДТУ 221807.066 ПЗ 15
Змн. Арк. № докум. Підпис Дата
В залежності від маркетингової стратегії, процес перетворення, передбачає
виконання користувачем певних дій, як-от:
оформити замовлення на покупку
продати конкретний продукт в конкретній ситуації (розпродаж,
промоакція)
залишити контактну інформацію (зазвичай: адреса електронної пошти
або номера телефону)
підписатися на розсилку
реєстрація на сайті
інформація для інших користувачів / оголошення про цільову сторінку
віра в бренд — витратити достатньо часу на сайті, дивитися фільми,
читати листівки
завантажити або встановити якусь програму
Відсоток конверсії відвідувачів є показником ефективності сторінки-вітрини,
в залежності від галузі він коливається в межах 2-3 відсотків. Це означає, що,
наприклад, із 1000 осіб які відвідали «лендінг» — 20-30 зробили якусь із
вищевказаних дій. [17]
Рисунок 7 – Приклад сайту – вітрини
Пошукові системи
Арк.
ЧДТУ 221807.066 ПЗ 16
Змн. Арк. № докум. Підпис Дата
Вид сайтів, призначених для пошуку сторінок в Інтернеті за певними
запитами. Для пошуку інформації за допомогою пошукової системи,
користувач формулює пошуковий запит.
Рисунок 8 – Приклад пошукових систем
На запит користувача пошукова система генерує сторінку результатів
пошуку. Така пошукова видача може поєднувати різні типи файлів.
Поштові послуги
Цей тип сайтів надає інтерфейс для роботи з електронною поштою. На веб-
сайтах цього виду користувачі можуть створювати теми, також коментувати
їх. Як правило, форуми обмежені однією специфічною тематикою, хоча
зустрічаються і форуми «про все».
Сайти - хостинги
На сайтах цього типу реалізовано функцію зберігання будь-яких файлів.
Також часто зустрічаються сайти-хостинги з можливістю перегляду
завантажених файлів через браузер.
Арк.
ЧДТУ 221807.066 ПЗ 17
Змн. Арк. № докум. Підпис Дата
1.3 Стилі сайтів у веб-дизайні
Веб-дизайн – це графічне оформлення сайту, яке включає розробку
структури сайту, розробку логіки сайту з урахуванням зручності
користування (юзабіліті). [8]
Роль залучення відвідувачів на сайт виконує графічне оформлення, а
зручність та неприкрита простота дозволяє утримувати відвідувача та
змушує його повертатися на сайт ще раз.
До недавніх часів веб дизайн можна було поділити на:
європейський;
американський;
український ;
японський;
Європейський дизайн відрізняється художністю, зазвичай на сайтах багато
графічних елементів, персонажі, кнопки, посилання все було промальовано
спеціальним художником.[18]
Американський дизайн, як і все інше є швидким скетчем на папері.
Використовується один великий графічний елемент, найчастіше
фотографія, шрифт зазвичай стилізований або стандартний, при цьому
все графічне є спрощеним - це найчастіше фігури примітиви з
одноколірною заливкою або градієнтом, іноді використовується
обведення.
Український веб дизайн – це мінімалізм, зазвичай текст із
використанням стандартних шрифтів, іноді застосування художніх
елементів.
Арк.
ЧДТУ 221807.066 ПЗ 18
Змн. Арк. № докум. Підпис Дата
Японський веб дизайн - це двоякість нової та старої Японії, або
величезна кількість моргаючого різнокольорового тексту і картинок,
максимум "отруйних" кольорів, або строгість і високий рівень
мінімалізму.
Згодом європейський та американський дизайн об'єдналися у «Західний».
Західний веб дизайн також використовується багатьма українськими
дизайнерами. Відрізняється він застосуванням стилізованого шрифту,
застосуванням контрастних кольорів. Зазвичай використовуються фотографії
та мінімум палітри кольорів. Дотримується мінімалізм із одним графічним
елементом, за стандартом це тло. [9]
Для стилів дизайну сайтів існує класифікація (мал. 9), яка може бути корисна
при складанні технічного завдання на створення сайту.
Практично завжди, коли хтось говорить про стиль дизайну сайту, він має на
увазі саме його тематичність. У дизайні сайтів виділяють кілька основних
стилів, розділених за тематичною ознакою.
Рисунок 9 – таблиця стилів
Насправді цей список можна продовжувати майже до нескінченності, у
кожному конкретному проекті може бути потрібний свій стиль. Наприклад,
Арк.
ЧДТУ 221807.066 ПЗ 19
Змн. Арк. № докум. Підпис Дата
сайт деревообробної фабрики може бути зроблений у «дерев'яному» стилі,
інтернет-магазин з продажу книг – у «книжковому», а форум любителів
кішок – у «котячому».
Старі вимоги щодо співвідношення якість/розміру зображень втратили сенс.
Інтернет став широкосмуговим, і швидкість збільшилася до перегляду
фільмів онлайн. Тепер на веб-сайті можна розташовувати зображення повно
екранної високої якості, а також відео.
При цьому технології змінилися не лише інтернету, а й з'явилися нові
дисплеї Retina та подібні до високої щільності пікселів. Роздільна здатність
дисплея - це кількість пікселів (крапок або растрів) на одиницю площі, є
однією з основних характеристик дисплея. Зараз на 13 дюймів розміщується
2560х1600 пікселів з високоякісною рідкокристалічною матрицею (IPS).
Дозвіл дисплеїв перестали відповідати колишнім стандартам, їх
накопичилося вже понад 3 тисячі варіантів. З'явилося безліч різних
мобільних пристроїв із різними співвідношеннями та дозволами.
Стандартом став широкоформатний варіант дисплеїв, де роздільна здатність
теж зміщується у бік збільшення незалежно від розмірів.
Виходячи зі статистики та стандартних розмірів робочої зони браузерів,
можна визначити максимальні розміри для розмітки дизайну макету.
На сайті крім графіки є текст. Текст, як і в графічному дизайні визначається
розмірами і шрифтом. Дизайнеру необхідно відразу вибрати якими
шрифтами буде користуватися, при цьому, як правило, для одного веб-сайту
використовується не більше трьох.
Шрифтів для сайтів існує безліч, але дизайнер обмежений авторською
ліцензією. Є шрифти, на які необхідно купувати ліцензію, є не для
комерційного використання та є загальнодоступними. При цьому в іншому
обмеження щодо шрифтів відсутнє. Розміри тексту можуть бути різними
залежно від дизайну сайту
Арк.
ЧДТУ 221807.066 ПЗ 20
Змн. Арк. № докум. Підпис Дата
1.4 Опис інтерфейсу 3D MAX
Пакет програми 3D Studio MAX – це програмний комплекс моделювання,
візуалізації та анімації, розроблений фірмою AUTODESK. [1]
3D Studio MAX - це потужна система при роботі з 3D графікою та анімацією
Інтерфейс користувача 3D Studio MAX
В інтерфейс входять елементи, показані рисунку 10.
Рисунок 10 – приклад інтерфейсу 3D Max.
Pulldowns (Рядок меню). Рядок меню надає доступ до безлічі команд 3D
Studio MAX. File (Файл), Edit (Правка), Group
(Група), Views (Проекції), Rendering (Візуалізація), Help (Довідка),
Undo/Redo (Скасувати/повторити). 3D Studio MAX дозволяє мати майже
необмежений за довжиною перелік дій.
Selection Controls (Кнопка керування виділенням). Багато команд повинні
застосовуватися до виділених об'єктів сцен. Ця група кнопок дозволяє
виділити і різним чином маніпулювати об'єктами.
Арк.
ЧДТУ 221807.066 ПЗ 21
Змн. Арк. № докум. Підпис Дата
Constrains (Фіксація осей). Фіксація координатних осей в SDStudio дозволяє
виконувати перетворення об'єктів лише в одному уанному напрямку або в
одній площині.
Inverse Kinematics (Зворотня кінематика). Дозволяє застосувати від
зворотної кінематики при анімації об'єктів.
Mirror/Array/A lign (Відобразити/ Орнамент/ Вирівняти). Дозволяє
змінювати типові команди (Відобразити/Орнамент/Вирівняти).
Render Controls (Кнопки керування візуалізацією). Набір кнопок дозволяє
доступ до діалогових вікон та параметрів візуалізації сцен.
Command Panel (Панель команд). З її допомогою можна виконати більшу
частину команд над об'єктами. Командна панель включає в себе частина
вкладок, які можна розглядати як самостійні командні панелі:
Create (Створити), Modify (Змінити), Hierarchy (Ієрархія), Motion (Рух),
Display (Дисплей), Utility (Сервіс).
Viewport Controls (Кнопки керування вікнами проекції). Виберіть кнопки
для забезпечення засобами маніпулювання використання вікон проекцій.
Animation Playback Controls (Кнопки керування відтворенням анімації).
Дозволяє керувати системою інтерактивного відтворення анімаційних
послідовностей.
Animate Button (Кнопка анімації). Ця кнопка дозволяє створювати ключі
анімації. За її активізації вона стає червоною.
Snap Socks (Кнопки фіксації прив'язок). Дозволяють увімкнути та вимкнути
різні режими використання прив'язок.
Adaptive Degradation Override (Заборона адаптивної деградації). 3D MAX
3D MAX відтворюючи анімацію, робить це з максимальною швидкістю та
найкращою якістю зображення. Якщо швидкість анімації знижується, то він
переходить до погіршення якості зображення.
Арк.
ЧДТУ 221807.066 ПЗ 22
Змн. Арк. № докум. Підпис Дата
Degradation Override (Заборона деградації). Унеможливлює погіршення
сцени в активному вікні проекції.
Window/Crossing (Вікно/ Перетин). Якщо кнопка не натиснута, будуть
виділені об'єкти лише перетнуті нею, якщо натиснута - то об'єкти повністю,
що потрапили.
Sock Selection Set (Блокування виділеного набору). Після виділення
елементів, набір може бути заблокований і вже не можна буде виключити,
ні додати будь-які об'єкти.
Stutus Bar (Рядок стану). Містить повідомлення, які пояснюють поточну дію
SDStudio MAX.
Coordinate Redout (Полі відліку координат). Зручно використовувати, коли
потрібно точно визначити положення курсору у 3-мірному просторі.
Animation Time Slider (Повзунок таймера анімації). Повзунок вказує на
поточний кадр анімації.
Viewports (Вікна проекцій). Вікна проекцій дозволяють відображати
геометричні моделі. [1]
Command Help – за допомогою цієї кнопки можна отримати довідку по
будь-якому елементу інтерфейсу.
1.5 Інтерфейс программи
Панель інструментів
(малюнок 13) знаходиться під рядком головного меню, забезпечуючи
доступ до найуживаніших інструментів 3D MAX . До панелі
інструментів можна віднести командну панель - суттєва зміна інтерфейсу
3D Studio MAX 3D Studio MAX.
Рисунок 11 – Панель інструментів.
Арк.
ЧДТУ 221807.066 ПЗ 23
Змн. Арк. № докум. Підпис Дата
Командна панель
Командна панель (малюнок 14) дозволяє створити різноманітні
об'єкти 3D Studio MAX 3D Studio MAX .
Рисунок 12 – Командна панель
Командна панель складається з 6 вкладок:
1.Create(створити)-куди входять 7 інших владок:
1. Geometry (Геометрія). Доступ до команд створення об'ємних
геометричних об'єктів (5 різновидів).
2. Shapes (Форми). Доступ до команд створення двовимірних форм.
3. Lights (Джерело світла). Дозволяє створити джерело світла для освітлення
тривимірної сцени.[2]
4. Cameras (Камера). Дозволяє створити камеру, через яку можна
спостерігати тривимірну сцену
Арк.
ЧДТУ 221807.066 ПЗ 24
Змн. Арк. № докум. Підпис Дата
5. Helpes (Допоміжні об'єкти). Дозволяє створювати допоміжні об'єкти, що
забезпечують точність виконання деяких операцій 3D Studio MAX .
6.Space Warps (Об'ємні деформації). Дозволяє моделювати об'ємні
деформації об'єктів під впливом зовнішніх силових полів з метою анімації
спецефектів (вітер, гравітації).
7.Systems (Системи). Дозволяє створювати системи пов'язаних об'єктів як
кістки скелета тощо.
При натиснутій кнопці Geometry у списку міститься 5 різновидів
геометричних об'єктів: Standart Primitives (Стандартні примітиви). Це
паралелепіпеди, сфери, конуси тощо. Patch Grides (Сітки шматків). Це
поверхні Без'є.
Compared Objects (Складові об'єкти). Об'єкти, що створюються об'єднанням,
двох і більше об'єктів.
Рисунок 13 - Сцена створена із застосуванням більшості подібних об'єктів
вкладки Create.
2.Modify (Змінити). Дозволяє переглянути та змінити параметри виділеного
об'єкта. За допомогою даної панелі до наявних геометричних об'єктів
застосовується багато модифікаторів.
Арк.
ЧДТУ 221807.066 ПЗ 25
Змн. Арк. № докум. Підпис Дата
3. Hierarchy (Ієрархія). Забезпечує ієрархічне упорядкування об'єктів для
зв'язування анімації із застосуванням зворотної кінематики (Щ.
4. Motion (Рух). Дозволяє призначати об'єктам параметричні чи траєкторні
засоби керування рухом. А також перетворювати траєкторію руху об'єкта на
сплайн або виконати зворотну операцію.
5. Display (Дисплей). За допомогою цієї командної панелі відображаються
всі об'єкти SDStudio MAX.
6. Utility (Сервіс). Доступ до сервісних процедур. Одним із потужних засобів
у роботі з 3D Studio MAX є робота зі сувої командної панелі. Кожен сувій
містить групу параметрів і відокремлюється від іншого кнопкою шириною
майже всю командну панель. По суті, сувої командної панелі це ніби
маленькі сценарії дій або команд у 3D MAX.
1.5.1 Об'єкти в 3D MAX
У розділі розглядаються такі поняття:
Об'єкто-орієнтована поведінка та основні типи об'єктів 3D Studio MAX.
Визначення подібних об'єктів та здійснення доступу до них.
Object Dataflow (потокова схема) об'єкта та її вплив на моделювання.
Використання трансформації та модифікаторів та відмінності між ними.
Копії, екземпляри, посилання та їх поведінка.[3]
Використання ієрархічної організації у 3D Studio MAX.
Визначення анімації та керування нею в 3D Studio MAX.
Опис елементів, що підключаються, та їх організація.
1.6 Поняття об'єктів 3D MAX
Термін об'єкт використовується повсюдно у всій програмі 3D MAX; це
об'єктно-орієнтована програма. Якщо подивитися на 3D MAX у термінах
програмування, все, що створюється є об'єктами. Геометрія, камери та
джерела світла на сцені є об'єктами. Модифікатори також є об'єктами, як і
Арк.
ЧДТУ 221807.066 ПЗ 26
Змн. Арк. № докум. Підпис Дата
контролери, растрові зображення та визначення матеріалів. Багато об'єктів,
подібні до каркасів, сплайнів і модифікаторів, допускають маніпулювання на
рівні подібних об'єктів. Якщо необхідно додаткове уточнення, термін об'єкт
сцени використовується для диференціації геометрії та чогось створеного за
допомогою панелі Create (створити) з об'єктів інших типів. До об'єктів сцени
входять джерела світла, камери, спотворення простору та допоміжні об'єкти.
На інші об'єкти, подібні до модифікаторів, карт, ключів і контролерів,
посилаються за допомогою конкретного типу.
Об'єктно-орієнтована поведінка [4]
Що означає, коли кажуть, що 3D MAX є об'єктно-орієнтованою програмою?
Об'єктно-орієнтоване програмування (OOP) - витончений підхід до
написання програмного забезпечення, який зараз широко застосовується при
написанні комерційного програмного забезпечення. З погляду користувача
3D MAX найбільш важливим аспектом об'єктно-орієнтованого
програмування є те, як воно впливає на інтерфейс користувача.
При створенні об'єктів у 3D MAX ці елементи переносять із собою
інформацію про те, які функції можна виконувати стосовно них і що
вважається справжньою поведінкою кожного об'єкта. Ця інформація впливає
на те, що можна побачити в інтерфейсі 3D MAX. Активними є лише операції,
дійсні обраного об'єкта; інші операції стають неактивними або ховаються
усередині інтерфейсу.
Параметричні об'єкти
Більшість об'єктів у 3D Studio MAX є формою параметричного об'єкта.
Параметрический об'єкт визначається сукупністю установок чи параметрів, а
чи не явним описом його форми. Наприклад сфера:
•Непараметрична сфера. Отримує радіус та кількість сегментів та
використовує цю інформацію для створення явної поверхні, що складається з
вершин та граней. Визначення сфери існує лише як сукупність граней.
Арк.
ЧДТУ 221807.066 ПЗ 27
Змн. Арк. № докум. Підпис Дата
Інформація про радіус та сегменти не зберігається. Якщо потрібно змінити
радіус або кількість сегментів, потрібно видалити сферу та створити нову.
•Параметрична сфера. Зберігає параметри радіусу та кількості сегментів та
відображає уявлення сфери на основі поточного значення параметрів.
Параметричне визначення сфери зберігається у вигляді радіусу та кількості
сегментів. Ці параметри можна змінювати і навіть виконувати їхню анімацію
в будь-який час.
Параметрический об'єкт забезпечує важливі опції моделювання та анімації. У
випадку необхідно якомога довше зберігати параметричне визначення. Деякі
операції 3D MAX перетворюють параметричні об'єкти на непараметричні,
іноді звані явними об'єктами.
На щастя, багато операцій не відкидають параметричні властивості об'єкта.
Прикладами операцій, що відкидають параметри є: з'єднання об'єктів між
собою за допомогою одного з модифікаторів Edit (відредагувати).
Руйнування Modifier Stack (стек модифікаторів).
Експорт об'єктів у інший файловий формат. У цьому випадку лише об'єкти в
експортованому файлі втрачають параметричні властивості. На початкові
об'єкти у сцені 3D MAX це не впливає.
Слід виконувати ці операції лише у тому випадку, коли є достатня
впевненість у тому, що більше не доведеться регулювати параметри об'єктів.
1.6.1 Складові об'єкти
На панелі Create можна об'єднувати два або більше об'єктів, щоб створити
новий параметричний об'єкт, який називається складовим об'єктом. Що
стосується складових об'єктів слід пам'ятати те, що можна модифікувати і
змінювати параметри об'єктів, у тому числі складається складовий об'єкт.
Складовий об'єкт є типом параметричного об'єкта, параметри якого входять
об'єднуються об'єкти і опис способів їх об'єднання.
Арк.
ЧДТУ 221807.066 ПЗ 28
Змн. Арк. № докум. Підпис Дата
1.6.2 Підоб'єкти програми
Термін подобъект відноситься до чогось, що можна вибрати та маніпулювати
ним. Загальновідомим прикладом подібного об'єкта є одна з граней, що
утворюють каркас. За допомогою модифікатора Edit Mesh (відредагувати
каркас) можна вибрати подібний об'єкт, наприклад, грань, після чого її
можна переміщати, обертати, руйнувати або видаляти. Легко уявити собі
подоб'єкти як вершини або грані, але це поняття поширюється на багато
інших речей поза об'єктами сцени. Прикладами подібних об'єктів, якими
можна маніпулювати в 3D MAX[5] , є:
Вершини, сегменти та сплайни об'єктів форм
Вершини, ребра та грані каркасних об'єктів
Вершини, ребра та елементи поверхонь клаптевих об'єктів
Форми та шляхи loft-об'єктів
Операнди булевих об'єктів
Цілі morf-об'єктів
Гізмо та центри модифікаторів
Ключі траєкторій руху
У свою чергу перелічені подоб'єкти мають власні подоб'єкти і, таким чином,
створюються ситуації, при яких можна виконувати багаторівневе
редагування подобъектов. Наприклад, представимо застосування
модифікатора до обраного подоб'єкта вершин з каркасного об'єкта, що сам є
операндом бульового подоб'єкта. Глибина 3D MAX обмежена лише вашою
уявою.
1.6.3. Принципи створення об'єкта сцени
Першими діями з 3D Studio MAX буде створення об'єктів сцени, з якими
після цього виконуються анімація та візуалізація. При побудові об'єкта сцени
створюється процес, який визначає, як параметри основного об'єкта
Арк.
ЧДТУ 221807.066 ПЗ 29
Змн. Арк. № докум. Підпис Дата
модифікуються, трансформуються, спотворюються у просторі, як
присвоюються йому властивості та як він буде відображатися на сцені. Цей
процес називається потоковою схемою і його розуміння критично для
розуміння поведінки 3D Studio MAX 3D Studio MAX .
1.7 Аналіз існуючих аналогів сайту
Перед тим як створювати сайт по розробці інтер'єру, потрібно було
перевірити декілька аналогів такого ж функціоналу.
1.7.1 Веб – компанія «BoxBrownie» [22]
BoxBrownie.com – це швидкий, надійний і доступний зручний сервіс, який
допоможе вам отримати професійні фотографії в найкоротші терміни. У них
достатньо зручний інтерфейс та зрозумілий для звичайного користувача.Це
компанія яка дуже давно на ринку дизайнів, і можливо одна із найкращих.
Вони також можуть надати такі послуги:
Покращення зображення
Зміну дня на вечір на картинках
Віртуальні постановки
Видалення лишніх деталей на фото
Планування будинків
Віртуальний ремонт
1.7.2 Веб – компанія «AbiStyle» [23]
AbyStyle – Київська Дизайн Студія Інтер'єрів. Це досвідчена дизайн студія,
яка прислухається до замовника за всіма параметрами, враховує архітектурні
особливості, відповідає правилам ергономіки, модним тенденціям в сфері
дизайну. У них великий вибір послуг таких як:
Проектування Квартир
Арк.
ЧДТУ 221807.066 ПЗ 30
Змн. Арк. № докум. Підпис Дата
Ремонти
Декорування
Авторський догляд на всьому протязі роботи
Виробництво меблів
1.7.3 Веб – компанія «Architec» [24]
Дизайн інтер'єру від компаніх Архі це не тільки чудові картинки, а й
повноцінно реалізований продукт. Якщо вам потрібний дизайн інтер'єру
Київ сміливо звертайтесь до студії дизайну Архітек. Студія протягом 10+
років створює сучасні дизайн-проекти для різних приміщень – будинків та
квартир, ми також стежимо за останніми тенденціями та технічними
новинками як в інтер'єрному наповненні, так і в технологіях реалізації
ремонту. У чому їхня особливість?
1. Системний підхід – ми готуємося до кожної зустрічі та просимо клієнта
також підготуватися. Підготовка полягає в тому, що клієнт і ми
підбираємо приклади картинок, які максимально передають усі побажання
клієнта та його пристрасть. На підставу цього формується розгорнуте ТЗ.
Ми не можемо накосячити, принаймні сильно:)
2. Чіткий графік робіт - формуємо чіткий графік виконання дизайн-
проекту, ведеться журнал авторського нагляду, всі будівельні роботи
розбиті на тимчасові відрізки, що враховують технологічні паузи у зв'язку
з мокрими процесами.
3. Досвід у реалізації об'єктів – нами було реалізовано достатню кількість
інтер'єрів, випробувано всілякі матеріали та підходи, сформовано
технологічні карти для кожного з етапів будівельних робіт.
4. Знання сучасних технологій дизайну та ремонту – всі фахівці нашої
компанії, навіть візуалізатори, повинні розбиратися у базових технологіях
Арк.
ЧДТУ 221807.066 ПЗ 31
Змн. Арк. № докум. Підпис Дата
будівництва та ремонту, це потрібно для того, щоб вигадувати те, що
можна буде в результаті реалізувати.
1.7.4 Веб – компанія «Приват Дизайн» [25]
Дизайн інтер'єру - це невід'ємна частина сучасного ремонту. Ви придбали
квартиру чи будинок? Чи плануєте відкрити новий бізнес? Не знаєте з
чого розпочати ремонт? У такому разі Вам обов'язково потрібний добрий
дизайнер інтер'єру.Інтер'єр, розроблений у студії ПРИВАТ ДИЗАЙН - це
завжди продуманий та унікальний проєкт. Ми створюємо красиві та
функціональні інтер'єри для комфортного життя та роботи. Наша мета –
втілити Ваші мрії у проекті інтер'єру.
Тож, після короткого аналізу ми можемо побачити деякі плюси та мінуси
цих веб-сайтів. На таблиці 1
Веб - сайт Послуги Плюси Мінуси
Розробка дизайну Легкий Зарубіжний
квартир, обробка інтерфейс та сайт який не
фото та покращення розписані всі працює з
послуги дуже українськими
інформативно користувачами
Розробка дизайнів На головній Лише
та ремонт сторінці є російська мова
фото всих інтерфейсу
робіт і оцінки
користувачів
Проектування Стислий опис Немає
квартир, ремонти та робіт, легких прямого
декорування вихід на звязку з
адміністрацію адмінами
сайту
Арк.
ЧДТУ 221807.066 ПЗ 32
Змн. Арк. № докум. Підпис Дата
Проектування, Вдало Не зовсім
планування та підібрана пророблений
розробка важливих кольорова інтерфейс
гамма сайту сайту
моментів дизайну
та стиль
Таблиця 1 – Аналіз веб – сайтів
1.9 Висновки до розділу 1
У першому розділі було проговорено інформаційну сторону веб-сайту та
виконано деякі порівняльні аналізи. Так як у кожного сайту є свої плюси
та мінуси з цього можемо зробити такий висновок, що який би сайт не був
максимально прискіпливо виконаний. У деяких не продумана
інформаційна сторона, оцінка роботи, немає сторінки з відгуками або
побажаннями. Отже, виходячи з цих висновків я буду розробляти свій веб-
сайт який можливо буде більше виділятися з усих інших та матиме більш
інтуїтивний інтерфейс для замовника.
Арк.
ЧДТУ 221807.066 ПЗ 33
Змн. Арк. № докум. Підпис Дата
2 ПОСТАНОВКА ЗАДАЧ ТА РОЗРОБКА ІНФОРМАЦІЙНОЇ
СТОРОНИ САЙТУ
2.1 Історія веб-дизайну та веб-сайтів
Основи того, що ми сьогодні розуміємо під WWW, заклав у 1980-ті роки Тім
Бернерс-Лі у процесі робіт із створення системи гіпертексту у Європейській
лабораторії фізики елементарних частинок. В результаті цих робіт у 1990
науковому співтоваристві був представлений перший текстовий браузер, що
дозволяє переглядати пов'язані гіперпосиланнями текстові файли on-line.
Доступ до цього браузеру широкому загалу був наданий у 1991, проте
поширення його поза науковими кілами йшло повільно.
Рисунок 14 - Перша опублікована сторінка
Торішнього серпня 1991 року Тім Бернерс-Лі опублікував перший веб-сайт
— просту, текстову сторінку з кількома посиланнями. Сайт мав безліч
посилань та розповідав людям, що таке World Wide Web. Копія оригінальної
сторінки 1992 року ще існує в Інтернеті.
Новим історичним етапом у розвитку Інтернет став вихід першої версії
графічного браузера Mosaic у 1993 році. Запорукою успіху браузера стали
інтуїтивно зрозумілий інтерфейс, стабільність роботи, простота установки та
кросплатформеність (Mosaic став першим браузером, доступним одночасно
Арк.
ЧДТУ 221807.066 ПЗ 34
Змн. Арк. № докум. Підпис Дата
для всіх операційних систем, що діють на той момент, включаючи Windows,
Macintosh і Unix).
Перші варіанти веб-дизайну були примітивними і виглядали тільки як
форматування тексту та зв'язування сторінок через гіпертекстові посилання.
Надалі розвиток технологій та дизайну сприяло появі графічних малюнків та
анімації. Окрім тексту на сайтах з'явилася графіка.
Рисунок 15 - Перший браузер Mosaic
1996 рік був роком, який визначив початок нової ери, і для багатьох
дизайнерів ганебним періодом. Активно почали з'являтися сайти з червоним,
рожевим або жовтим тлом, надто довгий перегляд яких був практично
неможливим. Цей етап також став періодом образливого використання
анімованих GIF-файлів, за допомогою яких сайт, за ідеєю, має бути веселим
Арк.
ЧДТУ 221807.066 ПЗ 35
Змн. Арк. № докум. Підпис Дата
та цікавим. Люди не були повністю обізнані, як працює сайт, тому не знали,
як правильно його проектувати.
Порушення композиційних законів побудови візуальних об'єктів,
гармонійного колірного поєднання, призводили[22] до того, що багато людей
звикли думати, що блискуча палітра дійсно характеризує якісний дизайн.
Рисунок 16 - Сайт 1996 року дизайнера Betsey Johnsonа
З 1998 року дизайнери серйозно підійшли до створення сайтів. З тенденцій на
той час можна назвати рамки, табличні макети, меню з ефектами при
наведенні.
Сплеск інтернету припав на 2000 рік. Дизайнери навчилися технології CSS,
що постійно розвивається. CMS починають набирати популярності серед веб-
дизайнерів. Глянцеві кнопки, блискучі кольори, градієнти відбивають епоху
Web 2.0. Веб-сайти отримують більш функціональний і необхідний
інтерфейс користувача. Поява юзабіліті та зрозумілих інтерфейсів.
2008 характерний тенденціями мобільних веб-додатків. У 2007 році, iPhone
безперечно послужив сильним поштовхом для розвитку мобільного веб-
дизайну. Профільні компанії стали створювати мобільні веб-сайти та
розробляти програми. Великі соціальні мережі встановлюють віджети для
переходу на блоги, веб-сайти - віджети для переходу на соціальні мережі.
Арк.
ЧДТУ 221807.066 ПЗ 36
Змн. Арк. № докум. Підпис Дата
Також 2008 рік - рік стилю ретро в дизайні. Колірна гама стала стильнішою,
дизайн сайтів - краще і контрастніше.
2011 знаменний для веб розробників появою нового стандарту HTML5 і
CSS3. Нововведення знищили всіх потенційних конкурентів над ринком веб
технологій (Flash, Silverlight). Веб-дизайн обростає величезною кількістю
технік та видів представлення сторінок.
За всі свої досягнення в перші двадцять років, веб-дизайн продовжує
розвиватися і сьогодні. Бурхливий розвиток ринку мобільних пристроїв
поставило нове завдання: сайти повинні бути однаково зручні для сприйняття
на всіх системах, від настільного ПК та ноутбука до планшета та смартфона.
І тому розробляються адаптивні шаблони. Зростає кількість сайтів, що
підтримують екрани Retina, це теж веління часу. У веб-дизайнерів з'явилися
нові інструменти створення графічних вишукувань. Але головною
тенденцією сьогодення є розвиток інформаційної складової ресурсів
інтернету, коли графіка відходить на другий план.
2.2 Опис проекту
Розробити веб-сайт дизайну інтер'єру під ключ «DLD». Необхідно придумати
фірмовий стиль та логотип сайту. Сайт має надавати послуги. Новинний блок
буде присутній у повній версії сайту і часто оновлюватися.
Експлуатаційне призначення
Сайт розробляється для залучення нових та інформування існуючих клієнтів.
Функціональне призначення.
На сайті повинна бути інформація про контакти, студію, послуги та
портфоліо. Меню для замовлення дзвінка
Дані на веб-сайті.
Арк.
ЧДТУ 221807.066 ПЗ 37
Змн. Арк. № докум. Підпис Дата
Слайдер на головній сторінці:
малюнок;
підпис;
Контактна інформація:
номери телефонів (з можливістю замовити дзвінок)
електронна пошта
Інформація про студію:
текст;
Портфоліо:
відображення зменшених зображень, спроектованих інтер'єрів;
при наведенні зображення стає яскравішим;
при натисканні на зображення відкривається повнорозмірна
сторінка з інформацією;
Каталог послуг:
відображення іконок із підписами;
при натисканні на кожну відкривається повнорозмірна сторінка з
описом
Статті:
список статей та невеликим зображенням поруч;
при натисканні на текст посилання відкривається повнорозмірна
сторінка зі статтею;
Вимоги щодо дизайну сайту.
По цій схемі буде проходити робота з замовником (табл.1.2)
Арк.
ЧДТУ 221807.066 ПЗ 38
Змн. Арк. № докум. Підпис Дата
Таблиця 1.2
Перший етап – це «Обрати потрібну вам послугу» , заключається в тому, що
ви повинні перейти на сайт та обрати послугу у якій ви зацікавлені.
Другий етап – це «Отримати повідомлення від адміністратора», на даному
етапі з вами має зв'язатися адміністратор сайту.
Третій етап – це «Консультація про майбутній проєкт», адімністратор сайту
дасть відповідь на всі питання які у вас є і проконсультує, що і як краще буде
для вашого проєкту, надасть інформацію про ціни та про стилі які вам
потрібні.
Четвертий етап – це «Підписати договір про роботу», ви підписуєте
контракт у якому будуть обговорені всі моменти роботи і що ваше
замовлення не буде використане у власних цілях, якщо вас щось не буде
влаштовувати ви можете замовити дві переробки проєкту безкоштовно.
П'ятий етап – це «Отримати готовий дизайн», це вже буде повністю
зроблений і надісланий вам у повному обсязі проєкт з усіма можливими
робочими даними.
2.2 Засоби реалізації вашого веб-сайту
Веб-розробка вже давно залишила підстави для окремого кодування сторінок
у HTML/CSS , JavaScript , PHP або іншою мовою Інтернету, використовуючи
лише Блокнот або просто зручний для коду текстовий редактор. У наші дні
вже доступні платформи для розробки, які допомагають у кожній частині
процесу, від кодування до веб-дизайну (відкривається в новій вкладці).
Результатом є можливість створити та розмістити свій власний веб-сайт так,
як ви хочете, щоб він виглядав.
Арк.
ЧДТУ 221807.066 ПЗ 39
Змн. Арк. № докум. Підпис Дата
Для автономних веб-сайтів свобода кодування та створення власного дизайну
може отримати винагороду не тільки з точки зору естетики, але й з точки
зору безпеки, оскільки ви не покладаєтесь на плагіни стороннього
програмного забезпечення, які не тільки мають ризик бути зламаним, але
може змусити вас підписатися на службу моніторингу веб-сайту або
псування веб-сайту, щоб відстежувати зміни веб-сторінки та отримувати
сповіщення, якщо - або коли - вони є.Завдяки інструментам перетягування в
поєднанні з скороченнями кодування розробка веб-сайтів пройшла дуже
довгий шлях з початку 21 століття. Тут я покажу деякі із них :
1. Sketch - Чудові веб-сайти – це більше, ніж просто код, оскільки вони
втілюють чудові елементи дизайну, включаючи логотипи та
зображення. Sketch намагається обробляти елементи дизайну і оголошує
себе як «набір інструментів для проектування». Нарешті, за допомогою
інструмента FontRapid можна створити спеціальні шрифти, щоб надати
веб-сайту справді нестандартний вигляд, який потім можна експортувати
у файл шрифтів OpenType.
2. Sublime Text - популярний редактор коду, який є корисним інструментом
для веб-дизайну та доступний у вигляді невеликого завантаження для
Windows, Mac і Linux. Корисні функції включають команду GoTo
Anything для пошуку фрагмента коду, команду Multiple Selections, яка
може вносити зміни до повторюваних розділів коду, і Split Editing, яка
може максимізувати відображення коду на широкоекранному моніторі або
навіть на кількох моніторах. Sublime Text можна безкоштовно
завантажити та оцінити, а потім його можна придбати як індивідуальну
ліцензію, яка не обмежена часом, а потім дозволяє користувачеві
встановити його на всіх системах, де ви є основним користувачем.
3. Visual Studio Code - або VScode став популярним серед розробників –
тих, кого не бентежить той факт, що це продукт Microsoft. Він пропонує
різноманітні пакети та безкоштовні розширення, які можна завантажити з
Арк.
ЧДТУ 221807.066 ПЗ 40
Змн. Арк. № докум. Підпис Дата
його ринку, щоб додати додаткові функції, а сам редактор коду можна
налаштувати.Хоча багато людей можуть бути натягнуті на ідею
кодування, якщо вони не мають досвіду програмування, на певному етапі
процесу веб-дизайну може бути важливо мати можливість безпосередньо
редагувати код. Це особливо корисно, якщо ви хочете налаштувати код
для наявних програмних доповнень, щоб отримати потрібні функції для
свого веб-сайту. Visual Studio Code може допомогти зробити процес менш
болючим, надаючи спеціальну платформу для кодування.
Visual Studio Code має власний термінал і налагоджувач, підтримує linting
і має інтеграцію з усіма засобами контролю джерела. Особливо він
пропонує хорошу підтримку Javascript і Python, що робить його
потенційно корисним не тільки для кодування інтерфейсу веб-сайту, але
також потенційно для деяких функцій бекенда.
2.4 Висновки до розділу 2
У даному розділі ми розглянули найбільш популярні програми для
розробки та підготували інформаційну сторону нашого сайту, отримали
окремі дані на майбутній проєкт.
Арк.
ЧДТУ 221807.066 ПЗ 41
Змн. Арк. № докум. Підпис Дата
3 РОЗРОБКА ТА МОДЕЛЮВАННЯ САЙТУ
3.1 Підготовка програмної частини
3.1.1 Архітектура сайту
Сайт буде складатися з 4 функціональних вкладок. Тобто для
навігації по сайту буде 4 перехідних сторінки.
На головній сторінці «Головна» буде інформація про компанію,
відгуки та трішки інформаційної сторони. [13]
Наступна сторінка це буде «Портфоліо» з готовими роботами,
щоб замовник міг побачити та оцінити роботу нашої компанії.
На вкладці «Послуги» ви зможете побачити та підготувати те, що
вас зацікавило і якщо у нашому списку немає того, що вам потрібно
то ви могли б нам надіслати повідомлення і ми б допомогли.
Сторінка «Контакти» відповідає за контактну частину сайту в якій ви
можете нам надіслати відгук або зв'язатися з нами.
3.1.2 Практична реалізація
Перша сторінка сайту виглядає наступним чином «Головна»:
Рисунок 17 – Приклад головної сторінки сайту (1)
Арк.
ЧДТУ 221807.066 ПЗ 42
Змн. Арк. № докум. Підпис Дата
Рисунок 18 – Приклад головної сторнінки (2)
Було реалізовано максимально зрозумілий та простий інтерфейс
зі всіма важливими даними.
Друга сторінка сайту виглядає так «Портфоліо»:
Рисунок 19 – приклад сторінки «Портфоліо» (1)
Арк.
ЧДТУ 221807.066 ПЗ 43
Змн. Арк. № докум. Підпис Дата
Рисунок 20 - приклад сторінки «Портфоліо» (2)
Задумкою цеї сторінки було по більшій мірі показати якість
робіт, щоб вони розуміли за що вони платять кошти.
Третя сторінка сайту «Послуги»:
Рисунок 21 – приклад сторінки «Послуги»
На цій сторінці були наведені наші послуги і які вас зацікавлять, і
для чого ви можете до нас звернутися:
Ідеально підходить для редагування фотографій
нерухомості, щоб ви могли представити свою інформацію
Арк.
ЧДТУ 221807.066 ПЗ 44
Змн. Арк. № докум. Підпис Дата
за допомогою першокласних, відретушованих фотографій
професійного вигляду.
Наша команда може додати меблі до фотозйомки
нерухомості, щоб показати потенційним покупцям,
наскільки універсальний простір.
Візуалізуйте, як буде виглядати дизайн, перш ніж братися
за дорогий ремонт.
У вас є вакансія, яка не вказана в нашому спектрі послуг?
Зв’яжіться з нами, і ми зможемо запропонувати вашу
роботу на замовлення.
Остання сторінка сайту «Контакти» :
Рисунок 22 – приклад сторінки «Контакти»
На цій сторінці ви можете надіслати відгук[12] або
наладити контакт із нашим адміном і обговорити процес
розвитку замовлення або просто пройти консультацію
про проєкту.
3.2 Висновки до розділу 3
В останньому розділі я зробив висновки за якими був
розроблений сайт і обдуманий інформаційний та практичний
процес. Зроблений сайт « Замовлень 3D – дизайну інтер’єрів» та
підібрано легкий та інтуїтивний для користувача інтерфейс.
Арк.
ЧДТУ 221807.066 ПЗ 45
Змн. Арк. № докум. Підпис Дата
ВИСНОВКИ
Такий обсяг роботи натякає на розробку багатьох веб - сайтів
які могли б упростити життя для звичайних користувачів у
інтернеті. Так як у наш час не всі можуть вільно користуватися
такими програмами або сайтами
то потрібно було розробити звичайний та простий сайт для
користувача.
У цій кваліфікаційній роботі бакалавра був розроблений "сайт
замовлень 3D – дизайну інтер’єрів"
у программі яку за не великий час може зрозуіти і простий
користувач.
Веб-сайт був розроблений з усіма ліпшими можливостями,
відштовхуючись від плюсів та мінусів аналогів сайтів.
Стиль був підібраний з урахуванням того, щоб він не кидався в
очі користувачу та й не був зосвім зтемними і сірими тонами,
тому я думаю, що мета завдання мого сайту була виконана.
Арк.
ЧДТУ 221807.066 ПЗ 46
Змн. Арк. № докум. Підпис Дата
ДОДАТОК A
Затверджено
Зав. кафедри ІТП, проф.
Прокопенко Т.О.
«_ » 2022 р.
Розробка web-сайту замовлень 3D дизайну інтер’єрів
Специфікація
482 ЧДТУ 21807-066
Листів 2
Розробник Линник Д.Ю.
Керівник Прокопенко Т.О.
Н. Контроль
Черкаси, 2022
482 ЧДТУ 21807-066
Позначення Найменування Примітка
Документація
482 ЧДТУ 21807-066 12 01 Текст програми
Розробка web-сайту замовлень 3D дизайну інтер’єрів
482 ЧДТУ 21807-066 12 01
Текст програми
Листів 46
Розробник Линник Д.Ю.
Н
2022
50
482 ЧДТУ 21807-066 12 01
Програмний код «Головної» сторінки:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"
rel="stylesheet">
<link rel="stylesheet"
href="css/style.css">
<link rel="shortcut icon"
type="image/png"
href="img/favicon.png">
<title>dld — Замовити в один клік</title>
</head>
<body>
<div class="container">
<header class="header">
<img src="img/logo_y.png"
alt="dmd logo"
class="logo">
<form action="#"
class="search">
51
482 ЧДТУ 21807-066 12 01
<input type="text"
class="search input"
placeholder="Пошук">
<button class="search button">
<svg class="search icon">
<use xlink:href="img/sprite.svg#icon-magnifying-glass"></use>
</svg>
</button>
</form>
<nav class="user-nav">
<div class="user-nav icon-box">
<svg class="user-nav icon">
<use xlink:href="img/sprite.svg#icon-bookmark"></use>
</svg>
<span class="user-nav notification">7</span>
</div>
<div class="user-nav icon-box">
<svg class="user-nav icon">
<use xlink:href="img/sprite.svg#icon-chat"></use>
</svg>
<span class="user-nav notification">13</span>
</div>
<div class="user-nav user">
<img src="img/user_admin.PNG"
alt="User photo"
class="user-nav user-photo">
<span class="user-nav user-name">Дмитро</span>
</div>
</nav>
52
482 ЧДТУ 21807-066 12 01
</header>
<div class="content">
<nav class="sidebar">
<ul class="side-nav">
<li class="side-nav item side-nav item--active">
<a href=""
class="side-nav link">
<svg class="side-nav icon">
<use xlink:href="img/sprite.svg#icon-home"></use>
</svg>
<span>Головна</span>
</a>
</li>
<li class="side-nav item">
<a href="index_photo.html"
class="side-nav link">
<svg class="side-nav icon">
<use xlink:href="img/sprite.svg#icon-aircraft-take-
off"></use>
</svg>
<span>Портфоліо</span>
</a>
</li>
<li class="side-nav item">
<a href="index_posl.html"
class="side-nav link">
<svg class="side-nav icon">
<use xlink:href="img/sprite.svg#icon-key"></use>
53
482 ЧДТУ 21807-066 12 01
</svg>
<span>Послуги</span>
</a>
</li>
<li class="side-nav item">
<a href="index_contact.html"
class="side-nav link">
<svg class="side-nav icon">
<use xlink:href="img/sprite.svg#icon-map"></use>
</svg>
<span>Контакти</span>
</a>
</li>
</ul>
<div class="legal">
© 2022 by Dima Lynnyk
</div>
</nav>
<main class="work-view">
<div class="gallery">
<figure class="gallery item">
<img src="img/work1.PNG"
alt="Photo of work 1"
class="gallery photo">
</figure>
<figure class="gallery item">
<img src="img/work4.PNG"
alt="Photo of work 2"
54
482 ЧДТУ 21807-066 12 01
class="gallery photo">
</figure>
<figure class="gallery item">
<img src="img/work6.PNG"
alt="Photo of work 3"
class="gallery photo">
</figure>
</div>
<div class="overview">
<h1 class="overview heading">
Розробка <b>3D </b> дизайну вашого будинку
</h1>
<div class="overview stars">
<svg class="overview icon-star">
<use xlink:href="img/sprite.svg#icon-star"></use>
</svg>
<svg class="overview icon-star">
<use xlink:href="img/sprite.svg#icon-star"></use>
</svg>
<svg class="overview icon-star">
<use xlink:href="img/sprite.svg#icon-star"></use>
</svg>
<svg class="overview icon-star">
<use xlink:href="img/sprite.svg#icon-star"></use>
</svg>
<svg class="overview icon-star">
<use xlink:href="img/sprite.svg#icon-star"></use>
</svg>
55
482 ЧДТУ 21807-066 12 01
</div>
<div class="overview location">
<svg class="overview icon-location">
<use xlink:href="img/sprite.svg#icon-location-pin"></use>
</svg>
<button class="btn-inline">Черкаси, Україна</button>
</div>
<div class="overview rating">
<div class="overview rating-average">8.9</div>
<div class="overview rating-count">429 коментарів</div>
</div>
</div>
<div class="detail">
<div class="description">
<p class="paragraph">
<b>ПРОФЕСІЙНЕ РЕДАГУВАННЯ ФОТО,
ВІРТУАЛЬНА ПОСТАНОВКА</b>
</p>
<p class="paragraph">
Просто завантажте свої фотографії, а про інше дозвольте
подбати нашим професіоналам.
Ми пропонуємо вам віртуальний ремонт своїх
помешканнь,
включаючи редагування фотографій, віртуальну
постановку,
візуалізацію та віртуальний ремонт.
Процес швидкий, простий у використанні та
надзвичайно доступний.
</p>
56
482 ЧДТУ 21807-066 12 01
<ul class="list">
<li class="list item"> <b>ШВИДКО</b>
48 годин для віртуальної постановки
</li>
<li class="list item"><b>НЕМАЄ ПІДПИСКИ</b>
Платіть лише за те, що ви використовуєте,
без підписок – просто сплачуйте одну фіксовану
низьку ставку за зображення
</li>
<li class="list item"><b>НЕОБМЕЖЕНІ ЗМІНИ</b>
100% задоволення від нашої необмеженої гарантії
змін
</li>
<li class="list item"><b>РЕАЛЬНИЙ СЕРВІС</b>
Наші спеціалісти з обслуговування клієнтів доступні
цілодобово і без вихідних у чаті, телефоні чи електронній пошті
</li>
<li class="list item"><b>НЕМАЄ АВТОРСЬКОГО
ПРАВА</b>
Ми редагуємо ваші зображення та повертаємо їх вам
</li>
<li class="list item"><b>ЗНИЖКИ У ПРОБНИЙ
ПЕРІОД</b>
Отримайте знижку - 50% на три перші замовлення
</li>
</ul>
<div class="recommend">
57
482 ЧДТУ 21807-066 12 01
<p class="recommend count">
Олена на її друзі - рекомендують цю команду.
</p>
<div class="recommend friends">
<img src="img/user-3.jpg"
alt="Friend 1"
class="recommend photo">
<img src="img/user-4.jpg"
alt="Friend 2"
class="recommend photo">
<img src="img/user-5.jpg"
alt="Friend 3"
class="recommend photo">
<img src="img/user-6.jpg"
alt="Friend 4"
class="recommend photo">
</div>
</div>
</div>
<div class="user-reviews">
<figure class="review">
<blockquote class="review text">
Як фотограф нерухомості та фоторедактор, я іноді
перевантажений запитами від моїх клієнтів. " DLD "завжди допомагають,
Зіркова робота і такі чудові ціни! Я не можу просто
любити цю компанію!
</blockquote>
<figcaption class="review user">
58
482 ЧДТУ 21807-066 12 01
<img src="img/user-1.jpg"
alt="User 1"
class="review photo">
<div class="review user-box">
<p class="review user-name">Марк</p>
<p class="review user-date">Січ 23, 2022</p>
</div>
<div class="review rating">9.2</div>
</figcaption>
</figure>
<figure class="review">
<blockquote class="review text">
Я продавала пустий будинок майже 6-ть місяців, доки
не поспілкувався з командою "DmD". Після їх допомоги я знову виставив будинок
на продаж і він продався за лічені дні!
</blockquote>
<figcaption class="review user">
<img src="img/user-2.jpg"
alt="User 1"
class="review photo">
<div class="review user-box">
<p class="review user-name">Олена</p>
<p class="review user-date">Кві 13, 2021</p>
</div>
<div class="review rating">9.9</div>
</figcaption>
</figure>
59
482 ЧДТУ 21807-066 12 01
<button class="btn-inline">Show all
<span>→</span></button>
</div>
</div>
<div class="cta">
<h2 class="cta book-now">
Чудові новини, для багатьох користувачів зараз великі
знижки!!!
</h2>
<button class="btn">
<span class="btn visible">Замовити зараз</span>
<span class="btn invisible">Залишилось лише декілька
замовленнь по 40%</span>
</button>
</div>
</main>
</div>
</div>
</body>
</html>
Програмний код «Портфоліо» сторінки:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
60
482 ЧДТУ 21807-066 12 01
content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"
rel="stylesheet">
<link rel="stylesheet"
href="css/style.css">
<link rel="stylesheet"
href="css/index_p.css">
<link rel="shortcut icon"
type="image/png"
href="img/favicon.png">
<title>dld — Замовити в один клік</title>
</head>
<body>
<div class="container">
<header class="header">
<img src="img/logo_y.png"
alt="dld logo"
class="logo">
<form action="#"
class="search">
<input type="text"
class="search input"
placeholder="Пошук">
<button class="search button">
<svg class="search icon">
61
482 ЧДТУ 21807-066 12 01
<use xlink:href="img/sprite.svg#icon-magnifying-
glass"></use>
</svg>
</button>
</form>
<nav class="user-nav">
<div class="user-nav icon-box">
<svg class="user-nav icon">
<use xlink:href="img/sprite.svg#icon-bookmark"></use>
</svg>
<span class="user-nav notification">7</span>
</div>
<div class="user-nav icon-box">
<svg class="user-nav icon">
<use xlink:href="img/sprite.svg#icon-chat"></use>
</svg>
<span class="user-nav notification">13</span>
</div>
<div class="user-nav user">
<img src="img/user_admin.PNG"
alt="User photo"
class="user-nav user-photo">
<span class="user-nav user-name">Дмитро</span>
</div>
</nav>
</header>
<div class="content">
<nav class="sidebar">
<ul class="side-nav">
62
482 ЧДТУ 21807-066 12 01
<li class="side-nav item side-nav item--active">
<a href="index.html"
class="side-nav link">
<svg class="side-nav icon">
<use xlink:href="img/sprite.svg#icon-home"></use>
</svg>
<span>Головна</span>
</a>
</li>
<li class="side-nav item">
<a href="index_photo.html"
class="side-nav link">
<svg class="side-nav icon">
<use xlink:href="img/sprite.svg#icon-aircraft-take-
off"></use>
</svg>
<span>Портфоліо</span>
</a>
</li>
<li class="side-nav item">
<a href="index_posl.html"
class="side-nav link">
<svg class="side-nav icon">
<use xlink:href="img/sprite.svg#icon-key"></use>
</svg>
<span>Послуги</span>
</a>
</li>
63
482 ЧДТУ 21807-066 12 01
<li class="side-nav item">
<a href="index_contact.html"
class="side-nav link">
<svg class="side-nav icon">
<use xlink:href="img/sprite.svg#icon-map"></use>
</svg>
<span>Контакти</span>
</a>
</li>
</ul>
<div class="legal">
© 2022 by Dima Lynnyk
</div>
</nav>
<div style="width: 100%;">
<h1 > Приклади Наших Робіт</h1>
<div>
<ul class="list">
<li class="list item">
<img src="img/work1.PNG" alt="A Princess of Mars"
class="img">
<div style="margin: 1rem; text-align: center;">
</div>
</li>
<li class="list item">
64
482 ЧДТУ 21807-066 12 01
<img src="img/work2.PNG" alt="A Princess of Mars"
class="img">
<div style="margin: 1rem; text-align: center;" >
</div>
</li>
<li class="list item">
<img src="img/work3.PNG" alt="A Princess of Mars"
class="img">
<div style="margin: 1rem; text-align: center;" >
</div>
</li>
<li class="list item">
<img src="img/work4.PNG" alt="A Princess of Mars"
class="img">
<div style="margin: 1rem; text-align: center;" >
</div>
</li>
<li class="list item">
<img src="img/work5.PNG" alt="A Princess of Mars"
class="img">
<div style="margin: 1rem; text-align: center;" >
</div>
</li>
<li class="list item">
<img src="img/work6.PNG" alt="A Princess of Mars"
class="img">
<div style="margin: 1rem; text-align: center;">
</div>
</li>
<li class="list item">
65
482 ЧДТУ 21807-066 12 01
<img src="img/work7.PNG" alt="A Princess of Mars"
class="img">
<div style="margin: 1rem; text-align: center; ">
</div>
</li>
<li class="list item">
<img src="img/work8.PNG" alt="A Princess of Mars"
class="img">
<div style="margin: 1rem; text-align: center;" >
</div>
</li>
<li class="list item">
<img src="img/work9.PNG" alt="A Princess of Mars"
class="img">
<div style="margin: 1rem; text-align: center;" >
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
66
482 ЧДТУ 21807-066 12 01
Програмний код «Портфоліо» сторінки:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"
rel="stylesheet">
<link rel="stylesheet"
href="css/style.css">
<link rel="stylesheet"
href="css/index_p.css">
<link rel="shortcut icon"
type="image/png"
href="img/favicon.png">
<title>dld — Замовити в один клік</title>
</head>
<body>
<div class="container">
<header class="header">
<img src="img/logo_y.png"
alt="dld logo"
67
482 ЧДТУ 21807-066 12 01
class="logo">
<form action="#"
class="search">
<input type="text"
class="search input"
placeholder="Пошук">
<button class="search button">
<svg class="search icon">
<use xlink:href="img/sprite.svg#icon-magnifying-
glass"></use>
</svg>
</button>
</form>
<nav class="user-nav">
<div class="user-nav icon-box">
<svg class="user-nav icon">
<use xlink:href="img/sprite.svg#icon-bookmark"></use>
</svg>
<span class="user-nav notification">7</span>
</div>
<div class="user-nav icon-box">
<svg class="user-nav icon">
<use xlink:href="img/sprite.svg#icon-chat"></use>
</svg>
<span class="user-nav notification">13</span>
</div>
<div class="user-nav user">
68
482 ЧДТУ 21807-066 12 01
<img src="img/user_admin.PNG"
alt="User photo"
class="user-nav user-photo">
<span class="user-nav user-name">Дмитро</span>
</div>
</nav>
</header>
<div class="content">
<nav class="sidebar">
<ul class="side-nav">
<li class="side-nav item side-nav item--active">
<a href="index.html"
class="side-nav link">
<svg class="side-nav icon">
<use xlink:href="img/sprite.svg#icon-
home"></use>
</svg>
<span>Головна</span>
</a>
</li>
<li class="side-nav item">
<a href="index_photo.html"
class="side-nav link">
<svg class="side-nav icon">
<use xlink:href="img/sprite.svg#icon-aircraft-take-
off"></use>
</svg>
69
482 ЧДТУ 21807-066 12 01
<span>Портфоліо</span>
</a>
</li>
<li class="side-nav item">
<a href="index_posl.html"
class="side-nav link">
<svg class="side-nav icon">
<use xlink:href="img/sprite.svg#icon-key"></use>
</svg>
<span>Послуги</span>
</a>
</li>
<li class="side-nav item">
<a href="index_contact.html"
class="side-nav link">
<svg class="side-nav icon">
<use xlink:href="img/sprite.svg#icon-map"></use>
</svg>
<span>Контакти</span>
</a>
</li>
</ul>
<div class="legal">
© 2022 by Dima Lynnyk
</div>
</nav>
70
482 ЧДТУ 21807-066 12 01
<div style="width: 100%;">
<h1 > Приклади Наших Робіт</h1>
<div>
<ul class="list">
<li class="list item">
<img src="img/work1.PNG" alt="A Princess of Mars"
class="img">
<div style="margin: 1rem; text-align: center; background-
color: antiquewhite; padding: 1rem;">
<p>Ідеально підходить для редагування фотографій
нерухомості, щоб ви могли представити свою інформацію за допомогою
першокласних,
<span>відретушованих фотографій професійного
вигляду.</span></p>
</div>
</li>
<li class="list item">
<img src="img/work2.PNG" alt="A Princess of Mars"
class="img">
<div style="margin: 1rem; text-align: center; background-
color: antiquewhite; padding: 1rem;">
<p>Наша команда може додати меблі до фотозйомки
нерухомості, щоб показати потенційним покупцям, наскільки універсальний
простір.</p>
</div>
</li>
<li class="list item">
<img src="img/work4.PNG" alt="A Princess of Mars"
class="img">
71
482 ЧДТУ 21807-066 12 01
<div style="margin: 1rem; text-align: center; background-
color: antiquewhite; padding: 1rem;">
<p>Візуалізуйте, як буде виглядати дизайн, перш ніж
братися за дорогий ремонт.
</p>
</div>
</li>
<li class="list item">
<img src="img/work9.PNG" alt="A Princess of Mars"
class="img">
<div style="margin: 1rem; text-align: center; background-
color: antiquewhite; padding: 1rem;">
<p>У вас є вакансія, яка не вказана в нашому спектрі
послуг? Зв’яжіться з нами, і ми зможемо запропонувати вашу роботу на
замовлення.
</p>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
72
482 ЧДТУ 21807-066 12 01
Програмний код «Контакти» сторінки:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"
rel="stylesheet">
<link rel="stylesheet"
href="css/style.css">
<link rel="stylesheet"
href="css/index_contact.css">
<link rel="shortcut icon"
type="image/png"
href="img/favicon.png">
<title>dld — Замовити в один клік</title>
</head>
<body>
<div class="container">
<header class="header">
<img src="img/logo_y.png"
alt="dld logo"
class="logo">
73
482 ЧДТУ 21807-066 12 01
<form action="#"
class="search">
<input type="text"
class="search input"
placeholder="Пошук">
<button class="search button">
<svg class="search icon">
<use xlink:href="img/sprite.svg#icon-magnifying-
glass"></use>
</svg>
</button>
</form>
<nav class="user-nav">
<div class="user-nav icon-box">
<svg class="user-nav icon">
<use xlink:href="img/sprite.svg#icon-bookmark"></use>
</svg>
<span class="user-nav notification">7</span>
</div>
<div class="user-nav icon-box">
<svg class="user-nav icon">
<use xlink:href="img/sprite.svg#icon-chat"></use>
</svg>
<span class="user-nav notification">13</span>
</div>
<div class="user-nav user">
<img src="img/user_admin.PNG"
alt="User photo"
class="user-nav user-photo">
74
482 ЧДТУ 21807-066 12 01
<span class="user-nav user-name">Дмитро</span>
</div>
</nav>
</header>
<div class="content">
<nav class="sidebar">
<ul class="side-nav">
<li class="side-nav item side-nav item--active">
<a href="index.html"
class="side-nav link">
<svg class="side-nav icon">
<use xlink:href="img/sprite.svg#icon-home"></use>
</svg>
<span>Головна</span>
</a>
</li>
<li class="side-nav item">
<a href="index_photo.html"
class="side-nav link">
<svg class="side-nav icon">
<use xlink:href="img/sprite.svg#icon-aircraft-take-
off"></use>
</svg>
<span>Портфоліо</span>
</a>
</li>
<li class="side-nav item">
<a href="index_posl.html"
75
482 ЧДТУ 21807-066 12 01
class="side-nav link">
<svg class="side-nav icon">
<use xlink:href="img/sprite.svg#icon-key"></use>
</svg>
<span>Послуги</span>
</a>
</li>
<li class="side-nav item">
<a href="index_contact.html"
class="side-nav link">
<svg class="side-nav icon">
<use xlink:href="img/sprite.svg#icon-map"></use>
</svg>
<span>Контакти</span>
</a>
</li>
</ul>
<div class="legal">
© 2022 by Dima Lynnyk
</div>
</nav>
<div class="container">
<div style="text-align:center">
76
482 ЧДТУ 21807-066 12 01
<h2>Контакти</h2>
<p>Якщо будуть якісь питання:</p>
</div>
<div class="row">
<div class="column">
<img src="img/kontakt.jpg" style="width:100%">
</div>
<div class="column">
<form action="/action_page.php">
<label for="fname">Як до вас звертатися?</label>
<input type="text" id="fname" name="firstname"
placeholder="Як до вас звертатися ">
<label for="lname"></label>
<label for="country">Країна</label>
<select id="country" name="country">
<option value="australia">Україна</option>
<option value="canada">Канада</option>
<option value="usa">США</option>
</select>
<label for="subject">Ваш Коментар</label>
<textarea id="subject" name="subject" placeholder="Друкувати
.." style="height:170px"></textarea>
<input type="submit" value="Надіслати">
</form>
</div>
</div>
</div>
77
482 ЧДТУ 21807-066 12 01
</body>
</html>
Код веб – дизайну CSS сайту :
:root {
background-image: linear-gradient(to right bottom, #7c56e4, #6c0da3, #ebf4fa,
#f3e6cf, #ebf4fa);
--color-primary: #7274f1;
--color-grey-light-1: #faf9f9;
--color-grey-light-2: #f4f2f2;
--color-grey-light-3: #f0eeee;
--color-grey-light-4: #ccc;
--color-grey-dark-1: #333;
--color-grey-dark-2: #777;
--color-grey-dark-3: #999;
--shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3);
--shadow-light: 0 2rem 5rem rgba(0, 0, 0, 0.06);
--line: 1px solid var(--color-grey-light-2); }
* {
margin: 0;
padding: 0; }
78
482 ЧДТУ 21807-066 12 01
*,
*::before,
*::after {
box-sizing: inherit; }
html {
box-sizing: border-box;
font-size: 62.5%; }
@media only screen and (max-width: 68.75em) {
html {
font-size: 50%; } }
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
line-height: 1.6;
color: var(--color-grey-dark-2);
background-image: linear-gradient(to right bottom, var(--color-primary-light), var(--
color-primary-dark));
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh; }
.logo {
height: 6.25rem;
margin-left: 5rem; }
.search {
79
482 ЧДТУ 21807-066 12 01
flex: 0 0 40%;
display: flex;
align-items: center;
justify-content: center; }
@media only screen and (max-width: 31.25em) {
.search {
order: 1;
flex: 0 0 100%;
background-color: var(--color-grey-light-2); } }
.search input {
font-family: inherit;
font-size: inherit;
color: inherit;
background-color: var(--color-grey-light-2);
border: none;
padding: 0.7rem 2rem;
border-radius: 100px;
width: 90%;
transition: all 0.2s;
margin-right: -3.25rem; }
.search input:focus {
outline: none;
width: 100%;
background-color: var(--color-grey-light-3); }
.search input::-webkit-input-placeholder {
font-weight: 100;
color: var(--color-grey-light-4); }
.search input:focus + .search button {
80
482 ЧДТУ 21807-066 12 01
background-color: var(--color-grey-light-3); }
.search button {
border: none;
background-color: var(--color-grey-light-2); }
.search button:focus {
outline: none; }
.search button:active {
transform: translateY(2px); }
.search icon {
height: 2rem;
width: 2rem;
fill: var(--color-grey-dark-3); }
.user-nav {
align-self: stretch;
display: flex;
align-items: center; }
.user-nav > * {
padding: 0 2rem;
cursor: pointer;
height: 100%;
display: flex;
align-items: center; }
.user-nav > *:hover {
background-color: var(--color-grey-light-2); }
.user-nav icon-box {
position: relative; }
.user-nav icon {
81
482 ЧДТУ 21807-066 12 01
height: 2.25rem;
width: 2.25rem;
fill: var(--color-grey-dark-2); }
.user-nav notification {
font-size: 0.8rem;
height: 1.75rem;
width: 1.75rem;
border-radius: 50%;
background-color: var(--color-primary);
color: #fff;
position: absolute;
top: 1.5rem;
right: 1.1rem;
display: flex;
justify-content: center;
align-items: center; }
.user-nav user-photo {
height: 3.75rem;
border-radius: 50%;
margin-right: 1rem; }
.side-nav {
font-size: 1.4rem;
list-style: none;
margin-top: 3.5rem; }
@media only screen and (max-width: 56.25em) {
.side-nav {
display: flex;
82
482 ЧДТУ 21807-066 12 01
margin: 0; } }
.side-nav item {
position: relative; }
.side-nav item:not(:last-child) {
margin-bottom: 0.5rem; }
@media only screen and (max-width: 56.25em) {
.side-nav item:not(:last-child) {
margin: 0; } }
@media only screen and (max-width: 56.25em) {
.side-nav item {
flex: 1; } }
.side-nav item::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 3px;
background-color: var(--color-primary);
transform: scaleY(0);
transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s, background-
color 0.1s; }
.side-nav item:hover::before, .side-nav item--active::before {
transform: scaleY(1);
width: 100%; }
.side-nav item:active::before {
background-color: var(--color-primary-light); }
.side-nav link:link, .side-nav link:visited {
83
482 ЧДТУ 21807-066 12 01
color: var(--color-grey-light-1);
text-decoration: none;
text-transform: uppercase;
display: block;
padding: 1.5rem 3rem;
position: relative;
z-index: 10;
display: flex;
align-items: center; }
@media only screen and (max-width: 56.25em) {
.side-nav link:link, .side-nav link:visited {
justify-content: center;
padding: 2rem; } }
@media only screen and (max-width: 37.5em) {
.side-nav link:link, .side-nav link:visited {
flex-direction: column;
padding: 1.5rem 0.5rem; } }
.side-nav icon {
width: 1.75rem;
height: 1.75rem;
margin-right: 2rem;
fill: currentColor; }
@media only screen and (max-width: 37.5em) {
.side-nav icon {
margin-right: 0;
margin-bottom: 0.7rem;
width: 1.5rem;
height: 1.5rem; } }
84
482 ЧДТУ 21807-066 12 01
.legal {
font-size: 1.2rem;
color: var(--color-grey-light-4);
text-align: center;
padding: 2.5rem; }
@media only screen and (max-width: 56.25em) {
.legal {
display: none; } }
.gallery {
display: flex; }
.gallery photo {
width: 100%;
display: block; }
.overview {
display: flex;
align-items: center;
border-bottom: var(--line); }
.overview heading {
font-size: 2.25rem;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
padding: 1.5rem 3rem; }
@media only screen and (max-width: 37.5em) {
.overview heading {
85
482 ЧДТУ 21807-066 12 01
font-size: 1.8rem;
padding: 1.25rem 2rem; } }
.overview stars {
margin-right: auto;
display: flex; }
.overview icon-star, .overview icon-location {
width: 1.75rem;
height: 1.75rem;
fill: var(--color-primary); }
.overview location {
font-size: 1.2rem;
display: flex;
vertical-align: center; }
.overview icon-location {
margin-right: 0.5rem; }
.overview rating {
background-color: var(--color-primary);
color: #fff;
margin-left: 3rem;
padding: 0 2.25rem;
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; }
@media only screen and (max-width: 37.5em) {
.overview rating {
padding: 0 1.5rem; } }
86
482 ЧДТУ 21807-066 12 01
.overview rating-average {
font-size: 2.25rem;
font-weight: 300;
margin-bottom: -3px; }
@media only screen and (max-width: 37.5em) {
.overview rating-average {
font-size: 1.8rem; } }
.overview rating-count {
font-size: 0.8rem;
text-transform: uppercase; }
@media only screen and (max-width: 37.5em) {
.overview rating-count {
font-size: 0.5rem; } }
.btn-inline {
border: none;
color: var(--color-primary);
font-size: inherit;
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
display: inline-block;
background-color: transparent;
cursor: pointer;
transition: all 0.2s; }
.btn-inline span {
margin-left: 3px;
transition: margin-left 0.2s; }
.btn-inline:hover {
87
482 ЧДТУ 21807-066 12 01
color: var(--color-grey-dark-1); }
.btn-inline:hover span {
margin-left: 8px; }
.btn-inline:focus {
outline: none;
animation: pulsate 1s infinite; }
@keyframes pulsate {
0% {
transform: scale(1);
box-shadow: none; }
50% {
transform: scale(1.05);
box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.25); }
100% {
transform: scale(1);
box-shadow: none; } }
.paragraph:not(:last-of-type) {
margin-bottom: 2rem; }
.list {
list-style: none;
margin: 3rem 0;
padding: 3rem 0;
border-top: var(--line);
border-bottom: var(--line);
display: flex;
88
482 ЧДТУ 21807-066 12 01
flex-wrap: wrap; }
.list item {
flex: 0 0 50%;
margin-bottom: 0.7rem; }
.list item::before {
content: '';
display: inline-block;
height: 1rem;
width: 1rem;
margin-right: 0.7rem;
background-image: url(../img/chevron-thin-right.svg);
background-size: cover; }
@supports (-webkit-mask-image: url()) or (mask-image: url()) {
.list item::before {
background-color: var(--color-primary);
-webkit-mask-image: url(../img/chevron-thin-right.svg);
-webkit-mask-size: cover;
mask-image: url(../img/chevron-thin-right.svg);
mask-size: cover;
background-image: none; } }
.recommend {
font-size: 1.3rem;
color: var(--color-grey-dark-3);
display: flex;
align-items: center; }
.recommend count {
margin-right: auto; }
89
482 ЧДТУ 21807-066 12 01
.recommend friends {
display: flex; }
.recommend photo {
box-sizing: content-box;
height: 4rem;
width: 4rem;
border-radius: 50%;
border: 3px solid #fff; }
.recommend photo:not(:last-child) {
margin-right: -2rem; }
.review {
background-color: #fff;
box-shadow: var(--shadow-light);
padding: 3rem;
margin-bottom: 3.5rem;
position: relative;
overflow: hidden; }
@media only screen and (max-width: 56.25em) {
.review {
padding: 2rem;
margin-bottom: 3rem; } }
.review text {
margin-bottom: 2rem;
z-index: 10;
position: relative; }
.review user {
display: flex;
90
482 ЧДТУ 21807-066 12 01
align-items: center; }
.review photo {
height: 4.5rem;
width: 4.5rem;
border-radius: 50%;
margin-right: 1.5rem; }
.review user-box {
margin-right: auto; }
.review user-name {
font-size: 1.1rem;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 0.4rem; }
.review user-date {
font-size: 1rem;
color: var(--color-grey-dark-3); }
.review rating {
color: var(--color-primary);
font-size: 2.2rem;
font-weight: 300; }
.review::before {
content: '\201C';
position: absolute;
top: -2.75rem;
left: -1rem;
line-height: 1;
font-size: 20rem;
color: var(--color-grey-light-2);
91
482 ЧДТУ 21807-066 12 01
font-family: sans-serif;
z-index: 1; }
.cta {
padding: 3.5rem 0;
text-align: center; }
@media only screen and (max-width: 56.25em) {
.cta {
padding: 2.5rem 0; } }
.cta book-now {
font-size: 2rem;
font-weight: 300;
text-transform: uppercase;
margin-bottom: 2.5rem; }
.btn {
font-size: 1.5rem;
font-weight: 300;
text-transform: uppercase;
border-radius: 100px;
border: none;
background-image: linear-gradient(to right, var(--color-primary-light), var(--color-
primary-dark));
color: #fff;
position: relative;
overflow: hidden;
cursor: pointer; }
.btn > * {
92
482 ЧДТУ 21807-066 12 01
display: inline-block;
height: 100%;
width: 100%;
transition: all 0.2s; }
.btn visible {
padding: 2rem 7.5rem; }
.btn invisible {
position: absolute;
padding: 2rem 0;
left: 0;
top: -100%; }
.btn:hover {
background-image: linear-gradient(to left, var(--color-primary-light), var(--color-
primary-dark)); }
.btn:hover .btn visible {
transform: translateY(100%); }
.btn:hover .btn invisible {
top: 0; }
.btn:focus {
outline: none;
animation: pulsate 1s infinite; }
.container {
max-width: 120rem;
margin: 8rem auto;
background-color: var(--color-grey-light-1);
box-shadow: var(--shadow-dark);
min-height: 50rem; }
93
482 ЧДТУ 21807-066 12 01
@media only screen and (max-width: 75em) {
.container {
margin: 0;
max-width: 100%;
width: 100%; } }
.header {
font-size: 1.4rem;
height: 7rem;
background-color: #fff;
border-bottom: var(--line);
display: flex;
justify-content: space-between;
align-items: center; }
@media only screen and (max-width: 31.25em) {
.header {
flex-wrap: wrap;
align-content: space-around;
height: 11rem; } }
.content {
display: flex; }
@media only screen and (max-width: 56.25em) {
.content {
flex-direction: column; } }
.sidebar {
background-color: var(--color-grey-dark-1);
94
482 ЧДТУ 21807-066 12 01
flex: 0 0 18%;
display: flex;
flex-direction: column;
justify-content: space-between; }
.hotel-view {
background-color: #fff;
flex: 1; }
.detail {
font-size: 1.4rem;
display: flex;
padding: 4.5rem;
background-color: var(--color-grey-light-1);
border-bottom: var(--line); }
@media only screen and (max-width: 56.25em) {
.detail {
padding: 3rem; } }
@media only screen and (max-width: 37.5em) {
.detail {
flex-direction: column; } }
.description {
background-color: #fff;
box-shadow: var(--shadow-light);
padding: 3rem;
flex: 0 0 60%;
margin-right: 4.5rem; }
95
482 ЧДТУ 21807-066 12 01
@media only screen and (max-width: 56.25em) {
.description {
padding: 2rem;
margin-right: 3rem; } }
@media only screen and (max-width: 37.5em) {
.description {
margin-right: 0;
margin-bottom: 3rem; } }
.user-reviews {
flex: 1;
display: flex;
flex-direction: column;
align-items: center; }
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Б.Кулагін. 3D Studio MAX – від об'єкту до анімації. Київ.: 2003. -
480с.
2. І. Мак-Фарланд, Р.Польовий. 3D Studio MAX 4 для професіоналів
Київ.: 2002. -736 з
3. Кім Лі. 3ds max 4/5 для дизайнера. Мистецтво тривимірної
анімації. М.: ТІД "ДС", 2002. -848с.
4. Джон А. Белл та ін. 3D Studio Max R3. Спецефекти та дизайн. К.:
Діалектика-Вільямс, 2000. - 400с.
5. Леонтьєв Б.К. 3D Studio MAX 7.0 не для дилетантів. М: Новий
видавничий будинок, 2005. -362с.
6. Браем, Г. Психологія кольору/Г. Браем, - М: АСТ, 2009-160 с.
7. Бхаскаран, Л. Анатомія дизайну. Реклама, книги, газети,
журнали/Л. Бхаскаран, - М: АСТ, 2006, - 256 с
8. Вуд, Л. Web-графіка: довідник: Пров. з англ. / Л. Вуд; пров. І.
Симонович, - Київ, 1998.-217 з
9. Інженерна та комп'ютерна графіка: навч. для вузів/Е.Т.
Романичова, А.К. Іванова, А.С. Куликов та ін. – М.: Вища школа,
1996. – 367 с.
10. Іттен, І. Мистецтво кольору/І. Іттен, - М: Д.Аронов, 2010, - 96 с.
11.Леонтьєв, Б. Енциклопедія дизайну та графіки на ПК/Б.Леонтьєв,
- М: Новий видавничий будинок, 2004. - 1040 с.
12. Манчулянці, О.А. Як стати ближче до клієнта/О.А. Манчулянці, -
М: Standout, 2003. - 52 с.
13. Мартінес, А Секрети створення недорогого Web-сайту/А.
Мартінес, - М: ДМК Прес, 2006. - 416 с.
Арк.
ЧДТУ 221807.066 ПЗ 96
Змн. Арк. № докум. Підпис Дата
14. Ормістон, Р. Колір. Велика книга / Р. Ормістон, М. Робінсон, - М:
Арт - Джерело, 2007, - 416 с.
15. Райн, Х. Найповніший довідник. Графічний дизайн/Х. Райн, - М:
АСТ, 2008. - 192 с.
16. Слек, Л. Що таке дизайн продукту? / Л.Слек, – М: АСТ, 2006, –
256 с.
17. Стор, І. Н. Сенсоутворення в графічному дизайні / І.М. стор, - М:
МДТУ ім. О.М. Косигіна, 2003, - 296 с.
18. Стоун, Т. Дизайн кольору. Практикум. / Т. Стоун, С. Адамс, Н.
Моріока, – М: РІП – Холдинг, 2006. – 240 с.
19. Тімоті, С. Структура дизайну. Стильне керівництво / С. Тімоті, -
М: РІП - Холдинг, 2008, - 272 с.
20. Холмс, А. Основи Web-дизайну/А. Холмс, - Вільямс: Cisco Press,
2002. - 640с.
21. Міневрін, Г.А. Дизайн. Ілюстрований словник – довідник, Г.А
Міневрін, - М: Архітектура – 3, 2004 – 288 с.
22. Веб – компанія «BoxBrownie» https://www.boxbrownie.com/eu/
23.Веб – компанія «AbiStyle» https://abistyle.com.ua/ua
24. Веб – компанія «Architec» https://www.arxi.com.ua/
25.Веб – компанія «Приват Дизайн» https://www.private-
design.com.ua/
ПРОГРАМНІ ЗАСОБИ
1. Windows 10 Pro © Microsoft Corporation, 1983 - 2022/
2. Microsoft Office Word 2016 © Microsoft Corporation, 1983 – 2022.
3. Google Chrome © Google, 2008 – 2022.
4. Visual Studio Code, 2015 – 2022.
Арк.
ЧДТУ 221807.066 ПЗ 97
Змн. Арк. № докум. Підпис Дата