Разработка сайта автоматизированного тестирования: оформление сайта с использованием CSS
Дипломная работа - Компьютеры, программирование
Другие дипломы по предмету Компьютеры, программирование
В°жений ---- */
var i = 0,
o,= data.length;( o = data[i++] ) {
/* ---- изображения ---- */x = 1000 * ((i % 4) - 1.5);y = Math.round(Math.random() * 4000) - 2000;z = i * (5000 / n);.push( new Diapo(i - 1, o, x, y, z));
/* ---- прозрачные рамки ---- */k = diapo.length - 1;(var j = 0; j < 3; j++) {x = Math.round(Math.random() * 4000) - 2000;y = Math.round(Math.random() * 4000) - 2000;.push( new Diapo(k, null, x, y, z + 100));
}
}
/* ---- запуск движка ---- */
run();
}
////////////////////////////////////////////////////////////////////////////
/* ==== основной цикл ==== */
var run = function () {
/* ---- пермещение по оси x ---- */
if (camera.tx) {
(!camera.s) camera.setTarget(camera.x, camera.tx);m = camera.tween('x'); (!m) camera.tx = 0;
/* ---- перемещение по оси y ---- */
} else if (camera.ty) {(!camera.s) camera.setTarget(camera.y, camera.ty);m = camera.tween('y'); (!m) camera.ty = 0;
/* ---- перемещение по оси z ---- */
} else if (camera.tz) {(!camera.s) camera.setTarget(camera.z, camera.tz);m = camera.tween('z'); (!m) {
/* ---- конец анимации ---- */
camera.tz = 0;
interpolation(true);
/* ---- активируем гиперссылку ---- */(selected.url) {.img.style.cursor = "pointer";.urlActive = true;.img.className = "href";.diapo = selected;.onclick = selected.img.onclick;.innerHTML = selected.title || selected.url;.style.visibility = "visible";.style.color = selected.color || "#fff";.style.top = Math.round(selected.img.offsetTop + selected.img.offsetHeight - urlInfo.offsetHeight - 5) + "px";.style.left = Math.round(selected.img.offsetLeft + selected.img.offsetWidth - urlInfo.offsetWidth - 5) + "px";
} else {.img.style.cursor = "default";
}
}
}
/* ---- анимация изображения ---- */
var i = 0, o;
while( o = diapo[i++] ) o.anim();
ЗАКЛЮЧЕНИЕ
В данной работе был разработан CSS файл позволяющий осуществлять смену стиля сайта.
Реализованы следующие поставленные задачи:
рассмотрены понятия - CSS-вёрстка, применение CSS к HTML, позиционирование элементов.
приведена краткая характеристика синтаксиса CSS;
В результате изучения темы можно сделать следующие выводы:
1.Основная идея CSS в том, чтобы отделить дизайн документа от его содержимого. CSS отвечает за оформление и внешний вид, а XHTML/HTML - за содержание и логическую структуру документа.
.Если в нескольких селекторах используются одни и те же объявления, их можно сгруппировать в список, разделив запятыми.
СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ
1.Зольников Д.С. PHP 5. Как самостоятельно создать сайт любой сложности. - М.: НТ Пресс, 2005. - 109 с.
2.Мак Т., Вест Р. Dreamweaver MX 2004. Шаг за шагом. Самоучитель. - М.: ЭКОМ, 2006. - 312 с.
.Хестер Н. Создание Web-страниц в Dreamweaver. - М.: НТ Пресс, 2005. - 104 с.
4.Шмитт К., Трамвел М., Домини Т. CSS: каскадные таблицы стилей для web-дизайна.
.Кристофер Шмитт. CSS. Рецепты программирования = CSS. - СПб.: БХВ-Петербург, 2007. - 592 с.
.Энди Бадд, Камерон Молл, Саймон Коллизон. Мастерская CSS: профессиональное применение Web-стандартов. - М.: Вильямс, 2007. - 272 с.
.Эрик А. Мейер. CSS-каскадные таблицы стилей: подробное руководство.- М.: Символ , 2006. - 576 с.
.Расс Уикли. Освой самостоятельно CSS. 10 минут на урок. - М.: Вильямс, 2006. - 256 с.
ПРИЛОЖЕНИЯ
CSS-код
* {margin: 0; padding: 0; border: none; }
{scrollbar-face-color:#f964a1;shadow-color: #ffffff;highlight-color: #ffffff;dlight-color: #f964a1;darkshadow-color: #f964a1;track-color: #7b538f;arrow-color: #7b538f;}{:#aff url(333.jpg) no-repeat top center;family:Arial;:1200px;
}
#container{ position:relative;:8%;
}
{: #7b538f;: italic bold "Times New Roman", "Georgia", sans-serif;
}
#navigation {: fixed;: 0 auto;: 0px;: 0px;: 10px;style: none;index:999999;:721px;
}#navigation li {: 103px;:inline;:left;
}#navigation li a {: block;:left;top: -2px;left:25px;: 100px;: 25px;color:#f964a1;repeat:no-repeat;position:50% 10px;:1px solid #10dbed;
moz-border-radius:0px 0px 10px 10px;
webkit-border-bottom-right-radius: 10px;
webkit-border-bottom-left-radius: 10px;
khtml-border-bottom-right-radius: 10px;
khtml-border-bottom-left-radius: 10px;decoration:none;align:center;top:80px;: 0.7;:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}#navigation li a:hover{color:#d1a6c4;
}#navigation li a span{spacing:2px;size:15px;weight: bolder;:#10dbed;shadow: 0 -1px 1px #fff;
}#navigation .home a{image: url(../images/home.png);
}#navigation .tests a {image: url(../images/user_accept.png);
}#navigation .rules a {image: url(../images/lit.png);
}#navigation .photos a {image: url(../images/test.png);
}#navigation .about a {image: url(../images/business_users.png);}
#simplemodal-overlay {background-color:#aaaaaa; cursor:wait;}
#simplemodal-container {height: 410px; width: 500px; background-color:#fff; border:1px solid #000000; -moz-border-radius: 5px; }
#simplemodal-container a.modalCloseImg {background:url('x.png') no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; left:-18px; cursor:pointer;}
#simplemodal-container #basicModalContent {padding:8px;}
#recentposts { width:205px;:url(../images/postitBack.gif);
}
#recentposts ul {:0;:0;
}
#recentposts ul li {size:11px;height:18px;style:none;:0;:0;
}
#recentposts ul li a {:#21565E;top:1px solid #ffffbe;:block;:170px;:0 auto;:4px 0 4px 25px;:url(../images/bullet-postit.gif) no-repeat 5px 8px;
}
#recentposts ul li a:hover {decoration:none;:#000;:url(../images/bullet-postit-on.gif) no-repeat 5px 8px #ff5092;
}
#col02 {position:relative;: 28%;: 11%;:200px;:right;
}
#text { position:relative;: 47%;: 20%;:70%;family: Verdana, Arial, Helvetica, sans-serif;
}
#text1 { position:relative;: 20%;: 20%;:51%;align:justify;
}
.last{ position:absolute;: 40%;: 146%;
}
{bottom: 15px;size: 18px;
}
.slideBox {: 400px;: 320px;: absolute;: left;left: 25%;top: 55%;: hidden;: 5px solid #bc688c;
}
.slideBox img {: absolute;index: 2;: 400px;: 320px;
}
.slideBox div.content {: absolute;
index: 1;: 10px;
}