Добавлен: 17.06.2023
Просмотров: 50
Скачиваний: 2
СОДЕРЖАНИЕ
1.1. Основные понятия и нормативная база
1.2. Современные средства разработки
1.3. Основные требования к дизайну современных веб-ресурсов
1.4. Этапы проектирования и разработки веб-приложения
2.2. Разработка макета страниц сайта
2.3. Описание структуры проекта
Рис. 2.1 – общая структура макета сайта
Изображение шапки и навигационного меню представлено на рис. 2.2.
Рис. 2.2 – Вид верхней части главной страницы
Изображение карты и подвала представлено на рисунке 2.3.
Рис. 2.3 – Вид нижней части главной страницы
2.3. Описание структуры проекта
Данный сайт будет состоять из основных частей:
- Статические html-страницы сайта (располагаются в основной директории сайта);
- Файлы стилей (директория css/), в том числе bootstrap-стили;
- Файлы скриптов (директория js/);
- Файлы изображений (директория images/);
- Файлы шрифтов (директория fonts/).
Главная страница расположена по адресу <имя сайта/index.html.
2.4. Анализ соответствия проекта требованиям
Данный проект является полноценным современным веб-сайтом для коммерческой организации.
В проекте были использованы все современные стандарты верстки, дизайн сайта отвечает современных требованиям. Благодаря использованию css-библиотеки Bootstrap, мы получили адаптивный дизайн, который гибко отображается различных устройствах.
В проекте использованы отдельные маркетинговые инструменты и методы, сделан акцент на продукции организации, а также ее контактной информации.
В дальнейшем можно расширить функционал сайта с помощью серверных языков программирования, которые позволяют создавать динамические страницы на сайте, а также панель управления сайта (для администратора). Для этого можно использовать как php-язык или php-фраймворк, так и готовую CMS (например, Drupal, Joomla, Wordpress).
ЗАКЛЮЧЕНИЕ
Итак, Web - это совокупность логически связанных между собой веб-страниц, а также место расположения контента сервера. Сайт в сети Интернет представляет собой некоторую совокупность данных, которая имеет уникальный адрес и воспринимается пользователем как некое целое. Доступ пользователя к веб-сайтам осуществляется по специальному протоколу HTTP.
Необходимо отметить, что данная курсовая работа содержит теоретические и практические основы разработки, проектировки, написания web-сайта. В работе рассмотрены цели, задачи сайта.
В данной работе мною был использован язык гипертекстовой разметки Web-страниц HTML, каскадные таблицы стилей CSS, Javascript.
Проект вклчает html-страницы, файлы каскадных таблиц стилей, js-скрипты и базовые библиотеки bootstrap. Страницы сайта наполнены осмысленной информацией. Эти условия удовлетворяют требованиям к данной курсовой работе.
WEB сайт, нужен не только для отображения конкретной информации, также он служит для рекламы компании или фирмы, своего рода PR инструмент, позволяющий показать имидж компании или фирмы. Соблюдая все эти правила и рекомендации - получаем уникальный продукт, удовлетворяющий потребности «широкого круга пользователей».
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
1. Федеральный закон от 27.07.2006 N 149-ФЗ (ред. от 19.12.2016) «Об информации, информационных технологиях и о защите информации» (с изм. и доп., вступ. в силу с 01.01.2017) // СПС «Консультант Плюс». Режим доступа: http://www.consultant.ru/document/cons_doc_LAW_61798/
2. Постановление Правительства РФ от 18 февраля 2005 г. № 87 «Об утверждении перечня наименований услуг связи, вносимых в лицензии, и перечней лицензионных условий» а также Руководящий документ отрасли «Телематические службы»
3. Авинаш Кошик Веб-аналитика 2.0 на практике. Тонкости и лучшие методики = Web Analytics 2.0: The Art of Online Accountability and Science of Customer Centricity. - М, 2011. - С. 528
4. Адам Фримен. jQuery для профессионалов = Pro jQuery. - М.: «Вильямс», 2012. - 960 с.
5. Бобкова О., Давыдов С. К вопросу о соотношении понятий «доменное имя» и «название сайта» // Хозяйство и право. - М., 2014, № 6. - С. 102—106.
6. Васвани. MySQL: использование и администрирование = MySQL Database Usage & Administration. - М.: «Питер», 2011. - 368 с.
7. Воройский Ф.C. Информатика. Энциклопедический систематизированный словарь-справочник. - М.: Физматлит, 2006. - С. 432. - 945с.
8. М.А. Курилов, С.В. Терещенко. Классификация систем управления содержимым web-ресурсов и их использование для разработки сайта дистанционного обучения // «Искусственный интеллект» 3’2010.
9. Олевинский Матвей Александрович. Веб-аналитика. Сравнение систем веб-аналитики // Научное периодическое издание «IN SITU, 2015, №4.
10. Чувиков Д.А. Самостоятельная разработка персонального сайта учителем // European student scientific journal. – 2014. – № 1. – С. 16-21.
11. Чувиков Д.А. Разработка персонального сайта учителем школы // Современные наукоемкие технологии. – 2014. – № 5 (1). – С. 222.
12. Флэнаган Д. JavaScript. Карманный справочник. Сделайте веб-страницы интерактивными! / Перевод А.Г. Сысонюк. - Москва.: Издательский дом «Вильямс», 2015. - С. 320.
13. Эд Титтел, Джефф Ноубл. HTML, XHTML и CSS для чайников, 7-е издание = HTML, XHTML & CSS For Dummies, 7th Edition. - М.: «Диалектика», 2011. - 400 с.
14. Экспертные системы : учебное пособие / сост. А. Н. Никулин. – Ульяновск : УлГТУ, 2015. – 78 с.
15. Якунин А.В. Веб-дизайн и оформление электронных СМИ. СПб., 2015. 94 с.
16. Peter Shaw. Twitter Bootstrap 3 Succinctly. - Syncfusion, Inc, 2014. - 110 с.
17. Веб-сайт [Электронный ресурс] // Wikipedia . Режим доступа: https://ru.wikipedia.org/wiki/Сайт (дата обращения 15.04.2018).
18. Preface // PHP.NET [Электронный ресурс]. Режим доступа: http://php.net/manual/en/preface.php
Приложение А. Код главной страницы
<!DOCTYPE html>
<html lang="ru">
<head>
<!-- Кодировка веб-страницы -->
<meta charset="utf-8">
<!-- Настройка viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Подключаем Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" >
<!-- Подключаем свои стили CSS -->
<link rel="stylesheet" href="css/style.css" >
<link rel="stylesheet" href="css/mybootstrap.css" >
<link rel="stylesheet" href="css/header.css" >
<link rel="stylesheet" href="css/webform.css" >
<link rel="stylesheet" href="css/footer.css" >
<link rel="stylesheet" href="css/slider.css" >
<link rel="stylesheet" href="css/plitka.css" >
</head>
<body>
<header>
<div class="container">
<div class="header hidden-xs hidden-sm">
<div class="col-lg-3" style="border: 0px double black; height: 100%;">
<a href="index.html"><img src="images/logo.png" style="height: 100%; width: auto;"></a>
</div>
<div class="col-lg-3" style="height: 100%; text-align: center; font-style: italic;">Издаем только<br>качественную музыку
</div>
<div class="col-lg-3" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: 600;">
8-800-000-00-00<br>8-800-000-00-01
</div>
<div class="col-lg-3" style="height: 100%;">
<a href="#yamap"><img src="images/nakhodka.png" style="height: 100%; width: auto;"></a>
</div>
</div>
</div>
<div class="mainmenu">
<nav class="navbar">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item"><a href="product.html">Продукция</a></li>
<li class="nav-item"><a href="autors.html">Авторы</a></li>
<li class="nav-item"><a href="partners.html">Партнеры</a></li>
<li class="nav-item"><a href="#yamap">Контакты</a></li>
</ul>
</div>
</nav>
</div>
</header>
<div class="maincontent">
<div class="webform hidden-xs hidden-sm" style="position: absolute; opacity: 0.8; z-index: 10;">
<div class="container">
</div>
</div>
<section class="block" id="slider">
<div class="slider">
<ul>
<li>
<img src="images/turkey.jpg">
<div class="container">
<div class="info">
<h2>«LVA Music»</h2>
<p style="text-align: center;">один из крупнейших музыкальных издательских домов в России, брэнд международного уровня.</p>
</div>
</div>
</li>
</ul>
</div>
</section>
<section class="block" id="tur">
<div class="plitka container">
<ul>
<li class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<img src="images/audio.jpg">
<div class="place">Аудиокнига</div>
<div class="price">от 25 000</div>
</li>
<li class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<img src="images/album.jpg">
<div class="place">Музыкальный альбом</div>
<div class="price">от 65 000</div>
</li>
<li class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<img src="images/clip.jpg">
<div class="place">Видеоклип</div>
<div class="price">от 85 000</div>
</li>
</ul>
</div>
</section>
<section class="block" id="otziv">
<div class="container">
<div class="otziv" style="width: 100%;margin-top: 15px; margin-bottom: 15px; background-color: #fff;">
<div class="plitka">
<ul><li>
<img src="images/pult.jpg">
<div class="place">Продвижение</div>
<div class="price">Бесценно</div>
</li></ul>
</div>
</div>
</div>
</section>
<section class="block" id="yamap">
<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A95b83af2bf8baba5b1c4bee740e74f64f876e474504be762223c1619bf648677&width=100%25&height=500&lang=ru_RU&scroll=true"></script>
</section>
<section class="block" id="partners" style="padding-top: 15px; ppadding-bottom: 15px;">
<div class="container">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-3">
<img src="images/mtv.png" alt="partner logo" />
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-3">
<img src="images/muztv.png" alt="partner logo" />
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-3">
<img src="images/mtv.png" alt="partner logo" />
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-3">
<img src="images/muztv.png" alt="partner logo" />
</div>
</div>
</section>
</div>
<footer>
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
<h2>Полезная информация</h2>
<ul>
<li>Издательский дом</li>
<li>Коммерческое предложение</li>
<li>Словарь терминов</li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
<h2>О компании</h2>
<ul>
<li>Контактная информация</li>
<li>Наши достижения</li>
<li>Новости</li>
<li>Вакансии</li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
<h2>Наши суперзвезды</h2>
<ul>
<li>Рэпэр "Миронофф"</li>
<li>Певица "Няшка"</li>
<li>Группа "Фрукты-Овощи"</li>
<li>Место свободно :)</li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3" style="padding-top: 25px;">
<script type="text/javascript">(function() { if (window.pluso)if (typeof window.pluso.start == "function") return;
if (window.ifpluso==undefined) { window.ifpluso = 1; var d = document, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true; s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://share.pluso.ru/pluso-like.js'; var h=d[g]('body')[0]; h.appendChild(s); }})();</script><div class="pluso" data-background="transparent" data-options="medium,square,line,horizontal,nocounter,theme=06" data-services="vkontakte,odnoklassniki,facebook,twitter,google" data-user="599511796"></div>