Подякувати Студентському архіву довільною сумою
Admin
26.02.2023 12:38
Дякуємо, що користуєтесь нашим архівом!
Веб-програмування
Інформація про навчальний заклад
ВУЗ:
Національний університет Львівська політехніка
Інститут:
Інститут комп’ютерних наук та інформаційних технологій
Факультет:
КН
Кафедра:
Кафедра автоматизованих систем управління
Інформація про роботу
Рік:
2024
Тип роботи:
Розрахунково - графічна робота
Предмет:
Веб технології та веб дизайн
Частина тексту файла (без зображень, графіків і формул):
Міністерство освіти і науки України
Національний університет «Львівська політехніка»
Інститут комп’ютерних наук та інформаційних технологій
Кафедра автоматизованих систем управління
/
Звіт
до розрахунково-графічної роботи
з дисципліни « Веб-технології та веб-дизайн »
на тему:
« Розробка 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>
<!-- #Content -->
<div id="Content">
<div class="content_wrapper clearfix">
<!-- .sections_group -->
<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>
<!-- #Content -->
<div id="Content">
<div class="content_wrapper clearfix">
<!-- .sections_group -->
<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>
<!-- #Content -->
<div id="Content">
<div class="content_wrapper clearfix">
<!-- .sections_group -->
<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-скрипти.
29.10.2018 22:10-
Ділись своїми роботами та отримуй миттєві бонуси!
0%
Оголошення від адміністратора