Программа формирования стиля web-документа

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
РЕКЛАМНО-ТЕХНИЧЕСКОЕ ОПИСАНИЕ
Программа формирования стиля web-документа
.02069071.00270-01 99 01
Листов 6
Разработчики:
______________________/Чурилов И.А./
______________________/ Неугодникова Т.С./
______________________/ Беляев Ю.А./
18.02.2012 <пусто>
Пермь 2012
2
.02069071.00270-01 99 01
Функциональное назначение программы
Программа упрощает и автоматизирует процесс формирования стиля
web-документа текстового содержания.
Область применения
Программа полезна преподавателям, занимающимся разработкой
лекций в формате HTML, в том числе для системы дистанционного
обучения, а также начинающим web-дизайнерам.
Ограничения
Программу невозможно использовать в случае отсутствия обозревателя
web-страниц на компьютере пользователя, а также отключения поддержки
JavaScript в настройках браузера.
Работа программы была протестирована в браузерах Internet Explorer
версий 6, 7, 8 и 9, Mozilla Firefox версий 3.6 для Windows и 3.0 для Linux,
Opera 10.63, Google Chrome версии 14.
Структура и порядок использования программы
В состав программы входит три файла: choice.htm, containr.htm,
spectrum.jpg.
Файл choice.htm содержит форму и набор скриптов, с помощью
которых пользователь может выбрать гарнитуру, размер, жирность и цвет
шрифта, а также цвет фона будущего web-документа и сгенерировать
таблицу стилей. Это единственный файл, который пользователь запускает
на выполнение непосредственно.
Файл
containr.htm играет
контейнером
программа
для
на
необходимости
отображения
основе
вспомогательную
таблицы
стилевых
непосредственно
стилей,
предпочтений
запускать
на
роль.
Он
служит
которую
создаёт
пользователя.
выполнение
containr.htm, так как это делает скрипт из файла choice.htm.
Нет
файл
3
.02069071.00270-01 99 01
Графический файл spectrum.jpg содержит спектральную форму,
которая используется для выбора цвета фона документа и входит в состав
web-страницы файла choice.htm.
На рисунке 1 показано начальное окно программы, появляющееся
после открытия файла choice.htm.
Рисунок 1. Окно программы формирования цветовой схемы и стиля документа
Программа позволяет визуально подобрать стилевые параметры для
основного текста и шести объектов выделения: заголовков 1-го, 2-го и
3-го уровней,
определений,
терминов
и
списков,
-
и
формирует
соответствующую выбранным значениям таблицу стилей, которую
4
.02069071.00270-01 99 01
пользователь может подключить к своей web-странице, не вдаваясь в
подробности её синтаксиса.
В левой части окна собраны инструменты, с помощью которых
пользователь формирует стиль отображения элементов web-страницы.
В его распоряжении 7 гарнитур и 13 значений размера шрифта,
35 сгруппированных по цветам радуги оттенков. В правой части окна
расположен документ, содержащий все редактируемые элементы, так что
пользователь, нажимая кнопку «Применить», может оценить результат
своей работы.
Рисунок 2. Окно программы с выбранными пользователем параметрами
В нижней части окна находится изображение, предназначенное для
установки цвета фона документа. Это изображение и программный код, с
5
.02069071.00270-01 99 01
помощью которого выбор можно осуществить щелчком мыши по точке
нужного цвета, взяты из открытого источника [1]. Код переработан в
соответствии с назначением программы и для обеспечения совместимости
с браузерами Mozilla Firefox и Opera.
Когда параметры шрифтов и цветовая гамма подобраны, пользователь
нажимает на кнопку «Показать таблицу стилей». В результате на экране
появляется второе окно с текстовым полем, в котором отображаются
сформированные программой по результатам работы пользователя
правила CSS для элементов web-страницы. Пример таблицы стилей
показан на рисунке 3.
Рисунок 3. Сформированная программой таблица стилей
Дескриптор p связан с текстом основных абзацев документа, em – с
термином, dfn – с определением, ul – со списком, дескрипторы h1, h2 и h3
относятся соответственно к заголовкам 1-го, 2-го и 3-го уровней. Параметр
background-color дескриптора body устанавливает цвет фона документа.
Источники
1. Dion. Color picker script.
http://simplythebest.net/scripts/DHTML_scripts/javascripts/javascript_115.html
6
.02069071.00270-01 99 01
Используемые технические средства
При разработке и тестировании программы использовались текстовый
редактор Блокнот операционной системы Microsoft Windows, браузеры
Internet Explorer, Mozilla Firefox, Opera и Google Chrome.
Использование программы подразумевает наличие на компьютере
пользователя любого обозревателя web-страниц. Объем необходимой для
работы программы оперативной памяти составляет порядка 1 Мбайт.
Специальные условия применения и требования
организационного, технического и технологического характера
Эксплуатация программы не предъявляет никаких особых требований к
компьютеру. Чтобы программа функционировала, необходимо отключить
в настройках браузера блокировку скриптов из локальных файлов.
Условия передачи программной документации или её продажи
Программа может быть передана бесплатно. Связаться с автором
можно по электронному адресу chur@perm.ru , либо обратившись в
Пермскую государственную фармацевтическую академию на кафедру
физики и математики.