Структура сайта
Требования:
• Приложение должно быть выполнено как функционирующий web-узел, взаимосвязанный с веб-страницами
• Минимальное количество веб-станиц - 5.
• Веб-страницы, объединенные общей темой и дизайном создаются на языках HTML, DHTML, JavaScript, XML и содержат гиперссылки для быстрого перехода на другие страницы
Результат:
Требования:
• Ко всему сайту для форматирования текста/объектов должна применяться единая каскадная таблица стилей.
Результат:
Default.css
/* Menu
-------------------------------------------------------------- */
nav {
height: 40px;
background: black;
background: rgba(0, 0, 0, 0.9);
text-transform: uppercase;
}
navul {
padding: 0;
width: 800px;
margin: 0 auto;
}
navul li {
list-style: none;
font-size: 15px;
}
navul li a {
text-decoration: none;
float: left;
display: block;
padding: 10px 20px;
color: white;
}
navul li a:hover {
color: #2a70d9;
}
nav.logindiv {
display: none;
}
nav b{
color: coral;
text-decoration: none;
float: right;
display: block;
padding: 10px 20px;
}
/* Header
-------------------------------------------------------------- */
.site-header {
height: 500px;
margin: 0 0 50px 0;
background: url(images/header.jpg) no-repeat center;
}
.mnd-position {
position: relative;
max-width: 1100px;
height: 100%;
margin: 0 auto;
}
.site-branding {
position: absolute;
bottom: 50px;
left: 0;
text-transform: uppercase;
}
.site-title {
font: 700 50px/.8 'Open Sans Condensed', sans-serif;
margin: 0;
color: #fff;
}
.site-title span {
font-size: 30px;
font-weight: 300;
line-height: 41px;
display: inline-block;
margin: 5px 0 0 0;
padding: 0 1px 0 5px;
-webkit-transform: rotate(355deg);
-moz-transform: rotate(355deg);
-o-transform: rotate(355deg);
transform: rotate(355deg);
vertical-align: top;
letter-spacing: 5px;
background: #ec4c00;
}
.site-url {
font: 700 10px/2.5 'Open Sans Condensed', sans-serif;
letter-spacing: 5px;
color: #b8b8b8;
}
/* Content
-------------------------------------------------------------- */
.content {
margin: 0 auto;
max-width: 640px;
width: 94%;
}
.content img {
max-width: 800px;
height: auto;
z-index: 100000;
}
.contentLogo{
width: 900px;
height: 500px;
background: rgba(201, 201, 201, 0.35);
margin: auto;
}
.content h1 {
margin-top: 0;
}
.content p {
text-align: justify;
}
/* Footer
-------------------------------------------------------------- */
footer {
position: absolute;
background: #333333;
right: 0;
bottom: 0;
left: 0;
/*padding: 1rem;*/
/*background-color: #efefef;*/
text-align: center;
}
.footerLinks {
text-align: center;
}
.footerLinksul {
padding: 0;
list-style-type: none;
margin: 0;
}
.footerLinks li {
display: inline;
padding: 5px;
}
.footerLinks a {
color: #d9d9d9;
text-decoration: none;
font-size: 13px;
}
.copyright {
text-align: center;
}
.copyright p {
margin: 0;
color: #b3b3b3;
font-size: 11px;
}
/* Patterns
-------------------------------------------------------------- */
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
embed,
iframe,
object,
video {
max-width: 100%;
vertical-align: middle;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
Требования:
• Авторизацию осуществить c пoмощью Javascript.
• Данные (логин, пароль), а также ресурсные данные (видео-, звуковые файлы, изображения и т.д.) должны храниться в отдельном(ых) файле(ах).
Результат:
Рисунок 1. Форма входа на сайт
Loginform.js
$(document).ready(function () {
logout();
$('#sendloginpass').bind('click', function () {
console.log('click');
auth($("input[name='username']").val(), $("input[name='password']").val());
});
});
Auth.js
var user = {
login: '',
pass: '',
load: function () {
varls = window.localStorage;
varlogin,pass;
login = ls.getItem('login');
pass = ls.getItem('pass');
auth(login, pass);
},
save: function () {
varls = window.localStorage;
var login, pass;
ls.setItem('login', this.login);
ls.setItem('pass', this.pass);
}
};
functionauth(login, pass) {
varloginnotsuccess = true;
$.getJSON("resourses/data/loginpass.json", function (data) {
$.each(data, function (jsonlogin, jsonpass) {
if ((jsonlogin == login) && (jsonpass == pass)) {
console.log('успешнаяавторизация');
user.login = login;
user.pass = pass;
user.save();
show_username(login);
loginnotsuccess = false;
return false;
}
});
if (loginnotsuccess) {
console.log('ошибкаавторизации');
window.location = "./loginform.html"
}
});
}
function logout() {
console.log('успешныйвыход');
user.login = '';
user.pass = '';
user.save();
}
varshow_username = function (userName) {
$('#userName').text(userName);
$('#logindiv').css("display", "block");
};
Loginpass.json
{
"test":"test",
"test1":"test1"
}
Вёрстка
Требования:
• Использование блочной вёрстки с использованием 2-3 видов позиционирования и определения z-indexна различных страницах.
Результат:
Рисунок 2. Блочная вёрстка сайта
CSS
Требования:
• Использовать CSSReset.
Результат:
Reset.css
html {
height: 100%;
box-sizing: border-box;
/*border-box - В width входят padding-right, padding-left, border-right-width и border-left-width
ширина = width + margin-right + margin-left
В height входят padding-top, padding-bottom, border-top-width и border-bottom-width
высота = height + margin-top + margin-bottom*/
}
*,
*:before,
*:after {
box-sizing: inherit;/*наследуетзначениеродителя*/
}
ul {
list-style: square;
}
ol {
list-style: decimal;
}
table {
width: 100%;
}
td,
th {
padding: 10px;
border-bottom: 1px solid #ededed;
}
th {
font-weight: 700;
background: #ededed;
}
body {
position: relative;
margin: 0;
padding-bottom: 2rem;/*чтобы footer ненаезжалнатекст*/
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
Требования:
• Указаны стили для заголовков, текста, параграфов, картинок.
Результат:
Требования:
• Использование псевдоклассов для ссылок, дочерних элементов, табличных элементов, фокуса.
• Использование псевдоэлементов для оформления стиля текста.
Результат:
Loginform.css
div.login-form, login-form.div:before, login-form.div:after {
box-sizing: content-box;
}
/*удалим все поля, отступы, границы и т.д. из элементов,
которые мы будем использовать*/
.login-form,
.login-form h1,
.login-form span,
.login-form input,
.login-form label {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
/*зададим стили для контейнера формы.добавим относительное позиционирование,
фиксированную ширину и высоту, цвет фона, закругленные углы и тени.*/
.login-form {
position: relative;
width: 200px;
height: 200px;
padding: 15px 25px 0 25px;
margin-top: 15px;
cursor: default;
background-color: #141517;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255,.2), inset 0px 1px 1px 0px rgb(0,0,0);
-moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255,.2), inset 0px 1px 1px 0px rgb(0,0,0);
box-shadow: 0px 1px 1px 0px rgba(255,255,255,.2), inset 0px 1px 1px 0px rgb(0,0,0);
}
/*Добавим некоторые стили для заголовка формы
(цвет, шрифт и размер, и т.д.)*/
.login-form h1 {
line-height: 40px;
font-family: 'Myriad Pro', sans-serif;
font-size: 22px;
font-weight: normal;
color: #e4e4e4;
}
/*Сначала зададим основные стили для input-ов.*/
.login-form input[type=text],
.login-form input[type=password],
.login-form input[type=submit] {
line-height: 14px;
margin: 10px 0;
padding: 6px 15px;
border: 0;
outline: none;
font-family: Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-shadow: 0px 1px 1pxrgba(255,255,255,.2);
-webkit-border-radius: 26px;
-moz-border-radius: 26px;
border-radius: 26px;
-webkit-transition: all.15s ease-in-out;
-moz-transition: all.15s ease-in-out;
-o-transition: all.15s ease-in-out;
transition: all.15s ease-in-out;
}
/*Затем зададим стили для полей ввода логина и пароля.
добавим градиентный серый фон и тени.
также добавим фиксированную ширину, равную 170px, и цвет для текста.*/
.login-form input[type=text],
.login-form input[type=password],
.js.login-form span {
color: #686868;
width: 170px;
-webkit-box-shadow: inset 1px 1px1px 0px rgba(255,255,255,.6);
-moz-box-shadow: inset 1px 1px1px 0px rgba(255,255,255,.6);
box-shadow: inset 1px 1px1px 0px rgba(255,255,255,.6);
background: #989898;
background: -moz-linear-gradient(top, #ffffff 0%, #989898 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#989898));
background: -webkit-linear-gradient(top, #ffffff 0%,#989898 100%);
background: -o-linear-gradient(top, #ffffff 0%,#989898 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#989898 100%);
background: linear-gradient(top, #ffffff 0%,#989898 100%);
}
/*При наведении курсора мыши на эти поля будем изменять их тени.*/
.login-form input[type=text]:hover,
.login-form input[type=password]:hover {
-webkit-box-shadow: inset 1px 1px1px 0px rgba(255,255,255,.6), 0px 0px 5px rgba(255,255,255,.5);
-moz-box-shadow: inset 1px 1px1px 0px rgba(255,255,255,.6), 0px 0px 5px rgba(255,255,255,.5);
box-shadow: inset 1px 1px1px 0px rgba(255,255,255,.6), 0px 0px 5px rgba(255,255,255,.5);
}
/*Для активного состояния мы изменим CSS3 градиент
на немного более светлый*/
.login-forminput[type=text]:focus,
.login-form input[type=password]:focus {
background: #e1e1e1;
background: -moz-linear-gradient(top, #ffffff 0%, #e1e1e1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e1e1e1));
background: -webkit-linear-gradient(top, #ffffff 0%,#e1e1e1 100%);
background: -o-linear-gradient(top, #ffffff 0%,#e1e1e1 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#e1e1e1 100%);
background: linear-gradient(top, #ffffff 0%,#e1e1e1 100%);
}
/*Расположимкнопкупоцентру*/
.login-form input[type=submit] {
float: left;
padding: 6px 20px;
margin: 15px 60px;
cursor: pointer;
color: #445b0f;
-webkit-box-shadow: inset 1px 1px1px 0px rgba(255,255,255,.45), 0px 1px 1px 0px rgba(0,0,0,.3);
-moz-box-shadow: inset 1px 1px1px 0px rgba(255,255,255,.45), 0px 1px 1px 0px rgba(0,0,0,.3);
box-shadow: inset 1px 1px1px 0px rgba(255,255,255,.45), 0px 1px 1px 0px rgba(0,0,0,.3);
}
/*При наведении мыши изменим тени, а в активном состоянии - удалим их.*/
.login-form input[type=submit]:hover {
-webkit-box-shadow: inset 1px 1px 3px 0px rgba(255,255,255,.8), 0px 1px 1px 0px rgba(0,0,0,.6);
-moz-box-shadow: inset 1px 1px 3px 0px rgba(255,255,255,.8), 0px 1px 1px 0px rgba(0,0,0,.6);
box-shadow: inset 1px 1px 3px 0px rgba(255,255,255,.8), 0px 1px 1px 0px rgba(0,0,0,.6);
}
.login-form input[type=submit]:active { /*псевдокласс:active*/
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/*Добавим зеленый градиент для кнопки.*/
.login-form input[type=submit],
.js.login-form:before {
background: #a5cd4e;
background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
}
/*Все стили, которые имеют класс "js" в начале,
будут применяться только если включена поддержка JavaScript. */
body {
background:url(images/bg.png) center;
margin: 0 auto;width: 960px;
padding-top: 50px
}
.login-form {
margin: 50px auto;
}
HistoryOfGenerations.css
.HistoryOfGenerations span {
color: gray;
font-size: 70%;
font-style: normal;
text-align:center;
}
table.HistoryOfGenerations {
margin: 1em 1em1em 0;
background: #f9f9f9;
border: 1px #aaa solid;
border-collapse: collapse;
font-size: 90%;
}
table.HistoryOfGenerations, table.HistoryOfGenerations td {
border-color: #aaa;
padding-left: 0.2em;
padding-right: 0.2em;
}
table.HistoryOfGenerations {
background: #B0C4DE;
}
table.HistoryOfGenerations td:nth-child(2) { /*использованиепсевдокласса:nth-child*/
text-align:center;
}
.entered { /*длядемонстрациисобытийmouseentermouseleave*/
color: #ca1f27;
}
.content img {
z-index: 2000;
}
Использование библиотек:
Требование:
• Использовать библиотеку jQuery, Dojo или Prototype (по выбору).
• Применить фильтры контента, фильтры видимости, форм и атрибутов.
• Использование динамических элементов на странице (динамическое меню, текст или меню с всплывающей подсказкой, динамический выпадающий список).
• На одной из страниц разместить интерактивную анимацию
• Интерактивное удаление и добавление элементов (картинок, списков, полей).
Реализация:
Использована библиотека jQuery
auth.js
varshow_username = function (userName) {
$('#userName').text(userName);
$('#logindiv').css("display", "block");
};
Использование Ajax
Требование:
• Загрузка данных в формате json(не менее 8 видов различных данных с обязательным наличием массива, например, массива оценок или предметов) из html-файла.
• Привязка(bind) 3 любыхсобытийвида: focus(),.focusin(),.focusout(),.load(),.resize(),.scroll(),.unload(),.click(),.dblclick(),.mousedown(),.mouseup(),.mousemove(),.mouseover(),.mouseout(),.mouseenter(),.mouseleave(),.change(),.select(),.submit(),.keydown(),.keypress(),.keyup(),.error().
Результат:
Filmography.js
$.getJSON("resourses/data/HistoryOfGenerations.json", function (data) {
varresultitems = [];
$.each(data, function (rowindex, items) {
resultitems.push("<tr>");
if (rowindex == 0) {
$.each(items, function (colcount, item) {
resultitems.push("<th>" + item + "</th>");
});
} else {
$.each(items, function (colcount, item) {
resultitems.push("<td>" + item + "</td>");
});
}
resultitems.push("</tr>");
});
$("<table/>", {
"class": "HistoryOfGenerations ",
"rules": "all",
"cellpadding": "4",
html: resultitems.join("")
}).appendTo("article");
$(".HistoryOfGenerations td").bind("mouseentermouseleave", function () {
$(this).toggleClass("entered");
});
});
Loginform.js
var user = {
login: '',
pass: '',
load: function () {
varls = window.localStorage;
varlogin,pass;
login = ls.getItem('login');
pass = ls.getItem('pass');
auth(login, pass);
},
save: function () {
varls = window.localStorage;
var login, pass;
ls.setItem('login', this.login);
ls.setItem('pass', this.pass);
}
};
functionauth(login, pass) {
varloginnotsuccess = true;
$.getJSON("resourses/data/loginpass.json", function (data) {
varresultitems = [];
$.each(data, function (jsonlogin, jsonpass) {
if ('test' == login && 'test' == pass) {
console.log('успешнаяавторизация');
// hide_form(login);
user.login = login;
user.pass = pass;
user.save();
loginnotsuccess = false;
return false;
}
});
});
if (loginnotsuccess) {
console.log('ошибкаавторизации');
window.location = "./loginform.html"
}
}
function logout() {
console.log('успешныйвыход');
user.login = '';
user.pass = '';
user.save();
}
Скриншоты
Рисунок 3. Главная страница
Рисунок 4. О номерах отеля
Рисунок 5. Прайс лист