Разработка Web-сайта отеля

Размещено на http://www.allbest.ru/

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РЕСПУБЛИКИ КАЗАХСТАН

НАО «Евразийский национальный университет им. Л. Н. Гумилева»

Факультет информационных технологий

Кафедра «Информационные системы»

КУРСОВАЯ РАБОТА ПО ДИСЦИПЛИНЕ

«WEB-программирование»

Образовательная программа 6В06103 - Информационные системы шифр, ОП.

Тема: «РАЗРАБОТКА WEB - САЙТА ОТЕЛЯ »

Работу выполнил Студент группы ИС-32

Жусупекова А.А

Руководитель курсовой работы

Танченко Л. А.

НУР-СУЛТАН 2022 г.



Содержание

программный сайт web файл

Введение

1. Основы разработки веб - сайта отеля “EUROPA HOTEL”

1.1 Организация структуры веб-сайта отеля “EUROPA HOTEL”

1.2 Выбор программных средств для разработки сайта

1.3 Проектирование веб - сайта отеля “EUROPA HOTEL”

2. Разработка веб - сайта отеля “EUROPA HOTEL”

2.1 Создание структуры файлов проекта

2.2 Создание главной страницы

2.3 Создание страницы номеров

Заключение

Список использованной литературы

Приложение



Введение

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

Цель работы проанализировать принципы создания web-сайта с использованием языка HTML, CSS, JavaScript.

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

Задачи:

· ознакомиться с современными Интернет-технологиями;

· изучить основные понятия и программный инструментарий, применяемый для разработки и создания Web-сайтов;

· выявить и учесть методы и способы представления на Web-страницах различных видов информации (текстов и изображений);

· ознакомиться с основными правилами и рекомендациями по разработке и созданию Web-сайтов и неукоснительно следовать им в своей практике;

· определиться со структурой Web-страниц;

· представить пошаговую стратегию разработки web-сайта.



1. Основы разработки веб-сайта

1.1 Организация структуры веб-сайта отеля “EUROPA HOTEL”

Структура сайта

Структура сайта (карта сайта) -- это логическая схема распределения страниц сайта по категориям / разделам (папкам). С точки зрения пользователя, структура сайта -- это навигация, путь той или иной странице или категории.

· Линейная

· Линейно-разветвленная

· Дерево

· Решето, сеть

· Линейная

Линейная структура выглядит в виде цепочки. Подойдет для одностраничных сайтов (якорного меню) и визиток.

Рисунок 1 Линейная структура

Линейно-разветвленная

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



Рисунок 2 Линейно - разветвленная структура

Дерево

Древовидная структура состоит из множества уровней и разделов (имеет много ветвлений). Самая распространенная, популярная и оптимальная для многостраницных сайтов [1].

Рисунок 3 Древовидная структура

Решето, сеть

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

Рисунок 4 Сетевая структура

1.2 Проектирование веб - сайта отеля “EUROPA HOTEL”

В качестве предметной области рассмотрим работу сайта отеля, деятельность которой заключается в предоставления номеров.

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

Поэтому, для того чтобы при помощи сайта максимально сэкономить время клиента, и персонала гостиницы можно использовать систему бронирования на сайте “EUROPA HOTEL”.

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

· постановка задачи

· проектирование структуры сайта

· создание эскиза веб-страниц

· верстка веб-страниц

· интеграция дизайна

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

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

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

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

1.3 Выбор программных средств для разработки сайта

В качестве среды разработки был выбран Visual Studio Code.

Visual Studio Code был разработан Microsoft для Windows, Mac и Linux. Virtual Studio Code бесплатен, имеет огромное количество плагинов и интегрирован с Git, что даёт ещё больше возможностей для разработки. Программа также предлагает боковую панель, которая позволяет пользователям легко создавать и перемещать файлы.

Одна из самых популярных функций -- функция автоматической отладки. Как правило, поиск ошибок в коде может занять много времени, но, нажав всего одну горячую клавишу, Visual Studio Code выделит ошибки, которые необходимо исправить. С добавлением этой удобной функции Visual Studio Code официально квалифицируется как IDE, что означает, что он может работать за пределами возможностей обычного текстового редактора. Visual Studio Code может отлаживать, записывать и управлять ресурсами в коде, таким образом обрабатывая приличный объём рабочей нагрузки.

Пользовательский интерфейс программного обеспечения является безупречным, практически без задержек, а текст и панель инструментов понятна. Некоторые говорят, что Visual Studio Code почти в одинаковой степени сравним с Sublime, но главное отличие заключается в цене.

Наличие слишком большого количества расширений одновременно снизит его скорость. Если расширения не выстроены должным образом, запуск кода может настолько замедлить работу окна, что вам придётся перезагрузить его. Следует помнить, что Visual Studio Code -- это лёгкая программа, поэтому она имеет ограничения по скорости и размеру загрузки.

Visual Studio Code также не позволяет пользователям работать над проектом в двух отдельных окнах. Это означает, что, если вы хотите работать с отдельными файлами, загруженными в один и тот же проект, вам придётся работать с ними по одному. После внесения изменений в один файл вам придётся закрыть его, прежде чем открывать следующий, чтобы сопоставить изменения.

В целом, Visual Studio Code -- фантастический бесплатный текстовый редактор. Удобная боковая панель и функция отладки упрощают процесс редактирования. Хотя было бы неплохо иметь возможность открывать несколько файлов одновременно, Visual Studio Code по-прежнему может многое предложить с его несколькими плагинами, прямым подключением к GitHub и чистой эстетикой, которая позволяет вашим глазам отдыхать, когда вы обдумываете километры кода.Термин HTML (Hyper Text Markup Language) означает "язык маркировки гипертекстов". Это понятие более широкое, включает в себя Интернет и локальные сети, редакторы, браузеры, разнообразные программные продукты, компакт-диски, обучающие курсы, дизайн и многое другое[2].

HTML - своеобразная противоположность сложным языкам программирования, известным только специалистам.

HTML давно перестал быть просто языком программирования. Человек, изучавший этот язык, обретает возможность делать сложные вещи простыми способами и, главное, быстро, что в компьютерном мире не так уж и мало. Гипертекст подходит для включения элементов мультимедиа в традиционные документы. Практически именно благодаря развитию гипертекста, большинство пользователей получило возможность создавать собственные мультимедийные продукты и распространять их на компакт-дисках. Такие информационные системы, выполненные в виде набора HTML-страниц, не требует разработки специальных программных средств, так как все необходимые инструменты для работы с данными (WEB-браузеры) стали частью стандартного программного обеспечения большинства персональных компьютеров. От пользователя требуется выполнить только ту работу, которая относится к тематике разрабатываемого продукта: подготовить тексты, нарисовать рисунки, создать HTML-страницы и продумать связь между ними.

Данная работа содержит описание языка разметки гипертекста HTML, являющегося основой создания web-сайтов.

Web-страницы. Web-страницы создаются с использованием языка разметки гипертекстовых документов HTML (Hyper Text Markup Language). В обычный текстовый документ вставляются управляющие символы - HTML-тэги, которые определяют вид Web-страницы при ее просмотре в браузере.

Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста самого редактора. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.

Создание Web-страниц с использованием HTML-тэгов требует больших усилий, времени и знания синтаксиса языка. Применение специальных инструментальных программных средств (Web-редакторов) делает работу по созданию Web-сайтов простой и эффективной. Процесс создания и редактирования страниц в Web-редакторах очень нагляден, так как производится в режиме WYSIWYG (от англ. "What You See Is What You Get" - "Что видишь, то и получишь").

Актуальность темы в том, что Web-сайты, публикации во Всемирной паутине реализуются в форме Web-сайтов, которые обычно содержат материал по определенной теме или проблеме. Государственные структуры и организации (правительство, дума, школа и т. д.) обычно создают официальные Web-сайты своих организаций, на которых размещают информацию о своей деятельности. Коммерческие фирмы на своих Web-сайтах размещают рекламу товаров или услуг и предлагают их приобрести в Интернет-магазине.

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

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

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

Для публикации Web-сайта необходимо найти подходящее место на одном из серверов Интернета. Многие провайдеры предоставляют своим клиентам возможность бесплатного размещения Web-сайтов на своих серверах (бесплатный хостинг) [3].

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

С момента своего возникновения структура CSS была несколько раз пересмотрена, в нее были добавлены новые элементы и убраны (видоизменены) старые. Существуют три уровня CSS, определяемых наличием завершенной редакции структуры. Это: CSS 1 (первый уровень структуры стилевых шаблонов, окончательно утвержденный 11 января 1999 года), CSS 2 (второй уровень стилевых конструкций, начало обсуждения которого датируется маем 1998 года) и CSS 3 (третий уровень стилевого оформления электронных документов, принятый к обсуждению 23 мая 2001 года, на момент написания книги находился в стадии проработки).

В завершение разговора об уровнях CSS следует добавить, что переход от одного уровня к другому, в основном, сопровождался некоторыми видоизменениями в структуре и в правилах стилевого оформления, технологическими дополнениями, а также попытками систематизировать применение CSS. Именно третий уровень (CSS 3) позиционируется разработчиками в качестве некой единой системы представления стилей в электронном документе, основанной на использовании специальных модулей. Способы определения таблиц стилей. Как уже было сказано, любая таблица стилей CSS должна быть интерпретирована браузером для того, чтобы правила CSS, обозначенные для конкретных элементов электронного документа, вступили в силу[4].

Определение таблицы стилей (стилевого шаблона) возможно четырьмя способами: ссылка на внешний файл. Если все стилевые шаблоны для конкретного HTML-документа разместить в одном текстовом файле (с расширением ess), то с помощью специального тега из текущего документа можно сделать ссылку на внешний CSS-файл стилевых шаблонов, например. Браузер, анализируя HTML-код, обратится по указанному пути и, обнаружив указанный файл стилевого оформления, отобразит элементы страницы в При генерации страниц в Web возникает дилемма, связанная с архитектурой "клиент-сервер". Страницы можно генерировать как на стороне клиента, так и на стороне сервера. В 1995 году специалисты компании Netscape создали механизм управления страницами на клиентской стороне, разработав язык программирования JavaScript.

· Таким образом, JavaScript - это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента. Если быть более точным, то JavaScript - это не только язык программирования на стороне клиента. Liveware, прародитель JavaScript, является средством подстановок на стороне сервера Netscape. Однако наибольшую популярность JavaScript обеспечило программирование на стороне клиента.

· Основная идея JavaScript состоит в возможности изменения значений атрибутов HTML-контейнеров и свойств среды отображения в процессе просмотра HTML-страницы пользователем. При этом перезагрузки страницы не происходит.

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

· Название "JavaScript" является собственностью Netscape. Реализация языка, осуществленная разработчиками Microsoft, официально называется Jscript. Версии JScript совместимы (если быть совсем точным, то не до конца) с соответствующими версиями JavaScript, т.е. JavaScript является подмножеством языка JScript.

· JavaScript стандартизован ECMA (European Computer Manufacturers Association - Ассоциация европейских производителей компьютеров). Соответствующие стандарты носят названия ECMA-262 и ISO-16262. Этими стандартами определяется язык ECMAScript, который примерно эквивалентен JavaScript 1.1. Отметим, что не все реализации JavaScript на сегодня полностью соответствуют стандарту ECMA. В рамках данного курса мы во всех случаях будем использовать название JavaScript[5].

· соответствии с определенными правилами CSS.



2. Разработка веб-сайта отеля “EUROPA HOTEL”.

2.1 Создание структуры файлов проекта

Перед тем, как начинать верстку нашего веб - сайта нужно создать папку в нашей среде разработки Visual Studio Code.

Создаем папку с названием нашего проекта.

· В ней создаем html файлы.

· В папке проекта создаем папку style с файлом style.css.

· В папке проекта создаем папку image.

· В папке проекта создаем папку js.

· В папке проекта создаем папку fonts.

Рисунок 1 Структура проекта

В папке «Source» находятся 7 страниц нашего веб - сайта, написанные на языке html5, в папке «image» располагаются различные картинки, в папке «css» - находится файл, который нужен для стилизации нашего сайта. «Fonts» папке- находятся веб-шрифты. «JS»- мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили.

2.2 Создание главной страницы веб-сайта отеля “EUROPA HOTEL”

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

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

Теперь можно начинать писать код. Но начнем мы это делать не с привычного HTML, а с переноса правил в CSS.

На данном этапе желательно перенести все визуальные стили из дизайна в CSS, которые будут применяться по умолчанию для каждого тега.
Основной цвет фона примерно соответствует цвету #F9AD81. Он будет показан в случае, если фоновая картинка не загрузится. Наверху страницы находится серая дизайнерская полоска. Применим ее через свойство border для body.

Основным шрифтом является тот шрифт, которым написан текст в области контента. В данном случае это Tahoma 12px с цветом #F9AD81.

Листинг кода каркаса 1 (Внешний вид страницы смотрите в приложении):

<li class="active"><a href="./index.html">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Rooms</a></li>

<li><a href="#">Facilities</a></li>

<li><a href="#">News</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

</div>

CSS стили для него будут следующие:

Листинг кода стиля 1 (Внешний вид страницы смотрите в приложении):

nav a {

check-form.room-selector p {

font-size: 14px;

color: #242424;

letter-spacing: 0.4px;

margin-bottom: 10px;

font-weight: 600;

}

.check-form.room-selector.nice-select {

background-color: transparent;

border-radius: 0;

border: none;

padding-left: 0;

padding-right: 0;

float: none;

line-height: 42px;

border-bottom: 1px solid #888888;

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

В итоге мы получаем:

Рисунок 5 Меню быстрого доступа

Далее мы создаем окно для бронирования мест.

Листинг кода каркаса 2 (Внешний вид страницы смотрите в приложении):

<h4>Check Availability</h4>

<div class=”datepicker”>

<p>From</p>

<input type=”text” class=”datepicker-1” value=”dd / mm / yyyy”>

<img src=”img/calendar.png” alt=””>

</div>

<div class=”datepicker”>

<p>To</p>

<input type=”text” class=”datepicker-2” value=”dd / mm / yyyy”>

<img src=”img/calendar.png” alt=””>

</div>

<div class=”room-quantity”>

<div class=”single-quantity”>

<p>Adults</p>

<div class=”pro-qty”><input type=”text” value=”0”></div>

</div>

<div class=”single-quantity”>

<p>Children</p>

<div class=”pro-qty”><input type=”text” value=”0”></div>

</div>

<div class=”single-quantity last”>

<p>Rooms</p>

<div class=”pro-qty”><input type=”text” value=”0”></div>

</div>

</div>

<div class=”room-selector”>

<p>Room</p>

<select class=”suit-select”>

И прописываем для него стили:

Листинг кода стиля 2 (Внешний вид страницы смотрите в приложении):

width: calc(29% - 16px);

float: left;

margin-right: 16px;

background: #ffffff;

padding-top: 18px;

padding-bottom: 18px;

padding-left: 29px;

padding-right: 28px;

}

.check-form.room-quantity.single-quantity {

display: inline-block;

margin-right: 30px;

}

.check-form.room-quantity.single-quantity.last {

margin-right: 0;

}

Рисунок 6 Меню бронирования мест

Листинг кода каркаса 3 (Внешний вид страницы смотрите в приложении):

<h2>A great stay in a<br /> lovely hotel.</h2>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas. Donec in sodales dui, a blandit nunc. Pellentesque id eros venenatis, sollicitudin neque sodales, vehicula nibh. Nam massa odio, porttitor vitae efficitur non, ultricies volutpat tellus.</p>

</div>

</div>

<div class="col-lg-6">

<div class="intro-right">

<p>Dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra.</p>

<a href="#" class="primary-btn">Make a Reservation</a>

</div>

</div>

</div>

</div>

</section>

Листинг кода стиля 3 (Внешний вид страницы смотрите в приложении):

check-form button {

background: #F9AD81;

border: 1px solid #F9AD81;

font-size: 18px;

color: #ffffff;

padding: 43px 27px;

cursor: pointer;

}

Рисунок 7 Краткая информация об отель

Листинг кода каркаса 4 (Внешний вид страницы смотрите в приложении):

<h2>Luxury Suite Room</h2>

<p>From $399</p>

</div>

<div class="fi-features">

<div class="fi-info">

<i class="flaticon-019-television"></i>

<p>Smart TV</p>

</div>

<div class="fi-info">

<i class="flaticon-029-wifi"></i>

<p>High Wi-fii</p>

</div>

<div class="fi-info">

<i class="flaticon-003-air-conditioner"></i>

<p>AC</p>

</div>

<div class="fi-info">

<i class="flaticon-036-parking"></i>

<p>Parking</p>

</div>

<div class="fi-info">

<i class="flaticon-007-swimming-pool"></i>

<p>Pool</p>

</div>

</div>

<a href="#" class="primary-btn">Make a Reservation</a>

</div>

</div>

<div class="col-lg-6">

<div class="facilities-item set-bg fi-right" data-setbg="img/faci-2.jpg">

<div class="fi-title">

<h2>Infinity Pool</h2>

<p>For all our guests</p>

</div>

<a href="#" class="primary-btn">Make a Reservation</a>

</div>

</div>

</div>

</div>

</section>

<!-- Facilities Section End -->

<!-- Testimonial Section Begin -->

<section class="testimonial-section spad">

<div class="container">

<div class="row">

<div class="section-title">

<h2>Guestbook</h2>

</div>

</div>

<div class="row">

<div class="col-lg-6">

<div class="testimonial-item">

<div class="ti-time">

02 / 02 / 2019

</div>

<h4>We loved our stay</h4>

<div class="rating">

<i class="fa fa-star"></i>

<i class="fa fa-star"></i>

<i class="fa fa-star"></i>

<i class="fa fa-star"></i>

<i class="fa fa-star"></i>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiselit. Vivamus libero mauris, bibendum eget

sapien ac, ultrices rhoncus ipsum. Donec nec sapien in urna fermentum ornare.

</p>

<div class="ti-author">

<div class="author-pic">

<img src="img/author-1.png" alt="">

</div>

<div class="author-text">

<h6>JOHN DOE <span>Madrid</span></h6>

</div>

</div>

</div>

</div>

Рисунок 5 Номера отеля

Листинг кода каркаса 5 (Внешний вид страницы смотрите в приложении):

<h2>Guestbook</h2>

</div>

</div>

<div class="row">

<div class="col-lg-6">

<div class="testimonial-item">

<div class="ti-time">

02 / 02 / 2019

</div>

<h4>We loved our stay</h4>

<div class="rating">

<i class="fa fa-star"></i>

<i class="fa fa-star"></i>

<i class="fa fa-star"></i>

<i class="fa fa-star"></i>

<i class="fa fa-star"></i>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiselit. Vivamus libero mauris, bibendum eget sapien ac, ultrices rhoncus ipsum. Donec nec sapien in urna fermentum ornare.</p>

<div class="ti-author">

<div class="author-pic">

<img src="img/author-1.png" alt="">

</div>

<div class="author-text">

<h6>JOHN DOE <span>Madrid</span></h6>

</div>

</div>

</div>

</div>

Листинг кода стиля 5 (Внешний вид страницы смотрите в приложении):

color: #F9AD81;

font-weight: 600;

line-height: 24px;

Рисунок 6 Отзывы

Листинг кода каркаса 6 (Внешний вид страницы смотрите в приложении):

<h5>Newsletter</h5>

<div class="newslatter-form">

<input type="text" placeholder="Your Email Here">

<button type="submit">Subscribe</button>

</div>

</div>

</div>

<div class="col-lg-4">

<div class="footer-item">

<h5>Contact Info</h5>

<ul>

<li><img src="img/placeholder.png" alt="">1525 Boring Lane,<br />Los Angeles, CA</li>

<li><img src="img/phone.png" alt="">+7 776 8192143</li>

</ul>

</div>

</div>

</div>

</div>

<div class="copyright">

<div class="container">

<div class="row">

<div class="col-lg-12">

<ul>

<li class="active"><a href="./index.html">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Rooms</a></li>

<li><a href="#">Facilities</a></li>

<li><a href="#">News</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

</div>

<div class="row pt-5">

<div class="col-lg-12 ">

<div class="small text-white text-center"><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->

&copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>

<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></div>

</div>

</div>

</div>

</div>

Листинг кода стиля 6 (Внешний вид страницы смотрите в приложении):

contact-form textarea::-webkit-input-placeholder {

color: #242424;

font-size: 14px;

font-weight: 600;

letter-spacing: 0.4px;

}

.contact-form textarea::-moz-placeholder {

color: #242424;

font-size: 14px;

font-weight: 600;

letter-spacing: 0.4px;

Рисунок 7 Блок нижней части страницы



2.3 Создание страницы товара

Создание страницы номеров.

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

Рисунок 8 Страница номера 1

Рисунок 9 Страница номера 2



Рисунок 10 Страница номера 2

Рисунок 11 Страница номера 2



Заключение

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

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

В данной курсовой работе рассмотрены актуальные вопросы разработки и создания сайта для отеля.

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

· Техническое задание на разработку сайта для гостиницы;

· Просмотр типов хостингов;

· Изучение мероприятий по продвижению ресурса в Сети.

Список использованной литературы

1 Кантелон, М. Node.js в действии / М. Кантелон. М.: Питер, 2015. 810 c

2 Сухов, Кирилл Node.js. Путеводитель по технологии / Кирилл Сухов. М.: ДМК Пресс, 2015. 416 c.

3 Алекс, Бэнкс React и Redux. Функциональная веб-разработка. Руководство / Бэнкс Алекс. М.: Питер, 2018. 458 c.

4 Брайан, П. Хоган HTML5 и CSS3. Веб-разработка по стандартам нового поколения / Брайан П. Хоган. М.: Питер, 2013. 128 c.

5 Беэр, Б. jQuery. Подробное руководство по продвинутому JavaScript / Беэр Б., Иегуда К. СПб.: Символ, 2012. 624 с.

6 Zakirova A.B. Internet od things (IoT): the educational and methodical manual / A.B. Zakirova, Akhayeva Zh.B., A.K. Alzhanov. Almaty: New book, 2021. 183 с.

7 Дронов В.А. JavaScript и AJAX в Web-дизайне / В.А. Дронов. 2-е изд., перераб. и доп. Санкт-Петербург: БХВ-Петербург, 2013. ХІІ, 715 с.

8 Квинт И. Создаем сайты с помощью НТМL, XHTML и CSS: включая НТМL 5 и CSS 3 / И. Квинт. 2-е изд. Санкт-Петербург [и др.]: Питер, 2012. 448 с.

9 Хеник Бен. HTML и CSS: путь к совершенству / Хеник Бен; перевод с английского Т. Качковская, С. Коновалов, Е. Шикарева. Санкт-Петербург [и др.]: Питер, 2012. 333,

10 Машнин Тимур Сергеевич. Web-сервисы Java / Машнин Тимур Сергеевич. Санкт-Петербург: БХВ- Петербург, 2012. 560 с

11 Минник Крис, Титтел Эд. HTML5 и CSS3 для чайников. М.: Диалектика, 2019. 400 c.

12 Диков А. В. Клиентские технологии веб-дизайна. HTML5 и CSS3. Учебное пособие. М.: Лань, 2019. 188 c.

13 Белунцов В. Новейший самоучитель по созданию Web-страниц / В. Белунцов. М.: NT Press, 2012. 185 с.

14 Берд Дж. Веб-дизайн. Руководство разработчика: учебник. СПб.: Питер, 2012. 224 с.

15 Лазуков, Д.А. Обзор методов аутентификации в rest web api / Д. А. Лазуков.: Тюменский государственный университет, Тюмень, 2017.3с

16 Блинов И.Н., Романчик В.С. Java. Методы программирования: учебно-методическое пособие. Минск: Четыре четверти, 2013. 896 с.

17 Веб - приложения на JavaScript: практическое руководство / А. Маккоу; пер. Н. Вильчинский. СПб.: ПИТЕР, 2012. 288 с.: ил.

18 Дакетт, Дж. HTML и CSS. Разработка и дизайн веб-сайтов / Дж. Дакетт. М.: ЭКСМО, 2013. 480 с.

19 Маклафлин Б. PHP и MySQL. Исчерпывающее руководство. СПб.: Питер, 2013. 512 с.



Приложение А

Скриншоты страниц веб - сайта

Главная страница

Информация о отеле



Номера

Новости

Размещено на Allbest.ru