多媒体技术与应用：第8章 XHTML超文本编辑-ExpressionWeb

1第8章XHTML超文本编辑——ExpressionWeb学习提示：本章是对应于“第3章超文本原理”的上机实验内容，在已掌握XHTML超文本/网页基本原理的基础上，系统叙述以ExpressionWeb作为软件工具快捷编辑XHTML超文本/网页/文档。本章学习目标如下：理解XHTML文档与网站的关系。掌握ExpressionWeb管理网站。掌握ExpressionWeb编辑XHTML文档的基本操作。掌握ExpressionWeb编辑CSS的基本操作。理解XHTML文档内容、格式、功能的含义。理解XHTML文档美工与程序的分工合作。理解ExpressionWeb(XHTML文档)与前期课程Word(Word文档)的异同。28.1ExpressionWeb简介与案例ExpressionWeb是Microsoft公司开发的XHTML文档原生(Native)编辑软件，是最流行的XHTML文档编辑软件之一，当前最高版本为ExpressionWeb3.0，可以登录www.下载其试用版。ExpressionWeb编辑XHTML文档的操作和前期课程Word编辑Word文档的操作非常相似。如果具有Word使用经验，可以将XHTML文档与Word文档比较、ExpressionWeb与Word比较学习。为了叙述方便，以下以ExpressionWeb简捷表示ExpressionWeb3.0。叙述过程中会使用到本章的一些示例文件，为了便于上机实验，可在硬盘上新建一个文件夹(建议在Windows桌面上新建tryExpressionWeb文件夹)，然后下载示例文件到该文件夹下面以备使用。38.2ExpressionWeb界面、视图1.主界面2.通过Window(窗口)菜单变换界面3.通过Panels(面板)菜单变换界面4.通过View(视图)菜单变换界面48.3ExpressionWeb属性配置图8-3所示具有General(常规)、ConfigureEditors(配置编辑器)、ReportsView(报表视图)、FTP(文件传输协议)四个选项卡，涉及面比较广，建议使用默认设置即可，在具体涉及时再详述。在此仅以一个设置为例进行概述。例如，图8‑3中如果选择OpenlastsiteautomaticallywhenExpressionWebstarts，那么启动ExpressionWeb时，ExpressionWeb将自动打开上一次打开过的网站。58.4ExpressionWeb操作起步1.新建或打开一个网站2.新建一个XHTML文档3.简单编辑XHTML文档并查看XHTML代码4.保存XHTML文档5.预览XHTML文档6.本机浏览XHTML文档7.发布、浏览XHTML文档68.5XHTML网站管理XHTML文档往往作为一个网站的文档之一进行管理编辑，所以必须系统理解ExpressionWeb网站管理。8.4节曾涉及网站的新建等一些操作，下面以一个示例网站作为案例，系统概述ExpressionWeb网站管理的强大功能。78.5.1网站管理界面1.网站管理界面与管理操作在此将打开一个网站体验网站管理。选择Site(网站)|OpenSite(打开网站)，将打开OpenSite(打开网站)窗口，单击窗口中的Browser(浏览)按钮，导航到示例文件tryExpressionWeb\OrganizationDescription\default.html，将打开示例网站，显示网站管理主界面SiteView(网站视图)如图8‑9所示。88.5.2网站设置选择Site(网站)|SiteSettings(网站设置)，将打开SiteSettings(网站设置)对话框如图8-11所示。图8-11所示具有General(常规)、Preview(预览)、Advanced(高级)、Publishing(发布)四个选项卡，涉及面比较广，建议使用默认设置即可，在具体涉及时再详述。98.5.3网站新建、删除8.4节已述及网站创建。在此不赘述。若要删除当前网站，选择Site(网站)|Delete(删除)命令，将弹出询问是否删除的界面如图8-12所示，单击Yes(是)按钮将删除。删除网站本质上就是删除了网站所对应的文件夹。108.6XHTML文档编辑概述8.6.1XHTML文档编辑界面1.

XHTML文档编辑主界面2.

XHTML文档编辑界面变换(1)

View(视图)|VisualAids(视觉辅助)菜单项包含XHTML文档编辑时的可视化辅助命令。(2)

View(视图)|FormattingMarks(格式标记)菜单项包含XHTML文档编辑时是否显示格式标记的命令。(3)

View(视图)|QuickTagSelector(快速标记选择器)菜单项用来切换是否在文档切换按钮下面显示XHTML标记供快捷选择标记。(4)

View(视图)|RulerandGrid(标尺和网格)下的菜单项用来切换是否在视图中显示标尺和网格，显示标尺和网格有利于精确观察到XHTML文档中内容的定位。(5)

View(视图)|PageSize(网页尺寸)下菜单项用来变换网页/XHTML文档视图尺寸。(6)

View(视图)|Tools(工具)下的菜单项用来切换是否显示所对应的工具栏。选择View(视图)|Tools(工具)|Common(常用)将显示常用的工具栏118.6.2XHTML文档配置XHTML文档编辑与XHTML文档配置是相关的。可选择Tools(工具)|PageEditorOptions(网页编辑器选项)命令，打开PageEditorOptions(网页编辑器选项)对话框如图8-13所示配置。128.6.3XHTML文档新建、删除有多种创建XHTML文档并保存到网站的方式。例如，选择File|New|Page，将打开新建ExpressionWeb所支持的各种文档的New(新建)对话框，如图8-14所示。138.6.4XHTML文档元素与特性XHTML文档创建编辑时，最基本的任务之一是在文档中生成各种元素，并为每一个元素设置各种特性值，并为元素进行内容、格式、功能等操作。XHTML元素与特性可参见3.2节，本节将概述一些常用元素及其特性的编辑。元素生成一般通过Toolbox(工具箱)面板可视化操作，元素特性值设置往往通过TagProperties(标记特性)面板可视化操作。14

文档元素生成打开示例文件try-ExpressionWeb\Untitled_1.html，然后选择Panels(面板)|Toolbox(工具箱)可显示Toolbox面板如图8‑15所示。(1)

HTML的Tags(标记)部分是HTML常见的格式相关的标记。(2)

HTML的FormControls(表单控件)部分是HTML常见的表单相关的标记。(3)

HTML的Media(媒体)部分是HTML常见的媒体相关的标记。(4)

ASP.NETControls(ASP.NET控件)部分是ASP.NET控件相关的标记。(5)

QuickTagSelector(快速标记选择器)显示了当前光标所处的标记/元素的名称，单击这里所显示的元素/标记名称，则将选定该元素及其所有子元素的整个内容，比拖选方式实现此类操作更为方便。15

元素特性值设置选择Panels(面板)|TagProperties(标记特性)可以显示该面板，然后文档中光标定位一个标记后，TagProperties(标记特性)面板将显示当前标记所有特性及其值，如图8-16所示。TagProperties(标记特性)面板列出了XHTML文档中当前选定元素/标记(在此选定的是<p>)的所有特性，以供查看、编辑。不同的HTML元素/标记特性的核心部分是固定的，不过也可能部分变化，在此主要关注核心固定的特性。16

字符、段落、文档类元素字符形成段落，段落形成文档，整个文档就是一页。此以示例文件“try-ExpressionWeb\格式相关元素与文本基本格式.htm”为例概述这些元素，ExpressionWeb中打开该示例文件将如图8‑18所示。1)分块、内嵌类元素2)字符、段落、文档类元素(1)字符相关元素(2)段落相关元素(3)文档相关元素17

列表类元素1)有次序列表2)无次序列表18

表格类元素1)添加表格2)修改表格19

元素生成、元素特性值设置小结1)

XTHML文档元素生成的特点概述2)元素特性值设置的特点概述3)

XHTML元素及其特性与CSS样式的相关性208.6.5XHTML文档属性1.

General(常规)选项卡2.

Formatting(格式)选项卡3.

Advanced(高级)选项卡4.

Custom(自定义)选项卡5.

Language(语言)选项卡6.关于XHTML文档尺寸、内容布局218.6.6XHTML文档层屏幕是二维的，XHTML文档提供了层的机制以模拟实现三维空间特性。XHTML文档层本质上赋予了z-indexCSS属性值的相对定位或绝对定位的<div>元素，这些<div>元素通过不同的z-index数值而确定Z轴方向的块状区域并层叠起来。层通过Layer(层)面板可视化设置并管理，Design(设计)视图状态时，选择Panels(面板)|Layers(层)，将打开Layers(层)面板如图8-26所示。228.6.7XHTML文档预览与DOMExpressionWeb提供多种预览方式，如选择Panel(面板)|Snapshot(快照)菜单项，选择File(文件)|PreviewinBrowser(浏览器中浏览)的子菜单项等，在此叙述功能最为强大的SuperPreview预览，并打开示例文件try-ExpressionWeb\OrganizationDescription\default.html为预览案例，然后选择File(文件)|DisplayinSuperPreview(超级预览)命令将打开SuperPreview窗口，如图8-28所示。238.7XHTML文档内容8.7.1文本内容XHTML作为超文本语言，文本定义是最基本的功能。文本定义首先需要生成文本相关的标记(如<p>、<div>、<span>等，已在8.6.4节详述)，然后在标记之间编辑文本内容，还可根据具体需要为文本赋予格式(将在8.8节详述)。ExpressionWeb中生成文本内容，如输入、选定、复制、粘贴、删除、移动等编辑操作和前期课程Word软件几乎完全相同，可自主上机实验，在此不赘述。注意，如果需要选择元素/标记，请参见节图8‑15所示的QuickTagSelector(快速标记选择器)，或者通过Code(代码)视图中的代码选定。248.7.2外部媒体、组件的引用

引用图像、背景图像1)引用图像2)引用背景图像25

引用ActiveX组件1)引用ActiveX组件2)设置所引用的ActiveX组件的参数3)

ActiveX组件引用小结26

引用外部XHTML文档新建一个XHTML文档并保存(例如保存为“外部XHTML文档引用.htm”)，准备引用外部XHTML文档。然后，参照节图8-15所示的Toolbox(工具箱)面板中，拖动HTML的Tags类别下的InlineFrame到XHTML文档中，将生成一个嵌入式框架如图8-35所示。278.8XHTML文档格式——CSSXHTML文档可理解为内容、格式、功能三类主要信息。上述ExpressionWeb生成XHTML文档内容后，需要进一步赋予格式，主要通过CSS样式实现。由于兼容历史的原因，XHTML也含有一些元素可直接定义格式(如前面叙述过的<p>,<list>,<table>等)，但这些元素的格式功能是很有限的，而CSS分为嵌入式CSS、内部CSS、外部CSS三个层级类型(参见3.6.11节)，功能强大灵活，ExpressionWeb则提供了强大的CSS样式可视化编辑功能。编辑、管理整个XHTML文档的CSS一般通过ManageStyles(管理样式)面板可视化操作，编辑管理一个元素的CSS往往通过CSSProperties(CSS属性)面板可视化操作。288.8.1文档CSS编辑打开示例文件try-ExpressionWeb\OrganizationDescription\default.html，然后，选择Panels(面板)|ManageStyles(管理样式)命令将打开ManageStyles面板，如图8-38所示。29

为文档新建、修改、删除内部和外部CSS1)为文档新建内部和外部CSS样式2)修改文档中的内部和外部CSS样式3)重命名内部和外部CSS样式中的类特性选择器4)删除文档中的内部CSS样式30

为文档附加、取消外部CSS1)为当前文档附加外部CSS2)去除当前文档所附加的外部CSS链接31

内部或外部CSS应用到元素1)内部或外部CSS应用到元素2)选定文档中应用了某样式的所有元素实例32

改变CSS层级如果鼠标拖动ManageStyles(管理样式)面板中的选择器，有时可能将选择器移动到不同的层级，表示样式在内部样式、外部样式之间进行了移动，即改变了样式的层级或者应用到了新的元素等。由于比较复杂不好理解，所以建议不使用拖动，而直接通过CSS代码的编辑操作而改变样式的层级。直接编辑CSS代码，可谓是CSS编辑的终极方法。338.8.2元素CSS编辑打开示例文件try-ExpressionWeb\OrganizationDescription\default.html，选定文档中的一个元素后，选择Panels(面板)|CSSProperties(CSS属性)打开CSS属性面板，将显示当前元素所应用的所有CSS及其属性值，如图8-42所示。34

为元素新建、应用、修改、删除嵌入式CSS1)为元素新建、应用、设置/修改嵌入式CSS样式2)为元素去除/删除嵌入式CSS样式35

为元素去除内部CSS、外部CSS内部CSS、外部CSS应用到元素时，在CSS属性面板中已经转化为了Class(类)样式规则、id(标识)样式规则的概念。所以在CSS属性面板的任一Class(类)样式规则，id样式规则的右击菜单中分别选择RemoveClass(去除类)、RemoveID(去除ID)，将逐步去除当前元素的内部CSS、外部CSS。为当前元素去除Class(类)样式规则，ID(标识)样式规则，或者说去除内部CSS、外部CSS，只是删除了当前元素对这些样式的引用，而没有删除该样式，因此其他引用了这些样式的元素不会受到影响。因为Element(元素)选择器是根据Element(元素)选择器与元素名称匹配而应用到元素的，CSS属性面板中出与简单化的考虑，没有提供去处Element选择器的命令，可参见节在ManageStyles(管理样式)面板中删除。368.8.3其他CSS编辑方式概述1.字符的基本格式2.段落的基本格式3.文档的基本格式4.根据模板新建样式378.8.4CSS报表可以为网站中的CSS生成三种类型的报表：StyleSheetLinks(样式表链接)报表、Compatibility(兼容性)报表、CSSReport(CSS报表)。在此概述如下。(1)

StyleSheetLinks(样式单链接)报表是关于整个网站的外部CSS链接的报表(StyleSheet是外部CSS的另一个称呼)。SiteView(网站视图)状态下，切换为Report(报表)视图可生成该报表，从而可查看所有外部CSS文件信息，以及被XHTML文档引用的信息等。(2)选择Panels(面板)|Compatibility(兼容性)将打开Compatibility(兼容性)面板以查看兼容性报告。兼容性报告可用于检查所使用的CSS是否与所配置的CSS架构兼容(参见8.6.2节)。(3)选择Panels(面板)|CSSReports(CSS报表)将打开CSSReport(CSS报表)面板查看CSS报告。包括CSSError(CSS错误)、CSSUsage(CSS使用率)，以及正使用的类、ID和元素选择器、使用这些样式的网页以及样式定义所在的位置等。388.8.5CSS编辑小结当然CSS代码是最终结果，所以系统地理解CSS代码，并以ExpressionWeb为辅助而快捷地生成CSS是基本理念。(1)元素生成内容，元素赋予CSS样式将为元素内容定义格式，但由于XHTML兼容历史的原因，元素及其特性的功能与CSS样式的功能有少许交叉。(2)

ManageStyles(管理样式)面板是管理当前XHTML文档中的所有内部CSS、外部CSS，以选择器的方式列出并可编辑管理。(3)必须理解ManageStyles面板是管理当前XHTML文档中的所有内部CSS、外部CSS，以选择器的方式列出并可编辑管理。而CSS属性面板是当前XHTML文档中当前元素的所有内部CSS、外部CSS、嵌入式CSS管理及其属性值设置。(4)

CSS属性值设置应该尽量在CSS属性面板中设置(如8.8.2节图8-42所示)，CSS属性面板中是根据CSS属性名称进行查看和设置CSS属性值的，系统性高，可持续发展性强。(5)由于CSS嵌入式CSS、内部CSS、外部CSS的选择器与层级机制，容易引起规则复杂(如8.8.2节图8-42所示)，所以设计CSS时，应该注意尽量减少层级，简单化规则。398.9XHTML文档功能HTML文档可理解为内容、格式、功能三类主要信息。前面叙述了XHTML文档内容定义，并通过CSS格式化XHTML文档。本节概述XHTML文档功能，例如超链接、通过表单与服务器通信等。此外，XHTML文档还可通过JScript、C#、Java等程序语言扩展强大的功能，但涉及系统的编程知识，根据立体化课程观，将在后续课程详述。408.9.1超链接1.定义超链接2.

Hyperlinks(超链接)面板查看网站的超链接报表418.9.2表单1.创建表单和表单域2.设置表单和表单域的特性1)设置表单域的属性2)设置表单的属性428.9.3ASP.NET控件图8-53所示表明XHTML文档(.html文件)中的表单是浏览器端发送信息到服务器端的技术机制，那么ASP.NET控件则是服务器端接收并处理这些信息的技术机制，又称为ASP.

NET元素。因为往往含有界面或程序功能，所以才又称为ASP.NET控件，存在于服务器端XHTML文档(.aspx文件)中。ExpressionWeb具有编辑XHTML文档的强大功能，同时也提供编辑ASPX文档的强大功能。ASPX文档基于XHTML文档而设计，所以与XHTML文档基本相似，主要只是ASP.NET控件的差异。而ASP.NET控件的编辑方式与8.9.2节所述的表单/表单域的编辑方式类似，可自主上机实验。只是功能和编程思想有所差别，根据立体化课程观，将在后续课程详述。438.10关于XHTML文档工程一个XHTML应用/超媒体应用/网站应用往往涉及很多个XHTML文档，涉及XHTML文档编辑、美工设计、程序开发、浏览器端技术、服务器端技术等。在给定成本、进度的前提下，合理组织团队人员协作，开发出具有可修改性、有效性、可靠性、可理解性、可维护性、可重用性、可伸缩性