Добавлен: 13.05.2023
Просмотров: 545
Скачиваний: 5
В процессе создания web-сайта изучена методика программирования HTML, создания web-страницы и использования базовых тегов.
Опробовано программное обеспечение по работе с файлами разных форматов и расширений для корректного отображения в среде интернета.
В данной курсовой работе рассмотрены актуальные вопросы разработки и создания современного Web-сайта с применением языка текстовой разметки HTML.
При этом были решены задачи, поставленные при написании данной работы.
В результате проведенных работ цель курсовой работы была достигнута.
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
- Andy, Harris HTML, XHTML and CSS All–In–One For Dummies® / Andy Harris. - Москва: Машиностроение, 2012. - 254 c.
- Ben, Henick HTML & CSS – The Good Parts / Ben Henick. - Москва: СИНТЕГ, 2014. - 350 c.
- Ed, Tittel HTML, XHTML & CSS For Dummies® / Ed Tittel. - Москва: Высшая школа, 2015. - 416 c.
- Дакетт, Джон HTML и CSS. Разработка и дизайн веб-сайтов (+ CD-ROM) / Джон Дакетт. - М.: Эксмо, 2013. - 480 c.
- Дакетт, Джон Основы веб-программирования с использованием HTML, XHTML и CSS / Джон Дакетт. - М.: Эксмо, 2015. - 768 c.
- Дебольт HTML и CSS. Совместное использование / Дебольт, Вирджиния. - М.: НТ Пресс, 2016. - 512 c.
- Дронов, В. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / В. Дронов. - М.: БХВ-Петербург, 2014. - 351 c.
- Дронов, Владимир HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / Владимир Дронов. - М.: БХВ-Петербург, 2016. - 416 c.
- Квинт, Игорь Создаем сайты с помощью HTML, XHTML и CSS / Игорь Квинт. - М.: Питер, 2014. - 448 c.
- Лазаро, Исси Коэн Полный справочник по HTML, CSS и JavaScript / Лазаро Исси Коэн, Джозеф Исси Коэн. - М.: ЭКОМ Паблишерз, 2016. - 943 c.
- Мержевич, Влад HTML и CSS на примерах / Влад Мержевич. - М.: "БХВ-Петербург", 2016. - 448 c.
- Никсон, Р. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 / Р. Никсон. - Москва: Мир, 2016. - 688 c.
- Никсон, Робин Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript и CSS / Робин Никсон. - М.: "Издательство "Питер", 2013. - 560 c.
- Пауэрс, Дэвид Adobe Dreamweaver, CSS, Ajax и PHP / Дэвид Пауэрс. - М.: БХВ-Петербург, 2014. - 982 c.
- Прохоренок, Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера / Н.А. Прохоренок, В.А. Дронов. - Москва: РГГУ, 2015. - 768 c.
- Прохоренок, Николай HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера (+ CD-ROM) / Николай Прохоренок. - М.: БХВ-Петербург, 2013. - 912 c.
- Пфаффенбергер HTML, XHTML и CSS. Библия пользователя / Пфаффенбергер и др. - М.: Вильямс; Издание 3-е, 2014. - 752 c.
- Ташков, Петр Веб-мастеринг HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка / Петр Ташков. - М.: Книга по Требованию, 2012. - 512 c.
- Титтел, Эд HTML, XHTML и CSS для чайников / Эд Титтел , Джефф Ноубл. - М.: Диалектика, 2016. - 400 c.
- Фримен, Элизабет Изучаем HTML, XHTML и CSS / Элизабет Фримен , Эрик Фримен. - М.: Питер, 2016. - 720 c.
- Хольцшлаг, Молли Э. Использование HTML 4. Специальное издание (+ CD - ROM) / Хольцшлаг Молли Э.. - М.: Вильямс, 2016. - 988 c.
- Чебыкин, Ростислав Самоучитель HTML и CSS. Современные технологии / Ростислав Чебыкин. - Москва: Мир, 2013. - 624 c.
- Чуковский, К. Coc-the-roach. Тараканище / К. Чуковский. - М.: Детская литература, 2016. - 818 c.
- Шафер, Стивен HTML, XHTML и CSS. Библия пользователя / Стивен Шафер. - Москва: Высшая школа, 2012. - 656 c.
- Эрик, Фримен Изучаем 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"> </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> </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">© 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 {