微软开发的网页设计工具Expression Web，作为网页设计工具FrontPage的替代品，在功能以及可扩展性方面都有了很大提升，它彻底解决了以前FrontPage会产生不标准网页代码的缺点，现在用Expression Web可以创建完全符合标准的网站，同时支持最新的CSS和层，具有强大的CSS功能，Expression Web支持asp.net2.0和XML，具有强大的数据库操作功能。通过这些新特性，Expression Web摆脱了以前FrontPage给设计人员造成的一种“玩具”印象，逐步走进了专业网页设计人员的视野。

Expression Web启动画面

下面我们就来了解一下这个网页设计工具的使用方法。

一、建立网站

Expression Web是一个强大的网页编辑和网站设计工具，在编辑具体的网页之前，我们首先要对自己的网站有一个总体的规划，设计网站的结构，然后再进行具体的网页编辑操作。在网站规划方面，我们既可以自己手工操作，也可以用Expression Web提供的模板来自动创建。

（一）建立普通站点

单击“文件→新建→网站”命令，打开“新建”网站对话框，在左边的窗口中选择“常规”，在右边的窗口中显示出要创建的网站类型。

只有一个网页的网站：创建只有一个单独的空白网页的新网站。

空白网站：创建一个没有内容的新网站。

单击“指定新网站的位置”右边的“浏览”按钮，可以选择网站保存的位置，最后单击“确定”按钮，一个新网站就建立好了。

（二）使用导入向导建立站点

这种方式可以创建一个网站，并将一个已建立的网站或某个文件（目录）导入到当前网站中，它采用向导式的操作，一步步引导用户完成网站的创建。

单击“文件→新建→网站”命令，打开“新建”网站对话框，在左边窗口中选择“常规”，在右边窗口中选择“网站导入向导”，然后单击“浏览”按钮，选择新网站的位置；单击“确定”按钮，出现“导入网站向导”对话框，用户可以选择导入文件的方式，有Http、Ftp、WebDAV、 FrontPage Server Extensions、文件系统五种方式，这里我们选择从本机上导入文件，所以选择“文件系统”，然后单击“浏览”按钮选择要导入的文件目录，单击两次“进一步”按钮，最后单击“完成”，出现“本地网站”和“远程网站”窗口，单击“远程网站”下部的“发布网站”按钮，将远程网站中的文件发布到本地网站中，在“文件夹列表”中就可以看到导入的文件内容。

（三）使用模板建立站点

Expression Web内置了多种站点模板，用户可以非常方便地用它创建一个自己需要的网站。

单击“文件→新建→网站”命令，打开“新建”网站对话框，在左边窗口中选择“模板”，在右边窗口中列出了模板网站的类型，有个人、单位、小型企业，选中某种类型，就可以在右边的预览区查看它的外观样式，单击“浏览”按钮，选择网站保存的位置，然后单击“确定”按钮，一个新网站就建好了。对模板中的各个页面适当修改就可以变成自己的网站，非常简单。如果用户创建的是单位或个人的小型站点，用这种方法最方便快捷。

二、创建新网页

单击“文件→新建→网页”命令，打开“新建网页”对话框，Expression Web可以创建“常规”、“asp.net”、“ css布局”、“样式表”、“框架网页”4种类型的文件，每种文件又包含很多种类型，在左边的窗口中选中一种类型，在中间的窗口中列出详细的分类，右边的窗口是预览区，可以预览一些网页的外观样式，选中要创建的网页类型，单击“确定”按钮即可。一般常用的文档类型在“常规”分类中都可以找到。

创建新网页

另外，单击工具栏“新建文档”右边的下拉按钮，在弹出菜单中选择“网页”选项，也可以打开“新建网页”对话框，当然也可以直接在弹出的菜单中选择要创建的网页类型，如HTML、ASPX、CSS。

可以通过以下方法随时预览编辑的网页，注意在预览前一定要先保存网页。

方法一：单击“文件→在浏览器中预览”命令，然后在展开的子菜单中选择浏览器和窗口大小。

方法二：单击工具栏中的“预览”按钮，或者单击按钮旁的箭头，在下拉框中选择浏览器和窗口大小。

方法三：直接按F12键。

三、创建超链接

超链接既可以是文字也可以是图片，既可以链接到网站内的网页，也可以链接到其他的网站、文件、程序或电子邮件。

1、选中要建立超链接的文本或图片，如果没有选择文本或图片，则目标URL显示为超链接文本。

2、单击“插入→超链接”命令或工具栏中的“插入超链接”按钮，弹出“插入超链接”对话框。

3、设置超链接的参数内容：

在“要显示的文字”框中输入超链接要显示的文本内容。

单击“屏幕提示”按钮，在弹出的对话框中输入屏幕提示文字，当你将鼠标移到超链接上时将显示该文字内容。

如果要链接到网站中的某个网页，请在“当前文件夹”列表中选中一个网页，如果要链接到外部网站，请在“地址”框中输入网站的网址。

单击“目标框架”，在弹出的窗口中可以设置网页的打开方式，如果希望在新浏览窗口中打开超链接，请选择“新建窗口”。

如果要链接到电子邮件地址，请选择“电子邮件地址”，然后在右边的窗口中输入“电子邮件地址”和邮件主题。

4、设置完毕，单击“确定”按钮。

四、插入图片

将光标移到网页中要插入图片的位置，单击“插入→图片→来自文件”命令或直接单击工具栏中的“插入文件中的图片”按钮，打开“图片”对话框，选中所需要的图片文件，单击“插入”按钮，出现“辅助功能属性”对话框，在“替代文本”框中，输入在下载图形、找不到图形或网站访问者将鼠标移到图形上时为图形所显示的文本，若要添加较详细的说明，请单击“浏览”按钮，并选择一个文件，再单击“打开”按钮，当然你也可以选择不在“辅助功能属性”对话框中输入内容，单击“确定”按钮，图片就插入到网页中。

五、创建表格

在Expression Web中有两种方法创建表格。

（1）使用工具按钮插入表格

将插入点移到网页中要插入表格的位置，单击工具栏中的“插入表格”按钮，弹出一个表格窗口，向右下方拖动鼠标，表格框中就会显示表格的大小，表格大小满足要求时单击鼠标就会在网页中插入一张空表格。

（2）使用菜单命令输入表格

将插入点移到网页中要插入表格的位置，单击“表格→插入表格”命令，出现“插入表格”对话框，输入表格所需的“行数”和“列数”，然后在“布局”、“边框”、“背景”中设置好表格的其他参数，单击“确定”按钮，一个表格就出现在网页中。

六、创建框架网页

框架网页是一种特殊的网页，它本身并不包含可见内容，它只是一个窗口，里面包含多个框架，每个框架都可以显示一个独立的网页，多个框架之间还可以设置超链接，这些框架的集合，就称为框架网页。

单击“文件→新建→网页”命令，打开“新建”网页对话框，在“网页”选项卡中单击“框架网页”，在右边的列表中就可以看到程序内置的十种框架网页模板以及预览图，选择一种模板，单击“确定”按钮，就可以创建一个框架网页。

新创建的框架网页还没有任何内容，用户需要给每个框架来填充网页内容，有两种方法：

如果已经在网站中编辑了网页，可以单击框架中的“设置初始网页”按钮，打开“插入超链接”对话框，在文件列表中选中一个网页文件，也可以直接在“地址”栏中输入网址，单击“确定”按钮，就可以将网页插入到框架中。

如果还没有建立网页，需要给框架新建网页内容，请单击框架中的“新建网页”按钮，开始新网页的编辑。

七、创建样式表

利用Expression Web可以非常方便地创建样式表，用来设置网页及其内容的格式。

（1）创建外部样式表

单击“文件→新建→CSS”命令，新建一个样式表文件，然后单击“应用样式”任务窗格中的“新建样式”按钮，打开“新建样式”对话框，在“选择器”中选择要定义的标记，在“定义位置”下拉列表中选择“现有样式表”，在下面的“类别”区设置好各项参数，单击“确定”按钮，一个样式表就建好了，将它保存起来，以后就可以使用了。

（2）创建内部样式表

首先打开要创建内部样式表的网页，然后单击“应用样式”任务窗格中的“新建样式”按钮，在“新建样式”对话框的“定义位置”下拉菜单中，选择“当前网页”，在“选择器”中选择要定义的标记，同时在下面设置好各项参数，单击“确定”按钮，样式表就自动插入到网页中的<head></ head>标记之间，我们可以转换到“代码”视图模式进行查看。

八、插入层

单击“任务窗格→层”命令，将“层”任务窗格显示在右下方的面板中，然后在网页中，将光标移到要插入层的位置，单击“插入→HTML→层”命令或在“层”任务窗格中单击“插入层”按钮，就可以在网页中插入一个层。

也可以在“层”任务窗格中单击“绘制层”按钮，然后用鼠标在网页中拖动就可以画出一个层。

九、添加动态网页效果

为了使网页充满活力，富于变化和吸引力，我们往往需要给网页添加上一些声音、动画、弹出窗口、网页过渡效果等特效，在Expression Web中我们可以不用写一句代码，就能轻松实现这些特效。

1、添加交互式按钮

将光标移到要添加按钮的位置，单击“插入→交互式按钮”命令，打开“交互式按钮”对话框，进行如下设置：

在“按钮”选项卡的“按钮”列表中，单击选择按钮样式，在“文本”框中，输入要显示在按钮上的文本，单击“链接”旁边的“浏览”按钮，在打开的“编辑超链接”对话框中找到并单击希望链接到的文件、URL或电子邮件地址。

在“字体”选项卡上，可设置各种按钮状态下文本的字体、样式、对齐方式及颜色。

在“图像”选项卡上，可设置要创建的图像的大小以及是否创建对应于各种按钮状态的图像。

各种参数设置完毕，单击“确定”按钮，一个交互式按钮就会出现在网页中。

2、添加网页过渡效果

Expression Web可以通过动态HTML技术让网页之间的转换变成动态的，当用户浏览网站时，从一个网页切换到另一个网页将出现淡入、淡出、擦除等不同的效果。

向网页添加过渡效果的具体操作是：打开要添加过渡效果的网页，单击“格式→网页过渡”命令，打开“网页过渡”对话框，在“事件”下拉菜单中选择要应用效果的事件，在“持续时间”中输入过渡效果持续的时间，在“过渡效果”列表中单击所需的过渡效果类型，最后单击“确定”按钮。

3、向页面元素添加行为

我们可以对整个页面、图像、文字、链接或者页面中的一个或多个元素添加行为，具体操作如下：

首先单击“格式→行为”命令，在右下角的面板中打开“行为”任务窗格，然后在网页中选中要添加行为的网页元素，如文本或图形，在“行为”任务窗格中，单击“插入”按钮，弹出下拉菜单，单击所需的操作，弹出设置对话框，对于不同的操作，对话框的内容不同，设置完毕，单击“确定”按钮。若要选择不同的事件，请在“事件”之下，单击默认事件右边的下拉箭头，在弹出的菜单中选中所需的事件即可。