2024年3月14日发(作者：)

使用Image控件、ImageButton控件、HyperLink控件和ImageMap控件制作一个

网站。

用户访问网站时首先打开图6-5所示的站点缺省主页。页面中包含有一个

用于页面布局的HTML表格，用于显示站点标题图片和分隔线图片的2个Image控件，用

于构成导航栏的6个ImageButton控件和用于创建超链接的5个HyperLink控件。用户在页

面中单击相应的ImageButton或HyperLink将被导航到指定的URL。

Image控件

Image控件

HyperLink控件

ImageButton控件

图6-5 站点缺省主页

程序设计步骤如下：

(1) 设计页面

新建一个网站，向缺省主页中添加有关用于页面布局的HTML

表格，按需要调整表格的行列数及各行列的宽、高。

按图6-6所示，依次向表格中添加需要的Image控件、ImageButton控件和HyperLink

控件相应的说明文字。

图6-6 设计页面 图6-7 设置Image控件的ImageUrl属性

(2) 设置中各控件的属性

首先将事先使用Photoshop等图像软件制作的标题图片、按钮图片和分隔线图片复制到

站点所在的文件夹中，通常需要在站点文件夹内创建一个名为“images”的子文件夹，然后

将页面中需要的图片文件复制到其中。

选择Image1控件，在属性窗口中单击ImageUrl栏右侧的按钮，打开图6-7所示的对

话框。选择了需要的添加到控件中的图像文件后，单击【确定】按钮。如果在“选择图像”

对话框中看不到images文件夹和其中的图片文件，可在“解决方案资源管理器”中右键单

击项目名称，在弹出的快捷菜单中执行“刷新文件夹”命令。

选择Image2控件，参照上面介绍的方法设置其ImageUrl属性，同时需要将Image2的

Height（高）属性设置为“2px”。

对于6个ImageButton（ImageButton1～ImageButton6）控件，不但要设置其ImageUrl

属性，还需要设置其PostBackUrl属性，以便

当用户单击控件时可以将页面导航到指定的

URL。

页面的Title（标题）属性和5个

HyperLink的初始属性在页面的装入

（Page_Load）事件中通过代码进行设置。

(3) 向站点中添加网页

在“解决方案资源管理器”中，右键单

击项目名称如本例的“D:6-1”，在

弹出的快捷菜单中执行“添加新项”命令，

在打开的对话框中选择“Web窗体”，并指定

网页名称后单击【添加】按钮。本例中需要

为两个文本教程创建两个新页面，

和。

图6-8 页面

其中由一些文字和一个Image

控件组成，页面打开时如图6-8所示。由于

页面中不包含动态内容，也无需编写任何程序代码，故该页面完全可以使用

FrontPage等将其设计为静态网页（.htm），以减少服务器无谓的资源开销。

(4) 向ImageMap控件中添加图片

对于页面可按图6-9所示进行设计。在实际操作时可将前面设计完成的

复制一份，名称改为。（注意，应将包含原代码的

文件同样复制一份，并改名为）。然后将栏目标题改为“微型计算机硬件组

成”并向页面中添加一个ImageMap控件。

图6-9 页面设计

在设置ImageMap控件的属性前，应将需要显示到控件中的图片文件（如本例的

）复制到站点文件夹的images子文件夹中。在设计视图中选中ImageMap控件，

在属性窗口中单击ImageUrl栏右侧的按钮，在打开的“选择图像”对话框中选择需要的

图片文件名。若需要的图片未出现在文件列表中，可在解决方案资源管理器中，右键单击

images文件，在弹出的快捷菜单中执行“刷新文件夹”命令。设置完毕的页

面如图6-10所示。

图6-10 添加图片后的页面效果

(5) 设置ImageMap控件的HotSpots属性

ImageMap控件的HotSpots属性描述了控件中作用点的集合。在设计视图中选中