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

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

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

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

Добавлен: 25.04.2023

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

Скачиваний: 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 Vista
Windows 7
Windows 8

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>