Файл: Разработка сайта кинотеатра «Дружба» (Цель разработки).pdf
Добавлен: 25.04.2023
Просмотров: 175
Скачиваний: 3
Сайт должен соответствовать следующим параметрам:
- Современный дизайн. Цветовая гамма, градиентные заливки, четко читаемый шрифт, фон сайта и отдельных блоков, составная разметка. Страницы должны соответствовать современным представлениям о красоте сайта и следовать тенденциям сайтостроения последних лет. В частности, для этого должен быть использовать адаптивный дизайн, модульная структура представления информации. Модули должны содержать разделы, которые индексируются популярными поисковыми системами 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>
<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>