1、使用 Image 控件、ImageButton 控件、HyperLink 控件和 ImageMap 控件制作一个ASP.NET 网站。用户访问网站时首先打开图 6-5 所示的站点缺省主页 Default.aspx。页面中包含有一个用于页面布局的 HTML 表格,用于显示站点标题图片和分隔线图片的 2 个 Image 控件,用于构成导航栏的 6 个 ImageButton 控件和用于创建超链接的 5 个 HyperLink 控件。用户在页面中单击相应的 ImageButton 或 HyperLink 将被导航到指定的 URL。ImageButton 控件Image 控件HyperLink 控件I
2、mage 控件图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 等图像软件制作的标题图片、按钮图片和
3、分隔线图片复制到站点所在的文件夹中,通常需要在站点文件夹内创建一个名为“images”的子文件夹,然后将页面中需要的图片文件复制到其中。选择 Image1 控件,在属性窗口中单击 ImageUrl 栏右侧的 按钮,打开图 6-7 所示的对话框。选择了需要的添加到控件中的图像文件后,单击【确定】按钮。如果在“选择图像”对话框中看不到 images 文件夹和其中的图片文件,可在“解决方案资源管理器”中右键单击项目名称,在弹出的快捷菜单中执行“刷新文件夹”命令。选择 Image2 控件,参照上面介绍的方法设置其 ImageUrl 属性,同时需要将 Image2的 Height(高)属性设置为“2px
4、” 。对于 6 个 ImageButton(ImageButton1ImageButton6)控件,不但要设置其 ImageUrl属性,还需要设置其 PostBackUrl 属性,以便当用户单击控件时可以将页面导航到指定的URL。页面的 Title(标题)属性和 5 个 HyperLink 的初始属性在页面的装入(Page_Load )事件中通过代码进行设置。(3) 向站点中添加网页在“解决方案资源管理器”中,右键单击项目名称如本例的“D:lt6-1 ”,在弹出的快捷菜单中执行“添加新项”命令,在打开的对话框中选择“Web 窗体” ,并指定网页名称后单击【添加】按钮。本例中需要为两个文本教程创
5、建两个新页面,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.c
6、s文件同样复制一份,并改名为 computer.aspx.cs) 。然后将栏目标题改为 “微型计算机硬件组成”并向页面中添加一个 ImageMap 控件。图6-9 computer.aspx页面设计在设置 ImageMap 控件的属性前,应将需要显示到控件中的图片文件(如本例的computer.jpg)复制到站点文件夹的 images 子文件夹中。在设计视图中选中 ImageMap 控件,在属性窗口中单击 ImageUrl 栏右侧的 按钮,在打开的“选择图像”对话框中选择需要的图片文件名。若需要的图片未出现在文件列表中,可在解决方案资源管理器中,右键单击images 文件,在弹出的快捷菜单中执
7、行“刷新文件夹”命令。设置完毕的 computer.aspx 页面如图 6-10 所示。图6-8 mac.aspx页面图6-10 添加图片后的页面效果(5) 设置 ImageMap 控件的 HotSpots 属性ImageMap 控件的 HotSpots 属性描述了控件中作用点的集合。在设计视图中选中ImageMap 控件,在属性窗口中单击 HotSpots 栏右侧的右侧的 按钮,打开“HotSpots 集合编辑器”对话框,单击【添加】按钮向其中添加一个圆形作用点和一个矩形作用点。将圆形作用点的 X、Y、R 属性值分别设置为 150,70 和 50;将矩形作用点的Bottom、 Left、 R
8、ight、Top 属性值分别设置为 130、265、210 和 10。分别将圆形作用点和矩形作用点的 NavigiteUrl 属性指向事先通过 FrontPage 等工具制作完成的静态网页,display.htm 和 host.htm。为了能使目标网页能在新窗口中打开,应将作用点的 Target 属性设置为“ _blank”。这样,页面打开时,若用户将鼠标指针移动到了作用点区域,指针将变成表示超链接的“手形”标记,单击鼠标页面将被导航到指定页面,如图 6-11 所示。图6-11 单击作用点区域打开新的网页(6) 编写事件代码Default.aspx 页面被装入时执行的事件代码如下:protec
9、ted void Page_Load(object sender, EventArgs e)this.Title = “欢迎访问网上课堂 “;HyperLink1.Text =“怎样设置和使用 Foxmail“;HyperLink1.NavigateUrl = “rtsp:/192.168.0.100:45/rm/01.rm“;HyperLink2.Text =“如何安装杀毒软件“;HyperLink2.NavigateUrl = “rtsp:/192.168.0.100:554/rm/02.rm“;HyperLink3.Text =“更新 Windows 操作系统“;HyperLink3.N
10、avigateUrl = “rtsp:/192.168.0.100:554/rm/03.rm“;HyperLink4.Text = “如何查看网卡的 MAC 地址“;HyperLink4.NavigateUrl = “mac.aspx“;HyperLink4.Target = “_new“;HyperLink5.Text = “微型计算机的组成“;HyperLink5.NavigateUrl = “computer.aspx“;computer.aspx 页面被装入时执行的事件代码如下:protected void Page_Load(object sender, EventArgs e)this.Title = “微型计算机硬件组成 “; /设置页面标题