web程序设计实验手册

《web程序设计实验手册》由会员分享，可在线阅读，更多相关《web程序设计实验手册（11页珍藏版）》请在金锄头文库上搜索。

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

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

3、格，显示学生寝室室友的基本情况3 加入链接和图像标记，显示寝室室友的照片和邮箱实验步骤一、使用“记事本”制作网页1在桌面上创建学生工作目录（文件夹） ，命名规则为“学号(8 位)+“- ”+（实验序号）1” ，如“20090101-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 将图片尺寸编辑为 150

5、（宽）*200（高） ，单位为 px，并按 01.jpg、02.jpg 的规则进行命名。2通过“记事本”程序编写如图 6 所示的网页 HTML 源代码。图 6 HTML 源代码3双击“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 的语法规则；熟练掌握 Java

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

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

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

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

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

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

13、mail 联系人 E-mail说明：不同的用户拥有不同的联系组，不同的联系组用不同的联系人。二、电子通信录系统应至少包括下列功能页面（页面布局自定）：1. 用户首先要进行注册，注册成功后，还要允许用户进行密码修改。2. 通信组的创建 AddGroup.aspx3. 通信组的显示与维护 AltGroup.aspx（包括通信组信息的删除和修改）通信组是根据联系人之间的关系建立不同性质的 Group，以上页面主要访问数据库中的 TableGroup 数据表。页面主要功能分别为：组的创建和维护。比如，可以建立亲友通信组、工作通信组、同学通信组以及其他类型通信组等。4. 联系人信息的添加 AddPers

14、on.aspx5. 联系人信息的显示与维护 AltPerson.aspx（包括联系人信息的删除和修改）根据联系人与通信组的关系，对联系人进行分类添加和维护，以上页面涉及到对 TableUser 数据表的操作，同时需要考虑与 TableGroup 数据表之间的关系。6. 查找通信录 Find.aspx设置查找条件，用户可以直接输入查询关键字，也可以先选择通信组，再输入查询关键字，系统返回查询结果，可以绑定 DataGrid 控件来显示查询结果。扩展要求：如果时间允许，可制作管理员登录页面，被授权的用户才有资格创建和维护信息，普通用户只可进行信息查询。小提示：页面中可适当加入一些 ASP.NET 的验证控件，帮助检查用户输入的有效性。【设计文档】按照软件工程思想规范整个系统的开发流程，并反映在设计文档中，主要包括下列步骤：1. 需求分析2. 系统框架3. 模块设计4. 编码实现5. 系统测试和发布等