【IT168 实用技巧】微软全新网页制作工具Microsoft Expression Web近日悄然放出了中文试用版，它涵盖了最终产品的全部功能（注：将在安装 60 天后到期）。就目前国内专网页设计工具而言，Adobe旗下的著名网页制作工具Dreamweaver占据着绝大部分市场。作为FrontPage的继任者，Expression Web在功能及可扩展性方面都有很大提升，能否成为微软克敌制胜的杀手锏，我们拭目以待吧！

相关精彩文章

挑战Adobe 微软推出Expression Web
Expression:微软图形设计三剑客　

    Expression Web现在已经解决了过去FrontPage会产生不标准网页代码的缺点，默认支持创建CSS标准、XHTML 1.0规范的网站；支持最新CSS标准的格式与层；可以快速创建与格式化、显示使用工业标准的XML数据；支持ASP.NET 2.0转换站点为动态交互式的Web程序的功能。高效的协助网站开发人员设计、开发出符合网页标准化规范的网站。
   
    一、程序安装

    Expression Web也是微软针对Vista操作系统而推出的新产品之一，Expression Web采用了与Vista统一的界面设计，无论是安装程序、 还是程序主界面，都是Vista化的，这点Vista系统用户可以很好的体会到。当然，目前XP操作系统仍然是主流，XP用户安装程序不会有任何问题，只需要注意一点：程序需要 Microsoft .NET Framework 2.0的支持。
    一开始进入安装程序，系统就会提示输入产品密匙。没错，就算是试用版本，依然需要确认产品密匙，如图1。

图1(点击看大图)

     当然，微软也没有特别难为大家的意思，官方提供了一个获取激活密匙的网页，大家可以去这里申请。
    接下来选择安装方式，漂亮的Vista界面相当舒服，默认将程序安装在系统盘，建议大家选择“自定义”安装类型，如图2。

图2(点击看大图)

    安装选项设置是完全Office化的，看来以后Expression Web成为Office标准组件只是时间问题，如图3。

图3(点击看大图)

    接下来就是复制安装文件了，由于Expression Web安装程序比较大，约352M，感觉整个耗时较长。

    二、软件功能初窥

    Expression Web的界面设计延续微软一贯风格，各种常用工具在主界面中均能找得到，用户上手起来非常容易，如图4。

图4(点击看大图)

    软件带给笔者的第一印象是对于CSS的支持大大加强，默认窗口布局中就包含“CSS属性”、“应用样式”等任务窗格，CSS标准的应用渗透进软件方方面面。例如：基本的文字排版操作，看起来同以往没什么不同，但一切都变得CSS化了。实现的效果方面，已经同Dreamweaver基本相当，现在使用Expression Web也能轻松完成复杂的CSS+DIV页面布局，如图5。

图5(点击看大图)

    三、简单CSS应用实例

    Expression Web中CSS已经成为核心功能之一，下面我们开始一个简单的CSS应用。点击菜单“文件”→“新建”，调用新建对话框，如图6。

图6

    程序支持的新建网页类型相当多，其中包含现成的CSS布局，也就是说，建立一个CSS布局网页，你甚至不需要写一句代码就能完成初步工作，大家根据说明需要选择一个即可，如图7。

图7(点击看大图)

    现在一个最基本的CSS布局页面就建立好了，你只需要填入内容即可。可以看到点选目标后，程序提供实时高亮标记提示(本例：div#masthead.style1)，通过选择相关标记，可以快速选择网页对象，如图8。

图8

    键入文字后，可以通过工具栏按钮快速调节字体、字号、颜色等参数，同Word中操作完全一样。众所周知，Word也能生成网页文件的，上述简单操作，使用Expression Web同Word有什么不同呢？

    当然区别很大，看似相同的效果，用Expression Web生成的代码是百分百符合网页标准规范的。程序默认主窗口中有个相当重要的任务窗格：“CSS属性”，可以看到通过工具栏做的文字修改，均是通过CSS定义实现的。你完全也可以在这里做文字定义，只不过在“CSS属性”中提供了更多的参数供设置，如图9。

图9(点击看大图)

    CSS相关的参数非常多，初学者面对繁杂的参数往往不知所措，这里笔者建议大家通过“应用样式”任务窗格来实现修改的目的。

    下面我们来给导航栏增加背景，选择“应用样式”窗格中的样式：#masthead(即导航栏应用的CSS)，点击右侧三角图标，在弹出菜单中选择“修改样式”，如图10。

图10

    进入“修改样式”对话框，这里许多人都会感觉眼熟，没错，同Dreamweaver中的CSS编辑器几乎一样。选择类别“背景”，设置“background-color”值，支持调用调色板选择颜色。这里程序提供了实时效果预览及说明，非常便于大家提高对于CSS语法的认识，如图11。

图11(点击看大图)

    设置完成返回，可以看到导航栏背景颜色已经变为指定颜色了。

    四、图片工具简介

    现在网页设计中，图片的应用越来越广泛，Expression Web图片功能已经变得相当全面。这些多元、丰富的辅助工具，可以大大提升我们设计网页的效率。

    点击菜单“插入”→“图片”→“来自文件”，插入指定图片。接下来点击“视图”→“工具栏”→“图片”，调用图片工具栏，可以看到这是一个功能选项非常多的工具栏，下面我来简单介绍一下，如图12。

图12(点击看大图)

    修改图片尺寸：插入图片的尺寸过大，不要着急，程序提供了两套解决方案。

    1.重新取样：选定图片后，拖动边距控点缩小图片尺寸为所需，松开鼠标后，可以看到图片右下角多了一个小图标，点击该图标，在弹出菜单中选择“重新对图片取样以匹配大小”，如图13。

图13

    2.裁剪图片，点击工具栏裁剪按钮，图片上出现裁剪控制点，调节范围为所需即可，如图14。

图14

    自动缩略图

    插入的图片很大，即想保留原貌，又不想破坏网页排版，使用缩略图点击放大的方式是非常好的选择。依然正常插入图片，然后点击工具栏上的“自动缩略图”按钮，呵呵，缩略图点击放大的效果就这样完成了，如图15。

图15

    图片工具栏的功能还有很多，例如：图片旋转，调节对比度、亮度，设置图片透明，添加图片凹凸特效，灰度、冲蚀特效，添加图像热点等功能，大家都可以亲自尝试一下。

    五、总结

    Expression Web作为FrontPage的继任者，不愧为微软网页设计的拳头产品。FrontPage饱受诟病的一些问题，在Expression Web中已经得到很好解决。不过，软件目前在整体功能、易用性方面，距离业界领先者还有很大一段距离。

    目前网页设计软件市场，Dreamweaver可谓拥有绝对优势，无论是软件功能、易用性以及用户使用习惯、忠诚度方面，都是其它软件无法比拟的。短期看来，Expression Web应该可以很好的接替FrontPage，巩固微软原有的市场份额。大量的专业网页开发者，暂时还不会轻易转换开发平台，这样的情况同图像处理工具中Photoshop一枝独秀的情况类似。

    当然，微软也不是没有杀手锏的，据悉Expression Web正式版的上市定价将大大低于Dreamweaver，加上对于Vista平台的完美支持，未来在网页设计开发市场，微软Expression Web将大有可为。

软件名称	Microsoft Expression Web
软件大小	352MB
软件分类	网页制作
授权方式	免费
应用平台	Windows 2000/XP/2003
软件作者	微软
高速下载地址