WEB应用程序开发实验指导书.docx

实验一、Web页面设计（设计性实验）（3学时）实验目的：1, 掌握使用HTML语言设置文本格式和列表格式的方法2, 掌握使用HTML语言插入图像和创建表格的方法3, 掌握使用HTML语言创建框架网页和超连接的方法4, 掌握使用HTML语言创建表单和添加表单控件的方法5, 掌握使用CSS方法，实现特殊效果的显示6, 掌握Visual Studio 2005集成开发环境的使用实验要求：1. 使用Visual Studio2005设计网页也可以利用Dreamwaver网页制作工具设计网 页，或直接在记事本中编写HTML代码），比较使用软件工具设计页面生成的代码 量，能够读懂代码，删除不需要的信息2. 通过框架、表格、表单和列表等元素，组织页面，实现静态页面的设计3. 在页面上布置导航信息4. 设计用户交互信息的界面5. 在页面中，通过使用CSS,控制页面的总体显示效果实验步骤：使用Visual Studio2005设计静态网页，理解HTML语言语法规范，也可采用Dreamweaver 或记事本等编辑软件直接完成注意在设计中避免使用中文的目录及文件名称满足系统的兼容性问题，中文编码方 式多样性导致易出错）1 .根据提供的北京联合大学写邮件图片信息（mail.jpg）,编写完成相应的网页。

1. 通过＜table＞元素布局，设计页面，确定文档中对应的HTML元素，将相应的表单 元素进行合理的摆放2. 加入文本元素、图像元素，完成相应的超级链接任务，注意图片等信息的路径问题3. 阅读style-mail.css文件，理解其中给出的元素设定，将其与网页连接注意修改 CSS文件，保证图片信息的位置是正确的通过设定doc unent对象的Styl esheet, Ti tl e等属性，进行相应的设计4. 发件人等栏目，其风格设定采用css文件中的bgcolor2类设定5. 发送等按钮，使用css文件中的but类设定6. 浏览按钮，使用css文件中的butl类设定7. 发邮件中的特殊符号『』o8. 表中的边框显示，尝试使用css中相应的类完成9. 删除css文件中不相关的设定，使css文件最简洁2. 根据提供的信息学院主页的图片信■息（xinxil.jpg和xinxi2.jpg）,以及相关的图片素材， 完成相应网页的设计工作（构图，没时间不做）1. 创建网页，使用表格元素，完成相应的布局工作2. 加入文本元素、图像元素，完成相应的超级链接任务，注意图片等信息的路径问题， 保证网页信息的正常显示。

注意在设计中避免使用中文的目录及文件名称3. 阅读理解style-buu.css文件内容，规范newpaperl和newpaper2的显示风格4. 使用iFrame元素，在页面中显示相应信息5. 当鼠标移过导航条中的图片时，改变显示的图片6, 阅读HTML源文档，删除不必要的信息思考题：1、 使用现有的网页编辑软件,Dreamwaver或FrontPage,或Word等软件，都可生成HTML 文档，其优点和缺陷何在？2、 HTML语言是什么语言，其如何在浏览器上显示？当改变浏览器的显示区域时，显示 的位置可能会发生变化，如何固定元素显示的位置？3、 现在网页上有很多动态效果，如浮动的广告信息，如何实现，通过学习的HTML标记， 可否完成？4、 在网页设计中，当鼠标移过图片时，显不的图片发生了变化，当鼠标移过超级链接时， 显示的文本也发生了相应的调整，两者之间在设计时有何区别？5、 网页中显示的当天时间信息是如何实现的，比较有效的方法是什么？6、 CSS的主要用途是什么？如何设计CSS,使网站中超级链接无下划线，当鼠标移到上 面时，改变显示的颜色，点击后，以另一种颜色显示出来？7、 CSS单独保存为文件合适，还是在文档中，需要的位置直接编写CSS样式有效？8^如何使用meta元素，实现客户端的动态页面切换效果？实验二、使用JavaScript语言编程（设计性实验）（3学时）实验目的：1. 掌握alert、prompt和confirm函数的使用方法。

2. 掌握在＜script＞标记对中，直接编写脚本代码和编写函数，通过事件调用的方法3. 掌握文档对象模型的层次概念，编写脚本代码，获取并显示用户在表单中输入的信 ’息o4. 编写脚本代码，判断用户输入信息的有效性实验要求：1. 通过不同的引用JavaScript脚本的方式，了解网页中使用脚本语言的方法2. 编写JavaScript函数，了解函数参数的作用和调用方法3. 编写JavaScript函数，熟悉和使用DOM文档对象模型中的对象实验步骤：1. 编写一个网页，在其＜body＞中编写一段脚本代码，当加载页面时，显示一个输入 对话框，提示访问者输入姓名，单击“确定”按钮，在另一对话框中显示对访问者 的欢迎信息2. 编写一个网页，在其＜head＞中编写一段脚本代码，当加载页面时，通过事件调用的 方式，运行脚本代码，显示一个输入对话框，提示让访问者输入姓名，单击“确定” 按钮，在另一对话框中显示对访问者的欢迎信息注意：1中是一段程序代码，2中使用函数调用的方式，事件为onload3. 编写页面，在页面中显示一张图片（素材中提供的一个小鱼）和一个“交换图片” 的按钮，单击按钮时，将素材中提供的两个小鱼图像反复进行显示。

提示：通过 修改img的src值完成）4. 利用如下的定时器功能，修改3中的显示，实现图形每秒自动切换var timer 1 = setTimeout（"show（）”, 1000）; //设定定时器，每一秒调用一次 show（）函数 clearTimeOut（timer 1）; 〃清除定时器5, 编写一个页面，在浏览器的状态栏中，显不机器时间使用Date对象和 window.status）（可不做）6, 修改3中的代码，编写相应的程序，实现当鼠标移到图片上时，改变显示的图片可不做）7, 修改实验一中编写的写邮件页面，添加脚本代码，当单击“发送”按钮时，判断当 发件人、收件人和主题为空时，取消发送操作，同时用对话框给出相应的提示信息思考题：1. 客户端的动态网页设计，脚本语言有VBScript和JavaScript,选用哪一种语言较为 合适？2. JavaScript语言在网页设计中，主要的用途是什么？3. JavaScript语言在网页设计中，和传统的语言编写代码有何主要区别？4. 通过JavaScript语言，完成在客户端的老用户登陆和新用户注册的功能实验三、ASP.NET服务器控件的使用（设计性实验）（4学时）实验目的：1. 掌握服务器控件的使用和相关事件处理。

2. 理解和掌握HTML服务器和Web服务器对象的使用3. 理解验证控件的使用特点，掌握其基本的操作方法4. 理解和掌握用户控件的使用实验要求：1. 用服务器控件布置页面，并实现相应的事件处理功能2. 使用列表控件，编辑数据项，设置AutoPostBack属性，实现列表控件的事件响应 功能3. 在页面中加入验证控件，理会验证控件的处理事件方式4. 使用FileUpload、Panel、Wizard等复杂控件，完成较为完善的功能5. 实现邮件发送的功能6. 学习用户控件的设计，在Web窗体页面中，使用用户控件实验步骤：1. 使用ASP.NET服务器控件，编写用户注册页面（zhuce.jpg）o1） 在该页面中加入一些服务器端的控件，考虑页面的布局2） 通过程序设计的方式，对未填写必填信息的情况进行相应的错误信息进行事件 处理，并给出相应的显示（区别div、Span的服务器控件用法以及literal、label 控件用法的不同）3） 再添加一个控件，显示用户输入的所有信息内容4） 另外编写一个完全相同的页面，也可以添加新页面，将上个页面中的所有控件, 通过复制的方式，粘贴到新的页面中添加验证控件，设定验证控件的属性， 确保用户名和密码不得为空，出生年份在1900-2006年之间，月份在1〜12 月之间，电子邮箱为有效的邮箱信息，并给出错误统计显示。

如果上机为2学时，以下内容参考本手册，可自行完成，不做实验要求2. 使用FileUpload服务器控件，实现文件上传的功能文件上传的页面如图 shangchuanl.jpg所示，选择文件上传后，界面显示如图shangchuan2.jpg所示，如果没有 选择文件，直接单击上传按钮，贝U显示如图shangchuan3.jpg所示1) 按照图中所示，添加相应的服务器控件2) 已知FileUpload控件的相关属性和方法如下：FileUpload.SaveAs方法：将上载的文件的内容保存到Web服务器上的指定路径 属性FileUpload.FileName：获取客户端上使用FileUpload控件上载的文件的名称FileUpload.HasFile：获取一个值，该值指示FileUpload控件是否包含文件FileUpload.PostedFile.ContentLength：获取上载文件的大小(以字节为单位)FileUpload.PostedFile.ContentType：获取客户端发送的文件的MIME内容类型FileUpload.PostedFile ,FileName：获取客户端上的文件的完全限定名称。

阅读理解下面的程序代码，指出该程序实现的功能是什么简化程序代码，实现实 验中文件上传的功能，满足图示的要求Sub SaveFile(ByVal file As HttpPostedFile)Dim savePath As String = "c:\temp\uploads\"Dim fileName As String = FileUpload 1 .FileNameDim pathToCheck As String = savePath + fileNameDim tempfileName As StringIf (System.IO.File,Exists(pathToCheck)) ThenDim counter As Integer = 2While (System.IO.File.Exists(pathToCheck)) tempfileName = counter. ToStringQ + fileName pathToCheck = savePath + tempfileName counter = counter + 1End WhilefileName = tempfileNameUploadStatusLabel.Text = "Your file was saved as " + fileName ElseUploadStatusLabel.Text = "Your file was uploaded successfully."End IfsavePath += fileNameFileUploadl .SaveAs(savePath)End Sub3. 使用Panel控件，充实用户注册部分的功能，如添加用户爱好等信息输入的部分， 将显示分为几个步骤，分为上一页或下一页方式操作。

提示：添加几个Panel控件，将相应信息分别布置在Panel中，通过事件代码，控制 Panel的visible值为false或true保证不同部分的正常显示4. 使用Wizard服。