Примечание.

Пользовательский интерфейс в Dreamweaver СС и более поздних версиях стал проще. В результате этого некоторые функции, описанные в этой статье, могут отсутствовать в Dreamweaver CC и более поздних версиях. Дополнительные сведения см. в этой статье.

Применение XML и XSL на веб-страницах

Язык Extensible Markup Language (XML) позволяет структурировать информацию. Подобно HTML, язык XML позволяет структурировать информацию с помощью тегов, однако теги XML не являются стандартными, как теги HTML. В отличие от последнего XML дает возможность создавать теги, которые наилучшим образом определяют структуру данных (схему). Теги поддерживают вложенность, что позволяет создать схему из родительских и дочерних тегов. Подобно тегам HTML, все теги XML-схемы содержат открывающие и закрывающие теги.

В приведенном ниже примере показана основная структура XML-файла.

<?xml version=“1.0”> 
<mybooks> 
    <book bookid=“1”> 
        <pubdate>03/01/2004</pubdate> 
        <title>Displaying XML Data with Adobe Dreamweaver</title> 
        <author>Charles Brown</author> 
    </book> 
    <book bookid=“2”> 
        <pubdate>04/08/2004</pubdate> 
        <title>Understanding XML</title> 
        <author>John Thompson</author> 
    </book> 
</mybooks>

В этом примере у каждого родительского тега <book> есть 3 дочерних тега: <pubdate>, <title> и <author>. Однако каждый тег <book>, в свою очередь, является дочерним для тега <mybooks>, расположенного в этой схеме на один уровень выше. Именовать и структурировать XML-теги можно произвольно при условии, что теги будут вложены в другие теги должным образом и у каждого открывающего тега будет соответствующий закрывающий тег.

XML-документы не содержат форматирования, они просто служат контейнерами для структурированной информации. При наличии XML-схемы информацию можно отображать с помощью языка Extensible Stylesheet Language (XSL). Аналогично языку каскадных таблиц стилей (CSS), который позволяет форматировать тексты HTML, язык XSL позволяет форматировать XML-данные. XSL-файл, в котором определены стили, элементы страниц, макет и т. д., присоединяется к XML-файлу, так что XML-данные при просмотре в браузере будут отформатированы в соответствии с данными XSL-файла. Содержимое (XML-данные) и представление (определенное в XSL-файле) полностью отделены друг от друга, что обеспечивает больше возможностей управления оформлением информации на веб-странице. По существу, XSL представляет собой технологию представления для XML, где основным форматом вывода является HTML-страница.

Extensible Stylesheet Language Transformations (XSLT) представляют собой подмножество языка XSL, которое позволяет отображать данные XML на веб-странице и «преобразовывать» их вместе со стилями XSL в пригодную для чтения информацию в виде HTML, оформленную в определенном стиле. С помощью Dreamweaver можно создавать XSLT-страницы, позволяющие выполнять XSL-преобразование с помощью сервера приложений или браузера. При XSL-преобразовании на сервере преобразование XML- и XSL-данных и отображение их на странице выполняет сам сервер. При преобразовании на стороне клиента необходимые действия выполняет браузер (например, Internet Explorer).

Выбор применяемого метода (преобразование на сервере или стороне клиента) зависит от того, каким должен быть конечный результат, какие доступны технологии, а также от уровня доступа к исходным XML-файлам и других факторов. Оба подхода имеют свои достоинства и ограничения. Например, преобразование со стороны сервера поддерживается любыми браузерами, в то время как преобразования со стороны клиента выполняются строго в современных браузерах (Internet Explorer 6, Netscape 8, Mozilla 1.8 и Firefox 1.0.2). Преобразование на сервере поддерживает динамическое отображение XML-данных как с собственного сервера, так и из любого другого места в сети, а для преобразования на стороне клиента необходимо использовать XML-данные, расположенные локально на собственном сервере. Наконец, для преобразования на сервере требуется развертывание страниц на настроенном сервере приложений, тогда как для преобразования на стороне клиента достаточно доступа только к веб-серверу.

Руководство по XML можно найти по адресу www.adobe.com/go/vid0165_ru.

XSL-преобразование на сервере

В Dreamweaver предусмотрены методы создания XSLT-страниц, позволяющие выполнять XSL-преобразование на сервере. Когда сервер приложений выполняет XSL-преобразование, файл с XML-данными может находиться как на собственном сервере, так и в любом месте сети. Кроме того, преобразованные данные будут правильно отображаться в любом браузере. Однако развертывание страниц для преобразования на сервере представляет сложность и требует доступа к серверу приложений.

При работе с XSL-преобразованием на сервере с помощью Dreamweaver можно создавать XSLT-страницы, которые формируют полные документы HTML (XSLT-страницы целиком), либо XSLT-фрагменты, формирующие часть документа HTML. Полная XSLT-страница подобна обычной HTML-странице. Она содержит тег <body> и тег <head>, а также позволяет отображать HTML- и XML-данные. XSLT-фрагмент представляет собой часть кода, который используется отдельным документом, отображающим XML-данные. В отличие от целой XSLT-страницы он является независимым файлом, не содержащим теги <body> или <head>. Если нужно отобразить XML-данные на своей странице, то следует создать целую XSLT-страницу и связать с ней XML-данные. С другой стороны, если нужно отобразить XML-данные в определенном разделе существующей динамической страницы (например, на главной странице магазина спортивных товаров, где на одной стороне страницы отображается спортивный счет из канала RSS), то следует создать XSLT-фрагмент, затем на динамической странице вставить ссылку на него. Чаще всего XSLT-фрагменты создаются и применяются совместно с другими динамическими страницами для отображения XML-данных.

Первый шаг при создании страниц этого типа — создание XSLT-фрагмента. Это отдельный файл, содержащий макет, форматирование и т. п. для XML-данных, которые должны отображаться на динамической странице. Когда XSLT-фрагмент будет создан, необходимо вставить на динамической странице ссылку на него (например, на странице PHP или ColdFusion). Вставленная ссылка на фрагмент работает во многом как Server Side Include (SSI): XML-данные (фрагмент) с форматированием находятся в отдельном файле, в то время как в представлении «Дизайн» на самой динамической странице отображается шаблон для этого фрагмента. Когда браузер запрашивает динамическую страницу, содержащую ссылку на этот фрагмент, сервер обрабатывает включенную инструкцию и создает новый документ, в котором вместо шаблона отображается отформатированное содержимое фрагмента.

XSL-преобразование на сервере
A. Браузер запрашивает динамическую страницу B. Веб-сервер находит страницу и передает ее серверу приложений C. Сервер приложений просматривает страницу в поисках инструкций и находит фрагмент XSLT D. Сервер приложений выполняет преобразование (считывает фрагмент XSLT, получает и форматирует данные xml) E. Сервер приложений вставляет в страницу преобразованный фрагмент и возвращает ее веб-серверу F. Веб-сервер передает готовую страницу браузеру 

Поведение сервера «XSL-преобразование» используется для вставки на динамическую страницу ссылки на XSLT-фрагмент. При вставке ссылки Dreamweaver создает в корневой папке сайта папку includes/MM_XSLTransform/, которая содержит файл динамической библиотеки. Сервер приложений преобразует указанные XML-данные с помощью функций, определенных в этом файле. Этот файл отвечает за выборку XML-данных и XSLT-фрагментов, выполнение XSL-преобразования и вывод результатов на веб-страницу.

Чтобы страница отображалась правильно, необходимо, чтобы XSLT-фрагмент, XML-файл с данными и созданная динамическая библиотека находились на сервере. (Если в качестве источника данных будет выбран XML-файл (например, из канала RSS), то этот файл, разумеется, будет находиться где-то в Интернете.)

Кроме того, с помощью Dreamweaver можно создавать XSLT-страницы целиком для использования с преобразованиями на сервере. Целая XSLT-страница работает точно так же, как XSLT-фрагмент, только при вставке ссылки на целую XSLT-страницу с помощью поведения сервера «XSL-преобразование» происходит вставка всего содержимого HTML-страницы. Таким образом, перед вставкой ссылки динамическая страница (страница .cfm, .php или .asp, которая играет роль страницы-контейнера) должна быть полностью очищена от HTML-кода.

Dreamweaver поддерживает XSL-преобразование для страниц ColdFusion, ASP и PHP.

Примечание.

Для выполнения преобразования на сервере этот сервер должен быть правильно настроен. Для получения более подробных сведений свяжитесь с администратором сервера.

XSL-преобразование на стороне клиента

XSL-преобразования можно выполнять на стороне клиента без использования сервера приложений. С помощью Dreamweaver можно создавать целые XSLT-страницы, которые будут выполнять преобразования. Однако преобразования на стороне клиента требуют работы с XML-файлом, содержащим данные для отображения. Кроме того, преобразование на стороне клиента поддерживается только в современных браузерах (Internet Explorer 6, Netscape 8, Mozilla 1.8 и Firefox 1.0.2). Дополнительные сведения о браузерах, которые поддерживают или не поддерживают XSL-преобразование, см. в разделе www.w3schools.com/xsl/xsl_intro.asp.

Сначала создадим целую XSLT-страницу и присоединим источник XML-данных. (Dreamweaver выдаст запрос на присоединение источника данных при создании новой страницы.) Создать XSLT-страницу можно как с нуля, так и путем преобразования в XSLT-страницу существующей HTML-страницы. При преобразовании в XSLT-страницу существующей HTML-страницы необходимо присоединить источник XML-данных с помощью панели «Привязки» («Окно» > «Привязки»).

После создания XSLT-страницы необходимо привязать ее к XML-файлу, содержащему XML-данные. Для этого нужно вставить ссылку на XSLT-страницу в самом XML-файле (во многом аналогично тому, как вставляется ссылка на внешнюю таблицу стилей CSS в разделе <head> HTML-страницы). Посетители сайта должны в своем браузере просматривать XML-файл (а не XSLT-страницу). Когда посетители сайта просматривают страницу, браузер выполняет XSL-преобразование и отображает XML-данные, отформатированные с помощью связанной XSLT-страницы.

Отношения между связанной XSLT-страницей и XML-страницей принципиально аналогичны, но они отличаются от модели внешнего CSS-файла/HTML-страницы. Содержимое HTML-страницы (например, текст) форматируется с помощью внешней таблицы стилей. HTML-страница определяет содержимое, а внешний код CSS, который пользователь никогда не видит, определяет представление содержимого. При использовании XSLT и XML ситуация прямо противоположна. XML-файл (который пользователь никогда не видит в необработанном виде) определяет содержимое, в то время как XSLT-страница определяет его представление. XSLT-страница содержит таблицы, макет, графические элементы и т. д. — все, что обычно содержит стандартная HTML-страница. Когда пользователь просматривает в браузере XML-файл, XSLT-страница форматирует содержимое.

XSL-преобразование на стороне клиента
A. Браузер запрашивает XML-файл B. Сервер в ответ передает браузеру XML-файл C. Браузер считывает директиву XML и запрашивает XSLT-файл D. Сервер передает XSLT-файл браузеру E. Браузер преобразует данные XML и отображает их в окне браузера 

При использовании Dreamweaver для привязки XSLT-страницы к XML-странице Dreamweaver вставляет соответствующий код в верхней части XML-страницы. Если вы являетесь автором XML-страницы, на которую указывает ссылка (то есть если XML-файл находится исключительно на вашем веб-сервере), то вам потребуется только вставить с помощью Dreamweaver соответствующий код, который свяжет эти 2 страницы. Если вы являетесь автором XML-файла, то выполняемое клиентом XSL-преобразование является полностью динамическим. То есть при любом обновлении данных в XML-файле все выходные данные HTML, использующие связанную XSLT-страницу, будут автоматически обновляться.

Примечание.

XML- и XSL-файлы, используемые преобразованием на стороне клиента, должны находиться в одном каталоге. В противном случае браузер считает XML-файл и найдет XSLT-страницу для преобразования, однако не обнаружит ресурсы (таблицы стилей, изображения и т. п.), заданные соответствующими ссылками на XSLT-странице.

Если вы не являетесь автором XML-страницы, на которую указывает ссылка (например, если надо использовать XML-данные из канала RSS в Интернете), то процесс будет несколько сложнее. Для выполнения преобразования на стороне клиента с помощью XML-данных из внешнего источника надо сначала загрузить исходный XML-файл в тот же каталог, где находится XSLT-страница. Если XML-страница находится на локальном сайте, то с помощью Dreamweaver можно добавить соответствующий код, осуществляющий ее привязку к XSLT-странице, и опубликовать обе страницы (загруженный XML-файл и связанную XSLT-страницу) на вашем веб-сервере. Когда пользователь просматривает в браузере XML-страницу, XSLT-страница форматирует содержимое, как в предыдущем примере.

Недостатком выполнения XSL-преобразования на стороне клиента для XML-данных, поступающих из внешнего источника, является то, что эти XML-данные являются динамическими только частично. Загружаемый и изменяемый XML-файл является, по существу, «мгновенным снимком» файла, находящегося в сети. Если исходный XML-файл в сети изменится, то его нужно будет повторно загрузить, привязать к XSLT-странице и снова опубликовать на собственном сервере. Браузер показывает те данные, которые он получает из XML-файла на вашем сервере, а не данные в исходном XML-файле.

XML-данные и повторяющиеся элементы

XSLT-объект «Повторяющаяся область» позволяет отображать на странице повторяющиеся элементы из XML-файла. Любую область, содержащую шаблон XML-данных, можно превратить в повторяющуюся область. Наиболее часто используются такие области, как таблица, строка таблицы или несколько строк таблицы.

В следующем примере показано, как XSLT-объект «Повторяющаяся область» применен к строке таблицы, где отображены сведения из меню ресторана. В первой строке отображаются 3 различных элемента из XML-схемы: пункт, описание и цена. Когда XSLT-объект «Повторяющаяся область» применяется к строке таблицы, страница обрабатывается сервером приложений или браузером, при этом таблица повторяется и в каждую новую строку таблицы вставляются уникальные данные.

Применяется XSLT-объект «Повторяющаяся область»

Когда XSLT-объект «Повторяющаяся область» применяется к элементу в окне документа, вокруг повторяющейся области появляется тонкий серый контур с вкладками. При предварительном просмотре в браузере («Файл» > «Просмотреть в браузере») серый контур исчезает и выбранная область разворачивается с отображением указанных повторяющихся элементов XML-файла, как на предыдущей иллюстрации.

Когда на страницу добавляется XSLT-объект «Повторяющаяся область», длина местозаполнителя для XML-данных в окне документа усекается. Это происходит потому, что Dreamweaver обновляет выражение XPath (языка XML Path) для шаблона XML-данных так, чтобы оно соответствовало пути повторяющегося элемента.

Например, приведенный ниже код относится к таблице с 2 динамическими шаблонами, при этом XSLT-объект «Повторяющаяся область» к этой таблице не применялся.

<table width="500" border="1"> 
    <tr> 
        <td><xsl:value-of select="rss/channel/item/title"/></td> 
    </tr> 
    <tr> 
        <td><xsl:value-of select="rss/channel/item/description"/></td> 
    </tr> 
</table>

Следующий код соответствует той же самой таблице, но с примененным XSLT-объектом «Повторяющаяся область».

<xsl:for-each select="rss/channel/item"> 
    <table width="500" border="1"> 
        <tr> 
            <td><xsl:value-of select="title"/></td> 
        </tr> 
        <tr> 
            <td><xsl:value-of select="description"/></td> 
        </tr> 
    </table> 
</xsl:for-each>

В предыдущем примере Dreamweaver привел выражение XPath для элементов, попавших в повторяющуюся область (заголовок и описание), в соответствие с XPath во внешних тегах <xsl:for-each>, а не со всем документом.

Dreamweaver в других случаях также формирует соответствующие контексту выражения XPath. Например, если перетащить шаблон XML-данных в таблицу, к которой уже применен XSLT-объект «Повторяющаяся область», то Dreamweaver автоматически отобразит выражение XPath относительно существующего XPath в закрывающих тегах <xsl:for-each>.

Предварительный просмотр XML-данных

Когда для просмотра XML-данных, вставленных в XSLT-фрагмент или на целую XSLT-страницу, используется пункт меню «Просмотреть в браузере» («Файл» > «Просмотреть в браузере»), то в разных ситуациях преобразование выполняют разные алгоритмы. Для динамических страниц с XSLT-фрагментами преобразование всегда выполняет сервер приложений. В других случаях выполнять преобразование может либо Dreamweaver, либо браузер.

В следующей таблице приведены случаи применения пункта меню «Просмотреть в браузере», а также алгоритмы, выполняющие соответствующее преобразование.

Тип просматриваемой в браузере страницы Механизм, выполняющий преобразование данных
Динамическая страница с XSLT-фрагментом Сервер приложений
XSLT-фрагмент или целая XSLT-страница Dreamweaver
XML-файл со ссылкой на целую XSLT-страницу Браузер

Следующие разделы содержат рекомендации, помогающие определить методы предварительного просмотра в зависимости от задач.

Предварительный просмотр страниц для преобразования на сервере

В случае преобразования на сервере содержимое, которое в конечном счете видит посетитель, преобразуется сервером приложений. При построении динамических страниц и XSLT-страниц для преобразования на сервере всегда лучше просматривать динамическую страницу, содержащую XSLT-фрагмент, а не сам XSLT-фрагмент. В предыдущем сценарии используется сервер приложений, который гарантирует согласование представления предварительного просмотра с тем, что увидят посетители сайта, посетив соответствующую страницу. В последнем сценарии преобразование выполняет Dreamweaver, в результате чего могут возникать несколько несогласованные результаты. Для предварительного просмотра XSLT-фрагмента при его построении можно использовать Dreamweaver, однако самые точные результаты визуализации данных будут получены при просмотре динамической страницы с помощью сервера приложений после вставки XSLT-фрагмента.

Предварительный просмотр страниц для преобразования на стороне клиента

В случае преобразования на стороне клиента содержимое, которое в конечном счете видит посетитель, преобразуется браузером. Для этого надо добавить ссылку из XML-файла на XSLT-страницу. Если XML-файл открыт в Dreamweaver и его предварительный просмотр производится в браузере, то браузер загружает XML-файл и выполняет преобразование. Это дает тот же эффект, как при посещении сайта.

Однако такой подход осложняет отладку страницы, поскольку преобразование XML-данных и формирование кода HTML выполняется внутри браузера. Если для отладки HTML-кода выбрать команду браузера «Просмотреть исходный код», то вы увидите только полученный браузером исходный текст XML, а не полный текст HTML (теги, стили и т. п.), отвечающий за визуализацию страницы. Чтобы при просмотре исходного кода просмотреть полный текст HTML, необходимо просмотреть XSLT-страницу в браузере.

Предварительный просмотр целых XSLT-страниц и XSLT-фрагментов

При создании целых XSLT-страниц и XSLT-фрагментов рекомендуется предварительно просмотреть работу, чтобы проверить правильность отображения. Если пункт меню «Просмотреть в браузере» используется для отображения целой XSLT-страницы или XSLT-фрагмента, то Dreamweaver выполняет преобразование с помощью встроенного алгоритма. Это быстрый метод, упрощающий постепенное построение и отладку страницы. Кроме того, он позволяет просматривать весь HTML-код (теги, стили и т. п.) с помощью параметра браузера «Просмотреть исходный код».

Примечание.

Такой метод предварительного просмотра обычно применяется в начале построения XSLT-страниц независимо от того, где выполняется преобразование данных — на сервере или стороне клиента.

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет