Разработка сайта автоматизированного тестирования: оформление сайта с использованием CSS

Министерство образования Республики Беларусь

УО «Мозырский государственный педагогический университет имени И.П. Шамякина»

Физико-математический факультет

Кафедра информатики и методики преподавания информатики

Курсовая работа

Разработка сайта автоматизированного тестирования: оформление сайта с использованием CSS

Выполнила:

студентка 4 курса 4 группы

физико-математического факультета

Деревянко Юлия Владмировна

Мозырь 2010

РЕЗЮМЕ

Деревянко Юлия Владимировна

Разработка web-сайта и css-файла оформления

Ключевые слова:

CSS, internet, браузер, web-дизайн, шаблон, раздел, категория, объект содержимого.

Объект и предмет исследования. Объектом исследования в рамках курсовой работы выступает принципы разработки и создания css-файла. Предметом исследования являются средства разработки сайта программа Adobe Dreamweaver, блокнот, возможность разработки и создания web-сайта

Цель и задачи исследования. Цель настоящего исследования состоит в том, чтобы на основе программ для создания web-сайтов, научной литературы и практики комплексно исследовать актуальные вопросы использования css.

Для достижения указанной цели автором поставлены следующие задачи:

·        рассмотреть понятие css-вёрстка и её классификации;

·        изучить основные этапы проектирования и разработки web-сайта;

·        исследовать основные средства разработки;

Структура работы. Поставленные цели и задачи обусловили логическую структуру исследования. Курсовая работа состоит из введения, двух глав, включающих в себя пятнадцать параграфов, заключения, списка использованной литературы, состоящей из восьми источников, двух приложений.

Результатом данной работы является разработка информационной структуры дизайна, а также информационное наполнение web-сайта.

ОГЛАВЛЕНИЕ

ВВЕДЕНИЕ

ГЛАВА 1. ТЕОРЕТИЧЕСКАЯ ЧАСТЬ

.1 История возникновения CSS

.2 Что можно делать с помощью CSS

.3 Разница между CSS и HTML

.4 Какие преимущества даёт CSS

.5 Табличная верстка

.5.1 Преимущества таблиц

.5.2 Недостатки таблиц

.6 Блочная вёрстка

.6.1 Преимущества блочной вёрстки над табличной

ГЛАВА 2. ПРАКТИЧЕСКАЯ ЧАСТЬ

.1 Оформление «шапки» сайта

.2 Дизайн web-сайта

.3 Создание бокового меню

.4 Создание всплывающего модального окна при выходе

.5 Создание эффекта для изображения на странице “О нас”

.6 Создание 3D галереи

ЗАКЛЮЧЕНИЕ

СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ

ПРИЛОЖЕНИЯ

ВВЕДЕНИЕ

Тестирующие системы представляют собой последовательность заданий (наборов вопросов) с проверкой правильности исполнения и вычисления интегральной оценки усвоения материала. Необходимость в оценке и проверке уровня и качества знаний возникает в любой деятельности человека. Проблема адекватности и валидности результатов теста становиться еще острее при дистанционном и повсеместном использовании информационных технологий для тестирования и проверки знаний студентов, школьников, преподавателей и других категорий людей, для которых результаты теста имеют важное личностное значение. К концептуальным вопросам информатизации сферы образования целесообразно отнести вопрос использования системы компьютерного тестирования, позволяющей активно влиять на образовательный процесс, способствовать эффективному усвоению учебного материала, и используемой, с одной стороны, преподавателем для промежуточного и итогового контроля знаний и, с другой стороны, обучаемым для самооценки уровня своей подготовленности в процессе самостоятельной работы.

В свете сказанного выше, одной из первостепенных задач информатизации образовательного процесса является организация автоматизированного тестирующего комплекса, как вспомогательного средства контроля знаний. Тестовая система представляет собой автоматизированную поддержку самостоятельной работы студентов, школьников, позволяющую проводить контроль и самоконтроль уровня усвоения материала, выступать в роли тренажера при подготовке к экзаменам.

Говоря о создании сайтов, нельзя не упомянуть о Каскадных Таблицах Стилей (CSS, англ. Cascading Style Sheets). CSS это язык стилей, определяющий отображение HTML-документов. Например, CSS работает с шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами.

Появление CSS стало революцией в мире web-дизайна. Конкретные преимущества CSS:

·              управление отображением множества документов с помощью одной таблицы стилей;

·              более точный контроль над внешним видом страниц;

·              различные представления для разных носителей информации (экран, печать, и т. д.);

·              сложная и проработанная техника дизайна.

В связи с актуальностью использования сайтов автоматизированного тестирования, их широким распространением, мною и была выбрана данная тема курсовой работы. Основной целью является оформление сайта с использованием CSS.

ГЛАВА 1. ТЕОРЕТИЧЕСКАЯ ЧАСТЬ

 

.1 История возникновения CSS

CSS - одна из широкого спектра технологий, одобренных консорциумом W3C <#"514422.files/image001.gif">

Рисунок 2.1.1 - Верхнее меню

 

При наведении курсора мыши:

 

Рисунок 2.1.2 - Верхнее меню при наведении курсора мыши

 

2.2 Дизайн web-сайта

Устанавливаем фон сайта, вид полосы прокрутки, основные свойства html и body:

html {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;

}

 

2.3 Создание бокового меню

 

Боковое меню будет отражать последние добавленные новости.

HTML

Его, как и предыдущее создаем при помощи списков:

 

<div id="recentposts"> <ul >

<li ><a href="part.html"><span>Понятие алгоритма. Исполнитель алгоритмов</span></a></li>

<li ><a href="types.html"><span>Алгоритмы:линейные, с ветвлением, с повторением</span></a></li>

<li ><a href="ways.html"><span>Способы записи алгоритмов</span></a></li>

<li ><a href="block.html"><span>Способы записи алгоритмов: блок-схема</span></a></li>

<li ><a href="abc.html"><span>Чертежник</span></a></li>

<li ><a href="prac.html"><span>Чертежник. Практика</span></a></li>

 

CSS

Устанавливаем ширину меню, фоновое изображение, величину отступов, размер шрифта элемента, межстрочный интервал, задаем свойства для ссылок и изменение цвета при наведении курсора мыши:

 

#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;

 

В результате, меню выглядит следующим образом:

css дизайн сайт верстка

Рисунок 2.3.1 - Боковое меню

 

При наведении курсора мыши:

 

Рисунок 2.3.2 - Боковое меню при наведении курсора мыши

 

2.4 Создание всплывающего модального окна при выходе

 

Суть заключается в том, что как только посетитель наводит мышку на верхний край сайта (то есть пересекает его в попытке нажать на крестик для закрытия окна) запускается скрипт и выводит окно на экран.

Прописываем следующие строчки между тегами <head></head>:

 

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="jquery.simplemodal.js"></script>

<script type="text/javascript" src="init.js"></script>

 

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

 

Далее в документе вставляем текст всплывающей подсказки:

 

<div style="display: none; padding: 10px;" id="exit_content">

<h1>Прощай, о, дорогой посетитель!!</h1><h3>Спасибо, что уделил этому сайту свое внимание</h3><br /> Прощай, но обещай вернуться!!!

</div>

 

Суть данного метода заключается в том, что в файле init.js находится инструкция, которая вызывает всплывающее окно как только пользователь достигает последних 5 пикселей сайта. Значение "5" можно заменить на любое произвольное.

 

Рисунок 2.4 - Модальное окно при выходе

 

2.5 Создание эффекта для изображения на странице “О нас”

 

Под изображением находится необходимый текст, и при наведении мышкой на изображений, этот текст красиво занимает место изображения.

Все проделано благодаря фреймворку jQuery и CSS. В самом верху документа подключаем фреймворк и другие скрипты.

 

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript">

$(function() {

$(".slideBox").hover(function(){

$(this).find("img").stop().animate({:-325

}, 500);

}, function(){

$(this).find("img").stop().animate({

top:0

}, 500);

});

});

</script>

 

Теперь в теле документа в слой с классом "slideBox" помещаем изображение и текст под ним. Текст в свою очередь должен находится внутри <div> с классом "content":

 

<div id="cont">

<div>

<img src="images/picture1.jpg" alt="testing" />

 

<div>

<h1>HTML Ipsum Presents</h1>

<font color="#bc688c" face="Arial"><b>Адрес:</b></font> 247760 г. Мозырь, ул. Студенческая, 28, Республика Беларусь

<br> <font color="#bc688c" face="Arial"><b>Телефон:</b></font> (02351) 2-43-14 (приемная ректора), 2-43-17 (приемная комиссия)

<br> <font color="#bc688c" face="Arial"><b>Факс:</b></font> (02351) 2-54-26

<br> <font color="#bc688c" face="Arial"><b>E-mail:</b></font> mozvuz@mail.gomel.by

<br><font color="#bc688c" face="Arial"><b>Web-site:</b></font> <a href="#"514422.files/image006.gif">

Рисунок 2.5.1 - изображение на странице «О нас»

 

И при наведении курсора мыши:

 

Рисунок 2.5.2 -при наведении курсора мыши

 

2.6 Создание 3D галереи

Изображения размещаются в папке images и при запуске скрипта их надо указать для загрузки. Кроме того, к изображению можно привязать ссылку, которая работает и как подпись к картинке

Галерея использует средства только JavaScript, без подключения каких-либо библиотек.

HTML

<div id="screen">

<div id="command">

<div id="bar"></div>

</div>

<div id="urlInfo"></div>

</div>

Элемент div screen содержит всю галерею. Элемент div command содержит подпись и панель управления галереей div bar. Элемент div urlInfo будет выводить на ссылку, привязанную к изображению.

CSS

html {: hidden;

}{: absolute;: 0px;: 0px;: #eee;: 100%;: 100%;: #fff;family: arial;size: 0.8em;

}

#screen {: absolute;: 100%;: 100%;: #7addfd;: hidden;

}

#screen img, canvas {: absolute;: -9999px;: pointer;rendering: optimizeSpeed;

}

#screen .href {: #FFF dotted 1px;

}

#screen .fog {: absolute;: #fff;: 0.1;: alpha(opacity=10);

}

#command {:absolute;: 1em;: 1em;: 130px;index: 30000;:#7addfd;: #7addfd solid 1em;

}

#bar {:relative;: 1em;: 1em;: 160px;

}

#bar .button {: absolute;: #222;: 20px;: 20px;: pointer;

}

#bar .loaded {: #666;

}

#bar .viewed {: #fff;

}

#bar .selected {: #f00;

}

#urlInfo {: absolute;: url(images/r.gif) no-repeat 0 4px;: hidden;index: 30000;left: 12px;: pointer;

}

JavaScript

var m3D = function () {

/* ---- Переменные ---- */

var diapo = [],

imb,

scr,

bar,,,= "",= {x:0, y:0, z:-650, s:0, fov: 500}, = 0,

nh = 0;

/* ==== метод сдвоенной камеры ==== */

camera.setTarget = function (c0, t1, p) {(Math.abs(t1 - c0) > .1) {.s = 1;.p = 0;.d = t1 - c0;(p) {.d *= 2;.p = 9;

}

}

}.tween = function (v) {(camera.s != 0) {.p += camera.s;[v] += camera.d * camera.p * .01;(camera.p == 10) camera.s = -1;if (camera.p == 0) camera.s = 0;

}camera.s;

}

/* ==== Конструктор diapo ==== */Diapo = function (n, img, x, y, z) {(img) {.url = img.url;.title = img.title;.color = img.color;.isLoaded = false;(document.createElement("canvas").getContext) {

/* ---- используем элемент canvas вместо изображения (трюк для производительности) ---- */

this.srcImg = new Image();.srcImg.src = imagesPath + img.src;.img = document.createElement("canvas");.canvas = true;.appendChild(this.img);

} else {

/* ---- обычное изображение ---- */.img = document.createElement('img');.img.src = imagesPath + img.src;.appendChild(this.img);

}

/* ---- обработка событие onclick ---- */.img.onclick = function () {(camera.s) return;(this.diapo.isLoaded) {(this.diapo.urlActive) {

/* ---- гиперссылка для перехода ---- */.location.href = this.diapo.url;

} else {

/* ---- позиционирование цели ---- */.tz = this.diapo.z - camera.fov;.tx = this.diapo.x;.ty = this.diapo.y;

/* ---- disable previously selected img ---- */(selected) {.but.className = "button viewed";.img.className = "";.img.style.cursor = "pointer";.urlActive = false;.style.visibility = "hidden";

}

/* ---- выбираем текущее изображение ---- */.diapo.but.className = "button selected";(false);= this.diapo;

}

}

}

/* ---- кнопки панели управления ---- */.but = document.createElement('div');.but.className = "button";.appendChild(this.but);.but.diapo = this;.but.style.left = Math.round((this.but.offsetWidth * 1.2) * (n % 4)) + 'px';.but.style.top = Math.round((this.but.offsetHeight * 1.2) * Math.floor(n / 4)) + 'px';.but.onclick = this.img.onclick;= this.img;.img.diapo = this;.zi = 25000;

} else {

/* ---- прозрачный элемент div ---- */.img = document.createElement('div');.isLoaded = true;.img.className = "fog";.appendChild(this.img);.w = 300;.h = 300;

this.zi = 15000;

}

/* ---- перменные объекта ---- */

this.x = x;.y = y;.z = z;.css = this.img.style;

}

/* ==== основная 3D анимация ==== */.prototype.anim = function () { (this.isLoaded) {

var x = this.x - camera.x;y = this.y - camera.y;z = this.z - camera.z;(z < 20) z += 5000;p = camera.fov / z;w = this.w * p;h = this.h * p;

/* ---- рисуем HTML ---- */.css.left = Math.round(nw + x * p - w * .5) + 'px';.css.top = Math.round(nh + y * p - h * .5) + 'px';.css.width = Math.round(w) + 'px';.css.height = Math.round(h) + 'px';.css.zIndex = this.zi - Math.round(z);

} else {

/* ---- изображение загружено? ---- */.isLoaded = this.loading();

}

}

/* ==== инициализация при загрузке ==== */.prototype.loading = function () {((this.canvas && this.srcImg.complete) || this.img.complete) {(this.canvas) {

/* ---- версия с элементом canvas ---- */.w = this.srcImg.width;.h = this.srcImg.height;.img.width = this.w;.img.height = this.h;context = this.img.getContext("2d");.drawImage(this.srcImg, 0, 0, this.w, this.h);

} else {

/* ---- версия с обычным изображением ---- */

this.w = this.img.width;.h = this.img.height;

}

/* ---- кнопка загружена ---- */.but.className += " loaded";true;

}false;

}

////////////////////////////////////////////////////////////////////////////

/* ==== размеры экрана ==== */resize = function () {= scr.offsetWidth * .5; = scr.offsetHeight * .5;

}

/* ==== отключаем интерполяцию во время анимации ==== */

var interpolation = function (bicubic) {i = 0, o;( o = diapo[i++] ) {(o.but) {.css.msInterpolationMode = bicubic ? 'bicubic' : 'nearest-neighbor'; // makes IE8 happy.css.imageRendering = bicubic ? 'optimizeQuality' : 'optimizeSpeed'; // does not really work...

}

}

}

/* ==== скрипт инициализации ==== */init = function (data) {

/* ---- контейнеры ---- */= document.getElementById("screen");= document.getElementById("bar");= document.getElementById("urlInfo");();

/* ---- загрузка изображений ---- */

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. 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;

}