Файл: Разработка сайта кинотеатра «Дружба» (ГЛАВА 1. АНАЛИТИЧЕСКАЯ ЧАСТЬ).pdf

ВУЗ: Не указан

Категория: Курсовая работа

Дисциплина: Не указана

Добавлен: 30.06.2023

Просмотров: 106

Скачиваний: 3

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

2.2.Описание алгоритма

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

Шаблон страницы – это html-файл, в котором описана структура страницы, а также подключаются каскадные таблицы стилей.

Сайт имеет следующую структуру страниц, выполненных в едином дизайнерском стиле и связанных общим мен

Структура сайта

Рис. 2.1

На каждой странице сайта должны показываться кнопки: Главная, Расписание, Премьеры, Контакты, Обратная связь и О кинотеатре

Основные элементы сайта

Основные элементы – это элементы, которые повторяются на всех страницах и необходимы для полноценной работы сайта.

Шапка сайта

Шапка служит для навигации и поиска по сайту. В ней располагаются:

  • Главная. При клике по кнопке происходит переход на главную страницу сайта.
  • Расписание. При клике по кнопке происходит переход на страницу сайта с расписанием фильмов.
  • Премьеры. При клике по кнопке происходит переход на страницу сайта с премьерами фильмов.
  • Контакты. При клике по кнопке происходит переход на страницу сайта с контактной информацией и интерактивной Google-картой с отмеченным местоположением кинотеатра.
  • Обратная связь. При клике по кнопке происходит переход на страницу с формой обратной связи.
  • О кинотеатре. При клике по кнопке происходит переход на страницу сайта с информацией о кинотеатре.

Рис. 2.2

Подвал сайта

Подвал сайт служит для предоставления информации с социальными сетями кинотеатра. В нем располагаются кнопки:

  • Instagram. При клике по кнопке происходит переход на страницу кинотеатра в Instagram.
  • ВКонтакте. При клике по кнопке происходит переход на страницу кинотеатра в ВКонтакте.
  • Facebook. При клике по кнопке происходит переход на страницу кинотеатра в Facebook.
  • Эл.почта. При клике по кнопке происходит переход на страницу с формой обратной связи.


Рис. 2.3

Основные страницы

Основные страницы – это страницы со строгой структурой и типом контента. Их верстку нельзя изменить из админ-панели. Из админ-панели добавляется только контент.

Главная страница

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

2.3.Текст программы с описанием

Текст программы представляет собой запись программы на языках HTML, PHP, JS с обязательными комментариями, и в виде машинного листинга находится в Приложении.

Функциональное назначение

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

Описание структуры

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

Вызов и загрузка

Вызов программы осуществляется путем запуска файла Main.html из той директории в которой он находится.

Описание логической структуры

В состав страниц сайта входит файл stylin.css (стили каскадных таблиц), используемый для стилизации часто используемых элементов сайта, таких как списки меню, ссылки, тело сайта.

Фрагмент кода страницы показан ниже:

body {

background:#000 url('bg.jpg') no-repeat 50% 50px;

margin:0;

padding:0;

text-align:center;

}

/* главный контейнер */

#container {

background:#000;

width:760px;

margin:0 auto;

text-align:left;

}

/* контейнер с фотографией зала */

#header {

background:url('Cinema.jpg') no-repeat center top;

width:760px;

height:234px;

position:relative;

margin:10;

}

/* размеры меню */

#menu {

width:210px;

float:left;

margin:50px 0 0 0;

}

.leftbox {

width:185px;

background:#000;

border-width:7px 1px 7px 7px;

border-color:#555 #555 #555 #000;

border-style:solid;

margin:60px 0 0 0;

padding:10px 10px 10px 0;

text-align:justify;

font:14px verdana,arial,sans-serif;

color:#fff;

}

.leftbox ul {

list-style-type:none;

margin:10px 0 10px 0;

padding:0;

}

.leftbox li, .leftbox a {

font-weight:bold;

color:#99cc33;

letter-spacing:0px;

text-align:left;

text-decoration:none;

}.leftbox a:hover {color:#ccff66}

h4 {

font:bold 15px verdana,arial,sans-serif;

color:#fff;

display:block;

margin:0 0 15px 0;

letter-spacing:1px;

text-align:center;

}

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


Рис. 2.4

Переход с этой страницы на другие осуществляется с помощью гиперссылок.

Фрагмент кода страницы показан ниже:

<body>

<div id="container">

<div id="header">

<h1>Дружба 21 век</h1>

</div>

<div id="menu">

<a class="item" href="main.html">Главная</a>

<a class="item" href="schedule.html">Расписание</a>

<a class="item" href="poster.html">Премьеры</a>

<a class="item" href="contacts.html">Контакты</a>

<a class="item" href="page3.html">Обратная связь</a>

<a class="item" href="about.html">О кинотеатре</a>

</div>

Страница Расписание включает в себя список фильмов. Нажимая на иконку с фильмом, открывается страничка с более подробным описанием фильма и сеансами на него. Детальная страница отображена на рисунке 2.5.

Рис. 2.5

Фрагмент кода страницы показан ниже:

<h4 class="hh" >Отпетые мошенницы</h4>

<a href="otpm.html"> <img class="img" src="123.jpg" align="left"></a>

<p align="justify"><small> Как стать успешной мошенницей? Всегда будь во всеоружии: высокие каблуки, яркая помада и главное — утягивающее белье. Будь готова расплакаться в любой момент. Бери все, что «плохо лежит» и хорошо блестит. За каждым миллионом может скрываться миллиард. Не откажи себе в удовольствии проверить.</p>

Год выпуска : 2019

<br>Страна: США

<br>Жанр : комедия

</small>

Ниже, на рисунке 2.6 представлена страница фильма «В метре друг от друга». На данной странице отображена полная информация о фильме, а также время сеансов, если нажать на картинку с фильмом, то он перейдёт по ссылке в YouTube на трейлер фильма.

Рис. 2.6

Фрагмент кода страницы показан ниже:

<h2>В метре друг от друга</h2>

<br>

<a href="https://www.youtube.com/watch?v=nTTDlN-jVug"><img class="img" src="1 metr.jpg" align="left"></a>

<small>

<br>Год выпуска : 2019

<br>Страна: США

<br>Жанр: драма, мелодрама

<br>Продолжительность : 1 час 56 минут

<br>В главных ролях : <a href="https://www.kinopoisk.ru/name/2859420/">Хейли Лу Ричардсон</a>, <a href="https://www.kinopoisk.ru/name/252/">Коул Спроус</a>.

<br>Возрастное ограничение : 14+


<p><button class="button" >11:30</button> <button class="button" >12:20</button> <button class="button" >13:40</button> <button class="button" >15:45</button></p>

<p><button class="button" >17:30</button> <button class="button" >20:20</button> <button class="button" >21:40</button> <button class="button" >22:45</button></p>

<br>

<p align="justify"> Пространство, в котором они существуют, диктует жестокое условие — влюбленные должны находиться не ближе метра друг от друга, им недоступно даже прикосновение. Но истинная любовь не знает границ, и чем сильнее чувства, тем больше соблазн нарушить правила…

</p>

</small>

<br>

<h4>Кадры из фильма</h4>

<img src="1 metr1.jpg" alt="Фотография 1" width="149" height="140">

<img src="1 metr2.jpg" alt="Фотография 2" width="149" height="140">

<img src="1 metr3.jpg" alt="Фотография 3" width="149" height="140">

</div>

</div>

На странице Премьеры выводится список фильмов, которые будут идти в ближайшее время. На страничке премьер указаны: год выпуска, страна и жанр. Страница с фильмом отображена на рисунке 2.7.

Рис. 2.7

Фрагмент кода страницы показан ниже:

<h4 class="hh">Люди Икс: Тёмный Феникс</h4>

<a href="people x.html"> <img class="img" src="people x.jpg" align="left"></a>

<p align="justify"><small>Джин Грей обретает невероятные суперспособности, которые меняют её и превращают в Темного Феникса. Теперь Людям Икс придется решить, что важнее для них — жизнь члена команды или всех людей, живущих в мире.</p>

<br>Год выпуска : 2019

<br>Страна: США

<br>Жанр : фантастика

</small>

На странице фильма «Солнце тоже звезда» отображена полная информация о фильме, если нажать на картинку с фильмом, то он перейдёт по ссылке в YouTube на трейлер фильма. Страница с фильмом отображена на рисунке 2.8.

Рис. 2.8

Фрагмент кода страницы показан ниже:

<h2>Солнце тоже звезда</h2>

<br>

<ahref="https://www.youtube.com/watch?v=5YUkYyKJROg"><img class="img" src="star.jpg" align="left"></a>

<small>

<br>Год выпуска : 2019

<br>Страна: США

<br>Жанр: драма, мелодрама

<br>Продолжительность : 1 час 40 минут

<br>В главных ролях : <a href="https://www.kino-teatr.ru/kino/acter/w/hollywood/279176/works/">Яра Шахиди</a>, <a href="https://www.kinopoisk.ru/name/2319036/">Чхве Джек</a>.

<br>Возрастное ограничение : 12+

<br>

<p align="justify">Юная иммигрантка из Ямайки Наташа Кингсли узнает, что через 24 часа ее вместе с семьей принудительно вышлют из Америки. Рассудительная и стойкая девушка ищет способ избежать депортации. Однако, несмотря на весь свой прагматизм и царящие расовые предрассудки, Наташа в самый неподходящий момент влюбляется в романтичного корейца Даниэля.


</small></p>

<h4>Кадры из фильма</h4>

<img src="star1.jpg" alt="Фотография 1" width="145" height="140">

<img src="star2.jpg" alt="Фотография 2" width="145" height="140">

<img src="star3.jpg" alt="Фотография 3" width="145" height="140">

Страница Контакты содержит всю контактную информацию о кинотеатре.

Рис. 2.9

Фрагмент кода страницы показан ниже:

<h3>Контактная информация</h3>

<hr align="left" width="455" size="3" color="DarkRed">

<br>

<big>ЗАО "Кинотеатр Дружба XXI век"</big>

<p><big> Телефон : 8 (867) 253-24-64</big></p>

<h3>Режим работы </h3>

<hr align="left" width="455" size="3" color="DarkRed">

<p><big>Пн-Вс 11:00-23:00</big></p>

<h3>Мы находимся по адресу : </h3>

<hr align="left" width="455" size="3" color="DarkRed">

<p><big>362025, ул. Ватутина, 51а, Владикавказ, Респ. Северная Осетия-Алания</big></p>

<br>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2916.4275361592004!2d44.68740471530777!3d43.03243530036656!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40500a843054dce1%3A0x795cdd77ceaf0e44!2z0YPQuy4g0JLQsNGC0YPRgtC40L3QsCwgNTHQsCwg0JLQu9Cw0LTQuNC60LDQstC60LDQtywg0KDQtdGB0L8uINCh0LXQstC10YDQvdCw0Y8g0J7RgdC10YLQuNGPLdCQ0LvQsNC90LjRjywg0KDQvtGB0YHQuNGPLCAzNjIwMjU!5e0!3m2!1sru!2sus!4v1558104004867!5m2!1sru!2sus"width="450" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>

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

Рис. 2.10

Фрагмент кода страницы показан ниже:

Напишите пару слов о нашем кинотеатре.</h3>

</div>

</div>

</div>

<div class="container">

<div class="row justify-content-center">

<div class="media-container-column col-lg-8" data-form-type="formoid">

<!---Formbuilder Form--->

<form action="https://mobirise.com/" method="POST" class="mbr-form form-with-styler" data-form-title="Mobirise Form"><input type="hidden" name="email"data-form-email="true" value="vzB+f7RQ/TfYG6AEyrEQpbhwz+WYUvEGGiUiQzIXBrYrtXo53vX4VDPK7wRNE0YG0IKDqKd3DyiaDLD7NBBRWast8n1Owx3a17wmUj6a1IYcF7ISF6GY9bPNWW0Ijndm">

<div class="row">

<div hidden="hidden" data-form-alert="" class="alert alert-success col-12">Спасибо за ваш отзыв!</div>

<div hidden="hidden" data-form-alert-danger="" class="alert alert-danger col-12">

</div>

</div>

Страница О кинотеатре содержит информацию об услугах, предоставляемых кинотеатром, об обеспечении кинотеатра современным оборудованием.

Рис. 2.11

Фрагмент кода страницы показан ниже:

<h2>О кинотеатре</h2>

<hr align="left" width="455" size="3" color="DarkRed">

<br>

<img src="kino.jpg" class="left" align="right" alt="photo" width="340" height="200">

<font size="2">Кинотеатр оборудован в соотве тствии с высокими техническими требова ниями. Широко форматные экраны, звуковые сис - темы после днего поко ления, возмо жность просмотра фильмов в 3D формате и, не менее важно, удобные кресла – все условия для приятного просмотра долгожданных кинопремьер. Афиша кинотеатра Дружба обновляется регулярно и включает фильмы абсолютно разных жанров. В кинотеатре Дружба зрители могут посмотреть все новинки мирового и отечественного кинематографа: комедии, триллеры, драмы, мелодрамы, популярные мультфильмы и многое другое.</font>