Web程序设计实验手册20111216

1、Wet程序设计实验手册201112162武汉工业学院网站开发工具实验指导书适用专业：计算机科学与技术专业制定人：蒋丽华 教研室：计算机科学与技术教研室数学与计算机学院20112011 年 1212 月3【实验目的】通过学习和应用HTML的基本元素，了解并初步掌握静态网页的运行原理 及其制作过程。【实验内容】建一个左右结构的框架结构，要求如下：（1） 左边要求建立一个目录菜单，菜单的内容为教材书上的第二章的实 例名。要求有不同的弹出方式（_top、_blank）。（2） 右边为单击左边菜单所显示的相应内容。其形式如下图所示。腔-LSLhf【实验报告要求】1.实验目的2.写出框架主要代码，并分别要

2、求用不同的弹出方式。3.在浏览器中观察主页运行情况并给出运行界面。4.切换到HTML代码下，学习掌握各标记的属性及用法，给出相应注 释。5.实验小结，包括实验中遇到的问题及解决方法。【小技巧】对于一些生僻的标记属性不必强行记忆，在用到的时候翻一下语法手册， 多用几次就会熟练掌握了；刚开始，可以先选择几个不错的网页形式加以模仿， 完成自己的主页；看到好的网页，在浏览器的查看”菜单中选择 源文件”，就可以看到源程序，学习别人制作网页的一些方法和技巧，有时候通过这种办法 可以学到书本上没有的东西，一些新功能也可以为你所用，出现在你的主页中。实验二HTML语言基础一表格应用实验目的1.使用记事本制作简

3、单网页2.文本格式标记和表格标记3.学会使用链接标记和图像标记实验HTML语言的熟悉与应用ttu切wH4实验任务1.在记事本设计一个简单网页2.学会使用HTML语言设计表格，显示学 生寝室室友的基本情况3.加入链接和图像标记，显示寝室室友的照 片和邮箱实验步骤一、使用“记事本”制作网页1.在桌面上创建学生工作目录（文件夹）， 命名规则为“学号（8位）+“-”+（实验序号）T,如“20090101-1”实验文件夹的名称，如图1所 示效果。20a9OLCl-L20a9OLCl-L图1在桌在建立第一次实验学生工作目录中写入简单的HTML语言，52.打开“记事本”程序， 编入下图2所示 的HTML语言

4、，完成后将该文本文件命名为“1-1.htm”，保存到上述对应工作目录3.关闭文档，双击工作目录中的文件，显示效果如下图3所示。图2 HTML代码塚沈 ra 药科大学计算杭选修谍（网站开壺与制tftjtftj - - Micro5a.BraMicro5a.Bra立件 Q 编辑垃查看迪收歳（甜 IXu 帮肋凹地址I 运 jD：谟程资科 1 C 岡站开境与制慨 实验任务壮二Googtefc-我是KX期XX学院XX专业X5土级的XX,学号为XX。图3“1-1.htm”网页显示效果二、文本格式和表格标记使用HTML语言文本格式标记和表格标记 编写一个网页，显示学生寝室室友的学号和姓 名。1.打开“记事本

5、”程序，根据图4样例输 入网页内容，并更新其中的学生信息为本人所在 寝室或者同学的信息，结束后，以1-2.htm” 保存该文件到上述学生工作目录中，关闭文档。中。“1-1.htm/f 搜索收藏夹 WT 推索 I设置61-2.htm”，效果图如图5所示。2.双图4 HTML代码刊室友阿页 -MicrosoftMicrosoft InternetInternet ExplarerExplarer立件编做已查看过收議工則D D弼肋3 3后退- ClipClip摟素收織夹 L L k k 地址（3 3 I I CiDocumentsCiDocuments andand SettingsbyhardSe

6、ttingsbyhard：ffi05C1010l-ll-2.htmffi05C1010l-ll-2.htm室友的信息序号学号姓名1|001关羽2002张飞3003赵云410041004吕超50OB0OB黄忠逐1 1完毕图5“1-2.htm”网页显示效果三、链接标记和图像标记1.在学生工作目录中建立子目录images, 并获取上述网页中提到的同学电子版照片，并通I过PhotoShop或者Microsoft Office PictureIManager将图片尺寸编辑为150（宽）*200（高）， 单位为px，并按01.jpg、02.jpg的规则进行命名。2.通过“记事本”程序编写如图6所示的 网页

7、HTML源代码。提示：如果“我是你”我源代码究一下这个代码6是什么意思？因为重复的内容非常多！-|a| x|I J我的电脑zi冬6 HTML3.双击“1-3.htm”，效果如图7所示、O83- - MicrosoftMicrosoft InternetInternet EnplorerEnplorer图7“1-3.htm”显示效果图实验结论利用HTML语言设计网页的代码书写是非V-收藏喪令，云 k3a 转到 j 犍接 I室友的信息序号学号姓名照片电子邮箱001001关羽002张飞003003赵云guanyu触sina, cumshdigfeishdigfei囱sina.sina. GomGom

8、zhaoyunQsLna.zhaoyunQsLna. comcomrnl我的电脑3.双击“1-3.htm”，效果如图7所示、O9常麻烦的，通过此练习使学生们可以了解HTML10语言的语法特点及基本语句。表格深度实验:请按如下结果制作网页实验三CSS样式表【实验目的】 了解和掌握CSS样式的语法规则；熟练掌握 制的作用，通过CSS+DIV实现主页的显示【实验内容】通过CSS+DIV定制一个主页。主页页面的形式自定，但要求有以下内容:（1） 浮动的广告图片（2）TAB方式按钮（3） 两测有滚动广告图片（类似新浪）【实验报告要求】TheThe TiiuTiiu isis：ZOOB-3-&ZO

9、OB-3-&22：4ZA7fitfit cancanbebe refreshrefreshC.C. AppleApple vnrvnr AppleApple ii.ii.ApplsAppls o o rincApplerincApple c,c,TrulfTrulf . . TrullTrullV.V. IruL*IruL* I I PiPineAppleneApple RincApplcRincApplcSsalllineSballLineSisalSisal ILineILineSraULineSraULineBreakBreak fastfast拓耐SupperSupper匡3

10、3CSS样式的对于页面显示控4 4perper second!)second!) / 4 i-# 貞 二晩益AJ曙#聲匚心 3HelloHelloASP!ASP!111.实验目的2.程序流程图3.部分关键代码实验四Javascript语法【实验目的】了解和掌握Javascript的语法规则；熟练掌握Javascript语言的流程控制语 句、过程控制和函数的语法及具体的使用方法。【实验内容】（1）实现定时猜数游戏。要求如下：随机给出一个0至99（包括0和99）之间的数字，然后让用户在规定的时间内猜出什么数字。你可以随便猜一个数字，游戏会提示太大还是太小，从而缩 小结果范围，最终得出正确结果。界面

11、设计参考如下图所示。猪数越戒- 1 1 crosoftcrosoft InternetInternet ExploTerExploTer立件 輪辐翅 莹看迫 收探 工具 帮肪后遲 r J 0 3 送：；L I P 搜索少收藏英 Q I W ,二 1 SU地址I 轲klbtuifcmtxinti面 IguMa * IH 转到 籬播猜数游戏猜Si入一个0-100之间的随机整数倒计时；5秒 结果：还想玩吗？请点击井始”再来定时函数：setTimeout（时间到使用函数”，毫秒数）按钮的使能属性:disable属性值为true该按钮不可能使用；当其值 为false时，该按钮可以接受使用。【实验报告要求

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

13、件中输入。点击确定按钮，应付金额显示在另一Label控件中。【实验报告要求】1.实验目的2.程序流程3.界面操作说明4.实验小结，包括实验中遇到的问题及解决方法14【实验目的】熟练掌握Windows窗体控件的属性及使用方法。【实验内容】简单计算器的实现。基本要求：具备简单计算器的基本按键，包括10个数字键、 键、=键、Backs pace键、Clear键，CE键（Clear Entry控件完成，布局合理美观。【实验报告要求】1.实验目的2.程序流程3.部分代码4.实验小结，包括实验中遇到的问题及解决方法实验六Windows窗体的使用（二）加减乘除键、sqrt键、1/x局部清除键），利用Butt

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

15、按要求的格式输入。例如用户输入与要求不符时，用Label控件给出必要提示。【实验报告要求】1.实验目的2.程序流程图3.部分代码4.实验小结，包括实验中遇到的问题及解决方法02787654321或者（027）87654321或者16信录系统的设计与实现【实验目的】通过制作一个电子通信录系统来掌握使用ADO.NET访问与操纵数据库的方法。【实验内容】一、电子通信录包括三部分信息：1.用户登录注册信息2.通信组信息3.联系人信息数据结构描述：数据库名Corres pondence用户名数据表结构(TableUser)字段名说明数据类型长度允许空值是否主键UserID用户

16、名P assword密码CreatTime用户建立时间通信组数据表结构(TableGroup)字段名说明数据类型长度允许空值是否主键GID通信组IDUserID用户名GName通信组名GDescri pti on通信组描述联系人数据表结构(Tableuser)字段名说明数据类型长度允许空值是否主键UID联系人IDGID所在通信组IDName联系人姓名Gen der联系人性别Address联系人地址P ostCode邮政编码Tele phone联系人电话Mobile联系人手机E-mail联系人E-mail说明：不同的用户拥有不同的联系组，不同的联系组用不同的联系人。 二、电子通信录系统应至少包括

17、下列功能页面(页面布局自定) ：1.用户首先要进行注册，注册成功后，还要允许用户进行密码修改。2.通信组的创建AddGroup.aspx3.通信组的显示与维护AltGroup.aspx（包括通信组信息的删除和修改）实验八、九、基于ASP .NET的电子通17通信组是根据联系人之间的关系建立不同性质的Group ,以上页面主要访问数据库中的TableGroup数据表。页面主要功能分别为：组的创建 和维护。比如，可以建立亲友通信组、工作通信组、同学通信组以及其他 类型通信组等。4.联系人信息的添加AddPerson.aspx5.联系人信息的显示与维护AltPerson.aspx（包括联系人信息的删除和修改）根据联系人与通信组的关系，对联系人进行分类添加和维护，以上页面涉及到对TableUser数据表的操作，同时需要考虑与TableGroup数