1.69M

Category:

internet

ВКР_Шмидт_ПЕЧАТЬ

Содержание
ЗАДАНИЕ ................................................................................................................ 3
ОТЗЫВ РУКОВОДИТЕЛЯ ..................................................................................... 5
РЕЦЕНЗИЯ............................................................................................................... 7
Введение ................................................................................................................... 9
1 Общие понятия ................................................................................................... 10
1.1 Веб-сайт и его виды .................................................................................... 10
1.2 Дизайн .......................................................................................................... 12
1.3 Информационная архитектура ................................................................... 13
2 Средства создания сайта .................................................................................... 15
2.1 HTML............................................................................................................ 15
2.2 CSS ................................................................................................................ 16
2.3 JavaScript ...................................................................................................... 17
2.4 Конструктор сайтов Tilda ........................................................................... 18
3 Разработка веб-сайта .......................................................................................... 20
3.1 Описание предметной области .................................................................. 20
3.2 Создание макета сайта ................................................................................ 25
3.3 Создание сайта............................................................................................. 34
3.4 Размещение сайта на хостинге................................................................... 43
Заключение............................................................................................................. 46
Список использованных источников ................................................................... 49
Приложение А – Презентационный материал ................................................... 50

3.

МИНИСТЕРСТВО ЦИФРОВОГО РАЗВИТИЯ, СВЯЗИ И МАССОВЫХ
КОММУНИКАЦИЙ РОССИЙСКОЙ ФЕДЕРАЦИИ
Федеральное государственное бюджетное образовательное учреждение
высшего образования
«Поволжский государственный университет телекоммуникаций и информатики»
КОЛЛЕДЖ СВЯЗИ
Утверждаю
Зав. отделением
/Ситникова Л.Г./
Подпись
«
Расшифровка подписи
»
2026 г.
ЗАДАНИЕ
по подготовке выпускной квалификационной работы
Студента Шмидта Антона Игоревича
1 Тема ВКР: Разработка веб-сайта для игрового клуба
Утверждена приказом по КС ПГУТИ от 25.12.2025 №122-2
2 Срок сдачи студентом законченной ВКР 10.06.2026 г.
3 Исходные данные и постановка задачи
1) Изучить основные сведения о сайтостроении;
2) Выбрать средства создания сайта;
3) Разработать сайт.
4 Перечень подлежащих разработке в ВКР вопросов или краткое содержание
ВКР. Сроки исполнения 10.06.2026 г.
1) Основы создания веб-сайтов;
2) Способы создания веб-сайтов;
3) Проектирование веб-сайта.
5 Перечень графического материала. Сроки исполнения 10.06.2026 г.
1) Приложение А – Презентационный материал
6 Сформировать общие и профессиональные компетенции:
ОК 01. Выбирать способы решения задач профессиональной деятельности,
применительно к различным контекстам.
ОК 02. Использовать современные средства поиска, анализа и интерпретации информации и информационные технологии для выполнения задач профессиональной деятельности;

4.

ОК 03. Планировать и реализовывать собственное профессиональное и личностное развитие, предпринимательскую деятельность в профессиональной
сфере, использовать знания по правовой и финансовой грамотности в различных жизненных ситуациях;
ОК 04. Эффективно взаимодействовать и работать в коллективе и команде;
ОК 05. Осуществлять устную и письменную коммуникацию на государственном языке Российской Федерации с учетом особенностей социального и культурного контекста;
ОК 09. Пользоваться профессиональной документацией на государственном
и иностранном языках;
ПК 1.1. Формировать алгоритмы разработки программных модулей в соответствии с техническим заданием;
ПК 1.2. Разрабатывать программные модули в соответствии с техническим
заданием;
ПК 1.3. Выполнять отладку программных модулей с использованием специализированных программных средств;
ПК 1.4. Выполнять тестирование программных модулей;
ПК 1.5. Осуществлять рефакторинг и оптимизацию программного кода.
7 Задание рассмотрено на заседании П(Ц)К №4 «Информационных систем и
технологий»
Протокол №
8
от «02»
Председатель П(Ц)К
Руководитель
«10»
Расшифровка подписи
апреля
Преподаватель
КС ПГУТИ
Должность
Задание принял к
исполнению
студент(-ка)
2026 г.
/Шомас Е.А./
Подпись
Дата выдачи задания
апреля
2026 г.
/Андрющенко А.В./
Подпись
Расшифровка подписи
Подпись
Расшифровка подписи
4ИСПп-16
Группа
Дата
Дата
/Шмидт А.И./
Дата

5.

МИНИСТЕРСТВО ЦИФРОВОГО РАЗВИТИЯ, СВЯЗИ И МАССОВЫХ
КОММУНИКАЦИЙ РОССИЙСКОЙ ФЕДЕРАЦИИ
Федеральное государственное бюджетное образовательное учреждение
высшего образования
«Поволжский государственный университет телекоммуникаций и информатики»
КОЛЛЕДЖ СВЯЗИ
ОТЗЫВ РУКОВОДИТЕЛЯ
ВКР на тему Разработка веб-сайта для игрового клуба
Студента (-ки)
Шмидта Антона Игоревича
Специальность
09.02.07 «Информационные системы и программирование»
Руководитель
Андрющенко Анна Вячеславовна
АКТУАЛЬНОСТЬ ТЕМЫ
Тема выпускной квалификационной работы является актуальной, так как в
современных условиях организациям сферы досуга необходимо иметь собственное представительство в сети Интернет. Для игрового клуба сайт является не только информационным ресурсом, но и инструментом привлечения
клиентов, представления услуг, демонстрации оборудования, тарифов и возможностей предварительного бронирования. Разработка веб-сайта позволяет повысить узнаваемость клуба, упростить взаимодействие с посетителями и предоставить пользователю всю необходимую информацию до посещения организации. Поэтому выбранная тема соответствует современным
требованиям к цифровому сопровождению деятельности организаций и
направлению подготовки студента.
ОЦЕНКА СОДЕРЖАНИЯ РАБОТЫ
(Структура, логика и стиль изложения представленного материала. глубина и степень проработки
материала, обоснованность изложенных выводов, использование математического аппарата, использование средств вычислительной техники, и т.д.)
Выпускная квалификационная работа имеет логичную структуру и состоит

6.

из теоретической, аналитической и практической частей. В первой главе рассмотрены основные понятия, связанные с созданием веб-сайтов, дизайном и
информационной архитектурой. Во второй главе представлены средства разработки веб-ресурсов, рассмотрены языки и инструменты, применяемые при
создании сайта. В третьей главе описан процесс разработки веб-сайта для
игрового клуба, включая проектирование структуры, создание макета, реализацию основных блоков сайта и размещение готового проекта на хостинге.
СТЕПЕНЬ ДОСТИЖЕНИЯ ЦЕЛИ И ПРАКТИЧЕСКАЯ ЗНАЧИМОСТЬ
(Полнота раскрытия исследуемой темы, практическая ценность и возможность внедрения)
Цель выпускной квалификационной работы достигнута. В результате выполнения проекта был разработан веб-сайт для игрового клуба, который позволяет пользователю ознакомиться с услугами организации, выбрать подходящую игровую зону, изучить характеристики оборудования, посмотреть тарифы, просмотреть изображения клуба, получить контактную информацию
и оставить заявку на бронирование.
ЗАКЛЮЧЕНИЯ ПО ПРЕДСТАВЛЕННОЙ РАБОТЕ
(Степень самостоятельной работы студента; совокупная оценка труда студента и его квалификация)
Дипломная работа соответствует требованиям, предъявляемым к ВКР, заслуживает хорошей оценки, а студенту Шмидт А.И. может быть присвоена
квалификация «Программист» по специальности 09.02.07 – «Информационные системы и программирование».
Руководитель ВКР
/Андрющенко А.В./
Дата
Подпись
ФИО

7.

МИНИСТЕРСТВО ЦИФРОВОГО РАЗВИТИЯ, СВЯЗИ И МАССОВЫХ
КОММУНИКАЦИЙ РОССИЙСКОЙ ФЕДЕРАЦИИ
Федеральное государственное бюджетное образовательное учреждение
высшего образования
«Поволжский государственный университет телекоммуникаций и информатики»
КОЛЛЕДЖ СВЯЗИ
РЕЦЕНЗИЯ
ВКР на тему Разработка веб-сайта для игрового клуба
Студента (-ки)
Шмидта Антона Игоревича
Специальность
09.02.07 «Информационные системы и программирование»
Рецензент
Воробьева Диана Евгеньевна
АКТУАЛЬНОСТЬ ТЕМЫ
Тема выпускной квалификационной работы является актуальной, поскольку
веб-сайт сегодня является одним из основных инструментов представления
организации в сети Интернет. Для игрового клуба наличие сайта особенно
важно, так как потенциальные посетители заранее хотят получить информацию о зонах, оборудовании, стоимости услуг, режиме работы и возможности бронирования.
ОЦЕНКА СОДЕРЖАНИЯ РАБОТЫ
(Структура, логика и стиль изложения представленного материала. глубина и степень проработки
материала, обоснованность изложенных выводов, использование математического аппарата, использование средств вычислительной техники, и т.д.)
Выпускная квалификационная работа выполнена в соответствии с заявленной темой. В теоретической части рассмотрены основные понятия веб-разработки, особенности структуры сайта, дизайна и информационной архитектуры. В аналитической части представлены средства создания сайта,
рассмотрены клиентские технологии и инструменты, применяемые при разработке веб-ресурсов. Практическая часть посвящена непосредственной разработке сайта игрового клуба.

8.

ДОСТОИНСТВА И НЕДОСТАТКИ РАБОТЫ
К достоинствам выпускной квалификационной работы можно отнести актуальность выбранной темы, логичную структуру изложения, наличие практической разработки, соответствие визуального оформления тематике игрового клуба, а также использование адаптивной вёрстки и интерактивных
элементов. Разработанный сайт имеет понятную навигацию, современный
внешний вид и содержит основные сведения, необходимые потенциальному
посетителю клуба.
СТЕПЕНЬ ДОСТИЖЕНИЯ ЦЕЛИ И ПРАКТИЧЕСКАЯ ЗНАЧИМОСТЬ
(Полнота раскрытия исследуемой темы, практическая ценность и возможность внедрения)
Цель выпускной квалификационной работы достигнута. В результате был создан веб-сайт для игрового клуба, который решает основные задачи: представляет услуги организации, демонстрирует игровые зоны и оборудование,
содержит тарифы, визуальные материалы, контактные данные и форму
предварительного бронирования.
ЗАКЛЮЧЕНИЯ ПО ПРЕДСТАВЛЕННОЙ РАБОТЕ
(Степень самостоятельной работы студента; совокупная оценка труда студента и его квалификация)
Студент показал качественную профессиональную подготовку. Выпускная
квалификационная работа выполнена достойно, соответствует требованиям, предъявляемым к ВКР, заслуживает хорошей оценки. Студенту Шмидт
А.И. может быть присвоена квалификация «Программист» по специальности 09.02.07 – «Информационные системы и программирование».
Рецензент
/Воробьева Д.Е./
Дата
Подпись
ФИО

9.

Введение
Современный мир невозможно представить без сайтов, которые стали
неотъемлемой частью бизнеса и общественной жизни. Создание сайта позволяет компаниям и организациям расширить свой рынок и привлечь новых клиентов, а также улучшить коммуникацию с уже существующими клиентами.
Сайт также является важным инструментом для продвижения бренда и повышения узнаваемости компании.
Создание сайта для компьютерного клуба остается актуальным и востребованным в современном мире информационных технологий. Ведь в наше
время все больше людей увлекаются компьютерными играми и соревнуются в
онлайн-турнирах.
Сайт компьютерного клуба может представлять собой не только информационный ресурс с расписанием работы, ценами и акциями, но и место для
общения и обмена опытом для геймеров. Такой сайт может стать площадкой
для объявления турниров, проведения онлайн-трансляций, публикации рейтингов и достижений игроков. Помимо этого, наличие качественного и удобного сайта может привлечь новых посетителей в клуб, а также помочь укрепить имидж заведения в глазах современных геймеров.
Таким образом, создание сайта для игрового клуба является очень важным и перспективным направлением в сфере информационных технологий и
маркетинга.
Чтобы создать сайт для игрового клуба, необходимо выбрать подходящие технологии и языки программирования, разработать дизайн, включающий
удобную и понятную для пользователя навигацию, подобрать материал в соответствии с тематикой сайта.
Для достижения результата были поставлены следующие задачи:
− провести анализ основных средств создания сайтов;
− выбрать средства разработки веб-сайта.
9

10.

1 Общие понятия
1.1 Веб-сайт и его виды
Веб-сайт (или сайт) — это совокупность веб-страниц, связанных между
собой гиперссылками и размещенных на одном домене в интернете. Он может
содержать текст, изображения, видео, аудио, формы для заполнения, интерактивные элементы и другие компоненты.
Веб-сайты могут быть созданы для различных целей: информационных,
коммерческих, развлекательных, образовательных и т.д. Они могут быть доступны как для общего пользования, так и ограничены доступом по паролю
или другими способами аутентификации.
Веб-сайты классифицируются по назначению, структуре, функциональным возможностям и характеру взаимодействия с пользователем. В зависимости от цели создания сайты могут выполнять информационную, коммерческую, образовательную, развлекательную, коммуникационную или имиджевую функцию.
Одним из наиболее простых видов является сайт-визитка. Такой сайт
обычно состоит из небольшого количества страниц и содержит основную информацию о человеке, организации, услугах, контактных данных и способах
связи. Его главная задача кратко представить владельца сайта в сети Интернет.
Корпоративный сайт предназначен для представления компании, её деятельности, истории, преимуществ, сотрудников, партнёров, товаров или услуг.
Такой ресурс помогает формировать положительный имидж организации, повышать доверие клиентов и обеспечивать удобную связь с аудиторией.
Информационный сайт используется для размещения новостей, статей,
справочных материалов, инструкций, обзоров и другой полезной информации.
Основная цель такого сайта предоставить пользователю актуальные и структурированные сведения по определённой теме.
10

11.

Интернет-магазин представляет собой сайт, предназначенный для продажи товаров или услуг через Интернет. Он обычно включает каталог продукции, карточки товаров, корзину, форму оформления заказа, способы оплаты и
доставки. Такой сайт не только информирует пользователя о товаре, но и позволяет совершить покупку онлайн.
Лендинг, или одностраничный сайт, создаётся для продвижения конкретного товара, услуги, мероприятия или акции. Его структура строится таким образом, чтобы последовательно заинтересовать пользователя и привести его к
целевому действию: оставить заявку, оформить заказ, зарегистрироваться или
перейти по ссылке.
Образовательный сайт предназначен для размещения учебных материалов, курсов, тестов, заданий, видеолекций и других ресурсов, связанных с обучением. Такие сайты могут использоваться школами, колледжами, университетами, онлайн-школами и отдельными преподавателями.
Блог представляет собой сайт или раздел сайта, на котором регулярно
публикуются авторские материалы, заметки, статьи, обзоры или личные записи. Блоги могут быть личными, профессиональными, тематическими или
корпоративными.
Форум предназначен для общения пользователей, обсуждения различных тем, обмена опытом и решения вопросов. В отличие от обычного информационного сайта, форум предполагает активное участие посетителей в создании контента.
Портал — это крупный многофункциональный сайт, который объединяет большое количество информации, сервисов и разделов. Порталы могут
включать новости, личные кабинеты, справочники, форумы, формы обратной
связи, каталоги и другие инструменты.
Отдельно можно выделить веб-приложения сайты с расширенными интерактивными возможностями. Они позволяют пользователю выполнять определённые действия: регистрироваться, авторизоваться, оформлять заявки, вести личный кабинет, работать с данными, отправлять сообщения, управлять
11

12.

заказами или использовать онлайн-сервисы. Веб-приложения часто применяются в бизнесе, образовании, медицине, сфере услуг и электронной коммерции.
Таким образом, выбор вида сайта зависит от целей проекта, задач организации, особенностей целевой аудитории и необходимого функционала. Для
небольшого проекта может быть достаточно сайта-визитки или лендинга, а для
компании с большим количеством услуг, товаров или пользователей целесообразно разрабатывать корпоративный сайт, интернет-магазин, портал или полноценное веб-приложение.
1.2 Дизайн
Дизайн в создании сайтов — это процесс создания визуальной и функциональной концепции сайта, которая учитывает потребности пользователей
и брендовый стиль компании. Дизайн сайта включает в себя выбор цветовой
палитры, шрифтов, композиции, графических элементов, а также определение
пользовательского интерфейса и пользовательского опыта.
Для создания дизайна сайта используются специализированные инструменты, такие как графические редакторы (Photoshop, Sketch), векторные редакторы (Illustrator), программы для создания прототипов (Figma, InVision) и другие.
При создании дизайна сайта необходимо учитывать следующие факторы:
− Целевая аудитория: дизайн должен быть ориентирован на потребности целевой аудитории и соответствовать ее ожиданиям;
− Брендовый стиль: дизайн сайта должен отражать стиль и ценности
компании;
− Удобство использования: дизайн должен быть интуитивно понятным
и легко использоваться пользователями;
− Адаптивность: дизайн должен быть адаптивным и корректно отображаться на различных устройствах и разрешениях экранов;
12

13.

− Скорость загрузки: дизайн должен быть оптимизирован для быстрой
загрузки сайта.
Дизайн сайта может быть создан с помощью собственных ресурсов компании или с помощью профессиональных дизайнеров и веб-разработчиков, которые имеют опыт в создании качественных и эффективных сайтов.
1.3 Информационная архитектура
Информационная архитектура (IA) в создании сайтов — это процесс организации информации на сайте таким образом, чтобы пользователи могли
быстро и легко найти нужную им информацию. IA включает в себя структурирование контента, определение категорий и подкатегорий, создание навигационной системы и разработку метаданных.
Основные задачи информационной архитектуры в создании сайтов:
− Определение целей сайта и потребностей пользователей: IA должна
учитывать цели компании и потребности пользователей, чтобы создать удобную и эффективную структуру сайта.
− Разработка структуры сайта: IA включает в себя создание дерева категорий и подкатегорий, которые помогут пользователям быстро находить нужную информацию.
− Создание навигационной системы: IA должна определить, как пользователи будут перемещаться по сайту, чтобы они могли легко найти нужные
страницы.
− Разработка метаданных: IA должна определить, какая информация будет отображаться на страницах сайта, чтобы пользователи могли быстро понять, что они найдут на каждой странице.
− Тестирование и улучшение: IA должна постоянно тестироваться и
улучшаться, чтобы обеспечить максимальную эффективность и удобство использования сайта.
Информационная архитектура в создании сайтов является важным этапом, который помогает обеспечить удобство использования сайта и повысить
13

14.

его эффективность. Она может быть создана с помощью специализированных
инструментов, таких как диаграммы потоков данных и деревья категорий.
14

15.

2 Средства создания сайта
2.1 HTML
HTML (HyperText Markup Language) - это язык разметки, который используется для создания веб-страниц. HTML (Рисунок 1) позволяет определить структуру и содержание документа, а также описать, как он будет отображаться в браузере.
Рисунок 1 — логотип HTML
HTML-документ состоит из различных элементов, таких как заголовки,
абзацы, списки, изображения и ссылки. Каждый элемент определяется с помощью тегов, которые заключаются в угловые скобки. Например, тег для создания заголовка выглядит так: <h1>Заголовок</h1>.
Теги могут иметь атрибуты, которые определяют дополнительные свойства элемента (Рисунок 2). Например, атрибут src используется для указания
пути к изображению: <img src="image.jpg">.
Рисунок 2 — основная структура HTML–документа
15

16.

HTML-документ может быть создан с помощью любого текстового редактора, такого как Notepad или Sublime Text. Документ сохраняется с расширением .html и открывается в любом веб-браузере.
HTML является основным языком для создания веб-страниц и часто используется в сочетании с другими языками, такими как CSS и JavaScript, для
создания интерактивных и стильных веб-сайтов.
Семантическая вёрстка, или семантический HTML-код, — это подход к
созданию веб-страниц на языке HTML, основанный на использовании HTMLтегов в соответствии с их семантикой, а также предполагающий логичную и
последовательную иерархию страницы. Это важно для поисковой оптимизации, а так же для адаптации под специальные устройства.
2.2 CSS
CSS (Cascading Style Sheets) (Рисунок 3) - это язык таблиц стилей, который используется для оформления веб-страниц и других документов, созданных на основе HTML. CSS позволяет определять внешний вид элементов вебстраницы, таких как цвет, шрифт, размер, расположение и другие свойства. Он
позволяет разработчикам создавать красивые, современные и профессиональные веб-сайты, а также улучшать пользовательский опыт.
Рисунок 3 — логотип CSS
CSS работает (Рисунок 4) по принципу каскада, что означает, что свойства, определенные для элемента, могут быть переопределены или унаследо-
16

17.

ваны от родительского элемента. Это позволяет разработчикам создавать гибкие и адаптивные дизайны, которые могут легко изменяться в зависимости от
размера экрана и устройства пользователя.
Рисунок 4 — синтаксис CSS, указание свойства margin тега body
Существует несколько способов использования CSS в HTML-документах, включая внутреннее описание стилей в теге <style>, внешнее подключение файла CSS с помощью тега <link> и инлайновое описание стилей непосредственно в HTML-тегах.
CSS является неотъемлемой частью веб-разработки и используется вместе с HTML и JavaScript для создания интерактивных и динамических веб-сайтов.
2.3 JavaScript
JavaScript (Рисунок 5) - это язык программирования, который используется для создания интерактивных и динамических веб-страниц. Он был создан
в 1995 году компанией Netscape и быстро стал одним из самых популярных
языков программирования в мире.
Рисунок 5 — логотип JS
17

18.

JavaScript используется для добавления функциональности на веб-страницы, такие как анимация, проверка форм, обработка событий и многое другое. Он может быть использован для создания клиентских и серверных приложений, а также для разработки мобильных приложений.
JavaScript (Рисунок 6) является объектно-ориентированным языком программирования, что означает, что он работает с объектами и методами. Он
также поддерживает функциональное программирование, что позволяет создавать более гибкий и модульный код.
Рисунок 6 — синтаксис JS, вывод сообщения Hello, World
JavaScript имеет множество библиотек и фреймворков, которые помогают разработчикам ускорить процесс разработки и улучшить качество кода.
Некоторые из наиболее популярных библиотек и фреймворков включают в
себя jQuery, React, Angular и Vue.js.
JavaScript выполняется в браузере на стороне клиента и на сервере с помощью Node.js. Он является неотъемлемой частью веб-разработки и широко
используется в индустрии.
2.4 Конструктор сайтов Tilda
Рисунок 7 – логотип конструктора Tilda
Конструктор сайтов Tilda (Рисунок 7)— это популярный инструмент для
создания веб-страниц и сайтов, который предлагает широкий спектр функций
и возможностей. Вот некоторые из его ключевых преимуществ и недостатков:
18

19.

Интуитивно понятный интерфейс: Tilda обладает удобным и понятным
интерфейсом, который позволяет пользователям легко создавать сайты без
необходимости знания программирования.
Большой выбор шаблонов: Платформа предлагает множество профессионально разработанных шаблонов, которые можно адаптировать под любые
нужды.
Адаптивный дизайн: Созданные на Tilda сайты хорошо отображаются на
различных устройствах, включая мобильные телефоны и планшеты.
Возможность вставки собственного кода: Пользователи могут вставлять
HTML, CSS и JavaScript код для расширения функциональности или добавления уникальных элементов.
SEO-оптимизация: Tilda предоставляет инструменты для оптимизации
сайта под поисковые системы, что важно для привлечения трафика.
Интеграция с другими сервисами: легко интегрируется с различными
платежными системами, аналитикой, CRM и маркетинговыми инструментами.
Недостатки:
Ограниченная гибкость: несмотря на возможность вставки кода, Tilda
все же имеет определенные ограничения в плане кастомизации по сравнению
с полноценными CMS системами.
Стоимость: для доступа к некоторым продвинутым функциям требуется
платная подписка, что может быть недоступно для пользователей с ограниченным бюджетом.
Скорость загрузки: из-за большого количества визуального контента
сайты на Tilda могут загружаться медленнее, особенно если не оптимизировать изображения и другие ресурсы.
Зависимость от платформы: при использовании конструктора сайтов
пользователь зависит от стабильности и политики компании, что может быть
риском в долгосрочной перспективе.
В целом, Tilda является отличным выбором для тех, кто хочет быстро и
без особых усилий создать красивый и функциональный сайт.
19

20.

3 Разработка веб-сайта
3.1 Описание предметной области
Компьютерные клубы в настоящее время остаются востребованным
форматом досуга, несмотря на широкое распространение домашних компьютеров и игровых консолей. Это связано с тем, что клуб предоставляет посетителю не только доступ к технике, но и отдельную игровую атмосферу, возможность провести время с друзьями, принять участие в совместной игре или воспользоваться более мощным оборудованием, чем имеется дома. Для многих
пользователей важны не только характеристики компьютера, но и удобное
кресло, стабильное интернет-соединение, наличие нескольких игровых зон и
возможность заранее выбрать подходящий формат посещения. Поэтому современный компьютерный клуб уже нельзя рассматривать только как помещение
с рядом компьютеров. Он представляет собой полноценное пространство для
отдыха, общения и проведения игровых мероприятий.
Разрабатываемый сайт предназначен для компьютерного клуба и должен
выполнять роль его представительства в сети Интернет. Через сайт посетитель
может получить основную информацию ещё до визита: узнать, какие зоны есть
в клубе, какое оборудование используется, сколько стоят услуги, какие действуют предложения и где находится организация. Кроме того, на сайте предусмотрена возможность отправить заявку на бронирование места. Это делает
ресурс не только информационным, но и полезным с практической точки зрения, так как пользователь может заранее выбрать нужную зону и оставить свои
данные для связи с администратором.
Для проекта был выбран формат одностраничного сайта. Такое решение
подходит для компьютерного клуба, поскольку основная информация о нём не
требует разделения на большое количество отдельных страниц. Пользователю
удобнее последовательно просмотреть все сведения в пределах одной страницы, чем переходить между несколькими разделами и искать нужные данные
20

21.

отдельно. При этом внутри сайта сохраняется чёткая структура: каждый смысловой блок отвечает за свою задачу, а навигация в верхней части страницы позволяет быстро перейти к интересующему разделу. Такой вариант делает сайт
более простым в использовании и хорошо подходит для первичного знакомства клиента с клубом.
Работа компьютерного клуба строится вокруг нескольких основных
услуг. Главной из них является предоставление игровых мест на определённое
время. В разрабатываемом проекте предусмотрена обычная PC-зона, рассчитанная на повседневное посещение, VIP-зона с более производительными компьютерами и повышенным уровнем комфорта, зона PlayStation для любителей
консольных игр, а также отдельная командная зона Bootcamp, которая может
использоваться для совместной игры или тренировок небольшой команды.
Наличие разных форматов позволяет клубу ориентироваться не на одну узкую
группу клиентов, а на более широкую аудиторию с разными запросами.
Каждая игровая зона имеет своё назначение. Основная PC-зона подходит
для пользователей, которые хотят провести несколько часов за популярными
онлайн-играми или прийти в клуб с друзьями. VIP-зона предназначена для тех,
кому важны более высокие технические характеристики и спокойная обстановка. Консольная зона может быть интересна компаниям, которые хотят играть вместе на большом экране, а Bootcamp-зона рассчитана на команды, для
которых важно сидеть рядом и взаимодействовать во время игрового процесса.
Из-за таких различий пользователю необходимо заранее понимать, чем одна
зона отличается от другой. Поэтому на сайте важно не просто перечислить
названия, а кратко описать назначение каждой зоны, количество мест и стоимость посещения.
Большое значение для компьютерного клуба имеет оборудование. При
выборе места для игры посетители часто обращают внимание на модели видеокарт, процессоров, объём оперативной памяти и частоту обновления мониторов. Эти характеристики напрямую влияют на плавность изображения, скорость отклика и общее качество игрового процесса. Особенно это важно для
21

22.

пользователей, которые играют в современные требовательные игры или соревновательные дисциплины. В связи с этим на сайте предусмотрен отдельный
раздел, где оборудование разделено по категориям. Пользователь может переключаться между характеристиками обычной зоны, VIP-зоны и PlayStation, не
перегружая страницу лишней информацией.
Помимо оборудования, одним из наиболее важных факторов для клиента
является стоимость услуг. Посетителю нужно быстро понять, сколько будет
стоить короткая игровая сессия, более длительное посещение или ночной пакет. Для клуба выгодно предлагать не только почасовую оплату, но и пакетные
тарифы, так как они делают посещение более привлекательным для клиентов
и позволяют увеличить среднюю продолжительность визита. На сайте тарифы
представлены в виде отдельных карточек, где пользователь сразу видит продолжительность, цену и краткое назначение каждого предложения. Такой способ отображения информации облегчает сравнение вариантов и делает выбор
более понятным.
Дополнительно в деятельности компьютерного клуба могут использоваться акции, направленные на привлечение новых посетителей и повышение
интереса постоянных клиентов. Например, это может быть скидка студентам,
бонус при первом посещении или специальные условия для командной игры.
Подобные предложения не являются основой работы клуба, однако они помогают выделиться среди конкурентов и создают дополнительный повод для посещения. На сайте такие акции целесообразно размещать отдельным блоком,
чтобы пользователь мог быстро ознакомиться с актуальными предложениями,
не связываясь с администратором отдельно.
Особое место в проекте занимает форма бронирования. Для компьютерного клуба это важная функция, так как загрузка разных зон может отличаться
в зависимости от времени суток и дня недели. Посетителю может быть важно
заранее убедиться, что нужное место будет доступно, особенно если речь идёт
о VIP-зоне, PlayStation или визите компанией. В форме пользователь указывает
своё имя, номер телефона, дату и время посещения, выбирает игровую зону,
22

23.

количество мест и при необходимости оставляет комментарий. После отправки заявки введённые данные должны поступать на электронную почту администратора, который затем связывается с клиентом для подтверждения бронирования. Такой вариант не требует сложной системы регистрации и оплаты,
но уже позволяет организовать удобную предварительную связь с посетителями.
При разработке сайта необходимо учитывать основные действия, которые пользователь обычно хочет выполнить при первом знакомстве с компьютерным клубом. Чаще всего ему нужно узнать, где находится клуб, как он выглядит внутри, какие компьютеры установлены, сколько стоят услуги и можно
ли заранее записаться. Если эти сведения расположены последовательно и
представлены в понятной форме, пользователь быстрее принимает решение о
посещении. Поэтому содержание сайта выстроено так, чтобы сначала сформировать общее представление о клубе, затем показать его зоны и техническое
оснащение, после этого дать информацию о тарифах и только затем предложить оставить заявку на бронирование.
Отдельную роль в восприятии клуба играет визуальное оформление
сайта. Компьютерные игры и киберспортивная среда обычно ассоциируются с
современной техникой, подсветкой, динамикой и технологичностью. По этой
причине для сайта был выбран тёмный графитовый фон с яркими сине-фиолетовыми акцентами. Такая цветовая схема помогает передать тематику проекта,
но при этом не делает страницу чрезмерно тяжёлой для восприятия. Контрастный текст, заметные кнопки и крупные изображения позволяют сохранить читаемость и одновременно создать подходящее настроение для целевой аудитории.
Фотографии также являются важной частью представления компьютерного клуба. Даже если пользователь уже ознакомился с перечнем услуг и стоимостью, ему всё равно важно увидеть, как выглядят игровые места, насколько
комфортно организовано пространство и чем отличаются различные зоны. Галерея изображений позволяет дополнить текстовые сведения и сделать сайт
23

24.

более убедительным. За счёт фотографий посетитель получает не только сухое
описание клуба, но и более полное представление о будущем посещении.
Так как компьютерный клуб является организацией, которую пользователь посещает лично, на сайте обязательно должна быть представлена контактная информация. К ней относятся адрес, номер телефона, режим работы и
карта с отметкой расположения. Наличие реальной карты особенно удобно для
новых посетителей, так как позволяет сразу увидеть местоположение клуба и
оценить, насколько удобно до него добираться. Благодаря этому сайт решает
не только рекламную, но и справочную задачу.
Необходимо учитывать и то, что значительная часть пользователей может заходить на сайт со смартфона. Часто решение о посещении клуба принимается в переписке с друзьями или уже по пути, поэтому сайт должен быть
удобен не только на большом экране компьютера, но и на мобильных устройствах. Для этого разрабатываемая страница должна адаптироваться под различную ширину экрана: блоки должны перестраиваться, текст оставаться читаемым, а кнопки и элементы формы — удобными для нажатия. Благодаря
адаптивности сайт сохраняет свою функциональность независимо от того, с
какого устройства его открывают.
Одностраничный формат сайта требует особого внимания к удобству перемещения между блоками. Для этого в верхней части страницы размещается
шапка с навигационными ссылками на основные разделы: информацию о
клубе, зоны, оборудование, тарифы, галерею и контакты. При нажатии на
пункт меню пользователь переходит к нужной части страницы без поиска и
лишней прокрутки. Также в проекте предусмотрена кнопка возврата наверх,
которая появляется после прокрутки страницы и позволяет быстро вернуться
к начальному экрану. Эти элементы делают сайт более удобным и помогают
пользователю лучше ориентироваться в его содержании.
С технической точки зрения сайт компьютерного клуба может быть реализован без сложной серверной части. Для построения структуры страницы
24

25.

используется язык HTML, для оформления CSS, а для интерактивных элементов JavaScript. С помощью JavaScript можно реализовать переключение характеристик оборудования, работу мобильного меню, появление кнопки возврата
наверх и обработку формы бронирования. Отправку данных формы можно организовать через специальный внешний сервис, который будет пересылать заявки на электронную почту администратора. Такой подход является достаточным для учебного проекта и позволяет продемонстрировать основные навыки
создания современного веб-сайта.
Таким образом, предметная область разрабатываемого сайта связана с
деятельностью компьютерного клуба и включает представление его услуг, игровых зон, оборудования, тарифов, акций, контактных данных и возможности
предварительного бронирования. Основной задачей сайта является не только
передача информации, но и создание понятного пути для пользователя: от первого знакомства с клубом до отправки заявки на посещение. Одностраничная
структура в данном случае является удобным решением, так как позволяет объединить все важные сведения в одном пространстве и сделать взаимодействие
с ресурсом более быстрым. Грамотно разработанный сайт помогает клубу выглядеть современно, повышает удобство для посетителей и может использоваться как полноценный инструмент привлечения клиентов.
3.2 Создание макета сайта
Перед началом разработки сайта была продумана его общая структура,
расположение основных блоков и внешний вид страницы. Так как сайт создавался для компьютерного клуба, было важно сделать его не только информативным, но и визуально соответствующим тематике игр и современных технологий. Пользователь, открывая страницу, должен сразу понимать, для какой
организации создан сайт, какие услуги она предоставляет и где можно найти
наиболее важную информацию. Поэтому при проектировании макета особое
внимание уделялось последовательности блоков, удобству навигации и тому,
чтобы все элементы страницы были связаны между собой по стилю.
25

26.

Для сайта был выбран одностраничный формат. Такое решение позволило разместить всю основную информацию в пределах одной страницы и
сделать взаимодействие с сайтом более простым. Пользователю не нужно переходить между отдельными страницами, так как сведения о клубе, игровых
зонах, оборудовании, тарифах, акциях, галерее, бронировании и контактах расположены последовательно друг за другом. При этом для удобства перемещения была предусмотрена шапка сайта с навигационными ссылками, каждая из
которых ведёт к определённому разделу страницы. Благодаря этому посетитель может либо просматривать сайт по порядку, либо сразу перейти к интересующему его блоку.
При создании макета в первую очередь была разработана верхняя часть
страницы — шапка сайта. В ней размещается название клуба, навигационное
меню и кнопка перехода к бронированию. Такое решение позволяет сделать
основные действия доступными уже с первого экрана. Название клуба находится в левой части и выполняет роль логотипа, пункты меню расположены по
центру, а кнопка «Забронировать» вынесена вправо и визуально выделена цветом. В меню были добавлены ссылки на разделы «О клубе», «Зоны», «Оборудование», «Тарифы», «Галерея» и «Контакты». Поскольку сайт является одностраничным, при нажатии на эти пункты пользователь плавно перемещается к
нужной части страницы. Шапка закреплена в верхней области экрана, поэтому
остаётся доступной даже после прокрутки сайта вниз, что улучшает удобство
навигации (рисунок 8).
Рисунок 8 – Шапка сайта
Следующим этапом стало проектирование главного экрана, так как
именно он первым привлекает внимание пользователя и формирует общее впе-
26

27.

чатление о сайте. На нём размещено название клуба, краткое описание, две основные кнопки и несколько информационных показателей. В левой части располагается текстовый блок с заголовком, поясняющим назначение сайта, и небольшим описанием клуба. Под текстом находятся кнопки «Забронировать место» и «Посмотреть тарифы». Первая ведёт к форме бронирования, а вторая —
к блоку с ценами. Такое расположение элементов помогает пользователю сразу
выполнить одно из наиболее вероятных действий после открытия сайта.
Правая часть главного экрана отведена под крупное изображение, связанное с тематикой компьютерного клуба. Оно делает первый экран более выразительным и помогает передать атмосферу игрового пространства. Поверх
изображения размещён небольшой информационный блок со сведениями о
свободных местах в разных зонах клуба. Этот элемент дополняет главный
экран и делает его не только визуально привлекательным, но и более содержательным. Ниже текстового блока расположены короткие показатели, отражающие основные особенности клуба: количество игровых мест, режим работы и
число игровых зон. За счёт этого пользователь уже в начале знакомства с сайтом получает основные сведения об организации без необходимости прокручивать страницу дальше (рисунок 9).
Рисунок 9 – Главный экран сайта
27

28.

После главного экрана в макете расположен блок с краткой информацией
о клубе. Он нужен для того, чтобы показать основные преимущества организации и дать пользователю общее представление о предоставляемых услугах.
В данном разделе использованы четыре карточки, посвящённые мощному оборудованию, наличию разных игровых зон, круглосуточному режиму работы и
проведению турниров. Каждая карточка содержит небольшой значок, заголовок и поясняющий текст. Такой формат позволяет компактно разместить важную информацию и сделать её удобной для быстрого просмотра. Пользователь
может сразу увидеть основные достоинства клуба, не читая большой текстовый блок.
Следующим крупным разделом макета стали игровые зоны. Для компьютерного клуба это один из самых важных блоков, так как именно здесь пользователь знакомится с вариантами посещения. В макете предусмотрены четыре карточки: PC-зона, VIP-зона, PlayStation и Bootcamp. Для каждой зоны
добавлено изображение, название, краткое описание, количество мест и стоимость посещения. Подобная организация информации позволяет сразу сравнить разные варианты и понять, чем они отличаются друг от друга. Например,
обычная PC-зона ориентирована на повседневную игру, VIP-зона предлагает
более высокий уровень комфорта, консольная зона подходит для совместного
отдыха, а Bootcamp рассчитан на командное размещение игроков.
При проектировании карточек игровых зон важно было сохранить единый стиль оформления. Все они имеют одинаковую форму, одинаковый порядок расположения элементов и визуально не выбиваются из общей композиции
страницы. Изображение размещается в верхней части карточки, ниже следует
текстовая информация, а в нижней части указываются число мест и стоимость.
Благодаря этому блок выглядит аккуратно и не создаёт ощущения перегруженности. Раздел с игровыми зонами помогает пользователю не только узнать о
возможностях клуба, но и заранее выбрать наиболее подходящий формат посещения (рисунок 10).
28

29.

Рисунок 10 – Блок игровых зон
Отдельное внимание при создании макета было уделено разделу с оборудованием. Для посетителей компьютерного клуба технические характеристики имеют большое значение, поэтому их необходимо было показать достаточно подробно, но при этом не перегрузить страницу большим количеством
текста. Для решения этой задачи в макете предусмотрены переключатели
между категориями PC, VIP и PlayStation. При выборе нужной категории пользователь видит соответствующие характеристики: видеокарту, процессор,
объём оперативной памяти, монитор, модель консоли и другие параметры. Такой способ подачи информации делает блок более удобным, так как пользователь получает только те данные, которые ему нужны в данный момент.
Слева в разделе оборудования размещено изображение, а справа — карточки с характеристиками. Это позволяет сохранить баланс между текстовой и
визуальной частью страницы. Карточки характеристик выполнены в едином
стиле с остальными элементами сайта, имеют одинаковые размеры и аккуратное расположение. Переключатели расположены в верхней части блока и заметно выделяются на фоне страницы, поэтому пользователь без труда понимает, что может выбирать между различными вариантами оборудования. Дан-
29

30.

ный раздел делает сайт более полезным для тех посетителей, которые обращают внимание не только на цену, но и на техническую сторону игрового процесса (рисунок 11).
Рисунок 11 – Раздел с оборудованием
После информации об оборудовании в структуре сайта размещён блок с
тарифами. При проектировании данного раздела было важно сделать стоимость услуг понятной с первого взгляда. Поэтому тарифы представлены в виде
отдельных карточек, в каждой из которых указаны название предложения, продолжительность, цена и краткое описание. В макете предусмотрены варианты
на один час, три часа, пять часов и ночной пакет. Один из тарифов визуально
выделен сильнее остальных, так как он может считаться наиболее выгодным
предложением для посетителя. Такое решение помогает направить внимание
пользователя и одновременно сохраняет возможность самостоятельно сравнить все доступные варианты.
Тарифные карточки расположены в один ряд, благодаря чему посетитель
может быстро сопоставить стоимость и условия каждого предложения.
Кнопки в нижней части карточек ведут к форме бронирования, что сокращает
путь от ознакомления с ценой до отправки заявки. Раздел с тарифами был размещён после блока оборудования, так как к этому моменту пользователь уже
30

31.

знаком с клубом, знает, какие зоны и технические возможности ему доступны,
и может перейти к выбору подходящего варианта посещения.
Далее в макете предусмотрен блок с акциями. Он включает несколько
небольших карточек со специальными предложениями клуба: скидкой для студентов, бонусом при первом посещении и особыми условиями для командной
игры. Данный раздел не является центральным, однако он дополняет сайт и
делает его более приближённым к реальной деятельности организации. Для
компьютерного клуба подобные предложения могут использоваться как дополнительный способ заинтересовать новых посетителей и удержать постоянных
клиентов. Визуально карточки акций оформлены проще, чем карточки игровых зон или тарифов, чтобы они не перетягивали на себя основное внимание,
но при этом оставались заметными.
После информационных блоков размещена галерея изображений. При
создании макета было решено добавить её ближе к нижней части страницы,
поскольку к этому моменту пользователь уже ознакомился с услугами клуба и
может посмотреть, как выглядит само пространство. Галерея состоит из нескольких изображений разного размера, которые показывают интерьер, игровые места и отдельные зоны клуба. Различие в размерах карточек делает блок
более живым и визуально интересным. Фотографии помогают дополнить текстовую информацию и дают посетителю возможность заранее оценить внешний вид клуба.
Одним из наиболее важных разделов страницы стала форма бронирования. Она расположена ближе к концу сайта, после того как пользователь уже
увидел игровые зоны, оборудование, тарифы и фотографии. Такое расположение выбрано не случайно: сначала посетителю предоставляется вся информация, необходимая для принятия решения, а затем предлагается оставить заявку.
Форма включает поля для ввода имени, телефона, даты, времени, выбора зоны,
количества мест и комментария. В левой части блока располагается краткое
пояснение о назначении формы, а справа — сами поля для заполнения. За счёт
31

32.

такого деления раздел выглядит упорядоченно и не создаёт сложности при использовании.
Форма бронирования является одним из основных интерактивных элементов сайта. При проектировании её структуры было важно не добавить лишних полей, но при этом собрать все сведения, которые понадобятся администратору для последующей связи с клиентом. Поля расположены в логичном
порядке: сначала пользователь вводит свои контактные данные, затем выбирает дату и время, после чего указывает нужную зону и количество мест. Поле
для комментария оставлено необязательным, так как оно может использоваться только при наличии дополнительных пожеланий. В нижней части
формы размещена заметная кнопка отправки заявки. Такое решение делает
процесс бронирования понятным и не требует от пользователя длительного
изучения интерфейса (рисунок 12).
Рисунок 12 – Форма бронирования
Завершающим смысловым блоком страницы стали контакты. В нём размещены название клуба, адрес, номер телефона, режим работы и карта с отметкой расположения. Для сайта компьютерного клуба данный раздел осо-
32

33.

бенно важен, поскольку после знакомства с услугами и отправки заявки пользователь должен понимать, где находится организация и как до неё добраться.
Контактная информация собрана в отдельной карточке, а рядом размещена интерактивная карта, на которой отмечено местоположение клуба. Это делает
блок не только информативным, но и удобным с практической точки зрения.
Пользователь может сразу увидеть адрес и оценить расположение клуба без
перехода на сторонние сервисы.
При создании макета также была предусмотрена плавающая кнопка возврата наверх. Она появляется после прокрутки страницы вниз и позволяет
быстро вернуться к первому экрану. Для одностраничного сайта с большим
количеством блоков такой элемент особенно удобен, поскольку избавляет
пользователя от необходимости долго прокручивать страницу вручную.
Кнопка выполнена в той же цветовой гамме, что и основные акцентные элементы сайта, поэтому хорошо заметна, но при этом не нарушает целостность
общего оформления.
Общий стиль сайта был выбран с учётом тематики компьютерного клуба.
Основой оформления стал тёмный графитовый фон, который сочетается с яркими синими, фиолетовыми и голубыми акцентами. Такой вариант хорошо передаёт атмосферу игровых пространств, в которых часто используется неоновая подсветка и современное техническое оформление. При этом фон не является полностью чёрным, благодаря чему сайт выглядит менее тяжёлым и
лучше воспринимается визуально. Для кнопок, активных элементов и отдельных акцентов используются градиенты, что делает интерфейс более выразительным.
Текстовая часть макета построена на контрасте светлого шрифта и тёмного фона. Заголовки сделаны крупнее основного текста, чтобы пользователь
мог быстро ориентироваться в структуре страницы. Карточки имеют скруглённые углы и лёгкое затемнение фона, за счёт чего элементы выглядят отделён-
33

34.

ными друг от друга и при этом сохраняют общий стиль. Отступы между блоками подобраны таким образом, чтобы страница не казалась перегруженной, а
каждый раздел имел собственное визуальное пространство.
При проектировании также учитывалась адаптация сайта под разные
размеры экрана. На компьютере основные блоки могут располагаться в несколько колонок, например карточки игровых зон или тарифов выводятся в
один ряд. На экранах меньшего размера элементы должны перестраиваться
вертикально, чтобы сохранялась читаемость текста и удобство нажатия кнопок. Навигационное меню на мобильных устройствах может быть свёрнуто в
компактную кнопку, а форма бронирования — переходить из двух колонок в
одну. Подобный подход позволяет сделать сайт удобным как для пользователей
персональных компьютеров, так и для тех, кто открывает его со смартфона.
Таким образом, в процессе создания макета была разработана последовательная структура одностраничного сайта компьютерного клуба, в которой
каждый блок выполняет собственную задачу. Шапка обеспечивает навигацию,
главный экран знакомит пользователя с клубом, разделы с зонами и оборудованием раскрывают его основные возможности, тарифы и акции дают представление о стоимости и предложениях, галерея формирует визуальный образ
пространства, форма бронирования позволяет оставить заявку, а контакты помогают получить сведения о местоположении организации. Выбранное
оформление соответствует тематике проекта, а логика расположения элементов делает сайт удобным и понятным для посетителей. Такой макет стал основой для дальнейшей разработки веб-страницы и позволил заранее определить,
как будет выглядеть и работать каждый её раздел.
3.3 Создание сайта
После того как была продумана структура страницы и определено расположение основных блоков, началась непосредственная разработка сайта
компьютерного клуба. Для создания проекта были использованы HTML, CSS
и JavaScript. Язык HTML применялся для построения структуры страницы,
34

35.

CSS — для оформления внешнего вида элементов, а JavaScript — для добавления интерактивности и обработки действий пользователя. Такой набор технологий был выбран потому, что сайт имеет одностраничную структуру и не требует создания сложной серверной части. При этом с их помощью можно реализовать все необходимые элементы: навигацию по разделам, переключение
характеристик оборудования, работу мобильного меню, кнопку возврата
наверх и форму бронирования.
Для того чтобы файлы проекта были упорядочены и с ними было удобнее работать, была создана отдельная структура папок. Главный файл страницы получил название index.html. Все стили были вынесены в файл style.css,
который расположен в папке css. Скрипты размещены в файле script.js внутри
папки js. Для изображений создана отдельная папка img, в которой хранятся
фотографии, используемые на странице. Такое разделение делает проект более
понятным, облегчает внесение изменений и позволяет быстрее находить нужные элементы при дальнейшей доработке сайта (рисунок 13).
Рисунок 13 – Структура файлов проекта
35

36.

Основой сайта является файл index.html, в котором расположены все
смысловые блоки страницы. В начале документа была создана шапка сайта,
содержащая название клуба, навигационное меню и кнопку перехода к бронированию. Для пунктов меню использовались ссылки на соответствующие
идентификаторы разделов страницы. Например, при нажатии на пункт «Тарифы» пользователь переходит к блоку с ценами, а при выборе пункта «Контакты» — к нижней части страницы с адресом и картой. Так как все разделы
располагаются в пределах одной страницы, данный способ позволяет организовать удобное перемещение без создания отдельных HTML-документов.
Навигационная панель была сделана фиксированной, чтобы пользователь мог обращаться к меню независимо от того, в какой части страницы он
находится. Для этого в CSS использовалось свойство position: fixed, благодаря
которому шапка остаётся закреплённой в верхней области окна браузера. После начала прокрутки к ней добавляется дополнительный стиль, который делает фон более плотным и визуально отделяет меню от содержимого страницы.
Данное решение оказалось удобным для одностраничного сайта, так как посетителю не приходится возвращаться в начало страницы для перехода к другому
разделу (рисунок 14).
Рисунок 14 – Разметка шапки и навигационного меню
После шапки был создан главный экран сайта. Он состоит из двух частей: текстового блока и крупного изображения. В текстовой части размещены
36

37.

название клуба, небольшое описание, кнопки быстрого перехода и краткие показатели, отражающие число игровых мест, режим работы и количество зон.
Справа находится изображение с дополнительным информационным блоком о
свободных местах. Такой вариант позволил сделать стартовую часть страницы
достаточно насыщенной, но при этом не перегруженной. Пользователь сразу
видит основную информацию и может выбрать одно из дальнейших действий:
перейти к бронированию или сначала ознакомиться с тарифами.
Следующим этапом была создана секция с преимуществами клуба. Для
неё использовались карточки одинакового размера, каждая из которых содержит иконку, заголовок и небольшой текст. При вёрстке данного блока применялась CSS-сетка grid, позволяющая расположить элементы в один ряд на широких экранах и перестраивать их на меньших разрешениях. Такой подход был
использован и в других разделах страницы, поскольку он хорошо подходит для
размещения карточек и позволяет сохранять аккуратный внешний вид сайта
при изменении ширины окна браузера.
Особое внимание при разработке было уделено блоку игровых зон. В
HTML для каждой зоны была создана отдельная карточка, включающая изображение, название, описание, количество мест и стоимость. Для отображения
фотографий были подготовлены отдельные классы, в которых через CSS подключаются нужные изображения из папки img. Благодаря этому разметка остаётся более чистой, а при необходимости заменить фотографию можно без изменения структуры HTML-кода. Все карточки оформлены в едином стиле,
имеют одинаковые отступы, скругления и порядок элементов, что делает раздел удобным для восприятия (рисунок 15).
Рисунок 15 – Разметка блока игровых зон
37

38.

Раздел с оборудованием был сделан интерактивным. В верхней части
блока располагаются три кнопки: PC, VIP и PlayStation. При нажатии на каждую из них пользователю показываются соответствующие характеристики, а
остальные варианты скрываются. Для реализации этого механизма в HTML
были созданы отдельные панели с данными, а в JavaScript — обработчики событий для кнопок. После выбора нужной вкладки активной кнопке добавляется специальный класс, а нужному набору характеристик — класс, отвечающий за отображение. Такой подход позволяет разместить на странице большой
объём информации без лишнего увеличения длины раздела и делает использование сайта более удобным (рисунок 16).
Рисунок 16 – Реализация переключения характеристик оборудования
Для оформления сайта был подготовлен отдельный файл CSS. В начале
документа были заданы основные переменные: цвета фона, текста, акцентов,
оттенков карточек, размеры скругления и ширина контейнера. Использование
переменных позволило поддерживать единый стиль во всех разделах и упростило изменение цветовой схемы. При необходимости заменить главный акцентный цвет достаточно изменить его значение в одном месте, после чего он
автоматически обновится во всех элементах, где используется. Основу оформления составляет тёмный графитовый фон, светлый текст и яркие сине-фиоле-
38

39.

товые акценты. Для кнопок и некоторых декоративных элементов применяются градиенты, за счёт чего сайт выглядит более современно и соответствует
тематике компьютерного клуба.
Во время разработки были созданы отдельные стили для карточек игровых зон, тарифов, акций и контактной информации. Для того чтобы элементы
не выглядели плоскими и однообразными, использовались полупрозрачные
фоны, мягкие тени, скруглённые углы и тонкие границы. Такой подход позволил визуально отделить блоки друг от друга, не нарушая общего единства страницы. Для главного экрана и галереи были предусмотрены изображения, которые размещаются как фоновые элементы. Это позволило сохранить гибкость
вёрстки и удобнее управлять масштабированием фотографий.
После блока с оборудованием была реализована секция тарифов. Для
каждого предложения создана отдельная карточка с названием, продолжительностью, ценой и кнопкой выбора. Один из тарифов имеет усиленное визуальное выделение, так как он является более выгодным вариантом для посетителя.
При нажатии на кнопку в карточке пользователь перемещается к форме бронирования. Таким образом, тарифный блок не только предоставляет справочную
информацию, но и участвует в общем пользовательском сценарии, подводя посетителя к отправке заявки.
Отдельным разделом были добавлены акции клуба. Данный блок был
выполнен в виде трёх карточек с краткими описаниями специальных предложений. Для него не использовалась сложная логика, так как главная задача состояла в компактном представлении дополнительной информации. После акций была размещена галерея. В ней применена сетка из нескольких изображений разного размера, что позволило сделать блок более разнообразным и визуально привлекательным. Благодаря фотографиям пользователь может не
только прочитать о клубе, но и увидеть интерьер, игровые места и общую атмосферу пространства.
Одним из главных функциональных элементов страницы стала форма
бронирования. Для неё были созданы поля для ввода имени, телефона, даты,
39

40.

времени, выбора зоны, количества мест и комментария. Все элементы формы
размещены в логичной последовательности и имеют подписи, чтобы пользователю было понятно, какие данные требуется указать. Для обязательных полей используется атрибут required, не позволяющий отправить форму, если необходимая информация не заполнена. После подключения сервиса отправки
данные формы будут передаваться администратору клуба на электронную почту, что позволит принимать заявки без создания сложной системы регистрации и личных кабинетов (рисунок 17).
Рисунок 18 – Разметка формы бронирования
Для формы также была предусмотрена обработка отправки через
JavaScript. После нажатия на кнопку данные считываются из заполненных полей, а пользователю выводится сообщение о том, что заявка отправлена. Это
позволяет сделать взаимодействие с формой более понятным, так как посетитель получает подтверждение того, что его действие было выполнено. При
дальнейшей настройке отправки на электронную почту данный механизм может быть дополнен выводом уведомления об ошибке, если отправка по какойлибо причине не произошла.
В нижней части страницы был создан раздел с контактами. В нём размещены адрес клуба, телефон, режим работы и встроенная карта с отметкой местоположения. Для отображения карты используется готовый код, полученный
из конструктора карт, который вставляется на страницу через элемент iframe.
Такой способ позволяет показать пользователю реальное расположение организации без необходимости вручную разрабатывать сложный картографиче40

41.

ский модуль. Карта размещена рядом с контактной карточкой, поэтому посетитель может одновременно увидеть текстовую информацию и сразу определить, где находится клуб (рисунок 19).
Рисунок 19 – Встроенная карта в разделе контактов
Кроме основных блоков, на сайте была реализована кнопка возврата
наверх. Она появляется только после того, как пользователь прокрутил страницу на определённое расстояние.
Для этого в JavaScript отслеживается положение прокрутки окна браузера, и при достижении нужного значения кнопке добавляется класс, отвечающий за её видимость. После нажатия выполняется плавный возврат к началу
страницы. Для длинного одностраничного сайта такой элемент повышает
удобство и сокращает количество действий, необходимых для возвращения к
первому экрану.
Также в ходе разработки было предусмотрено адаптивное отображение
страницы.
В файле стилей были добавлены медиазапросы, меняющие расположение элементов при уменьшении ширины экрана. На больших мониторах карточки преимуществ, зон и тарифов располагаются в несколько колонок, а на
мобильных устройствах перестраиваются вертикально.
Для маленьких экранов навигационное меню скрывается и заменяется
кнопкой, при нажатии на которую открывается список разделов.
Форма бронирования, блок контактов и раздел оборудования также переходят в одноколоночное расположение. Благодаря этому сайт остаётся удобным для просмотра не только на компьютере, но и на смартфоне (рисунок 20).
41

42.

Рисунок 20 – Адаптивная версия сайта
Во время разработки страницы проводилась постоянная проверка корректности отображения всех элементов. Особое внимание уделялось работе
ссылок в меню, переключению вкладок оборудования, отображению изображений, поведению кнопки возврата наверх и правильности перестроения блоков при изменении ширины экрана. Для поиска возможных ошибок использовались инструменты разработчика браузера, позволяющие отслеживать структуру документа, применённые стили и работу сценариев. Такая проверка дала
возможность своевременно исправлять недочёты и сделать страницу более
устойчивой при использовании.
Таким образом, в результате практической разработки был создан одностраничный сайт компьютерного клуба, состоящий из взаимосвязанных информационных и функциональных блоков. В проекте реализованы шапка с
навигацией, главный экран, раздел с преимуществами, карточки игровых зон,
интерактивный блок оборудования, тарифы, акции, галерея, форма бронирования, контакты с картой и кнопка возврата наверх. Использование HTML, CSS
и JavaScript позволило создать современную страницу с удобной навигацией,
единым визуальным стилем и необходимыми интерактивными элементами.
42

43.

Получившийся сайт соответствует поставленной задаче и может использоваться как полноценное веб-представительство компьютерного клуба.
3.4 Размещение сайта на хостинге
После завершения разработки сайта необходимо было разместить его в
сети Интернет, чтобы веб-страница открывалась не только на локальном компьютере, но и по ссылке из любого браузера. Для размещения проекта был выбран сервис GitHub Pages. Он предназначен для публикации статических сайтов и позволяет размещать HTML-, CSS- и JavaScript-файлы прямо из репозитория GitHub. Данный вариант хорошо подходит для созданного сайта компьютерного клуба, так как его основная часть реализована на стороне клиента и
не требует отдельной серверной обработки данных.
Перед публикацией была проверена файловая структура проекта. В корневой папке сайта находится основной файл index.html, который отвечает за
отображение страницы в браузере. Таблица стилей размещена в папке css, файл
со сценариями — в папке js, а изображения, используемые на сайте, находятся
в каталоге img. Такое разделение файлов было сделано ещё на этапе разработки и оказалось удобным при последующем размещении проекта, поскольку
все материалы имеют понятное расположение и связаны между собой относительными путями.
Для загрузки сайта на GitHub был создан отдельный репозиторий. В него
были добавлены все файлы проекта с сохранением исходной структуры папок.
Наличие репозитория позволяет не только хранить готовый сайт в сети, но и
контролировать изменения, которые вносятся в код в процессе доработки. Если
в дальнейшем требуется изменить текст, заменить изображение или скорректировать стили, обновлённые файлы можно загрузить в тот же репозиторий без
создания новой версии проекта.
После загрузки файлов была выполнена настройка публикации сайта через GitHub Pages. Для этого в параметрах репозитория был открыт раздел
43

44.

Pages, где в качестве источника публикации была выбрана ветка main и корневая папка проекта. Такой способ подходит для сайта, все итоговые файлы которого расположены сразу в основном каталоге репозитория. GitHub Pages позволяет публиковать сайт либо из корневой папки выбранной ветки, либо из
папки docs, поэтому при настройке важно указать именно тот вариант, который
соответствует структуре конкретного проекта.
После сохранения параметров сервис автоматически сформировал адрес
сайта. Главным входным файлом для открытия страницы является index.html,
поэтому именно он загружается при переходе по опубликованной ссылке. После размещения была проведена проверка работы всех частей сайта: корректности загрузки стилей, отображения изображений, работы навигации, переключения характеристик оборудования, кнопки возврата наверх, формы бронирования и встроенной карты. Это позволило убедиться, что после переноса
проекта в интернет его внешний вид и функциональность сохранились.
Размещение сайта через GitHub Pages удобно ещё и тем, что обновление
опубликованной версии не требует повторной загрузки проекта вручную на отдельный сервер. После изменения файлов достаточно сохранить новые данные
в репозитории, и сервис обновит содержимое сайта на основе выбранного источника публикации. Благодаря этому сопровождение проекта становится более простым, а внесение небольших правок занимает меньше времени.
Дополнительным преимуществом выбранного способа размещения является использование системы контроля версий Git. Каждое изменение в проекте может быть зафиксировано отдельной записью, что позволяет отслеживать этапы разработки и при необходимости возвращаться к предыдущим вариантам файлов. Для учебной работы это также удобно, так как весь процесс
создания сайта сохраняется в одном месте и не требует хранения большого количества отдельных копий проекта на компьютере.
GitHub Pages подходит именно для статических сайтов. В разработанном
проекте используются HTML, CSS и JavaScript, а основная информация выводится без обращения к базе данных. Поэтому выбранный способ размещения
44

45.

полностью соответствует техническим особенностям сайта компьютерного
клуба. При этом опубликованная страница остаётся доступной пользователям
через обычную интернет-ссылку и может открываться как на компьютерах, так
и на мобильных устройствах. GitHub также позволяет дополнительно подключать защищённое соединение HTTPS для сайтов, размещённых через Pages.
Таким образом, для размещения сайта компьютерного клуба был использован сервис GitHub Pages. В ходе работы были подготовлены файлы проекта,
создан репозиторий, загружена структура сайта, настроена публикация из основной ветки и выполнена проверка опубликованной страницы. Выбранный
способ позволил сделать сайт доступным в сети Интернет без сложной
настройки сервера и подходит для дальнейшего хранения и обновления проекта.
45

46.

Заключение
В ходе выполнения выпускной квалификационной работы был разработан сайт компьютерного клуба RESPAWN. Данная тема является актуальной,
так как современные организации в сфере досуга нуждаются в собственном
веб-ресурсе для представления услуг, привлечения посетителей и упрощения
взаимодействия с клиентами. Для компьютерного клуба сайт особенно важен,
поскольку пользователи заранее хотят узнать стоимость посещения, характеристики оборудования, доступные игровые зоны, режим работы и возможность бронирования места.
В процессе работы были изучены основные понятия, связанные с созданием веб-сайтов, рассмотрены особенности структуры сайта и определены
требования к удобству пользовательского интерфейса. Было установлено, что
для сайта компьютерного клуба важными элементами являются понятная
навигация, описание игровых зон, информация об оборудовании, тарифы, галерея, контактные данные, карта расположения и форма бронирования. Все эти
элементы были учтены при разработке проекта.
Во второй главе были рассмотрены возможные способы создания сайта.
Были проанализированы клиентские языки программирования, конструкторы
сайтов, CMS-системы и графические редакторы. В результате для данного проекта был выбран способ самостоятельной разработки, так как он позволяет
полностью контролировать структуру сайта, внешний вид страницы и работу
интерактивных элементов. Такой подход также даёт возможность показать
практические навыки создания современного веб-ресурса.
В качестве основных технологий разработки были выбраны HTML, CSS
и JavaScript. HTML использовался для создания структуры страницы, CSS для
оформления внешнего вида сайта, адаптивной вёрстки, карточек, кнопок и
блоков, а JavaScript для реализации интерактивных функций. С помощью
JavaScript были выполнены переключение характеристик оборудования, открытие мобильного меню, появление кнопки возврата наверх и обработка
46

47.

формы бронирования. Для отображения местоположения клуба была добавлена интерактивная карта, встроенная на сайт.
В практической части был разработан одностраничный сайт компьютерного клуба RESPAWN. В состав сайта вошли шапка с навигацией, главный
экран, блок с преимуществами клуба, раздел игровых зон, блок оборудования,
тарифы, акции, галерея, форма бронирования и контакты. Одностраничная
структура была выбрана потому, что она позволяет пользователю быстро получить всю основную информацию без перехода между несколькими страницами. При этом навигационное меню помогает сразу перейти к нужному разделу.
Особое внимание при разработке сайта было уделено удобству пользователя. Структура страницы построена так, чтобы посетитель сначала получил
общее представление о клубе, затем ознакомился с игровыми зонами, оборудованием и тарифами, после чего мог оставить заявку на бронирование. Форма
бронирования содержит необходимые поля: имя, телефон, дату, время, выбор
зоны, количество мест и комментарий. Это позволяет администратору получить основные данные для последующего подтверждения заявки.
Визуальное оформление сайта выполнено в тёмной графитовой цветовой гамме с яркими сине-фиолетовыми акцентами. Такой стиль соответствует
тематике компьютерного клуба и передаёт атмосферу современного игрового
пространства. Карточки, кнопки, формы, изображения и навигационные элементы оформлены в едином стиле, благодаря чему сайт выглядит целостно и
аккуратно. Также была предусмотрена адаптивная вёрстка, чтобы сайт корректно отображался на компьютерах, планшетах и мобильных устройствах.
После завершения разработки сайт был размещён на хостинге GitHub
Pages. Данный способ размещения подходит для статических сайтов, состоящих из HTML-, CSS- и JavaScript-файлов. Использование GitHub Pages позволило сделать сайт доступным через Интернет без настройки сложного сервер-
47

48.

ного оборудования. Кроме того, хранение проекта в репозитории GitHub упрощает дальнейшее обновление сайта и позволяет контролировать внесённые изменения.
Таким образом, цель выпускной квалификационной работы была достигнута. В результате был создан сайт игрового компьютерного клуба, который позволяет пользователю ознакомиться с услугами клуба, выбрать подходящую игровую зону, посмотреть характеристики оборудования, изучить тарифы, просмотреть галерею, узнать контактную информацию и оставить заявку на бронирование. Все поставленные задачи были выполнены: изучены
теоретические основы разработки сайтов, рассмотрены средства создания вебресурсов, разработана структура сайта, реализованы основные блоки и интерактивные элементы, а также выполнено размещение готового проекта на хостинге.
Разработанный сайт может использоваться как полноценное веб-представительство компьютерного клуба. При дальнейшей доработке в проект
можно добавить личный кабинет пользователя, систему онлайн-оплаты, отображение реального количества свободных мест, административную панель и
базу данных для хранения заявок. Однако уже в текущем виде сайт выполняет
основные функции, необходимые для представления компьютерного клуба в
сети Интернет, и показывает практическое применение технологий HTML,
CSS и JavaScript при создании современного сайта.
48

49.

Список использованных источников
1 Гаевский, А. Ю., В. А. Романовский. 100% самоучитель. Создание Webстраниц и Web-сайтов. HTML и JavaScript [Текст] / А. Ю. Гаевский, В. А.
Романовский – М.: Триумф, 2022. – 464с.
2 Гультяев, А. К., В. А. Машин. Уроки Web-мастера. Технология. Дизайн. Инструменты [Текст] / А. К. Гультяев, В. А. Машин – М.: Корона-Принт, 2024.
– 448с.
3 Дакетт, Д. HTML и CSS. Разработка и создание веб-сайтов [Текст] / Д. Дакетт – М.: Эксмо, 2025. – 716с.
4 Дронов, В. А. JavaScript в Web-дизайне [Текст] / В. А. Дронов – М.: БХВПетербург, 2023. – 880с.
5 Кузнецов, М. PHP 5 на примерах [Текст] / М. Кузнецов – М.: БХВ-Петербург, 2022. – 263с.
6 Лазаро, И. К., Д. И. Коэн. Полный справочник по HTML, CSS и JavaScript
[Текст] / И. К. Лазаро, Д. И. Коэн – М.: ЭКОМ Паблишерз, 2023. – 619с.
7 Пфаффенбергер, Дж. [и др.] HTML, XHTML и CSS. Библия пользователя
[Текст] / Дж. Пфаффенбергер [и др.] – М.: Вильямс, 2022. – 752с.
8 CYBERLENINKA [Электронный ресурс]. – Режим доступа: Свободный –
https://cyberleninka.ru/
9 Сайт
[Электронный
ресурс].
–
Режим
доступа:
Свободный
–
https://ru.wikipedia.org/wiki/Сайт
49