自定义 HTML 库

  • 项目

HTML 库的布局和外观称为主题。尽管 Expression Media 包含若干个预建的主题，您仍可以创建自定义库或修改现有库，以便更加充分地发挥自身的创作力，制作出更加适合媒体需要的库主题。创建或修改主题模板要求您对 HTML 有充分的了解。模板是包含一个或多个字段短语的基本 HTML 页，例如 (iView:Catalog)。Expression Media 会在您导出网页时将这些短语替换为相应的实际内容或信息。Microsoft Expression Media 中的主题模板是由标准的 HTML 创建的，您可以使用任何 HTML 编辑器（例如 Microsoft Expression Web）或任何其他第三方 Web 设计工具或文本编辑器来编辑这些模板。

如果您要在 Expression Media 中使用自定义库，则组成某一主题的模板必须包含特定的 Expression Media HTML 标记。这些标记是一些占位符，会在创建库时替换为特定文本。当您重新启动 Expression Media 后，自定义模板便会显示在“HTML 库”对话框的“主题”菜单中。(iView:Catalog) 就是 Expression Media 特有的一个 HTML 标记，该标记将在导出过程中替换为目录名称。本部分提供了有关创建和修改主题、模板和标记的概述和指南。

Cc294947.alert_tip(zh-cn,Expression.10).gif提示：

复制现有模板，将其重命名，然后尝试修改各个字段或设计，这是学习创建模板的好方式。

Expression Media 中的主题

Expression Media 使用主题帮助组织 HTML 库模板。主题存储在包含索引模板和媒体 HTML 模板的文件夹中。如果您将这两类模板存储在一个文件夹中，则可以更加轻松地与其他用户共享新的库设计。主题文件夹还包含一个用于保存相关 HTML 图形的 Assets 文件夹，以及一个在“HTML 导出”对话框中用作主题预览的图像。预览图像的名称为“About.jpg”，是一个 200x120 像素的 JPEG 图像。

Documentation 中的 Example HTML 文件夹中提供了“All Fields”主题。将此主题复制到以下某个路径，以在 Expression Media 中使用：

  • C:\Documents and Settings\<用户名>\Application Data\Expression Media 2\Plug-ins\HTML Templates (Windows XP)

  • C:\Users\<用户名>\AppData\Roaming\Expression Media2\Plug-ins\HTML templates (Windows Vista)

Expression Media 中的模板

Expression Media 使用模板生成目录的 HTML 库。模板中的 Expression Media 标记代表 Expression Media 生成库时该模板中将由您的目录内容来替换的那一部分。

Expression Media 可以生成两种类型的 HTML 页：索引页和媒体页。索引页列出目录或子集中的所有媒体，与“缩略图”视图非常相似。媒体页因具体目录项而异，通常包含较大的图像或与目录项相关的信息，与“媒体”视图非常类似。单击索引页中的缩略图图像可访问媒体页。

您可以创建有关索引页和媒体页的模板。Expression Media 将这两种类型的模板存储在同一文件夹中。此文件夹的名称即为“HTML 库”对话框中显示的 HTML 库主题的名称。

Expression Media 中的标记

Expression Media 中的标记可控制一系列功能，从媒体呈现和页面结构，到导航和提取元数据信息并重新设置用途，均可加以控制。大多数媒体标记都将由 Expression Media 从目录数据中提取的单个数字或文本字符串替代。您只需将标记放置在 HTML 页面中的任何位置。该标记就会在导出库时替换成相应的内容。

例如，本主题中的后面代码段中就包含标记。当 Expression Media 生成此模板时，它会将该标记替换为 Expression Media 目录文件的实际标题。

大多数标记并没有一定的放置规则。可以将这些标记放在 HTML 页面中的任何位置。但是，也存在某些例外，如本主题中后续的Expression Media tags that should be put inside HTML tags部分中所述。

Cc294947.alert_note(zh-cn,Expression.10).gif说明：

对于所有标记，必须完全按照 HTML 引擎指令标记中标记表的说明来使用语法和拼写。

要注意两类特殊标记，即 HTML 引擎指令标记和主题字段标记。这些标记被称为可变 标记。这些标记可控制索引页和媒体页上的图像大小，还可定义对话框内特殊字段中显示的值。有关这些类型的标记的详细信息，请参阅 HTML 引擎指令标记。

自定义模板示例

如先前所述，学习创建自定义 HTML 库的最好方法就是复制现有模板并加以修改。但是，您可使用本主题后面的代码示例作为其他创建活动的参考。

索引页示例

要构建索引页，可以使用字段短语来标记包含媒体内容缩略图的行和列的起始与结束位置。这些短语包括 (iView:IndexColStart)、(iView:IndexColEnd)、(iView:IndexRowStart) 和 (iView:IndexRowEnd)。

以下是一个使用字段短语的简单示例：

<html>
<head>
<title>(iView:Catalog)</title>
</head>

<!-- iView HTML Engine Directives
iView:InThumbSize 128
iView:InThumbColumns 3
iView:InThumbRows 2
-->

<body>
<p>(iView:Catalog)<br>(iView:Index)</p>
(iView:IndexRowStart)
(iView:IndexColStart) (iView:Preview) (iView:IndexColEnd) <br>
(iView:IndexRowEnd)
</body>
</html>

若使用定义的指令（3 列 2 行），此模板可能会生成以下索引页：

<html>
<head>
<title>Favorite Photos</title>
</head>

<!-- iView HTML Engine Directives
iView:InThumbSize 128
iView:InThumbColumns 3
iView:InThumbRows 2
-->

<body>

<p>Favorite Photos<br></p>
<a href="source/image1.htm"><img src="preview/image1.jpg" alt="image1"
width="96" height="128" border="0" /></a>
<a href="source/image2.htm"><img src="preview/image2.jpg" alt="image2"
width="96" height="128" border="0" /></a>
<a href="source/image3.htm"><img src="preview/image3.jpg" alt="image3"
width="96" height="128" border="0" /></a>
<br>
<a href="source/image4.htm"><img src="preview/image4.jpg" alt="image4"
width="128" height="96" border="0" /></a>
<a href="source/image5.htm"><img src="preview/image5.jpg" alt="image5"
width="128" height="96" border="0" /></a>
<a href="source/image6.htm"><img src="preview/image6.jpg" alt="image6"
width="96" height="128" border="0" /></a>
<br>
</body>
</html>

媒体页示例

媒体页可以包含使用 (iView:OriginalURL) 的原始编录项或从使用 (iView:Media) 的编录项转换而来的 JPEG 图像。当使用 (iView:Media) 时，为媒体页生成的图像大小由 (iView:InMediaWidth) 和 (iView:InMediaHeight) 指令控制，这两个指令必须位于媒体模板中。不过，这些指令可以位于媒体页的任何部分中。以下是一个指令代码示例：

<!-- iView HTML Engine Directives
iView:InMediaWidth 800
iView:InMediaHeight 600
-->

这些指令将按比例缩放图像，以使图像的最大高度为 800 像素，最大宽度为 600 像素。同样，选择带有指令的主题时，任何带有媒体宽度和高度指令的模板都将填充“HTML 选项”对话框中的相应字段。例如，前面指令将填充以下相应字段：

指令代码的结果

Cc294947.eca02780-170c-4d6f-a03c-e17eb6635f73(zh-cn,Expression.10).png

您仍可以通过以上对话框来更改最终大小，而无需返回到该模板中。但请注意，更改大小可能会破坏网页设计的某些部分。

以下是一个简单的 HTML 媒体模板示例：

<html>
<head>
<title>Catalog: (iView:Catalog)</title>
</head>

<!-- iView HTML Engine Directives
iView:InMediaWidth 800
iView:InMediaHeight 600
-->

<body>
<p>Simple Media Template</p>
<p>Image:</p>
<p>(iView:Media)</p>
<p>File Name:</p>
<p>(iView:Filename)</p>
</body>
</html>

上述示例包含三个 Expression Media 标记：即 (iView:Catalog)、(iView:Media) 和 (iView:Filename)。在导出过程中，这三个标记将分别被目录名称、媒体图像和图像文件名替换。

Cc294947.alert_note(zh-cn,Expression.10).gif说明：

媒体图像是用于 HTML 库转换的 JPEG 图像，可按比例进行缩放以符合 (iView:InMediaWidth) 和 (iView:InMediaHeight) 设置。

以下是另一个简单媒体页的示例。此处使用的图像将与原始文件完全相同，格式、大小、注释以及 ICC 配置文件均相同。

<html>
<head>
<title>Media page using an unconverted catalog image</title>
</head>
<body>
<p><img src="(iView:OriginalURL)" width="(iView:OriginalWidth)"
height="(iView:OriginalHeight)"></p>
</body>
</html>

Expression Media 标记的词汇表

本部分包含可以用于创建和修改 Expression Media 中的 HTML 库的所有标记的示例。

可以将大多数标记放置在 HTML 代码中的任意位置，但必须将一些特殊的标记放置在 HTML 标记内。下面的第一组标记中就包含这些特殊标记。后面的表将描述其他标记并根据情况指出这些标记适用于媒体页还是索引页。

应置于 HTML 标记内的 Expression Media 标记

Cc294947.alert_note(zh-cn,Expression.10).gif说明：

为使下列标记有效，必须将其置于 HTML 标记内。

  • (iView:Running)、(iView:Total)   Expression Media 会将这些标记替换为显示文件的序号和导出的项目总数。例如：Item: (iView:Running) of (iView:Total) 实际显示的内容类似于“Item: 5 of 10”，其中的数字代表正在查看的文件以及可供查看的文件总数。

  • (iView:Date)、(iView:Time)   Expression Media 会将这些标记替换为导出库的日期和时间。例如：

    <b>Gallery Created:</b> (iView:Date), (iView:Time)

  • (iView:Preview) (index page)   Expression Media 会将这些标记替换为 JPEG 缩略图。在索引模板中，必须将此标记放到包含 1 行和 1 列的表中。例如：

    <table border="10"><tr><td><p>(iView:Preview)</p></td></tr></table>

    Expression Media 将根据“HTML 导出”对话框中的“索引表”设置定义的行数和列数或者 HTML 引擎指令定义的行数和列数扩展表格。

  • (iView:Index) (index page)   每个索引页中的行数和列数由“HTML 导出”对话框中的“索引表”设置定义。如果索引表设置为 5x4，并且目录中包含 100 个图像，则 Expression Media 会将索引页分为 5 个索引页，其中每个索引页包含 20 个图像。此标记指示 Expression Media 生成一个复合显示并链接到多个索引页。例如，一个链接将读取“1-20”，下一个链接将读取“21-40”，依此类推。如果只生成一个索引页，则此标记包含空值。此标记为可选项，必须将其放置在包含 (iView:Preview) 的表的外部。

  • (iView:Media)   Expression Media 可按照目录的“媒体”视图中所显示的媒体形式来替换此标记。如果使用的是默认模板，此标记将导出实际媒体（图像）以及“媒体”视图中显示的所有字段。有关示例，请参见媒体页。

  • (iView:GoNext)、(iView:GoPrevious)   Expression Media 会将此标记替换为下一媒体 HTML 页的超链接。您可以将此标记添加为 <a href> 标记内的链接。例如：

    <a href="(iView:GoNext)">Next</a>

  • (iView:GoIndex)   Expression Media 会将此标记替换为引用的索引 HTML 页的超链接。您可以将此标记添加为 <a href> 标记内的链接。例如：

    <a href="(iView:GoIndex)">Back to Index</a>

另请参见

概念

HTML 引擎指令标记