Преподаватель который помогает студентам и школьникам в учёбе.

Разработка сайта кинотеатра «Дружба» (Цель разработки)

Содержание:

ВВЕДЕНИЕ

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

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

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

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

Интернет позволяет открыть новый канал продажи услуг, увеличить конкурентоспособность, расширить рынок сбыта, снизить издержки и увеличить прибыльность. Необходимость систем управления для владельцев сайтов начала проявляться в тот момент, когда количество материалов на веб-сайтах начало стремительно расти. Это привело к тому, что традиционные «ручные» технологии разработки и поддержки сайтов, когда сайт состоял из статических страниц и набора дополнительных специализированных скриптов, стали не успевать за быстро меняющимися условиями бизнеса. В то же время, современные технологии обучения требуют использования Интернет-технологий. Например, создания развлекательных ресурсов, доступ к которым возможен из компьютерных сетей.

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

Организации, имеющие сайт, вызывают больше доверия у людей. Пользователи любят быстро и просто получать необходимую им информацию. На сегодняшний день сайт имеется у большинства организаций. А те, у кого его нет задумываются о его создании. Услуги по созданию сайтов предоставляют как крупные организации, так и индивидуальные Web-разработчики.

К кинотеатрам вновь возвращается былая популярность, ведь современные технологии позволяют зрителю буквально «влиться» в происходящее на экране, самому стать участником событий кинофильма. К выбору кинотеатра посетитель подходит очень ответственно, ведь низкий уровень обслуживания или качества фильма может сильно испортить удовольствие от киносеанса. Как же привлечь посетителей именно в Ваш кинотеатр? В этом поможет создание сайта кинотеатра. Информацию о кинотеатрах все чаще люди ищут с помощью интернета. Узнать, какие фильмы находятся в прокате, сколько стоят билеты, когда показывают тот или иной фильм, узнать адреса специально оборудованных кинотеатров (IMAX, 3D) – это и многое другое интересует многомиллионную армию пользователей интернета.

Сайт кинотеатра – это его представительство в глобальной сети и его пропускной билет в интернет-сообщество киноманов. Чем больше разнообразной полезной информации и сервисов предоставит сайт кинотеатра своим посетителям, тем выше вероятность, что эти посетители станут постоянными клиентами кинотеатра.

В соответствии с вышеизложенным, мною была выбрана тема дипломной работы «Разработка web-сайта «Кинозал Дружба».

ГЛАВА 1. АНАЛИТИЧЕСКАЯ ЧАСТЬ

1.1 Цель разработки

Целью данной дипломной работы является разработка web-сайта «Кинозал Дружба». Результатом работы является полностью созданный сайт.

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

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

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

Разработка чернового прототипа будущего сайта.
Разработка структуры сайта.
Разработка дизайна.
Верстка шаблонов сайта.
Тестирование работоспособности сайта.

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

1.2 Обзор средств программирования

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

При разработке web-сайта нельзя обойтись без html-документа.

Html-документ – это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот), так и в специализированном (html-редактор), с подсветкой кода (sublime text 2/3, Visual Studio Code и т.п.). Html-документ имеет расширение .html.

Html-редакторы могут быть двух различных категорий: визуальные редакторы html (WYSIWYG-редакторы) и не визуальные редакторы html. Минус визуальных редакторов в том, что они генерируют код для корректного отображения программными методами, что плохо сказывается на дальнейшем поддерживании кода и читаемости его для других разработчиков. Поэтому я использовал не визуальный редактор. Для разработки верстки не требуется компиляторов и отладчиков, поэтому код можно писать в любом текстовом редакторе, который поддерживает форматы html, css. В моем случае был использован текстовый редактор SublimeText 3, который присутствует на всех самых распространенных операционных системах. Проверка кода производилась в распространенных на данный момент веб-браузерах: Google chrome, Yandex browser, Firefox, Safari, Microsoft edge.

Sublime text 3

В качестве редактора кода использовался sublime text 3 - это бесплатный редактор кода с практически неограниченными возможностями. Функционал можно расширять при помощи различных плагинов. Также он является кроссплатформенным и поддерживается всеми популярными системами. Имеет подсветку синтаксиса популярных языков программирования и языков разметки.

Некоторые возможности:

Быстрая навигация (Goto Anything)
Командная палитра (Command Palette)
API плагинов а Python
Одновременное редактирование (Split Editing)
Высокая степень настраиваемости (Customize Anything)
Поддержка систем сборки

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

Заготовки (сниппеты):

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

Переход по файлам:

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

Другие особенности:

Дополнительно реализована функция автосохранения, помогающая пользователям не потерять проделанную работу.
Настраиваемые комбинации клавиш и инструмент навигации позволяют назначать свои комбинации клавиш для меню и панелей инструментов (только для первой версии, во второй и третьей – Command Palette).
Возможность поиска по мере набора используется для поиска в документе.
Функция проверки синтаксиса работает подобным же образом, проверяя корректность прямо во время ввода.
Есть возможность автоматизации с помощью макросов и повтора последних действий.
Команды редактирования, включая редактирование отступов, переформатирование параграфов и объединение строк.

1.3 Описание языка программирования

Для создания сайта был использован язык гипертекстовой разметки html. Он служит для создания каркаса веб-страницы.

HTML (Hyper Text Markup Language – «язык гипертекстовой разметки») используется для форматирования (разметки) страниц, которые мы видим на экране браузера.

В html часто используется термин «тэги». Тэги – это метки, которые используются для указания браузеру, как он должен показывать web-сайт. Все тэги имеют одинаковый формат: они начинаются знаком "<" и заканчиваются знаком ">". Обычно имеются два тэга – открывающий: <html> и закрывающий: </html>. Различие в том, что в закрывающем имеется слэш "/". Всё содержимое, помещённое между открывающим и закрывающим тэгами, является содержимым тэга. Но из каждого правила есть исключения, и в html также имеются тэги, которые являются и открывающими, и закрывающими. Эти тэги не содержат текста, а являются метками, например, перенос строки выглядит так: <br >.

Элементы языка гипертекстовой разметки HTML

Html-страница – это обычный текстовый файл имеющий расширение html. Для создания html-страницы не требуется никаких специальных программ. Подойдет любой текстовый редактор умеющий сохранять файлы в обычном текстовом формате. Я использовала Sublime text 3.

Рассмотрим тэги и параметры тэгов языка html:

<html> </html> – объясняет браузеру, что она начинает читать информацию на языке кода HTML. В него входят все теги веб страницы.

<head> </head> – голова документа. Тэг показывает, что между открывающей и закрывающей частью находится информация о странице. Также в этой области подключаются стили, указываются meta теги.

<title> </title> – тэг даёт название документу, которое будет располагаться в верхней строке браузера. Этот раздел размещается между тегами <head> </head>. Поисковая машина выдает заголовок поисковым машинам.

<body> </body> – указывает начало и конец основной части документа. Именно тело документа выставляется в окне обозревателя. Внутри этого тэга часто пишут параметры, чтобы определить цвет фона, цвет шрифта по умолчанию, фоновые обои, некоторые другие параметры.

Параметры bgcolor, background и text – эти параметры добавляют к тэгу <body>. Параметры bgcolor и background определяют цвет фона. В первом случае цвет задаётся шестью цифрами из шестнадцатеричной системы, которые определяют RGB цвета для экрана монитора (некоторые цвета можно задать английскими словами). Во втором случае прописывается путь к заранее созданному фону. Параметр text определяет цвет шрифта.

Тэги заголовков от <h1> до <h6>. Задают один их шести уровней заголовка. <h1></h1> – самый большой шрифт, <h6></h6> – самый маленький. Заголовки предназначены для выделения небольшой части текста.

<font> </font> – тэг шрифта. В данном теге задается типа шрифта, начертание, размер.

Параметры size, face, color – эти параметры содержатся в тэге font. Для того чтобы выделить большой фрагмент текста или одно слово используют параметр size. В отличие от заголовков (<hn> </hn>) текст не выделяется жирным шрифтом. Стандартный размер по умолчанию +0 (size= «+0»). С помощью атрибута face задаётся шрифт текста. Таким образом, можно задать любой шрифт который понравился. Всё же лучше задавать стандартные шрифты, так как у посетителя сайта может не оказаться какого-нибудь эксклюзивного шрифта. Цвет шрифта указывается шестнадцатеричным кодом или английским словом с помощью параметра color.

<b> </b>, <i> </i>, <u> </u> – тэги полужирного, наклонного и подчёркнутого текстов. Тэги названы соответственно от слов bold, italic, underline.

<strong> </strong> – так же как и тэг <b></b> показывает текст жирным. Но в отличие от последнего заставляет программы для чтения с экрана (например, для слепых) читать слово громче, с нажимом.

<br> – тэг разрыва строки. Заканчивает текущую строку и начинает оставшийся текст с новой строки ниже. Строки располагаются вплотную друг под другом. В отличие от большинства тэгов не имеет закрывающегося тэга.

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

<div> </div> – Используется для логического выделения блока HTML-документа. В современном сайтостроении используется как удобный контейнер для объектов страницы, которым легко динамически манипулировать – перемещать, регулировать отступы и т.п. Находящиеся между начальным и конечным тегами текст или HTML-элементы по умолчанию оформляются как отдельный параграф.

Параметр align – предназначен для центрирования текста. Используется в тэгах <p> </p>, <font></font> , <div> </div> и т.д. Может иметь значения: center (выравнивание по центру), left (выравнивание по левому краю), right (выравнивание по правому краю) и justify (выравнивание по ширине). Необходимо учесть, что последнее значение не работает в старых версиях браузеров.

<hr> – одиночный тэг, который вставляет в документ горизонтальную линию. Параметры тэга: align, size, width (длина линии), color, noshade (определяет способ закраски линии как сплошной. Атрибут не требует указания значения. Без данного атрибута линия отображается объемной).

<a> </a> – тэг создания гиперссылок. С помощью ссылки можно перейти от одного фрагмента текста, к другому; от одной страницы, к другой. Ссылкой может быть, как текст, так и картинка. Этот тэг применяют с параметрами href или name. В тэге надо указать путь к файлу от данного файла или полный адрес URL. Иногда бывает нужно сделать ссылку не на другой документ, а внутри того же документа – закладку, которую ещё называют якорем. Создаётся такая закладка с помощью атрибута name. Текст, куда необходимо сослаться нужно сделать закладкой: <a name= “text”>Фрагмент текста</a>. Тогда ссылка к этому фрагменту текста прописывается так: <a href= “#text”> Сошлёмся на фрагмент текста</a>. Ссылаться так же можно на свой почтовый адрес. Выглядеть это будет так: <a href="mailto:pochta@mail.ru"> Написать мне </a>. В этом тэге используются так же параметры: link (цвет ссылки), alink (цвет активной ссылки), vlink (цвет уже посещенной ссылки).

<img src> – тэг размещения изображения. В этом тэге нужно прописать путь к картинке:<img src= “Путь к картинке”>. Этот тэг может содержать большое количество разнообразных параметров. Параметры width и height определяют ширину и высоту картинки. Параметр border указывает, какой толщины должна быть граница вокруг картинки. С помощью параметра alt задаётся описание картинки. В этом тэге, как и во многих других используется параметр align, для выравнивания картинки. Параметр vspace – задаёт расстояние между текстом и рисунком по вертикали. Расстояние задаётся в пикселях. Параметр hspace – задаёт расстояние между текстом и рисунком по горизонтали. Тоже в пикселях.

<table> </table> – тэги создания таблицы. Таблица состоит из строк и столбцов, поэтому, надо указать ещё и их с помощью тэгов <tr></tr> и <td></td>. Сначала задаются строки, а потом в каждой строке столбцы. Фон таблицы можно задать с помощью атрибута bgcolor. Фон можно задать для таблицы в целом, для ряда, для столбца (в пределе одного ряда). Параметры width и height используются здесь для того, чтобы задать ширину и высоту либо для всей таблицы, либо для одного ряда или столбца. Расположение содержимого ячеек задаётся с помощью атрибута valing. Этот атрибут может иметь следующие значения: middle (содержимое будет находиться в середине ячейки), top (содержимое будет находиться наверху), bottom (содержимое будет находиться внизу). Для таблиц так же существуют параметры colspan и rowspan. Colspan – определяет количество столбцов, на которые простирается данная ячейка, а rowspan – количество рядов. С помощью атрибута cellspacing можно либо избавиться от расстояния между ячейками (если он равен нулю), либо увеличить пространство между ними. Рамка для таблицы задаётся с помощью атрибута border.

<li> </li> – с помощью этого тэга задаются списки. У тэга <li> есть параметр type. Если параметру задать значение disk, то список будет прописан с помощью закрашенных кружочков. При значении circle, кружочки не будут закрашиваться. А если задать значение square, то вместо кружочков, буду квадратики. В списках используют так же тэг <ul> </ul>. С помощь него текст будет сдвигаться вправо. Чтобы отступ был больше надо вкладывать тэг <ul> в самого себя. Тэг <ol> </ol> создаёт упорядоченный список. Между начальным и конечным тегами должны присутствовать один или несколько элементов LI , обозначающих отдельные пункты списка. Атрибут start определяет первое число, с которого начинается нумерация пунктов. Type – определяет стиль нумерации пунктов. Может иметь значения:

"A" – заглавные буквы A, B, C ...

"a" – строчные буквы a, b, c ...

"I" – большие римские числа I, II, III ...

"i" – маленькие римские числа i, ii, iii ...

"1" – арабские числа 1, 2, 3 ...

<frameset> </frameset> – создаёт фрейм-документ. Фреймы (frames) используются для разбивки окна браузера на несколько областей, каждая из которых представляет собой отдельный html-документ (фрейм). Как правило, фреймы используются для облегчения навигации по сайту, создания навигационного меню. Тем не менее, большинство разработчиков избегают использования фреймов: обозреватели испытывают сложности при печати фреймовых документов; роботы поисковых систем не знают, какие составляющие фреймовых документов нужно включать в результаты поиска Фрейм создаётся вместо тела документа, т.е. элемент <body> в документе не используется. Тэг <frame> прописывается, чтобы сообщить браузеру какие документы и в каком ряду будут. Для создания фреймов используют параметр row, который определяет количество и размеры горизонтальных фреймов в окне браузера. В качестве значения задается список размеров фреймов через запятую. Параметр cols – определяет количество и размеры вертикальных фреймов в окне браузера. Размеры задаются так же, как и в предыдущем атрибуте rows. Параметр border используется здесь для определения ширины рамок фреймов в пикселях. Данный атрибут действует только в браузерах Netscape. Frameborder – определяет наличие рамок у содержащихся внутри frameset фреймов. Scrolling – параметр тэга <frame>. Он может принимать несколько значений: no – это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes – это значит полоса прокрутки будет всегда; auto – полоса прокрутки появиться только тогда, когда она нужна. Marginheight определяет ширину (в пикселах) верхнего и нижнего полей фрейма, а marginwidth определяет ширину левого и правого полей фрэйма.

<form> </form> – используется для создания заполняемой формы. Внутри элемента form разрешается использовать большинство html-элементов. Атрибут name определяет имя формы. Action – обязательный атрибут. Определяет URL, по которому будет отправлено содержимое формы.

<input> – является элементом формы. Предназначен для ввода данных с веб-страницы. Имеет несколько типов, которые отвечают за внешний вид поля и тип вводимой информации.

Таблицы стилей CSS

Стили – это набор параметров, задающие внешнее представление некоторого объекта в той или иной среде.

CSS – это сокращение от Cascading Style Sheets– в переводе Каскадные таблицы стилей. CSS это язык стилей, определяющий отображение html-документов. Например, CSS работает со шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами. Html может (неправильно) использоваться для оформления web-сайтов. Но CSS предоставляет большие возможности и более точен и проработан. CSS, на сегодняшний день, поддерживается всеми браузерами (программами просмотра).

Основные преимущества CSS:

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

Синтаксис и принцип работы CSS:

В CSS в отличие от HTML нет ни элементов, ни атрибутов, ни тегов. Основной структурной единицей здесь является правило, которое определяет, как будет выглядеть тот или иной элемент в документе.

Правило имеет следующую структуру:

Как видно из рисунка, сначала записывается так называемый селектор, показывающий к какому html-тегу (тегам) применяется то или иное свойство. Далее, непосредственно за селектором, пишется блок объявления стилей, который обязательно заключается в фигурные скобки. Каждое объявление в свою очередь состоит из свойства и его значения. После свойства ставится двоеточие. Правило может содержать в себе несколько объявлений. В таком случае они должны быть отделены друг от друга точкой с запятой.

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

Цвет и фон в CSS

Основными свойствами цвета и фона в CSS являются:

color –цвет элементов
background-color - цвет фона
background-image - повторяющееся фоновое изображение.
background-repeat - порядок повторения фонового изображения
background-position - расположение фонового изображения

Свойство COLOR

Задает основной цвет (цвет переднего плана) того или иного элемента.

Свойство BACKGROUND-COLOR

Задает фоновый цвет элемента. В отличие от html, в котором фоновый цвет можно использовать только для страницы или ячейки таблицы (т.е. имеющих атрибут bgcolor) в CSS, фоновый цвет можно задавать для чего угодно: для таблиц, заголовков, параграфов, ссылок и др. Тут главное правильно определить, что нам нужно.

Свойство BACKGROUND

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

background-color_background-image_background-repeat_background-attachment _background-position

Т.е. просто записывается пять значений свойств через пробел.

Шрифты в CSS

За шрифты в CSS отвечают следующие свойства:

font-family – семейство шрифтов
font-style – стиль шрифта (normal, italic, oblique)
font-weight – толщина (normal, bold)
font-size – размер шрифта в пикселях

Текст в CSS

Свойства CSS отвечающие за форматирование текста.

text-align – выравнивание текста (left,right, сenter, justify)
text-decoration – оформление текста (none, underline, overline, line-through)
text-indent – красная строка
text-transform – меняет регистр слов (capitalize, uppercase, lowercase, none)
letter-spacing – расстояние между буквами в пикселях
word-spacing– расстояние между словами в пикселях

Ссылки в CSS

В CSS можно описать 4 вида ссылок:

A:link {... стиль оформления обычной ссылки...}
A:active {... стиль оформления ссылки в момент нажатия...}
A:visited {... стиль оформления посещенной ссылки...}
А:hover {... стиль оформления ссылки, на которую наведен указатель мыши...}

ГЛАВА 2. ПРАКТИЧЕСКАЯ ЧАСТЬ

2.1 Постановка задачи

Разработать web-сайт «Кинозал Дружба». Сайт должен представлять набор связанных между собой веб-страниц. На страницах должны быть размещены элементы интерфейса, позволяющие использовать современные методы размещения информации в Интернете. Элементы интерфейса должны быть понятны в использовании и концентрировать внимание пользователя на информации, а не на ее оформлении.

Сайт должен соответствовать следующим параметрам:

Современный дизайн. Цветовая гамма, градиентные заливки, четко читаемый шрифт, фон сайта и отдельных блоков, составная разметка. Страницы должны соответствовать современным представлениям о красоте сайта и следовать тенденциям сайтостроения последних лет. В частности, для этого должен быть использовать адаптивный дизайн, модульная структура представления информации. Модули должны содержать разделы, которые индексируются популярными поисковыми системами Yandex и Google. Страницы должны быть не перегружены обилием информации. Графические элементы должны обладать свойствами интерактивности, не приводящими к избыточному количеству перезагрузок страницы.
Основное генерируемое меню. Основное меню должно содержать ссылки на страницы, либо являться группой для нескольких страниц.
Поддержка HTML 5 и CSS 3. Код сайта должен поддерживать использование функций и команд последних версий языков HTMLи CSS. В частности,HTML5 CSS 3. Также верстка страниц не должна содержать ошибок валидации, это плохо сказывается на поисковую выдачу сайта.
Адаптивный дизайн. Верстка сайта должна быть адаптивной под самые популярные разрешения экранов. Функциональность сайта не должна зависеть от разрешения экрана.
Поддержка ОС. Сайт должен одинаково стабильно и без изменения внешнего вида (потери функциональности, цветов, шрифтов) работать на устройствах под управлением наиболее распространенных операционных систем. В частности, Windows, Windows Mobile, iOs, Androud.
Совместимость с браузерами. Сайт должен быть протестирован на совместимость с наиболее распространенными современными браузерами. А именно, Internet Explorer, Firefox, Opera, Safari, Chrome.

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>

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

</div>

<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>

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

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

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

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

</small>

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

Рис. 2.6

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

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

<br>

<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+

<br>

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

</p>

</small>

<br>

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

</div>

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

Рис. 2.7

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

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

<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>

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

Рис. 2.9

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

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

<br>

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

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

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

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

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

<br>

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

Рис. 2.10

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

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

</div>

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

</div>

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

Рис. 2.11

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

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

<br>

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

<p align="justify"><font size="2">Современные кинозалы создают комфо ртную атмос феру как для детей, так и для взрослых. Система звука Dolby Digital Surround EX делает звук глубоким и насыщенным. Серебряный экран с алюми ниевым опыле нием делает фильм ярким и реалистичным. Использование технологии пассивной 3D поляризации делает изображение объемным и качественным. RealD XL Cinema System – технология кинопоказа, предназначенная специально для киноэкранов больших размеров.</font></p>

</div>

Описание процесса отладки программы. Руководство пользователя

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

Комплексное решение задач по разработке сайта – гарантия его безупречности с точки зрения актуальности и технического совершенства.

Проверка сайта на его соответствие техническому заданию включает в себя:

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

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

Для создания адаптивной версии сайта была использована сетка bootstrap. Данный инструмент включает в себя основные стили для адаптации сайтов. Разработчику остается создавать стили только для компонентов, которые не входят в состав фреймворка.

Системные требования

Для полноценного использования сайта подойдет любой браузер не ниже Internet Explorer 8. Ниже приведены минимальные требования к компьютеру.

Операционная система	Windows XP с пакетом обновления 2 или более поздней версии Windows Vista Windows 7 Windows 8 Windows 10
Процессор	Intel Pentium 4 или более поздней версии
Свободное место на диске	350 МБ
Оперативная память	512 МБ

Руководство пользователя

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

Оценка результатов решения задачи

При постановке задачи к сайту были предъявлены следующие требования: сайт должен быть доступен через интернет, иметь современный дизайн, общую типографику для всех страниц, поддерживать HTML5, CSS 3 и Bootstrap и одинаково отображаться во всех наиболее распространенных браузерах. Проверялась правильность работы всех ссылок. Все допущенные ошибки были исправлены.

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

Сайт создан. Требования, предъявленные к нему, выполнены в полном объеме на современном технологическом уровне.

ЗАКЛЮЧЕНИЕ

В ходе выполнения дипломной работы получен полнофункциональный web-сайт, полностью готовый к применению. С его помощью пользователи смогут получать необходимую информацию и задавать интересующие их вопросы. При разработке web-сайта были проанализированы современные web-технологии, позволяющие создавать интерактивные web-страницы. Был выполнен ряд задач, в частности дано описание предметной области, разработан сайт с использованием HTML, CSS и JavaScript, с удобным и простым интерфейсом и заполнен информацией.

В ходе работы использовались такие программные продукты как Sublimetext 3, веб-браузер google chrome, операционная система Windows 10.

Выбранный стек технологий позволил упростить разработку сайта и дальнейшее внедрение новых модулей. Был разработан простой и удобный дизайн сайта. Также была реализована полная адаптация под различные разрешения экранов, что позволяет удержать большее количество посетителей, дав возможность полноценно использовать сайт с различных устройств.

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

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

Громов Ю.Ю., Земской Н.А., Иванова О.Г., Лагутин А.В. Основы Web-инжиниринга. В 2 ч. Ч. 1: Учебное пособие. – Тамбов: Издательство ТГТУ, 2017
Документация Sublime text 3 – https://www.sublimetext.com/docs/3/
Дунаев В.В. HTML, скрипты и стили. – Питер, 2015. – 816 c.
Кузнецов, М.В. РНР 5. Практика разработчика Web-сайтов /М.В. Кузнецов, И.В. Симдянов, С.В. Голышев. – СПб.: БХВ-Петербург, 2017
Онлайн справочник по HTML – http://htmlbook.ru
Пауэлл Т. WEB-дизайн. – СПб.: Питер, 2016
Руководство по PHP – http://php.net/manual/ru/index.php/
Свободная энциклопедия Wikipedia – https://ru.wikipedia.org/.
Современный учебник Javascript – https HYPERLINK "https://learn.javascript.ru/":// HYPERLINK "https://learn.javascript.ru/"learn HYPERLINK "https://learn.javascript.ru/". HYPERLINK "https://learn.javascript.ru/"javascript HYPERLINK "https://learn.javascript.ru/". HYPERLINK "https://learn.javascript.ru/"ru
Храмцов П.Б. , Брик С.А. , Русак А.М. , Сурин А.И. Основы web-технологий, БИНОМ. Лаборатория знаний, Интернет-университет информационных технологий – ИНТУИТ.ру, 2017

ПРИЛОЖЕНИЯ

Файл 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;

}

h5 {

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

color:#fff;

display:block;

margin:0 0 15px 0;

letter-spacing:1px;

text-align:left;

}

/* расположение меню */

a.item {

background:url('menu.jpg') no-repeat;

max-width:210px;

height:34px;

display:block;

padding:0 0 0 10px;

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

color:#fff;

text-decoration:none;

line-height:30px;

}

a.item:hover {

background-position:10px -34px;

padding:0 0 0 20px;

}

/* шрифт у главного контейнера */

#main {

background:#000;

min-height:400px;

margin:0 0 0 220px;

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

color:#fff;

text-align:left;

}

/* расположение нижнего контейнера*/

#footer {

clear:both;

height:150px;

width: 600px;

background:black;

margin:0 0 0 0;

text-align:center;

padding:20px 0 10px 0;

}

/* шрифт контейнера */

#footer a {

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

color:#ccc;

text-decoration:none;

letter-spacing:0px;

margin-left:20px;

}

#footer a:hover {color:#ccff66}

.bottomRight {background:url('bottomRight.jpg') no-repeat right bottom}

/* расположение контейнера content */

.content {

min-height:190px;

background:url('topleft.jpg') no-repeat left top;

padding:30px 40px;

margin:20px 0 30px 0;

text-align:auto;

}

h1 {

position:absolute;

left:20px;

bottom:20px;

margin:0;

display:inline;

font:60px georgia,times,serif;

color:#fff;

letter-spacing:10px;

font-variant:small-caps;

}

h2 {

font:bold italic 35px Times, Times New Roman, serif;

color:#fff;

display:block;

margin:0px 0px 0px 0px;

}

h3 {

font:bold italic 25px Times, Times New Roman, serif;

color:white;

display:block;

margin:15px 0 0 0;

}

h4 {

font:bold italic 25px Times, Times New Roman, serif;

color:white;

display:block;

margin:5px 40px 20px 15px;

text-align: left;

}

/* шрифт контейнера cotent */

.content a {

text-decoration:none;

color:#99cc33;

font-weight:bold;

}

.content a:hover {color:#ccff66}

.content ul {list-style-type:circle}

.content li {font:bold 16px verdana,arial,sans-serif;}

p {margin-top:20px}

#footer p , #footer p a {

text-align:right;

font:11px verdana,arial;

color:#999;

margin:0;

}

.img {

height: 250px;

width: 175px;

margin: 10px 10px 10px 10px;

}

.img1 {

height: 250px;

width: 350px;

}

.button {

background-color: LightGray;

font-size: 18px;

border-radius:15px;

border-size:20px;

}

.iimg {

width: 400px;

height: 230px;

}

table {

text-align: left;

}

.right {

float: left;

margin: 0px 2px 2px 0px;

padding: 5px;

}

.left{

float: right;

margin: 0px 5px 0px 0px;

padding: 4px;

}

Файл about.html

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

</div>

<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>

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

<br>

</div>

<a href="https://www.instagram.com/kinoteatrdruzhba/">Instagram</a>

<a href="https://vk.com/druzhba_21_vek">ВКонтакте</a>

<a href="https://www.facebook.com/drukino/">Facebook</a>

<a href="page3.html">Эл.почта</a>

</div>

</body>

</html>

Файл contacts.html

<!DOCTYPE html>

<html>

<head>

<title>Контакты</title>

</head>

<body>

</div>

<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>

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

<br>

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

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

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

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

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

<br>

<br>

</div>

<a href="https://www.instagram.com/kinoteatrdruzhba/">Instagram</a>

<a href="https://vk.com/druzhba_21_vek">ВКонтакте</a>

<a href="https://www.facebook.com/drukino/">Facebook</a>

<a href="page3.html">Эл.почта</a>

</div>

</body>

</html>

Файл main.html

<!DOCTYPE html>

<html>

<head>

<title>Дружба</title>

</head>

<body>

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

</div>

<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>

<h2>Главная</h2>

<h3>Смотрите на нашем экране</h3>

<br>

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

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

<br>

<big>Обитель страха</big>

<p align="justify"><small>Где-то в бескрайних прериях живёт молодая пара.Муж часто отлучается в город и оставляет Лиззи одну,поэтому она очень обрадовалась,когда рядом поселилась ещё одна семейная пара.Но забеременев,новая подруга начинает странно себя вести и утверждать,что где-то поблизости бродит нечто потустороннее.</small></p>

<br>

<big>Аладдин</big>

<p align="justify"><small>Молодой воришка по имени Аладдин хочет стать принцем, чтобы жениться на принцессе Жасмин. Тем временем визирь Аграбы Джафар, намеревается захватить власть над Аграбой, а для этого он стремится заполучить волшебную лампу, хранящуюся в пещере чудес и поможет ему в этом воришка Аладдин.</small></p>

<br>

<h3>Сегодня в кино</h3>

<br>

<big>Покемон.Детектив Пикачу</big>

<p align="justify"><small>Киноадаптация сверхпопулярного аниме о волшебных существах, каждый из которых наделен уникальными способностями. «Талисман» франшизы Пикачу примерит шляпу Шерлока Холмса, взявшись за расследование таинственных событий, связанных с покемонами.</small></p>

<br>

<h3>Новости</h3>

<h4>Самые ожидаемые фильмы</h4>

<tr>

<th>Место</th>

<th>Название</th>

<th>Рейтинг</th>

</tr>

<tr>

<td>Джокер</td>

</tr>

<tr>

<td>Аватар 2</td>

</tr>

<tr>

<td>Шерлок Холмс 3</td>

</tr>

<tr>

<td>Чужой 5</td>

</tr>

<tr>

<td>Индиана Джонс 5</td>

</tr>

</table>

<br>

</div>

<a href="https://www.instagram.com/kinoteatrdruzhba/">Instagram</a>

<a href="https://vk.com/druzhba_21_vek">ВКонтакте</a>

<a href="https://www.facebook.com/drukino/">Facebook</a>

<a href="page3.html">Эл.почта</a>

</div>

</body>

</html>

Файл poster.html

<!DOCTYPE html>

<html>

<head>

<title>Премьеры</title>

</head>

<body>

</div>

<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>

<h2>Премьеры</h2>

<br>

<h4 class="hh">Солнце тоже звезда</h4>

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

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

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

</small>

<br>

<h4 class="hh">Аладдин</h4>

<p align="justify"><small>Молодой воришка по имени Аладдин хочет стать принцем, чтобы жениться на принцессе Жасмин. Тем временем визирь Аграбы Джафар, намеревается захватить власть над Аграбой, а для этого он стремится заполучить волшебную лампу,и достать её поможет Аладдин.</p>

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

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

<br>Жанр : мюзикл

</small>

<br>

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

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

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

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

</small>

<br>

<p align="justify"><small>Суперкиллер Джон Уик после нарушения кодекса тайной гильдии ассасинов получает статус изгоя — экскомьюникадо. За его голову назначена цена в 14 миллионов долларов, и армия самых жестоких профессиональных убийц со всего мира открывает на него кровавую охоту.</p>

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

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

<br>Жанр : боевик

</small>

<br>

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

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

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

<br>Жанр : триллер

</small>

<br>

</div>

<a href="https://www.instagram.com/kinoteatrdruzhba/">Instagram</a>

<a href="https://vk.com/druzhba_21_vek">ВКонтакте</a>

<a href="https://www.facebook.com/drukino/">Facebook</a>

<a href="page3.html">Эл.почта</a>

</div>

</body>

</html>

Файл schedule.html

<!DOCTYPE html>

<html>

<head>

<title>Расписание</title>

</head>

<body>

</div>

<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>

<h2>Расписание</h2>

<br>

<h4 class="hh" >В метре друг от друга</h4>

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

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

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

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

</small>

<br>

<h4 class="hh" >Миллиард</h4>

<p align="justify"><small> Влиятельный банкир делает всё возмо жное, чтобы не делиться имуще ством со своими незаконно рожденными детьми. Но когда его лишают всех денег, выясня ется, что помочь Матвею могут только они… Чтобы вернуть себе состояние, миллиа рдер идет на ограбление собственного банка.</p></small>

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

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

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

<br>

<h4 class="hh" >Пушистый шпион</h4>

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

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

<br>Страна: Германия, Бельгия

<br>Жанр : мультфильм

</small>

<br>

<h4 class="hh" >Большое путешествие</h4>

<p align="justify"><small>Однажды, Бестолковый Аист из центра доставки детей перепутал адреса и вместо Семьи Панд принес Малыша Панду медведю по имени Мик-Мик. Мик-Мик во всем любит порядок и решает доставить Малыша Панду его родителям в Южный Китай.</p>

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

<br>Страна: Россия, США

<br>Жанр : мультфильм

</small>

<br>

<h4 class="hh" >Мстители: Финал</h4>

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

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

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

<br>Жанр : приключения

</small>

<br>

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

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

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

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

</small>

<br>

<h4 class="hh" >Коридор бессмертия</h4>

<p align="justify"><small> Вчерашняя ленинградская школьница Маша Яблочкина после лютой блока дной зимы 1941-1942 года приходит на железно дорожные курсы в надежде выжить и набраться сил. Оттуда девушку отправляют на строительство Шлиссельбургской магистрали.</p>

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

<br>Страна: Россия

<br>Жанр : военный

</small>

<br>

<h4 class="hh">Обитель страха</h4>

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

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

<br>Жанр : вестерн, ужасы

</small>

<br>

<h4 class="hh">Покемон.Детектив Пикачу</h4>

<p align="justify"><small>История начинается с таинс твенного исчезновения частного детектива экстра - класса Гарри Гудмана, рассле довать которое предстоит его 21-летнему сыну Тиму. Помощь в расследовании ему окажет бывший партнер отца, детектив Пикачу — остроумный и обаятельный сыщик, который является загадкой даже для себя самого.</p>

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

<br>Страна: США, Япония

<br>Жанр : фэнтези, детектив

</small>

<br>

</div>

<a href="https://www.instagram.com/kinoteatrdruzhba/">Instagram</a>

<a href="https://vk.com/druzhba_21_vek">ВКонтакте</a>

<a href="https://www.facebook.com/drukino/">Facebook</a>

<a href="page3.html">Эл.почта</a>

</div>

</body>

</html>

Файл page3.html

<!DOCTYPE html>

<html >

<head>

</head>

<body>

Оставьте отзыв</strong></h2>

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

</div>

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

</div>

</div>

<label for="email-form1-g" class="form-control-label mbr-fonts-style display-7">Email</label>

</div>

<label for="phone-form1-g" class="form-control-label mbr-fonts-style display-7">Телефон</label>

</div>

<label for="message-form1-g" class="form-control-label mbr-fonts-style display-7">Сообщение</label>

</div>

<div class="col-md-12 input-group-btn align-center"><button type="submit" class="btn btn-primary btn-form display-4">Отправить<br></button></div>

</div>

</form>

</div>

</section>

<section class="engine"><a href="https://mobirise.info/s">free bootstrap theme</a></section><section class="mbr-section content8 cid-rtu9BrS2mg" id="content8-m">

<div class="mbr-section-btn align-center"><a class="btn btn-black-outline display-4" href="C:\Users\acer\Desktop\кинотеатр\main.html">Главная<br></a></div>

</div>

</section>

</body>

</html>

Файл milliard.html

<!DOCTYPE html>

<html>

<head>

<title>Миллиард</title>

</head>

<body>

</div>

<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>

<h2>Миллиард</h2>

<br>

<small>

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

<br>Страна: Россия

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

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

<br>В главных ролях : <a href="https://www.kino-teatr.ru/kino/acter/m/ros/2776/bio/">Владимир Машков</a>, <a href="https://www.kino-teatr.ru/kino/acter/w/ros/28976/bio/">Марина Петренко</a>.

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

<br>

<p align="justify">Влиятельный банкир делает всё возможное, чтобы не делиться имуществом со своими незаконнорожденными сыновьями. Но когда его лишают всех денег, выясняется, что помочь Матвею могут только они… Чтобы вернуть себе состояние, миллиардер будет вынужден пойти на ограбление собственного банка в Монте-Карло. А для этого ему придётся выполнить ещё более сложную задачу: вернуть доверие выросших без отца детей…

</p>

</small>

<br>

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

</div>

<a href="https://www.instagram.com/kinoteatrdruzhba/">Instagram</a>

<a href="https://vk.com/druzhba_21_vek">ВКонтакте</a>

<a href="https://www.facebook.com/drukino/">Facebook</a>

<a href="page3.html">Эл.почта</a>

</div>

</body>

</html>

Файл gallery.volt

{% extends "layouts/main.volt" %}

{% block content %}

<h1 class="gallery-header">Галерея</h1>

{% for albom in alboms %}

<div class="album__descr__left">{{ albom.name }}</div>

<div class="album__descr__right">{{ albom.photos|length }}</div>

</div>

</a>

</div>

{% endfor %}

</div>

{% endblock %}

Файл star.html

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

</div>

<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>

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

<br>

<small>

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

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

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

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

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

<br>

</small></p>

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

<br>

</div>

<a href="https://www.instagram.com/kinoteatrdruzhba/">Instagram</a>

<a href="https://vk.com/druzhba_21_vek">ВКонтакте</a>

<a href="https://www.facebook.com/drukino/">Facebook</a>

<a href="page3.html">Эл.почта</a>

</div>

</body>

</html>

Файл aladdin.html

<!DOCTYPE html>

<html>

<head>

<title>Аладдин</title>

</head>

<body>

</div>

<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>

<h2>Аладдин</h2>

<br>

<small>

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

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

<br>Жанр: мюзикл, комедия, фэнтези

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

<br>В главных ролях : <a href="https://www.kinopoisk.ru/name/2380326/">Наоми Скотт</a>, <a href="https://www.kinopoisk.ru/name/2511574/">Мена Массуд</a>, <a href="https://www.kinopoisk.ru/name/513/">Уилл Смит</a>.

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

<br>

<p align="justify">Молодой воришка по имени Аладдин хочет стать принцем, чтобы жениться на принцессе Жасмин. Тем временем визирь Аграбы Джафар, намеревается захватить власть над Аграбой, а для этого он стремится заполучить волшебную лампу, хранящуюся в пещере чудес, доступ к которой разрешен лишь тому, кого называют «алмаз неограненный», и этим человеком является никто иной как сам Аладдин.

</small></p>

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

<br>

</div>

<a href="https://www.instagram.com/kinoteatrdruzhba/">Instagram</a>

<a href="https://vk.com/druzhba_21_vek">ВКонтакте</a>

<a href="https://www.facebook.com/drukino/">Facebook</a>

<a href="page3.html">Эл.почта</a>

</div>

</body>

</html>

Файл star.html

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

</div>

<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>

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

<br>

<small>

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

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

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

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

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

<br>

</small></p>

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

<br>

</div>

<a href="https://www.instagram.com/kinoteatrdruzhba/">Instagram</a>

<a href="https://vk.com/druzhba_21_vek">ВКонтакте</a>

<a href="https://www.facebook.com/drukino/">Facebook</a>

<a href="page3.html">Эл.почта</a>

</div>

</body>

</html>

Файл 1metr.html

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

</div>

<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>

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

<br>

<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+

<br>

</p>

</small>

<br>

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

</div>

<a href="https://www.instagram.com/kinoteatrdruzhba/">Instagram</a>

<a href="https://vk.com/druzhba_21_vek">ВКонтакте</a>

<a href="https://www.facebook.com/drukino/">Facebook</a>

<a href="page3.html">Эл.почта</a>

</div>

</body>

</html>

Необходимо прокомментировать каждый критерий ↑

Разработка сайта кинотеатра «Дружба» (Цель разработки)

ВВЕДЕНИЕ

ГЛАВА 1. АНАЛИТИЧЕСКАЯ ЧАСТЬ

1.1 Цель разработки

​​​​​​​1.2 Обзор средств программирования

1.3 ​​​​​​​Описание языка программирования

ГЛАВА 2. ПРАКТИЧЕСКАЯ ЧАСТЬ

​​​​​​​2.1 Постановка задачи

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

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

Описание процесса отладки программы. Руководство пользователя

ЗАКЛЮЧЕНИЕ

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

1.2 Обзор средств программирования

1.3 Описание языка программирования

2.1 Постановка задачи