Веб-програмування. Розрахунково - графічна робота з Веб технології та веб дизайн. Робота № 530499

Веб-програмування

Інформація про навчальний заклад

ВУЗ:

Національний університет Львівська політехніка

Інститут:

Інститут комп’ютерних наук та інформаційних технологій

Факультет:

КН

Кафедра:

Кафедра автоматизованих систем управління

Інформація про роботу

Рік:

2018

Тип роботи:

Розрахунково - графічна робота

Предмет:

Веб технології та веб дизайн

Завантажити

Частина тексту файла (без зображень, графіків і формул):

Міністерство освіти і науки України Національний університет «Львівська політехніка» Інститут комп’ютерних наук та інформаційних технологій Кафедра автоматизованих систем управління / Звіт до розрахунково-графічної роботи з дисципліни « Веб-технології та веб-дизайн » на тему: « Розробка Web-проекту » Львів-2018 Опис індивідуального Web-проекту: Назва розробленого Web-проекту. Характеристика об’єкту проектування короткий опис вибраної теми, висвітлення тих особливостей, які можуть вплинути на структуру та дизайн-стиль Web сторінок. Цілі даного Web-вузла. Короткий опис загальної стратегії, опис структури вузла. Карта вузла. Детальний опис з розбиттям на блоки матеріалу кожної Web-сторінки використання малюнків (print screen), використання фрагментів коду характерних елементів, коментарі в коді. Oпис системи навігації по вузлу. Використані програмні інструментальні засоби. Список використаної літератури, включаючи Інтернет. Опис Web-проекту «Квітковий дім» Назва Web-проекту : «Квітковий дім». Скрін головної сторінки сайту: / Характеристика об’єкту проектування В компанії «Квітковий Дім» працює команда однодумців професіоналів квіткової справи, які нададуть кожному кваліфіковану консультацію. Тут Ви завжди зможете замовити букети з живих квітів, квіткові композиції, декоративні рослини, Вам допоможуть оформити живими та штучними квітами Ваші корпоративні заходи, ювілеї, вечірки, свята, бенкети тощо. До послуг клієнтів завжди доступні в широкому асортименті сувеніри, подарунки, вазони тощо. Асортимент товару приємно здивує найвибагливішого клієнта, задовольнить найрізноманітніші примхи. Флористи-дизайнери Квіткового Дому у Львові підберуть Вам саме той букет, що підходить для того або іншого випадку. А якщо Ви побажаєте створити щось своє, індивідуальне, флористи врахують усі Ваші побажання у неповторній ексклюзивній композиції. Ось чому я обрала об’єктом проектування власного Web-проекту «Квітковий дім». Ціль даного Web-проекту: полягає у популяризації мережі магазинів «Квітковий дім», підвищенні її рейтингів та наданні можливості ознайомитись із усією інформацією про магазин та його асортимент, використовуючи мережу Інтернет. Загальний опис структури Web-вузла: Сайт складається з декількох сторінок, які пов’язані між собою областю навігації, навігація дає можливість лише одним кліком перейти на необхідну область Web-вузла; реалізовано єдиний стиль та кольорову гаму сайту; Детальний опис з розбиттям на блоки матеріалу кожної Web-сторінки «Головна сторінка» /  <div class="slidershow" id="main"> <div class="mySlides fade"> <img src="img/2.jpg" style="height: 100vh" width="100%"> </div> <div class="mySlides fade"> <img src="img/3.jpg" style="height: 100vh" width="100%"> </div> <div class="mySlides fade"> <img src="img/4.jpg" style="height: 100vh" width="100%"> </div> <div class="mySlides fade"> <img src="img/2.jpg" style="height: 100vh" width="100%"> </div> <div class="mySlides fade"> <img src="img/3.jpg" style="height: 100vh" width="100%"> </div> <a onclick="plusSlides(1)" class="prev"><img src="img/right.png"></a> <a onclick="plusSlides(-1)" class="next"><img src="img/left.png"></a> <div class="dots"> <span onmousemove="pres(1)" onmouseout="none(1)" class="dot" onclick="currentSlide(1)"></span> <span onmousemove="pres(2)" onmouseout="none(2)" class="dot" onclick="currentSlide(2)"></span> <span onmousemove="pres(3)" onmouseout="none(3)" class="dot" onclick="currentSlide(3)"></span> <span onmousemove="pres(4)" onmouseout="none(4)" class="dot" onclick="currentSlide(4)"></span> <span onmousemove="pres(5)" onmouseout="none(5)" class="dot" onclick="currentSlide(5)"></span> <div id="pic_1"></div> <div id="pic_2"></div> <div id="pic_3"></div> <div id="pic_4"></div> <div id="pic_5"></div> </div> </div> Сторінка «Галерея» / <div id="Subheader"> <div class="container"> <div class="column one"> <h1 class="title">Наша галерея</h1> <ul class="breadcrumbs"> <li class="home"><i class="fa fa-home"></i><a href="index-2.html">Головна</a><span>/</span></li> <li><a href="#">Галерея</a></li> </ul> </div> </div> </div> Сторінка «Про нас» / <div id="Subheader"> <div class="container"> <div class="column one"> <h1 class="title">Про нашу компанію</h1> <ul class="breadcrumbs"> <li class="home"><i class="icon-home"></i><a href="index.html">Головна</a><span>/</span></li> <li><a href="#">Про нас</a></li> </ul> </div> </div> </div>  <div id="Content"> <div class="content_wrapper clearfix">  <div class="sections_group"> <div class="section " style="padding:0px 0; background-color:"> <div class="section_wrapper clearfix"> <div class="items_group clearfix"> <div class="column one-third image"> <div class="scale-with-grid aligncenter wp-caption no-hover"> <div class="photo"> <img class="scale-with-grid" src="upload/feature_box_2.jpg" alt=""/> </div> </div> </div> <div class="column one-third column"> <h5 style="">Квітковий Дім надає широкий спектр послуг по оформленню живими квітами та штучним декором. Пропонуємо Вам стильне, оригінальне та вишукане вирішення для оформлення будь-якої яскравої події у Вашому житті. Різноманітні квіти у будь-яку пору року Ви можете замовити у нас! Креативна команда Квіткового Дому створить саме для Вас неповторні композиції до весільної церемонії, ювілею, тематичного свята! Ювілеї, весілля, випускні бали, безліч інших свят потребують святкового оформлення квітковими композиціями. А коли є попит на квіти, є і пропозиція. </h5> </div> <div class="column one-third column"> <h5 style=""> <p>Цікавий факт</p> <p> Квіти в усі часи були загальними улюбленцями. Наприклад, у епоху короля-сонця Людовіка Чотирнадцятого, при двірні садівники не скупилися на розкішні прикраси для квітів та букетів у вигляді шовкових бантів, атласних стрічок і легкої позолоти. Вони навіть вигадали поливати пелюстки парфумами! </p> </h5> </div> </div> </div> </div> Сторінка «Команда» / <div id="Subheader"> <div class="container"> <div class="column one"> <h1 class="title">Наша команда</h1> <ul class="breadcrumbs"> <li class="home"><i class="fa fa-home"></i><a href="index-2.html">Головна</a><span>/</span></li> <li><a href="#">Персонал</a></li> </ul> </div> </div> </div>  <div id="Content"> <div class="content_wrapper clearfix">  <div class="sections_group"> <div class="section " style="padding:20px 0; background-color:"> <div class="section_wrapper clearfix"> <div class="items_group clearfix"> <div class="column one-third our_team"> <div class="team"> <div class="photo"> <img class="scale-with-grid" src="upload/team_1.jpg" alt="Nick Everdeen"/> </div> <div class="desc"> <h4>Віта Стефанишин</h4> <p>Директор</p> <p class="phone"> i class="fa fa-phone"></i><a target="_blank" href="#">111-111-111</a> </p> </div> <div class="links"> <a target="_blank" class="link" href="mailto:mail@mail.com"><i class="fa fa-envelope"></i></a><a target="_blank" class="link" href="#"><i class="fa fa-facebook"></i></a><a target="_blank" class="link" href="#"><i class="fa fa-twitter"></i></a><a target="_blank" class="link" href="#"><i class="fa fa-linkedin"></i></a> </div> </div> </div> Сторінка «Контакти» / / <div id="Subheader"> <div class="container"> <div class="column one"> <h1 class="title">Зв'язок</h1> <ul class="breadcrumbs"> <li class="home"><i class="fa fa-home"></i><a href="index-2.html">Головна</a><span>/</span></li> <li><a href="#">Контакти</a></li> </ul> </div> </div> </div>  <div id="Content"> <div class="content_wrapper clearfix">  <div class="sections_group"> <div class="section " style="padding:0px 0; background-color:"> <div class="section_wrapper clearfix"> <div class="items_group clearfix"> <div class="column one map"> <div class="google-map" id="google-map-area-1" style="width:100%; height:200px;">   </div> </div> </div> <div class="section " style="padding:0px 0; background-color:"> <div class="section_wrapper clearfix"> <div class="items_group clearfix"> <div class="column one-fourth column"> <h3>Ми завжди поруч</h3> <hr/> <a href="#"><i class="fa fa-th"></i>Детальніше</a> </div> <div class="column one-fourth icon_box"> <div class="icon_box_wrapper"> <div class="icon_image"> <i class="fa fa-home"></i> </div> <h4 class="title">Наша адреса</h4> <p> Місто Львів<br/> Вулиця Клепарівська 16 </p> </div> </div> <div class="column one-fourth icon_box"> <div class="icon_box_wrapper"> <div class="icon_image"> <i class="fa fa-phone"></i> </div> <h4 class="title">Телефон</h4> <p> <span style="font-size: 15px; line-height: 25px;">111-111-111<br/> 111-111-111 </span> </p> </div> </div> <div class="column one-fourth icon_box"> <div class="icon_box_wrapper"> <div class="icon_image"> <i class="fa fa-envelope"></i> </div> <h4 class="title">E-mail</h4> <p> <span style="font-size: 15px; line-height: 25px;"><a href="#">mail@mail.com</a><br/> </p> </div> </div> </div> </div> </div> Нижній колонтитул сайту. / Oпис системи навігації по вузлу Перехід на сторінку «Головна» у системі навігації: / Перехід на сторінку «Про нас»: / Перехід на сторінку «Галерея»: / Перехід на сторінку «Команда»: / Перехід на сторінку «Контакти»: / Під час розробки сайту я використала наступні сервіси і технології: SVG – іконки Sprite – зображення Бібліотека Jquery Теги HTML5 Блочна верстка Реалізовано єдиний стиль та кольорову гаму для сайту, а також елементи навігації. Присутній динамічний елемент – плавний скролінг. Використано інтерактивну карту, і втілено відеозапис на тематику сайту (Виробництво кави компанією “ORSO”). Вcтановлено favicon-іконку (Favicon (скор. від favorites icon) — іконка сайту, що зображається поряд з адресою сайту в адресному рядку, біля заголовку сторінки у вкладці або в списку закладок браузера. Традиційно використовується зображення розміром 16×16 пікселів у форматі файлу ICO, який зазвичай розташовується в корені сайту з назвою favicon.ico). Список використаної літератури, включаючи Інтернет: Курс: Веб-технології та веб-дизайн. [Електронний ресурс] Режим доступу: http://vns.lpnu.ua/course/view.php?id=4716. Д. Баррет, Д.Ливингстон, М. Браун. JavaScript, Web – профессионалам: пер. с англ. – К. Издательская группа BHV, 2001. – 240с. Favicon – Вікіпедія. [Електронний ресурс] Режим доступу: https://uk.wikipedia.org/wiki/Favicon. Блочная верстка сайта – урок с примером. [Електронний ресурс] Режим доступу: http://www.seostop.ru/sozdanie-saita/html-css/blochnaya-verstka.html. Scalable Vector Graphic (SVG) – Вікіпедія. [Електронний ресурс] Режим доступу: https://uk.wikipedia.org/wiki/Scalable_Vector_Graphics. Бесплатные иконки, файлы в формате PNG 99,400, EPS, SVG формат. [Електронний ресурс] Режим доступу: https://ru.freepik.com/free-icons. Библиотека jQuery. [Електронний ресурс] Режим доступу: http://lifeexample.ru/jquery-javascript-primeryi/biblioteka-jquery.html. CSS-спрайты и листы изображений. [Електронний ресурс] Режим доступу: https://webformyself.com/css-sprajty-i-listy-izobrazhenij/. Висновки: у результаті виконання розрахунково-графічно роботи, я розробила власний Web-проект на тему «Квітковий дім»; вказала характеристики об’єкту проектування (короткий опис вибраної теми); вказала цілі даного Web-вузла; навела короткий опис загальної стратегії, опис структури вузла; зробила карту Web-вузла; детально описала з розбиттям на блоки кожну Web-сторінку сайту; зробила опис системи навігації по вузлу; вказала використані програмні інструментальні засоби. Також при розробці сайту я ознайомилася та застосувала нові теги Html5, навчилася додавати динаміку для сайту використовуючи JS-скрипти.

Розрахунково - графічна робота Веб технології та веб дизайн

vitavita

29.10.2018 22:44

Коментарі

Ви не можете залишити коментар. Для цього, будь ласка, або зареєструйтесь.

Ділись своїми роботами та отримуй миттєві бонуси!

поділитись