_1.18 在_{Microsoft Expression Web Designer}中使用_CSS

     Using CSS in Microsoft Expression Web Designer

问题

用Microsoft Expression Web Designer设计页面并充分利用其CSS特性。

方法

和Dreamweaver一样，Microsoft Expression Web Designer允许您添加外部样式表，新建样式表，在HTML页面中加入样式，如图1-45~1-47所示。下面是添加CSS的一些方法：

l   点击Microsoft Expression Web Designer 的应用样式任务面板上的粘贴样式表按钮，导入外部样式表。

l   点击新建文档图标，然后点击CSS按钮新建一个空白的CSS文档。

l   用编辑word文档的方式编辑网页，Microsoft Expression Web Designer会自动添加内部样式。

l   在代码视图中键入样式。

图1-45：在Microsoft Expression Web Designer使用Apply Styles任务面板添加外部样式表

图1-46：在Microsoft Expression Web Designer中创建新的CSS文件

图1-47：在Microsoft Expression Web Designer使用Manage Styles任务面板管理样式

讨论

Microsoft Expression Web Designer对CSS的支持全面地超越了它的前身——FrontPage。向网页中添加样式后，打开Manage Styles任务面板可以查看当前样式列表，还可以从外部CSS切换到内部CSS样式，反之亦然。

假如您用格式工具栏在HTML页面内容中加入样式，应用程序会自动加入内联样式表。当您为选定的文本字选择字体或颜色时，Expression Web Designer会创建一个内部样式表代替使用<font>标签。在FrontPage中，代码如下所示：

<font face="georgia, times new roman, serif" color="#ff0000"

size="2">This is text.</font>

假如您改动了FrontPage中的代码，应用程序会自动把代码量加倍，如下所示：

<font face="georgia, times new roman, serif" color="#ff0000"

size="2"><font face="times new roman, serif">This is text.</font></font>

这会使IE之外的浏览器无法正确地渲染页面，导致代码冗余页面臃肿。Expression Web Designer则不存在图1-48中的代码自动加倍的问题。此外，可以按顺序或类型将样式分类以便于查看。

图1-48：给文本添加样式时，Expression Web Designer自动会创建内部样式

其他

Microsoft Expression Web Designer 之CSS旅程见网址：http://www.microsoft.com/products/ expression/en/Web_ designer/demos.mspx。