МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ 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