Web程序设计实验指导书.doc

《Web程序设计》 实验指导书 (适合计算机科学与技术专业)目 录 实验概述 1 实验项目一 运用XHTML标记进行网页设计 5 实验项目二 运用ASP.NET内置对象完成Web程序设计（一） 7 实验项目三 运用ASP.NET内置对象完成Web程序设计（二） 10 实验项目四 运用服务器控件完成页面设计 12 实验项目五 采用页面切换与导航技术完成网页设计 14 实验项目七 使用Ado.net进行数据库程序设计（二） 17 实验项目八 熟悉与运用ASP.NET AJAX基本控件 18 实验项目九 Web综合程序设计 19 实验概述 一、课程实验概况 学习Web程序设计课程的目的是能够开发基于Web的应用软件，是在了解Web程序基本原理和技术的基础上，进行Web程序的编程能力学习和训练，要熟练地掌握Web程序设计的全过程，包括：开发环境的构建、开发工具的使用、独立编写程序、各种调试技术、程序运行结果分析。 上机实验的目的，不仅仅是为了验证教材和讲课的内容，或者验证自己所编写的程序的正确与否。Web程序设计课程上机实验的目的是： 1．加深对讲授内容的理解，尤其是各种Web技术的应用。 2．熟练掌握常用的开发工具。 3．学会上机调试程序。通过上机练习掌握根据出错信息判断错误位置和错误原因，掌握各种调试技术的灵活应用。 4．掌握根据功能要求进行程序分析和设计的能力。 二、实验前的准备工作 1．所用的。2．复习和掌握与实验有关的教学内容。 3．准备好上机所需的程序，切忌不或抄别人的程序去上机。 4．对程序中出现的问题应事先估计，对程序中自己有疑问的地方应先作上，以便上机时给予注意。 5．准备好调试程序和运行程序所需的数据。 图1 图2 图3 2．创建网页 （1）点击“网站”菜单中的“添加新项”菜单项，或在“解决方案资源管理器”窗口中项目的快捷菜单项中选择“添加新项”菜单项，打开“添加新项”对话框如图4所示。 图4 （2）在“添加新项”对话框中，模板选择“Web窗体”，名称中给网页命名，语言选择“Visual C#”，选中“将代码放在单独的文件中”，然后点击“添加”按钮，则创建新的网页如图5所示。 图5 （3）在图5中，可以选择“源”、“设计”或“拆分”不同界面进行网页设计。 （4）设计完成后，可以点击工具栏“在浏览器中查看”按钮，或选择设计页面的快捷菜单中“在浏览器中查看”项，浏览页面效果。 （5）设计完成（或设计过程中）选择“文件”菜单的“全部保存”项保存项目。 四、实验报告 实验报告应包括以下内容：实验目的、实验内容、程序清单、运行结果、对运行结果的分析以及本次调试程序所取得的经验。 五、实验任务与时间安排 序号 实 验 项 目 实验类型 实验类别 学时 1 运用XHTML标记进行网页设计 必做 设计性 2 2 运用ASP.NET内置对象完成Web程序设计（一） 必做 设计性 2 3 运用ASP.NET内置对象完成Web程序设计（二） 必做 设计性 2 4 运用服务器控件完成页面设计 必做 设计性 2 5 采用页面切换与导航技术完成网页设计 必做 设计性 2 6 使用Ado.net进行数据库程序设计（一） 必做 设计性 2 7 使用Ado.net进行数据库程序设计（二） 必做 设计性 2 8 熟悉与运用ASP.NET AJAX基本控件 必做 设计性 2 9 综合程序设计 必做 综合性 2 注：实验类型为选做和必做；实验类别为综合性、设计性、创新性、验证性、演示性等。 六、参考教材 [1] 石志国.ASP.NET 程序设计实用教程.北京:电子工业出版社,2006. [2] 郭洪涛.ASP.NET(C#)大学实用教程.北京:电子工业出版社,2007. 实验项目一 运用XHTML标记进行网页设计 一、实验目的 1．掌握开发工具VS2008开发网站的基本步骤。 2．掌握一个静态网页的设计步骤。 3．通过几个网页的设计掌握XHTML标记的作用。 二、实验内容 1．创建一个XHTML页面rumengling.aspx，输出结果如图1-1所示。 图1-1 2．练习列表标记songci.aspx，输出结果如图1-2所示： 图1-2 3．用XHTML语言编写符合以下要求的页面：标题为“An example of image”，在浏览器窗口中显示一个图像。图像的宽度为200个像素点，高度为150个像素点，边框宽度为10个像素点 4． 在网页中做一张课程表，要求所有的文字均居中，背景为黄色，表格居中，宽度为500像素。单元格间距与单元格边距为20像素。 5． 创建一个网页，通过链接可以跳转到(1)创建的rumengling.aspx上。 三、实验步骤 实验项目二 运用ASP.NET内置对象完成Web程序设