Web——软件开发实践

1. 目的
   搭建Web网站以及运行环境。
2. JSP程序开发步骤
   (1) 根据服务器环境安装及设置
   编写JSP程序并进行发布，首先应安装及配置服务器。应该在Windows系列相应平台上安装JDK，其次设置环境变量，在系统设置环境变量CLASSPATN、JAVA_HOME、PATH。配置相应环境，测试安装状态。
   (2) 在编辑器中编写代码
   根据实际在记事本获Eclipse等工具下输入获修改源程序，根据程序的内容和应用选择将编好的程序以扩展名为.html或.jsp存入至发布目录中。
   (3) 在浏览器中执行和访问程序(Tomcat)
   在浏览器地址栏中输入http://localhost/目录名/待发布文件名称或者http://127.0.0.1/目录名/待发布文件名称、http://本机实际IP/目录名/待发布文件名后执行。

环境配置 & 源代码

Google chrome 80浏览器安装包(点击此处下载)

WinRAR 纯净安装包(点击此处下载)

apache-tomcat-9.0.41 (点击此处下载)

JDK11 安装包(点击此处下载)

Navicat 10.0.11 纯净版(点击此处下载)

mysql-5.1.55 X32 (点击此处下载)

源代码 (点击此处下载)

• JDK 11.0.4 windows-x64
  IntelliJ IDEA 2020.1 x64
  Mysql 5.1.55
  Navicat 10.0.11
  Tomcat 9.0.41
  Firefox 84.0.1 x64
  Google Chrome 87.0.4280.88 x64

Web案例实践

1. 目的
   熟练运用选定环境实现程序的编辑、编译和运行，能运用工具与语言开发程序；能熟练应用程序，控制页面布局、页面样式，结合Web开发语言编写Web案例程序。具备基本的Web程序开发能力。
2. 任务
   对于任务中的每个问题，分析并设计解题思路，编制程序，通过观察和调试工具纠错，运行得到正确结果，主要通过多个小案例程序，掌握页面设计语言、方法和技术，具体如下。
   注：本实验指导书以JSP工作原理和开发环境、语言为例，进行详细说明。
   （1）JSP运行环境安装及常用HTML标记使用
   要求学生熟悉JSP的开发环境，学会Tomcat服务器的安装配置和使用，掌握JSP的运行原理，使用Eclipse等工具编写简单JSP页面，运行调试，实验步骤如下。
   1） jsp开发环境配置
   2） 创建HTML文件
   3） 添加文本，利用标记设置
   4） 插入图片、超链接
   5） 建立班级课程表
   6） 利用框架创建子窗口
   （2）表格、表单、框架及页面总体设计与使用
   要求学生掌握表格、表单框架的概念、作用及设计方法，掌握CSS使用方法，结合HTML、CSS进行页面布局。利用表格显示网页，利用CSS页面布局。
   （3）JavaScript客户端脚本编程
   要求学生掌握常用动态网页中的常用客户端对象的使用方法。理解对象驱动机制的方式和方法，学会常用控件编写脚本程序，掌握JavaScript程序设计的基本内容和方法。

实验内容以及步骤

（1）设计注册页面
使用HTML5的新表单设计一个相对完善的注册页面，该页面将应用新的表单元素及表单的输入验证。页面应提供用户信息包括姓名、性别、出生年月日、住址等。同时对于用户各个输入信息还进行输入合法性的校验。
用户名必须为英文和数字组合，且长度大于6位；
验证密码强度，可以按照长度来设置强、中、弱。
验证两次输入密码是否一致。

（2）设计视频播放器
应用HTML5多媒体元素的属性及相关事件，实现媒体播放器，能够播放、暂停、快播、慢播、音量调节、显示播放进度等常用功能。界面设计要求三部分。
播放部分；播放进度条，可根据鼠标动作设定显示或隐藏；播放控制栏中提供功能键包括“播放/暂停”、“快播”、“慢播”、“增大音量”、“”减小音量“、“静音”。

（3）绘制时钟
使用HTML5的canvas元素，绘制一个时钟。时钟结构包括表盘、时针、分针、秒针。绘制表盘，包括时钟中心、外圈及刻度线。绘制时针、分针和秒针。
添加动画操作，使时针、分针以及秒针随时间变化改变位置。

（4）拖拽式点菜页面
应用HTML5的拖拽技术，实现一个点菜界面，在已有的菜品中，为制定顾客点选、分配。假设有三位顾客，每种菜品只能分配给任意一位顾客。分配菜品使用拖拽形式，当将某一菜品拖拽至顾客对应物品栏时，其他顾客将无法再次选择此菜品。设计界面包括两部分，一是顾客物品栏区域，一是已有菜品区域。添加各区域相应拖拽事件。

（5）购物车结算页面
使用表格实现购物车结算页面设计，添加样式，美化结算页面。
设计结算页面基础结构，包括商品名称、单价、购买数量、总价。在表格最后一行，是所有购物车内商品总价格。为界面增加CSS样式，分别对表格的表头、数据信息、最后一行统计信息增加相应的样式。

（1）个性留言板
留言板主要包括用户信息、留言信息，用户信息可以是用户名、用户头像等，留言信息与对应发表留言的用户信息处于同一区域。可以对用户头像以及留言文本增加相应样式。

（2）利用HTML文字与排版的设计方法实现下图在线新闻浏览页面

（3）利用HTML图像的设计方法实现下图在线图文杂志页面。

（4）利用HTML超链接的设计方法制作下图的电子书。

（5）利用CSS和HTML表单form的设计方法实现下图用户注册页面。

（1）利用CSS实现下图的报纸风格页面。

（2）利用CSS实现下图的登录页面。

（3）利用JavaScript实现简易在线计算器。

（4）利用鼠标事件实现下图获取鼠标坐标位置应用。

（5）利用CSS实现下图自适应Web主页媒体查询功能。主要适应浏览器不同的分辨率大小，自动调整页面元素布局。

（1）漂浮广告：使用JavaScript制作一个漂浮广告，要求此广告随机在页面浮动，当遇到窗口上下左右边缘时，改变浮动轨迹。要求图片结点动态定位。

（2）折叠式菜单：在网站中不仅可以设置导航条，还可以设置导航菜单。由于菜单内容比较多，同一页面显示比较杂乱，故采用收缩式的菜单形式。例如：当点击“订单管理”超级链接时，页面展开子菜单，包括“订单管理”，“已确定订单”和“回复管理”。主要利用显示隐藏表格的功能来实现收缩式导航菜单的功能。

（3）下拉式菜单：用层制作下拉菜单，当用鼠标指向菜单时，会在指向的菜单下面以下拉的方式显示下拉列表，并可以通过点击下拉列表中的选项进入指定的网页。可以使用CSS和JavaScript技术共同实现。

（4）公司网页头部和页脚制作：页面头部内容包括网站logo、导航条、Flash广告等信息。

（5）订购页面的制作：利用HTML5和CSS实现网上订购表单，同时利用JavaScript实现校验表单数据有效性。