Разработка информационно-справочного ресурса культурно-развлекательного центра "Мистик"

$(this).stop().animate({},{queue:false, duration:350, easing:'easeOutBounce'});

$(".leftcurtain").stop().animate({width:'60px'}, 2000 );

$(".rightcurtain").stop().animate({width:'60px'},2000 );

$curtainopen = true;

setTimeout(function() { document.location.href="main.html"; }, 2000);

}

return false;});

Рисунок 5.1 - Анимация входа

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

Рисунок 5.2 - Блок-схема работы скрипта входа на сайт

На главной странице ресурса существует быстрый доступ к основным страницам ресурса. Переход происходит так же при помощи скрипта входа анимации. Так же присутствует анимация на самих кнопках входа на ресурс, которая управляется при помощи кода CSS.

CSS не активной ссылки:

.restoran{position: absolute;

top: 80%;

left: -95px;

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

width: 200px;

height: 138px;

z-index: 4;}

CSS активной ссылки:

.restoran:hover{position: absolute;

top: 80%;left: -45px;

background-image:url(images/index/restoran.png);width: 200px;height: 138px;}

При выполнении данного CSS кода происходит смена изображения и изменение его позиции с дальнейшим переходом по ссылке.

Рисунок 5.3 - Кнопки быстрого доступа

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

Рисунок 5.4 - Принципиальная схема работы CSS кода на кнопки

На каждой странице ресурса устанавливается свой индивидуальный фон, подходящий под основной фон помещения, который он описывает. Установка фона на главной странице происходит посредством следующего тега:

style="background:#0c0d0f url(images/bg/1.png) repeat;">

Для последующих страниц меняется только путь к фоновому изображению.



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

Рисунок 5.5 - Блок-схема установки фонового изображения

Навигационное меня выполнено в виде набора тегов <ul> и <li>.

Структура HTML кода для меню используется стандартная для таких случаев:

<div><ul id="menu">

<li><a href="main.html">ГЛАВНАЯ</a></li>

<li><a href="">КРК "МИСТИК"</a>

<ul><li><a href="concert.html">Концертная площадка</a>

</li><li><a href="nightclub.html">Ночной клуб</a>

</li><li><a href="djbar.html">DJ-бар</a>

</li><li><a href="restoran.html">Ресторан</a>

</li><li><a href="karaoke.html">Караоке</a>

</li><li><a href="bouling.html">Боулинг</a>

</li><li><a href="park.html">Детский парк</a>

</li><li><ahref="ploshadka.html">Детская площадка</a></li></ul></li><li>

<a href="gosti.html">Специальные гости</a></li>

<li><a href="foto.html">Фото-отчеты</a></li>

<li><a href="contact.html">Контакты</a></li>

<li><a href="karting.html">Картинг-центр</a></li></ul></div>

После чего необходимо написание CSS стилей для меню.

Выполняется сброс для элемента ul:

#menu, #menu ul {margin: 0;padding: 0;list-style: none;}

Элемент #menu является основным для меню. Градиенты, тени и скругленные углы позволят создать следующее оформление для него при помощи CSS кода:

#menu {

width: 960px;

margin: 60px auto;

border: 1px solid #222;

background-color: #111;

background-image: -moz-linear-gradient(#444, #111);

background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));

background-image: -webkit-linear-gradient(#444, #111);

background-image: -o-linear-gradient(#444, #111);

background-image: -ms-linear-gradient(#444, #111);

background-image: linear-gradient(#444, #111);

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

border-radius: 6px;

-moz-box-shadow: 0 1px 1px #777;

-webkit-box-shadow: 0 1px 1px #777;

box-shadow: 0 1px 1px #777;}

Рисунок 5.6 - Округление краев

Дальнейшим этапом стало отключение обтекания при помощи кода:

#menu:before,

#menu:after {content: "";display: table;}

#menu:after { clear: both;}

#menu {zoom:1;}

Internet Explorer 6 версии требует дополнительного кода для работы меню:

$(function() { if ($.browser.msie && $.browser.version.substr(0,1)<7)

{ $('li').has('ul').mouseover(function(){

$(this).children('ul').css('visibility','visible');

}).mouseout(function(){

$(this).children('ul').css('visibility','hidden');})}});

Последующий код создания меню приведен в приложении

Рисунок 5.7 - Навигационное меню

Открытие изображений на новом слое происходит посредством подключенного скрипта “shutterset”.

<a class="shutterset" title="Концепт зала" href="gallery/mystic/1.jpg">

<img id="preview" src="gallery/mystic/thumbs/1.jpg" alt="" /></a>

где href это ссылка на оригинальное изображение, а src это ссылка на его уменьшенную копию, для уменьшения трафика.

Рисунок 5.8 - Открытое изображение скриптом shutterset

Объединение фотографий в галереи происходит путем написания параметров в class "shutterset". В квадратных скобках указывается номер галереи

<a class="shutterset[3]" title="Концепт зала" href="gallery/mystic/1.jpg">

Рисунок 5.9 - Объединение фотографий в галереи

Карта создается путем использования сервиса yandex.map и последующей интеграции кода на ресурс.

<img src="images/maps.png" alt="Карта"/>

<div style="width: 600px; text-align: right;">

<a href="http://n.maps.yandex.ru/" target="_blank" style="color: #1A3DC1; font: 13px Arial,Helvetica,sans-serif;">Создано с помощью сервиса Яндекса Народная карта.</a></div>

<div style="font: 13px Arial, sans-serif; margin: 1em 0 0 0; padding: 0; line-height: normal; background: none; border: none;">

<h3 style="font: bold 13px Arial, sans-serif; margin: 0 0 0.6em 0; padding: 0; line-height: normal; background: none; border: none;">

Рисунок 5.10 - Интеграция карты от сервиса Yandex.maps

После основного текста страницы присутствует кнопки на популярные социальные сети интернета. Кнопки управляются при помощи скрипта share42.js.

<div class="share42init" data-url="[Mystic.ru]" data-title="[КРК Мистик]">

</div>

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

</script>

<script type="text/javascript">share42('share42/')</script>

Рисунок 5.11 - Кнопка “Поделиться” в социальных сетях.

5.2 Описание интерфейса

Работа с сайтом разделяется для 2 типов пользователей: администратор, незарегистрированный пользователь

Работа с ресурсом начинается со страницы входа. Страница входа на ресурс отличается от основного дизайна сайта. Страница входа включает в себя эмблему КРК ”Мистик”, при нажатии на которую выполняется скрипт с анимацией. А так же страница включает основные пункты меню, для быстрого доступа к необходимой информации.

Рисунок 5.12 - Страница входа на ресурс



Рисунок 5.13 - Анимация входа на ресурс

Рисунок 5.14 - Главная страница ресурса

Ресурс имеет 2х колоночный стандарт, схема которого приведена на рисунке. Ресурс содержит шапку, навигационное меню, левую колонку, центральную колонку и подвал.



1-шапка;2-навигационное меню; 3-левая колонка; 4-центральная колонка; 5-подвал

Рисунок 5.15 - Схематичное изображение дизайна ресурса

Шапка ресурса. Шапка ресурса содержит слайдшоу, которое управляется скриптом.

Рисунок 5.16 - Шапка ресурса

Левая колонка. Левая колонка представлена на всех страница ресурса, содержит изображения на предстоящие важные события в КРК ”Мистик”, при нажатии на которые происходит их увеличение в этом же окне при помощи скрипта.



Рисунок 5.17 - Левая колонка ресурса

Центральная колонка. Центральная колонка главной страницы содержит основные сведения о деятельности КРК ”Мистик” в виде текстовой информации, изображений, ссылок, переход по которым происходит нажатием левой кнопки мыши. Центральная колонка имеет полупрозрачный фон белого цвета. В конце центральной колонки расположены ссылки на самые известные социальные сети для рекомендации ресурса другим пользователям.



Рисунок 5.18 - Центральная колонка ресурса

Рисунок 5.19 - Кнопка “Поделиться” в социальных сетях.

Навигационное меню. Навигационное меню содержит ссылки на страницы ресурса. Меню имеет максимальный второй уровень вложенности, но возможно его расширения до 3. Навигационное меню управляется с помощью скрипта.

Рисунок 5.20 - Навигационное меню ресурса.

Подвал ресурса. Подвал ресурса остается неизменным для всех страниц ресурса и содержит адрес КРК ”Мистик” и контактный телефон.



Рисунок 5.21 - Подвал ресурса.

6. ТЕСТИРОВАНИЕ РАБОТЫ РЕСУРСА И КОНТРОЛЬНЫЙ

ПРИМЕР РАБОТЫ

Тестирование - это процесс многократного выполнения программы с целью обнаружения ошибок.

Цель тестирования - выявление как можно большего числа ошибок.

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

отсутствие эталона, которому должен соответствовать тестируемый Интернет-ресурс;

высокая сложность и принципиальная невозможность исчерпывающего тестирования;

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

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

Цель отладки - локализация и исправление выявленных в процессе тестирования ошибок.

6.1 Тестирование Интернет-ресурса

При тестировании WEB-сайта использовалось 2 метода:

метод детерминированного тестирования - для выявления наличия ошибок в работе ресурса;

метод статического тестирования - для локализации ошибок.

Детерминированное тестирование требует многократного выполнения ресурса на ЭВМ с использованием определенных, специальным образом подобранных тестовых наборов данных. При детерминированном тестировании контролируются каждая комбинация исходных данных и соответствующие ей результаты исполнения ресурса. Детерминированное тестирование в силу трудоемкости, возможно, применять для отдельных модулей в процессе работы ресурса [27].

Детерминированное тестирование, или тестирование на определенных входных значениях, основывается на двух подходах:

структурное тестирование;

функциональное тестирование.

Структурное тестирование, или тестирование программ как "белого ящика" предполагает детальное изучение логики интернет ресурса и построение таких входных наборов данных, которые позволили бы при многократном использовании ресурса на ЭВМ обеспечить выполнение максимально возможного количества маршрутов, логических ветвлений, циклов и так далее.

В процессе структурного тестирования все выявленные ошибки были локализованы.

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

В процессе функционального тестирования все выявленные ошибки были локализованы.

Статическое тестирование - наиболее формализованное, базируется на правилах структурного построения программ и обработки данных. Проверка степени выполнения этих правил проводится без изменения объектного кода программы путем формального анализа текста программы на языке программирования. Операторы и операнды текста программы анализируются в символьном виде.

Тестирование Интернет-ресурса проводилось с использованием виртуального сервера Denwer, что фактически моделирует работу ресурса в сети Internet.

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

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

Функциональные возможности - ресурс реализует установленные и предполагаемые потребности для решения поставленных задач.

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

Практичность - ресурса обуславливается независимостью конфигурации или платформы для конечного пользователя. Необходима лишь программа (браузер) для просмотра WEB-страниц.

Эффективность. Клиент (пользователь) получает качественную и объемную информацию, используя минимум ресурсов.

Сопровождаемость - или модификация Интернет-ресурса не требует больших усилий.

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

При тестировании Интернет-ресурса были определены методы тестирования и проведены испытания по большинству из выполняемых задач. Практически по всем задачам были получены результаты, соответствующие ожидаемым.

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

6.2 Контрольный пример работы Интернет-ресурса

Рисунок 6.1 - Главная страница ресурса

Рисунок 6.5 - Анимация кнопок быстрого доступа

Рисунок 6.3 - Навигационное меню

Рисунок 6.4 - Анимация навигационного меню

Рисунок 6.5 - Смена изображений в шапке ресурса

Рисунок 6.6 - Открытое изображение скриптом shutterset

Рисунок 6.7 - Объединение фотографий в галереи

Рисунок 6.8 - Кнопка “Поделиться” в социальных сетях

Рисунок 6.9 - Результат работы кнопки “Поделиться

7. ТЕХНИКО-ЭКОНОМИЧЕСКОЕ ОПИСАНИЕ

7.1 Предназначение разрабатываемого сайта

Данный сайт будет реализовывать информационную поддержку новому концертно-развлекательному комплексу “Мистик”.

Для фирмы-разработчика Интернет-ресурса источником дохода является продажа сайта заказчикам. Затраты фирмы разработчика включают в себя затраты на разработку Интернет-ресурса. Источником финансирования являются собственные средства фирмы-разработчика.

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

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

Начальный этап - на котором формулируются основные требования, предъявляемые к Интернет-ресурсу, описываются основные цели предъявляемые к ресурсу.

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

Этап проектирования и кодирования компонентов - в ходе выполнения данного этапа происходит проектирование и кодирование на выбранном языке программирования отдельных модулей Интернет-ресурса.

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

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

7.2 Расчет первоначальных затрат на программное обеспечение

Разработку системы проводит один специалист-программист. Тарифная ставка программиста составляет 100 руб/час.

Расчет трудозатрат в стоимостном выражении приведен в таблице 7.1.

Таблица 7.1- Расчет трудозатрат на программное обеспечение

Этапы	Виды работ	Исполнитель	Часовая ставка, руб	Трудоем-кость, час	Трудоем-кость, руб
		Кол-во	Должн.
1	2	3	4	5	6	7
1. Начальный	Формулирование требований к сайту, описание целей разработки	1	заказчик	-	-	-
2. Внешнее проектиро-вание	Разработка архитектуры и структуры программы, алгоритма разработка интерфейса пользователя	1	программист	100	25	2500
3. Разработка и кодирование компонентов	Разработка каждого компонента и кодирование на языке программирования	1	программист	100	80	8000
4. Основной этап	Отделка модулей	1	программист	100	40	4000
	Тестирование компонентов	1	программист	100	18	1800
	Комплексное тестирование программы	1	программист	100	14	1400
	Оформление программной документации	1	программист	100	8	800
5. Заключительный этап	Коррекция программной документации	1	программист	100	7	700
Итого					192	19200

Премия разработчика составляет 20% от основной:

К отчислениям на социальное страхование относятся отчисления на оплату перерывов в работе в связи с временной нетрудоспособностью и отчисления в пенсионный фонд. Норматив отчислений на социальное страхование составляет 30% от величины основной заработной платы:

К прочим расходам следует отнести расходы на обслуживание ЭВМ и плату за электроэнергию.

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

Следовательно, плата за электроэнергию составит:

Расходы на обслуживание ЭВМ определяются из стоимости ЭВМ и времени ее эксплуатации, по истечении которого, она подлежит замене(обычно это время не превышает 10-х лет), в течении всего времени эксплуатации на ЭВМ накладываются амортизационные. При стоимости ЭВМ в 30000 руб. ежемесячные вложения на амортизацию составят:

Амортизация за 200 часов разработки программного обеспечения:

Расчет себестоимости разработки системы представлен в таблице 7.2.

Таблица 7.2 - Совокупные первоначальные затраты на разработку системы

Статьи затрат	Сумма, руб.
Основная трудозатраты	19200
Отчисления	5760
Расходы на обслуживание ЭВМ (200 часов)	200
Плата за электроэнергию	350
Итого:	25510

7.3 Расчет текущих затрат

Текущие затраты складываются из следующих:

Зарплата администратора, которая будет расти на 12% ежегодно;

Амортизация компьютера;

Плата за электроэнергию, которая будет расти на 5% ежегодно;

Плата за доменное имя и хостинг, плата за которые остаются неизменными;

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

Основная зарплата администратора на фирме заказчика составляет 120 руб. в час. Разрабатываемый интернет-ресурс, в среднем, на фирме заказчике будет использоваться 2 часа в сутки в течении 22 календарных рабочих дня в месяц. Затраты на трудозатраты администратора в этом случае составит

Затраты на социальные нужды составляет 30%.

Стоимость расчета амортизационных отчислений на эксплуатацию компьютера рассчитывается по формуле 6.1 и составляет 250 руб. в месяц.

Время использования электроэнергии в процессе редактирования Интернет-ресурса:



Следовательно, плата за электроэнергию в месяц составит:

Плата за доменное имя, по данным сайта reg.ru, составляет 600 руб. в год, а хостинг, с учетом предъявляемых требований, 1000 руб. в месяц

Таблица 7.3 - Текущие затраты

Статьи затрат	Сумма, руб.
Основная заработная плата администратора	5280
Социальные нужды	1584
Расходы на обслуживание ЭВМ	250
Плата за электроэнергию	80
Плата за доменное имя, руб. в год	600
Хостинг	1000
Итого:	8894

7.4 Расчет цены Интернет-ресурса

Производитель Интернет-ресурса несет коммерческие расходы -- расходы на рекламу своей фирмы.

Реклама фирмы будет заказываться в специализированных рекламных агентствах по следующим тарифным ставкам:

реклама на щитах 7000 руб. в месяц

реклама по радио 4000 руб. в месяц

реклама в городском транспорте 4000 руб. в месяц

Таблица 7.4 - Коммерческие расходы

Статьи затрат	Сумма, руб.
реклама на щитах	7000
реклама по радио	4000
реклама в городском транспорте	4000
Итого:	15000

Так как затраты на разработку составляет 23040 руб, то стоимость системы составит сумму из стоимости разработки, коммерческих расходов, НДС и премии разработчика:

=(19200+15000)*1,18+(19200+15000)*0,2=47196 руб.

Доходы фирмы будут расти за счет увеличения количества посетителей. Как показывает практика количество посетителей от действия рекламы увеличиться на 8%.

Произведем расчет дохода с 1 человека

После первого года количество посетителей увеличится на 8% и составит 5400 человек. Следовательно общая прибыль составит

5400*1000=5400000 руб.

Следовательно разница составит 400000 руб.

После второго года количество посетителей увеличится еще на 8% и составит 5832 человек. Следовательно общая прибыль составит 5832*1000=5832000 руб.

Следовательно разница составит 432000 руб.

После второго года количество посетителей увеличится еще на 8% и составит 6298 человек. Следовательно общая прибыль составит

6298 *1000=6298000 руб.

Следовательно разница составит 466000 руб.

Коэф. Дисконтирования

где k- коэффициент дисконтирования

n- расчетный год

Дисконтированный чистый доход

Ставка дисконтирования

где

Таблица 7.5 - Основные экономические показатели

Показатель	Период, год
	0	1	2	3
Первоначальные затраты	-47196	-	-	-
Текущие затраты
зарплата администратора		63360	70963	79478
социальные нужды		19008	21288	23743
плата за электроэнергию		960	1008	1058
амортизация компьютера		3000	3000	3000
хостинг		12000	12000	12000
домен		600	600	600
Итого		98928	108859	119879
Доходы		400000	432000	466000
Чистые доходы		301072	323141	346121
Ставка дисконтирования r		16,88	16,88	16,88
Коэф. дисконтирования k		0,8556	0,732	0,6257
Дисконтированный чистый доход	-47196	257597	236539	216568
Накопленный дисконтированный доход		213401	449940	666508
Срок окупаемости

8. БЕЗОПАСНОСТЬ ЖИЗНЕДЕЯТЕЛЬНОСТИ

8.1 Краткая характеристика условий труда

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

8.2 Вредные производственные факторы

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

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

Объем помещений, в которых размещены работники вычислительных центров, не должен быть меньше 19,5 м3/человека с учетом максимального числа одновременно работающих в смену. Нормы микроклимата, где расположены компьютеры, приведены в таблице 8.1.

Таблица 8.1 Параметры микроклимата для помещений, где установлены компьютеры

Период года	Параметр микроклимата	Величина
Холодный	Температура воздуха в помещении Относительная влажность Скорость движения воздуха	22…24 °С 40…60 % до 0,1 м/с
Теплый	Температура воздуха в помещении Относительная влажность Скорость движения воздуха	23…25 °С 40…60 % 0,1…0,2 м/с

8.2.2 Производственные пыли, газы и пары. Защита от вредных газо-, паро- пылевыделений предусматривает устройство местной вытяжной вентиляции для отсоса вредных веществ непосредственно от мест их образования. Особые требования предъявляются также устройству помещения. Так, полы, стены, потолки выполнены гладкими, легко моющимися. В цехах проводится регулярная мокрая и вакуумная уборка. В дополнение к общим защитным средствам применяются индивидуальные средства защиты.

Компьютер не производит выбросов вредных веществ, поэтому особые меры к ЭГУ с МЖС по защите не требуются.

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

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

В помещении используется два вида освещения - естественное и искусственное. Нормирование естественного и искусственного освещения осуществляется СНиП 23-05-95 в зависимости от характера зрительной работы. При работе с рассматриваемой установкой необходимым является различение объектов размером 0,3...0,5 мм, что соответствует разряду зрительной работы 3в.

Искусственное освещение применяется для освещения при недостатке света и ночью. Источники света на рабочем месте:

1. Лампы накаливания (ЛН) - удобны в эксплуатации, просты в изготовлении, мало время разгорания, не нужно дополнительных устройств.

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

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

Шум характеризуется своим состоянием во времени:

- стационарный (непрерывный и не изменяющийся);

- импульсный (отдельные короткие импульсы через определенное время);

- прерывистый;

Согласно СНиП II-12-77 нормируемыми параметрами прерывистого и импульсного шума в расчетных точках следует считать эквивалентные (по энергии) уровни звукового давления Lэкв в дБ в октавных полосах частот со среднегеометрическими частотами 63, 125, 250, 500, 1000, 2000, 4000 и 8000 Гц.

Допустимые уровни звукового давления на рабочем месте в производственном помещении указаны в таблице.

Таблица 8.2 - Допустимые уровни звукового давления

Помещения и территории	Уровни звукового давления Lэкв в дБ в октавных полосах частот со среднегеометрическими частотами в Гц	Уровни звука LА и эквивалентные уровни звука LАэкв
	63	125	250	500	1000	2000	4000	8000	в дБА
1	2	3	4	5	6	7	8	9	10
Творческая деятельность, программирование	86	71	61	41	49	45	42	38	50

Исходя из данных таблиц получим, что при работе за компьютером значение Lэкв не должно превышать 49 дБА в октавной полосе 1000, а значение LАэкв не должно превышать 50 дБА.

Согласно ГОСТ 12.1.029-80 Средства и методы защиты от шума по отношению к защищаемому объекту подразделяются на:

средства и методы коллективной защиты;

средства индивидуальной защиты.

8.2.5 Электробезопасность.

Электробезопасность - система организационных и технических мероприятий и средств, обеспечивающих защиту людей от вредного и опасного воздействия электрического тока, электрической дуги, электромагнитного поля и статического электричества (ГОСТ 12.1.009-76).

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

ГОСТ 12.1.038-82 устанавливает предельно-допустимые уровни напряжений прикосновений и токов, протекающих через тело человека, предназначенные для проектирования способов защиты и средств защиты людей при взаимодействии с электроустановками производственного и бытового назначения постоянного и переменного тока с частотой 50 Гц таблица.

Таблица 8.3 - Нормативные величины токов по ГОСТ 12.1.038-82

Род тока	Предельно-допустимые уровни тока (мА) при заданном времени протекания t, с
	0,08	0,1	0,2	0,3	0,4	0,5	0,6
Переменный, 50 Гц	650	500	250	165	125	100	85
Постоянный	650	500	400	350	300	250	240

При длительном воздействии допустимый безопасный ток принят в 1 мА.

При продолжительном воздействии до 30 с - 6 мА.

За величину электрического тока, опасного для жизни человека, принимается ток 40 мА.

Один из способов защиты человека от поражения электрическим током это защитное зануление.

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

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

При использовании зануления должны быть выполнены следующие условия:

(8.1)

где k - коэффициент кратности номинального тока плавкой вставки предохранителя, k =3;

- номинальный ток плавкой вставки предохранителя, А.

Удельное сопротивление фазного провода:

Для фазного провода: Ом*мм2/м, м, мм2.

Отсюда сопротивление фазного провода:

Удельное сопротивление нулевого провода:

Для нулевого провода: Ом*мм2/м, м, мм2.

Отсюда удельное сопротивление нулевого провода:

Значения Хф и Хнз малы, ими можно пренебречь.

Полное сопротивление петли «фаза нуль»:

При использовании зануления по требованиям ПУЭ должно выполняться условие: .

Так как

,

следовательно условие выполняется.

Следовательно ток короткого замыкания:

(8.5)

Для плавкой вставки должно выполняться условие.

(8.6)

Для напряжения 220 В.

Условие выполняется.

В качестве дополнительной меры защиты к занулению принято устройство защитного отключения (УЗО), реагирующее на потенциал корпуса. УЗО рассматриваемого типа устраняет опасность поражения людей током при возникновении на зануленном корпусе повышенного потенциала.

При замыкании фазы на корпус вначале проявляется защитное свойство зануления, снижающее потенциал корпуса до некоторого предела к. Если к превышает к.доп, сработает УЗО, то есть произойдет отключение поврежденной установки от сети.

Рисунок 7.1 - Схема работы зануления 1- нулевой защитный проводник; 2- срабатываемый элемент защиты; 3- повторное заземление нулевого провода

8.3 Характеристика помещения

Промышленное помещение, в котором установлен рассматриваемый компьютер, по характеру окружающей среды относится к классу сухих помещений.

Компьютер включает в себя:

системный блок;

монитор;

принтер;

сканер.

клавиатура;

мышь.

В помещении имеется устройства отопления и вентиляции.

Шум и вибрация вредно воздействует на организм человека и работу оборудования.

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

Пожаробезопасность - система мероприятий, направленная на предотвращение и локализацию возгораний. В случае загорания компьютер должен быть потушен не с помощью воды, а с помощью углекислотных огнетушителей, например ОУ-2А, ОУ-5, ОУ-8 (ручных) или ОУ-25, ОУ-80 (передвижных).

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

ЗАКЛЮЧЕНИЕ

В результате проведенного дипломного проектирования была произведена разработка информационно-справочного ресурса культурно-развлекательного центра «Мистик», с применением языка разметки HTML и среды разработки - Notepad++.

Дизайн и цветовая гамма разработанного информационно-справочного ресурса соответствуют потребностям целевой аудитории.

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

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

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

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1. Верещаг, С.А. Perl & XML. Библиотека программиста / С.А. Верещаг.- СПб: Питер, 2012. - 208 c

2. Воронина, Л.И. Основы программирования на языке Perl / Л.И. Воронина.- М.: Радио и связь, 2010. - 144 c.

3. Высоковский, К.В. Perl: библиотека программиста / К.В. Высоковский.- СПб: Питер, 2010. - 249 c.

4. Глицкин, А.А. Perl. Сборник рецептов. Для профессионалов / А.А. Глицкин.- СПб: Питер; Издание 2-е, 2008. - 219 c.

5. Гутцайт, Е.М. Perl. Наглядный курс программирования / Е.М. Гутцайт.- Диалектика, 2009. - 280 c.

6. Гутцайт, Е.М. Программирование на Perl / Е.М. Гутцайт.- СПб: Символ-Плюс, 2008. - 270 c.

7. Даль, В.Е. PHP. 75 готовых решений для вашего сайта / В.Е. Даль.- СПб: Наука и техника, 2009. - 256 c.

8. Каспина, Р.Г. PHP 5 и MySQL. Библия пользователя / Р.Г. Каспина.- Вильямс, 2010. - 291 c.

9. Конверс, Т.Т. PHP 5 и MySQL. Библия пользователя / Т.Т. Конверс.-Вильямс, 2006. - 130 c.

10. Кристиансен, Т.Н. Perl. Сборник рецептов. Для профессионалов / Т.Н. Кристиансен.-СПб: Питер; Издание 2-е, 2004. - 128 c.

11. Кузнецов, М.В. и др. Практика создания Web-сайтов / М.В. Кузнецов.-БХВ-Петербург, 2008. - 194 c.

12. Маклейн, С.В. PHP. Практика создания Web-сайтов / С.В. Маклейн.- БХВ-Петербург, 2008. - 276 c.

13. Маслов, В.В. Основы программирования Web / В.В. Маслов.-М.: Радио и связь, 2000. - 144 c.

14. Мишина, А.П. Непрерывная интеграция. Улучшение качества программного обеспечения и снижение риска / А.П. Мишина.- М.: Вильямс, 2008. - 240 c.

15. Мостовский, А.П. MySQL и mSQL: Базы данных для небольших предприятий и Интернета / А.П. Мостовский.- СПб: Символ-Плюс, 2008. - 190 c.

16. Рэй, Э.П. Perl & XML. Библиотека программиста / Э.П. Рэй.-СПб: Питер, 2003. - 98 c.

17. Серр, Ж.В. Энциклопедия по СУБД Paradox 4.5 for DOS / Ж.В. Серр.- М.: Мир, 2008. - 102 c.

18. Синяков, А.Ф. Полная энциклопедия Интернета / А.Ф. Синяков.- АСТ, 2008. - 278 c.

19. Скорняков, Л.А. Drupal 6. Создание надежных и полнофункциональных веб-сайтов, блогов, форумов, порталов и сайтов-сообществ / Л.А. Скорняков.- М.: Вильямс, 2009. - 272 c.

20. Стинрод, Н.Е. Самоучитель Microsoft Access 2002 / Н.Е. Стинрод.- М.: Вильямс, 2012. - 247 c.

21. Стоянова, Р.В. Ответы на актуальные вопросы по Internet / Р.В. Стоянова.- Киев: DiaSoft, 2010. - 297 c.

22. Супруненко, Д.А. Стратегии клиент/сервер / Д.А. Супруненко.- Киев: Диалектика, 2010. - 179 c.

23. Уайтхэд, П.В. Perl. Наглядный курс программирования / П.В. Уайтхэд.-Диалектика, 2001. - 280 c.

24. Уолл, Л.Д. Программирование на Perl / Л.Д. Уолл.-СПб: Символ-Плюс, 2004. - 159 c.

25. Фукс, Л.Н. Основы систем баз данных / Л.Н. Фукс.- Финансы и статистика, 2012. - 292 c.

26. Хаусдорф, Ф.Г. Автоматизация процессов накопления, поиска и обобщения информации / Ф.Г. Хаусдорф.- Наука, 2009. - 256 c.

27. Хобби, Д.К. Протоколы Internet / Д.К. Хобби.- СПб: BHV, 2007. - 148 c.

28. Галкин С.Е. "Бизнес в Internet". М., Центр. 1998, -247с.

29. Федорчук А. "Как создаются Web-сайты". СПб, Питер. 2001, -180с.

30. Каймин В.А. "Информатика". Учебник для студентов. М., ИНФРА-М.2001, - 423с.

31. Шумилин В.К., Гетия И.Г. Охрана труда при работе на ПЭВМ. Учебное пособие (часть 1).- Москва: МИП, 1994г.

32. Информатика: Учебное пособие /Вишневский А.В., Глущенко Н.В., Гончаров Д.А. и др. Под ред. С.В. Швеца. - Изд. 2-е, перераб. и доп. -Абакан: Изд. ХГУ, 2002, - 278с.

33. Кульгин, М.С. Технологии корпоративных сетей / М.С. Кульгин.- СПб: Питер, 2000. - 704 c.

34. Ларионов, А.М. Вычислительные комплексы, системы и сети / А.М. Ларионов.- Л.: Энергоатомиздат, 1987. - 288 c.

35. Пеонтьев, Б.К. Энциклопедия web-дизайнера / Б.К. Пеонтьев. - М.: Новый Издательский дом; Издание 7-е, испр. и доп., 2004. - 640 c.

36. Петюшкин, А.К. HTML экспресс-курс / А.К. Петюшкин. - СПб: БХВ-Петербург, 2004. - 250 c.

37. Флэнаган, Д.Н. JavaScript: подробное руководство / Д.Н. Флэнаган. - Символ, 2008. - 992 c.

38. Хоникатт, Д.О. Использование Internet. / Д.О. Хоникатт. - М.: Вильямс; Издание 3-е, 1998. - 270 c.

39. Цвики, Э.Б. Создание защиты в интернете / Э. Б. Цвики. - СПб: Символ-Плюс; Издание 2-е, 2002. - 928 c.

40. Шмитт, К.Г. CSS. Рецепты программирования / К.Г. Шмитт.- М.: Русская редакция; Издание 2-е, 2007. - 592 c.

41. Уроки CSS, JQuery [Электронный ресурс] - Режим доступа: http://ruseller.com/

42. Сайт IT-агентства. Web мастеринг [Электронный ресурс] - Режим доступа: http://dweb.ru/rass/html/005.htm

43. Уроки HTML [Электронный ресурс] - Режим доступа: http://ab-w.net/HTML/HTML.php

44. CSS примеры [Электронный ресурс] - Режим доступа: http://www.tigir.com/css.htm

45. CSS примеры [Электронный ресурс] - Режим доступа: http://uroki-css.ru/css/css_examples.php

46. Уроки веб дизайна [Электронный ресурс] - Режим доступа: http://xhtml.co.il/

ПРИЛОЖЕНИЯ

ПРИЛОЖЕНИЕ А

Листинг страниц Интернет-ресурса

1 Листинг Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Концертно-развлекательный комплекс «Мистик»</title>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>

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

<script type="text/javascript">

$(document).ready(function() {

$curtainopen = false;

$(".logo2").click(function(){

$(this).blur();

if ($curtainopen == false){

$(this).stop().animate({ }, {queue:false, duration:350, easing:'easeOutBounce'});

$(".leftcurtain").stop().animate({width:'60px'}, 2000 );

$(".rightcurtain").stop().animate({width:'60px'},2000 );

$curtainopen = true;

setTimeout(function() { document.location.href="main.html"; }, 2000);}

return false;

});

});

$(document).ready(function() {

$curtainopen = false;

$(".club").click(function(){

$(this).blur();

if ($curtainopen == false){

$(this).stop().animate({ }, {queue:false, duration:350, easing:'easeOutBounce'});

$(".leftcurtain").stop().animate({width:'60px'}, 2000 );

$(".rightcurtain").stop().animate({width:'60px'},2000 );

$curtainopen = true;

setTimeout(function() { document.location.href="nightclub.html"; }, 2000);

}

return false;

});});

$(document).ready(function() {

$curtainopen = false;

$(".bouling").click(function(){

$(this).blur();

if ($curtainopen == false){

$(this).stop().animate({ }, {queue:false, duration:350, easing:'easeOutBounce'});

$(".leftcurtain").stop().animate({width:'60px'}, 2000 );

$(".rightcurtain").stop().animate({width:'60px'},2000 );

$curtainopen = true;

setTimeout(function() { document.location.href="bouling.html"; }, 2000);

}

return false;

});});

$(document).ready(function() {

$curtainopen = false;

$(".restoran").click(function(){

$(this).blur();

if ($curtainopen == false){

$(this).stop().animate({ }, {queue:false, duration:350, easing:'easeOutBounce'});

$(".leftcurtain").stop().animate({width:'60px'}, 2000 );

$(".rightcurtain").stop().animate({width:'60px'},2000 );

$curtainopen = true;

setTimeout(function() { document.location.href="restoran.html"; }, 2000);}

return false;});});

$(document).ready(function() {

$curtainopen = false;

$(".karaoke").click(function(){

$(this).blur();

if ($curtainopen == false){

$(this).stop().animate({ }, {queue:false, duration:350, easing:'easeOutBounce'});

$(".leftcurtain").stop().animate({width:'60px'}, 2000 );

$(".rightcurtain").stop().animate({width:'60px'},2000 );

$curtainopen = true;

setTimeout(function() { document.location.href="karaoke.html"; }, 2000);}

return false;

});});

$(document).ready(function() {

$curtainopen = false;

$(".bar").click(function(){

$(this).blur();

if ($curtainopen == false){

$(this).stop().animate({ }, {queue:false, duration:350, easing:'easeOutBounce'});

$(".leftcurtain").stop().animate({width:'60px'}, 2000 );

$(".rightcurtain").stop().animate({width:'60px'},2000 );

$curtainopen = true;

setTimeout(function() { document.location.href="djbar.html"; }, 2000);

}

return false;

});});

$(document).ready(function() {

$curtainopen = false;

$(".ploshadka").click(function(){

$(this).blur();

if ($curtainopen == false){

$(this).stop().animate({ }, {queue:false, duration:350, easing:'easeOutBounce'});

$(".leftcurtain").stop().animate({width:'60px'}, 2000 );

$(".rightcurtain").stop().animate({width:'60px'},2000 );

$curtainopen = true;

setTimeout(function() { document.location.href="ploshadka.html"; }, 2000);

}

return false;

});});

$(document).ready(function() {

$curtainopen = false;

$(".foto").click(function(){

$(this).blur();

if ($curtainopen == false){

$(this).stop().animate({ }, {queue:false, duration:350, easing:'easeOutBounce'});

$(".leftcurtain").stop().animate({width:'60px'}, 2000 );

$(".rightcurtain").stop().animate({width:'60px'},2000 );

$curtainopen = true;

setTimeout(function() { document.location.href="foto.html"; }, 2000);

}

return false;

});});

$(document).ready(function() {

$curtainopen = false;

$(".karting").click(function(){

$(this).blur();

if ($curtainopen == false){

$(this).stop().animate({ }, {queue:false, duration:350, easing:'easeOutBounce'});

$(".leftcurtain").stop().animate({width:'60px'}, 2000 );

$(".rightcurtain").stop().animate({width:'60px'},2000 );

$curtainopen = true;

setTimeout(function() { document.location.href="karting.html"; }, 2000);}

return false;

});});

</script>

<style type="text/css">

*{

margin:0;

padding:0;

}

body {

text-align: center;

background: #1e3553 url('images/index/darkcurtain.jpg') repeat-x;

}

img{

border: none; }

.leftcurtain{

width: 50%;

height: 100%;

top: 0px;

left: 0px;

position: absolute;

z-index: 2;

}

.rightcurtain{

width: 51%;

height: 100%;

right: 0px;

top: 0px;

position: absolute;

z-index: 3; }

.rightcurtain img, .leftcurtain img{

width: 100%;

height: 100%;}

.logo{

margin: 0px auto;

margin-top: 150px;

z-index: 5;

}

.logo2{

position: absolute;

top: 50%;

left: 50%;

margin-top: -250px;

margin-left: -320px;

z-index: 4; }

.logo2:hover

{position: absolute;

top: 50%;

left: 50%;

-webkit-transform:scale(1.05);

z-index: 4;

-moz-transform:scale(1.05); /* Firefox */

-o-transform:scale(1.05); /* Opera */

-ms-transform:scale(1.05);

transform:scale(1.05);

}

.rope{

position: absolute;

top: -40px;

left: 70%;

z-index: 4;

}

.load{

position: fixed; top: 5%; right: 48%;

z-index: -1;

}

.site{

position: absolute; center: 0%; right: 25%;z-index: -1;

height:100%;

}

.bouling

{

position: absolute;

top: 40%;

left: -95px;

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

width: 200px;

height: 138px;z-index: 4;

}

.bouling:hover

{

position: absolute;

top: 40%;

left: -45px;

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

width: 200px;

height: 138px;

-webkit-transform:scale(1.05);

z-index: 99;

-moz-transform:scale(1.05); /* Firefox */

-o-transform:scale(1.05); /* Opera */

-ms-transform:scale(1.05);

transform:scale(1.05);

}

.club

{

position: absolute;

op: 60%;

left: -95px;

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

width: 200px;

height: 138px;z-index: 4;

}

.club:hover

{

position: absolute;

top: 60%;

left: -45px;

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

width: 200px;

height: 138px;

-webkit-transform:scale(1.05);

z-index: 99;

-moz-transform:scale(1.05); /* Firefox */

-o-transform:scale(1.05); /* Opera */

-ms-transform:scale(1.05);

transform:scale(1.05);

}

.restoran

{

position: absolute;

top: 80%;

left: -95px;

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

width: 200px;

height: 138px;z-index: 4;

}

.restoran:hover

{

position: absolute;

top: 80%;

left: -45px;

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

width: 200px;

height: 138px;

-webkit-transform:scale(1.05);

z-index: 99;

-moz-transform:scale(1.05); /* Firefox */

-o-transform:scale(1.05); /* Opera */

-ms-transform:scale(1.05);

transform:scale(1.05);

}

.karaoke

{

position: absolute;

top: 20%;

left: -95px;

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

width: 200px;

height: 138px;z-index: 4;

}

.karaoke:hover

{

position: absolute;

top: 20%;

left: -45px;

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

width: 200px;

height: 138px;

-webkit-transform:scale(1.05);

z-index: 99;

-moz-transform:scale(1.05); /* Firefox */

-o-transform:scale(1.05); /* Opera */

-ms-transform:scale(1.05);

transform:scale(1.05);

}

.bar

{

position: absolute;

top: 20%;

right: 0px;

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

width: 100px;

height: 138px;z-index: 4;

}

.bar:hover

{

position: absolute;

top: 20%;

right: 5px;

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

width: 150px;

height: 138px;

-webkit-transform:scale(1.05);

z-index: 99;

-moz-transform:scale(1.05); /* Firefox */

-o-transform:scale(1.05); /* Opera */

-ms-transform:scale(1.05);

transform:scale(1.05);

}

.ploshadka

{

position: absolute;

top: 40%;

right: 0px;

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

width: 100px;

height: 138px;z-index: 4;

}

.ploshadka:hover

{

position: absolute;

top: 40%;

right: 5px;

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

width: 150px;

height: 138px;

-webkit-transform:scale(1.05);

z-index: 99;

-moz-transform:scale(1.05); /* Firefox */

-o-transform:scale(1.05); /* Opera */

-ms-transform:scale(1.05);

transform:scale(1.05);

}

.foto

{

position: absolute;

top: 60%;

right: 0px;

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

width: 100px;

height: 138px;z-index: 4;

}

.foto:hover

{

position: absolute;

top: 60%;

right: 5px;

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

width: 150px;

height: 138px;

}

.karting

{

position: absolute;

top: 80%;

right: 0px;

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

width: 100px;

height: 138px;z-index: 4;

}

.karting:hover

{

position: absolute;

top: 80%;

right: 5px;

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

width: 150px;

height: 138px;

-webkit-transform:scale(1.05);

z-index: 99;

-moz-transform:scale(1.05); /* Firefox */

-o-transform:scale(1.05); /* Opera */

-ms-transform:scale(1.05);

transform:scale(1.05);

}

</style>

</head>

<body>

<div class="leftcurtain"><img src="images/index/frontcurtain.jpg"/></div>

<div class="rightcurtain"><img src="images/index/frontcurtain.jpg"/></div>

<a href=>

<img class="logo2" src="images/index/logo.png" />

<a href=# class="bouling" />

</a>

<a href=# class="club" />

</a><a href=# class="restoran" />

</a>

<a href=# class="karaoke" />

</a><a href=# class="bar" />

</a>

<a href=# class="ploshadka" />

</a>

<a href=# class="foto" />

</a>

<a href=# class="karting" />

</a>

<img class="load" src="images/index/load.png" />

<!--//<img class="site" src="images/index/site.jpg" />

-->

</a>

</body>

</html>

2 Листинг main.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Mystic | Концертно-развлекательный центр</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="css/style.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css" href="css/coin-slider.css" />

<script type="text/javascript" src="js/cufon-yui.js"></script>

<script type="text/javascript" src="js/droid_sans_400-droid_sans_700.font.js">

</script>

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

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

<script type="text/javascript" src="js/coin-slider.min.js"></script>

<script type="text/javascript" src="shutter/shutter-reloaded.js"></script>

<link rel="stylesheet" type="text/css" href="shutter/shutter-reloaded.css" />

</head>

<body style="background:#0c0d0f url(images/background.jpg) repeat;">

<div class="main">

<div class="header">

<div class="header_resize">

<div class="menu_nav">

</div>

<div class="clr"></div>

<div class="slider">

<div id="coin-slider"> <a href="#"><img src="images/slide1.jpg" width="940" height="343" alt="" /> </a> <a href="#"><img src="images/slide2.jpg" width="940" height="343" alt="" /> </a> <a href="#"><img src="images/slide3.jpg" width="940" height="343" alt="" /> </a> </div>

</div>

<img id="image" src=images/glass.png>

<div class="clr"></div>

<div><ul id="menu">

<li><a href="main.html">ГЛАВНАЯ</a></li>

<li>

<a href="">КРК "МИСТИК"</a>

<ul>

<li>

<a href="concert.html">Концертная площадка</a>

</li>

<li>

<a href="nightclub.html">Ночной клуб</a>

</li>

<li>

<a href="djbar.html">DJ-бар</a>

</li>

<li>

<a href="restoran.html">Ресторан</a>

</li>

<li>

<a href="karaoke.html">Караоке</a>

</li>

<li>

<a href="bouling.html">Боулинг</a>

</li>

<li>

<a href="park.html">Детский парк</a>

</li>

<li>

<a href="ploshadka.html">Детская площадка</a>