12.4 使用Microsoft Expression Web 2制作页面
Microsoft Expression Web 2是属于Microsoft Expression 2 Studio软件包中对ASP.NET开发人员来说最为强大的开发工具，Microsoft Expression Web 2不仅提供了基本的网页布局功能，还支持ASP.NET中控件的拖动。
12.4.1 创建ASPX页面
通过Microsoft Expression Web 2能够快速的创建ASPX页面。在菜单栏中单击【文件】选项，单击【新建】按钮，可以选择创建相应的项目。Microsoft Expression Web 2支持新建项目和新建网站，新建项目是为现有项目添加文件，也可以通过新建网站来新建另一个项目，在这里建立一个文件即可。单击【新建】按钮，系统会弹出对话框，用于创建新项目，如图12-27所示。
Microsoft Expression Web 2不仅支持创建ASPX页面，也能够创建母版页、XML、动态Web模板，甚至能够支持创建PHP页面。这里可以选择一个ASPX页面进行创建，单击确定，创建一个ASPX页面。创建ASPX页面后，在Microsoft Expression Web 2的工具箱中，就可以看到Microsoft Expression Web 2为开发人员提供了HTML控件和ASPX控件，如图12-28所示。
图12-27 新建文件
图12-28 HTML控件和ASP.NET控件
设计人员能够将页面布局进行设计，同时设计人员也能够拖动ASP.NET控件到页面布局中，这样就极大的方便了设计人员在前台界面的设计开发。而编程人员只需获取相应的页面，然后对页面进行逻辑代码的编写，即可组成一个完整的ASPX页面。Microsoft Expression Web 2不仅能够支持设计人员对现有的页面进行控件的拖放，还能够支持进行数据源配置和数据绑定，如图12-29所示。
图12-29 配置数据源
在可视化开发中，Microsoft Expression Web 2的效率比Visual Studio 2008较高，因为Microsoft Expression Web 2只负责页面布局，并负责配置相应的数据源和数据绑定，虽然 Microsoft Expression Web 2不能负责页面逻辑的开发，但是对于ASP.NET页面设计的支持已经非常强大了。
12.4.2 创建CSS层叠样式表
CSS层叠样式表是在网站设计和开发中必不可少的，通过Microsoft Expression Web 2同样能够创建和使用CSS层叠样式表，在菜单栏中找到并单击【文件】选项，在下拉菜单中单击【新建】选项，在弹出对话框中选择【CSS】选项，单击【确定】按钮就能够创建CSS层叠样式表。CSS文件能够对现有的页面进行样式控制，开发人员可以在CSS层叠样式表中编写样式控制代码，示例代码如下所示。
上述代码编写了body的样式，以及class=“div1”的样式。在相应的页面则能够通过此样式表对页面中的标签进行样式控制。在Microsoft Expression Web 2中，可以智能的添加CSS层叠样式表。单击菜单栏中的【格式】选项，选择【CSS样式】，在下拉菜单中选择【附加样式表】选项则会弹出附加对话框，单击【浏览】按钮选择相应的css文件即可，如图12-30所示。
图12-30 附加样式表
附加完成后，在页面的HTML代码中会自动增加CSS文件引用代码，示例代码如下所示。
上述代码就为页面中声明的外联式CSS样式表，当声明了相应的外联式样式文件后，该页面就能够使用外联式CSS样式表提供的样式进行样式控制。
12.4.3 创建框架集
包含框架的页面被称为框架集。框架集是一个单独的文件，用于定义页面上所有框架的布局和属性，包括框架数量、框架的大小和位置，以及最初显示在每个框架中的页面的。框架集通常用于后台页面的开发，也用于帮助文档的开发，例如MSDN中对函数的查询，就是使用了框架集。
框架集是一个单独的页面，框架集是对页面中所有的框架的布局，每个框架都是另一个页面，框架集只是负责将页面组织并呈现在同一个页面中。单击【新建】按钮，在弹出窗口中选择框架集，如图12-31所示。
框架集能够预览，相应的框架集为不同的页面进行布局，这里创建一个目录类型的框架集，创建完成后，框架集页面会智能提示用户所需填充的页面，通过填充页面，能够填充相应的框架，如图12-32所示。
图12-31 创建框架集
图12-32 填充框架集
单击设置初始网页可以选择框架集所需要的网页，但是网页必须存在，若网页不存在，则可以单击新建网页填充框架集。左侧的框架可以用于导航，右侧的框架可以用于目录的显示，编写完成后如图12-33所示。
图12-33 编写框架集
框架集创建后，框架集的页面HTML代码将自动生成，示例代码如下所示。
从上述代码可以看出，框架集就是将不同的页面呈现在同一页面的一种布局方法，上述代码中包括两个框架，这两个框架的页面分别为“无标题_3.aspx”和“无标题_2.html”。
注意：在使用框架集时，框架都包括name属性，这个属性在进行超链接时非常有用，通过编写超链接的target属性，能够指定相应的框架中的连接将能够对目标框架的页面进行更改。
12.4.1 创建ASPX页面
通过Microsoft Expression Web 2能够快速的创建ASPX页面。在菜单栏中单击【文件】选项，单击【新建】按钮，可以选择创建相应的项目。Microsoft Expression Web 2支持新建项目和新建网站，新建项目是为现有项目添加文件，也可以通过新建网站来新建另一个项目，在这里建立一个文件即可。单击【新建】按钮，系统会弹出对话框，用于创建新项目，如图12-27所示。
Microsoft Expression Web 2不仅支持创建ASPX页面，也能够创建母版页、XML、动态Web模板，甚至能够支持创建PHP页面。这里可以选择一个ASPX页面进行创建，单击确定，创建一个ASPX页面。创建ASPX页面后，在Microsoft Expression Web 2的工具箱中，就可以看到Microsoft Expression Web 2为开发人员提供了HTML控件和ASPX控件，如图12-28所示。
图12-27 新建文件
图12-28 HTML控件和ASP.NET控件
设计人员能够将页面布局进行设计，同时设计人员也能够拖动ASP.NET控件到页面布局中，这样就极大的方便了设计人员在前台界面的设计开发。而编程人员只需获取相应的页面，然后对页面进行逻辑代码的编写，即可组成一个完整的ASPX页面。Microsoft Expression Web 2不仅能够支持设计人员对现有的页面进行控件的拖放，还能够支持进行数据源配置和数据绑定，如图12-29所示。
图12-29 配置数据源
在可视化开发中，Microsoft Expression Web 2的效率比Visual Studio 2008较高，因为Microsoft Expression Web 2只负责页面布局，并负责配置相应的数据源和数据绑定，虽然 Microsoft Expression Web 2不能负责页面逻辑的开发，但是对于ASP.NET页面设计的支持已经非常强大了。
12.4.2 创建CSS层叠样式表
CSS层叠样式表是在网站设计和开发中必不可少的，通过Microsoft Expression Web 2同样能够创建和使用CSS层叠样式表，在菜单栏中找到并单击【文件】选项，在下拉菜单中单击【新建】选项，在弹出对话框中选择【CSS】选项，单击【确定】按钮就能够创建CSS层叠样式表。CSS文件能够对现有的页面进行样式控制，开发人员可以在CSS层叠样式表中编写样式控制代码，示例代码如下所示。
+展开
-CSS
body
{
background:silver;
font-size:12px;
}
.div1
{
background-color:white;
padding:10px 10px 10px;
font-size:16px;
font-weight:bolder;
}
{
background:silver;
font-size:12px;
}
.div1
{
background-color:white;
padding:10px 10px 10px;
font-size:16px;
font-weight:bolder;
}
上述代码编写了body的样式，以及class=“div1”的样式。在相应的页面则能够通过此样式表对页面中的标签进行样式控制。在Microsoft Expression Web 2中，可以智能的添加CSS层叠样式表。单击菜单栏中的【格式】选项，选择【CSS样式】，在下拉菜单中选择【附加样式表】选项则会弹出附加对话框，单击【浏览】按钮选择相应的css文件即可，如图12-30所示。
图12-30 附加样式表
附加完成后，在页面的HTML代码中会自动增加CSS文件引用代码，示例代码如下所示。
+展开
-HTML
<link href="css.css" rel="stylesheet" type="text/css" />
上述代码就为页面中声明的外联式CSS样式表，当声明了相应的外联式样式文件后，该页面就能够使用外联式CSS样式表提供的样式进行样式控制。
12.4.3 创建框架集
包含框架的页面被称为框架集。框架集是一个单独的文件，用于定义页面上所有框架的布局和属性，包括框架数量、框架的大小和位置，以及最初显示在每个框架中的页面的。框架集通常用于后台页面的开发，也用于帮助文档的开发，例如MSDN中对函数的查询，就是使用了框架集。
框架集是一个单独的页面，框架集是对页面中所有的框架的布局，每个框架都是另一个页面，框架集只是负责将页面组织并呈现在同一个页面中。单击【新建】按钮，在弹出窗口中选择框架集，如图12-31所示。
框架集能够预览，相应的框架集为不同的页面进行布局，这里创建一个目录类型的框架集，创建完成后，框架集页面会智能提示用户所需填充的页面，通过填充页面，能够填充相应的框架，如图12-32所示。
图12-31 创建框架集
图12-32 填充框架集
单击设置初始网页可以选择框架集所需要的网页，但是网页必须存在，若网页不存在，则可以单击新建网页填充框架集。左侧的框架可以用于导航，右侧的框架可以用于目录的显示，编写完成后如图12-33所示。
图12-33 编写框架集
框架集创建后，框架集的页面HTML代码将自动生成，示例代码如下所示。
+展开
-HTML
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>无标题 1</title>
</head>
<frameset cols="150,*">
<frame name="contents" src="无标题_3.aspx" target="main">
<frame name="main" src="无标题_2.html">
<noframes>
<body>
<p>此网页使用了框架，但您的浏览器不支持框架。</p>
</body>
</noframes>
</frameset>
</html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>无标题 1</title>
</head>
<frameset cols="150,*">
<frame name="contents" src="无标题_3.aspx" target="main">
<frame name="main" src="无标题_2.html">
<noframes>
<body>
<p>此网页使用了框架，但您的浏览器不支持框架。</p>
</body>
</noframes>
</frameset>
</html>
从上述代码可以看出，框架集就是将不同的页面呈现在同一页面的一种布局方法，上述代码中包括两个框架，这两个框架的页面分别为“无标题_3.aspx”和“无标题_2.html”。
注意：在使用框架集时，框架都包括name属性，这个属性在进行超链接时非常有用，通过编写超链接的target属性，能够指定相应的框架中的连接将能够对目标框架的页面进行更改。
加支付宝好友偷能量挖...
