1 2
2 РАБОЧИЙ ПРОЕКТ
2.1 Файловая структура сайта
Файловая структура сайта состоит из папок, HTML, CSS, JavaScript и PHP файлов, расположенных в корневой папке хостинга (рисунок 3).
Рисунок 3 – Файловая структура сайта
В папке «CSS» расположены файлы с расширением .css, служащие для оформления сайта.
В папке «JS» расположены файлы с расширением .js, хранящие в себе скрипты, используемые на сайте.
В папке «img» расположены файлы с расширениями .jpg, .png, .gif, используемые для создания графического дизайна сайта.
В папке «vendor» расположены несколько папок. Каждая из них содержит в себе готовые скрипты и библиотеки, скачанные с сети интернет. В папке «bootstrap» расположены файлы фреймворка bootstrap, предназначенные для облегчения верстки сайта.
В папке «jQuery» находятся файлы библиотеки jQuery, предназначенные для упрощения обращения к DOM элементам страницы. В папке «jquery-easing» расположены функции jQuery, предназначенные для создания плавной прокрутки страниц сайта.
Файл «index.html» хранит структуру главной страницы.
Файл «contact.html» хранит структуру и данные для отображения контактной информации о магазине.
Файл «service.html» хранит структуру и информацию о товарах и услугах, предоставляемых магазином.
2.2 Разработка сайта
Сначала была создана файловая структура сайта. Для этого были созданы папки «css», «js» и «img». В папке «css» был создан файл стилей main.css. В папке «js» был создан файл main.js. В папку «img» были загружены обработанные в программе Adobe Photoshop картинки, в дальнейшем использовавшиеся для создания дизайна страниц сайта.
Для упрощения работы с версткой сайта, было решено скачать фреймворк bootstrap. Файлы фреймворка было решено разместить в отдельной папке, для этого в корневой папке сайта была создана папка «vendor», в нее было решено загружать все файлы, скачанные из интернета.
После создания папок и дополнительных файлов, был создан файл index.html. Первым делом, была создана структура главной страницы. Данная структура предусматривает разделение страницы на пять блоков:
- «Шапка» страницы;
- блок с баннером;
- блок с информацией о магазине и его преимуществах;
- блок с продукцией магазина;
- блок с контактной информацией для связи с менеджером магазина;
- «Подвал» страницы.
Блок с идентификатором «header» (рисунок 4), предназначен для создания структуры «шапки» сайта.
Рисунок 4 – Код структуры шапки сайта
Блок с классом «tp-banner» (рисунок 5) содержит в себе структуру баннера главной страницы.
Рисунок 5 – Код структуры баннера на главной странице
Блок с идентификатором «about» (рисунок 6) предназначен для создания структуры блоков «О нас».
Блок с идентификатором «page-contact» (рисунок 7) предназначен для хранения структуры блока с контактами магазина.
Рисунок 6 – Код структуры блоков «О нас»
Рисунок 7 – Код структуры блока «Контакты»
Блок с идентификатором «form-horizontal space-50» (рисунок 8) предназначен для хранения структуры блока для отправки запроса на обратную связь.
Рисунок 8 – Код структуры блока «Обратная связь»
Блок с классом «head» (рисунок 9) предназначен для хранения структуры блока вывода информации о способах связи с компанией.
Рисунок 9 – Код структуры блока «Контакты»
Блок с идентификатором «footer» (рисунок 10) содержит структуру «подвала» сайта.
Рисунок 10 – Код структуры подвала сайта
После создания структуры сайта было произведено наполнение страницы контентом.
Далее была создана страница с услугами компании. Для этого в корневой папке сайта был создан файл «service.html». В нем была прописана структура, состоящая из следующих блоков:
- «Шапка»;
- блок с продукцией магазина;
- «Подвал».
Несмотря на то, что в структуре странице имеются блоки, аналогичные блокам на главной странице, они наполнялись разным контентом.
Затем была создана страница с контактами. Для этого был создан файл «contact.html», содержащий в себе структуру, состоящую из следующих блоков:
- «Шапка»;
- «Контакты»;
- «Обратная связь»;
- «Карта»;
- «Подвал».
Блоки «Шапка», «Контакты» и «Подвал» имеют аналогичную структуру с блоками на главной странице. Блок «Карта» содержит в себе структуру для вывода карты с меткой (рисунок 11). Метка указывает на местонахождения магазина на карте. Сама карта была создана с помощью сервиса Google Maps.
Рисунок 11 – Код структуры для вывода карты
2.3 Работа с сайтом
Как только пользователь перейдет на сайт, он попадет на главную страницу, состоящую из блоков:
- «Шапка»;
- «Баннер»;
- «О нас»;
- «Продукция »;
- «Молочная продукция»;
- «Хлебобулочные изделия»;
- «Мясная продукция»;
- «Напитки»;
- «Отзывы и пожелания»;
- «Контакты»;
- «Подвал».
«Шапка» сайта (рисунок 12) состоит из логотипа магазина и меню. Меню представляет собой блок навигации, состоящий из следующих пунктов: «Главная», «О нас», «Продукция», «Контакты».
Рисунок 12 – Шапка сайта
По нажатию на любой пункт из меню навигации пользователь будет перенаправлен на выбранную страницу.
Блок «Баннер» (рисунок 13) представляет собой картинку, на которой размещено название магазина, призыв к действию и кнопка, нажав на которую пользователь будет направлен к блоку «О нас».
Рисунок 13 – Баннер
Блок «О нас» (рисунок 14) содержит краткую информацию о том какая продукция представлена в магазине.
Рисунок 14 – Блок «О нас»
Рисунок 15 – Блок «Молочная продукция»
Блок «Продукция» состоит из трех блоков и заголовка – «Молочная продукция», «Хлебобулочные изделия», «Мясная продукция», «Напитки».
Блок «Молочная продукция» представляет основных поставщиков молочной продукции в магазин, а так же аукционные товары, которые представлены в магазине (рисунок 15).
В блоке «Хлебобулочные изделия» представлен ассортимент на текущий момент хлебобулочных изделий (рисунок16).
В блоках «Мясная продукция» и «Напитки» представлен товар, который пользуется спросом у покупателей, а также аукционный товар, для привлечения покупателей(рисунок 17)
Рисунок 16 – Блок «Хлебобулочные изделия»
Рисунок 17 – Блок «Мясная продукция»
Блок «Обратная связь» (рисунок 18) состоит из поля для ввода имени, своей почты, а также поля для сообщения. Как только пользователь введет свои данные нажмет на кнопку, отобразится надпись об успешной отправке письма. Само письмо придёт на почту менеджеру.
Рисунок 18 – Блок «Обратная связь»
Блок «Контакты» (рисунок 19) состоит из трех карточек, расположенных на странице. Каждая из карточек отображает информацию для способов связи с организацией.
Рисунок 19 – Блок «Контакты»
Блок «Подвал» (рисунок 20) содержит в себе информацию о магазина и основные данные.
Рисунок 20 – Блок «Подвал»
Используя меню навигации, пользователь может перейти на страницу «Контакты». Данная страница содержит основную информацию о компании и состоит из следующих блоков:
- «Шапка»;
- «Контакты»;
- «Карта»;
- «Подвал».
Блок «Шапка», «Подвал», «Контакты» и идентичны по своей структуре и содержимому с блоками, расположенными на главной странице. Блок «Карта» (рисунок 21) состоит из одного элемента, карты с меткой, созданной в Google Maps и в дальнейшем встроенной на сайт.
Рисунок 21 – Блок «Карты»
ЗАКЛЮЧЕНИЕ
Интернет сегодня является одним из основных средств работы большинства организаций. Неотъемлемой частью он стал для повседневной жизни: новости, общение, развлечение – все это возможно благодаря всемирной сети.
Основным элементом на сегодняшний день является веб-сайт. Он удобен для пользования любыми посетителями. Сайтов существует огромное количество различной тематики. Различаются они по целям, задачам, тематике, целевой аудитории, структуре и т.п. для одних важна информация, для других развлечение, общение покупки и т.п. все это влияет на структурные элементы сайта.
Существуют специальные вeб-разработчики, которые могут помочь в корректном создании сайта. Изначально владелец будущего сайта определяет его основные цели и задачи, придумывает название, выбирает доменное имя. В большинстве случаев владелец не может самостоятельно создать сайт и поэтому он обращается к соответствующим специалистам. Это может быть как организация (web-студия), так и частное лицо (фрилансер). Чтобы избежать конфликтых ситуаций и недопонимания для сложных проектов заказчик готовит специальный документ – техническое задание, в котором подробно описывает все интересующие его моменты.
Когда четко становится известно, что должно получиться на выходе, за какой срок и какими средствами, начинается непостредственно процесс создания сайта. После разработки идеи, дизайна сайта, он прописывается технически и в завершении необходимо протестировать сайти можно приступать к его раскрутке. Сайт один из элементов продвижения предприятия в Интернете, поэтому его необходимо продвигать. В данном случае заказчиком выступил центр социального обслуживания населения. На основании собранного материала с помощью информационных технологий создан веб-сайт Школы пожилого возраста, позволяющий получить всю необходимую информацию о деятельности кружков и клубов Школы пожилого возраста. На сайте пользователь легко может найти инфрмацию по интерсующим его вопросам. При разработке веб-сайта были проанализированы современные веб-технологии, позволяющие создавать интерактивные веб-страницы.
В результате выполнения дипломного проекта был разработан сайт для продуктового магазина «Мишутка». Сайт позволяет просматривать услуги, категории товаров, информацию о магазине, контактные данные, отправлять заявку на обратную связь. Разработанный сайт удовлетворяет требованиям, поставленным на этапе постановке задачи. В качестве дальнейшего совершенствования Веб-сайта представляется возможным доработка интерфеса сайта с целью дальнейшего повышения его информативности, привлекательности и удобства.
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
- Беклешова В.К. Технико-экономическое обоснование дипломных проектов. М.: Высшая школа.2015. 176 с.
- Васвани В. А. MySQL: использование и администрирование = MySQLDatabaseUsage&Administration. СПб.: Питер. 2016. 368с.
- Кирсанов Д. Веб-дизайн. СПб.: Символ-Плюс, 2016. 376 с.
- Комолова Н.В. Adobe Photoshop CS6 для всех. СПб.: БВХ-Петербург, 2017. 608 с.
- Маккоу А. С. Веб-приложения на JavaScript. СПб.: Питер.2015. 288 с.
- Мейер Э. В. CSS – каскадные таблицы стилей. Подробное руководство. 3-е изд. Пер. с англ. СПб.: Символ-Плюс. 2016. 576 с.
- Прохоренок Н.А. HTML, JavaScript, РНР и MySQL. Джентльменский набор Web-мастера. 4-е изд., перераб. и доп. СПб.: БХВ-Петербург, 2018. 768 с.
- Фримен Э. П. Изучаем программирование на JavaScript. СПб.: Питер, 2018. 640 с.
- Хенник Б. А. HTML и CSS: путь к совершенству. СПб.: Питер.2015. 366 с.
- Шмитт К. К. HTML Рецепты программирования. СПб.: Питер. 2015. 288 с.
- Классификация сайтов. URL: https://www.internet-technologies.ru (дата обращения: 01.05.2020).
1 2