Web用户自定义控件的开发

子任务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控件，设置其属性，相关代码如下。

Height="264px" style="text-align: center" Width="1220px">

ImageAlign ="Left" />

ImageAlign ="Left" />

（8）切换到“设计”模式，为WebUserControl2再添加一个Table控件，并设置其为1个TableRow，6个TableCell。

（9）切换到“源”模式，编写代码，为每一个TableCell分别添加一个HyperLink 超链接控件，相关代码如下：

style="text-align: center; margin-left: 0px" Width="1220px">

NavigateUrl ="" >

NavigateUrl ="" >

NavigateUrl ="" >

NavigateUrl ="" >

NavigateUrl ="" >

（10）页面顶部的设计效果如图2-33所示。

图2-33 页面顶部WebUserControl设计效果图

（11）单击“添加新项”按钮，添加一个Web用户控件WebUserControl2.ascx，进行页面底部的设计。

（12）切换到“设计”模式，为WebUserControl2添加一个Table控件，在属性窗口设置Rows属性值，设置该Table控件为3个TableRow，如图2-34所示。