Разработка одностраничного сайта-визитки клуба смешанных единоборств "Берсеркер"

Размещено на http://www.allbest.ru/

Министерство образования и науки РТ

Государственное автономное профессиональное образовательное учреждение

"Набережночелнинский педагогический колледж"

Прикладная информатика (по отраслям)

Курсовая работа

на тему:

Разработка одностраничного сайта-визитки клуба смешанных единоборств "Берсеркер"

Студент Р.Р. Загиров

Набережные Челны 2018 г.

Введение

Интернет стал неотъемлемой частью нашей жизни. Однако для работы в интернете нужны как минимум три вещи: браузер, доступ в интернет и начальные навыки построения и структуры Web-сайтов. В этой работе я пытался создать свой одностраничный сайт-визитки клуба смешанных единоборств "Берсеркер" при помощи языка разметки гипертекста HTML, CSS. На первый взгляд этот язык может показаться довольно сложным, однако он является самым простым способом построения персонального сайта, на котором можно выложить любую информацию.

Цель работы: Основной целью разработки одностраничного сайта-визитки клуба смешанных единоборств "Берсеркер" является предоставление информации о нашем клубе пользователю, а также сокращение звонков в службу поддержки клиентов. Сайт-визитка позволяет сообщить пользователям информацию о видах единоборств.

Задачи:

1. Определение назначения и функций сайта;

2. Выбор цветового и стилистического оформления;

3. Определение страниц и содержание;

4. Выбор шаблона и изменение его;

5. Создание графических элементов сайта;

6. Верстка сайта.

Выводы:

Итак, поняв принцип построения Web-страницы, изучив возможности соединения в ней различных видов информации, можно смело сказать, что Web-страницы, с их потенциалом могут применятся для различных целей.

Теоретическая часть

Представление предметной области

Сайт-визитка (англ. business card website) - небольшой сайт, как правило, состоящий из одной (или нескольких) веб-страниц и содержащий основную информацию об организации, частном лице, компании, товарах или услугах, прайс-листы, контактные данные.

Часто сайт-визитку используют компании, которые не хотят нести большие затраты на создание отдельного сайта. Очень часто при покупке доменного имени для почты устанавливается сайт-заглушка или сайт-визитка. сайт визитка шаблон

Сайт-визитка основные преимущества:

· вы сможете находить новых клиентов, пользуясь только интернетом;

· у вас появляется возможность сэкономить немало финансовых средств;

· компания сможет оставить свой адрес на сайте, поэтому клиенты без проблем найдут ваш офис и получат более подробную информацию о тех услугах, которые их интересуют;

· потребитель может обратиться на сайт в любое время суток, поэтому количество потенциальных клиентов резко увеличивается;

· с помощью графических элементов можно создать более привлекательный дизайн сайта;

· вы сможете в любой момент изменять информацию и добавлять новые данные;

· если посещаемость сайта-визитки большая, то вы будете зарабатывать на нем деньги путем размещения различной рекламы и других ресурсов;

· клиент больше доверяет компаниям, у которых есть собственный сайт.

Прогнозирование предметной области

Смоделируем динамические или поведенческие аспекты пользователя сайта в виде диаграммы вариантов использования (см. Рисунок 1.1).

Рисунок 1.1 Диаграмма вариантов использования

Для того чтобы учесть временной аспект поведения системы, построим диаграмму последовательности для реализации варианта использования "Запись на бесплатную тренировку" (см. Рисунок 1.2).

Рисунок 1.2 Диаграмма последовательности

Для моделирования процесса выполнения операций в языке UML используются диаграммы деятельности. Диаграмма деятельности - это своеобразная блок-схема, которая описывает последовательность выполнения операций во времени. Построим диаграмму деятельности сайта (см. Рисунок 1.3).

Рисунок 1.3 Диаграмма деятельности

Программные ресурсы исследования

Этот одностраничный сайт будет разработан с помощью языка разметки гипертекста HTML, CSS.

Для оформления внешнего вида сайта за основу был взят готовый шаблон.

HTML (HyperText Markup Language)-- язык разметки (маркировки) гипертекста. Гипертекст своим развитием обязан интернету, хоть и создавался он совсем не для того. HTML дает возможность производить переход от одной части текста к другой, и, что замечательно, эти части могут храниться на совершенно разных компьютерах.

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

Adobe Photoshop - многофункциональный графический редактор, разработанный и распространяемый фирмой Adobe Systems. В основном работает с растровыми изображениями, однако имеет некоторые векторные инструменты.

Установка проблемы

Эта курсовая деятельность подразумевает исследование сайта-визитки клуба смешанных единоборств "Берсеркер" с помощью языка программирования HTML и таблиц каскадирования CSS. Обработка фотографий реализована с помощью Adobe Photoshop. Сайт может просматриваться на таких браузерах, как Internet Explorer, Opera, Chrome и Yandex и на любом устройстве.

Меню сайта-визитки будет состоять из следующих пунктов:

- О нашем клубе;

- Инструкторы;

- Почему мы;

- Галерея;

- Направление работы;

- Как нас найти;

О нашем клубе. При загрузке сайта-визитки раскрывается основная страничка.

Инструкторы. На блоках будут размещены инструкторы, работающие в нашем клубе.

Почему мы. Блоки включает сведения почему стоит выбрать именно нас.

Галерея. Присутствие переходе в страничку возможно заметить фотографии с тренировок.

Направление работы. В блоке расположены какие виды единоборств у нас имеются.

Как нас найти. На блоке указан адрес.

Создание сайта-визитки

Изначально, когда я приступал к изменение шаблону, он выглядел так:

В самом начале я поменял фон и текст результат стал таким:

</div>

<img "images/3.jpg">

<div class="baner-text">

<center><h2><font size="7" color="#FFFFFF" face="century-gothic"><br><p><b>Жить <br>чтобы бороться, Бороться <br>чтобы жить!</b></p></font></h2><center>

</div>

Вставил свой логотип:



Рисунок 4 Логотип

<img class="logohed" width="150px" height="150px" style="position: absolute;top:50px;left:970px;" src="images/QHLnn1p4-y0.jpg">

Изменение меню сайта-визитки до:

Рисунок 5 Меню скачанного шаблона

Изменение меню сайта-визитки после:

Рисунок 6 Меню сайта-визитки

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav navbar-center cl-effect-15">

<li><a href="#about" class="scroll" data-hover="О нашем клубе">О нашем клубе</a></li>

<li><a href="#team" class="scroll" data-hover="Инструкторы">Инструкторы</a></li>

<li><a href="#services" class="scroll" data-hover="Почему мы ?">Почему мы ?</a></li>

<li><a href="#gallery" class="scroll" data-hover="Галерея">Галерея</a></li>

<li><a href="#news" class="scroll" data-hover="Направление работы">Направление работы</a></li>

<li><a href="#contact" class="scroll" data-hover="Как нас найти">Как нас найти</a></li>

</ul>

<div class="clearfix"> </div>

</div>

Изменение блока сайта-визитки:

Рисунок 7 Скачанный шаблон

Рисунок 8 Измененный блок

<div class="about" id="about">

<div class="container">

<h3 class="title">Добро пожаловать на сайт Единоборства</h3>

<p>Можно ходить в качалку(чтобы быть в форме),на тренинги личностного роста(за уверенностью),

к психологу(дабы обрести душевное равновесие).<br>А можно заняться единоборствами и решить все проблемы разом.</p>

</div>

</div>

Изменение 1 блока меню:

Рисунок 9 Скачанный шаблон

Рисунок 10 О нашем клубе

<div class="slid" id="slid">

<div class="container">

<div class="slid-info">

<h4>О нашем клубе</h4>

<p>В наше время здоровый образ жизни стал уже не просто модным увлечением, а полезной привычкой. Мы стараемся соответствовать всем требованиям к современным тренажерным залам. Мы оборудовали наш зал самым новым спортивным оборудованием, ведь для многих регулярные тренировки являются приятным хобби и поэтому мы приглашаем Вас к нам.</p>

</div>

</div>

</div>

Изменение блока сайта-визитки:

Рисунок 11

<div class="special">

<div class="container">

<div class="col-md-5 special-grids">

<h3 class="title">Наша специализация</h3>

<p>Single combat, боевой вид требующий высоких волевых качеств и адекватной помехозащищенности эмоциональной сферы, а так же приобретение знаний, умений и навыков, способствующих достижению высоких результатов.</p>

<h6>Наши услуги</h6>

<div class="progress">

<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">

60%

</div>

</div>

<h6>Опытный персонал</h6>

<div class="progress">

<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">

80%

</div>

</div>

<h6>Бесплатные консультации</h6>

<div class="progress">

<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%;">

90%

</div>

</div>

<h6>Расширенные лабораторные тесты</h6>

<div class="progress">

<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">

75%

</div>

</div>

</div>

<div class="col-md-7 special-grids">

<h3 class="title">Что мы делаем</h3>

<div class="embed-responsive embed-responsive-16by9">

<iframe src="https://vk.com/video_ext.php?oid=60226456&id=456239018&hash=8d8e761c7ada4355" width="640" height="360" frameborder="0" allowfullscreen></iframe>

</div>

</div>

<div class="clearfix"> </div>

</div>

</div>

Изменение 2 блока меню:

Рисунок 12 Скачанный шаблон

Рисунок 13 Наши инструкторы

<div class="team" id="team">

<div class="container">

<h3 class="title">Наши инструкторы </h3>

<div class="team-grids">

<div class="col-md-6 team-grid">

<div class="team-grid-left">

<h4>Илья Игнатьев</h4>

<p>Президент федерации ММА, Судья международной категории, МС международного класса, лицензированный тренер ММА.</p>

</div>

<div class="team-grid-right">

<img src="images/img1.jpg" alt=" " class="img-responsive" />

</div>

<div class="clearfix"> </div>

</div>

<div class="col-md-6 team-grid">

<div class="team-grid-right aliquam">

<img src="images/img4.jpg" alt=" " class="img-responsive" />

</div>

<div class="team-grid-left non">

<h4>Андрей Плутахин</h4>

<p>МС России по рукопашному бою. Чемпион и призер общероссийских и международных Чемпионатов и турниров по

рукопашному бою, лицензированный тренер по Рукопашному бою и К-1.</p>

</div>

<div class="clearfix"> </div>

</div>

<div class="clearfix"> </div>

</div>

</div>

</div>

Изменение 4 блок меню:



Рисунок 14 Галерея

<div class="gallery" id="gallery">

<div class="container">

<h3 class="title">Наша галерея</h3>

<div class="top-gallery">

<div class="col-md-4 gallery-grid gallery1">

<a href="images/g1.jpg" class="swipebox">

<img src="images/g1.jpg" class="img-responsive" alt="/">

<div class="textbox">

<h4>Боевые искусства</h4>

</div>

</a>

</div>

<div class="col-md-4 gallery-grid gallery1">

<a href="images/g2.jpg" class="swipebox">

<img src="images/g2.jpg" class="img-responsive" alt="/">

<div class="textbox">

<h4>Боевые искусства</h4>

</div>

</a>

</div>

<div class="col-md-4 gallery-grid gallery1">

<a href="images/g3.jpg" class="swipebox">

<img src="images/g3.jpg" class="img-responsive" alt="/">

<div class="textbox">

<h4>Боевые искусства</h4>

</div>

</a>

</div>

<div class="col-md-4 gallery-grid gallery1">

<a href="images/g4.jpg" class="swipebox">

<img src="images/g4.jpg" class="img-responsive" alt="/">

<div class="textbox">

<h4>Боевые искусства</h4>

</div>

</a>

</div>

<div class="col-md-4 gallery-grid gallery1">

<a href="images/g5.jpg" class="swipebox">

<img src="images/g5.jpg" class="img-responsive" alt="/">

<div class="textbox">

<h4>Боевые искусства</h4>

</div>

</a>

</div>

<div class="col-md-4 gallery-grid gallery1">

<a href="images/g6.jpg" class="swipebox">

<img src="images/g6.jpg" class="img-responsive" alt="/">

<div class="textbox">

<h4>Боевые искусства</h4>

</div>

</a>

</div>

<div class="col-md-4 gallery-grid gallery1">

<a href="images/g7.jpg" class="swipebox">

<img src="images/g7.jpg" class="img-responsive" alt="/">

<div class="textbox">

<h4>Боевые искусства</h4>

</div>

</a>

</div>

<div class="col-md-4 gallery-grid gallery1">

<a href="images/g8.jpg" class="swipebox">

<img src="images/g8.jpg" class="img-responsive" alt="/">

<div class="textbox">

<h4>Боевые искусства</h4>

</div>

</a>

</div>

<div class="col-md-4 gallery-grid gallery1">

<a href="images/g9.jpg" class="swipebox">

<img src="images/g9.jpg" class="img-responsive" alt="/">

<div class="textbox">

<h4>Боевые искусства</h4>

</div>

</a>

</div>

<div class="clearfix"> </div>

</div>

<script src="js/jquery.swipebox.min.js"></script>

<script type="text/javascript">

jQuery(function($) {

$(".swipebox").swipebox();

});

</script>

</div>

</div>

Изменение 5 блока меню:

Рисунок 15 Направление работы

<div class="news" id="news">

<div class="container">

<h3 class="title">Направление работы</h3>

<div class="col-md-6 news-grids">

<div class="news-grids-left">

<img src="images/img15.jpg" class="img-responsive" alt="/">

</div>

<div class="news-grids-right">

<h5>MMA</h5>

<p>Смешанные боевые искусства (также MMA - от англ. Mixed Martial Arts) - боевые искусства (часто неверно называемые "боями без правил"), представляющие собой сочетание множества техник, школ и направлений единоборств</p>

</div>

<div class="clearfix"> </div>

</div>

<div class="col-md-6 news-grids">

<div class="news-grids-left">

<img src="images/img16.jpg" class="img-responsive" alt="/">

</div>

<div class="news-grids-right">

<h5>Панкратион</h5>

<p>Панкратион древнее единоборство, в какой-то степени аналог современных боев без правил.

Существенная разница в том, что сегодня имеется определенный ряд правил, которые ограничивают бойцов.</p>

</div>

<div class="clearfix"> </div>

</div>

<div class="col-md-6 news-grids">

<div class="news-grids-left">

<img src="images/img17.jpg" class="img-responsive" alt="/">

</div>

<div class="news-grids-right">

<h5>Грэплинг</h5>

<p>Грэмпплинг - вид спортивного единоборства, совмещающего в себе технику всех борцовских дисциплин, с минимальными ограничениями по использованию болевых и удушающих приёмов.</p>

</div>

<div class="clearfix"> </div>

</div>

<div class="col-md-6 news-grids">

<div class="news-grids-left">

<img src="images/img18.jpg" class="img-responsive" alt="/">

</div>

<div class="news-grids-right">

<h5>Кикбоксинг</h5>

<p>Кикбоксинг (от англ. 'kick' - бить ногой и 'boxing' - бокс), вид спорта основанный на восточных единоборствах: каратэ, тхэквондо, муай-тай (тайский бокс). По правилам бой ведется полноконтактный, точнее: удары наносятся в голову и в корпус как руками, так и ногами в полную силу.</p>

</div>

<div class="clearfix"> </div>

</div>

<div class="clearfix"> </div>

</div>

</div>

Изменение 3 блока меню:

Рисунок 16 Почему мы ?

<div class="services" id="services">

<div class="container">

<h3 class="title">Почему мы ?</h3>

<div class="servc-grids">

<div class="col-md-6 servc-grid">

<div class="col-xs-3 servc-grid-left">

<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>

</div>

<div class="col-xs-9 servc-grid-right">

<h4>Большой выбор единоборств</h4>

<p></p>

</div>

<div class="clearfix"> </div>

</div>

<div class="col-md-6 servc-grid">

<div class="col-xs-3 servc-grid-left">

<span class="glyphicon glyphicon-time" aria-hidden="true"></span>

</div>

<div class="col-xs-9 servc-grid-right">

<h4>Удобное время тренировок</h4>

<p></p>

</div>

<div class="clearfix"> </div>

</div>

<div class="clearfix"> </div>

</div>

<div class="servc-grids">

<div class="col-md-6 servc-grid">

<div class="col-xs-3 servc-grid-left">

<span class="glyphicon glyphicon-certificate" aria-hidden="true"></span>

</div>

<div class="col-xs-9 servc-grid-right">

<h4>Возможность индивидуальных тренировок</h4>

<p></p>

</div>

<div class="clearfix"> </div>

</div>

<div class="col-md-6 servc-grid">

<div class="col-xs-3 servc-grid-left">

<span class="glyphicon glyphicon-globe" aria-hidden="true"></span>

</div>

<div class="col-xs-9 servc-grid-right">

<h4>Большое количество соревнований</h4>

<p></p>

</div>

<div class="clearfix"> </div>

</div>

<div class="clearfix"> </div>

</div>

<div class="servc-grids">

<div class="col-md-6 servc-grid">

<div class="col-xs-3 servc-grid-left">

<span class="glyphicon glyphicon-user" aria-hidden="true"></span>

</div>

<div class="col-xs-9 servc-grid-right">

<h4>Семинары и тренировки с чемпионами мира</h4>

<p></p>

</div>

<div class="clearfix"> </div>

</div>

<div class="col-md-6 servc-grid">

<div class="col-xs-3 servc-grid-left">

<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>

</div>

<div class="col-xs-9 servc-grid-right">

<h4>Адекватное донесение информации</h4>

<p></p>

</div>

<div class="clearfix"> </div>

</div>

<div class="clearfix"> </div>

</div>

</div>

</div>

Изменение блока сайта-визитки:

Рисунок 17 Отзывы

Изменение блока сайта-визитки:

Рисунок 18

Изменение 6 блока меню:



Рисунок 19 Как нас найти

Заключение

В результате проделанной работы был создан сайт-визитка клуба смешанных единоборств "Берсеркер", что включает сегменты: о нашем клубе, инструкторы, почему мы, галерея, направление работы, как нас найти. Так же был разработан логотип. Сайт был написан с помощью языка программирования HTML и таблиц каскадирования CSS.

Размещено на Allbest.ru

...