Web——软件开发实践

1. 目的
   搭建Web 站以及运行环境。

环境配置 & 源代码

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. 任务
   对于任务中的每个问题，分析并设计解题思路，编制程序，通过观察和调试工具纠错，运行得到正确结果，主要通过多个小案例程序，掌握页面设计语言、方法和技术，具体如下。
   注：本实验指导书以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位；
验证密码强度，可以按照长度来设置强、中、弱。
验证两次输入密码是否一致。

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

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

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

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

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

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

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

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

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

文章知识点与官方知识档案匹配，可进一步学习相关知识Java技能树首页概览91438 人正在系统学习中