Размещено на http://www.allbest.ru/

23

Размещено на http://www.allbest.ru/

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

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

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

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

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

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

Выполнила:

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

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

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

Мозырь 2010



РЕЗЮМЕ

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

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

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

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

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

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

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

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

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

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

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

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

ОГЛАВЛЕНИЕ

ВВЕДЕНИЕ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ЗАКЛЮЧЕНИЕ

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

ПРИЛОЖЕНИЯ

ВВЕДЕНИЕ

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

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

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

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

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

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

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

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

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

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

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

CSS - одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты web». В 1990-х годах стала ясна необходимость стандартизировать web, создать какие-то единые правила, по которым программисты и web-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01 и XHTML и стандарт CSS.

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

Термин «каскадные таблицы стилей» был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS.

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

В середине 1990-х Конcорциум Всемирной паутины стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.

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

CSS это язык стилей, определяющий отображение HTML-документов. Например, CSS работает с шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами.

HTML может использоваться для оформления web-сайтов. Но CSS предоставляет бульшие возможности и более точен и проработан. CSS, на сегодняшний день, поддерживается всеми браузерами .

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

HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого.

Когда парень по имени Tim Berners Lee изобрёл World Wide Web, язык HTML использовался только для вывода структурированного текста. Автор мог только размечать текст: "это - заголовок" или "это - параграф", используя HTML-тэги, такие как <h1> и <p>.

По мере развития Web дизайнеры начали искать возможности форматирования онлайновых документов. Чтобы удовлетворить возросшим требованиям потребителей, производители браузеров изобрели новые HTML-тэги, такие, например, как <font>, которые отличались от оригинальных HTML-тэгов тем, что они определяли внешний вид, а не структуру.

Это также привело к тому, что оригинальные тэги структурирования, такие как <table>, стали всё больше применяться для дизайна страниц вместо структурирования текста. Многие новые тэги дизайна, такие как <blink>, поддерживались только одним браузером. "Вам необходим браузер X для просмотра этой страницы" - такой отказ стал обычным явлением на web-сайтах.

CSS был создан для исправления этой ситуации путём предоставления web-дизайнерам возможностей точного дизайна, поддерживаемых всеми браузерами. Одновременно произошло разделение представления и содержимого документа, что значительно упростило работу.



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

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

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

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

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

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

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

Табличная верстка - условное название метода верстки HTML-документов, при котором в качестве структурной основы для расположения текстовых и графических элементов документа используются таблицы (то есть HTML-тег <table>).

Метод получил широкое распространение во времена предшествовавшие появлению стандарта CSS, так как на тот момент не было другой простой возможности точно расположить элементы на странице. Таблицы же, за счет того, что автоматически изменяют свой размер в соответствии с содержимым, а также за счет возможности, напротив, задать точные размеры той или иной ячейки, позволяют быстро и удобно расставить иллюстрации к тексту или совместить несколько частей коллажа в одно большое изображение. Кроме того, таблицы в HTML могут быть вложенными, что позволяет создавать целые иерархии таблиц, что было очень удобно при верстке сложных страниц, отдельные элементы которых должны были бы сохранять свое положение и размер на экране вне зависимости от размера окна браузера, тогда как другие элементы, напротив, должны были изменяться в размерах и/или изменять свое местоположение относительно остальных объектов документа.

Некоторые полагают, что табличная верстка нарушает основную идею создания языков разметки - визуальное отображение документа должно автоматически получаться из логической разметки и не зависеть от его непосредственного содержания. Иными словами, использовать таблицы следует только для отображения табличных данных: статистик, расписаний, сравнительных характеристик и пр., а для расположения элементов документа следует использовать CSS

Тем не менее, табличная верстка остается наиболее удобной и простой в освоении, потому многие web-разработчики продолжают ею пользоваться. Этот метод верстки зарекомендовал себя, как наиболее стабильный и надежный, в то время как блочная верстка сложна в реализации, имеет проблемы с совместимостью с разными браузерами и т.п.

До появления CSS оформление web-страниц осуществлялось непосредственно внутри содержимого документа (табличная верстка). Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа (блочная верстка). За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.

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

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

Создание колонок

Одноколонная модульная сетка применяется на сайтах достаточно редко. Действительно, основной текст и ссылки по сайту удобнее располагать в разных колонках, разделяя их тем самым. Таблицы же хорошо выступают в качестве многоколонной модульной сетки, каждая ячейка представляет собой отдельную колонку. Это позволяет легко создавать двух- и трехколонный макет документа. При изменении размера окна браузера, колонки сохраняют свой исходный вид, а не переносятся как слои друг под друга. К тому же высота разных колонок при использовании таблиц остается одинаковой, независимо от объема их содержимого.

«Резиновый» макет

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

«Склейка» изображений

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

Фоновые рисунки

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

Выравнивание элементов

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

Особенности браузеров

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

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

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

Долгая загрузка

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

Существуют и способы обхода этого свойства, в частности, разбиение одной большой таблицы на несколько таблиц поменьше, а также использование стилевого свойства table-layout.

Громоздкий код

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

Плохая индексация поисковиками

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

Нет разделения содержимого и оформления

В идеале HTML-код должен содержать только теги с указанием стилевого класса или идентификатора. А все оформление вроде цвета текста и положения элемента выносится в CSS и модифицируется отдельно. Такое разделение позволяет независимо править код страницы и менять вид отдельных ее элементов. Хотя к таблицам стиль легко добавляется, но обилие «лишних» тегов не позволяет действительно просто и удобно управлять видом отдельных компонентов страницы. К тому же не все параметры таблиц имеют свой стилевой синоним, поэтому в любом случае приходится обращаться к коду web-страницы и править его.

Несоответствие стандартам

В последнее время стандарты HTML и CSS прочно засели в умах web-разработчиков. Этому способствует развитие XHTML и XML, которые более «жестко» относятся к коду документа, появление новых версий браузеров, придерживающихся спецификации, и мода на верстку слоями.

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

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

Блочная вёрстка - это вёрстка дивами или слоями, при которой весь основной каркас проектируемого сайта создаётся из отдельных блоков, которыми являются html и div-теги.

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

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

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

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

Web-страница сверстанная на CSS весит гораздо меньше и быстрее загружается в браузерах. Неудивительно, ведь все данные параметров отображения документа заносятся в отдельный css-файл. За счёт этого документ становится очень легким и пользователь даже может не заметить, как быстро загрузится страничка.

За счёт того, что web-страница становится очень легкой и быстрозагружаемой, она гораздо быстрее индексируется поисковыми системами. Кроме того, сайт или блог, сделанный на CSS-вёрстке гораздо легче и удобней оптимизировать под поисковые машины и продвинуть его в ТОП.

Простота, доступность каждого элемента и малые временные затраты на то, чтобы при необходимости менять дизайн сайта или какие-то отдельные его элементы. Достаточно будет открыть один или несколько css-файлов, чтобы изменить сайт до неузнаваемости;

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

Из недостатков каскадных таблиц стилей, пожалуй, можно назвать лишь то, что иногда бывает сложно добиться правильного отображения дизайна сайта во всех известных браузерах. Но при профессиональном подходе эта проблема легко решается. Да и ещё - научиться владеть CSS всё же сложнее, чем обычной html-вёрсткой, но гораздо проще, чем даже самым лёгким языком web-программирования - php.

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

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

В верхней части сайта находится выпадающее меню, состоящее из 5 пунктов. Данное меню было создано при помощи jQuery - библиотеки JavaScript, фокусирующейся на взаимодействии JavaScript и HTML, а также CSS.

HTML

Для этого меню использовался неупорядоченный список с ссылками и текстом внутри элементов списка:

<ul id="navigation">

<li class="home"> <a href=""> <span> Главная </span> </a> </li>

<li class="tests"> <a href=""><span>Тесты</span></a></li>

<li class="rules"> <a href="rools.html"><span>Правила</span> </a> </li>

<li class="about"> <a href="photo.html"><span>О нас</span> </a> </li>

<li class="photos"> <a href="part.html"><span>Разделы</span> </a> </li>

CSS

Для начала мы определяем свойства для списка

ul#navigation {

position: fixed;

margin: 0px;

padding: 0px;

top: 0px;

right: 10px;

list-style: none;

z-index:999999;

width:721px;

}

Список позиционируется в правом верхнем углу страницы. Навигация должна быть всегда доступна пользователю, даже если он прокручивает страницу вниз. Поэтому позиционирование необходимо зафиксировать. Все отступы и границы выставляем на 0. Навигация также должна быть поверх всех элементов на странице. Именно поэтому также выставляется высокой значение z-index. Также необходимо прописать ширину меню, чтобы элементы списка не наезжали друг на друга при изменении размера окна браузера.

Теперь перейдем к свойствам элементов списка:

ul#navigation li {

width: 103px;

display:inline;

float:left;

}

Теперь рассмотрим свойства ссылок в элементах списка:

ul#navigation li a {

display: block;

float:left;

margin-top: -2px;

margin-left:25px;

width: 100px;

height: 25px;

background-color:#f964a1;

background-repeat:no-repeat;

background-position:50% 10px;

border:1px solid #10dbed;

text-decoration:none;

text-align:center;

padding-top:80px;

}

Тут стоит упомянуть только свойство padding, которое помогает переместить текст ссылки в самый низ блока.

Добавляем круглые углы (не будут работать в Internet Explorer) и прозрачность (значение filter) :

ul#navigation li a {

display: block;

float:left;

margin-top: -2px;

width: 100px;

height: 25px;

background-color:#E7F2F9;

background-repeat:no-repeat;

background-position:50% 10px;

border:1px solid #BDDCEF;

text-decoration:none;

text-align:center;

padding-top:80px;

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

opacity: 0.7;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

Теперь позаботимся о красивых иконках:

ul#navigation .home a{

background-image: url(../images/home.png);

}

ul#navigation .about a {

background-image: url(../images/user_accept.png);

}

ul#navigation .search a {

background-image: url(../images/lit.png);

}

ul#navigation .photos a {

background-image: url(../images/test.png);

}

Установим изменение фонового цвета при наведении мыши:

ul#navigation li a:hover{

background-color:#d1a6c4;

}

jQuery

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

$(function() {

var d=300;

$('#navigation a').each(function(){

$(this).stop().animate({

'marginTop':'-80px'

},d+=150);

});

$('#navigation > li').hover(

function () {

$('a',$(this)).stop().animate({

'marginTop':'-2px'

},200);

},

function () {

$('a',$(this)).stop().animate({

'marginTop':'-80px'

},200);

}

);

});

Скрипт устанавливает marginTop на -80 пикселей. Эффект для первого элемента должен продолжаться 300+150 миллисекунд и каждый следующий элемент должен исчезать с задержкой 150 миллисекунд.



После того, как мышку пользователь убирает - все возвращается на свои места.

В результате получилось следующее меню:

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

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

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

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

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

html {scrollbar-face-color:#f964a1;

scrollbar-shadow-color: #ffffff;

scrollbar-highlight-color: #ffffff;

scrollbar-3dlight-color: #f964a1;

scrollbar-darkshadow-color: #f964a1;

scrollbar-track-color: #7b538f;

scrollbar-arrow-color: #7b538f;}

body{

background:#aff url(333.jpg) no-repeat top center;

font-family:Arial;

height: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;

background:url(../images/postitBack.gif);

}

#recentposts ul {

padding:0;

margin:0;

}

#recentposts ul li {

font-size:11px;

line-height:18px;

list-style:none;

padding:0;

margin:0;

}

#recentposts ul li a {

color:#21565E;

border-top:1px solid #ffffbe;

display:block;

width:170px;

margin:0 auto;

padding:4px 0 4px 25px;

background:url(../images/bullet-postit.gif) no-repeat 5px 8px;

}

#recentposts ul li a:hover {

text-decoration:none;

color:#000;

background: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({

top:-325

}, 500);

}, function(){

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

top:0

}, 500);

});

});

</script>

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

<div id="cont">

<div class="slideBox">

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

<div class="content">

<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="http://www.mgpu.gomel.by">www.mgpu.gomel.by</a>

<br><font color="#bc688c" face="Arial"><b>Проезд:</b></font> от ж/д Мозырь автоб. 2, Козенки автоб. 16, Калинковичи автоб. 201, от автовокзала Мозырь автоб. 2, 3А, 4, 5, 21 до остановки “Примостовая”

<br><font color="#bc688c" face="Arial"><b>Фото:</b></font> <a href="3d/index.htm">Галерея 3D</a>

</div>

</div>

Немного CSS:

div.slideBox {

width: 400px;

height: 320px;

position: absolute;

float: left;

margin-left: 25%;

margin-top: 55%;

overflow: hidden;

border: 5px solid #bc688c;

}

div.slideBox img {

position: absolute;

z-index: 2;

width: 400px;

height: 320px;

}

div.slideBox div.content {

position: absolute;

z-index: 1;

padding: 10px;

}

Итог:

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

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



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

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

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

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

HTML

<div id="screen">

<div id="command">

<h1>3D галерея</h1>

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

</div>

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

</div>

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

CSS



html {

overflow: hidden;

}

body {

position: absolute;

margin: 0px;

padding: 0px;

background: #eee;

width: 100%;

height: 100%;

color: #fff;

font-family: arial;

font-size: 0.8em;

}

#screen {

position: absolute;

width: 100%;

height: 100%;

background: #7addfd;

overflow: hidden;

}

#screen img, canvas {

position: absolute;

left: -9999px;

cursor: pointer;

image-rendering: optimizeSpeed;

}

#screen .href {

border: #FFF dotted 1px;

}

#screen .fog {

position: absolute;

background: #fff;

opacity: 0.1;

filter: alpha(opacity=10);

}

#command {

position:absolute;

left: 1em;

top: 1em;

width: 130px;

z-index: 30000;

background:#7addfd;

border: #7addfd solid 1em;

}

#bar {

position:relative;

left: 1em;

top: 1em;

height: 160px;

}

#bar .button {

position: absolute;

background: #222;

width: 20px;

height: 20px;

cursor: pointer;

}

#bar .loaded {

background: #666;

}

#bar .viewed {

background: #fff;

}

#bar .selected {

background: #f00;

}

#urlInfo {

position: absolute;

background: url(images/r.gif) no-repeat 0 4px;

visibility: hidden;

z-index: 30000;

padding-left: 12px;

cursor: pointer;

}

JavaScript

var m3D = function () {

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

var diapo = [],

imb,

scr,

bar,

selected,

urlInfo,

imagesPath = "",

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

nw = 0,

nh = 0;

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

camera.setTarget = function (c0, t1, p) {

if (Math.abs(t1 - c0) > .1) {

camera.s = 1;

camera.p = 0;

camera.d = t1 - c0;

if (p) {

camera.d *= 2;

camera.p = 9;

}

}

}

camera.tween = function (v) {

if (camera.s != 0) {

camera.p += camera.s;

camera[v] += camera.d * camera.p * .01;

if (camera.p == 10) camera.s = -1;

else if (camera.p == 0) camera.s = 0;

}

return camera.s;

}

/* ==== Конструктор diapo ==== */

var Diapo = function (n, img, x, y, z) {

if (img) {

this.url = img.url;

this.title = img.title;

this.color = img.color;

this.isLoaded = false;

if (document.createElement("canvas").getContext) {

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

this.srcImg = new Image();

this.srcImg.src = imagesPath + img.src;

this.img = document.createElement("canvas");

this.canvas = true;

scr.appendChild(this.img);

} else {

/* ---- обычное изображение ---- */

this.img = document.createElement('img');

this.img.src = imagesPath + img.src;

scr.appendChild(this.img);

}

/* ---- обработка событие onclick ---- */

this.img.onclick = function () {

if (camera.s) return;

if (this.diapo.isLoaded) {

if (this.diapo.urlActive) {

/* ---- гиперссылка для перехода ---- */

top.location.href = this.diapo.url;

} else {

/* ---- позиционирование цели ---- */

camera.tz = this.diapo.z - camera.fov;

camera.tx = this.diapo.x;

camera.ty = this.diapo.y;

/* ---- disable previously selected img ---- */

if (selected) {

selected.but.className = "button viewed";

selected.img.className = "";

selected.img.style.cursor = "pointer";

selected.urlActive = false;

urlInfo.style.visibility = "hidden";

}

/* ---- выбираем текущее изображение ---- */

this.diapo.but.className = "button selected";

interpolation(false);

selected = this.diapo;

}

}

}

/* ---- кнопки панели управления ---- */

this.but = document.createElement('div');

this.but.className = "button";

bar.appendChild(this.but);

this.but.diapo = this;

this.but.style.left = Math.round((this.but.offsetWidth * 1.2) * (n % 4)) + 'px';

this.but.style.top = Math.round((this.but.offsetHeight * 1.2) * Math.floor(n / 4)) + 'px';

this.but.onclick = this.img.onclick;

imb = this.img;

this.img.diapo = this;

this.zi = 25000;

} else {

/* ---- прозрачный элемент div ---- */

this.img = document.createElement('div');

this.isLoaded = true;

this.img.className = "fog";

scr.appendChild(this.img);

this.w = 300;

this.h = 300;

this.zi = 15000;

}

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

this.x = x;

this.y = y;

this.z = z;

this.css = this.img.style;

}

/* ==== основная 3D анимация ==== */

Diapo.prototype.anim = function () {

if (this.isLoaded) {

/* ---- от 3D к 2D проекции ---- */

var x = this.x - camera.x;

var y = this.y - camera.y;

var z = this.z - camera.z;

if (z < 20) z += 5000;

var p = camera.fov / z;

var w = this.w * p;

var h = this.h * p;

/* ---- рисуем HTML ---- */

this.css.left = Math.round(nw + x * p - w * .5) + 'px';

this.css.top = Math.round(nh + y * p - h * .5) + 'px';

this.css.width = Math.round(w) + 'px';

this.css.height = Math.round(h) + 'px';

this.css.zIndex = this.zi - Math.round(z);

} else {

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

this.isLoaded = this.loading();

}

}

/* ==== инициализация при загрузке ==== */

Diapo.prototype.loading = function () {

if ((this.canvas && this.srcImg.complete) || this.img.complete) {

if (this.canvas) {

/* ---- версия с элементом canvas ---- */

this.w = this.srcImg.width;

this.h = this.srcImg.height;

this.img.width = this.w;

this.img.height = this.h;

var context = this.img.getContext("2d");

context.drawImage(this.srcImg, 0, 0, this.w, this.h);

} else {

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

this.w = this.img.width;

this.h = this.img.height;

}

/* ---- кнопка загружена ---- */

this.but.className += " loaded";

return true;

}

return false;

}

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

/* ==== размеры экрана ==== */

var resize = function () {

nw = scr.offsetWidth * .5;

nh = scr.offsetHeight * .5;

}

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

var interpolation = function (bicubic) {

var i = 0, o;

while( o = diapo[i++] ) {

if (o.but) {

o.css.msInterpolationMode = bicubic ? 'bicubic' : 'nearest-neighbor'; // makes IE8 happy

o.css.imageRendering = bicubic ? 'optimizeQuality' : 'optimizeSpeed'; // does not really work...

}

}

}

/* ==== скрипт инициализации ==== */

var init = function (data) {

/* ---- контейнеры ---- */

scr = document.getElementById("screen");

bar = document.getElementById("bar");

urlInfo = document.getElementById("urlInfo");

resize();

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

var i = 0,

o,

n = data.length;

while( o = data[i++] ) {

/* ---- изображения ---- */

var x = 1000 * ((i % 4) - 1.5);

var y = Math.round(Math.random() * 4000) - 2000;

var z = i * (5000 / n);

diapo.push( new Diapo(i - 1, o, x, y, z));

/* ---- прозрачные рамки ---- */

var k = diapo.length - 1;

for (var j = 0; j < 3; j++) {

var x = Math.round(Math.random() * 4000) - 2000;

var y = Math.round(Math.random() * 4000) - 2000;

diapo.push( new Diapo(k, null, x, y, z + 100));

}

}

/* ---- запуск движка ---- */

run();

}

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

/* ==== основной цикл ==== */

var run = function () {

/* ---- пермещение по оси x ---- */

if (camera.tx) {

if (!camera.s) camera.setTarget(camera.x, camera.tx);

var m = camera.tween('x');

if (!m) camera.tx = 0;

/* ---- перемещение по оси y ---- */

} else if (camera.ty) {

if (!camera.s) camera.setTarget(camera.y, camera.ty);

var m = camera.tween('y');

if (!m) camera.ty = 0;

/* ---- перемещение по оси z ---- */

} else if (camera.tz) {

if (!camera.s) camera.setTarget(camera.z, camera.tz);

var m = camera.tween('z');

if (!m) {

/* ---- конец анимации ---- */

camera.tz = 0;

interpolation(true);

/* ---- активируем гиперссылку ---- */

if (selected.url) {

selected.img.style.cursor = "pointer";

selected.urlActive = true;

selected.img.className = "href";

urlInfo.diapo = selected;

urlInfo.onclick = selected.img.onclick;

urlInfo.innerHTML = selected.title || selected.url;

urlInfo.style.visibility = "visible";

urlInfo.style.color = selected.color || "#fff";

urlInfo.style.top = Math.round(selected.img.offsetTop + selected.img.offsetHeight - urlInfo.offsetHeight - 5) + "px";

urlInfo.style.left = Math.round(selected.img.offsetLeft + selected.img.offsetWidth - urlInfo.offsetWidth - 5) + "px";

} else {

selected.img.style.cursor = "default";

}

}

}

/* ---- анимация изображения ---- */

var i = 0, o;

while( o = diapo[i++] ) o.anim();



ЗАКЛЮЧЕНИЕ

В данной работе был разработан CSS файл позволяющий осуществлять смену стиля сайта.

Реализованы следующие поставленные задачи:

· рассмотрены понятия - CSS-вёрстка, применение CSS к HTML, позиционирование элементов.

· приведена краткая характеристика синтаксиса CSS;

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

1. Основная идея CSS в том, чтобы отделить дизайн документа от его содержимого. CSS отвечает за оформление и внешний вид, а XHTML/HTML -- за содержание и логическую структуру документа.

2. Если в нескольких селекторах используются одни и те же объявления, их можно сгруппировать в список, разделив запятыми.

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

1. Зольников Д.С. PHP 5. Как самостоятельно создать сайт любой сложности. - М.: НТ Пресс, 2005. - 109 с.

2. Мак Т., Вест Р. Dreamweaver MX 2004. Шаг за шагом. Самоучитель. - М.: ЭКОМ, 2006. - 312 с.

3. Хестер Н. Создание Web-страниц в Dreamweaver. - М.: НТ Пресс, 2005. - 104 с.

4. Шмитт К., Трамвел М., Домини Т. CSS: каскадные таблицы стилей для web-дизайна.

5. Кристофер Шмитт. CSS. Рецепты программирования = CSS. -- СПб.: БХВ-Петербург, 2007. -- 592 с.

6. Энди Бадд, Камерон Молл, Саймон Коллизон. Мастерская CSS: профессиональное применение Web-стандартов. -- М.: Вильямс, 2007. -- 272 с.

7. Эрик А. Мейер. CSS-каскадные таблицы стилей: подробное руководство.-- М.: Символ, 2006. -- 576 с.

8. Расс Уикли. Освой самостоятельно CSS. 10 минут на урок. -- М.: Вильямс, 2006. -- 256 с.

ПРИЛОЖЕНИЯ

CSS-код

* {margin: 0; padding: 0; border: none; }

html {scrollbar-face-color:#f964a1;

scrollbar-shadow-color: #ffffff;

scrollbar-highlight-color: #ffffff;

scrollbar-3dlight-color: #f964a1;

scrollbar-darkshadow-color: #f964a1;

scrollbar-track-color: #7b538f;

scrollbar-arrow-color: #7b538f;}

body{

background:#aff url(333.jpg) no-repeat top center;

font-family:Arial;

height:1200px;

}

#container{ position:relative;

left:8%;

}

h2 {

color: #7b538f;

font: italic bold "Times New Roman", "Georgia", sans-serif;

}

ul#navigation {

position: fixed;

margin: 0 auto;

padding: 0px;

top: 0px;

right: 10px;

list-style: none;

z-index:999999;

width:721px;

}

ul#navigation li {

width: 103px;

display:inline;

float:left;

}

ul#navigation li a {

display: block;

float:left;

margin-top: -2px;

margin-left:25px;

width: 100px;

height: 25px;

background-color:#f964a1;

background-repeat:no-repeat;

background-position:50% 10px;

border: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;

text-decoration:none;

text-align:center;

padding-top:80px;

opacity: 0.7;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

ul#navigation li a:hover{

background-color:#d1a6c4;

}

ul#navigation li a span{

letter-spacing:2px;

font-size:15px;

font-weight: bolder;

color:#10dbed;

text-shadow: 0 -1px 1px #fff;

}

ul#navigation .home a{

background-image: url(../images/home.png);

}

ul#navigation .tests a {

background-image: url(../images/user_accept.png);

}

ul#navigation .rules a {

background-image: url(../images/lit.png);

}

ul#navigation .photos a {

background-image: url(../images/test.png);

}

ul#navigation .about a {

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

background:url(../images/postitBack.gif);

}

#recentposts ul {

padding:0;

margin:0;

}

#recentposts ul li {

font-size:11px;

line-height:18px;

list-style:none;

padding:0;

margin:0;

}

#recentposts ul li a {

color:#21565E;

border-top:1px solid #ffffbe;

display:block;

width:170px;

margin:0 auto;

padding:4px 0 4px 25px;

background:url(../images/bullet-postit.gif) no-repeat 5px 8px;

}

#recentposts ul li a:hover {

text-decoration:none;

color:#000;

background:url(../images/bullet-postit-on.gif) no-repeat 5px 8px #ff5092;

}

#col02 {position:relative;

top: 28%;

right: 11%;

width:200px;

float:right;

}

#text { position:relative;

top: 47%;

left: 20%;

width:70%;

font-family: Verdana, Arial, Helvetica, sans-serif;

}

#text1 { position:relative;

top: 20%;

left: 20%;

width:51%;

text-align:justify;

}

.last{ position:absolute;

left: 40%;

top: 146%;

}

h1 {

margin-bottom: 15px;

font-size: 18px;

}

div.slideBox {

width: 400px;

height: 320px;

position: absolute;

float: left;

margin-left: 25%;

margin-top: 55%;

overflow: hidden;

border: 5px solid #bc688c;

}

div.slideBox img {

position: absolute;

z-index: 2;

width: 400px;

height: 320px;

}

div.slideBox div.content {

position: absolute;

z-index: 1;

padding: 10px;

}

Размещено на Allbest.ru