Информационные технологии. Лабораторный практикум (70
.pdf
ПРАКТИЧЕСКАЯ РАБОТА № 11
Задание 4. Использование внешних стилей (external style sheets).
Внешние стили применяются с помощью элемента <link>, который должен располагаться внутри элемента <head> и нигде более (сравните с элементом <style>).
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” media=”all” />
Встретив в HTML-документе этот тег, браузер загрузит с сайта CSS-файл (в нашем случае это mystyle.css) и применит к документу содержащиеся в нем стили. Файл не должен содержать ничего, кроме CSS-инструкций.
Внешний файл со стилями удобен тем, что одни и те же стили можно применять ко множеству документов на сайте – в каждом из них достаточно лишь вписать одну строку с элементом <link>.
1. Создайте внешний файл со стилями для оформления файла tetrahedron-2.html.
2. Сохраните результат работы под именем tetrahedron-3. html.
3. С помощью той же таблицы стилей оформите файлы для других четырех правильных многогранников, используя шаблоны.
4. ОформитефайлEuler_theorem.htmlпо образцу(Теорема Эйлера.pdf). Сделайте ссылки из этого файла на ранее подготовленные HTML-страницы.
Контрольныевопросы
1. Какие существуют способы создания стилей в HTMLдокументе?
2. В каком случае удобно использовать каждый из них? 3. В чем состоят преимущества использования стилей?
Практическая работа № 11 Создание веб-сайтов. Технология HTML
и каскадные таблицы стилей CSS
Цель: закрепить полученные знания по использованию технологий HTML и CSS при создании веб-сайта.
Результат: созданный веб-сайт «Визитная карточка». Задание: создайте веб-сайт «Визитная карточка». Структурное представление информации на сайте может быть любое, но обязательное использование списков, таблиц, изображений, индивидуального дизайна.
31
ПРАКТИЧЕСКАЯ РАБОТА № 12
1.Главная страница должна содержать информацию о вашей персоне, а также меню со следующими составляющими: профессиональная деятельность, расписание, методическая копилка, хобби, контакты и другие:
•страница «Профессиональная деятельность» должна содержатьинформациюопрофессиональнойдеятельности в текстовом и графическом представлении;
•страница «Расписание» – в табличном представлении расписание по дням недели;
•страница «Методическая копилка» – в виде списка полезных ресурсов, ссылок на файлы с учебно-ме- тодическими материалами по предметным областям «математика» и «информатика»;
•страница «Хобби» – информация о любимом деле, занятии, увлечении; отображение информации может быть любым;
•страница «Контакты» – оформленные контактные данные с использованием Googleили Яндекс-карт.
2.Навигация по сайту должна быть осуществлена с помощью гиперссылок.
3.При разработке и реализации сайта необходимо учитывать эргономические требования к пользовательскому интерфейсу (см. табл. 1, 2).
Контрольныевопросы
1.Какова структура разработанного веб-сайта?
2.Какие были использованы функциональные возможности технологий HTML и CSS при создании веб-сайта?
3.Какие эргономические требования к пользовательскому интерфейсу были учтены при разработке и реализации веб-сайта?
Практическая работа № 12
Создание простейших XML-документов и таблиц
стилей XSLT
Цель: обучить созданию простейших XML-документов и таблиц стилей XSLT
Результат: созданный XML-документ и таблица стилей XSLT, позволяющая просматривать этот документ в браузере в простейшем отформатированном виде.
32
|
|
|
|
ПРАКТИЧЕСКАЯ РАБОТА № 12 |
|
Задание 1. Создание шаблона XML-документа. |
|||||
1. |
Откройте программу Notepad++. Создайте новый доку- |
||||
2. |
|
мент с расширением xml. |
|
|
|
|
Создайте, пользуясь материалами лекции, шаблон |
||||
|
|
XML-документа (только набор пустых тегов), содержа- |
|||
|
|
щего информацию о книгах, хранящихся в библиотеке. |
|||
|
|
Разместите всю информацию о книгах, хранящихся на |
|||
|
|
одной книжной полке, в одном XML-документе. Для |
|||
|
|
каждой книги укажите Ф.И.О. авторов, название, из- |
|||
|
|
дательство, место издания, год издания, ISBN, том или |
|||
|
|
часть (если есть). Предусмотрите возможность указа- |
|||
|
|
ния дополнительной информации. |
|
||
3. Покажите созданный шаблон преподавателю. |
|||||
Задание 2. Наполнение XML-документа содержи- |
|||||
мым. |
|
|
|
|
|
1. |
Скопируйте созданный шаблон, сохраните его под но- |
||||
|
|
вым именем. Заполните полученный документ инфор- |
|||
|
|
мацией по любым двум книгам. Укажите, что в этом |
|||
|
|
документе содержится информация о книгах, находя- |
|||
2. |
|
щихся на первой полке. |
|
|
|
|
Скопируйте шаблон еще раз. Заполните его инфор- |
||||
|
|
мацией о двух других книгах, находящихся на второй |
|||
|
|
полке. |
|
|
|
Задание 3. Создание простейшего XSLT-файла. |
|||||
1. Создайте новый документ с расширением xsl. |
|||||
2. |
|
Пролог |
XSLT-файла: |
<?xml |
version=”1.0” |
|
|
encoding=”windows-1251”?>.ПосколькуXSLT–этотоже |
|||
|
|
XML-документ, то пролог у него такой же, как и у дру- |
|||
|
|
гих XML-документов. Корневым элементом XSLT-фай- |
|||
|
|
ла является элемент xsl:stylesheet, где xsl – стандартное |
|||
|
|
пространство имен (в нем определены все элементы |
|||
|
|
XSLT). Таким образом, корневой элемент определяет- |
|||
|
|
ся как |
<xsl:stylesheet version=”1.0” xmlns:xsl=”http:// |
||
|
|
www.w3.org/1999/XSL/Transform”>. |
|
||
Обратите внимание на то, что этот тег (как и любой другой |
|||||
в XML-, а следовательно, и XSLT-документе) должен быть за- |
|||||
крыт: </xsl:stylesheet>. |
|
|
|||
3. |
Внутри корневого элемента необходимо указать фор- |
||||
|
|
мат результирующего документа (в данном случае – |
|||
|
|
HTML): |
|
|
|
<xsl:output method=”html”/>.
33
ПРАКТИЧЕСКАЯ РАБОТА № 12
4. Чтобы с помощью данного XSLT-файла (простейшей таблицы стилей, выводящей на экран текст без форматирования и пробелов) происходила обработка XML-документа, необходимо инструкцию по обработке разместить в прологе XML-документа: <?xml-stylesheet type=”text/xsl” href=”EasyXSLT.xslt”?>.
5. Просмотрите XML-документ с указанной инструкцией в браузере.
Задание 4. Простейшее форматирование вывода с помощью XSLT.
1. Один из основных элементов в таблице стилей – элемент xsl:template, задающий шаблон отбора элементов для преобразования. В него вложены правила преобразования – элементы xsl:text, в которых записан выводимый поясняющий текст, и элементы xsl:value-of, указывающие, что надо получить содержимое элемента или значение атрибута, имя которого записано в атрибуте select. В качестве примера рассмотрим, как применяется этот элемент для вывода названия книги:
<xsl:template match=”name”> <xsl:text>Название: </xsl:text> <xsl:apply-templates /> </xsl:template>
<xsl:template match=”author”> <xsl:value-of select=”first_name”/> … </xsl:template>
Правило <xsl:apply-templates /> заключается в рекурсивном просмотре всех узлов-потомков узла name и применении к ним всех подходящих правил, указанных в таблице стилей.
2. В таблице стилей укажите, как применяется элемент xsl:template для всех узлов ранее созданного XMLдокумента.
3. Просмотрите XML-документ в браузере, добавьте пробелы и переводы строки, где это необходимо.
Контрольныевопросы
1.В чем состоят преимущества языка XML перед другими аналогичными форматами?
2.Какова структура простейшего XML-документа?
3.Каковы функции таблицы стилей XSLT?
34
ПРАКТИЧЕСКАЯ РАБОТА № 13
Практическая работа № 13 Создание HTML-документа с помощью XSLT
Цель: обучить созданию HTML-документа с помощью XSLT.
Результат: созданный на основе XSLT отформатированный HTML-документ с установленными гиперссылками.
Задание 1. Создание XSLT для вывода информации в HTML.
1. Откройте документы .xml и .xslt, созданные в процессе выполнения работы № 12. Сохраните XSLT-документ под новым именем 13.1.xslt. Дайте ссылку на этот новый документ в документе .xml.
2. Создайте шаблон для корневого элемента bookshelf. В этом шаблоне указывается структура будущего HTMLдокумента:
<xsl:template match=″bookshelf″> <html>
<head></head>
<body></body>
</html>
</xsl:template>
3. Добавьте заголовок. В теле документа укажите элемент <xsl:apply-templates /> для применения всех описанных шаблонов дочерних элементов (вложенных непосредственно в элемент bookshelf).
4. Создайте шаблон для элемента book. Далее возможны два пути: описывать каждый элемент в соответствующем шаблоне либо описывать его непосредственно в шаблоне элемента book. Обычно элементы, имеющие дочерние (например, в элементе authors содержится элемент author), описывают в отдельных шаблонах, остальные – непосредственно в шаблоне данного элемента (в данном случае book).
5. В шаблоне author задайте фамилию (красный цвет текста), имя (крупный шрифт) и отчество (шрифт Arial), например:
<font color=”red”>
<xsl:value-of select=”first_name”/> </font>
6. В элементе book опишите вывод всех остальных (не имеющих дочерних) элементов этого тега, задавая раз-
35
ПРАКТИЧЕСКАЯ РАБОТА № 13
личное произвольное оформление для каждого типа выводимой информации. Например:
<font color=”blue”> <b>Название: </b>
</font>
<xsl:value-of select=”name”/>
Необходимо учесть, что элемент authors был описан вне элемента book. Включить этот элемент в book можно так:
<xsl:apply-templates select=”authors”/>.
7. Продолжайте работу в этом же XSLT-документе, предварительно сохранив его под новым именем 13.2.xslt.
8. Измените файл XSLT так, чтобы информация о книге выводилась в следующем порядке: Название, Авторы,
Год_издания, Город, Издательство. ISBN и Дополнительную_информацию выводить не нужно.
9. Применитедокумент13.1.xsltкобоимсозданнымXMLдокументам. Затем к этим же документам примените документ 13.2.xslt. Объясните, в чем состоят преимущества создания HTML-документа из XML-документа с применением XSLT перед непосредственным созданием HTML-документа.
Задание 2. Добавление ссылки на ресурс.
1. Продолжайте работу в этом же XSLT-документе, предварительно сохранив его под новым именем 13.3.xslt.
2. Создайте презентацию одной из описанных книг (2–3 слайда, на которых содержатся фотография обложки книги и краткая информация об авторе).
3. Измените XML-документ, добавив к каждой книге ссылку на ее презентацию (при отсутствии презентации для какой-либо книги тег можно оставить пустым).
4. Используя элемент xsl:attribute, добавьте вывод презентации в создаваемом HTML-документе:
<a>
<xsl:attribute name=″href ″> <xsl:value-of select=″present ″/>
</xsl:attribute>
Презентация книги
</a>
5. Создайте текстовый файл «Отзывы о книге» для той же книги, для которой создавалась презентация. Аналогично пункту 4 выведите ссылку на него.
36
ПРАКТИЧЕСКАЯ РАБОТА № 14
Контрольныевопросы
1.В каком шаблоне указывается структура создаваемого HTML-документа?
2.В чем состоит особенность описания элементов, имеющих дочерние элементы?
3.В чем состоят преимущества и недостатки создания HTML-документа с помощью XSLT по сравнению с непосредственным его созданием?
Практическая работа № 14 Элементы программной логики в XSLT. Объединение всех созданных файлов в единый продукт
Цель: обучить использованию элементов программной логики в XSLT, объединению всех созданных файлов в единый программный продукт.
Результат: единый программный продукт, созданный на основе XML и XSLT.
Задание 1. Элементы программной логики в XSLT.
В XSLT существует три элемента, используемых для организации программной логики: <xsl:if>, <xsl:choose>,
<xsl:for-each>.
Элемент <xsl:if> реализует функциональность конструкции if… и имеет всего один атрибут – test. Если в результате обработки значения test получен результат true, то все элементы внутри <xsl:if> обрабатываются, если false – игнорируются.
1. Откройте документы 13.xml и 13.3.xslt, созданные в процессе выполнения работы № 13. Сохраните XSLTдокумент под новым именем 14.1.xslt. Дайте ссылку на этот новый документ в документе 13.xml.
2. Убедитесь, что если для какой-либо книги презентации и/или отзыва нет, то в XML-документе соответствующий тег отсутствует (а не пуст). Подкорректируйте в случае необходимости документ 13.xml и сохраните его под именем 14.xml. Обратите внимание, что при отображении файла 13.xml в браузере появляется ссылка на презентацию и отзыв по книге даже в том случае, если соответствующий файл не прикреплен (в этой ситуации вместо файла презентации открывается текущий каталог).
37
ПРАКТИЧЕСКАЯ РАБОТА № 14
Сделаем так, чтобы ссылка на презентацию книги выводилась только в том случае, если презентация имеется. Для этого заключим в элемент <xsl:if test=″present″></xsl:if> всю информацию о презентации:
<xsl:if test=″present″> <br/>
<a>
<xsl:attribute name=”href”> <xsl:value-of select=”present”/> </xsl:attribute>
Презентация книги
</a>
</xsl:if>
3. Аналогичные действия проделайте для отзыва о книге.
Задание 2. Создание фреймов.
1. Создайте два фрейма так, чтобы в левом перечислялись полки (полка 1, полка 2 и т.д.), а в правом отображалась информация о книгах, содержащихся на них. Фреймы создавайте с помощью HTML (в качестве справочника можно использовать http://html.manual. ru). Для левого фрейма создайте HTML-документ, для правого используйте созданные XML-документы (для полок 1 и 2) и набор HTML-документов (для полки 3), созданных в процессе выполнения работы № 10 (теорема Эйлера).
2. Добавьте третий фрейм так, чтобы под двумя имеющимися колонками в нижней части окна находилась строка, содержащая информацию о библиотеке, в которой содержатся описанные полки с книгами.
3. Добавьте заголовки внутри фреймов там, где это необходимо. Сделайте так, чтобы цвет фона в каждом фрейме был разным, добавьте другие элементы форматирования.
Контрольныевопросы
1.Какие элементы используются в XSLT для организации программной логики?
2.Что такое фреймы и для достижения какой цели они служат?
3.Какие преимущества XML и XSLT могут быть использованы при создании электронных средств учебного назначения?
38
ТРЕБОВАНИЯ К ПРОЕКТНОМУ ЗАДАНИЮ ПО ДИСЦИПЛИНЕ «ИНФОРМАЦИОННЫЕ...
Требования к проектному заданию по дисциплине «Информационные технологии в науке
и образовании»
Для сдачи проектной работы необходимо:
1) разработать и реализовать электронное учебное пособие по выбранной тематике4;
2) оформить печатный вариант (текст) доклада на бумажном и электронном носителях;
3) подготовить выступление – защиту разработанного и реализованного электронного учебного пособия по выбранной тематике (не более 10 минут).
Требования к докладу на бумажном носителе5:
1. Титульный лист (приложение 2).
2. Цель работы.
3. Задачи работы.
4. Краткое описание содержания выбранной темы.
5. Описание содержания теоретической части электронного пособия.
6. Описание содержания практической части (практикума) электронного пособия.
7. Описание содержания контролирующей части (тестовой среды/составляющей) электронного пособия.
8. Описание содержания методической части (методические рекомендации) электронного пособия.
9. Описаниепроцессареализации электронногопособия6:
• используемые технологии;
• этапы разработки электронного учебного пособия;
• технологии реализации теоретической части пособия;
• технологии реализации практической части (практикума) пособия;
• технологии реализации контролирующей части (тестовой среды/составляющей) пособия;
• технологии реализации методической части (методические рекомендации) пособия.
4 Примерные темы представлены в приложении 3.
5 В приложении 1 перечислены требования к форматированию текстового доклада.
6 При описании процесса реализации электронного учебного пособия необходимо использовать скриншоты.
39
ТРЕБОВАНИЯ К ПРОЕКТНОМУ ЗАДАНИЮ ПО ДИСЦИПЛИНЕ «ИНФОРМАЦИОННЫЕ...
ТРЕБОВАНИЯ К ПРОЦЕССУ РЕАЛИЗАЦИИ ЭЛЕКТРОННОГО УЧЕБНОГО ПОСОБИЯ
Требованиякучебномупособию(техническийаспект):
1. Электронноеучебноепособиедолжносодержатьнеменее двух однотипных страниц, выполненных на языке XML.
2. Должно быть разработано два внешне разных и поразному структурирующих информацию варианта таблиц стилей XSLT. Один используется для демонстрации созданных страниц, второй – для демонстрации их же (на защите нужно продемонстрировать изменение внешнего вида страниц с помощью XSLT).
3. Все HTML-страницы пособия должны быть выполнены в одном стиле. Необходимо использовать каскадные таблицы стилей CSS.
4. Все чертежи должны быть выполнены средствами программы «Живая математика».
5. Пособие должно содержать презентацию (требования см. ниже).
6. Пособие должно содержать три варианта тестов.
7. Все структурные части пособия должны быть объединены в одно целое средствами HTML и/или XML.
Требования к структуре и содержанию учебного по-
собия (контентный аспект). Структура учебного пособия должна состоять из следующих частей:
• теоретическая часть (учебный материал теоретической направленности, в частности, обязательно включить презентацию по выбранной тематике)7;
• практическая часть (практикум) – задания (задачи) с вариантом решения либо без решения, но с обязательным наличием ответов;
• контролирующая часть (тестовая среда/составляющая), необходимо представить три варианта теста в трех технологиях (MS PowerPoint, MS Excel, тестовая среда SuperTest)8;
• методическая часть (методические рекомендации) – описание принципов работы с данным учебным пособием по той или иной теме.
Требования к учебному пособию (эргономический аспект) перечислены в табл. 1 и 2.
7 Для наполнения теоретической части учебного пособия необходимо воспользоваться презентацией, сделанной в результате выполнения практической работы по созданию презентаций.
8 Для наполнения контролирующей части учебного пособия можно воспользоваться результатом выполнения практической работы по созданию тестов.
40