C:\WebServers\home\localhost\www\_navigator\css

Некоммерческая организация «Ассоциация московских вузов»
Федеральное государственное бюджетное образовательное учреждение
высшего профессионального образования
«Российский экономический университет имени Г.В. Плеханова»
Мероприятие 7-35.1 «Оказание образовательных услуг по практикоориентированному финансовому образованию школьников с применением
интерактивного учебно-тренировочного комплекса
«Навигатор профессиональной ориентации школьника»,
разработанного с использованием научно-технического потенциала
РЭУ им. Г.В. Плеханова, на основе соглашений вуза
и лицея № 1546 Центрального округа г. Москвы»
Раздел 7-35.1.3 Разработка и подготовка к эксплуатации
интернет-версии модуля «Основы финансов и цен»
учебно-тренировочного комплекса «Навигатор профессиональной
ориентации школьника»
Научно-информационный материал (ЭВ)
"Разработка программного обеспечения интернет-версии модуля
«Основы финансов и цен"
Состав научно-образовательного коллектива:
Зотов В.А., к.э.н.
Романова Ю.Д., к.э.н, профессор
Шибаев С. Р., к.э.н., доцент
Москва 2011
1
Ключевые слова: программа, скрипт,
Оглавление
ВВЕДЕНИЕ .......................................................................................................................................3
ФАЙЛОВАЯ СТРУКТУРА ИНТЕРНЕТ-ВЕРСИИ МОДУЛЯ «ОСНОВЫ ФИНАНСОВ
И ЦЕН» ..............................................................................................................................................3
ЯЗЫК JAVASCRIPT .......................................................................................................................5
ПОДКЛЮЧЕНИЕ СКРИПТОВ К HTML-ДОКУМЕНТУ. .....................................................5
ИЗОБРАЖЕНИЯ И НАВИГАЦИОННЫЕ КАРТЫ .................................................................6
МНОГОФУНКЦИОНАЛЬНАЯ БИБЛИОТЕКА «PROTOTYPE» ........................................8
МАСШТАБИРОВАНИЕ РАЗМЕРА ШРИФТА ......................................................................10
2
Введение
Процесс создания стандартных веб-страниц достаточно традиционен. Он описан во
множестве различных пособий и учебников хорошего качества, бесплатно доступных в
Интернете. Поэтому в данном отчете авторы решили не повторять описание обычных вебстраниц, а остановиться только на нестандартных, дополнительных и авторских решениях
при разработке интернет-версии модуля «Управление финансами компании» учебнотренировочного комплекса «Навигатор профессиональной ориентации школьника».
Исходя из заявленных функциональных возможностей модуля отметим следующие
решения, объяснения и описание которых приведено в отчете.
 Задачник задачи для самостоятельного решения;
задачи с объяснением решения;
 Ситуационные практикумы;
 Справочная информация словарь основных терминов и понятий курса;
экономические и финансовые online-индикаторы;
 Инструменты калькулятор;
 Медиатека медиаплеер.
Остальные
функции
использования
интернет-модуля
сводятся
к
чтению
(содержимое страницы включает текст и графику и программирование страниц для чтения
не содержит нестандартных решений), а также к указанию ссылок на ресурсы сайта ФДО
РЭУ им. Г.В. Плеханова. При проектировании этих страниц использованы стандартные
возможности языка HTML.
Файловая структура интернет-версии модуля «Основы финансов и цен»
В таблице файлов голубым цветом
отмечены ячейки, содержащие названия
каталогов (папок), желтым цветом отмечены файлы содержащие дополнительные и
нестандартные скрипты, функции и подпрограммы, которые будут описаны в отчете. Далее
приводится список файлов интернет-модуля, представляющих собой
HTML‑страницы,
содержащие указанные структурные элементы.
3
www
index.htm
menu_fm.htm
val.htm
calc1.htm
indicat.htm
reg.htm
_Osn_fin
ans3.php
gloss3.htm
instr3.htm
library3.htm
media3.htm
prof3.htm
stat3.php
tasks_ans3.htm
tasks_sam3.htm
tasks_upr.htm
test3.htm
osn_fin.htm
vopros_3.htm
javascripts
application.js
code.js
Главное окно модуля
Выбор курса в навигаторе
Конвертор валют
калькулятор
Финансовые индикаторы
Регистрация пользователя
Статистика правильных ответов при решении задач
Словарь
Инструкция пользователя
Библиотека (ссылки на ресурсы для чтения)
Ссылки на медиаресурсы для просмотра
Информация о специальности
Статистика правильных ответов при решении задач
Задачи с объяснениями решения
Задачи для самостоятельного решения
Выбор вида задач
Тестирование пользователя
Главное окно модуля с доступом ко всем функциям
Вопросы для размышлений и ответов по почте
калькулятор
Функция перевода строки в число str_to_num(str). Используется для кодирования и
последующей проверки правильности введенного в поле ответа.
Масштабирование размера текста на странице (деловые ситуации, теория и др.)
Масштабирование размера текста на странице (деловые ситуации, теория и др.)
многофункциональная библиотека Prototype window
Свернуть-развернуть подсказку при решении задач и термины в словаре
многофункциональная библиотека Prototype window
многофункциональная библиотека Prototype window
dw_cookies.js
dw_sizerdx.js
effects.js
motionpack.js
prototype.js
window.js
window_effects.js
converter.js
Glooss3
g1.htm
Термины на первую букву
…...htm
g26.htm
Термины на последнюю букву
Case3
ds1.htm
Первая деловая ситуация
…...htm
ds3.htm
teor1.htm
Теория по первому кейсу
teor1_files
image002.gif
image004.gif
css
converter.css
Оформление конвертера
my_layout.css
Оформление конвертера
alphacube.css
Управление прозрачностью модальных окон
style.css
alert.css
mac_os_x.css
Окна в стиле MacOS
mac_os_x_dialog.css
Окна в стиле MacOS
images
fon.jpg
fon_sw4.jpg
index_3.jpg
m3.gif
osn_fin_0.jpg
osn_fin.jpg
upr_fin_0.jpg
upr_fin.jpg
mal_fin.jpg
minus.gif
plus.gif
reset.gif
media
player_flv_mini.swf
vved3.htm
fak_inf1.flv
fak_inf2.avi
fak_inf3.swf
fak_inf4.mp4
themes
behavior.htc
mac_os_x1
B.png
close.gif
T.png
BL.png
L.png
TL.png
BL_Main.png
L_Main.png
TL_Main.png
BR.png
maximize.gif
TR.png
BR_Main.png
minimize.gif
TR_Main.png
menu_fm.jpg
mal_fin_0.jpg
B_Main.png
R.png R_Main.png
T_Main.png
Графические
файлы
Графические
файлы
4
Язык JavaScript
Если необходимо, чтобы Web-страница могла делать что-нибудь еще, кроме
отображения текста и изображений, в нее следует включить средства поддержки
определенных мини-программ.
Язык JavaScript ориентирован на создание и обработку скриптов Web-страниц, а
также используется для написания сценариев интерактивного поведения Web-страниц. В
этом плане он является вложенным в язык HTML, но не дублирует его функциональные
возможности. В результате все методы оформления Web-страниц осуществляются языком
HTML, а JavaScript предоставляет возможность «динамизации» Web-публикаций и
способствует снижению трафика в сети.
Особенностью обработки кода скриптов на JavaScript является то, что они
обрабатываются интерпретатором браузера по мере загрузки документа. При этом формат
кода преобразуется в более эффективный внутренний формат, который выполняется
позднее. Скрипты можно располагать в любом месте HTML-страницы. При этом они
обрамляются тегами <script></script>.
Поскольку скрипты обрабатываются по мере загрузки Web-страницы, возникает
необходимость определения функций, используемых на HTML-странице до момента их
вызова. Обычно функции, которые вызываются несколько раз, располагают внутри элемента
HEAD страницы, так как расположенные там функции анализируются раньше, чем
загрузится страница, а значит, на момент их вызова не возникнет ошибок. Однако
существуют варианты функций, которые, наоборот, необходимо помещать в конце
документа, так как код таких функций не должен анализироваться и выполняться раньше,
чем произойдет полная загрузка страницы.
Различные программы-браузеры поддерживают незначительно отличающиеся друг
от друга версии JavaScript. Тем не менее в языке JavaScript можно выделить некоторую
общую часть, определяющую его функциональные особенности.
Язык JavaScript позволяет вводить в Web-страницы следующие элементы: текст,
рисунки, фреймы, слои, окна, формы для заполнения, а также некоторые другие элементы.
Он также способен оперировать перечисленными элементами с помощью специальных,
ассоциированных с определенными событиями скриптов.
Подключение скриптов к HTML-документу.
Известно четыре способа подключения JavaScript-программ к HTML-документу:
 использование тега <SCRIPT>;
 объявление JavaScript-файла, содержащего текст программы;
 определение JavaScript-выражения в качестве значения HTML-атрибутов;
5
 объявление JavaScript-программы в качестве обработчика событий.
Изображения и навигационные карты
Авторы могут включать в свои Web-страницы изображения в различных форматах
(GIF, JPEG, PNG и др.). На загрузку изображений затрачивается определенное, порою
достаточно большое время и ресурсы процессора, зависящие, в том числе, от размеров
изображения
и
глубины
цвета.
Поэтому
рекомендуется
использовать
файлы
с
изображениями небольших размеров, оптимизированные для использования в Internet.
Обычно изображения включаются в тело HTML-документа в виде изображения или
объекта.
С изображениями, как и с другими включаемыми объектами, могут быть связаны
ссылки, использующие стандартные механизмы, и навигационные карты (image maps). На
навигационной карте задаются геометрические области включаемых изображений или
объектов, и каждой из них назначаются ссылки. При активизации этих ссылок могут
осуществляться загрузка документа, запуск программ на сервере и т.д.
Навигационные карты. Навигационные карты позволяют авторам определять
области изображения или объекта и назначать каждой области определенное действие
(например, загрузку документа, запуск программы и т.д.). Действие выполняется при
активизации пользователем конкретной области.
Карты - это способ сделать различные части одного графического изображения
гиперссылками. Они позволяют выделить отдельные области изображений и определить для
каждой из них свое действие.
Создание карты изображения является одной из привлекательнейших возможностей
HTML, позволяющей пользователю привязывать ссылки на другие документы к отдельным
частям изображений. Щелкая мышью на отдельных частях изображения, пользователь
может выполнять те или иные действия, переходить по той или иной ссылке на другие
документы и т.п.
Навигационная карта создается путем назначения изображения или объекта с
указанием соответствующих геометрических областей.
Имеется два типа навигационных карт:
Клиентская. Когда пользователь активизирует область клиентской навигационной
карты с помощью мыши, координаты точки интерпретируются агентом пользователя. Агент
пользователя выбирает ссылку, указанную для активизированной области, и выполняет ее.
Серверная. Когда пользователь активизирует область серверной навигационной
карты с помощью мыши, координаты точки щелчка передаются агенту на сервере,
6
определенному с помощью атрибута href элемента A. Агент на сервере интерпретирует
координаты и выполняет соответствующие действия.
Клиентские навигационные карты являются предпочтительными по отношению к
серверным, поскольку они доступны пользователям неграфических агентов и позволяют
незамедлительно определить, находится ли указатель в активной области.
Клиентские навигационные карты используют элементы MAP и AREA:
Элемент<MAP></MAP> - клиентская навигационная карта.
Элемент <AREA>- область клиентской навигационной карты.
Начальный и конечный теги элемента MAP обязательны.
Начальный тег элемента AREA обязателен, конечный тег запрещен.
Каждый элемент MAP может включать: один или несколько элементов AREA. Эти
элементы не имеют содержимого, но определяют геометрические области навигационной
карты и ссылки, связанные с каждой областью. При использовании этого подхода элемент
MAP не имеет генерируемого содержимого. Таким образом, авторы должны изменять текст
для каждого элемента AREA с помощью атрибута alt.
Чтобы включить поддержку карты для изображения, необходимо ввести атрибут в
элемент IMG:
<img src="../images/osn_fin.jpg" width="980" border="0" height="576"
usemap="#MAP1">
Атрибут usemap
указывает, в каком месте находится карта описываемого
изображения. Карта изображения определяет, какому участку изображения какой URL-адрес
соответствует. Карта изображения может находиться в том же документе, что и
изображение, или в другом документе. Помещение карты в другой документ позволяет
собрать все карты изображений в одном документе (если их несколько в различных
документах).
Синтаксис определения карты изображения иллюстрируется следующим фрагментом
кода файла osn_fin.htm:
<MAP NAME="Map1">
<area alt ="инструкция " href="instr1.htm" shape="rect" coords="50,535,212,570"
target="fr1"></area>
<area alt ="теория" href="http://sdo.rea.ru/" shape="rect" coords="55,136,126,166"
target="_blank"></area>
<area alt ="библиотека" href="lib/library1.htm" target="fr1" shape="rect"
coords="55,428,155,458"></area>
<area alt ="словарь" href="gloss1.htm" target="fr1" shape="rect"
coords="55,488,155,526"></area>
<area alt ="вопросы" href="vopros_3.htm" target="fr1" shape="rect"
coords="55,374,105,416"></area>
7
<area alt ="форум" href="http://sdo.rea.ru/x.php" shape="rect" coords="476,536,505,575"
target="_blank"></area>
<area alt ="информер" href="../val.htm" shape="rect" coords="848,538,873,562"
target="fr1"></area>
<area alt ="курсы валют" href="../indicat.htm" shape="rect" coords="805,538,831,562"
target="fr1"></area>
<area alt ="задачник" href="tasks_osn.htm" shape="rect" coords="55,194,156,228"
target="fr1"></area>
<area alt ="о профессии" shape="rect" coords="55,76,178,106" href="prof1.htm"
target="fr1"></area>
<area alt ="медиатека" href="media1.htm" shape="rect" coords="635,536,690,575"
target="fr1"></area>
<area alt ="счет" href="#" shape="rect" coords="384,526,425,593"
onclick="application.evalcode('open_window55', true)"> </area>
<area alt ="вход" href="#" shape="rect" coords="234,539,259,573"
onclick="application.evalcode('open_window99', true)"> </area>
</MAP>
Элемент <map name="map_name"></map> - определяет начало описания карты с
именем map_name.
Элемент <area...> - описывает участок изображения и ставит ему в соответствие URLадрес.
Атрибуты:
shape="rect" - этот атрибут определяет прямоугольную область;
coords - координаты в пикселах описываемой области. Для прямоугольника это четыре
координаты левого верхнего и правого нижнего углов.
Координаты считаются с нуля, поэтому для описания области 100 на 100 используется:
<area coords="0,0,99,99" ...>
href="URL". Описание ссылки, действие по которой будет выполняться при щелчке
мыши в заданной области.
Многофункциональная библиотека «Prototype»
Prototype - JavaScript Фреймворк, упрощающий создание JavaScript приложений от
сокращённого вызова некоторых функций языка до сложных методов обращения к
У большинства языков есть «стандартная библиотека» кода, которая упрощает
выполнение общих задач. Библиотека Prototype определяет глобальный объект под
названием Prototype, который содержит метаданные самой библиотеки.
По своим возможностям Prototype Window позволяет следующее:
• Изменяющие размер окна (resizable windows)
• Возможность сворачивать/разворачивать окна
• Собственно модальные окна/диалоги
8
• Различные визуальные эффекты
• Возможность стилизировать окна задавая внешние стили (в данном модуле
использована тема MacOS)
• Готовые классы-фабрики для управления несколькими окнами (Windows)
Данная библиотека имеет развитые средства API, что позволяет контролировать любое
поведение окон. Сама библиотека состоит из класса Window, фабрики Windows и Dialog.
Библиотека поддержана браузерами Safari, Camino, Firefox, IE, Opera.
Javascript + базовый CSS занимают в сумме порядка 131Кб. (Если использовать только
базовый класс Windows то — 67Кб)
Использование библиотеки в модуле включает два javascript и один css.
Чтобы загрузить Prototype в окружение страницы, нужно использовать тег <script>. В
файл, использующий возможности библиотеки включаются следующие строки:
<!Doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<!Doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
<title>Основы финансов и цен</title>
<meta content="text/html; charset=windows-1251" http-equiv="content-type">
<meta name="author" content="РЭУ им. Г.В. Плеханова">
<script type="text/javascript" src="../javascripts/prototype.js"></script>
<script type="text/javascript" src="../javascripts/window.js"></script>
<link href="../themes/mac_os_x.css" rel="stylesheet" type="text/css" ></link>
<style type="text/css">
</head>
Все библиотеки так или иначе используют одну довольно простую идею, а именно —
модальное окно создается посредством двух <div> элементов, один из них обычно
покрывает всю рабочую область (viewport) браузера, а второй позиционируется поверх
первого и собственно, представляет собой модальное окно в которое загружается нужный
нам контент.
Фрагмент кода вызова окна «Статистика результатов решения задач» (аналогичное
решение для окон «Вход», «Калькулятор» и некоторых других)
<div style="display:none; z-index: 77" id="open_window77_codediv">
<xmp id="open_window77" class="listing">
var win77 = new Window({ className: "mac_os_x",title: "Статистика результатов",
width:700,
height:300, url: "stat3.php", showEffectOptions: {duration:0}, hideEffectOptions:
{duration:0}})
win77.showCenter();
</xmp>
</div>
9
В вышеприведенном коде создается модальное окно, использующее CSS из
mac_os_x.css с заголовком “ Статистика результатов ” (например), шириной 700, высотой
300, которое автоматически центрируется при изменении размеров окна браузера.
Контент в модальное окно загружается через AJAX, посредством вызова отдельного
метода. Точно также происходит и активация окна.
Масштабирование размера шрифта
Иногда текст на сайте может быть для посетителей слишком велик или, наоборот, мал.
В таком случае было бы удобно предоставлять функцию изменения его размера.
Рассмотрим используемый в модуле скрипт, который позволит нашим обучаемым
уменьшать или увеличивать шрифт на страницах сайта по своему желанию.
Использование библиотеки в модуле включает два javascript.
Необходимо вставить следующий код между тегами <head></head>:
<script type="text/javascript" src="../../javascripts/dw_cookies.js" ></script>
<script type="text/javascript" src="../../javascripts/dw_sizerdx.js" ></script>
Далее необходимо создать слой в документе, в котором будет отображаться
необходимая информация.
<div style=" ……..">контент </div>
Инициализация скрипта осуществляется с помощью кода, приведенного ниже. Вызов
функции размещен в конце документа перед закрывающим тегом </body>.
<script type="text/javascript">
dw_fontSizerDX.init();
</script>
….
</body>
Определяем в файле место для кнопок увеличения/уменьшения/восстановления
размера шрифта и добавляем туда следующий код:
<a href="#" onclick="dw_fontSizerDX.adjust(2); return false" title="Increase font-size">
<img src="../../images/plus.gif" width="12" height="12" alt="" border="0">Увеличить
шрифт</a>
<a href="#" onclick="dw_fontSizerDX.adjust(-2); return false" title=" Decrease font-size">
<img src="../../images/ minus.gif" width="12" height="12" alt="" border="0"> Уменьшить
шрифт</a>
<a href="#" onclick="dw_fontSizerDX. reset (); return false" title=" Restore default fontsize">
<img src="../../images/ reset.gif" width="12" height="12" alt="" border="0">
Восстановить шрифт</a>
Базовым размером текста определен12 размер.
10
<head>
<title>Деловая ситуация 1</title>
<style>
………
h4 { font-family: Times New Roman; font-size: 12pt; color: #000}
</style>
При нажатии на кнопки изменения размера шрифт увеличивается или уменьшается на
2 пункта (onclick="dw_fontSizerDX.adjust(2);).
11