Тема 2.4. Язык XML — стандарт описания структурированных данных XML-документов»

МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
Тема 2.4. Язык XML — стандарт описания
структурированных данных
Практическая работа «Стилевое оформление
XML-документов»
Цель работы:
формирование
навыков
стилевого
в инструментальной среде XML-редактора.
оформления
XML-документов
Задание на работу:
1. Присоедините исходную таблицу каскадных стилей к шаблону XMLдокумента.
2. Отредактируйте исходную таблицу каскадных стилей для изменения
внешнего вида шаблона нетипового XML-документа.
3. Придайте авторский стиль шаблону нетипового XML-документа.
Содержание
Технология выполнения работы ...................................................................................1
1. Присоединение исходной таблицы каскадных стилей к шаблону XML-документа ..........1
2. Редактирование таблицы каскадных стилей ..............................................................2
3. Придание авторского стиля шаблону нетипового XML-документа ................................4
4. Контрольные вопросы .............................................................................................6
5. Работа в интерактивной образовательной среде «ВУОКСа» ........................................6
Приложение 1. Листинг таблицы стилей .......................................................................6
Технология выполнения работы
1. Присоединение исходной таблицы каскадных
стилей к шаблону XML-документа
1.1. Обновите содержимое папки XML в вашем ресурсе на сервере института —
в этой папке должен присутствовать файл еvent.css.
1.2. Скопируйте файл еvent.css в папку C:\Program Files\Corel\XMetaL
4\Author\Display.
1.3. Из меню File XML-редактора
открывающую диалог New....
XMetal
Author
выберите
команду,
1.4. С закладки Pineapplesoft загрузите в редактор файл Event Description
Form.xml (Шаблон описания мероприятия).
Наблюдайте результат (рис. 1):
1
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
Рис. 1. Шаблон нетипового XML-документа
Обратите внимание — это уже хороший формат для шаблона (бланка)
документа: поля имеют понятные метки, а форма поделена на разделы,
отделяемые друг от друга заголовками. Отметим также, что метки и заголовки
разделов не являются частью XML-документа, они появились из таблицы стилей,
в которой введены как псевдоэлементы.
2. Редактирование таблицы каскадных стилей
2.1. Откройте файл еvent.css из текстового редактора Блокнот. Внимательно
ознакомьтесь с данным листингом (см. также прил. 4.1). Обратите внимание
на следующее:

Листинг содержит правила. Правила имеют вид, подобный следующему:
Contact, Date, Description, Email, Event, Location, Name, Para,
Phone {
display: block;
}
или следующему:
Event:before {
content: "Event Description Form";
display: block;
font-size: large;
font-weight: bold;
}


Записи $DOCUMENT, $COMMENT, $PROCINS представляют собой
характерные для XML-редактора псевдоэлементы, которые указывают
соответственно на весь документ, комментарии и команды обработки.
Псевдоэлементы
Event:before
{
},
Name:before
{
},
Location:before { }, Date:before { }, Phone:before { },
2
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
Email:before { }, End:before { } и другие содержат в фигурных

скобках свойства меток и элементов.
Свойство content (содержание) задает имя метки, связываемой с контентом
элемента.
Например,
нижеследующим
правилом
имя
"Name:"
присваивается метке, связанной с контентом элемента <Name>:
Name:before {
content: "Name:";
}
2.2. Для дальнейшего улучшения внешнего вида шаблона
преобразуйте листинг в соответствии со следующими рекомендациями:




(бланка)
измените выборочно свойства шрифта:
o font-family (гарнитура шрифта),
o font-size (размер шрифта),
o font-style (стиль шрифта),
o font-size (размер шрифта),
o font-color (цвет шрифта);
установите выборочно другой тип выравнивания текста text-align;
задайте цвет фона background-color, отличный от белого;
выполните другие настройки для придания шаблону авторского стиля.
Используйте
на рис. 2 и 3.
для
выполнения
подп.
2.2 примеры
свойств,
Рис. 2. Графический редактор стилей XML-документа
и его закладка Font со свойствами шрифта
3
показанные
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
Рис. 3. Всплывающие меню на некоторых закладках графического редактора
стилей XML-документа со свойствами меток
3. Придание авторского стиля шаблону нетипового
XML-документа
3.1. Сохраните файл Event.css, видоизмененный в текстовом редакторе
Блокнот, в папке C:\Program Files\Corel\XMetaL 4\Author\Display под
тем же именем и с тем же расширением *.css (рис. 4):
4
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
Рис. 4. Сохранение файла Event.css
3.2. Из меню File XML-редактора
открывающую диалог New....
XMetaL
Author
выберите
команду,
3.3. С закладки Pineapplesoft загрузите в редактор файл Event Description
Form.xml (Шаблон описания мероприятия).
Наблюдайте результат создания авторского стиля шаблона XML-документа
в редакторе XMetaL Autor (рис. 5):
Рис. 5. Шаблон XML-документа
3.4. Предъявите результаты работы преподавателю.
5
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
4. Контрольные вопросы
1. Что представляют собой таблицы каскадных стилей?
2. Какие элементы в таблице стилей для XML-документа называются
селекторами и какие — спецификациями?
3. Объясните
необходимость
копирования
файла
еvent.css
в папку
C:\Program Files\Corel\XMetaL 4\Author\Display.
4. Где находится файл Event Description Form.xml (Шаблон описания
мероприятия)?
5. В чем заключается особенность открытия файла Event Description
Form.xml (Шаблон описания мероприятия)?
6. Как подключается графический редактор стилей?
7. Как можно оптимизировать видоизменения файла Event.css в текстовом
редакторе Блокнот для исключения ошибок при переопределении свойств
селекторов и элементов и минимизации временных затрат?
8. Сформулируйте, чем отличается созданный в процессе выполнения работы
авторский
стиль
шаблона
XML-документа
в редакторе
XMetaL
Autor
от первоначально предложенного формата для шаблона описания мероприятия.
5. Работа в интерактивной образовательной среде
«ВУОКСа»
Выполните задания теста «Визуальное управление элементами XML-документа»
в интерактивной образовательной среде «ВУОКСа».
Приложение 1. Листинг таблицы стилей
/* Use Times New Roman for default font */
$DOCUMENT {
font-family: "Times New Roman";
font-size: 12pt;
margin-top: 5px;
margin-left: 5px;
}
$COMMENT {
display: block;
color: purple;
white-space: pre;
}
$PROCINS {
color: black;
background-color: #c0c0c0;
}
Contact, Date, Description, Email, Event, Location, Name, Para,
Phone {
display: block;
}
6
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
Start, End {
display: inline;
}
Event:before {
content: "Event Description Form";
display: block;
font-size: large;
font-weight: bold;
}
Name:before, Location:before, Date:before, Phone:before, Email:
before, End:before {
font-size: smaller;
color: gray;
}
Name:before {
content: "Name: ";
}
Location:before {
content: "Location: ";
}
Date:before {
content: "Date: ";
}
Phone:before {
content: "Phone: ";
}
Email:before {
content: "Email: ";
}
End:before {
content: " to ";
}
Description:before, Contact:before {
display: block;
font-weight: bold;
}
Description:before {
content: "Description";
}
7
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ
INTERNATIONAL BANKING INSTITUTE
Contact:before {
content: "Contact";
}
Bold {
font-weight: bold;
display: inline;
}
Italic {
font-style: italic;
display: inline;
}
Name, Location, Date, Phone, Email, Para {
margin-left: 1em;
}
Contact, Description {
margin-top: 0.5em;
}
Event>Name {
margin-top: 0.5em;
}
8