Web程序设计实验手册

1、实验一HTML语言的熟悉与应用【实验目的】通过学习和应用 HTML 的基本元素，了解并初步掌握静态网页的运行原理及其制作过程。【实验内容】建一个左右结构的框架结构，要求如下：（1） 左边要求建立一个目录菜单， 菜单的内容为教材书上的第二章的实例名。要求有不同的弹出方式（_top、 _blank）。（2） 右边为单击左边菜单所显示的相应内容。其形式如下图所示。【实验报告要求】1. 实验目的2. 写出框架主要代码，并分别要求用不同的弹出方式。3. 在浏览器中观察主页运行情况并给出运行界面。4. 切换到 HTML 代码下，学习掌握各标记的属性及用法，给出相应注释。5. 实验小结，包括实验中遇到的问题

2、及解决方法。【小技巧】对于一些生僻的标记属性不必强行记忆， 在用到的时候翻一下语法手册， 多用几次就会熟练掌握了； 刚开始，可以先选择几个不错的网页形式加以模仿， 完成自己的主页；看到好的网页，在浏览器的 “查看 ”菜单中选择 “源文件 ”，就可以看到源程序，学习别人制作网页的一些方法和技巧， 有时候通过这种办法可以学到书本上没有的东西，一些新功能也可以为你所用，出现在你的主页中。实验二 HTML语言基础 表格应用 实验目的 1 使用记事本制作简单网页2 文本格式标记和表格标记3 学会使用链接标记和图像标记 实验任务 1 在“记事本”中写入简单的HTML 语言，设计一个简单网页2 学会使用 H

3、TML 语言设计表格，显示学生寝室室友的基本情况3 加入链接和图像标记，显示寝室室友的照片和邮箱 实验步骤 一、使用“记事本”制作网页1在桌面上创建学生工作目录（文件夹），命名规则为“学号(8 位 )+“ -”+（实验序号）1”，如“ -1”实验文件夹的名称，如图1 所示效果。图 1 在桌在建立第一次实验学生工作目录2打开“记事本”程序，编入下图2 所示的 HTML 语言，完成后将该文本文件命名为“1-1.htm ”，保存到上述对应工作目录中。3关闭文档，双击工作目录中的“1-1.htm ”文件，显示效果如下图3 所示。图 2 HTML 代码图 3“ 1-1.htm”网页显示效果二、文本格式和

4、表格标记使用 HTML 语言文本格式标记和表格标记编写一个网页，显示学生寝室室友的学号和姓名。1打开“记事本”程序，根据图4 样例输入网页内容，并更新其中的学生信息为本人所在寝室或者同学的信息，结束后，以“ 1-2.htm ”保存该文件到上述学生工作目录中，关闭文档。2双击“ 1-2.htm”，效果图如图5 所示。图 4 HTML 代码图 5 “ 1-2.htm ”网页显示效果三、链接标记和图像标记1在学生工作目录中建立子目录images，并获取上述网页中提到的同学电子版照片，并通过 PhotoShop 或者 Microsoft Office Picture Manager 将图片尺寸编辑为

5、150（宽） *200 （高），单位为 px，并按 01.jpg 、 02.jpg 的规则进行命名。2通过“记事本”程序编写如图6 所示的网页HTML 源代码。图 6 HTML3双击“ 1-3.htm”，效果如图7 所示。提示：如果“我是你” ，我先研究一下这个代源代码码是什么意思？因为重复的内容非常多！ 一对、 一对 一对、 一对 表示表格、 表示表格一行、 表示一个单元格、 表示图像标记XXX 表示链接标记align 属性表示水平对齐方式bgcolor 属性表示背景色width 属性表示宽度mailto 表示启动邮件程序图 7 “ 1-3.htm”显示效果图 实验结论 利用HTML语言设计

6、网页的代码书写是非常麻烦的，通过此练习使学生们可以了解HTML 语言的语法特点及基本语句。表格深度实验：请按如下结果制作网页实验三CSS 样式表【实验目的】了解和掌握 CSS 样式的语法规则；熟练掌握 CSS 样式的对于页面显示控制的作用，通过 CSS+DIV 实现主页的显示【实验内容】通过 CSS+DIV 定制一个主页。主页页面的形式自定，但要求有以下内容：（1） 浮动的广告图片（2） TAB 方式按钮（3） 两测有滚动广告图片（类似新浪）【实验报告要求】1. 实验目的2. 程序流程图3. 部分关键代码实验四Javascript 语法【实验目的】了解和掌握 Javascript的语法规则；熟

7、练掌握 Javascript语言的流程控制语句、过程控制和函数的语法及具体的使用方法。【实验内容】（ 1）实现定时猜数游戏。要求如下：随机给出一个 0 至 99(包括 0 和 99)之间的数字，然后让用户在 规定的时间内猜出什么数字。 你可以随便猜一个数字， 游戏会提示太大还是太小， 从而缩小结果范围，最终得出正确结果。界面设计参考如下图所示。提示：（1） 定时函数： setTimeout(“时间到使用函数 ”，毫秒数 )（2） 按钮的使能属性 :disable 属性值为 true 该按钮不可能使用； 当其值为 false 时，该按钮可以接受使用。【实验报告要求】1.实验目的2.程序流程图3.

8、部分关键代码4.实验小结，包括实验中遇到的问题及解决方法，以及说明Windows 方式、Web 方式完成该程序的差别是什么。实验五Windows 窗体控件的使用 (一)【实验目的】熟悉掌握 Windows 窗体的文本控件、标签的控件、命令按钮控件、列表控件等控件的属性及使用方法。【实验内容】电影院售票窗体界面的设计与实现。基本要求：1、电影票种类有二，包厢类票单价50 RMB ，普座票单价RadioButton 控件进行电影票种类的选择，根据选择情况在一个35 RMB 。使用 Label 控件上显示该类票的单价。2、购票数量在 TextBox 控件中输入。3、点击确定按钮，应付金额显示在另一L

9、abel 控件中。【实验报告要求】1. 实验目的2. 程序流程3. 界面操作说明4. 实验小结，包括实验中遇到的问题及解决方法实验六 Windows 窗体的使用 (二)【实验目的】熟练掌握 Windows 窗体控件的属性及使用方法。【实验内容】简单计算器的实现。基本要求：具备简单计算器的基本按键，包括 10 个数字键、加减乘除键、 sqrt 键、 1/x 键、键、 Backspace键、Clear 键， CE 键(Clear Entry 局部清除键 )，利用 Button 控件完成，布局合理美观。【实验报告要求】1. 实验目的2. 程序流程3. 部分代码4. 实验小结，包括实验中遇到的问题及解

10、决方法实验七ASP.NET 服务器控件的使用【实验目的】了解和掌握几种 ASP.NET 服务器控件的使用，尤其是服务器验证控件的特点及其应用，现时掌握数据库的连接方式。【实验内容】制作一个免费邮箱的登录页面，页面布局自定，登录成功后给出一个登录成功页面。另外，如果用户没有注册名时，允许用户进行注册，注册时不允许出现重复的用户名， 注册要求用户填写下列资料， 使用恰当的服务器验证控件完成输入信息的验证工作：1. 用户名，只能由字母、数字和下划线组成，且首字符不能为数字；2. 密码，要求在 6 到 15 位之间；3. 确认密码，必须和密码一致；4. 查询密码问题，可任意；5. 查询密码答案，必须

11、8 位以上；6. 电话按要求的格式输入。例如：或者（ 027）87654321 或者当用户输入与要求不符时，用 Label 控件给出必要提示。【实验报告要求】1. 实验目的2. 程序流程图3. 部分代码4. 实验小结，包括实验中遇到的问题及解决方法实验八、九、十基于 ASP.NET 的电子通信录系统的设计与实现【实验目的】通过制作一个电子通信录系统来掌握使用ADO.NET 访问与操纵数据库的方法。【实验内容】一、电子通信录包括三部分信息：1. 用户登录注册信息2. 通信组信息3. 联系人信息数据结构描述：数据库名Correspondence用户名数据表结构（ TableUser）字段名说明数据

12、类型长度允许空值是否主键UserID用户名Password密码CreatTime用户建立时间通信组数据表结构（TableGroup）字段名说明数据类型长度允许空值是否主键GID通信组 IDUserID用户名GName通信组名GDescription通信组描述联系人数据表结构（TableUser）字段名说明数据类型长度允许空值是否主键UID联系人 IDGID所在通信组 IDName联系人姓名Gender联系人性别Address联系人地址PostCode邮政编码Telephone联系人电话Mobile联系人手机E-mail联系人 E-mail说明：不同的用户拥有不同的联系组，不同的联系组用不同的联

13、系人。二、电子通信录系统应至少包括下列功能页面（页面布局自定）：1. 用户首先要进行注册，注册成功后，还要允许用户进行密码修改。2. 通信组的创建 AddGroup.aspx3. 通信组的显示与维护 AltGroup.aspx（包括通信组信息的删除和修改）通信组是根据联系人之间的关系建立不同性质的Group，以上页面主要访问数据库中的TableGroup数据表。页面主要功能分别为： 组的创建和维护。比如，可以建立亲友通信组、工作通信组、同学通信组以及其他类型通信组等。4.联系人信息的添加AddPerson.aspx5. 联系人信息的显示与维护 AltPerson.aspx（包括联系人信息的删除和修改）根据联系人与通信组的关系，对联系人进行分类添加和维护，以上页面涉及到对 TableUser数据表的操作，同时需要考虑与 TableGroup数据表之间的关系。6. 查找通信录 Find.aspx设置查找条件，用户可以直接输入查询关键字，也可以先选择通信组，再输入查询关键字，系统返回