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

Современный дизайн. Цветовая гамма, градиентные заливки, четко читаемый шрифт, фон сайта и отдельных блоков, составная разметка. Страницы должны соответствовать современным представлениям о красоте сайта и следовать тенденциям сайтостроения последних лет. В частности, для этого должен быть использовать адаптивный дизайн, модульная структура представления информации. Модули должны содержать разделы, которые индексируются популярными поисковыми системами 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>

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