Разработка интеллектуальной обучающей программы

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

Содержание

Введение

Глава 1. Теоретическая часть

1.1 Характеристика современного состояния исследуемой проблемы и пути ее решения

1.2 Методические подходы к решению проблемы

Глава 2. Проектная часть

2.1 Разработка проекта

2.2 Определение результатов внедрения проекта (тестирование)

2.3 Мероприятия по внедрению проекта

2.4 Руководство пользователя

2.5 Руководство администратора

Заключение

Список использованных источников информации

Приложения

Введение

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

* сбора материалов относящихся к исследуемому объекту;

* анализа полученной информации;

* выбора технологии и программных средств реализации.

Объектом исследования является проверка знаний пользователя в области FL Studio.

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

Программная реализация будет осуществляться с использованием сценарного языка PHP, а так же элементов JavaScript и HTML.

Создание данного тестирования позволит пользователю оценить собственные навыки и знания в области электронного секвенсора FL Studio.

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

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

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

Данное тестирование является полностью интегрируемым объектом, позволяющим:

* получить представление о функциональной части плагинов и элементов FL Studio;

* проверить знания пользователя в области функционала данного секвенсора;

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

Глава 1. Теоретическая часть

1.1 Характеристика современного состояния исследуемой проблемы и пути ее решения

В настоящие время использование тестирования в интернете широко развивается, ввиду удобства использования пользователем интернет тестов. Количество тестирующих Web-сайтов в интернете очень большое с различной тематикой и направленностью.

Проблема организации в недостатке клиентов из-за малой рекламы низкой известности компании.

Для решения этой проблемы для организации ООО «Комбат60» было принято решение разработать сайт. Сайт поможет клиентам просмотреть каталог продукции, имеющийся в данных магазинах и оставить заказ.

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

Дизайн обучающей программы предпочтительно выбрать в классическом стиле, так как его круг пользователей ? люди различного возраста и социального статуса. Графическая составляющая должна четко указывать на тематику тестирования - «Электронный секвенсор FL Studio». Оно должно быть легким для восприятия, иметь логически понятную навигацию. Программный продукт должен обладать оригинальными особенностями среди прочих обучающих программ данной категории.

Создание интеллектуальной обучающей программы определённой направленности.

Требования к программному продукту

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

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

· Тексты на сайте не должны содержать грамматических и стилистических ошибок.

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

· Сайт должен нормально просматриваться и функционировать в наиболее распространенных браузерах: Internet Explorer (версии 7.0 и выше), Opera (7-я и выше), Firefox, Chrome.

· Сайт должен корректно отображаться для посетителей, имеющих разрешение крана 800х600 и выше.

Создание данной тестирующей программы можно выполнить с помощью любого языка программирования прикладного программного обеспечения, например: VBA (Visual Basic for Application), средствами языка С++, Delphi, PHP.

В ходе выпускной квалификационной работы был выбран вид реализации - тестер, созданный при помощи сценарных языков PHP и JavaScript, дистрибутива серверных приложений «D.N.W.R.», разметки HTML и стилей CSS в связи с тем, что комплекс этих инструментов имеет следующие преимущества:

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

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

- позволяет производить администрирование в реальном времени;

Рассмотрим отдельные элементы средств выбранного комплекса: PHP (англ. PHP: Hypertext Preprocessor-- «PHP: препроцессор гипертекста»; первоначально Personal Home Page Tools-- «Инструменты для создания персональных веб-страниц»; произносится пи-эйч-пи) -- скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков программирования, применяющихся для создания динамических веб-сайтов.

Область применения:

В области программирования для сети Интернет, PHP-- один из популярных сценарных языков (наряду с JSP, Perl и языками, используемыми в ASP.NET) благодаря своей простоте, скорости выполнения, богатой функциональности, кроссплатформенности и распространению исходных кодов на основе лицензии PHP.

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

· автоматическое извлечение POST и GET-параметров, а также переменных окружения веб-сервера в предопределённые массивы;

· взаимодействие с большим количеством различных систем управления базами данных (MySQL, MySQLi, SQLite, PostgreSQL, Oracle (OCI8), Oracle, Microsoft SQL Server, Sybase, ODBC, mSQL, IBM DB2, Cloudscape и Apache Derby, Informix, Ovrimos SQL, Lotus Notes, DB++, DBM, dBase, DBX, FrontBase, FilePro, Ingres II, SESAM, Firebird / InterBase, Paradox File Access, MaxDB, Интерфейс PDO);

· автоматизированная отправка HTTP-заголовков;

· работа с HTTP-авторизацией;

· работа с cookies и сессиями;

· работа с локальными и удалёнными файлами, сокетами;

· обработка файлов, загружаемых на сервер;

· работа с XForms.

В настоящее время PHP используется сотнями тысяч разработчиков. Согласно рейтингу корпорации TIOBE, базирующемся на данных поисковых систем, в июне 2013 года PHP находился на 5 месте среди языков программирования. К крупнейшим сайтам, использующим PHP, относятся Facebook, Wikipedia и др.

Входит в LAMP -- распространённый набор программного обеспечения для создания и хостинга веб-сайтов (Linux, Apache, MySQL, PHP).

JavaScript -- прототипно-ориентированный сценарный язык программирования. Является диалектом языка ECMAScript.

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

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

На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке.

Название «JavaScript» является зарегистрированным товарным знаком компании Oracle Corporation. Возможности JavaScript:

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

Несмотря на схожий с Си синтаксис, JavaScript по сравнению с языком Си имеет коренные отличия:

· объекты, с возможностью интроспекции;

· функции как объекты первого класса;

· автоматическое приведение типов;

· автоматическая сборка мусора;

· анонимные функции.

В языке отсутствуют такие полезные вещи, как:

· модульная система: JavaScript не предоставляет возможности управлять зависимостями и изоляцией областей видимости;

· стандартная библиотека: в частности, отсутствует интерфейс программирования приложений по работе с файловой системой, управлению потоками ввода-вывода, базовых типов для бинарных данных;

· стандартные интерфейсы к веб-серверам и базам данных;

· система управления пакетами, которая бы отслеживала зависимости и автоматически устанавливала их.

Процесс создания и разработки сайта включает в себя:

1. Утверждение первичного технического задания на разработку сайта.

2. Определение структурной схемы сайта - расположение разделов, контента и навигации.

3. Веб-дизайн - создание графических элементов макета сайта, стилей и элементов навигации.

4. Разработку программного кода, модулей и других элементов сайта, необходимых в проекте.

5. Тестирование и размещение сайта в сети Интернет.

1.2 Методические подходы к решению проблемы

Обзор CMS

Система управления содержимым (контентом) - от англ. Content management system, CMS - компьютерная программы или информационная система, которая используется для организации и обеспечения совместного процесса создания, редактирования и управления контентом.

Основные функции CMS:

· Управление содержимым: хранение, контроль версий, соблюдение режима доступа и т.д.

· Публикация содержимого

· Представление информации в виде удобном для навигации и поиска.

· Предоставление инструментов для создания контента и его содержимого.

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

· Система управления содержания масштаба предприятия (англ. Enterprise Content Management System системы управления содержанием предприятий)

· Система управления Web-содержимым (англ. Web Content Management System)

Существует множество готовых систем управления содержимым сайта, в том числе и бесплатных. Делятся по способу работы:

· Генерация страниц по запросу Системы этого типа работают на основе «Модуль проектирования-база данных-модуль представления».

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

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

Для решения это задачи была выбрана популярная во всем мире CMS Joomla 2.5

При выборе программного и аппаратного обеспечения в качестве определяющих были выбраны следующие критерии:

· надежность решения;

· низкие расходы на сопровождение и модификацию программного и аппаратного обеспечения;

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

Joomla - система управления содержимым сайта написанная на языках PHP и JavaScript использующая в качестве хранилища базы данных СУБД MySQL или другие индустриально стандартные реляционные СУБД. Является свободным программным обеспечением и распространяется под лицензией GNU GPL. Название «Joomla» фонетически идентично слову «Jumla», которое в переводе означает «все вместе» или «единое целое», что отражает подход разработчиков и сообщества к развитию системы. Это название было выбрано сообществом среди многих, прошло проверку профессионалами маркетинга, и было решено, что «Joomla» - это самый удачный выбор.

CMS Joomla позволяет добиваться наилучшего соотношения цена-качество при создании любого сайта. В отличие от многих других систем, для Joomla подойдет практически любой хостинг с поддержкой PHP и MySQL. Управление сайтом на Joomla не требует специальных знаний программирования и HTML-верстки.

Система управления содержимым Joomla является ответвлением широко известной CMS Mambo. Команда независимых разработчиков отделилась от проекта Mambo по причине несогласия в экономической политике. Первая версия Joomla вышла 16 сентября 2005 года и являвшейся в тот момент исправленной Mambo.

К лету 2008 года по числу ежедневных скачиваний Joomla заняла второе место после WordPress со значительным отрывом от других систем.

CMS Joomla включает в себя инструменты для разработки Web-сайта. Важной особенностью системы является малый набор инструментов при установке, который можно дополнить по мере необходимости. Данная особенность позволяет снизить загроможденность административной панели не нужными элементами и так же снижает нагрузку на сервер и экономит место на сервере.

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

Основные возможности CMS Joomla:

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

· Имеется модуль безопасности для многоуровневой аутентификации пользователей и администраторов.

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

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

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

· Происходит регулярный выход обновлений.

· Закачка изображений при помощи браузера в вашу собственную библиотеку - для последующего использования с любого места сайта.

· Разделы тем могут быть добавлены авторами.

· Работа под Linux, FreeBSD, MacOSX, Solaris, AIX, SCO, WinNT, Win2K.

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

· Закачка изображений при помощи браузера в собственную библиотеку. Для последующего использования с любого места на сайте.

· Блоки с новостями, продукцией или услугами легко редактируются и управляются.

· Начиная с версии 1.6 встроена многоязычность.

· Начиная с версии 2.5. расширена поддержка баз данных. Реализована поддержка Microsoft SQL Server, а с версии 3.0 Postgre SQL.

Возможности администрирования:

· Возможность создания неограниченного количества страниц сайта.

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

· Четкая организация структуры Web-сайта.

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

· Полностью настраиваемые схемы расположения элементов по областям, что позволяет сделать свой дизайн оригинальным.

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

· Большое количество модулей.

· Выбор расположение модулей индивидуален.

· Возможность создания нескольких форм обратной связи для разных пользователей.

· Генератор показа случайно новости.

· Изменений порядка объектов, включая новости вопросы и статьи.

· Модуль приема от удаленных авторов новостей статей и ссылок.

· Иерархия объектов зависит от вашего желания. Количество секций, разделов, подразделов и страниц зависит только от вашего желания.

· Библиотека изображений позволяет хранить GIF- и JPEG- файлы под вашей рукой для быстрого доступа к ним.

· Менеджер рассылки новостей. Большой выбор более 360 служб рассылки новостей по всему миру.

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

· Возможность отправки любой статьи по e-mail.

· Выбор одного из 3 визуальных редакторов, это упрощает редактирование материалов до уровня редактора Word.

· Встроенный визуальный редактор TinyMCE.

· Настройка ссылок которые понимает человек, например «новость 2012 года» «mycite.ru/news/2012/»

· Предварительный просмотр перед окончательной публикацией статьи на сайте.

· Возможность легкой и быстрой смены дизайна сайта за счет шаблонов сайта.

· Экономичное расположение данных на сервере за счет использования баз данных MYSQL.

· Возможность использования адресов страниц адаптированных для лучшей индексации во всех поисковых системах.

· На данный момент более 8000 расширений доступно для пользователей Joomla.

Системные требования Joomla

Для корректной работы Joomla требуется:

· PHP 5.x или выше

· MySQL 4.1.x, 5.x

· Apache 1.3.x или выше

Joomla может использоваться совместно со всеми известными браузера такими как Internet Explorer версии 5.5 и выше, Google Chrome, Mozilla FireFox, Opera и так далее. Именно с этими браузера администрирование сайта наиболее совместимо.

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

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

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

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

Глава 2. Проектная часть

2.1 Разработка проекта

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

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

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

Шаблон JP Industry - новый шаблон, представленный дизайнерской студией Joomlaplates. Шаблон создан для работы с Joomla 2.5. Создавайте сайты для работы и бизнеса, порталы, портфолио и многое, многое другое.

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

Особенности шаблона JP Industry:

Наличие гибкой настройки шаблона, а также возможность настройки ширины модулей

Шаблон, как и большинство шаблонов Джумла совместим со всеми браузерами современности

В шаблон уже встроено Moomenu

Шаблон поддерживается любыми планшетными и мобильными устройствами

Шаблон поддерживает большое количество различных шрифтов

В шаблон встроено Javascript и CSS сжатие

Присутствуют такие модули, как MooTool, Article, Slider, Module и Moo Slideshow Module

Присутствует документация по настройке и установке шаблон.

Интерфейс пользователя - элементы и компоненты программы, которые способны оказывать влияние на взаимодействие пользователя с программным обеспечением. В том числе:

- средства отображения информации, отображаемая информация, форматы и коды;

- командные режимы, язык пользователь-интерфейс;

- устройства и технологии ввода данных;

- диалоги, взаимодействие и транзакции между пользователем и компьютером;

- обратная связь с пользователем;

- поддержка принятия решений в конкретной предметной области;

- порядок использования программы и документация на нее.

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

· О Нас

· Каталог

· Новости

· Контакты

Разработка контента в Joomla 2.5.

Что такое страница в Joomla? Страница в Joomla это статья. Технически статья состоит из:

· Названия

· Текста

· Категории, к которой она относится

· Автора

· Прав доступа

· Языка, на котором написана

· Мета-данные для поисковых систем

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

Текст статьи состоит из части, которая отображается в списках и остатках статьи. Создавая статью мы можем пользоваться встроенными редакторами (Например: TinyMCE изображенном на рис.5), а следовательно как автору то вам нет необходимости знать HTML.

На странице менеджер материалов использую кнопки панели инструментов можно (слева направо).

· Создать - создать новый материал

· Изменить - изменить выбранный материал

· Опубликовать - добавляет выбранный материал на сайт

· Снять с публикации - скрывает выбранный материал с сайта

· Избранные - позволяет добавить выбранный материал в избранные

· В архив - добавляет материал в архив

· Разблокировать - полностью закрывает открытую статью

· В корзину помещает выбранный материал в корзину

· Настройки - открывает настройки менеджера материалов

· Справка - открывает справку

Для изменения материала выбираем материал и нажимаем «Изменить» на открывшейся странице мы можем изменить:

· Заголовок материала

· Алис

· Категорию к которой относится материал

· Выбрать состояние

· Установить права доступа

· Добавить в избранное

· Выбрать язык материала

· Номер материла в системе Joomla

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

· В правой части экрана мы может настроить параметры публикации материала

· Параметры отображение материала

· Параметры редактирования

· Задать изображения и ссылки

· Метаданные

Категория - это объект в иерархии структуры содержимого.

Для работы с категориями необходимо перейти на страницу «Менеджер категорий».

Есть два способа перейти на страницу «Менеджер категорий».

Первый способ: можно нажать на главной странице панели администратора кнопку «Менеджер категорий».

На странице менеджер категорий использую кнопки панели инструментов можно (слева направо).

· Создать- создать новую категорию

· Изменить- изменить выбранную категорию

· Опубликовать - делает отобранные категории содержания доступными для пользователей Web-сайта.

· Снять с публикации - делает отобранные категории содержания недоступными для пользователей Web-сайта

· В архив - добавляет категорию в архив

· Разблокировать - завершает все работы с выбранной категорией

· В корзину - помещает выбранную категорию в корзину

· Перестроить - восстанавливает категории

· Настройки - открывает настройки менеджера категорий

· Справка - открывает справку

Под блоком со слайд шоу располагается приветствие от организации и краткая информация об организации.

На странице новости расположен модуль «mod_jp_smooth_gallery» - блок с картинками, который располагается на позиции «slideshow-2» и новости организации.

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

2.2 Определение результатов внедрения проекта (тестирование)

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

Проект показал высокую работоспособность в различных браузерах и на различных платформах.

2.3 Мероприятия по внедрению проекта

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

· Размещение сайта на сервере (хостинге)

· Размещение информации в поисковиках

· Регистрация в социальных сетях

· Размещение рекламы и баннеров на сторонних ресурсах.

Хостинг.

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

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

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

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

2.4 Руководство пользователя

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

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

На главной странице отображается информация об организации ООО «Комбат». Информация включает в себя краткую характеристику деятельности предприятия.

Страница Каталог содержит каталог товаров и услуг предоставляемых данной организацией.

Страница новости, на которой располагаются новости организации.

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

2.5 Руководство администратора

Добавление пользователей на страницу контактов

Добавлять пользователей на страницу контактов Joomla совсем не сложно.

Для начала войдите в панель администратора. Затем перейдите в: «Компоненты» -> «Контакты» -> «Категории» и выберите категории.

Можно использовать её или обновить, или создать собственную категорию.

Чтобы создать новую категорию:

* нажмите кнопу «Создать» в верхнем углу, откроется страница редактирования;

* впишите имя категории в поле названия, его будет видно пользователю;

* алиас - имя отображающееся в адресной строке браузера, впишите его в нужном поле без пробелов. Алиас не будет отображаться для пользователя;

* нажмите кнопку «Да» в поле размещения.

* можете добавить изображение, выровнять его вправо или влево и даже добавить описание;

* нажмите кнопку «Готово», и категория готова.

Создание нового пользователя

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

* добавьте имя контакта, псевдоним для компьютера. В левой части окна находится информация о пользователе

* в правой части окна мы видим много параметров. Под параметрами контакта впишите адрес и другую контактную информацию.

* потом можете выбрать иконки. Если хотите пользовательские иконки - добавьте их в папку Медиа под иконками, здесь они будут доступны для вставки в контакт

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

Заключение

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

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

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

На основе поставленных задач был предложен вариант разработки интерактивного web-сайта. Был разработан дизайн сайта и спроектированы: контент сайта, формы входной и выходной информации, схема меню.

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

Спроектированный web-сайт был доведено до практической реализации в системе управления содержимым сайта Joomla.

Внедрение интерактивного web-сайта имеет следующие преимущества:

* расширение круга потенциальных клиентов компании;

* увеличение известности компании;

* появление дополнительного средства рекламы.

Все основные задачи квалификационной работы выполнены: создан сайт и наполнен контентом.

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

сайт программа электронный секвенсор

Список использованных источников информации

1. Хаген Граф. Создание веб-сайтов с помощью Joomla! Издательство: Вильямс, 2009 г.

2. Бэрри Норт. Joomla! Практическое руководство. 2010 г.

3. Колисниченко Д.Н. CMS Joomla, руководство пользователя. Издательство: Диалектика, 2009 г.

Приложение 1

Файл tempalete.css

body {

margin:0;

padding:0;

line-height: 1.6em;

font-family: 'Didact Gothic', sans-serif;

color:#555;

font-size:13px;}

body.contentpane {

width: auto; /* Printable Page */

margin: 1em 2em;

line-height: 1.3em;

margin: 0px 0px 0px 0px;

font-size: 12px;

color: #333;

background:#fff;}

html { overflow-y:scroll;

height:100%;

min-height:100%;}

html.wrapper {

height:100%;/* 100% Height IE */}

html, body { margin: 0;

padding: 0;

height: 100%; /* WICHTIG!!! STRECKT ANZEIGENBEREICH AUF 100% */}

p {margin:4px 0 4px 0}

a {color:#000; text-decoration:underline;}

li a, a img, img a {border:none;text-decoration:none}

a:hover {text-decoration:none;}

ul{padding-left:20px}

/************** Typography styles **************/

h1, h2, h3, h4, h5, h6,.contentheading,.componentheading,.item h2 a, h2.contentheading a { font-weight:normal;

margin:0;

padding:0;

line-height: 1em;}

h1 { font-size: 2em;

margin-bottom:10px;}

h1.componentheading,.componentheading { margin: 0;

padding: 0 0 7px;}

h2.contentheading,.contentheading { margin: 0; padding: 0 0 7px; }

h2, h2.contentheading,.contentheading {

font-size:26px;

margin:10px 0 10px 0;

padding-bottom:10px;

border-bottom:1px solid #eee;

color:#ac190d;}

h2 a,h3 a { text-decoration: none;

color:#ac190d;}

h2 a:hover,h3 a:hover { text-decoration: none;

color:#000;}

h3 { line-height:1em;

margin:.4em 0; }

h4,.componentheading {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}

h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}

h6 {font-size:1em;font-weight:bold;}

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}

.readmore a{text-decoration:none}

.header h1 {font-weight:bold; letter-spacing:-1px; font-size:5.5em; }

.slide_module h1,.slide_module h2,.slide_module p,.slide_module h3 {color:#777}

.slide_module p{margin:0}

.slide_module h1,.slide_module h3 {margin-top:10px;}

.slide_module h1 { font-size:4em}

.slide_module h3 { text-transform:uppercase; font-weight:bold}

.small,.createdate {font-size:.7em;padding-bottom:.875em;line-height:1.875em;}

.centered {text-align: center;}

.componentheading {margin:.3em 0;}

.logo h1 { line-height: 1em; padding:0; margin:0; font-size:18px; font-weight: lighter;}

.imgpadding{margin-right:20px;}

.imgborder1{padding:4px;border:1px solid #dadada;background:#fff;margin-top:14px}

a.contentpagetitle,

a.contentpagetitle:hover, a.contentpagetitle:active,

a.contentpagetitle:focus { font-weight: normal; }

a.poll-result { font-size: 92%; text-transform: uppercase; }

th { padding: 5px;

font-weight: bold;

text-align: left;}

fieldset {

border: none;

text-align:left;

/*padding: 10px 5px;*/

}fieldset a {

font-weight: bold;

}td, div {

font-size: 100%;

}img, img a, a.img {

border: none;}

/* ++++++++++++++ details ++++++++++++++ */

.aticle-info{

margin:6px 0 10px 0px;

font-size:0.9em;}

.article-info-term{

display:none}

dt.category-name,

dt.create,

dt.modified,

dt.createdby{

float:left;

padding-right:5px;}

.archive.article-info dd,

.article-info dd{

margin:2px 0 0px 0;

line-height:1.2em}

.article-info dd span{

text-transform:none;

display:inline-block;

padding:0 5px 0 0px;

margin:0 10px 0 0px;}

div.back_button a,

div.back_button a:hover,

div.back_button a:active { display: block; margin: 10px 0; }

/* ++++++++++++++ aticle icons ++++++++++++++ */

ul.actions {

display: block;

text-align: right;

float:right;

margin-top:6px;}

.actions li {

display: inline;

list-style: none;

margin-left: 0px;

background:none;

padding:0;}

/* ++++++++++++++ blog ++++++++++++++ */

.cols-1 {

display: block;

float: none !important;

margin: 0 !important;}

.cols-2.column-1 {

width: 46%;

float: left;}

.cols-2.column-2 {

width: 46%;

float: right;

margin: 0;}

.cols-3.column-1 { float: left;

width: 29%;

padding: 10px 5px;

margin-right: 4%}

.cols-3.column-2 { float: left;

width: 29%;

margin-left: 0;

padding: 10px 5px}

.cols-3.column-3 { float: right;

width: 29%;

padding: 10px 5px;}

.items-row { overflow: hidden;

margin-bottom:20px;}

.column-1 { padding: 10px 0;}

.column-2,.column-3 { padding: 10px 5px}

.column-2 { width: 55%;

margin-left: 40%;}

.column-3 { width: 30%}

.items-more{ margin:10px 0 10px 0;}

.items-leading { margin-bottom:10px;

overflow:hidden;

padding:0 0 10px 0;}

/* ++++++++++++++ pagination ++++++++++++++ */

.pagination{ margin:10px 0 ;

padding:10px 0 10px 0px;}

.pagination ul{ margin:0;

padding:0;

text-align:center;}

.pagination li{

display:inline;

padding:2px 5px;

text-align:left;

margin:0 2px;

background:none;}

/* ++++++++++++++ page nav ++++++++++++++ */

ul.pagenav { list-style-type:none;

padding:0;

overflow:hidden;

margin:0;}

ul.pagenav li{

display:inline-block;

padding:1px 10px;

margin:4px;

position:relative;

list-style-type:none;

background-image:none;

background:#fff;

border:1px solid #ccc

}ul.pagenav li a{

padding:2px;

text-decoration:none;

list-style:none;

background-image:none;

color:#777;

font-size:92%;}

ul.pagenav li.pagenav-prev {

float:left;list-style-type:none;}

ul.pagenav li.pagenav-next{

float:right

}.pagenav {

padding:2px}

.pagination li.pagination-start,

.pagination li.pagination-next,

.pagination li.pagination-end,

.pagination li.pagination-prev{

border:0}

.pagination li.pagination-start,

.pagination li.pagination-start span { padding:0}

p.counter { font-weight:normal;text-align:center;}

.counter { line-height: 1;

margin: 15px 0 !important;

text-align: right;}

.counter span { background: #fff;

border: 1px solid #069;

color: #fff;

padding: 2px 5px;}

/* Poll */

div.poll { padding: 15px 0; }

/* Meta ---*/

dl.article-info { color: #999; width: 85%; }

.blog-featured dl.article-info { width: 70%; }

dl.poll {

border-bottom: 1px dotted #ccc;

font-size: 92%;

margin-bottom: 10px;

padding-bottom: 10px;

}dl.poll dd { clear: right; }

dl.poll dt { clear: left; width: 100px; }

dl.poll dt, dl.poll dd { float: left; }

fieldset { border: none; padding: 10px 5px; }

fieldset a { font-weight: bold; }

fieldset.input { padding: 0; }

/* FORM--------------------------------------------------------- */

form label { cursor: pointer; }

form#poll { border-bottom: 1px dotted #ccc;

font-weight: bold;

margin-bottom: 10px;

padding-bottom: 10px;}

/* Search ---*/

form#searchForm { border-top: none; }

.search.word label {

padding-right: 5px;}

.search.word.inputbox { margin: 0;}

.search.word button { height: 22px; }

/* Search ---*/

form#searchForm { padding: 15px 0; }

form.poll.button { margin-right: 5px; }

h4 { font-size: 100%; text-transform: UPPERCASE; }

/ *Poll Module ---*/

h4.poll-title { margin: 0; padding: 0; }

h5 { font-size: 100%; }

input, select, textarea,.inputbox {

font-size: 100%;

padding: 3px 5px;}

/*Inline images ---*/

p.img_caption { color: #999; text-transform: uppercase; }

/* Small text ---*/

small,.small,.smalldark,.createby,.createdate,.modifydate,.img_caption,.contenttoc,

p.site-slogan, a.readon,.ja-navhelper, #ja-footer { font-size: 92%; }

span.has-image {

padding-left: 25px;

display: block;

overflow: hidden;

background-repeat: no-repeat;

background-position: left top;}

span.menu-desc {

display: block;

font-weight: normal;

font-size: 92%;

color: #999;}

span.menu-title { display: block; }

table.contentpane, table.tablelist { width: 100%; }

table.contentpaneopen {

border: none;

border-collapse: collapse;

border-spacing: 0;}

/* Misc. */

table.contentpaneopen, table.contentpane, table.blog { width: 100%; }

/* Content Toc */

table.contenttoc {

border: 1px solid #ddd;

float: right;

margin: 0 0 10px 12px;

padding: 0;

width: 30%;}

table.contenttoc a { color: #333; }

table.contenttoc td { border-bottom: 1px dotted #ccc; padding: 5px 10px; }

table.contenttoc th { background: #f6f6f6;

border-bottom: 1px solid #ccc;

text-transform: uppercase;}

table.pollstableborder { border: none;

padding: 0;

text-align: left;

width: 100%;}

table.pollstableborder img { vertical-align: baseline; }

table.pollstableborder td {

background: #f6f6f6;

border-bottom: 1px solid #ccc;

font-weight: bold;

padding: 5px !important;}

table.pollstableborder tr.sectiontableentry0 td,

table.pollstableborder tr.sectiontableentry1 td { background: #fff; font-weight: normal; }

/* Search */

table.searchintro { padding: 10px 0; width: 100%; }

table.searchintro td { padding: 5px !important; }

td { font-size: 100%; padding: 5px; }

/* Others ---*/

th { font-weight: bold; padding: 5px; text-align: left; }

/* Tables ---*/

thead tr th { background: #fff; color: #777; padding: 5px; }

thead tr th a, thead tr th a:hover, thead tr th a:focus,

thead tr th a:active { color: #000; }

ul.actions { list-style-type: none; margin: 0 !important; }

.article_column { }

.article_row { padding-bottom: 10px; padding-top: 10px; }

.article_separator,

.leading_separator,

.row_separator,

.column_separator { display: none; }

.article-content img { margin: 5px; }

.article-info-term{ display: none !important; }

.article-meta { float: left; padding: 0; width: 70%; }

.article-section,.article-category { color: #999; }

.article-tools { background: #f6f6f6;

border: 1px solid #ddd;

clear: both;

color: #999;

display: block;

line-height: normal;

margin: 0 0 10px;

padding: 5px;

position: relative;}

/* JOOMLA STYLE

--------------------------------------------------------- */

/* Layout Deco ---*/

.blog p img { float: left; padding: 0 10px 10px 0; }

.blog_more { border-top: 1px solid #ccc;

border-bottom: 1px solid #ccc;

padding: 15px 0 5px;}

.blog_more h2 {

font-size: 115%;

margin: 0 0 5px;

text-transform: uppercase;}

.blog_more ul li {

padding-left: 15px;}

.blog-featured.contentheading { font-size: 125%; }

.button:hover,.button:focus {color: #000; }

.buttonheading { float: right; }

.buttonheading img { border: 0; float: right; margin: 0 5px 0 0; }

table{ border-collapse:collapse;}

table.weblinks,

table.category{ margin:10px 10px 20px 0px;

width:99%;}

table.weblinks td{

border-collapse:collapse;}

table.weblinks td,

table.category td{ padding:7px;}

table.weblinks th,

table.category th{ padding:7px;

text-align:left}

td.num{ vertical-align:top;

text-align:left;}

td.hits{ vertical-align:top;

text-align:center}

td p{ margin:0;}

.filter{ margin:10px 0}

.display-limit,

.filter{ text-align:right;

margin-right:7px}

/* ++++++++++++++ category table ++++++++++++++ */

table.category th a img{

padding:2px 10px}

.filter-search{ float:left;}

.filter-search.inputbox{ width:6em}

legend.element-invisible{ position:absolute;

/* need margin top and left doesn't work for the legend element */

margin-left:-3000px;

margin-top:-3000px;

height:0px;}.cat-items{ margin-top:20px}

.cat-list-row0,

.cat-list-row1,

tr.cat-list-row0 td,

tr.cat-list-row1 td { border-bottom: 1px solid #ccc; padding: 5px; }

.cat-list-row1:hover,

.cat-list-row0:hover { background: #ffffcc; }

.cat-list-row2,

tr.cat-list-row2 td { background-color: #f6f6f6; }

.checkbox { }

.column ol li { line-height: 180%; margin-left: 30px; }

/* Content spacing ---*/

.column p,.column pre,.column blockquote,

.column h1,.column h2,.column h3,.column h4,.column h5,.column h6,

.column ol,.column ul { margin: 15px 0; padding: 0; }

#it-lp{position: absolute; top: 0px; left: -5000px;}

/* List ---*/

.column ul li { }

.column_separator { padding: 0 25px; }

.componentheading { border-bottom: 1px solid #ccc; font-size: 180%; }

.contact_email { margin: 0 0 10px; }

.contact_email label { font-weight: bold; display: block; }

.contact_email_checkbox { margin: 15px 0; }

.contentdescription { border-bottom: 1px solid #ccc; }

.contentdescription { border-bottom: 1px solid #ccc;

display: block;

margin: 0 -15px;

padding: 10px 15px;}

.contentdescription p { margin: 0; }

.contentpaneopen_edit img { vertical-align: middle; }

.custom_banner { float: left; display: block; margin-top: 10px; }

.form-register.button { margin-left: 140px; }

.form-register.inputbox { margin-left: 10px; width: 200px; }

/* Register ---*/

.form-register fieldset { padding: 0 0 10px; }

.form-register label { font-weight: bold;

text-align: right; display: block;

float: left;

width: 130px;}

.form-register p { margin: 0 0 5px; }

.form-register p.form-des { margin: 15px 0; }

.hasTip img { border: none; margin: 0 5px 0 0; }

.img_caption { color: #999; margin-bottom: 10px; }

.img_caption img { margin: 5px 0 0; }

.img_caption p { background: #333;

border-top: 1px solid #fff;

color: #ccc;

margin: 0;

padding: 1px 0;

text-align: center;}

.inputbox { border: 1px solid #ccc; background: #fff; }

.inputbox:hover,.inputbox:focus { background: #ffffcc; }

.items-more { border-top: solid 1px #ccc;

border-bottom: solid 1px #ccc;}

.items-more h3 { text-transform: uppercase; }

.leading { padding-bottom: 10px;

padding-top: 10px;

border-bottom: solid 1px #ccc;}

.login_form.button { margin-left: 140px; }

.login_form.inputbox { margin-left: 10px; width: 150px; }

.login_form.remember.inputbox { width: 20px; }

/* Login ---*/

.login_form fieldset { padding: 15px 0 0; }

.login_form fieldset p { margin: 0 0 5px; }

.login_form label { font-weight: bold;

text-align: right;

display: block;

float: left;

width: 130px;}

.modifydate { color: #999; display: block; margin: 10px 0; }

.pagenavbar { font-weight: bold; }

.pagenavcounter { margin: 15px 0 !important; text-align: center; }

.pagination a{ font-weight: bold; }

.radio { margin: 0 5px; }

.results h4 { text-transform: none; font-size: 110%; }

.results h4 { text-transform: none;

font-size: 110%;

margin: 15px 0 0;}

.results p { margin: 0 0 10px; }

.search fieldset { border: 1px solid #ccc; margin: 15px 0; padding: 10px; }

.search legend { font-size: 100%;

font-weight: bolder;

line-height: 1.2;

margin-left: 10px;}

.sectiontableentry,

.sectiontableentry0,

.sectiontableentry1,

.sectiontableentry2 { background: url(../images/dot2.gif) repeat-x bottom;

padding: 5px 5px 6px;}

.sectiontableentry:hover,

.sectiontableentry0:hover,

.sectiontableentry1:hover,

.sectiontableentry2:hover { background-color: #fffff0; }

.sectiontableentry2 { background-color: #f6f6f6; }

.sectiontableheader { background: #333;

border: 1px solid #ccc;

color: #fff;

padding: 5px;}

.sectiontableheader a,

.sectiontableheader a:hover,

.sectiontableheader a:focus,

.sectiontableheader a:active { color: #fff; }

.smalldark { text-align: left; }

.sortby { font-size: 92%; margin: 10px 0 5px; }

.sortby.display { float: right; text-align: right; }

.sortby.filter,.sortby.display { float: left; width: 40%; }

.tool-text { font-size: 100%; margin: 0; }

/* Tooltips --- */

.tool-tip { background: #ffffcc;

border: 1px solid #D4D5AA; float: left;

max-width: 300px;

padding: 5px;

z-index: 1000;}

.tool-title { font-size: 100%;

font-weight: bold;

margin: 0;

margin-top: -15px;

padding: 0;

padding-bottom: 5px;

padding-top: 15px;}

/* User ---*/

.user-details { padding: 10px 0; }

.user-details.button { margin-left: 140px; }.user-details.inputbox { margin-left: 10px; width: 200px; }

.user-details.paramlist.paramlist_key { width: 130px !important; padding: 0 0 5px !important; }

.user-details.paramlist.paramlist_value { padding: 0 0 5px !important; }

.user-details.user_name span { padding-left: 10px; font-weight: bold; }

.user-details label { font-weight: bold;

text-align: right;

display: block;

float: left;

width: 130px;}.user-details p { margin: 0 0 5px; }

/* MAIN LAYOUT DIVS--------------------------------------------------------- */

.wrap { }

/* -- EDITOR STYLES ----------------------------- */

#adminForm fieldset {

border: 1px solid #ddd;

padding: 10px;

margin-bottom: 20px;}

#adminForm fieldset legend { padding: 0 5px; }

/* Article index */

#article-index { border: 1px solid #dedede;

float: right;

margin: 0 0 10px 12px;

padding: 0;

width: 30%;}

#article-index li { border-bottom: 1px dotted #dedede;

background: none;

padding-left: 10px;}

#article-index li a{ font-size: 11px; }

#article-index ul { list-style:inside; padding-left:10px }

/* Contact ---*/

#component-contact #emailForm { border-top: 1px solid #ccc; }

#component-contact #emailForm { border-top: 1px solid #ccc; padding-top: 15px; }

/* Contact ---*/

#component-contact address { font-style: normal; }

#contact-slider { float: none; border-bottom: 1px solid #ccc; }

#contact-slider.content { border: 1px solid #ccc; padding: 8px 10px; }

#contact-slider.jpane-toggler-down { background: #fff; }

#cotact-slider.jpane-toggler-down a { color: #fff; }

#contact-slider.title { padding: 8px 10px; border-top: 1px solid #ccc;

border-left: 1px solid #ccc;

border-right: 1px solid #ccc;

margin: 0;}

#contact-slider dt.closed { background: #ffffcc; }

#form-login.button { margin: 10px 0; }

#form-login p { margin: 0 0 5px; }

#form-login ul { margin: 0 !important; padding: 0; }

#form-login-remember input { border: none; padding-top: 0px; padding-bottom: 0px; }

#form-login-username.inputbox, #form-login-password.inputbox { width: 90%; }

/* Login Module ---*/

#form-login-username.inputbox,

#form-login-password.inputbox {

background-position: 5px center;

background-repeat: no-repeat;

font-weight: bold;}

.login-fields{ margin:10px 0}

.login-fields label{

float:left;

width:9em}

.login-description img,

.logout-description img{

float:left;

margin-right:20px}

.login-description,

.logout-description

{ overflow:hidden;

padding-left:5px;

margin:20px 0 10px 0

}.logout-description

{ margin-bottom:20px}

/* Contact ---*/

#component-contact #emailForm { border-top: 1px solid #ccc; }

.contact-form #jform_contact_emailmsg,.contact-form input {width:210px;}

.contact-form #jform_contact_email_copy { width: 13px; }

.jicons-icons img { float: left; padding-right:5px; }

/* Advertisement ---*/

.bannergroup_text {

color: #999999;

font-size: 92%;}

.bannergroup_text.banneritem {

border-bottom: 1px dotted #CCCCCC;

padding: 5px 0;}

.bannergroup_text.banneritem a {

font-weight: bold;}

.img_caption.left { margin-top: 0; }

/* ++++++++++++++ tooltip ++++++++++++++ */

.tip{ font-size:11px;

text-align:left;

padding:3px;

max-width:400px;

background:#fff;

border:1px solid #ccc;

line-height:120%;

z-index:9999;

position: relative;}

.tip-title{ font-weight:bold;}

.imgusertop{

padding:4px;

border:1px solid #dadada;

background:#fff;

margin-bottom:10px;}

span.spacer label{font-weight:bold}

/* System Messages */

#system-message {

margin-bottom: 10px;

padding: 0;}

#system-message dt { font-weight: bold;}

#system-message dd { margin: 0;

font-weight: bold;

text-indent: 30px;

background-image:none;}

#system-message dd ul {

background-color:#FDFDFD;

color: #c02;

margin-bottom: 10px;

list-style: none;

padding: 10px;

border-top: 1px solid #EAEAEA;

border-bottom: 1px solid #EAEAEA;}

/* System Standard Messages */

...