Файл: Разработка сайта кинотеатра «Дружба» (Цель разработки).pdf
Добавлен: 25.04.2023
Просмотров: 169
Скачиваний: 3
<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>
<p><img src="kinoo.jpg" class="right" align="left" alt="photo" width="340" height="200"></p>
<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 10 |
Процессор |
Intel Pentium 4 или более поздней версии |
Свободное место на диске |
350 МБ |
Оперативная память |
512 МБ |
Руководство пользователя
Вход на сайт осуществляется при помощи браузера. При заходе на сайт открывается главная страница. С главной страницы доступны все разделы сайта. Для перехода к нужному разделу нужно кликнуть на соответствующую кнопку или ссылку. Все активные элементы при наведении на них увеличиваются.
Оценка результатов решения задачи
При постановке задачи к сайту были предъявлены следующие требования: сайт должен быть доступен через интернет, иметь современный дизайн, общую типографику для всех страниц, поддерживать HTML5, CSS 3 и Bootstrap и одинаково отображаться во всех наиболее распространенных браузерах. Проверялась правильность работы всех ссылок. Все допущенные ошибки были исправлены.
Ссылки и система навигации не требуют настройки при переносе на другой компьютер, необходимо лишь наличие браузера.
Сайт создан. Требования, предъявленные к нему, выполнены в полном объеме на современном технологическом уровне.
ЗАКЛЮЧЕНИЕ
Современное общество, бизнес-процессы, отношения между людьми, профессиональная деятельность, управление объектами немыслимы без информационных технологий. Наиболее яркое проявление IT мы наблюдаем в сети Интернет.
В ходе выполнения дипломной работы получен полнофункциональный 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>
<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>О кинотеатре</title>
<link href="stylin.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</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>
<div id="main">
<div class="bottomRight">
<div class="content">
<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>