子任务2：页面顶部和底部设计（ Web服务器控件实现）对于页面顶部控件WebUserControl.ascx和页面底部控件WebUserControl2.ascx，添加 Web服务器控件来实现设计效果。
（1）启动Visual Studio2008，打开网站文件Website1。
（2）单击“添加新项”按钮，在弹出的窗口中选择“Web用户控件”，然后单击“添加”按钮即可为当前网站文件添加一个用户自定义控件，该控件的名称为：WebUserControl.ascx。
（3）在控件添加完成后，系统自动打开该控件的设计窗口，有“设计”模式和“源”模式两种模式可供开发人员使用。
（4）切换到“设计”模式，为WebUserControl添加一个Table控件，在属性窗口设置Rows属性值，如图2-30所示。
图2-30 Table控件的属性窗口（5）在打开的“TableRow集合编辑器”窗口为Table添加1个TableRow，如图2-31所示。
图2-31 “TableRow集合编辑器”窗口图2-32 “TableCell集合编辑器”窗口（6）再单击Cells，在打开的“TableCell集合编辑器”窗口为TableRow添加2个TableCell，如图2-32所示。
（7）然后切换到“源”模式，编写代码，为每一个TableCell分别添加一个Image控件，设置其属性，相关代码如下。
<asp:Table ID="Table1" runat="server" BackColor="White" GridLines="Horizontal"Height="264px" style="text-align: center" Width="1220px"><asp:TableRow runat="server"><asp:TableCell runat="server" Width ="200px"><asp:Image ID ="Image1" runat ="server" ImageUrl="~/img/104.jpg"ImageAlign ="Left" /></asp:TableCell><asp:TableCell runat="server"><asp:Image ID ="Image2" runat ="server" ImageUrl="~/img/头部.jpg"ImageAlign ="Left" /></asp:TableCell></asp:TableRow></asp:Table>（8）切换到“设计”模式，为WebUserControl2再添加一个Table控件，并设置其为1个TableRow，6个TableCell。
（9）切换到“源”模式，编写代码，为每一个TableCell分别添加一个HyperLink 超链接控件，相关代码如下：<asp:Table ID="Table2" runat="server" GridLines="Horizontal"style="text-align: center; margin-left: 0px" Width="1220px"><asp:TableRow runat="server"><asp:TableCell runat="server"><asp:HyperLink ID ="HyperLink1" runat ="server" Text ="首页" NavigateUrl ="" ></asp:HyperLink></asp:TableCell><asp:TableCell runat="server"><asp:HyperLink ID ="HyperLink2" runat ="server" Text ="用户管理"NavigateUrl ="" ></asp:HyperLink></asp:TableCell><asp:TableCell runat="server"><asp:HyperLink ID ="HyperLink3" runat ="server" Text ="修改密码"NavigateUrl ="" ></asp:HyperLink></asp:TableCell><asp:TableCell runat="server"><asp:HyperLink ID ="HyperLink4" runat ="server" Text ="个人信息调查"NavigateUrl ="" ></asp:HyperLink></asp:TableCell><asp:TableCell runat="server"><asp:HyperLink ID ="HyperLink5" runat ="server" Text ="学生信息查询"NavigateUrl ="" ></asp:HyperLink></asp:TableCell><asp:TableCell runat="server"><asp:HyperLink ID ="HyperLink6" runat ="server" Text ="关于我们"NavigateUrl ="" ></asp:HyperLink></asp:TableCell></asp:TableRow></asp:Table>（10）页面顶部的设计效果如图2-33所示。
图2-33 页面顶部WebUserControl设计效果图（11）单击“添加新项”按钮，添加一个Web用户控件WebUserControl2.ascx，进行页面底部的设计。
（12）切换到“设计”模式，为WebUserControl2添加一个Table控件，在属性窗口设置Rows属性值，设置该Table控件为3个TableRow，如图2-34所示。
图2-34 “TableRow集合编辑器”窗口图2-35 “TableCell集合编辑器”窗口（13）再单击Cells，在打开的“TableCell集合编辑器”窗口分别为每一个TableRow添加一个TableCell，并设置Text属性，如图2-35所示。
（14）然后切换到“源”模式，查看相关代码如下：<%@ Control Language="C#" AutoEventWireup="true"CodeFile="WebUserControl2.ascx.cs" Inherits="WebUserControl2" %> <asp:Table ID="Table1" runat="server" BackColor="#E1E1E1" BorderStyle="Solid" GridLines="Horizontal" Height="123px" style="text-align: center"Width="1293px"><asp:TableRow runat="server"><asp:TableCell runat="server">版权所有：陕西工业职业技术学院</asp:TableCell></asp:TableRow><asp:TableRow runat="server"><asp:TableCell >联系方式：陕西省咸阳市文汇西路12号</asp:TableCell></asp:TableRow><asp:TableRow runat="server" BorderColor="#003366" BorderStyle="Solid"><asp:TableCell >邮政编码：712000 电话：029-333221541</asp:TableCell></asp:TableRow></asp:Table>（15）仔细阅读这段代码，可以看出， Web服务器控件Table由若干个行TableRow组成，每一个行TableRow又由若干个列TableCell组成，读者在开发过程中，可以根据需要自行添加行和列。
请区分HTML代码和代码的区别。
（16）设计效果如图2-36所示。
图2-36 用户自定义控件WebUserControl2设计效果图至此，网站文件中需要用到的页面顶部和页面底部文件就分别开发完成，在后面的页面设计与开发过程中，只需要像添加控件一样，将这两个用户自定义控件拖放至页面合适位置即可。