web技术实验指导书

web技术实验指导书
Web技术实验指导书
内容简介
Web技术是计算机专业学生的一门专业课程，着重讲述Web编程的技术方法。

对于学生从事Web系统的研发、使用和维护有重要意义。

本课程概念多、内容涉及面广、系统性强。

通过本课程的学习，学生应能从软件、硬件功能分配的角度去了解、分析和研究Web系统，建立起对Web系统的全面认识，树立全面地、发展地看问题的观点，从而加深对各种类型Web系统的了解。

本课程的学习应注重理论与实践相结合，因此实验教学是教学环节中必不可少的重要内容。

通过实验教学的学习，使学生熟练掌握有关Web编程的基本概念、基本原理和基本思想，掌握对Web系统进行设计、分析和计算的方法。

实验部分包括四个实验，包括实验目的、实验内容和实验所需环境等，介绍了每个实验所需的一些基础知识和技巧。

在实验中给出的实验题，跟课堂教学的内容都有密切的关系，所以需要将课堂上讲授的例子程序融会贯通，掌握实验所需的一些基本方法和工具，并在吃透例子程序的基础上，积极独立思考设计和编写满足实验要求的程序。

中南大学信息科学与工程学院鲁鸣鸣制定
上机实验要求及规范
Web技术课程具有比较强的实践性。

上机实验是一个重要的教学环节。

一般情况下学生能够重视实验环节，对于编写程序上机练习具有一定的积极性。

但是容易忽略实验的总结，忽略实验报告的撰写。

对于一名大学生必须严格训练分析总结能力、书面表达能力。

需要逐步培养书写科学实验报告以及科技论文的能力。

拿到一个题目，一般不要急于编程。

正确的方法是：首先理解问题，明确给定的条件和要求解决的问题，然后按照自顶向下，逐步求精，分而治之的策略，按照面向对象的程序设计思路，逐一地解决子问题。

一、实验报告的基本要求：
一般性、较小规模的上机实验题，必须遵循下列要求。

养成良好的习惯。

姓名班级学号日期题目i. 问题描述
ii. 设计简要描述
iii. 程序清单
iv. 结果分析v. 调试报告：
实验者必须重视最后这两个环节，否则等同于没有完成实验任务。

这里可以体现个人特色、或创造性思维。

具体内容包括：测试数据与运行记录；调试中遇到的主要问题，自己是如何解决的；经验和体会等。

二、实验报告的提高要求：
阶段性、较大规模的上机实验题，应该遵循下列要求。

养成科学的习惯。

问题描述
需求和规格说明描述问题，简述题目要解决的问题是什么。

规定软件做什么。

原题条件不足时补全。

概要设计：功能模块的划分
详细设计：每部分模块的设计，含数据结构的设计，算法的描述
a.设计思想：主要算法基本思想。

b.设计表示：每个函数的头和规格说明；列出每个函数所调用和被调用的函数，也可以通过调用关系图表达。

实现注释：各项功能的实现程度、在完成基本要求的基础上还有什么功能。

用户手册：即使用说明书。

调试报告：调试过程中遇到的主要问题是如何解决的；设计的回顾、讨论和分析；
时间复杂度、空间复杂度分析；改进设想；经验和体会等。

实验一基于HTML+CSS的新闻网站首页实现
一、实验目的
1．了解和掌握HTML基本标签的用法
2. 了解和掌握网页布局
3. 了解和掌握基本控件标签的用法
二、实验开发环境和工具
可以在Linux或者Windows操作系统上搭建开发环境，采用写字板和IE浏览器即可完成HTML+CSS的静态网页制作，也可选用FrontPage、DreamWeaver等静态网页开发工具进行实验。

测试环境采用IE浏览器即可。

关于HTML+CSS的静态网页制作的详细细节见课
件或相关文献。

三、实验内容
在掌握课堂讲授的HTML+CSS静态网页制作的基础上，参考课件中的新闻网站网站的范例，要求实现该网站的首页，首页包含的内容包：
1. 新闻网站首页头部；
2. 新闻网站首页底部；
3. 新闻网站首页左侧导航栏；
4. 新闻网站首页新闻导航；
5. 新闻网站首页右侧图片新闻；
新闻网页首页的具体外观见下图。

实验二新闻网站管理页面动态网页实现
一、实验目的
1．了解和掌握JSP基本概念和语法
2. 了解和掌握JSP内置对象request,response,out
3. 了解和掌握JDBC
二、实验开发环境和工具
可以在Linux或者Windows操作系统上搭建开发环境，所使用的开发工具包括Tomcat7 Web应用服务器，SQL Server 2000 SP4 数据库服务器，JSP集成开发环境采用Eclipse，使用Java语言，工具包使用。

关于JSP开发环境和工具的详细细节见课件资料和相关文献。

三、实验内容
在掌握课堂讲授的新闻发布系统范例的基础上，参考课件和演示视频，搭建JSP开发环境，构建基于JSP的新闻发布系统管理页面，具体要求如下：
1. 参考课件中的相关视频，搭建基于Tomcat7 Web应用服务器，SQL Server 2000 SP4
数据库服务器，和Eclipse的JSP集成开发环境；
2. 使用老师提供的SQL脚本创建新闻系统数据库
3. 完成从新闻网首页顶部快速登录系统的操作，实现用
管理员账号登录后进入管理页面的功能；
4. 完成转入管理页面后显示新闻列表的功能；
5. 完成在管理页面显示新闻主题列表的功能；
6. 完成在管理页面添加新闻主题的功能；
7. 完成在管理页面添加新闻的功能
Web技术实验指导书
内容简介
Web技术是计算机专业学生的一门专业课程，着重讲述Web编程的技术方法。

对于学生从事Web系统的研发、使用和维护有重要意义。

本课程概念多、内容涉及面广、系统性强。

通过本课程的学习，学生应能从软件、硬件功能分配的角度去了解、分析和研究Web系统，建立起对Web系统的全面认识，树立全面地、发展地看问题的观点，从而加深对各种类型Web系统的了解。

本课程的学习应注重理论与实践相结合，因此实验教学是教学环节中必不可少的重要内容。

通过实验教学的学习，使学生熟练掌握有关Web编程的基本概念、基本原理和基本思想，掌握对Web系统进行设计、分析和计算的方法。

实验部分包括四个实验，包括实验目的、实验内容和实验所需环境等，介绍了每个实验所需的一些基础知识和技巧。

在实验中给出的实验题，跟课堂教学的内容都有密切的关系，所以需要将课堂上讲授的例子程序融会贯通，掌握实验所需的一些基本方法和工具，并在吃透例子程序的基础上，积极独立思考设计和编写满足实验要求的程序。

中南大学信息科学与工程学院鲁鸣鸣制定
上机实验要求及规范
Web技术课程具有比较强的实践性。

上机实验是一个重要的教学环节。

一般情况下学生能够重视实验环节，对于编写程序上机练习具有一定的积极性。

但是容易忽略实验的总结，忽略实验报告的撰写。

对于一名大学生必须严格训练分析总结能力、书面表达能力。

需要逐步培养书写科学实验报告以及科技论文的能力。

拿到一个题目，一般不要急于编程。

正确的方法是：首先理解问题，明确给定的条件和要求解决的问题，然后按照自顶向下，逐步求精，分而治之的策略，按照面向对象的程序设计思路，逐一地解决子问题。

一、实验报告的基本要求：
一般性、较小规模的上机实验题，必须遵循下列要求。

养成良
好的习惯。

姓名班级学号日期题目i. 问题描述
ii. 设计简要描述
iii. 程序清单
iv. 结果分析v. 调试报告：
实验者必须重视最后这两个环节，否则等同于没有完成实验任务。

这里可以体现个人特色、或创造性思维。

具体内容包括：测试数据与运行记录；调试中遇到的主要问题，自己是如何解决的；经验和体会等。

二、实验报告的提高要求：
阶段性、较大规模的上机实验题，应该遵循下列要求。

养成科学的习惯。

问题描述
需求和规格说明描述问题，简述题目要解决的问题是什么。

规定软件做什么。

原题条件不足时补全。

概要设计：功能模块的划分
详细设计：每部分模块的设计，含数据结构的设计，算法的描述
a.设计思想：主要算法基本思想。

b.设计表示：每个函数的头和规格说明；列出每个函数所调用和被调用的函数，也可以通过调用关系图表达。

实现注释：各项功能的实现程度、在完成基本要求的基础上还有什么功能。

用户手册：即使用说明书。

调试报告：调试过程中遇到的主要问题是如何解决的；设计的
回顾、讨论和分析；
时间复杂度、空间复杂度分析；改进设想；经验和体会等。

实验一基于HTML+CSS的静态电商网站实现
一、实验目的
1．了解和掌握静态网页开发的基本方法2. 了解和掌握样式表CSS的基本用法
二、实验开发环境和工具
可以在Linux或者Windows操作系统上搭建开发环境，采用写字板和IE浏览器即可完成HTML+CSS的静态网页制作，也可选用DreamWeaver等静态网页开发工具进行实验。

测试环境采用IE浏览器即可。

关于HTML+CSS的静态网页制作的详细细节见课件或相关文献。

三、实验内容
在掌握课堂讲授的HTML+CSS静态网页制作的基础上，参考课件中的贵美商城网站的范例，仿照当当网、京东或淘宝等电子商务网站制作静态网页，要求实现的静态页面包括：
1. 电子商务网站首页；
2. 商品展示页；
3. 具体商品详细介绍页；
4. 购物车页面；
5. 登录页；
6. 注册页；
7. 帮助中心客服页面。

实验二运用JavaScript技术的电商网站
一、实验目的
1．了解和掌握JavaScript脚本语言编程的基本方法
2. 了解和掌握JavaScript脚本语言编程的一些基本技术
二、实验开发环境和工具
可以在Linux或者Windows操作系统上搭建开发环境，采用写字板和IE浏览器即可完成项目开发，可选用firebug工具来调试JavaScript代码。

测试环境采用IE浏览器即可。

关于JavaScript的开发详细细节见课件或相关文献。

三、实验内容
在掌握课堂讲授的JavaScipt客户端脚本语言及其范例的的基础上，基于课堂讲授的HTML+CSS静态网页案例“贵美商城”，实现如下客户端动态交互功能：
1. 参考JavaScript课件第2章的内容，在贵美商城首页顶部的导航条中实现动态显示实时时间的效果。

2. 参考JavaScript课件第3章的内容，将贵美商城首页主体部分左边的商品分类导航用树形菜单的方式实现；实现并解释贵美商城首页主体部分右下角部分的TAB切换特效；实现并解释贵美商城电子产品目录页产品全选和全不选的特效。

3. 参考JavaScript课件第4章的内容，实现贵美商城购物车页面的订单修改、删除和增加功能。

4. 参考JavaScript课件第5章的内容，在贵美商城首页实现随鼠标滚动的广告图片特效。

5. 参考JavaScript课件第6,7章的内容，在贵美商城登陆和注册页面实现基于JavaScipt的表单验证特效。

实验三基于JSP的新闻发布系统前端实现
一、实验目的
1．了解和掌握JSP开发环境和开发流程
2. 了解和掌握通过JDBC访问数据库并使用JSP展示查询数据的基本方法
二、实验开发环境和工具
可以在Linux或者Windows操作系统上搭建开发环境，所使用的开发工具包括
Web应用服务器，SQL Server 2000 SP4 数据库服务器，JSP 集成开发环境采用Eclipse Juno，使用Java语言，工具包使用。

关于JSP开发环境和工具的详细细节见课件资料和相关文献。

三、实验内容
在掌握课堂讲授的新闻发布系统范例的基础上，参考课件和演示视频，搭建JSP开发环境，构建基于JSP的新闻发布系统前端，具体要求如下：
1. 参考课件中的相关视频，搭建基于Web应用服务器，SQL Server
2000 SP4 数据库服务器，和Eclipse Juno的JSP集成开发环境；
2. 显示存储在数据库中的新闻一级标题。

页面显示效果如下：
Web技术实验指导书
内容简介
Web技术是计算机专业学生的一门专业课程，着重讲述Web编程的技术方法。

对于学生从事Web系统的研发、使用和维护有重要意义。

本课程概念多、内容涉及面广、系统性强。

通过本课程的学习，学生应能从软件、硬件功能分配的角度去了解、分析和研究Web系统，建立起对Web系统的全面认识，树立全面地、发展地看问题的观点，从而加深对各种类型Web系统的了解。

本课程的学习应注重理论与实践相结合，因此实验教学是教学环节中必不可少的重要内容。

通过实验教学的学习，使学生熟练掌握有关Web编程的基本概念、基本原理和基本思想，掌握对Web系统进行设计、分析和计算的方法。

实验部分包括四个实验，包括实验目的、实验内容和实验所需环境等，介绍了每个实验所需的一些基础知识和技巧。

在实验中给出的实验题，跟课堂教学的内容都有密切的关系，所以需要将课堂上讲授的例子程序融会贯通，掌握实验所需的一些基本方法和工具，并在吃透例子程序的基础上，积极独立思考设计和编写满足实验要求的程序。

中南大学信息科学与工程学院鲁鸣鸣制定
上机实验要求及规范
Web技术课程具有比较强的实践性。

上机实验是一个重要的教
学环节。

一般情况下学生能够重视实验环节，对于编写程序上机练习具有一定的积极性。

但是容易忽略实验的总结，忽略实验报告的撰写。

对于一名大学生必须严格训练分析总结能力、书面表达能力。

需要逐步培养书写科学实验报告以及科技论文的能力。

拿到一个题目，一般不要急于编程。

正确的方法是：首先理解问题，明确给定的条件和要求解决的问题，然后按照自顶向下，逐步求精，分而治之的策略，按照面向对象的程序设计思路，逐一地解决子问题。

一、实验报告的基本要求：
一般性、较小规模的上机实验题，必须遵循下列要求。

养成良好的习惯。

姓名班级学号日期题目
i. 问题描述
ii. 设计简要描述
iii. 程序清单
iv. 结果分析v. 调试报告：
实验者必须重视最后这两个环节，否则等同于没有完成实验任务。

这里可以体现个人特色、或创造性思维。

具体内容包括：测试数据与运行记录；调试中遇到的主要问题，自己是如何解决的；经验和体会等。

二、实验报告的提高要求：
阶段性、较大规模的上机实验题，应该遵循下列要求。

养成科学的习惯。

问题描述
需求和规格说明描述问题，简述题目要解决的问题是什么。

规定软件做什么。

原题条件不足时补全。

概要设计：功能模块的划分
详细设计：每部分模块的设计，含数据结构的设计，算法的描述
a.设计思想：主要算法基本思想。

b.设计表示：每个函数的头和规格说明；列出每个函数
所调用和被调用的函数，也可以通过调用关系图表达。

实现注释：各项功能的实现程度、在完成基本要求的基础上还有什么功能。

用户手册：即使用说明书。

调试报告：调试过程中遇到的主要问题是如何解决的；设计的回顾、讨论和分析；
时间复杂度、空间复杂度分析；改进设想；经验和体会等。

实验一基于HTML+CSS的静态电商网站实现
一、实验目的
1．了解和掌握静态网页开发的基本方法2. 了解和掌握样式表CSS的基本用法
二、实验开发环境和工具
可以在Linux或者Windows操作系统上搭建开发环境，采用写字板和IE浏览器即可完成HTML+CSS的静态网页制作，也可选用DreamWeaver等静态网页开发工具进行实验。

测试环境采用IE浏览器即可。

关于HTML+CSS的静态网页制作的详细细节见课件或相关文献。

三、实验内容
在掌握课堂讲授的HTML+CSS静态网页制作的基础上，参考课件中的贵美商城网站的范例，仿照当当网、京东或淘宝等电子商务网站制作静态网页，要求实现的静态页面包括：
1. 电子商务网站首页；
2. 商品展示页；
3. 具体商品详细介绍页；
4. 购物车页面；
5. 登录页；
6. 注册页；
7. 帮助中心客服页面。

实验二运用JavaScript技术的电商网站
一、实验目的
1．了解和掌握JavaScript脚本语言编程的基本方法
2. 了解和掌握JavaScript脚本语言编程的一些基本技术
二、实验开发环境和工具
可以在Linux或者Windows操作系统上搭建开发环境，采用写字板和IE浏览器即可完成项目开发，可选用firebug工具来调试JavaScript代码。

测试环境采用IE浏览器即可。

关于JavaScript的开发详细细节见课件或相关文献。

三、实验内容
在掌握课堂讲授的JavaScipt客户端脚本语言及其范例的的基础
上，基于课堂讲授的HTML+CSS静态网页案例“贵美商城”，实现如下客户端动态交互功能：
1. 参考JavaScript课件第2章的内容，在贵美商城首页顶部的导航条中实现动态显示实时时间的效果。

2. 参考JavaScript课件第3章的内容，将贵美商城首页主体部分左边的商品分类导航用树形菜单的方式实现；实现并解释贵美商城首页主体部分右下角部分的TAB切换特效；实现并解释贵美商城电子产品目录页产品全选和全不选的特效。

3. 参考JavaScript课件第4章的内容，实现贵美商城购物车页面的订单修改、删除和增加功能。

4. 参考JavaScript课件第5章的内容，在贵美商城首页实现随鼠标滚动的广告图片特效。

5. 参考JavaScript课件第6,7章的内容，在贵美商城登陆和注册页面实现基于JavaScipt的表单验证特效。

实验三基于JSP的新闻发布系统前端实现
一、实验目的
1．了解和掌握JSP开发环境和开发流程
2. 了解和掌握通过JDBC访问数据库并使用JSP展示查询数据的基本方法
二、实验开发环境和工具
可以在Linux或者Windows操作系统上搭建开发环境，所使用的开发工具包括
Web应用服务器，SQL Server 2000 SP4 数据库服务器，JSP 集成开发环境采用Eclipse Juno，使用Java语言，工具包使用。

关于JSP开发环境和工具的详细细节见课件资料和相关文献。

三、实验内容
在掌握课堂讲授的新闻发布系统范例的基础上，参考课件和演示视频，搭建JSP开发环境，构建基于JSP的新闻发布系统前端，具体要求如下：
1. 参考课件中的相关视频，搭建基于Web应用服务器，SQL Server 2000
SP4 数据库服务器，和Eclipse Juno的JSP集成开发环境； 2. 显示存储在数据库中的新闻一级标题。

页面显示效果如下：
《Web技术》实验指导书
北京工商大学计算机与信息工程学院
2016年3月
实验一使用Dreamweaver制作HTML页面
【实验目的】掌握使用Dreamweaver制作HTML页面的方法【实验内容】
1．使用HTML制作一个页面，要有背景颜色，页面显示内容及格式如下图所示。

2．制作一个页面，上有文字、图像和朋友的地址，在文字和图像上创建超级链接，单击链接时，页面跳转到其他页面，单击地址时，打开信箱，发送邮件。

3．制作一个计算器界面，界面如下图所示。

4．用
Top: 显示logo图片和页面的标题。

Left: 登录模块
Body: 当前页面的主要显示区域。

Bottom: 显示版权信息。

【实验报告】将实验文件发送到老师的电子信箱。

实验二CSS及JavaScript实验
【实验目的】掌握CSS及JavaScript的使用方法【实验内容】
1.定义一个文件，在其中设置超链接的颜色、访问过的超链接的颜色，颜色自定。

另外，设计两个HTML页面，在其中创建超链接，并链接文件，观察超链接的颜色。

2. 使用JavaScript脚本来验证用户输入的用户名是否为空，并要求密码的长度必须大于6，根据用户的输入给出相应的提示。

3. 页面上有一幅图像，在状态栏显示有关图像的说明。

单击图像时，换成另一幅图像，同时状态栏的内容也做相应的变更。

4．制作一个页面，页面上有两个文本框和提交按钮，在第一个文本框中输入信息后，用鼠标单击提交按钮后，将在第二个文本框显示输入的内容。

【实验报告】将实验文件发送到老师的电子信箱。

实验三MyEclipse使用
【实验目的】掌握MyEclipse的使用【实验内容】
1. 检查MyEclipse的配置
1）查找当前的Tomcat配置，分析其参数含义；2）查找当前的JDK配置，分析其参数含义。

2. 使用MyEclipse建立一个Web Project，并修改其中的默认jsp 文件，使其显示“欢迎进入JSP开发学习！”，并部署和运行，观察效果。

3. 实现教材中的【例】：ServletContext和Web应用的关系。

【实验报告】将实验文件发送到老师的电子信箱。

实验四JSP技术应用实验
【实验目的】掌握JSP脚本元素和JSP指令【实验内容】
1．应用JSP技术在浏览器中输出4行由大变小的文字。

2．应用Date函数读取系统当前时间，根据不同的时间段，在浏览器输出不同的问候语，例如上午0~12点之间输出“早上好”，同时把系统的年、月、日、小时、分、秒和星期输出到用户的浏览器。

3．加载静态文件。

制作一个HTML文件，在页面上输出一行文字，例如“include指令的使用。

”等。

然后制作一个JSP文件，应用include指令加载刚制作的HTML文件，在客户端显示出来，并在客户端的“查看源文件”中观察源文件。

【实验报告】将实验文件发送到老师的电子信箱。

实验五JSP动作
【实验目的】掌握JSP动作【实验内容】
1．加载动态文件，制作一个JSP文件，计算一个数的平方根，然后再制作一个JSP文件，应用动作加载刚制作的JSP文件，在客户端显示出来，并在客户端的“查看源文件”中观察源文件。

2．设计表单，制作读者选购图书的界面，当读者选中一本图书
后，单击“确定”按钮，页面跳转到介绍该图书信息页面，请用“jsp:forward page=”语句。

【实验报告】将实验文件发送到老师的电子信箱。

实验六JSP的动作使用
【实验目的】掌握动作的使用【实验内容】
1．制作一个页面，页面的背景颜色，文字的大小、字体和颜色可以根据用户的选择来实施。

界面如下图所示，要求应用Java Bean 完成。

2．应用JavaBean完成一个计数器的制作，计数器beans的范围是application的，由不同用户共享。

【实验报告】将实验文件发送到老师的电子信箱。

实验七JSP内置对象——request对象和response对象
【实验目的】掌握JSP的request和response对象的使用【实验内容】
1. 制作一个购书页面，文件如下图1所示，要求用户输入用户名和密码，并通过下拉菜单选择需要购买的图书，单击“确定”按钮，将信息发往服务器端的文件，服务器端文件接收用户输入并输出用户名和所购图书。

2. 设计表单，制作读者选购图书的界面，当读者选中一本图书后，单击“确定”按钮，页面跳转到介绍该图书信息页面，要求使用response对象sendRedirect方法。

程序运行结果如下图所示。