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

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

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

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

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

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

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

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

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

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

Метод получил широкое распространение во времена предшествовавшие появлению стандарта 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

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

• Главная
• Тесты
• Правила
• О нас
• Разделы

CSS

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

ul#navigation {

position: fixed;

margin: 0px;

padding: 0px;

top: 0px;

right: 10px;

list-style: none;

z-index:999 999;

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

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

• Понятие алгоритма. Исполнитель алгоритмов
• Алгоритмы:линейные, с ветвлением, с повторением
• Способы записи алгоритмов
• Способы записи алгоритмов: блок-схема
• Чертежник
• Чертежник. Практика

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 Создание всплывающего модального окна при выходе

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

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

:

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

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

Прощай, о, дорогой посетитель!!

Спасибо, что уделил этому сайту свое внимание

Прощай, но обещай вернуться!!!

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

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

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

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

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

$(function () {

$(«.slideBox»).hover (function (){

$(this).find («img»).stop ().animate ({

top:-325

}, 500);

}, function (){

$(this).find («img»).stop ().animate ({

top:0

}, 500);

});

});

Теперь в теле документа в слой с классом «slideBox» помещаем изображение и текст под ним. Текст в свою очередь должен находится внутри

с классом «content»:



HTML Ipsum Presents

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

color="#bc688c" face="Arial" >Телефон: (2 351) 2−43−14 (приемная ректора), 2−43−17 (приемная комиссия)

color="#bc688c" face="Arial" >Факс: (2 351) 2−54−26

color="#bc688c" face="Arial" >E-mail: mozvuz@mail.gomel.by

color="#bc688c" face="Arial" >Web-site: www.mgpu.gomel.by

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

color="#bc688c" face="Arial" >Фото: Галерея 3D

Немного 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

3D галерея

Элемент 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: 30 000;

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: 30 000;

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 = 25 000;

} 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 = 15 000;

}

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

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

urlInfo.style.visibility = «visible» ;

urlInfo.style.color = selected. color 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:999 999;

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

}