В следующем блоке задано выравнивание и отступ текстового элемента, расположенного в шапке. Аналогичным образом оформлены стили для футера — нижней части страницы. Для блока navigationразработаны следующие стили.#navigation {width: 900px;height: 20px;background-color: rgb (221, 221, 221);}#navigation form {padding: 0px 10px;}После разработки стилей страница формы заказа билетов приобрела следующий вид.Рис. 4 Форма бронирования билета на поезд после подключения стилей и дополнительных блоков.
ДОБАВЛЕНИЕ ДРУГИХ СТРАНИЦ В ПРОЕКТИз первой части известно, что наш проект содержит кроме страницы формы заказа еще несколько страниц: «Главная», «Расписание», а так же страницу, на которую осуществляется переход при правильном заполнении формы. Все эти страницы будут созданы на основе страницы формы, и будет иметь лишь незначительные отличия. Главная страница сайта будет выглядеть следующим образом.Рис. 5 Главная страница сайта бронирования билетов.
Следующая страница сайта будет содержать расписание поездов и будет сделана так же на основании предыдущих страниц.Рис. 6Страница сайтас расписанием поездов.
Кроме этих трех страниц нам еще необходима четвертая страница сайта, на которую будет перемещаться пользователь после того как успешно заполнит данные формы заказа билетов. Особенностью этой страницы является то, что с нее можно вернуться назад на страницу заказа билета.Рис. 7 Страница успешного заполнения необходимых данных. СВЯЗЫВАНИЕ СТРИНИЦ МЕЖДУ СОБОЙЛюбой сайт представляет собой папку, хранящую несколько страниц. Эти страницы представляют собой часть одного целого. Как правило, они имеют общий дизайн, оформление и различаются только содержанием и функционалом. Как правило, главная страница сайта содержит общую информацию и знакомит посетителя сайтом. Главная страница имеет название index. htmlименно эту страницу web-сервер выдает пользователю сети при обращении к сайту. Наш сайт содержит следующие страницы: index. html — главнаяtable. html — страница с расписанием поездовorderform. html- страница с формой брони билетовotpravka. html — страница, на которую перенаправляется пользователь при успешном заполнении формы.
Страницы сайта могут быть связаны между собой гиперссылками. Гиперссылки, как правило, объединяются в меню сайта, что обеспечивает навигацию по сайту. В задании на проект указано, что навигация по сайту должна происходить при помощи кнопок-ссылок и средств JavaScript [2]. Это немного отличает подход к созданию меню и навигации по сайту.
Сам по себе элемент «кнопка» не может быть ссылкой. И работает совместно с формой, которая при нажатии на кнопку перенаправляет пользователя на другую страницу, которая указана в атрибутах формы. Например, когда мы создавали форму для брони билетов, то наша форма выглядела так.<form id="order_form" name="order_form" action="otpravka.html" ></form>Поэтому при успешном заполнении мы переходим на страницу otpravka.html. Для организации меню в виде кнопок мы должны использовать другие методы. В частности средства языка JavaScript. Используем событие onClick, в качестве атрибута поставим ссылку на какую-то страницу. Например для перенаправления на поисковую систему код выглядел бы следующим образом.<form><input type="button" value="Google" onClick='location.href="google.com" '></form>В нашей работе должна осуществляться навигация по трем страницам сайта. Следовательно, в секции navigationдолжна находиться форма, содержащая три кнопки.
Каждой кнопке будет сопоставлено событие onClick имеющее в качестве аргумента ссылку на нужную страницу. Код секции navigation будет выглядеть следующим образом.<div id="navigation" ><form><input type="button" value="Главная" onClick='location.href="index.html" '><input type="button" value="Расписание" onClick='location.href="table.html" '><input type="button" value="Забронироватьбилет" onClick='location.href="orderform.html" '></form></div>Таким же образом реализована возможность перехода со страницы ответаotpravka. htmlобратно на страницу orderform. html формы заполнения данных для бронирования билета. & lt;form><inputtype="button" value="Забронировать еще один билет" onClick='location.href="orderform.html" '></form>Все страницы сайта будут иметь одинаковое меню навигации. Поэтому приведем пример только главной страницы сайта. Меню на остальных страницах сайта будут выглядеть и функционировать точно так же. Рис.
8 Главная страница сайта бронирования билетов с меню навигации на кнопках-ссылках.
ЗАКЛЮЧЕНИЕ
В курсовом проекте была представлена разработка сайта с формой для бронирования железнодорожных билетов. При разработке формы максимально использованы средства языка html5 при проверке и верификации элементов формы. Также разработана навигация между страниц сайта средствами языка javaScript. СПИСКОК ЛИТЕРАТУРЫ1.Фрэйн, Б. HTML 5 и CSS3.
Разработка сайтов для любых браузеров и устройств / Б. Фрэйн; [перевод с английского В. Черник]. — Санкт-Петербург [и др.]: Питер, 2014. — 298 с.
2.Гудман, Д. JavaScript и DHTML. Сборник рецептов. Для профессионалов / Д. Гудман. — М.: Питер, 2015. — 523 c.
3.Дронов, В. HTML 5, CSS 3 и Web 2.
0. Разработка современных Web-сайтов / В. Дронов. — М.: БХВ-Петербург, 2014. — 138 c.
4.Справочник по HTML: [Электронный ресурс]. URL:
http://htmlbook.ru/html. (Дата обращения: 01.
10.2017).
5. Справочник HTML: [Электронный ресурс]. URL:
https://webref.ru/html. (Дата обращения: 05.
10.2017).
