使用Image控件.docVIP

使用Image控件、ImageButton控件、HyperLink控件和ImageMap控件制作一个ASP.NET网站。 用户访问网站时首先打开图6-5所示的站点缺省主页Default.aspx。页面中包含有一个用于页面布局的HTML表格，用于显示站点标题图片和分隔线图片的2个Image控件，用于构成导航栏的6个ImageButton控件和用于创建超链接的5个HyperLink控件。用户在页面中单击相应的ImageButton或HyperLink将被导航到指定的URL。 图6-5 站点缺省主页 程序设计步骤如下： 1 设计Default.aspx页面 新建一个ASP.NET网站，向缺省主页Default.aspx中添加有关用于页面布局的HTML表格，按需要调整表格的行列数及各行列的宽、高。 按图6-6所示，依次向表格中添加需要的Image控件、ImageButton控件和HyperLink控件相应的说明文字。 图6-6 设计Default.aspx页面 图6-7 设置Image控件的ImageUrl属性 2 设置Default.aspx中各控件的属性 首先将事先使用Photoshop等图像软件制作的标题图片、按钮图片和分隔线图片复制到站点所在的文件夹中，通常需要在站点文件夹内创建一个名为“images”的子文件夹，然后将页面中需要的图片文件复制到其中。 选择Image1控件，在属性窗口中单击ImageUrl栏右侧的按钮，打开图6-7所示的对话框。选择了需要的添加到控件中的图像文件后，单击【确定】按钮。如果在“选择图像”对话框中看不到images文件夹和其中的图片文件，可在“解决方案资源管理器”中右键单击项目名称，在弹出的快捷菜单中执行“刷新文件夹”命令。 选择Image2控件，参照上面介绍的方法设置其ImageUrl属性，同时需要将Image2的Height（高）属性设置为“2px”。 图6-8 mac.aspx页面 对于6个ImageButton（ImageButton1～ImageButton6）控件，不但要设置其ImageUrl属性，还需要设置其PostBackUrl属性，以便当用户单击控件时可以将页面导航到指定的URL。 页面的Title（标题）属性和5个HyperLink的初始属性在页面的装入（Page_Load）事件中通过代码进行设置。 3 向站点中添加网页 在“解决方案资源管理器”中，右键单击项目名称如本例的“D:\asp.net\lt6-1\”，在弹出的快捷菜单中执行“添加新项”命令，在打开的对话框中选择“Web窗体”，并指定网页名称后单击【添加】按钮。本例中需要为两个文本教程创建两个新页面，mac.aspx和computer.aspx。 其中mac.aspx由一些文字和一个Image控件组成，页面打开时如图6-8所示。由于mac.aspx页面中不包含动态内容，也无需编写任何程序代码，故该页面完全可以使用FrontPage等将其设计为静态网页（.htm），以减少服务器无谓的资源开销。 4 向ImageMap控件中添加图片 对于computer.aspx页面可按图6-9所示进行设计。在实际操作时可将前面设计完成的default.aspx复制一份，名称改为computer.aspx。（注意，应将包含原代码的default.aspx.cs文件同样复制一份，并改名为computer.aspx.cs）。然后将栏目标题改为“微型计算机硬件组成”并向页面中添加一个ImageMap控件。 图6-9 computer.aspx页面设计 在设置ImageMap控件的属性前，应将需要显示到控件中的图片文件（如本例的computer.jpg）复制到站点文件夹的images子文件夹中。在设计视图中选中ImageMap控件，在属性窗口中单击ImageUrl栏右侧的按钮，在打开的“选择图像”对话框中选择需要的图片文件名。若需要的图片未出现在文件列表中，可在解决方案资源管理器中，右键单击images文件，在弹出的快捷菜单中执行“刷新文件夹”命令。设置完毕的computer.aspx页面如图6-10所示。 图6-10 添加图片后的页面效果 5 设置ImageMap控件的HotSpots属性 ImageMap控件的HotSpots属性描述了控件中作用点的集合。在设计视图中选中ImageMap控件，在属性窗口中单击HotSpots栏右侧的右侧的按钮，打开“HotSpots集合编辑器”对话框，单击【添加】按钮向其中添加一个圆形作用点和一个矩形作用点。将圆形作用点的X、Y、R属性值分别设置为150，70和50；将矩形作用点的Bottom、Left、Right、Top属性值分别设置为130、265、210和10。 分别将圆