JSP动态网站开发项目教程.ppt

《JSP动态网站开发项目教程.ppt》由会员分享，可在线阅读，更多相关《JSP动态网站开发项目教程.ppt（302页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第一章第一章开发任务描述第一章开发任务描述第一章开发任务描述本课程将以网上论坛的开发过程为线索，展本课程将以网上论坛的开发过程为线索，展开开JSP技术的学习之旅。那么，我们究竟要完成技术的学习之旅。那么，我们究竟要完成一个怎样的论坛网站呢？下面对该系统的需求作一个怎样的论坛网站呢？下面对该系统的需求作了简单的介绍。了简单的介绍。思考：思考：p论坛网站面对哪些用户？论坛网站面对哪些用户？p面对论坛的每一类用户，应提供哪些功能？面对论坛的每一类用户，应提供哪些功能？系统的一级用例图系统的一级用例图任务描述任务描述p从上图可知，论坛网站应为三类用户角色提供服从上图可知，论坛网站应为三类用户角色提供服

2、务，分别为普通用户、版主和管理员。务，分别为普通用户、版主和管理员。p可进一步通过二级用例图，较详细地描述为每类可进一步通过二级用例图，较详细地描述为每类角色提供的功能。角色提供的功能。面向普通用户的前台操作用例图面向普通用户的前台操作用例图任务描述任务描述p要开发一个功能全面的论坛，其业务逻辑还是比要开发一个功能全面的论坛，其业务逻辑还是比较复杂的。为了避免因业务逻辑的复杂性干扰了较复杂的。为了避免因业务逻辑的复杂性干扰了读者对技术本身的理解和掌握，后面章节仅以开读者对技术本身的理解和掌握，后面章节仅以开发单版块论坛的前台子系统作为学习案例，包括发单版块论坛的前台子系统作为学习案例，包括普通

3、用户的注册、登录、发帖、回帖、帖子浏览普通用户的注册、登录、发帖、回帖、帖子浏览等功能的实现。等功能的实现。思考：思考：1.为提高用户参与发帖或回帖的积极性，可以为论为提高用户参与发帖或回帖的积极性，可以为论坛增加哪些功能？坛增加哪些功能？2.若论坛的用户之间希望能有一对一的短消息交流，若论坛的用户之间希望能有一对一的短消息交流，则应该添加哪些功能？则应该添加哪些功能？3.应为论坛的管理员设立哪些功能？请分析并给出应为论坛的管理员设立哪些功能？请分析并给出相关的用例图。相关的用例图。第第2章章JSP概述概述本章主要内容本章主要内容2.1静态网页与动态网页静态网页与动态网页2.2主流动态网站技术

4、及实现模式主流动态网站技术及实现模式2.3HTTP的请求的请求/响应模型响应模型2.4JSP页面的执行流程页面的执行流程第第2章章 JSP概述概述pJSP的全称为的全称为JavaServerPages，顾名思义，顾名思义，是用是用Java编写的运行在服务器端的网页。编写的运行在服务器端的网页。p在传统的在传统的HTML网页文件中加入网页文件中加入Java代码片段代码片段(Scriplet)和和JSP自身特有的标记，就形成了自身特有的标记，就形成了JSP的动态网页。的动态网页。2.1 静态网页与动态网页静态网页与动态网页p静态网页：静态网页：在在Internet发展的初期，一般网页发展的初期，一

5、般网页主要是以信息发布为主的，不同的用户访问同一主要是以信息发布为主的，不同的用户访问同一网页时，看到的内容都是相同的，这时的网页不网页时，看到的内容都是相同的，这时的网页不具有与用户交互的能力，不能针对不同的需求给具有与用户交互的能力，不能针对不同的需求给予不同的反馈信息，在开发人员制作完毕后，其予不同的反馈信息，在开发人员制作完毕后，其内容就几乎固定不变了，这样的网页我们称之为内容就几乎固定不变了，这样的网页我们称之为“静态网页静态网页”。2.1 静态网页与动态网页静态网页与动态网页p动态网页：动态网页：今天今天Internet上的网页，上的网页，基本上是基本上是以网页的形式提供给用户使用

6、的应用程序，具有以网页的形式提供给用户使用的应用程序，具有逻辑处理的能力。它们能接收用户的信息，并且逻辑处理的能力。它们能接收用户的信息，并且可根据用户的需求给予相应的反馈，即具有与用可根据用户的需求给予相应的反馈，即具有与用户交互的功能，我们称之为户交互的功能，我们称之为“动态网页动态网页”。p从技术的角度说，传送给客户端的网页内容是在从技术的角度说，传送给客户端的网页内容是在客户端发起请求后，由服务器执行相关的程序后客户端发起请求后，由服务器执行相关的程序后动态生成的。动态生成的。这也是称之为这也是称之为“动态网页动态网页”的原因。的原因。2.2 主流动态网站技术及实现模式主流动态网站技术

7、及实现模式2.2.1几种主流的动态网站开发技术几种主流的动态网站开发技术1.ASP(ActiveServerPages)2.PHP(PersonalHomePages)3.JSP(JavaServerPages)4.ASP.NET2.2.2 动态网站技术的实现模式动态网站技术的实现模式p目前流行的几种动态网站开发技术，都采用了相目前流行的几种动态网站开发技术，都采用了相似的实现模式：即以静态网页似的实现模式：即以静态网页(HTML+CSS+JavaScript)为基础，在其中嵌入采用为基础，在其中嵌入采用某种高级语言编写的逻辑代码段，使之具备某种高级语言编写的逻辑代码段，使之具备“动动态态”生

8、成网页内容的能力。生成网页内容的能力。2.2.2 动态网站技术的实现模式动态网站技术的实现模式pJSP也采用了上述的模式，它通过在传统的也采用了上述的模式，它通过在传统的HTML页面页面中加入中加入Java代码段及代码段及JSP标记来完成逻辑处理。标记来完成逻辑处理。2.3 HTTP的请求的请求/响应模型响应模型p客户端：客户端：我们通常使用各类浏览器软件访问网站，我们通常使用各类浏览器软件访问网站，这些浏览器或其它下载工具常常被称之为这些浏览器或其它下载工具常常被称之为“客户客户端端”。p客户端与客户端与Internet上的服务器之间是采用上的服务器之间是采用HTTP协议进行通信的，因此有必

9、要了解一下协议进行通信的，因此有必要了解一下HTTP协协议的相关知识。议的相关知识。2.3 HTTP的请求的请求/响应模型响应模型pHTTP协议：协议：即超文本传输协议即超文本传输协议(HypertextTransferProtocol)的简称，用于传输超文本的简称，用于传输超文本内容，是基于应用层的网络通信规范，即客户端内容，是基于应用层的网络通信规范，即客户端与服务器进行通信时需要遵守的一种规范，广泛与服务器进行通信时需要遵守的一种规范，广泛应用于应用于WWW的全球信息服务。这里的服务器端的全球信息服务。这里的服务器端是指提供是指提供HTTP服务的部分，而客户端是指浏览服务的部分，而客户端

10、是指浏览器或者下载工具等。器或者下载工具等。2.3 HTTP的请求的请求/响应模型响应模型HTTP协议采用协议采用“发起请求发起请求/发回响应发回响应”的方式进行的方式进行双方的通信双方的通信，即请求即请求/响应模型响应模型(request/response)，具体工作流程如下具体工作流程如下：1.客户端请求客户端请求HTTP服务服务2.服务端接受请求并返回服务端接受请求并返回HTTP响应响应3.断开连接，浏览器解析响应断开连接，浏览器解析响应2.3 HTTP的请求的请求/响应模型响应模型1.客户端请求客户端请求HTTP服务服务首先，客户端向服务器发起连接请求，服务器接首先，客户端向服务器发起

11、连接请求，服务器接受并建立通信连接；受并建立通信连接；连接建立成功后，客户端将请求信息发给服务器。连接建立成功后，客户端将请求信息发给服务器。一个请求主要由一个请求主要由4个部分组成，格式如下：个部分组成，格式如下：HTTP请求行请求行请求标头请求标头空行空行消息体消息体(可选可选)消息体中包含要发送给服务器的所有数据，如请求消息体中包含要发送给服务器的所有数据，如请求参数、参数、Cookie等。等。2.3 HTTP的请求的请求/响应模型响应模型2.服务端接受请求并返回服务端接受请求并返回HTTP响应响应Web服务器收到请求后，解析请求并定位指定请求服务器收到请求后，解析请求并定位指定请求资源

12、。服务器将响应内容以特定的格式发送给客户资源。服务器将响应内容以特定的格式发送给客户端。一个响应由端。一个响应由4个部分组成，格式为：个部分组成，格式为：HTTP状态行状态行响应标头响应标头空行空行消息体消息体(可选可选)消息体中包含了要显示在浏览器中的所有内容。消息体中包含了要显示在浏览器中的所有内容。2.3 HTTP的请求的请求/响应模型响应模型3.断开连接，浏览器解析响应断开连接，浏览器解析响应发送完数据后，服务端关闭连接。浏览器解析状态发送完数据后，服务端关闭连接。浏览器解析状态行、响应标头、空行、消息体中的响应数据等，根行、响应标头、空行、消息体中的响应数据等，根据据HTML的语法和

13、语义对其进行格式化，在窗口中的语法和语义对其进行格式化，在窗口中显示显示HTML格式的页面内容。格式的页面内容。HTTP协议的特点：协议的特点：pHTTP协议是无状态的协议，即在处理完一个协议是无状态的协议，即在处理完一个请求后，请求后，Web服务器并不记住关于这个客户端或这服务器并不记住关于这个客户端或这次请求的任何信息，而只在一次请求期间建立起一次请求的任何信息，而只在一次请求期间建立起一个临时的通信连接，处理完成后立即断开连接。个临时的通信连接，处理完成后立即断开连接。p由于由于HTTP协议的这种协议的这种“无状态性无状态性”协议对事协议对事务处理没有记忆能力，若后续的事务处理需要之前务

14、处理没有记忆能力，若后续的事务处理需要之前的处理信息，那么这些信息必须使用其它方法在协的处理信息，那么这些信息必须使用其它方法在协议之外来保存。议之外来保存。2.4 JSP页面的执行流程页面的执行流程当一个当一个JSP页面第一次被请求时，其处理过程如下图所示。页面第一次被请求时，其处理过程如下图所示。2.4 JSP页面的执行流程页面的执行流程p首先，被请求的首先，被请求的JSP文件会被文件会被JSP引擎引擎(如如Tomcat)翻译翻译成一个成一个Java源文件，这个源文件，这个Java源文件实际上是一个源文件实际上是一个Servlet类文件，之后类文件，之后JSP引擎调用引擎调用Java编译器

15、把它编编译器把它编译成字节码文件译成字节码文件(.class文件文件)，可以把这个阶段称为，可以把这个阶段称为JSP页面的编译阶段；接下来是请求处理阶段，即由页面的编译阶段；接下来是请求处理阶段，即由JVM(JavaVirtualMachine)执行此执行此class文件，最文件，最后将执行的结果以后将执行的结果以HTML格式格式(即浏览器能理解的格式即浏览器能理解的格式)返返回给客户端。回给客户端。p若此页面之前已被请求过，且在上次编译后程序未发生修若此页面之前已被请求过，且在上次编译后程序未发生修改，则不会再次编译，而是直接执行已经编译好的改，则不会再次编译，而是直接执行已经编译好的cla

16、ss文件。因此，文件。因此，JSP页面在第一次被请求时，执行的时间相页面在第一次被请求时，执行的时间相对较长。对较长。思考思考p1.静态网站与动态网站有什么区别？静态网站与动态网站有什么区别？p2.阅读本章中介绍的第阅读本章中介绍的第1个个JSP文件，说明其中文件，说明其中有哪些形式的有哪些形式的JSP页面元素页面元素.p3.请简述请简述HTTP协议的请求协议的请求/响应模型响应模型.p4.从从JSP页面的执行流程看，配置页面的执行流程看，配置JSP的服务器的服务器需要安装哪些软件？需要安装哪些软件？第第3章章开发工具的安装与使用开发工具的安装与使用本章主要内容本章主要内容3.1NetBean

17、sIDE的安装的安装3.2创建项目与编写程序创建项目与编写程序3.3在在NetBeansIDE中调试程序中调试程序主流的开发工具主流的开发工具目前，主流的开发工具有：目前，主流的开发工具有：pMyEclipsepNetBeansIDE本课程将采用本课程将采用NetBeansIDE作为开发工具，作为开发工具，希望采用希望采用MyEclispe作为开发工具的同学，可参作为开发工具的同学，可参考教材第考教材第20章中的安装及使用说明。章中的安装及使用说明。NetBeans IDE的安装与使用的安装与使用p在安装在安装NetBeansIDE之前，应先安装好之前，应先安装好JDK(JavaDevelop

18、mentKit)。pJDK的下载网址是的下载网址是http:/ 下载安装包下载安装包p在在NetBeans的官方网站的官方网站beans.org可免费下载最新版本的可免费下载最新版本的NetBeansIDE。3.1.2 安装安装NetBeans IDEp请按照教材请按照教材P12P15页的安装教程进行。页的安装教程进行。3.2 创建项目与编写程序创建项目与编写程序NetBeansIDE的使用界面：的使用界面：3.2 创建项目与编写程序创建项目与编写程序p请按照教材请按照教材P16P28的内容，学习在的内容，学习在NetBeans中创建中创建JavaWeb项目、新建项目、新建JSP页面以及其它基

19、本操作。页面以及其它基本操作。3.3 在在NetBeans IDE中调试程序中调试程序编写程序时，错误是难免的，高效地排查这些误，是程编写程序时，错误是难免的，高效地排查这些误，是程序员必备的基本技能。下面介绍对于不同的程序错误采序员必备的基本技能。下面介绍对于不同的程序错误采取的一般性排查方法。取的一般性排查方法。1.语法错误语法错误2.运行时异常运行时异常3.逻辑错误逻辑错误请按照教材请按照教材P28-P30的方法，掌握在程序中设置断点、的方法，掌握在程序中设置断点、跟踪代码的执行、查看变量及表达式的值的方法。跟踪代码的执行、查看变量及表达式的值的方法。第第4章章论坛网站的设计论坛网站的设

20、计本章主要内容本章主要内容4.1功能模块设计功能模块设计4.2页面列表页面列表4.3数据库结构设计数据库结构设计4.1 功能模块设计功能模块设计1.用户注册用户注册本案例中，论坛的所有功能均只对注册用户开放。本案例中，论坛的所有功能均只对注册用户开放。未注册的新用户可在注册页面未注册的新用户可在注册页面reg.jsp中填写自己中填写自己的用户名、密码、的用户名、密码、E-mail、头像等个人信息。、头像等个人信息。用户名在整个论坛中应该是唯一的，页面用户名在整个论坛中应该是唯一的，页面chkReg.jsp判断此用户名是否已被他人注册了，判断此用户名是否已被他人注册了，若未被使用，则将用户信息保

21、存到数据库中，并给若未被使用，则将用户信息保存到数据库中，并给出相应的提示信息。出相应的提示信息。4.1 功能模块设计功能模块设计2.用户登录用户登录用户可使用注册时填写的用户名和密码登录论坛。用户可使用注册时填写的用户名和密码登录论坛。当用户在登录页面当用户在登录页面login.jsp中输入用户名和密码，中输入用户名和密码，并且提交信息后，处理页面并且提交信息后，处理页面chkLogin.jsp根据用根据用户输入的信息查询数据库，完成用户信息的检测工户输入的信息查询数据库，完成用户信息的检测工作。作。用户登录成功后，将自动跳转到论坛的首页。用户登录成功后，将自动跳转到论坛的首页。4.1 功能

22、模块设计功能模块设计p3.帖子列表显示帖子列表显示p论坛首页论坛首页index.jsp以列表的形式显示论坛主题以列表的形式显示论坛主题帖的标题、作者、点击数等概要信息，当用户点帖的标题、作者、点击数等概要信息，当用户点击每一个主题帖的标题超链接后，将跳转到帖子击每一个主题帖的标题超链接后，将跳转到帖子详情页面详情页面postDetail.jsp，在这里可查看该帖，在这里可查看该帖子的内容及回复帖信息，此时，该主题帖的点击子的内容及回复帖信息，此时，该主题帖的点击数应加数应加1。4.1 功能模块设计功能模块设计p4.帖子详情浏览帖子详情浏览p在帖子列表页面点击主题帖的标题后，可在页面在帖子列表页

23、面点击主题帖的标题后，可在页面postDetail.jsp查看主题帖的详细信息，包括查看主题帖的详细信息，包括主题帖的作者主题帖的作者(用户名、级别、注册时间等信息用户名、级别、注册时间等信息)、标题、内容、发布时间以及本主题帖所有的回复标题、内容、发布时间以及本主题帖所有的回复帖等信息。帖等信息。4.1 功能模块设计功能模块设计p5.发帖发帖p登录用户可以发表新的话题，在发表新帖页面登录用户可以发表新的话题，在发表新帖页面newPost.jsp中，用户应填写帖子的标题和内中，用户应填写帖子的标题和内容，信息提交给处理页面容，信息提交给处理页面savePost.jsp后，将后，将该主题帖的标题

24、、内容、作者及发帖时间等信息该主题帖的标题、内容、作者及发帖时间等信息保存到数据库中。保存到数据库中。p对于新发表的帖子，其点击数和回复数均默认为对于新发表的帖子，其点击数和回复数均默认为0。4.1 功能模块设计功能模块设计p6.回帖回帖p登录用户在浏览帖子的同时，可以针对该主题帖登录用户在浏览帖子的同时，可以针对该主题帖发表自己的回复内容。用户通过回帖页面发表自己的回复内容。用户通过回帖页面newReply.jsp输入回复帖的标题和内容，提交输入回复帖的标题和内容，提交后，由处理页面后，由处理页面saveReply.jsp将回复帖的信将回复帖的信息保存到数据库中，包括回复帖的标题、内容、息保

25、存到数据库中，包括回复帖的标题、内容、作者、发表时间以及相关主题帖的作者、发表时间以及相关主题帖的id，此外，相，此外，相关主题帖的回复数应加关主题帖的回复数应加1。4.1 功能模块设计功能模块设计p7.编辑帖子编辑帖子p登录用户在浏览帖子时，若某个主题帖或回复帖登录用户在浏览帖子时，若某个主题帖或回复帖的作者为当前用户，则应提供修改帖子的超链接，的作者为当前用户，则应提供修改帖子的超链接，点击此链接，可打开帖子修改页面点击此链接，可打开帖子修改页面editPost.jsp，用户可以在此修改自己发表的，用户可以在此修改自己发表的主题帖或回复帖，包括标题和内容，修改完成后，主题帖或回复帖，包括标

26、题和内容，修改完成后，提交到提交到saveEditPost.jsp页面，以更新数据库页面，以更新数据库中的帖子信息。中的帖子信息。4.1 功能模块设计功能模块设计p8.修改个人信息修改个人信息p登录用户可通过个人资料更新页面登录用户可通过个人资料更新页面editInfo.jsp修改自己的密码、头像等信息，输入新的内容后，修改自己的密码、头像等信息，输入新的内容后，提交到提交到saveEditInfo.jsp，完成个人资料的更，完成个人资料的更新。新。4.1 功能模块设计功能模块设计p9.退出系统退出系统p退出网站，即注销登录用户的信息，此后需要重退出网站，即注销登录用户的信息，此后需要重新登录

27、后才能访问论坛。退出处理页面为新登录后才能访问论坛。退出处理页面为exit.jsp。4.2 页面列表页面列表编号编号功能模块功能模块页面名称页面名称说明说明1帖子列表显示帖子列表显示index.jsp为登录用户显示帖子标题等概况信息列表为登录用户显示帖子标题等概况信息列表2登录登录login.jsp及及chkLogin.jsplogin.jsp-登录信息填写页面登录信息填写页面chkLogin.jsp-登录验证处理页面登录验证处理页面3注册注册reg.jsp及及chkReg.jspreg.jsp-注册信息填写页面注册信息填写页面chkReg.jsp-注册处理页面注册处理页面4个人信息修改个人信

28、息修改editInfo.jsp及及saveEditInfo.jspeditInfo.jsp-修改个人信息的页面，可修改头修改个人信息的页面，可修改头像或用户密码等。像或用户密码等。saveEditInfo.jsp-更新数据库中的个人资更新数据库中的个人资料料5发帖发帖newPost.jsp及及savePost.jspnewPost.jsp-发表新帖的输入界面发表新帖的输入界面savePost.jsp-保存帖子保存帖子6回帖回帖newReply.jsp及及saveReply.jspnewReply.jsp-发表对某个帖子的回复帖发表对某个帖子的回复帖saveReply.jsp-保存回复帖保存回复

29、帖7浏览帖子浏览帖子postDetail.jsp显示帖子的详情，含主题帖及回复帖的信息显示帖子的详情，含主题帖及回复帖的信息8修改帖子修改帖子editPost.jsp及及saveEditPost.jspeditPost.jsp-帖子信息修改页面帖子信息修改页面saveEditPost.jsp-保存修改信息保存修改信息9退出退出exit.jsp退出系统，将回到登录界面。退出系统，将回到登录界面。4.3 数据库结构设计数据库结构设计p为实现前台的基本功能，数据库中至少应设计以为实现前台的基本功能，数据库中至少应设计以下下3张表：张表：1.用户信息表用户信息表users4.3 数据库结构设计数据库结

30、构设计2.主题帖信息表主题帖信息表posts4.3 数据库结构设计数据库结构设计3.回复帖信息表回复帖信息表reply思考思考p1.若需要为论坛分设不同的版块，每一版块设立若需要为论坛分设不同的版块，每一版块设立1-2个版主，此时数据库结构应如何设计？个版主，此时数据库结构应如何设计？p2.若要为普通会员设立等级，当会员登录、发帖、若要为普通会员设立等级，当会员登录、发帖、回帖时，可分别得到不同数目的积分，并根据其回帖时，可分别得到不同数目的积分，并根据其积分设置会员的等级，则数据库结构应如何设计积分设置会员的等级，则数据库结构应如何设计？p3.若需要为会员添加一对一的短消息交流功能，若需要为

31、会员添加一对一的短消息交流功能，则相应的表结构应如何设计？则相应的表结构应如何设计？第第5章章制作静态网页制作静态网页本章主要内容本章主要内容5.1制作网站的原型制作网站的原型5.2制作注册页面制作注册页面5.2.1HTML的常用标签的常用标签5.2.2CSS简介简介5.2.3使用使用HTMLCSS制作注册页面制作注册页面5.2.4JavaScript简介简介5.2.5为注册表单添加为注册表单添加JavaScript验证验证5.1 制作网站的原型制作网站的原型这里给出了几个主要页面的原型：这里给出了几个主要页面的原型：页面整体布局原型图页面整体布局原型图5.1 制作网站的原型制作网站的原型前台

32、首页（帖子列表显示页面）原型：前台首页（帖子列表显示页面）原型：5.1 制作网站的原型制作网站的原型帖子详情页面的原型：帖子详情页面的原型：5.1 制作网站的原型制作网站的原型发表新帖页面的原型：发表新帖页面的原型：5.2 制作注册页面制作注册页面为了给新会员提供一个注册页面，我们需要完成以为了给新会员提供一个注册页面，我们需要完成以下任务：下任务：p使用使用HTMLCSS制作输入页面制作输入页面p使用使用JavaScript完成输入数据的前端验证完成输入数据的前端验证下面介绍下面介绍HTML、CSS以及以及JavaScript的基础知的基础知识。识。5.2.1 HTML的常用标签的常用标签1

33、.表格系列标签表格系列标签.该系列的标签可在页面上绘制由行和列组成的表格，并在单该系列的标签可在页面上绘制由行和列组成的表格，并在单元格中显示文字、超链接、图片等其它元素。元格中显示文字、超链接、图片等其它元素。p标签对表示一个表格标签对表示一个表格p标签对表示表格中的一行标签对表示表格中的一行p标签对表示行中的一个单元格，标签对之标签对表示行中的一个单元格，标签对之间的内容显示在该单元格中间的内容显示在该单元格中p标签对表示标题行中的一个单元格，一般标签对表示标题行中的一个单元格，一般为居中加粗显示。为居中加粗显示。p标签对显示在表格上方或下标签对显示在表格上方或下方的表格标题方的表格标题5

34、.2.1 HTML的常用标签的常用标签例例5.1的主要代码的主要代码:CD库存表库存表歌星歌星库存量库存量单价单价张学友张学友1200120.00元元李克勤李克勤68080.00元元5.2.1 HTML的常用标签的常用标签例例5.2表格标签的跨行跨列示例表格标签的跨行跨列示例星期一星期一上午上午下午下午语文语文数学数学5.2.1 HTML的常用标签的常用标签2.表单系列标签表单系列标签pform标签标签格式：格式：form标签对表示一个表单的开始和结束，属性标签对表示一个表单的开始和结束，属性说明：说明：naction属性：表示接收本表单数据的资源名称属性：表示接收本表单数据的资源名称nmet

35、hod属性：表示提交数据的方式，可取属性：表示提交数据的方式，可取post或或get值，默认值是值，默认值是get。取。取get方式时，提交的数方式时，提交的数据将附在网页地址据将附在网页地址(即即url)后提交给接收页面。后提交给接收页面。nname属性：表示该表单的名称，若无需要可以省略。属性：表示该表单的名称，若无需要可以省略。5.2.1 HTML的常用标签的常用标签pinput标签标签格式：格式：input标签是最常用的输入标签，其属性说明如下：标签是最常用的输入标签，其属性说明如下：nname属性表示该输入元素的名字，也即向服务器提交的请求参属性表示该输入元素的名字，也即向服务器提交

36、的请求参数的名称，通常应起一个有意义的名字；数的名称，通常应起一个有意义的名字；nid属性表示该元素在页面中的唯一标识名，属性表示该元素在页面中的唯一标识名，CSS可以通过可以通过id来控来控制该元素的样式，而制该元素的样式，而JavaScript代码也是通过代码也是通过id来查找页面上来查找页面上的某个元素的。一般来说，在不引起混淆的情况下，可以将的某个元素的。一般来说，在不引起混淆的情况下，可以将name和和id设为相同的值。设为相同的值。nvalue属性表示该输入元素的初始值，默认值为空字符串。属性表示该输入元素的初始值，默认值为空字符串。5.2.1 HTML的常用标签的常用标签ninp

37、ut标签的标签的type属性可取不同属性可取不同的值，在页面上表现的值，在页面上表现为不同的形态，如右为不同的形态，如右表所示表所示。type属性的取值属性的取值类型说明类型说明text单行文本框单行文本框password密码输入框密码输入框radio单选按钮单选按钮checkbox复选框复选框file文件选择框文件选择框hidden隐藏域隐藏域submit提交按钮提交按钮reset重置按钮重置按钮button普通按钮普通按钮image图片按钮图片按钮5.2.1 HTML的常用标签的常用标签pselect标签标签格式：格式：选项选项1选项选项2.5.2.1 HTML的常用标签的常用标签例例5.

38、4使用下拉框提供多选一的选项使用下拉框提供多选一的选项上海上海北京北京广州广州5.2.1 HTML的常用标签的常用标签3.超链接标签超链接标签该标签用于从一个网页跳转到另一个网页。该标签用于从一个网页跳转到另一个网页。格式：格式：浏览器中显示的热点浏览器中显示的热点属性说明：属性说明：href:点击后要打开的目标资源点击后要打开的目标资源(通常即网页通常即网页)的路径，通常设为相对路径。的路径，通常设为相对路径。title属性：当鼠标移到链接上方时显示的提示文字。属性：当鼠标移到链接上方时显示的提示文字。target:表示目标资源的内容将在哪个位置打开，可取值如下：表示目标资源的内容将在哪个位

39、置打开，可取值如下：_blank：在新的浏览器窗口打开：在新的浏览器窗口打开_parent：在父框架窗口中打开：在父框架窗口中打开_self：在当前窗口中显示目标：在当前窗口中显示目标URL中的内容，为缺省值中的内容，为缺省值_top：将目标：将目标URL中的内容显示在最上层的窗口中中的内容显示在最上层的窗口中框架名称：用在框架网页中，用于将目标框架名称：用在框架网页中，用于将目标URL中的内容显示在指定的框架中中的内容显示在指定的框架中5.2.1 HTML的常用标签的常用标签4.图片标签图片标签这是一个单标签，这是一个单标签，用于显示指定的图片。用于显示指定的图片。例：例：nsrc属性指明要

40、显示的图片文件的路径，与超链接一样，属性指明要显示的图片文件的路径，与超链接一样，也可使用绝对路径或相对路径；也可使用绝对路径或相对路径；nwidth属性表示所显示的图片的宽度，这里设为了属性表示所显示的图片的宽度，这里设为了200px，即，即200个像素个像素。还可设定。还可设定height属性，表属性，表示图片的显示高度；示图片的显示高度；nalt属性，表示未找到相应的图片文件时，用以替代图属性，表示未找到相应的图片文件时，用以替代图片而显示的文字内容。片而显示的文字内容。5.2.2 CSS简介简介pCSS(CascadingStyleSheet)是级联样式表是级联样式表或层叠样式表的简称

41、，用来控制页面元素的字体、或层叠样式表的简称，用来控制页面元素的字体、字号、色彩、背景、间距以及大小、位置等格式字号、色彩、背景、间距以及大小、位置等格式属性属性。pDIV+CSS页面布局模式是页面布局模式是W3C标准的一个典标准的一个典型应用，也是目前主流的页面布局模式。型应用，也是目前主流的页面布局模式。5.2.2 CSS简介简介1.在网页中使用在网页中使用CSS的三种方式的三种方式按照按照CSS代码在网页文件中出现的不同位置，可代码在网页文件中出现的不同位置，可以将以将CSS划分为内联样式、嵌入样式和外部样式划分为内联样式、嵌入样式和外部样式3种形式。种形式。5.2.2 CSS简介简介1

42、.在网页中使用在网页中使用CSS的三种方式的三种方式1)内联样式内联样式又称为又称为“行内样式行内样式”，通过设定，通过设定HTML标签的标签的style属性值，嵌入属性值，嵌入CSS代码。如：代码。如：Hello5.2.2 CSS简介简介1.在网页中使用在网页中使用CSS的三种方式的三种方式2)嵌入样式嵌入样式在页面的头部使用在页面的头部使用标签对嵌入标签对嵌入CSS代码。如：代码。如：bodytext-align:center;font-size:12px;color:#ccc;5.2.2 CSS简介简介1.在网页中使用在网页中使用CSS的三种方式的三种方式3)外部样式外部样式将将CSS代

43、码编写在一个独立的文件中，该文件的后缀名为代码编写在一个独立的文件中，该文件的后缀名为.css，而后在，而后在页面文件中使用页面文件中使用标签或标签或.标签对来指标签对来指明所需要使用的样式文件。例如明所需要使用的样式文件。例如CSS文件名为文件名为my.css，则在页面中，则在页面中引入该样式文件的代码为：引入该样式文件的代码为：或或5.2.2 CSS简介简介2.CSS选择器选择器CSS通过为指定的元素定义样式来达到样式控制的通过为指定的元素定义样式来达到样式控制的目的。定义目的。定义CSS样式的格式为：样式的格式为：选择器选择器属性名称属性名称1：属性值：属性值1;属性名称属性名称2：属性

44、值：属性值2;.5.2.2 CSS简介简介基本的选择器有以下基本的选择器有以下3种：种：1)标签选择器标签选择器通过通过HTML的标签名称来指定样式。的标签名称来指定样式。例如例如:CSS代码代码pcolor:blue;表示将所有的表示将所有的标签中的文字设置为蓝色。标签中的文字设置为蓝色。5.2.2 CSS简介简介2)id选择器选择器若为页面的一个元素指定了若为页面的一个元素指定了id，则可通过，则可通过id单独为单独为其定义其定义CSS样式，一般来说，元素的样式，一般来说，元素的id在整个页在整个页面中应是唯一的，通过面中应是唯一的，通过id定义定义CSS的语法格式如的语法格式如下：下：#

45、id名称名称属性名称属性名称1：属性值：属性值1;属性名称属性名称2：属性值：属性值2;.;属性名称属性名称n：属性值：属性值n;注意注意id名称前面有一个符号名称前面有一个符号“#”。参考参考例例5.6。5.2.2 CSS简介简介3)类选择器类选择器若页面上的多个元素都要使用相同的样式，则可通若页面上的多个元素都要使用相同的样式，则可通过过class属性为这些元素指定相同的类名，然后属性为这些元素指定相同的类名，然后为该类定义一组样式。通过类名定义样式的语法为该类定义一组样式。通过类名定义样式的语法格式如下：格式如下：.类名类名属性名称：属性值属性名称：属性值;注意注意:类名前有一个圆点符类

46、名前有一个圆点符“.”。参考参考例例5.7。5.2.2 CSS简介简介3.定位与浮动定位与浮动div标签表示页面上的一个区域，一个页面可使标签表示页面上的一个区域，一个页面可使用多个用多个标签划分为不同的区域或层次。通标签划分为不同的区域或层次。通过设定过设定div的的float(浮动浮动)属性或属性或position(定位定位)属性，可以确定属性，可以确定div在页面上的显示位置。在页面上的显示位置。5.2.2 CSS简介简介例例5.8三行两列式页面布局示例三行两列式页面布局示例(web5cssdiv.html)5.2.2 CSS简介简介css文件：文件：web5csscssmain.css

47、5.2.3 使用使用HTMLCSS制作注册页面制作注册页面在学习了前面在学习了前面2小节的知识后，借助于静态网页制小节的知识后，借助于静态网页制作工具作工具Dreamweaver，不难制作出论坛的用户，不难制作出论坛的用户注册页面。注册页面。代码请参考：代码请参考：web/5/5_2/reg.jsp5.2.3 使用使用HTMLCSS制作注册页面制作注册页面注册页面运行效果如下：注册页面运行效果如下：5.2.4 JavaScript简介简介JavaScript(简称简称JS)是由是由Netscape公司推出的公司推出的客户端脚本语言，用客户端脚本语言，用JavaScript编写的代码是由编写的代

48、码是由浏览器来解释执行的，主要应用于制作网页特效、浏览器来解释执行的，主要应用于制作网页特效、客户端数据验证等等。客户端数据验证等等。近年来，随着近年来，随着Ajax技术的兴起，技术的兴起，JavaScript又在又在Web开发领域重焕了生机。这里只简单介绍利用开发领域重焕了生机。这里只简单介绍利用JavaScript实现网页的一些动态效果及表单数据实现网页的一些动态效果及表单数据的验证。的验证。5.2.4 JavaScript简介简介1.JavaScript的基本语法的基本语法通过比较通过比较JS与与Java语法风格上的异同，有助于快速掌握语法风格上的异同，有助于快速掌握JavaScript

49、的基本语法，比较结果如下：的基本语法，比较结果如下：p与与Java一样，一样，JS是对大小写敏感的。是对大小写敏感的。pJS的分支语句、循环语句格式与的分支语句、循环语句格式与Java基本相同。基本相同。pJS中的语句不必以分号结尾，但为了与中的语句不必以分号结尾，但为了与Java保持一致，保持一致，建议加上分号。建议加上分号。pJS中的字符串可用双引号括起，也可用单引号括起。中的字符串可用双引号括起，也可用单引号括起。pJS中的变量定义采用中的变量定义采用:vars;这种形式，即不指出该变这种形式，即不指出该变量的类型，其类型由所赋的值决定。一个变量甚至可以不量的类型，其类型由所赋的值决定。

50、一个变量甚至可以不定义就直接使用。定义就直接使用。pJS中的函数定义以关键字中的函数定义以关键字function引导，参数及返回值引导，参数及返回值的类型不指出。的类型不指出。5.2 制作注册页面制作注册页面5.2.4JavaScript简介简介2.JS的事件处理的事件处理pJS主要通过其事件处理机制完成各种功能。主要通过其事件处理机制完成各种功能。p除了定时器事件外，主要是针对用户的键盘输入或鼠标动除了定时器事件外，主要是针对用户的键盘输入或鼠标动作而进行的处理。如作而进行的处理。如click(鼠标单击鼠标单击)事件、事件、mouseover(鼠标移上鼠标移上)事件、事件、mouseout(