《Web交互开发》实验教学指导/实验九:制作 交互网站 《Web交互开发》实验教学指导 实验九:制作交互网站 、实验目的(5分) 1、掌握 JavaScript编程技术; 2、掌握 jQuery编程技术: 3、掌握Ajax编程技术: 4、理解HIML、CSS、JS、 jQuery等多种技术结合进行Web设计开发过程 二、实验环境(5分) 1、 Windows XP/ Windows7操作系统的计算机 2、局域网网络环境,并且使用固定IP地址。 三、实验要求(5分) 1、实现案例展示的下拉菜单的开发 2、实现案例图片轮转效果的开发 3、实现案例中通知公告的数据存储与展示; 4、全部案例要求使用HIML5+CSS3+JS+ jQuery的技术路线实现 四、实验原理(5分) 1、HTML5与CSS3进行Web开发的方法 2、 JavaScript编程技术原理 3、 jQuery读取XML的方法; 4、网页的兼容性测试原理与方法 五、实验步骤(40分) (1)Web界面设计如图9-1所示。 慎而思之,勤而行之 e EneR 3 图9-1Web界面 本讲共计3页当前第1页
《Web 交互开发》实验教学指导 / 实验九 ：制作 交互网站 本讲共计 3 页 | 当前第 1 页 《Web 交互开发》实验教学指导 实验九：制作交互网站 一、实验目的（5 分） 1、掌握 JavaScript 编程技术； 2、掌握 jQuery 编程技术； 3、掌握 Ajax 编程技术； 4、理解 HTML、CSS、JS、jQuery 等多种技术结合进行 Web 设计开发过程； 二、实验环境（5 分） 1、Windows XP/Windows 7 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址。 三、实验要求（5 分） 1、实现案例展示的下拉菜单的开发； 2、实现案例图片轮转效果的开发； 3、实现案例中通知公告的数据存储与展示； 4、全部案例要求使用 HTML5+CSS3+JS+jQuery 的技术路线实现。 四、实验原理（5 分） 1、HTML5 与 CSS3 进行 Web 开发的方法； 2、JavaScript 编程技术原理； 3、jQuery 读取 XML 的方法； 4、网页的兼容性测试原理与方法。 五、实验步骤（40 分） （1）Web 界面设计如图 9-1 所示。 图 9-1 Web 界面
Nb交互开发》实验教学指导/实验九:制作2 交互网站 (2)部分代码如下: 班级个人: Wa hs: ="登陆"id="dl"> Input type=" button" value="注册"id="zc"> 首页 l讠>我们 班级公告 班级活动 班级荣誉 学习交流男生区女生区班级相册 lmg 班级公告更多>> <>机关分工会组织举办“教职工冬季健步走”比赛2017-12-06我校在“全国百强暑期实践团队”评选活动中取得佳绩2017-12-06我校“炫彩中医”短剧曲艺大赛决赛圆满落幕2017-12-06 <>我校2017年教职工乒乓球团体赛圆满落幕2017-12-07 谭备战教授为我校业余团校暨学生干部学习十九大培训班作主题讲座 2017-12-07 本讲共计3页当前第2页
《Web 交互开发》实验教学指导 / 实验九 ：制作 交互网站 本讲共计 3 页 | 当前第 2 页 （2）部分代码如下： 班级个人: 密码： 首页 我们 班级公告 班级活动 班级荣誉 学习交流 男生区 女生区 班级相册 班级公告更多>> 机关分工会组织举办“教职工冬季健步走”比赛2017-12-06 我校在“全国百强暑期实践团队”评选活动中取得佳绩2017-12-06 我校“炫彩中医”短剧曲艺大赛决赛圆满落幕2017-12-06 我校 2017 年教职工乒乓球团体赛圆满落幕2017-12-07 谭备战教授为我校业余团校暨学生干部学习十九大培训班作主题讲座 2017-12-07
Nb交互开发》实验教学指导/实验九:制作3 交互网站 <>我校在2017年郑东新区大学生志愿者防艾知识竞赛中获得一等奖2017-12-08 “绿橘子乐队rock演奏之夜”演唱会热火校园 span class="rq>2017-12-08 “我校举办“校园文化形象大使”选拔大赛2017-12-09 <>我校加入全国中医药研究生创新发展联盟2017-12-09我校82级校友王耀献荣获2017年顾氏和平奖2017-12-10 div class="tp"> png (3)请完成以下任务 任务一:将上述菜单改为下拉菜单形式。(10分) 任务二:实现右边效果图中图片新闻的滚动展示(10分) 任务三:实现通知公告的XML数据存储。(10分) 任务四:使用 JavaScript实现XML数据的读取并显示。(10分) 要求 请将上述任务的操作方法,填写到实验报告册中 六、自主实验步骤(20分) 1、json数据读取 (1)将上述通知公告改为JSON格式,并使用 jQuery进行读取 (2)完成下述任务。 任务一:将通知公告改为JSON存储格式。(10分) 任务二:使用 jQuery进行数据读取并显示。(10分) 要求 请将完成上述任务的步骤,填写到实验报告册中。 七、思考及问答(20分) 1、本地数据存储的类型有哪些?举例说明。(5分) 2、如何提高网站的性能?(5分 3、简述Web测试包括哪些部分?(5分) 常用的web服务器软件有哪些?列举至少三种。(5分) 本讲共计3页|当前第3页
《Web 交互开发》实验教学指导 / 实验九 ：制作 交互网站 本讲共计 3 页 | 当前第 3 页 我校在 2017 年郑东新区大学生志愿者防艾知识竞赛中获得一等奖2017-12-08 “绿橘子乐队 rock 演奏之夜”演唱会热火校园 2017-12-08 “我校举办“校园文化形象大使”选拔大赛 2017-12-09 我校加入全国中医药研究生创新发展联盟2017-12-09 我校 82 级校友王耀献荣获 2017 年顾氏和平奖 2017-12-10 （3）请完成以下任务： 任务一：将上述菜单改为下拉菜单形式。（10 分） 任务二：实现右边效果图中图片新闻的滚动展示（10 分） 任务三：实现通知公告的 XML 数据存储。（10 分） 任务四：使用 JavaScript 实现 XML 数据的读取并显示。（10 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 六、自主实验步骤（20 分） 1、json 数据读取。 （1）将上述通知公告改为 JSON 格式，并使用 jQuery 进行读取。 （2）完成下述任务。 任务一：将通知公告改为 JSON 存储格式。（10 分） 任务二：使用 jQuery 进行数据读取并显示。（10 分） 要求： 请将完成上述任务的步骤，填写到实验报告册中。 七、思考及问答（20 分） 1、本地数据存储的类型有哪些？举例说明。（5 分） 2、如何提高网站的性能？（5 分） 3、简述 Web 测试包括哪些部分？（5 分） 4、常用的 Web 服务器软件有哪些？列举至少三种。（5 分）
