Soma: Expression Web 3

[原文发表地址] Expression Web 3 | Expression Web 3

随着网络在为全世界消费群体创造和提供用户体验和应用程序的过程中,发挥着越来越中心的作用, 为网页设计师提供一个符合现代网页标准的工具就显得十分的重要。

在今年早些时候的MIX’09,我们发布了Expression Web SuperPreview for Internet Explorer的预览版。这工具旨在帮助网页设计师检测网页布局在不同版本浏览器中是否存在问题。SuperPreview将作为Expression Web 3的一个功能,并且会提供对SuperPreview for Internet Explorer的免费下载。我们现在正在对Expression Web 3做发布之前的最后准备工作,在2009年的夏天你们就可以用上它了。

现在,让我们来快速浏览一下包含在Expression Web 3里面的新功能,其中就包括SuperPreview。

SuperPreview

SuperPreview是一个用来观察网页在不同的浏览器中的显示效果,并帮助检测发生显示异常的原因的工具软件。我们意识到客户有权选择他们喜欢的浏览器 – 网页设计师也同样如此。但是,同一个网页在不同浏览器中的渲染效果往往并不完全一致的。所以,测试网页在不同的浏览器中的显示效果,可以用来保证兼容性和设计的保真度,这是非常重要的。

SuperPreview可以显示一个网页在不同的浏览器中撞在后所看到的效果。包括IE6、IE7、IE8 和Firefox 3。你可以把网页并排放着看,或者可以覆盖着看,并且可以利用尺子,向导和缩放工具条来精确地定位网页布局的不同点。你甚至可以把页面覆盖在Photoshop图片上来验证该页面在视觉上跟原图接近与否。下面,你可以看到Firefox 3 和IE6所产生的非常小的渲染效果的区别是怎么影响到你的网页看上去的效果的。

clip_image002

自从我们在MIX’09宣布SuperPreview之后,我们又添加了很多新功能。现在你可以通过查看HTML的Document Object Model (DOM)来看到在每一个浏览器中你的页面。当你点击任何渲染中的视觉元素时,他们会在DOM中显示被选中。

clip_image004

当你选择一个HTML的元素,Expression Web也会显示一个小的提示。比如大小,到左边的距离以及到顶端的距离。当这些数值跟它们的设定值不一样的时候,这些不同会被突出显示。在下面这个例子里,左边距离、顶端距离和高度值由于有差异而用被红色的字体高亮显示。

clip_image006

你可能会经常想要在不同的分辨率下来预览你的网页,保证你的客户在每一种屏幕显示率下都得到同样好的用户体验。你可以选择目前的浏览器渲染分辨率,或者利用浏览器的size选项任意输入一个分辨率。

clip_image008

最后,如果你在开发一个ASP.NET或者PHP网页应用,你要预览一个ASPX或者PHP文件,SuperPreview会调用一个ASP.NET或者PHP来渲染网页。显示这个页面在不同的浏览器中应该具有的显示效果。

快照浏览

当你想用复杂的工具来验证你的网页在你想要的多个浏览器中的显示是否正确,SuperPreview是一个很有用的功能。然而,当你设计一个页面的时候,你也许想要快速的看一个你的页面在其它的浏览器中是怎么样子的。

快照预览是用来显示本地HTML,ASPX或者PHP页面的浏览器预览,并且实时修正你的脚本,这样无需加载到实际的浏览器来验证你的脚本修正辩护,可以节省时间和精力。

clip_image010

快照预览板可以拖动并固定在Expression Web 3的任何地方 – 你甚至可以让它浮动在你的第二显示器。在该预览板的左上角,你可以选择在快照浏览中渲染所要的浏览器。快照浏览可以基于你所选择的浏览器来保真地渲染显示。此功能运用了SuperPreview技术,使用了所选浏览器的真正的渲染引擎,所以渲染是完全精确的。

利用SFTP 或者 FTPS发布

我们承认网页是多样化的,所以网页设计师需要一个标准兼容的工具来支持尽可能多的发布标准。Expression Web 3支持利用WebDAV,FTP,SFTP,或者FTPS到多个目的地的网站,并且提供实时的发布进度状态。Expression Web 3也支持一个网站发布到多个目标以及多个渠道的文件传输来提高速度性能。

clip_image012

Photoshop PSD

有了Expression Web 3,当我们工作于Photoshop文件的时候,已经极大地提高了工作流和容量能力。当你输入一个PSD文件,你可以选择你想要输入的那个层到你的网页。在该层被存于Expression Web 3之前,你可以把该层以JPG、PNG或者GIF的形式存档,并且扩展该图像。如果源文件被改变,Expression Web 3会提示你去更新。

clip_image014

Silverlight 视频

Expression Web 3允许你快速编码和插入Silverlight视频到你的网页中,Expression Encoder 3提供不同标准的编码和转译功能。你甚至可以选择从不同的视频播放器皮肤(skins),来最好的配合你的网页图像. Expression Encoder 3支持高质量的VC-1和H.264 Silverlight视频流媒体。

clip_image016

其它在Expression Encoder 3中的提高和更新包括对于Team Foundation Server 源代码控制的支持,以及Deep Zoom Composer来制作任意大的缩放图像。

想得到更多信息, 请访问Expression Web Team Blog.

Namaste!