Разработка сайта автоматизированного тестирования: оформление сайта с использованием 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;

}