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

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

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

Добавлен: 13.05.2023

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

Скачиваний: 5

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

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

Опробовано программное обеспечение по работе с файлами разных форматов и расширений для корректного отображения в среде интернета.

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

При этом были решены задачи, поставленные при написании данной работы.

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

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

  1. Andy, Harris HTML, XHTML and CSS All–In–One For Dummies® / Andy Harris. - Москва: Машиностроение, 2012. - 254 c.
  2. Ben, Henick HTML & CSS – The Good Parts / Ben Henick. - Москва: СИНТЕГ, 2014. - 350 c.
  3. Ed, Tittel HTML, XHTML & CSS For Dummies® / Ed Tittel. - Москва: Высшая школа, 2015. - 416 c.
  4. Дакетт, Джон HTML и CSS. Разработка и дизайн веб-сайтов (+ CD-ROM) / Джон Дакетт. - М.: Эксмо, 2013. - 480 c.
  5. Дакетт, Джон Основы веб-программирования с использованием HTML, XHTML и CSS / Джон Дакетт. - М.: Эксмо, 2015. - 768 c.
  6. Дебольт HTML и CSS. Совместное использование / Дебольт, Вирджиния. - М.: НТ Пресс, 2016. - 512 c.
  7. Дронов, В. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / В. Дронов. - М.: БХВ-Петербург, 2014. - 351 c.
  8. Дронов, Владимир HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / Владимир Дронов. - М.: БХВ-Петербург, 2016. - 416 c.
  9. Квинт, Игорь Создаем сайты с помощью HTML, XHTML и CSS / Игорь Квинт. - М.: Питер, 2014. - 448 c.
  10. Лазаро, Исси Коэн Полный справочник по HTML, CSS и JavaScript / Лазаро Исси Коэн, Джозеф Исси Коэн. - М.: ЭКОМ Паблишерз, 2016. - 943 c.
  11. Мержевич, Влад HTML и CSS на примерах / Влад Мержевич. - М.: "БХВ-Петербург", 2016. - 448 c.
  12. Никсон, Р. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 / Р. Никсон. - Москва: Мир, 2016. - 688 c.
  13. Никсон, Робин Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript и CSS / Робин Никсон. - М.: "Издательство "Питер", 2013. - 560 c.
  14. Пауэрс, Дэвид Adobe Dreamweaver, CSS, Ajax и PHP / Дэвид Пауэрс. - М.: БХВ-Петербург, 2014. - 982 c.
  15. Прохоренок, Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н.А. Прохоренок, В.А. Дронов. - Москва: РГГУ, 2015. - 768 c.
  16. Прохоренок, Николай HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера (+ CD-ROM) / Николай Прохоренок. - М.: БХВ-Петербург, 2013. - 912 c.
  17. Пфаффенбергер HTML, XHTML и CSS. Библия пользователя / Пфаффенбергер и др. - М.: Вильямс; Издание 3-е, 2014. - 752 c.
  18. Ташков, Петр Веб-мастеринг HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка / Петр Ташков. - М.: Книга по Требованию, 2012. - 512 c.
  19. Титтел, Эд HTML, XHTML и CSS для чайников / Эд Титтел , Джефф Ноубл. - М.: Диалектика, 2016. - 400 c.
  20. Фримен, Элизабет Изучаем HTML, XHTML и CSS / Элизабет Фримен , Эрик Фримен. - М.: Питер, 2016. - 720 c.
  21. Хольцшлаг, Молли Э. Использование HTML 4. Специальное издание (+ CD - ROM) / Хольцшлаг Молли Э.. - М.: Вильямс, 2016. - 988 c.
  22. Чебыкин, Ростислав Самоучитель HTML и CSS. Современные технологии / Ростислав Чебыкин. - Москва: Мир, 2013. - 624 c.
  23. Чуковский, К. Coc-the-roach. Тараканище / К. Чуковский. - М.: Детская литература, 2016. - 818 c.
  24. Шафер, Стивен HTML, XHTML и CSS. Библия пользователя / Стивен Шафер. - Москва: Высшая школа, 2012. - 656 c.
  25. Эрик, Фримен Изучаем HTML, XHTML и CSS / Фримен Эрик. - М.: Питер, 2013. - 569 c.

Приложения

Приложение 1. Код интерфейса сайта «VR аттракцион»

!DOCTYPE html>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="csrf-param" content="_csrf">

<meta name="csrf-token" content="jHYWYV4auC8aDAYB-ilZSiz1XigK497phdIYEPdj8Zy4IXhWDWPhHUtLdmyUfgMNXZQ2azvbia7RjUojjw6C5A==">

<title>Users info</title>

<link href="/assets/d84681db/css/bootstrap.css" rel="stylesheet">

<link href="/css/site.css" rel="stylesheet"></head>

<body>

<div class="wrap">

<nav id="w1" class="navbar-inverse navbar-fixed-top navbar"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w1-collapse"><span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span></button><a class="navbar-brand" href="/">VR-Attraction</a></div><div id="w1-collapse" class="collapse navbar-collapse"><ul id="w2" class="navbar-nav navbar-right nav"><li><a href="/attractions/index">Attractions</a></li>

<li><a href="/users/index">Settings</a></li>

<li class="active"><a href="/usersinfo/index">Users Info</a></li>

<li><a href="/catalog/index">Catalog</a></li>

<li><a href="/genres/index">Genres</a></li>

<li><a href="/localegenres/index">Locale Genres</a></li>

<li><a href="/locale/index">Locale Content</a></li>

<li><form action="/site/logout" method="post">

<input type="hidden" name="_csrf" value="jHYWYV4auC8aDAYB-ilZSiz1XigK497phdIYEPdj8Zy4IXhWDWPhHUtLdmyUfgMNXZQ2azvbia7RjUojjw6C5A=="><button type="submit" class="btn btn-link logout">Logout (admin)</button></form></li></ul></div></div></nav>

<div class="container">

<ul class="breadcrumb"><li><a href="/">Home</a></li>

<li class="active">Users info</li>

</ul> <div class="usersinfo-index">

<h1>Users info</h1>

<p>

<a class="btn btn-success" href="/usersinfo/create">Add user info</a> </p>

<div id="w0" class="grid-view"><div class="summary">Showing <b>1-2</b> of <b>2</b> items.</div>

<table class="table table-striped table-bordered"><thead>

<tr><th><a href="/usersinfo/index?sort=u_id" data-sort="u_id">User</a></th><th><a href="/usersinfo/index?sort=full_name" data-sort="full_name">Full Name</a></th><th><a href="/usersinfo/index?sort=address" data-sort="address">Address</a></th><th><a href="/usersinfo/index?sort=phone" data-sort="phone">Phone</a></th><th><a href="/usersinfo/index?sort=bank_account" data-sort="bank_account">Bank Account info</a></th><th class="action-column">&nbsp;</th></tr><tr id="w0-filters" class="filters"><td><input type="text" class="form-control" name="UsersinfoSearch[u_id]"></td><td><input type="text" class="form-control" name="UsersinfoSearch[full_name]"></td><td><input type="text" class="form-control" name="UsersinfoSearch[address]"></td><td><input type="text" class="form-control" name="UsersinfoSearch[phone]"></td><td><input type="text" class="form-control" name="UsersinfoSearch[bank_account]"></td><td>&nbsp;</td></tr>

</thead>

<tbody>

<tr data-key="1"><td>1</td><td>Ivan Ivanovich Ivanov</td><td>77 Lenina Tambox Russia 121354</td><td>89994445566</td><td>Test test<br />


werwerwer<br />

werwer<br />

INN<br />

BIK<br />

KPP</td><td><a href="/usersinfo/view?id=1" title="View" aria-label="View" data-pjax="0"><span class="glyphicon glyphicon-eye-open"></span></a> <a href="/usersinfo/update?id=1" title="Update" aria-label="Update" data-pjax="0"><span class="glyphicon glyphicon-pencil"></span></a> <a href="/usersinfo/delete?id=1" title="Delete" aria-label="Delete" data-pjax="0" data-confirm="Are you sure you want to delete this item?" data-method="post"><span class="glyphicon glyphicon-trash"></span></a></td></tr>

<tr data-key="12"><td>12</td><td>qwe</td><td>qwe</td><td>qwe</td><td>qwe</td><td><a href="/usersinfo/view?id=12" title="View" aria-label="View" data-pjax="0"><span class="glyphicon glyphicon-eye-open"></span></a> <a href="/usersinfo/update?id=12" title="Update" aria-label="Update" data-pjax="0"><span class="glyphicon glyphicon-pencil"></span></a> <a href="/usersinfo/delete?id=12" title="Delete" aria-label="Delete" data-pjax="0" data-confirm="Are you sure you want to delete this item?" data-method="post"><span class="glyphicon glyphicon-trash"></span></a></td></tr>

</tbody></table>

</div></div>

</div>

</div>

<footer class="footer">

<div class="container">

<p class="pull-left">&copy; VR-Attraction 2018</p>

</div>

</footer>

<div id="yii-debug-toolbar" data-url="/debug/default/toolbar?tag=5be68cb4e740b" style="display:none" class="yii-debug-toolbar-bottom"></div><style>

#yii-debug-toolbar-logo {

position: fixed;

right: 31px;

bottom: 4px;

}

@media print {

.yii-debug-toolbar {

display: none !important;

}

}

.yii-debug-toolbar {

font: 11px Verdana, Arial, sans-serif;

text-align: left;

width: 96px;

transition: width .3s ease;

z-index: 1000000;

}

.yii-debug-toolbar_active {

width: 100%;

}

.yii-debug-toolbar_position_top {

margin: 0 0 20px 0;

width: 100%;

}

.yii-debug-toolbar_position_bottom {

position: fixed;

right: 0;

bottom: 0;

margin: 0;

}

.yii-debug-toolbar__bar {

position: relative;

padding: 0;

font: 11px Verdana, Arial, sans-serif;

text-align: left;

overflow: hidden;

box-sizing: content-box;

background: rgb(255, 255, 255);

background: -moz-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(247, 247, 247) 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(247, 247, 247) 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(247, 247, 247) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0); /* IE6-9 */

border: 1px solid rgba(0, 0, 0, 0.11);

/* ensure debug toolbar text is displayed ltr even on rtl pages */

direction: ltr;

}

.yii-debug-toolbar.yii-debug-toolbar_active:not(.yii-debug-toolbar_animating) .yii-debug-toolbar__bar {

overflow: visible;

}

.yii-debug-toolbar:not(.yii-debug-toolbar_active) .yii-debug-toolbar__bar,

.yii-debug-toolbar.yii-debug-toolbar_animating .yii-debug-toolbar__bar {

height:40px;

}

.yii-debug-toolbar__bar:after {

content: '';

display: table;

clear: both;

}

.yii-debug-toolbar__view {

height: 0;

overflow: hidden;

background: white;

}

.yii-debug-toolbar__view iframe {

margin: 0;

padding: 0;

padding-top: 10px;

height: 100%;

width: 100%;

border: 0;

}

.yii-debug-toolbar_iframe_active .yii-debug-toolbar__view {

height: 100%;

}

.yii-debug-toolbar_iframe_animating .yii-debug-toolbar__view {

transition: height .3s ease;

}

.yii-debug-toolbar__block {

float: left;


margin: 0;

border-right: 1px solid rgba(0, 0, 0, 0.11);

padding: 4px 8px;

line-height: 32px;

white-space: nowrap;

}

.yii-debug-toolbar__block_active,

.yii-debug-toolbar__ajax:hover {

background: rgb(247, 247, 247); /* Old browsers */

background: -moz-linear-gradient(top, rgb(247, 247, 247) 0%, rgb(224, 224, 224) 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, rgb(247, 247, 247) 0%, rgb(224, 224, 224) 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, rgb(247, 247, 247) 0%, rgb(224, 224, 224) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#e0e0e0', GradientType=0); /* IE6-9 */

}

.yii-debug-toolbar__block a {

display: inline-block;

text-decoration: none;

color: black;

}

.yii-debug-toolbar__block img {

vertical-align: middle;

}

.yii-debug-toolbar__label {

display: inline-block;

padding: 2px 4px;

font-size: 12px;

font-weight: normal;

line-height: 14px;

white-space: nowrap;

vertical-align: middle;

max-width: 100px;

overflow-x: hidden;

text-overflow: ellipsis;

color: #ffffff;

text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

background-color: #999999;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

}

.yii-debug-toolbar__label:empty {

display: none;

}

a.yii-debug-toolbar__label:hover,

a.yii-debug-toolbar__label:focus {

color: #ffffff;

text-decoration: none;

cursor: pointer;

}

.yii-debug-toolbar__label_important,

.yii-debug-toolbar__label_error {

background-color: #b94a48;

}

.yii-debug-toolbar__label_important[href] {

background-color: #953b39;

}

.yii-debug-toolbar__label_warning,

.yii-debug-toolbar__badge_warning {

background-color: #f89406;

}

.yii-debug-toolbar__label_warning[href] {

background-color: #c67605;

}

.yii-debug-toolbar__label_success {

background-color: #468847;

}

.yii-debug-toolbar__label_success[href] {

background-color: #356635;

}

.yii-debug-toolbar__label_info {

background-color: #3a87ad;

}

.yii-debug-toolbar__label_info[href] {

background-color: #2d6987;

}

.yii-debug-toolbar__label_inverse,

.yii-debug-toolbar__badge_inverse {

background-color: #333333;

}

.yii-debug-toolbar__label_inverse[href],

.yii-debug-toolbar__badge_inverse[href] {

background-color: #1a1a1a;

}

.yii-debug-toolbar__title {

background: rgb(247, 247, 247); /* Old browsers */

background: -moz-linear-gradient(top, rgb(247, 247, 247) 0%, rgb(224, 224, 224) 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, rgb(247, 247, 247) 0%, rgb(224, 224, 224) 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, rgb(247, 247, 247) 0%, rgb(224, 224, 224) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#e0e0e0', GradientType=0); /* IE6-9 */

}

.yii-debug-toolbar__block_last{ /* creates space for .yii-debug-toolbar__toggle, .yii-debug-toolbar__external */

width: 80px;

height: 40px;

float: left;

}

.yii-debug-toolbar__toggle,

.yii-debug-toolbar__external {

cursor: pointer;

position: absolute;

width: 30px;

height: 30px;

font-size: 25px;

font-weight: 100;

line-height: 28px;

color: #ffffff;

text-align: center;

opacity: 0.5;

filter: alpha(opacity=50);

transition: opacity .3s ease;

}

.yii-debug-toolbar__toggle:hover,

.yii-debug-toolbar__toggle:focus,

.yii-debug-toolbar__external:hover,

.yii-debug-toolbar__external:focus {

color: #ffffff;

text-decoration: none;

opacity: 0.9;

filter: alpha(opacity=90);

}

.yii-debug-toolbar__toggle-icon,

.yii-debug-toolbar__external-icon {

display: inline-block;

background-position: 50% 50%;

background-repeat: no-repeat;


}

.yii-debug-toolbar__toggle {

right: 10px;

bottom: 4px;

}

.yii-debug-toolbar__toggle-icon {

padding: 7px 0;

width: 10px;

height: 16px;

background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDUwIDUwIj48cGF0aCBmaWxsPSIjNDQ0IiBkPSJNMTUuNTYzIDQwLjgzNmEuOTk3Ljk5NyAwIDAgMCAxLjQxNCAwbDE1LTE1YTEgMSAwIDAgMCAwLTEuNDE0bC0xNS0xNWExIDEgMCAwIDAtMS40MTQgMS40MTRMMjkuODU2IDI1LjEzIDE1LjU2MyAzOS40MmExIDEgMCAwIDAgMCAxLjQxNHoiLz48L3N2Zz4=');

transition: -webkit-transform .3s ease-out;

transition: transform .3s ease-out;

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

.yii-debug-toolbar_active .yii-debug-toolbar__toggle-icon {

-webkit-transform: rotate(0);

transform: rotate(0);

}

.yii-debug-toolbar_iframe_active .yii-debug-toolbar__toggle-icon {

-webkit-transform: rotate(90deg);

transform: rotate(90deg);

}

.yii-debug-toolbar__external {

display: none;

right: 50px;

bottom: 4px;

}

.yii-debug-toolbar_iframe_active .yii-debug-toolbar__external {

display: block;

}

.yii-debug-toolbar__external-icon {

padding: 8px 0;

width: 14px;

height: 14px;

background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDUwIDUwIj48cGF0aCBmaWxsPSIjNDQ0IiBkPSJNMzkuNjQyIDkuNzIyYTEuMDEgMS4wMSAwIDAgMC0uMzgyLS4wNzdIMjguMTAzYTEgMSAwIDAgMCAwIDJoOC43NDNMMjEuNyAyNi43OWExIDEgMCAwIDAgMS40MTQgMS40MTVMMzguMjYgMTMuMDZ2OC43NDNhMSAxIDAgMCAwIDIgMFYxMC42NDZhMS4wMDUgMS4wMDUgMCAwIDAtLjYxOC0uOTI0eiIvPjxwYXRoIGQ9Ik0zOS4yNiAyNy45ODVhMSAxIDAgMCAwLTEgMXYxMC42NmgtMjh2LTI4aDEwLjY4M2ExIDEgMCAwIDAgMC0ySDkuMjZhMSAxIDAgMCAwLTEgMXYzMGExIDEgMCAwIDAgMSAxaDMwYTEgMSAwIDAgMCAxLTF2LTExLjY2YTEgMSAwIDAgMC0xLTF6Ii8+PC9zdmc+');

}

.yii-debug-toolbar__switch-icon {

margin-left: 10px;

padding: 5px 10px;

width: 18px;

height: 18px;

background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDUwIDUwIiB2ZXJzaW9uPSIxLjEiPjxwYXRoIGQ9Im00MS4xIDIzYy0wLjYgMC0xIDAuNC0xIDF2MTAuN2wtMjUuNi0wLjFjMCAwIDAtMiAwLTIuOCAwLTAuOC0wLjctMS0xLTAuNmwtMy41IDMuNWMtMC42IDAuNi0wLjYgMS4zIDAgMmwzLjQgMy40YzAuNCAwLjQgMS4xIDAuMiAxLTAuNmwwLTIuOWMwIDAgMjAuOCAwLjEgMjYuNiAwIDAuNiAwIDEtMC40IDEtMXYtMTEuN2MwLTAuNi0wLjQtMS0xLTF6TTkgMjYuOSA5IDI2LjkgOSAyNi45IDkgMjYuOSIvPjxwYXRoIGQ9Im05IDI2LjljMC42IDAgMS0wLjQgMS0xdi0xMC43bDI1LjYgMC4xYzAgMCAwIDIgMCAyLjggMCAwLjggMC43IDEgMSAwLjZsMy41LTMuNWMwLjYtMC42IDAuNi0xLjMgMC0ybC0zLjQtMy40Yy0wLjQtMC40LTEuMS0wLjItMSAwLjZsMCAyLjljMCAwLTIwLjgtMC4xLTI2LjYgMC0wLjYgMC0xIDAuNC0xIDF2MTEuN2MwIDAuNiAwLjQgMSAxIDF6Ii8+PC9zdmc+');

}

.yii-debug-toolbar__ajax {

position: relative;

}

.yii-debug-toolbar__ajax:hover .yii-debug-toolbar__ajax_info,

.yii-debug-toolbar__ajax:focus .yii-debug-toolbar__ajax_info {

visibility: visible;

}

.yii-debug-toolbar__ajax_info {

visibility: hidden;

transition: visibility .2s linear;

background-color: white;

box-shadow: inset 0 -10px 10px -10px #e1e1e1;

position: absolute;

bottom: 40px;

left: -1px;

padding: 10px;

max-width: 480px;

max-height: 480px;

word-wrap: break-word;

overflow: hidden;

overflow-y: auto;

box-sizing: border-box;

border: 1px solid rgba(0, 0, 0, 0.11);

z-index: 1000001;

}

.yii-debug-toolbar__ajax a {

color: #337ab7;

}

.yii-debug-toolbar__ajax table {

width: 100%;

table-layout: auto;

border-spacing: 0;

border-collapse: collapse;

}

.yii-debug-toolbar__ajax table td {

padding: 4px;

font-size: 12px;

line-height: normal;

vertical-align: top;

border-top: 1px solid #ddd;

}

.yii-debug-toolbar__ajax table th {

padding: 4px;

font-size: 11px;

line-height: normal;

vertical-align: bottom;

border-bottom: 2px solid #ddd;

}

.yii-debug-toolbar__ajax_request_status {

color: white;

padding: 2px 5px;

}

.yii-debug-toolbar__ajax_request_url {