Основы современных web-технологий
Введение
Одним из перспективных направлений развития современной образовательной системы является использования электронных учебных пособий.
Объективное исследование влияния электронных учебных пособий на образовательный процесс предполагает анализ особенностей современных электронных учебных пособий.
Электронные учебные пособия (ЭУП) — это программно-методический обучающий комплекс, предназначенный для самостоятельного изучения студентом учебного материала по определенным дисциплинам.
Важно подчеркнуть, что электронное пособие — это не электронный вариант книги, где все информация с печатного варианта переведена в электронный или есть возможностью перехода из оглавления по гиперссылке на искомую главу. В зависимости от вида проведения учебного занятия (лекция, семинар, тест, самостоятельная работа) сам ход занятия должен быть соответствующим образом построен для достижения эффекта от использования такого пособия. При грамотном использовании электронного учебного пособия оно может стать мощным инструментом для самостоятельного изучения большинства дисциплин, особенно, связанных с информационными технологиями.
Объектом исследования является электронное учебно-методическое пособие.
Предметом исследования являются средства реализации и этапы создания электронного учебно-методического пособия.
Цель данного дипломного проекта - разработать электронное учебно-методическое пособие по ПМ 02. Организация сетевого администрирования в виде сайта.
Реализация данной цели требует содержательного и методического решения следующих задач:
- изучить историю и теорию Web-дизайна;
- разработать концептуальную модель учебника;
- изучить Web-технологию и языки HTML и Java-Script и их возможности в Web-дизайне;
- выявить эффективность программно-аппаратных средств в Web-дизайне.
Теоретическая часть проекта
PHP
PHP - язык программирования, используемый на стороне WEB-сервера для динамической генерации HTML-страниц. Об этом говорит и расшифровка его названия: PHP - Personal HyperText Processor.
PHP - один из немногих языков программирования, созданных специально для разработки веб-приложений. Поэтому он включает в себя все функции, необходимые именно для работы на веб-сервере, и при этом лишен избыточности, свойственной многим его конкурентам.
Очень приятная особенность PHP - то, что его команды включаются в обычные HTML-страницы с помощью специальных тегов, которые и заставляют PHP-машину выполнять на сервере нужные действия. Программам на PHP не нужны специальные CGI-директории с особыми правами доступа. Более того, на одной страничке можно произвольно чередовать "простой" HTML и PHP-код.
PHP не зависит от платформы. PHP прекрасно интегрируется во все популярные веб-серверы: Apacce и IIS, Zens и Netscape Enterprise Server, работает под Windows и OS/2, MacOS и практически всеми UNIX-подобными системами. Как следствие - PHP работает практически у всех хостеров, разрешающих собственные выполняемые скрипты.
Замечательная особенность PHP - его интегрированность практически со всеми современными интернет-технологиями. PHP поддерживает большинство современных веб-протоколов: IMAP, FTP, POP, XML, SNMP и другие. PHP прекрасно работает с базами данных. Трудно найти СУБД, поддержка которой не была бы реализована в PHP. MySQL и MS SQL Server, PostgreSQL и Oracle, Sybase и Interbase... Один только перечень баз данных, поддерживаемых PHP, займет, наверное, целый экран.
PHP включает в себя огромное количество встроенных функций: обработки строк и массивов, работы с файловой системой и с HTTP, электронной почтой, датой и временем, кириллицей и другими национальными алфавитами... Когда я впервые начал программировать на PHP, то был просто поражен обилием встроенных функций! Благодаря им многие алгоритмы, требующие в большинстве языков написания программного кода размером в несколько экранов, реализуются на PHP одной командой (точнее, вызовом одной функции).
JavaScript
JavaScript - это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента. Если быть более точным, то JavaScript - это не только язык программирования на стороне клиента. Liveware, прародитель JavaScript, является средством подстановок на стороне сервера Netscape. Однако наибольшую популярность JavaScript обеспечило программирование на стороне клиента.
JavaScriptстандартизованECMA(EuropeanComputerManufacturersAssociation- Ассоциация европейских производителей компьютеров). Соответствующие стандарты носят названия ECMA-262 и ISO-16262. Этими стандартами определяется язык ECMAScript, который примерно эквивалентен JavaScript 1.1. Отметим, что не все реализации JavaScript на сегодня полностью соответствуют стандарту ECMA. В рамках данного курса мы во всех случаях будем использовать название JavaScript.
Название "JavaScript" является собственностью Netscape. Реализация языка, осуществленная разработчиками Microsoft, официально называется Javascript. Версии JavaScript совместимы (если быть совсем точным, то не до конца) с соответствующими версиями JavaScript, т.е. JavaScript является подмножеством языка JavaScript.
Основная идея JavaScript состоит в возможности изменения значений атрибутов HTML-контейнеров и свойств среды отображения в процессе просмотра HTML-страницы пользователем. При этом перезагрузки страницы не происходит.
HTML
HTML (HyperText Markup Language) означает "язык разметки гипертекстов", с помощью которого верстаются Web-страницы. В самом начале развития WWW регулировать стандарты разработки была призвана международная общественная организация, включающая в себя представителей фирм-разработчиков и исследовательских институтов — W3C (World Wide Web Consortium).
Характеристики HTML:
- Разработан специально для Web;
- Открытый стандарт;
- В HTML включен гипертекст;
- В HTML включена поддержка мультимедиа.
Со времени создания первой версии HTML претерпел некоторые изменения. Известны спецификации 2.0, 3.0, 3.2, 4.0, 5.0.
Все что необходимо, чтобы прочитать HTML-документ - это Web- браузер, который интерпретирует элементы HTML и воспроизводит на экране документ в виде, который ему придает автор. Основное преимущество HTML заключается в том, что документ может быть просмотрен на Web-браузерах различных типов и на различных платформах. HTML-документы могут быть созданы при помощи любого текстового редактора или специализированных HTML-редакторов и конвертеров. C другой стороны можно использовать специальные программы – редакторы HTML текстов.
Основными конструкциями языка являются тэги. Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Завершающий тэг выглядит также, как стартовый, он отличается от него прямым слэшем перед текстом внутри угловых скобок. Некоторые тэги, такие, как (тэг, определяющий горизонтальную линию), не требуют завершающего тэга. HTML не реагирует на регистр символов, на синтаксис. Тэги либо распознаются браузером, либо нет. 6 Когда Web-браузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом . Простейший HTML-документ будет выглядеть так:
Основные элементы страницы Заголовочная часть документа . Элементы, находящиеся внутри раздела head (кроме названия документа, записываемого с помощью раздела title), не видны на экране (во всяком случае, напрямую). Элементы, содержащиеся внутри раздела head документа, нужны для того, чтобы:
• Дать документу название.
• Определить отношения между несколькими документами.
• Дать указание браузеру создать форму для поиска.
• Добавить динамическую составляющую.
Стартовый тэг помещается непосредственно перед тэгом Заголовок документа и представляет собой текстовую строку.
XML
XML — расширяемый язык разметки. Рекомендован Консорциумом Всемирной паутины (W3C). Спецификация XML описывает XML-документы и частично описывает поведение XML-процессоров (программ, читающих XML-документы и обеспечивающих доступ к их содержимому). XML разрабатывался как язык с простым формальным синтаксисом, удобный для создания и обработки документов программами и одновременно удобный для чтения и создания документов человеком, с подчёркиванием нацеленности на использование в Интернете. Язык называется расширяемым, поскольку он не фиксирует разметку, используемую в документах: разработчик волен создать разметку в соответствии с потребностями к конкретной области, будучи ограниченным лишь синтаксическими правилами языка. РасширениеXML — это конкретная грамматика, созданная на базе XML и представленная словарём тегов и их атрибутов, а также набором правил, определяющих какие атрибуты и элементы могут входить в состав других элементов. Если бы HTML появился позднее, чем XML, то он, возможно, также бы являлся его расширением. Сочетание простого формального синтаксиса, удобства для человека, расширяемости, а также базирование на кодировках Юникод для представления содержания документов привело к широкому использованию как собственно XML, так и множества производных специализированных языков на базе XML в самых разнообразных программных средствах.
DHTML
DHTML (динамический HTML) – это набор средств, которые позволяют создавать более интерактивные Web-страницы без увеличения загрузки сервера. Другими словами, определенные действия посетителя ведут к изменениям внешнего вида и содержания страницы без обращения к серверу.
DHTML построен на объектной модели документа (Document Object Model, DOM), которая расширяет традиционный статический HTML-документ. DOM обеспечивает динамический доступ к содержимому документа, его структуре и стилям. В DOM каждый элемент Web-страницы является объектом, который можно изменять. DOM не определяет новых тэгов и атрибутов, а просто обеспечивает возможность программного управления всеми тэгами, атрибутами и каскадными листами стилей (CSS).
Этапы разработки web-сайта
Разработка интерфейса
Сайт должен быть:
- простым и самоочевидным – пользователи не должны задумываться над тем, куда им нужно нажать и какое действие совершить, чтобы найти ту или иную информацию. Для этого создаются сценарии взаимодействия с пользователем;
- быстрым – важная и актуальная для пользователя информация должна лежать «на поверхности», в пределах одного-двух кликов (но «вываливание» на пользователя всего и сразу даёт обратный эффект);
- доступным – информация, которую мы хотели ли бы, чтобы пользователь увидел, обязательно должна быть размещена на главной странице. Как минимум – на нее должна быть ссылка на самом видном месте;
- видимым – окно поиска, ссылки и различные модули должны быть хорошо видны, не сливаться с общим фоном и не прятаться за лишними панелями. Пользователь приходит на сайт за информацией, а не полюбоваться на дизайнерское решение;
- иметь простые имена – из названий разделов должно быть сразу понятно, что в них находится;
- просматриваемым – текстовая информация всегда должна быть разбита на блоки. Как правило, ее никто вдумчиво не читает, она быстро просматривается;
- не слишком громоздким – это также относится к текстовому контенту. Большие «простыни» текста обычно остаются без внимания.
Главными достоинствами современных веб-сайтов становятся:
§ структурное преподнесение информации,
- лаконичность,
- простота,
- разумная система акцентов.
Проектная часть
Логическая структура сайта
Каждый ресурс Интернета, от любительской домашней странички до большого информационного портала, содержит несколько тематических рубрик, соединенных между собой гиперсвязями. Как правило, ссылки на все разделы сайта с краткими анонсами их содержимого приводится на первой, так называемой стартовой странице, которой присваивается имя index.htm (.html). Если тематические рубрики содержат собственные подразделы, каждая из них также имеет свою стартовую страницу, называющуюся index.html. Подобный набор тематических рубрик с распределенными по соответствующим разделам документами и заранее спроектированными гиперсвязями между всеми страницами ресурса и называется логической структурой сайта. Физическая структура, напротив, подразумевает алгоритм размещения физических файлов по поддиректориям папки, в которой опубликован сайт (Рисунок 1).
Рисунок 1. Логическая структура сайта
Очевидно, что логическая и физическая структуры могут не совпадать, поскольку в общем случае физическая структура ресурса разрабатывается, исходя из удобства размещения файлов. Однако более или менее точное сохранение порядка следования логических разделов в физической структуре сайта позволит избежать путаницы при последующем дополнении и обновлении материалов.
Из всего сказанного становится очевидным, что физическая структура сайта скрыта от посетителей вашего ресурса: они могут наблюдать только логическую структуру, причем именно так, как она представлена при помощи элементов навигации. Отсюда следует вполне логический вывод: строение системы навигации должно если не полностью повторять, то хотя бы максимально соответствовать разработанной логической структуре сайта.
Карта сайта
Карта сайта представляет собой список страниц сайта для поисковых систем или пользователей и аналогична разделу Содержание обычной книги. Используется как элемент навигации, показывает взаимосвязь между страницами сайта.
Это полный перечень разделов и/или всех страниц в иерархическом порядке.
В XML-формате используется для поисковых систем, а в HTML — для пользователей, чтобы помочь найти нужную информацию, которая есть на сайте.
Для похожих целей предназначен индекс сайта (алфавитный перечень страниц).
Это полный перечень разделов и/или всех страниц в иерархическом порядке.
В XML-формате используется для поисковых систем, а в HTML — для пользователей, чтобы помочь найти нужную информацию, которая есть на сайте.
Для похожих целей предназначен индекс сайта (алфавитный перечень страниц).
Ø МДК 02.01. ОАКС
· КТП
КТП 1 семестр
КТП 2 семестр
· Лекционный материал
Лекция 1 Организация доступа к сетям по беспроводному соединению
Лекция 2 Организация кэширующего прокси
Лекция 3 Сопровождение и контроль web сервера
Лекция 4 Иерархия proxy
Лекция 5 Определение роли сервера
Лекция 6 Сопровождение и контроль почтового сервера
Лекция 7 Проверка связи будущее протокола TCP
Лекция 8 Администрирование компьютерных сетей
Лекция 9 Назначения и функции сервера
Лекция 10 Использование протоколов IPSec
Лекция 11 Дополнительное ПО
Лекция 12 Логика работы маршрутизации
Лекция 13 Службы серверной ОС
Лекция 14 Настройка службы DNS
Лекция 15 Протоколы передачи информации
Лекция 16 Система удаленной аутентификации RADIUS
Лекция 17 Создание учетных записей пользователя
Лекция 18 Настройка статической и динамической маршрутизации
· Лабораторный практикум
Лабораторная работа 1 Установка сетевой ОС Windows и сетевого оборудования
Лабораторная работа 2 Установка сетевой OC Linux
Лабораторная работа 3 Установка и настройка периферийного сетевого оборудования
Лабораторная работа 4 Учетные политики сетевой ОС
Лабораторная работа 5 Установка домена
Лабораторная работа 6 Удаленное управление сервером Windows Server 2012
Лабораторная работа 7 Конфигурирование DHCP сервера и управление
Лабораторная работа 8 Установка и конфигурирование DNS
Лабораторная работа 9 Настройка DNS сервера
Лабораторная работа 10 Конфигурирование информационной системы домена
Лабораторная работа 11 Настройки параметров групповой политики домена
Лабораторная работа 12 Настройка протоколов безопасной передачи информации
Лабораторная работа 13 Настройка статической и динамической маршрутизации
Лабораторная работа 14 Настройка параметров Wi-fi
Лабораторная работа 15 Организация кэширующего прокси
Лабораторная работа 16 Настройка прозрачного прокси
Лабораторная работа 17 Настройка брандмауэра для доступа к локальным и глобальным сетям
Лабораторная работа 18 Настройка системы трансляции сетевых адресов
Лабораторная работа 19 Диагностика и обслуживание web сервера
Лабораторная работа 20 Диагностика и обслуживания почтового сервера
Лабораторная работа 21 Диагностика и обслуживания SQL сервер
Лабораторная работа 22 Резервное копирование и восстановление базы данных
Ø МДК 02.02 ПОКС
· КТП
КТП 1 семестр
КТП 2 семестр
· Лекционный материал
Лекция 1 Технология построение web серверов. технология клиент-сервер
Лекция 2 Выбор ПО для web-сервера
Лекция 3 Типы серверов приложений
Лекция 4 Служебные команды расширенных языков для представления информации в WWW
Лекция 5 Современные редакторы для Web- дизайна
Лекция 6 Структура команды расширенных языков для представлении информации гипертекста
Лекция 7 Клиентские приложения, серверы баз данных
Лекция 8 Программы антивирусы
Лекция 9 Программы шифрования и электронной цифровой подписи
Лекция 10 Программное обеспечение для работы с интернетом и сетью
Лекция 11 Электронная почта. Почтовые службы
Лекция 12 Утилиты анализа работоспособности сети
Лекция 13 Компоненты Microsoft SQL Server 2008
Лекция 14 SQL Server
· Лабораторный практикум
Лабораторная работа 1 Установка и настройка Web- сервера
Лабораторная работа 2 Конфигурирование web-сервера
Лабораторная работа 3 Увеличение производительности web-сервера
Лабораторная работа 4 Создание сайтов в программе Microsoft Office SharePoint
Лабораторная работа 5 Переназначение адреса
Лабораторная работа 6 Создание динамических Web-страниц
Лабораторная работы 7 1C Предприятие
Лабораторная работа 8 Установка и настройка антивирусов
Лабораторная работа 9 программа шифрования
Лабораторная работа 10 Установка и настройка почтовых служб
Лабораторная работа 11 Утилиты сервера
Лабораторная работа 12 Установка SQL сервера
Лабораторная работа 13 Установка брандмауера
Ø КОС
Ø Тесты
Макеты страниц
Сайт состоит из множества блоков, которые мы можем перемещать в нужное нам положение (Рисунок 2), каждому из них присвоена своя функция:
· Шапка сайта (Header) – это верхняя часть сайта. Как правило, содержит в себе основную картинку (рисунок), растянутый во всю ширину, а так же может содержать логотип сайта, название (имя) сайта, или другую информацию, которую пользователь увидит в первую очередь после загрузки страницы. По умолчанию, шапка сайта в uCoz размещена в глобальном блоке и легко поддается редактированию.
· Тело сайта - здесь располагается вся жизненно необходимая информация сайта. На этой, основной части сайта, в отличие от шапки сайты, можно разместить «не почти все», а все.
· Подвал сайта - находится в самом низу сайта, после основной контентной части сайта. Размещают туда, как правило, различные счетчики посещаемости (пузомерки), информация о правах использования контента размещенного на данном сайте.
· Блок – расположены в правой или/и левой части сайта, мы можем добавлять множество любых блоков, в нашем случае мы добавили на сайт, такие блоки как: меню, категории раздела, поиск по сайту, календарь, архив записей, наш опрос, статистика.
Рисунок 2. Макет страницы
Специфика разработки графического дизайн-макета применительно к сайту представляет из себя сочетание технических и визуальных параметров будущего сайта. Это проработка расположения и размера элементов сайта с точки зрения удобства поиска и использования информации на сайте.
Основой для разработки дизайн-макета сайта являются предоставленные материалы: логотип, слоган, фирменные (или предпочтительные) цвета, графические элементы, фотографии и другие элементы дизайна, а также заполненная клиентом анкета.
Физическая структура сайта
Физическая структура -подразумевает алгоритм размещения физических файлов по поддиректориям папки, в которой опубликован наш сайт Рисунок 3.
Рисунок 3. Физическая структура сайта
Очевидно, что логическая и физическая структуры могут не совпадать, поскольку в общем случае физическая структура ресурса разрабатывается, исходя из удобства размещения файлов. Однако более или менее точное сохранение порядка следования логических разделов в физической структуре сайта позволяет избежать путаницы при последующем дополнении и обновлении материалов.
Для того чтобы все гиперссылки на домашней страничке или web-сайте работали корректно, все документы открывались правильно и браузер не выдавал ошибок при обращении к каким-либо разделам ресурса, при создании его физической структурыследует соблюдать следующие правила:
Нужно назначать имена директорий, имена и расширения документов HTML и графических файлов с использованием символов только латинского алфавита и только в строчном регистре. Стараться, чтобы имена созданных вами файлов и директорий не превышали по длине восьми символов.
Экономическая часть проекта
Нормативы и нормы
Вышеуказанные нормы установлены в СанПиНе.
Кроме того, данный нормативный акт предусматривает:
· осуществление влажной уборки в ежедневном порядке;
· проветривание помещений с компьютерами через каждый час;
· обязательное оборудование офисов системами вентиляции, отопления и кондиционирования воздуха.
СанПиН регламентирует следующие требования к атмосферным показателям в помещениях, оборудованных рабочими местами с ПК:
· температура воздуха – от 19 до 21 градусов;
· влажность – от 55 до 62 %;
· скорость движения воздуха – не больше 0,1 м/с.
Режим работы и перерывы
СанПиН рекомендует руководителям организаций, трудовая деятельность которых связана с использованием персональных компьютеров, производить чередование трудовой деятельности сотрудников с работой за компьютером и без него.
Если все же специфика трудовой деятельности не допускает таких чередований, ответственным лицам по охране труда следует:
· осуществить организацию перерывов в трудовой деятельности продолжительностью от 10 до 15 минут;
· проводить такие перерывы через каждый час работы.
Данные перерывы в работе:
· должны включаться в общее время трудовой деятельности;
· а также увеличиваться на 30 %, если сотрудник работает за компьютером в ночное время суток.
Совокупная продолжительность перерывов:
· при рабочем дне продолжительностью 8 часов – от 50 минут до 1,5 часа;
· при 12-часовом – от 80 до 140 минут.
Заключение
В результате дипломного проектирования создано электронное учебное пособие «Организация сетевого администрирования» по модулю ПМ02.
В качестве основной технологии для разработки учебного пособия использовалась одна из самых популярных и функциональных среди бесплатных CMS на сегодняшний день – uCoz.
uCoz - бесплатная система управления сайтом и хостинг для сайтов, созданных с её использованием. uCoz.ru находится на 73-м месте самых популярных российских сайтов. Владелец сервиса - ООО «Юкоз Медиа», Россия.
uCoz является простой и удобной платформой для создания сайта. В нашем случае для создания учебного пособия.
Данное пособие предназначено для облегчения работы преподавателей и для самостоятельной работы студентов. Электронное учебное пособие построено таким образом, чтобы студент смог самостоятельно изучить предложенные темы, на практике получить навыки решения задач, а затем проверить свои знания с помощью специально разработанного теста..
Благодаря использованию различных серверных и пользовательских элементов управления, применению каскадных таблиц стилей и тем оформления, удалось создать привлекательный, функциональный, удобный и интуитивно-понятный пользовательский интерфейс, с возможностью быстрой модернизации в случае необходимости.
Цель работы достигнута, задачи решены.
Список литературы
1. Дронов Владимир HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов; БХВ-Петербург - Москва, 2014. - 416 c.
2. Морис Б. HTML в действии.-СПб.: Питер, 1997.- 202с.
3. Гаевский, А.Ю. 100% самоучитель. Создание Web-страниц и Web-сайтов. HTML и JavaScript / А.Ю. Гаевский, В.А. Романовский. - М.: Триумф, 2015. - 464 c.
4. Кузнецов М., Симдянов И. PHP. Практика создания Web-сайтов; БХВ-Петербург - Москва, 2016. - 347 c.
5. Китинг, Джоди Flash MX. Искусство создания web-сайтов; ТИД ДС - Москва,2015. - 848 c.
6. Фрейен Бен HTML5 и CSS3.Разработка сайтов для любых браузеров и устройств; Питер - Москва, 2014. - 304 c
7. Чебыкин Ростислав Разработка и оформление текстового содержания сайтов; БХВ-Петербург - Москва, 2014. - 528 c
8. Кирсанов Д., Веб-дизайн. - М.: Символ-пресс , 2015. - 536 с.
9. Никсон, Р. Создаем динамические веб-сайты с помощью PHP, и JavaScript - Санкт-Петербург [и др.] : Питер, 2013. - 496
Приложения
Код главной страницы
/* General Style */
body {background:#FFFFFF; margin:0px; padding:0px;}
#wrap {text-align: center; background: url('/.s/t/839/2.gif') repeat-x; }
#wrap-bottom {text-align: center; background: url('/.s/t/839/3.jpg') bottom center no-repeat;}
#center-block {width: 980px; margin-left: auto; margin-right: auto; background: url('/.s/t/839/4.jpg') no-repeat;}
table.main-table {width: 960px; border: 0px; padding: 0px; border-collapse: collapse; margin-left: auto; margin-right: auto; height: 100%;}
td.data-block {height: 102px; padding-right: 180px; vertical-align: middle; text-align: right;}
td.logo-block {padding: 20px 200px 10px 60px; vertical-align: middle; text-align: left;}
td.logo-block h1 {color: #006076; font-size: 20pt; font-weight: normal; margin: 0px; padding: 0px;}
td.side-block {width: 250px; vertical-align: top;}
td.content-block {width: 710px; padding: 10px 30px; vertical-align: top;}
td.footer {height: 100px; vertical-align: middle; padding: 30px 20px 10px 20px; text-align: center;}
.boxTable {width:250px; text-align:left; border: 0px; padding: 0px; border-collapse: collapse;}
.boxTable th {height: 38px; font-size:9pt;color:#006076; vertical-align: middle; text-align:center; background: url('/.s/t/839/5.gif') no-repeat; }
.boxTable td.boxContent {background: url('/.s/t/839/6.gif') bottom center no-repeat;padding:5px 10px 25px 10px; vertical-align: top;}
.center {text-align:center;}
a:link {text-decoration:underline; color:#005D68;}
a:active {text-decoration:underline; color:#005D68;}
a:visited {text-decoration:underline; color:#005D68;}
a:hover {text-decoration:none; color:#005D68;}
.topLink a:link {text-decoration:underline; color:#FFFFFF;}
.topLink a:active {text-decoration:underline; color:#FFFFFF;}
.topLink a:visited {text-decoration:underline; color:#FFFFFF;}
.topLink a:hover {text-decoration:none; color:#FFFFFF;}
td, body {font-family:verdana,arial,helvetica; font-size:8pt;}
form {padding:0px;margin:0px;}
input,textarea,select {vertical-align:middle; font-size:8pt; font-family:verdana,arial,helvetica;}
.copy {font-size:7pt;}
h1 {color:#09969A;font-size:12pt;}
a.noun:link {text-decoration:none; color:#005D68}
a.noun:active {text-decoration:none; color:#005D68}
a.noun:visited {text-decoration:none; color:#005D68}
a.noun:hover {text-decoration:underline; color:#000000}
hr {color:#B9FAFF;height:1px;background:#B9FAFF;border:none;}
label {cursor:pointer;cursor:hand}
.blocktitle {font-family:Verdana,Sans-Serif;color:#C24747;font-size:12px;}
a.menu1:link {text-decoration:underline; color:#C66D00}
a.menu1:active {text-decoration:underline; color:#C66D00}
a.menu1:visited {text-decoration:underline; color:#C66D00}
a.menu1:hover {text-decoration:underline; color:#000000}
.menuTd {padding-left:12px;padding-right:10px; background: url('/.s/t/839/7.gif') no-repeat 0px 3px;}
.mframe {border-left:1px solid #E5E7EA; border-right:1px solid #E5E7EA;}
.colgray {border-right:1px solid #E5E7EA;}
.colwhite {border-right:1px solid #FAFAFA;}
.msep {border-top:1px solid #FAFAFA;}
/* ------------- */
/* Menus */
ul.uz, ul.uMenuRoot {list-style: none; margin: 0 0 0 0; padding-left: 0px;}
li.menus {margin: 0; padding: 0 0 0 13px; background: url('/.s/t/839/8.gif') no-repeat 0px 3px; margin-bottom: .6em;}
/* ----- */
/* Site Menus */
.uMenuH li {float:left;padding:0 5px;}
.uMenuV .uMenuItem {font-weight:normal;}
.uMenuV li a:link {text-decoration:none; color:#005D68}
.uMenuV li a:active {text-decoration:none; color:#005D68}
.uMenuV li a:visited {text-decoration:none; color:#005D68}
.uMenuV li a:hover {text-decoration:underline; color:#000000}
.uMenuV .uMenuItemA {font-weight:bold;}
.uMenuV a.uMenuItemA:link {text-decoration:none; color:#0CA6A6}
.uMenuV a.uMenuItemA:visited {text-decoration:none; color:#0CA6A6}
.uMenuV a.uMenuItemA:hover {text-decoration:underline; color:#0CA6A6}
.uMenuV .uMenuArrow {position:absolute;width:10px;height:10px;right:0;top:3px;background:url('/.s/img/wd/1/ar1.gif') no-repeat 0 0;}
.uMenuV li {margin: 0; padding: 7px 5px 7px 27px; background: url('/.s/t/839/9.gif') left center no-repeat;border-bottom:1px dashed #67E1EE;font-size:9pt;}
/* --------- */
/* Module Part Menu */
.catsTd {padding: 0 0 6px 13px; background: url('/.s/t/839/8.gif') no-repeat 0px 3px;}
.catName {font-family:Verdana,Tahoma,Arial,Sans-Serif;font-size:11px;}
.catNameActive {font-family:Verdana,Tahoma,Arial,Sans-Serif;font-size:11px;}
.catNumData {font-size:7pt;color:#005D68;}
.catDescr {font-size:7pt; padding-left:10px;}
a.catName:link {text-decoration:none; color:#005D68;}
a.catName:visited {text-decoration:none; color:#005D68;}
a.catName:hover {text-decoration:underline; color:#000000;}
a.catName:active {text-decoration:none; color:#005D68;}
a.catNameActive:link {text-decoration:none; color:#9D080D;}
a.catNameActive:visited {text-decoration:none; color:#9D080D;}
a.catNameActive:hover {text-decoration:underline; color:#9D080D;}
a.catNameActive:active {text-decoration:none; color:#9D080D;}
/* ----------------- */
/* Entries Style */
.eBlock {background:#FFFFFF;border:1px solid #B9FAFF; border-bottom: 2px solid #80DE4F;}
.eTitle {font-family:Verdana,Arial,Sans-Serif;font-size:9pt;font-weight:bold;color:#008EB1;text-align:center; padding:5px; background:url('/.s/t/839/10.gif') bottom repeat-x;}
.eTitle a:link {text-decoration:none; color:#089599;}
.eTitle a:visited {text-decoration:none; color:#089599;}
.eTitle a:hover {text-decoration:none; color:#00D9D4;}
.eTitle a:active {text-decoration:none; color:#089599;}
.eMessage {text-align:justify;padding:10px !important;font-size:9pt !important;}
.eText {text-align:justify;padding:10px !important;font-size:9pt !important;}
.eDetails {font-family:Verdana,Tahoma,Arial,Sans-Serif;color:#636363;padding:5px; text-align:left;font-size:7pt;background:#ECFEFF;}
.eDetails1 {font-family:Verdana,Tahoma,Arial,Sans-Serif;color:#636363;padding:5px; text-align:left;font-size:8pt;background:#ECFEFF;}
.eDetails2 {font-family:Verdana,Tahoma,Arial,Sans-Serif;color:#636363;padding:5px; text-align:left;font-size:8pt;background:#ECFEFF;}
.eRating {font-size:7pt;}
.eAttach {margin: 16px 0 0 0; padding: 0 0 0 15px; background: url('/.s/t/839/11.gif') no-repeat 0px 0px;}
/* ------------- */
/* Entry Manage Table */
.manTable {}
.manTdError {color:#FF0000;}
.manTd1 {}
.manTd2 {}
.manTd3 {}
.manTdSep {}
.manHr {}
.manTdBrief {}
.manTdText {}
.manTdFiles {}
.manFlFile {}
.manTdBut {}
.manFlSbm {}
.manFlRst {}
.manFlCnt {}
/* ------------------ */
/* Comments Style */
.cAnswer {padding-left:15px;padding-top:4px;font-style:italic;}
.cBlock1 {background:#EFFEFF;}
.cBlock2 {border:1px solid #DDFDFF;}
/* -------------- */
/* Comments Form Style */
.commTable {}
.commTd1 {color:#000000;}
.commTd2 {}
.commFl {color:#005D68;width:100%;}
.smiles {border:1px inset;background:#FFFFFF;}
.commReg {padding: 10 0 10 0px; text-align:center;}
.commError {color:#FF0000;}
.securityCode {color:#005D68;}
/* ------------------- */
/* Archive Menu */
.archUl {list-style: none; margin:0; padding-left:0;}
.archLi {padding: 0 0 3px 10px; background: url('/.s/t/839/12.gif') no-repeat 0px 4px; font-family:Tahoma,Arial,Sans-Serif;}
a.archLink:link {text-decoration:underline; color:#005D68;}
a.archLink:visited {text-decoration:underline; color:#005D68;}
a.archLink:hover {text-decoration:none; color:#000000;}
a.archLink:active {text-decoration:none; color:#000000;}
/* ------------ */
/* Archive Style */
.archiveCalendars {text-align:center;color:#0000FF;}
.archiveDateTitle {font-weight:bold;color:#005D68;padding-top:15px;}
.archEntryHr {width:250px;color:#DDDDDD;}
.archiveeTitle li {margin-left: 15px; padding: 0 0 0 15px; background: url('/.s/t/839/13.gif') no-repeat 0px 4px; margin-bottom: .6em;}
.archiveEntryTime {width:65px;font-style:italic;}
.archiveEntryComms {font-size:9px;color:#C3C3C3;}
a.archiveDateTitleLink:link {text-decoration:none; color:#005D68}
a.archiveDateTitleLink:visited {text-decoration:none; color:#005D68}
a.archiveDateTitleLink:hover {text-decoration:underline; color:#005D68}
a.archiveDateTitleLink:active {text-decoration:underline; color:#005D68}
.archiveNoEntry {text-align:center;color:#0000FF;}
/* ------------- */
/* Calendar Style */
.calTable {margin-left: auto; margin-right: auto;}
.calMonth {}
.calWday {color:#FFFFFF; background:#238D9C; width:18px;}
.calWdaySe {color:#FFFFFF; background:#005D68; width:18px;}
.calWdaySu {color:#FFFFFF; background:#005D68; width:18px; font-weight:bold;}
.calMday {background:#FFFFFF;}
.calMdayA {background:#86F8F5;font-weight:bold;}
.calMdayIs {font-weight:bold; border: 1px solid #CECECE;color:#555555;}
.calMdayIsA {border:1px solid #84DBFF;font-weight:bold;}
a.calMonthLink:link,a.calMdayLink:link {text-decoration:none; color:#005D68;}
a.calMonthLink:visited,a.calMdayLink:visited {text-decoration:none; color:#005D68;}
a.calMonthLink:hover,a.calMdayLink:hover {text-decoration:underline; color:#005D68;}
a.calMonthLink:active,a.calMdayLink:active {text-decoration:underline; color:#000000;}
/* -------------- */
/* Poll styles */
.pollBut {width:110px;}
.pollBody {padding:7px; margin:0px; background:#FFFFFF}
.textResults {background:#EBE0E0}
.textResultsTd {background:#FFFFFF}
.pollNow {border-bottom:1px solid #EBE0E0; border-left:1px solid #EBE0E0; border-right:1px solid #EBE0E0;}
.pollNowTd {}
.totalVotesTable {border-bottom:1px solid #EBE0E0; border-left:1px solid #EBE0E0; border-right:1px solid #EBE0E0;}
.totalVotesTd {background:#FFFFFF;}
/* ---------- */
/* User Group Marks */
a.groupModer:link,a.groupModer:visited,a.groupModer:hover {color:blue;}
a.groupAdmin:link,a.groupAdmin:visited,a.groupAdmin:hover {color:red;}
a.groupVerify:link,a.groupVerify:visited,a.groupVerify:hover {color:green;}
/* ---------------- */
/* Other Styles */
.replaceTable {background:#E4FDFF;height:100px;width:300px;border:1px solid #9FE8E8;}
.replaceBody {background:#E5F5F5;}
.legendTd {font-size:7pt;}
/* ------------ */
/* ===== forum Start ===== */
/* General forum Table View */
.gTable {background:#FFFFFF;border-bottom:2px solid #9EEF57;}
.gTableTop {padding:2px;background:url('/.s/t/839/1.gif') repeat-x #75E2F0;color:#009090;font-weight:bold;height:38px;text-align:center;font-size:10pt;border:1px solid #FFFFFF; }
.gTableSubTop {padding:2px;background:#9FE8E8;color:#000000;height:16px;font-size:10px;}
.gTableBody {padding:2px;background:#E4FDFF;}
.gTableBody1 {padding:2px;background:#FFFFFF;}
.gTableBottom {padding:2px;background:#E4FDFF;}
.gTableLeft {padding:2px;background:#E4FDFF;font-weight:bold;color:#005D68}
.gTableRight {padding:2px;background:#E4FDFF;}
.gTableError {padding:2px;background:#E4FDFF;color:#FF0000;}
/* ------------------------ */
/* Forums Styles */
.forumNameTd,.forumLastPostTd {padding:2px;background:#FFFFFF}
.forumIcoTd,.forumThreadTd,.forumPostTd {padding:2px;background:#E4FDFF;}
.forumLastPostTd,.forumArchive {padding:2px;font-size:7pt;}
a.catLink:link {text-decoration:none; color:#009090;}
a.catLink:visited {text-decoration:none; color:#009090;}
a.catLink:hover {text-decoration:underline; color:#000000;}
a.catLink:active {text-decoration:underline; color:#009090;}
.lastPostGuest,.lastPostUser,.threadAuthor {font-weight:bold}
.archivedForum{font-size:7pt;color:#FF0000;font-weight:bold;}
/* ------------- */
/* forum Titles & other */
.forum {font-weight:bold;font-size:9pt;}
.forumDescr,.forumModer {color:#858585;font-size:7pt;}
.forumViewed {font-size:9px;}
a.forum:link, a.lastPostUserLink:link, a.forumLastPostLink:link, a.threadAuthorLink:link {text-decoration:none; color:#005D68;}
a.forum:visited, a.lastPostUserLink:visited, a.forumLastPostLink:visited, a.threadAuthorLink:visited {text-decoration:none; color:#005D68;}
a.forum:hover, a.lastPostUserLink:hover, a.forumLastPostLink:hover, a.threadAuthorLink:hover {text-decoration:underline; color:#00DADA;}
a.forum:active, a.lastPostUserLink:active, a.forumLastPostLink:active, a.threadAuthorLink:active {text-decoration:underline; color:#005D68;}
/* -------------------- */
/* forum Navigation Bar */
.forumNamesBar {font-weight:bold;font-size:7pt;}
.forumBarKw {font-weight:normal;}
a.forumBarA:link {text-decoration:none; color:#000000;}
a.forumBarA:visited {text-decoration:none; color:#000000;}
a.forumBarA:hover {text-decoration:none; color:#005D68;}
a.forumBarA:active {text-decoration:underline; color:#005D68;}
/* -------------------- */
/* forum Fast Navigation Blocks */
.fastNav,.fastSearch,.fastLoginForm {font-size:7pt;}
/* ---------------------------- */
/* forum Fast Navigation Menu */
.fastNavMain {background:#F0C6C6;}
.fastNavCat {background:#F9E6E6;}
.fastNavCatA {background:#F9E6E6;color:#0000FF}
.fastNavForumA {color:#0000FF}
/* -------------------------- */
/* forum Page switches */
.switches {background:#9FE8E8;}
.pagesInfo {background:#ECFDFD;padding-right:10px;font-size:7pt;}
.switch {background:#ECFDFD;width:15px;font-size:7pt;}
.switchActive {background:#00DADA;font-weight:bold;color:#000000;width:15px}
a.switchDigit:link,a.switchBack:link,a.switchNext:link {text-decoration:none; color:#000000;}
a.switchDigit:visited,a.switchBack:visited,a.switchNext:visited {text-decoration:none; color:#000000;}
a.switchDigit:hover,a.switchBack:hover,a.switchNext:hover {text-decoration:underline; color:#FF0000;}
a.switchDigit:active,a.switchBack:active,a.switchNext:active {text-decoration:underline; color:#FF0000;}
/* ------------------- */
/* forum Threads Style */
.threadNametd,.threadAuthTd,.threadLastPostTd {padding:2px;padding:2px;background:#FFFFFF}
.threadIcoTd,.threadPostTd,.threadViewTd {padding:2px;background:#E4FDFF;}
.threadLastPostTd {padding:2px;font-size:7pt;}
.threadDescr {color:#858585;font-size:7pt;}
.threadNoticeLink {font-weight:bold;}
.threadsType {padding:2px;background:#86C4C4;height:20px;font-weight:bold;font-size:7pt;color:#FFFFFF;padding-left:40px; }
.threadsDetails {padding:2px;background:#005D68;color:#FFFFFF;height:21px;font-size:10px;}
.forumOnlineBar {padding:2px;background: #4AACC5;color:#FFFFFF;height:16px;font-size:10px;}
a.threadPinnedLink:link {text-decoration:none; color:#0000FF;}
a.threadPinnedLink:visited {text-decoration:none; color:#0000FF;}
a.threadPinnedLink:hover {text-decoration:none; color:#FF0000;}
a.threadPinnedLink:active {text-decoration:underline; color:#FF0000;}
a.threadLink:link {text-decoration:none; color:#005D68;}
a.threadLink:visited {text-decoration:none; color:#005D68;}
a.threadLink:hover {text-decoration:underline; color:#000000;}
a.threadLink:active {text-decoration:underline; color:#000000;}
.postpSwithces {font-size:7pt;}
.thDescr {font-weight:normal;}
.threadFrmBlock {font-size:7pt;text-align:right;}
/* ------------------- */
/* forum Posts View */
.postTable {}
.postPoll {background:#E4FDFF;text-align:center;}
.postFirst {background:#E4FDFF;border-bottom:3px solid #4AACC5;}
.postRest1 {background:#E4FDFF;}
.postRest2 {background:#E4FDFF;}
.postSeparator {height:3px;background:#86F3F2;}
.postTdTop {background:#9FE8E8;color:#000000;height:16px;font-size:10px;}
.postBottom {background: #C8FBFF;color:#000000;height:20px;}
.postUser {font-weight:bold;}
.postTdInfo {text-align:center;padding:5px; background:#E4FDFF;}
.postRankName {margin-top:5px;}
.postRankIco {margin-bottom:5px;margin-bottom:5px;}
.reputation {margin-top:5px;}
.signatureHr {margin-top:20px;color:#FFAE00;}
.posttdMessage {padding:5px; background:#FFFFFF;}
.pollQuestion {text-align:center;font-weight:bold;}
.pollButtons,.pollTotal {text-align:center;}
.pollSubmitBut,.pollreSultsBut {width:140px;font-size:7pt;}
.pollSubmit {font-weight:bold;}
.pollEnd {text-align:center;height:30px;}
.codeMessage {background:#FFFFFF;font-size:9px;}
.quoteMessage {background:#FFFFFF;font-size:9px;}
.signatureView {font-size