Сессия под ключ!
Меню Услуги

Разработка и создание веб –сайта ИП. Часть 2

или напишите нам прямо сейчас

Написать в WhatsApp

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-студия), так и частное лицо (фрилансер). Чтобы избежать конфликтых ситуаций и недопонимания для сложных проектов заказчик готовит специальный документ – техническое задание, в котором подробно описывает все интересующие его моменты.

Когда четко становится известно, что должно получиться на выходе, за какой срок и какими средствами, начинается непостредственно процесс создания сайта. После разработки идеи, дизайна сайта, он прописывается технически и в завершении необходимо протестировать сайти можно приступать к его раскрутке. Сайт один из элементов продвижения предприятия в Интернете, поэтому его необходимо продвигать. В данном случае заказчиком выступил центр социального обслуживания населения. На основании собранного материала с помощью информационных технологий создан веб-сайт Школы пожилого возраста, позволяющий получить всю необходимую информацию о деятельности кружков и клубов Школы пожилого возраста. На сайте пользователь легко может найти инфрмацию по интерсующим его вопросам. При разработке веб-сайта были проанализированы современные веб-технологии, позволяющие создавать интерактивные веб-страницы.

В результате выполнения дипломного проекта был разработан сайт для продуктового магазина «Мишутка». Сайт позволяет просматривать услуги, категории товаров, информацию о магазине, контактные данные, отправлять заявку на обратную связь. Разработанный сайт удовлетворяет требованиям, поставленным на этапе постановке задачи. В качестве дальнейшего совершенствования Веб-сайта представляется возможным доработка интерфеса сайта с целью дальнейшего повышения его информативности, привлекательности и удобства.

 

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

 

  1. Беклешова В.К. Технико-экономическое обоснование дипломных проектов. М.: Высшая школа.2015. 176 с.
  2. Васвани В. А. MySQL: использование и администрирование = MySQLDatabaseUsage&Administration. СПб.: Питер. 2016. 368с.
  3. Кирсанов Д. Веб-дизайн. СПб.: Символ-Плюс, 2016. 376 с.
  4. Комолова Н.В. Adobe Photoshop CS6 для всех. СПб.: БВХ-Петербург, 2017. 608 с.
  5. Маккоу А. С. Веб-приложения на JavaScript. СПб.: Питер.2015. 288 с.
  6. Мейер Э. В. CSS – каскадные таблицы стилей. Подробное руководство. 3-е изд. Пер. с англ. СПб.: Символ-Плюс. 2016. 576 с.
  7. Прохоренок Н.А. HTML, JavaScript, РНР и MySQL. Джентльменский набор Web-мастера. 4-е изд., перераб. и доп. СПб.: БХВ-Петербург, 2018. 768 с.
  8. Фримен Э. П. Изучаем программирование на JavaScript. СПб.: Питер, 2018. 640 с.
  9. Хенник Б. А. HTML и CSS: путь к совершенству. СПб.: Питер.2015. 366 с.
  10. Шмитт К. К. HTML Рецепты программирования. СПб.: Питер. 2015. 288 с.
  11. Классификация сайтов. URL: https://www.internet-technologies.ru (дата обращения: 01.05.2020).

1  2

или напишите нам прямо сейчас

Написать в WhatsApp

Комментарии

Оставить комментарий

 

Ваше имя:

Ваш E-mail:

Ваш комментарий

Валера 14 минут назад

добрый день. Необходимо закрыть долги за 2 и 3 курсы. Заранее спасибо.

Иван, помощь с обучением 21 минут назад

Валерий, здравствуйте! Мы можем Вам помочь. Прошу Вас прислать всю необходимую информацию на почту и написать что необходимо выполнить. Я посмотрю описание к заданиям и напишу Вам стоимость и срок выполнения. Информацию нужно прислать на почту [email protected]дцо.рф

Fedor 2 часа назад

Здравствуйте, сколько будет стоить данная работа и как заказать?

Иван, помощь с обучением 2 часа назад

Fedor, здравствуйте! Мы можем Вам помочь. Прошу Вас прислать всю необходимую информацию на почту и написать что необходимо выполнить. Я посмотрю описание к заданиям и напишу Вам стоимость и срок выполнения. Информацию нужно прислать на почту [email protected]дцо.рф

Алина 4 часа назад

Сделать презентацию и защитную речь к дипломной работе по теме: Источники права социального обеспечения

Иван, помощь с обучением 4 часа назад

Алина, здравствуйте! Мы можем Вам помочь. Прошу Вас прислать всю необходимую информацию на почту и написать что необходимо выполнить. Я посмотрю описание к заданиям и напишу Вам стоимость и срок выполнения. Информацию нужно прислать на почту [email protected]дцо.рф

Алена 7 часов назад

Добрый день! Учусь в синергии, факультет экономики, нужно закрыт 2 семестр, общ получается 7 предметов! 1.Иностранный язык 2.Цифровая экономика 3.Управление проектами 4.Микроэкономика 5.Экономика и финансы организации 6.Статистика 7.Информационно-комуникационные технологии для профессиональной деятельности.

Иван, помощь с обучением 8 часов назад

Алена, здравствуйте! Мы можем Вам помочь. Прошу Вас прислать всю необходимую информацию на почту и написать что необходимо выполнить. Я посмотрю описание к заданиям и напишу Вам стоимость и срок выполнения. Информацию нужно прислать на почту [email protected]дцо.рф

Игорь Петрович 10 часов назад

К утру необходимы материалы для защиты диплома - речь и презентация (слайды). Сам диплом готов, пришлю его Вам по запросу!

Иван, помощь с обучением 10 часов назад

Игорь Петрович, здравствуйте! Мы можем Вам помочь. Прошу Вас прислать всю необходимую информацию на почту и написать что необходимо выполнить. Я посмотрю описание к заданиям и напишу Вам стоимость и срок выполнения. Информацию нужно прислать на почту [email protected]дцо.рф

Инкогнито 1 день назад

У меня есть скорректированный и согласованный руководителем, план ВКР. Напишите, пожалуйста, порядок оплаты и реквизиты.

Иван, помощь с обучением 1 день назад

Инкогнито, здравствуйте! Мы можем Вам помочь. Прошу Вас прислать всю необходимую информацию на почту и написать что необходимо выполнить. Я посмотрю описание к заданиям и напишу Вам стоимость и срок выполнения. Информацию нужно прислать на почту [email protected]дцо.рф

Илья 1 день назад

Здравствуйте) нужен отчет по практике. Практику прохожу в доме-интернате для престарелых и инвалидов. Все четыре задания объединены одним отчетом о проведенных исследованиях. Каждое задание направлено на выполнение одной из его частей. Помогите!

Иван, помощь с обучением 1 день назад

Илья, здравствуйте! Мы можем Вам помочь. Прошу Вас прислать всю необходимую информацию на почту и написать что необходимо выполнить. Я посмотрю описание к заданиям и напишу Вам стоимость и срок выполнения. Информацию нужно прислать на почту [email protected]дцо.рф

Alina 2 дня назад

Педагогическая практика, 4 семестр, Направление: ППО Во время прохождения практики Вы: получите представления об основных видах профессиональной психолого-педагогической деятельности; разовьёте навыки использования современных методов и технологий организации образовательной работы с детьми младшего школьного возраста; научитесь выстраивать взаимодействие со всеми участниками образовательного процесса.

Иван, помощь с обучением 2 дня назад

Alina, здравствуйте! Мы можем Вам помочь. Прошу Вас прислать всю необходимую информацию на почту и написать что необходимо выполнить. Я посмотрю описание к заданиям и напишу Вам стоимость и срок выполнения. Информацию нужно прислать на почту [email protected]дцо.рф

Влад 3 дня назад

Здравствуйте. Только поступил! Операционная деятельность в логистике. Так же получается 10 - 11 класс заканчивать. То-есть 2 года 11 месяцев. Сколько будет стоить семестр закончить?

Иван, помощь с обучением 3 дня назад

Влад, здравствуйте! Мы можем Вам помочь. Прошу Вас прислать всю необходимую информацию на почту и написать что необходимо выполнить. Я посмотрю описание к заданиям и напишу Вам стоимость и срок выполнения. Информацию нужно прислать на почту [email protected]дцо.рф

Полина 3 дня назад

Требуется выполнить 3 работы по предмету "Психология ФКиС" за 3 курс

Иван, помощь с обучением 3 дня назад

Полина, здравствуйте! Мы можем Вам помочь. Прошу Вас прислать всю необходимую информацию на почту и написать что необходимо выполнить. Я посмотрю описание к заданиям и напишу Вам стоимость и срок выполнения. Информацию нужно прислать на почту [email protected]дцо.рф

Инкогнито 4 дня назад

Здравствуйте. Нужно написать диплом в короткие сроки. На тему Анализ финансового состояния предприятия. С материалами для защиты. Сколько будет стоить?

Иван, помощь с обучением 4 дня назад

Инкогнито, здравствуйте! Мы можем Вам помочь. Прошу Вас прислать всю необходимую информацию на почту и написать что необходимо выполнить. Я посмотрю описание к заданиям и напишу Вам стоимость и срок выполнения. Информацию нужно прислать на почту [email protected]дцо.рф

Студент 4 дня назад

Нужно сделать отчёт по практике преддипломной, дальше по ней уже нудно будет сделать вкр. Все данные и все по производству имеется

Иван, помощь с обучением 4 дня назад

Студент, здравствуйте! Мы можем Вам помочь. Прошу Вас прислать всю необходимую информацию на почту и написать что необходимо выполнить. Я посмотрю описание к заданиям и напишу Вам стоимость и срок выполнения. Информацию нужно прислать на почту [email protected]дцо.рф

Олег 5 дня назад

Преддипломная практика и ВКР. Проходила практика на заводе, который занимается производством электроизоляционных материалов и изделий из них. В должности менеджера отдела сбыта, а также занимался продвижением продукции в интернете. Также , эту работу надо связать с темой ВКР "РАЗРАБОТКА СТРАТЕГИИ ПРОЕКТА В СФЕРЕ ИТ".

Иван, помощь с обучением 5 дня назад

Олег, здравствуйте! Мы можем Вам помочь. Прошу Вас прислать всю необходимую информацию на почту и написать что необходимо выполнить. Я посмотрю описание к заданиям и напишу Вам стоимость и срок выполнения. Информацию нужно прислать на почту [email protected]дцо.рф

Анна 5 дня назад

сколько стоит вступительные экзамены русский , математика, информатика и какие условия?

Иван, помощь с обучением 5 дня назад

Анна, здравствуйте! Мы можем Вам помочь. Прошу Вас прислать всю необходимую информацию на почту и написать что необходимо выполнить. Я посмотрю описание к заданиям и напишу Вам стоимость и срок выполнения. Информацию нужно прислать на почту [email protected]дцо.рф

Владимир Иванович 5 дня назад

Хочу закрыть все долги до 1 числа также вкр + диплом. Факультет информационных технологий.

Иван, помощь с обучением 5 дня назад

Владимир Иванович, здравствуйте! Мы можем Вам помочь. Прошу Вас прислать всю необходимую информацию на почту и написать что необходимо выполнить. Я посмотрю описание к заданиям и напишу Вам стоимость и срок выполнения. Информацию нужно прислать на почту [email protected]дцо.рф

Василий 6 дней назад

сколько будет стоить полностью закрыть сессию .туда входят Информационные технологий (Контрольная работа, 3 лабораторных работ, Экзаменационный тест ), Русский язык и культура речи (практические задания) , Начертательная геометрия ( 3 задачи и атестационный тест ), Тайм менеджмент ( 4 практических задания , итоговый тест)

Иван, помощь с обучением 6 дней назад

Василий, здравствуйте! Мы можем Вам помочь. Прошу Вас прислать всю необходимую информацию на почту и написать что необходимо выполнить. Я посмотрю описание к заданиям и напишу Вам стоимость и срок выполнения. Информацию нужно прислать на почту [email protected]дцо.рф

Марк неделю назад

Нужно сделать 2 задания и 1 итоговый тест по Иностранный язык 2, 4 практических задания и 1 итоговый тест Исследования рынка, 4 практических задания и 1 итоговый тест Менеджмент, 1 практическое задание Проектная деятельность (практикум) 1, 3 практических задания Проектная деятельность (практикум) 2, 1 итоговый тест Проектная деятельность (практикум) 3, 1 практическое задание и 1 итоговый тест Проектная деятельность 1, 3 практических задания и 1 итоговый тест Проектная деятельность 2, 2 практических заданий и 1 итоговый тест Проектная деятельность 3, 2 практических задания Экономико-правовое сопровождение бизнеса какое время займет и стоимость?

Иван, помощь с обучением неделю назад

Марк, здравствуйте! Мы можем Вам помочь. Прошу Вас прислать всю необходимую информацию на почту и написать что необходимо выполнить. Я посмотрю описание к заданиям и напишу Вам стоимость и срок выполнения. Информацию нужно прислать на почту [email protected]дцо.рф