单元1 购物网站导航栏和信息提示设计（JSP）_第1页
单元1 购物网站导航栏和信息提示设计（JSP）_第2页
单元1 购物网站导航栏和信息提示设计（JSP）_第3页
单元1 购物网站导航栏和信息提示设计（JSP）_第4页
单元1 购物网站导航栏和信息提示设计（JSP）_第5页
已阅读5页，还剩108页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML5移动平台的JavaWeb

实用项目开发单元1购物网站导航栏和信息

提示设计（JSP） JSP（JavaServerPages）是目前流行的Web开发技术中应用最广泛的一种，是Java开发Web应用程序的基础与核心，主要用于开发企业级的Web项目，属于JavaEE技术范筹。 JSP程序采用Java语言作为脚本编程语言，这样不但使系统具有强大的对象处理能力，还可以动态创建Web页面的内容。 但Java语言中在使用一个对象之前都要通过关键字new先将这个对象进行 实例化才可以使用。 为了简化编程者的操作，JSP提供了9个内置对象，这也是JSP的预定义变量，也可以将其称为隐含对象或固有对象，它们都是由系统容器进行实例化和统一管理，在JSP页面中不需要使用new进行实例化，可以直接使用。 本单元我们将一起走进JSP开发领域，应用JSP开发技术设计包含导航栏和提示信息的页面。【知识梳理】 1．page指令 JSP程序属于动态网页，在没有添加功能代码的前提下，其基本代码与静态网页相比，主要是使用了页面指令page，对应的代码如下所示。<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%> 以下代码使用page指令指定页面出错的错误处理页面，导入相关的包。<%@pagelanguage="java"import="java.util.*"errorPage="error.jsp"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>序号属性名称使用样例使用说明1languagelanguage="java"用于设置JSP页面使用的语言，其默认值是Java2contentTypecontentType="text/html;charset=UTF-8"用于设置JSP页面发送到客户端文档的响应报头的MIME类型和字符编码，浏览器据此显示网页内容表1-1

page指令常用的属性及说明序号属性名称使用样例使用说明3pageEncodingpageEncoding="UTF-8"用于定义JSP页面的编码格式，也就是指定文件编码。如果没有设置该属性，JSP页面使用contentType属性指定的字符编码。如果两个属性都没有设置，则JSP页面使用“ISO-8859-1”字符编码4importimport="java.util.*"用于设置JSP导入的包，如果需要导入多个包，则使用半角逗号“,”分隔。JSP页面可以嵌入Java代码片段，这些Java代码在调用API时需要导入相应的包。默认情况下，如果未指定包，则将导入java.lang.*、java.servlet.*和java.servlet.jsp包5errorPageerrorPage="error.jsp"用于指定处理当前JSP页面异常错误的另一个JSP页面，指定的JSP错误处理页面必须设置isErrorPage属性为true。errorPage属性的值是一个url字符串。如果设置该属性，那么在web.xml文件中定义的任何错误页面都将被忽略，而优先使用该属性定义的错误处理页面6isErrorPageisErrorPage="true"通过该属性可以将当前JSP页面设置成错误处理页面来处理另一个JSP页面的错误，也就是异常处理7sessionsession="false"用于指定JSP页面是否使用HTTP的session会话对象。其属性值是boolean类型，可选值为true和false。默认值是true，表示可以使用session会话对象。如果设置为false，则当前JSP页面将无法使用session会话对象8infoinfo="提示信息"用于设置JSP页面的相关信息，该信息可以通过调用Servlet接口的getServletInfo()方法中获取续表 2．JavaWeb应用程序的部署与运行 首先对Web应用程序进行部署，然后在GoogleChrome浏览器的地址栏中输入URL地址，运行JavaWeb应用程序，方法主要有以下两种。方法1：通过复制Web应用到Tomcat进行部署方法2：通过在server.xml文件中配置<Context>元素部署Web应用【注意】：在设置<Context>元素的docBase属性值时，路径中的斜杠“\”应该使用反斜杠“/”代替。另外在物理路径中不能出现汉字，否则Tomcat可能不能成功启动。 3．Java代码片段 在JSP页面中可以嵌入Java代码片段来完成业务处理，例如，task1-3.jsp文件中在页面中输出当前系统日期，就是通过嵌入Java代码片断实现的。 Java代码片段是指在JSP页面中嵌入的Java代码，代码片断将在页面请求的处理期间被执行。 4．JSP表示式 Java表示式可以直接把Java的表达式结果输出到JSP页面中。 表达式的最终运算结果将被转换为字符串类型，因为在网页中显示的文字都是字符串。 5．include指令与jsp:include动作标签（1）include指令 include指令用于文件包含，该指令可以在JSP页面中包含另一个文件的内容，但是它仅支持静态包含，也就是说被包含文件中的所有内容都原样包含到该JSP页面中。 被包含文件的内容可以是一段Java代码、HTML代码或者是另一个JSP页面。 如果将JSP的动态内容使用include指令包含的话，也会被当作静态内容包含到当前页面。 被包含的文件内容与当前JSP页面一个整体。【注意】：被include指令包含的JSP页面中不要使用<html>和<body>标签，它们是HTML页面的结构标签，被包含进其他JSP页面时可能会破坏页面格式。 另外，源文件和被包含文件中的变量和方法的名称不要产生冲突，因为它们最终会生成一个文件，重名将导致错误产生。（2）jsp:include动作标签

jsp:include动作标签用于将另一个文件的内容包含到当前JSP页面中，被包含的文件内容可以是静态文本，也可以是动态代码。 当前页面和被包含的页面是两个独立的实体，被包含的页面会对包含它的JSP页面中的请求对象进行处理，然后将处理结果作为当前JSP页面的包含内容，与当前页面内容一起发送到客户端。 6．JSP注释 由于JSP页面由HTML代码、JSP脚本和Java代码等组成，所以在JSP文件中可以使用HTML注释、JSP注释和Java注释。（1）HTML注释（2）Java代码注释（3）JSP注释 7．JSP的<%%>标记 JSP的<%%>标记是JSP文件中最常用的标记之一，并且有多种相似的形式，但其功能却有区别，小结如下： ①<%%>这里面可以添加java代码片段； ②<%=%>将变量或表达式值输出到页面； ③<%----%>是JSP注释； ④<%@%>是JSP的指令标签； ⑤<%!%>是声明标签，例如，<%!intcount=0;%>声明了一个全局变量count，该变量可以在整个JSP页面中使用。 8．JSP的内置对象简介 在JSP中提供9个内置对象，分别是request、response、session、application、out、page、pageContext、config和exception。 JSP页面的内置对象被广泛应用于JSP的各种操作中，例如，使用request对象获取客户端的请求信息，使用reponse对象向客户端返回服务器的回应信息，使用session对象保存每一个用户的数据，使用application对象保存所有用户的共享信息，使用out对象向页面输出信息。（1）request对象（2）response对象（3）session对象（4）application对象（5）out对象（6）page对象（7）pageContext对象（8）config对象（9）exception对象 9．JSP主要内置对象有效作用范围比较 ①page对象只在同一个JSP页面内有效。 ②response对象只在JSP页面（包括当前JSP页面中使用<%@include>标签、<jsp:include>标签和<forward>标签包含的其他JSP页面）内有效。 ③request对象在一次访问请求内有效，服务器跳转后依然有效，但客户端跳转后无效。 request表示的是客户端的请求，正常情况下，一次请求服务器只会给予一次回应，那么此时如果服务器端跳转，请求的地址没有改变，也就相当于回应了一次，而如果访问地址改变了，就相当于发出了第二次请求，则第一次请求的内容肯定就已经消失了，所以无法获取。 ④session对象在一次会话范围内有效，无论是客户端跳转还是服务器端跳转都有效，但浏览器关闭后则无效。 ⑤application对象在服务器中保存所有用户的共享信息，该对象中保存的信息在整个应用中都有效，使得每个用户都能访问该对象。 10．使用地址重写的方法进行参数传递 在Web应用开发时，参数不一定全是由表 单传递，也可以使用地址重写的方法进行参数 传递，然后同样通过request对象的getParameter()方法获取参数的值。 11．cookie对象简介 cookie是保存在客户端本机硬盘中的一段文本信息，通过cookie可以标识用户身份，记录用户名及密码等用户信息，跟踪重复用户。 cookie在服务器端生成并发送给客户端的浏览器，浏览器将cookie的“键/值”信息保存到某个指定的文件夹中，cookie的名称和值可以由服务器端定义。 与cookie相关的方法有多个，其功能如下所示。（1）request对像的getCookies()方法 request对像的getCookies()方法用于获取客户端设置的全部cookie对象集合。（2）response对象的addCookie()方法 response对象的addCookie()方法用于将cookie对象发送到客户端。（3）cookie对象的构造方法 cookie对象的构造方法为Cookie(Stringname,Stringvalue)用于实例化cookie对象。（4）cookie对象的setMaxAge()方法 cookie对象的setMaxAge()方法用于设置cookie的有效作用时间，单位为秒。（5）cookie对象的getName()方法 cookie对象的getName()方法用于获取客户端cookie的名称。（6）cookie对象的getValue()方法 cookie对象的getValue()方法用于获取客户端cookie对象的值。12．关于中文乱码问题的处理 在提交表单时，如果控件中输入的内容为中 文，则会出现乱码，这种情况是编码不统一引起 的，可以使用request对象的setCharacterEncodin()方法设置统一的编码，表单提交后就可以正常显 示中文。 13．关于JSP页面中超链接的访问路径 如果JSP页面中有一个超链接，其完整的访问路径为：http://localhost:8080/project01/task1-2.jsp。 其中，http://localhost:8080/是服务器的基本路径，project01是当前应用程序项目名称，根路径是http://localhost:8080/project01/。 如果页面中有多个超链接，则需要多次重复书写根路径，我们可以使用以下方法指定公用的根路径，然后与页面内的相对路径进行拼装。 14．关于静态网址中获取表单控件的值并作为参数进行传递 15．比较response.sendRedirect()跳转方法和<jsp:forword>标签跳转指令

response.sendRedirect()跳转方法和<jsp:forword>标签跳转指令都可以实现页面跳转，但有所区别，比较如下。 ①response对象的sendRedirect()方法可以实现页面的跳转，该跳转属于客户端跳转，跳转后地址栏的地址会发生改变，变为跳转之后的页面地址。<jsp:forward>跳转属于服务器端跳转，跳转之后地址栏中的地址不会发生改变。 ②客户端跳转，在整个页面都执行完成后才进行跳转，而服务器跳转，执行到跳转语句时会立刻进行跳转。 ③使用sendRedirect()方法时，可以通过地址重 写的方式完成参数的传递，使用<jsp:forward> 时，可以通过<jsp:param>方式进行参数的传递。 ④使用request对象时，如果是客户端跳转，则request对象中的属性值全部失效，并且进入一个新request对象的作用域，只有服务器端跳转才能将request对象的属性值保存到跳转页。 16．getParameter()方法和getParameterValues()方法的正确使用 使用request对象可以获取从表单中提交过来的信息，在一个表单中会有不同的表单控件元素，对于文本框、单选按钮、下拉列表框都可以使用getParameter()方法获取其值，该方法接收的是一个参数的内容，参数的名称就是表单控件的名称。 17．HTML5简介 HTML5是万维网的核心语言，是标准通用 标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。 HTML5草案的前身名为WebApplications 1.0，于2004年被WHATWG提出，于2007年被 W3C接纳，并成立了新的HTML工作团队。 支持HTML5的浏览器包括Firefox（火 狐浏览器）、IE9及其更高版本、Chrome（谷歌浏览器）、Safari、Opera等；傲游浏 览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360 浏览器、搜狗浏览器、QQ浏览器、猎豹浏览 器等国产浏览器同样具备支持HTML5的能力。 HTML5手机应用的最大优势就是可以在网页上直接调试和修改。 原先应用程序的开发人员可能需要花费非常大的力气才能达到HTML5的效果，不断地重复编码、调试和运行。 如今基于HTML5标准的Web应用程序开发，开发人员可以轻松地进行调试修改。 18．HTML5的主要特性（1）语义特性（Class：Semantic）（2）本地存储特性（Class：Offline&Storage）（3）设备兼容特性（Class：DeviceAccess）（4）连接特性（Class：Connectivity）（5）网页多媒体特性（Class：Multimedia）（6）三维、图形及特效特性（Class：3D，Graphics&Effects）（7）性能与集成特性（Class：Performance&Integration）（8）CSS3特性（Class：CSS3）19．HTML5的主要变化（1）取消了一些过时的HTML4标记。（2）将内容和展示分离。（3）一些全新的表单输入对象。（4）全新的、更合理的Tag。（5）本地数据库。（6）canvas对象。（7）浏览器中的真正程序。（8）HTML5取代Flash在移动设备的地位。（9）HTML5突出的特点就是强化了Web页的表现性，增加了本地数据库。20．HTML5的发展趋势 HTML5规范开发完成时，将成为主流。 据统计2013年全球已有10亿手机浏览器 支持HTML5，同时HTMLWeb开发者数量 将达到200万。 毫无疑问，HTML5将成为未来5~10年 内，移动互联网领域的主宰者。21．CSS3简介 CSS即层叠样式表（CascadingStyleSheet）。 在网页制作时采用层叠样式表技术，可以有 效地对页面的布局、字体、颜色、背景和其他效 果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同网页的外观和格式。 CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。 以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。 这些模块包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。【应用技巧】 本单元的应用技巧如下所示。 ①应用session对象的setAttribute()和getAttribute()方法设置与获取指定属性值。 ②request对象getParameter()方法的合理使用。 ③JSP页面中Java语言的if…else语句的正确使用。 ④JSP页面中HTML代码、Java代码和JSP表达式的混合使用方法。 ⑤将多个JSP页面组合成一个完整的JSP页面的方法。【环境创设】 1．搭建静态网页制作与浏览环境（1）下载与安装AdobeDreamweaverCS6（2）下载与安装谷歌浏览器（GoogleChrome）的最新版本 2．搭建JavaWeb开发环境（1）下载开发JavaWeb应用程序所需的开发工具（2）安装配置Java开发工具包JDK（3）安装与启动Tomcat（4）安装Eclipse及中文语言包 3．启动Eclipse进入Eclipse主界面图1-1启动Eclipse的界面图1-2

Eclipse的欢迎界面图1-3

Eclipse的主界面 4．正确配置Eclipse

（1）指定Web浏览器图1-4

【添加外部Web浏览器】对话框图1-5在【首选项】对话框中选择外部Web浏览器（2）设置JSP程序的编码格式图1-6在【首选项】对话框选择JSP程序的编码格式【说明】：UTF-8（8-bitUnicodeTransformationFormat）是一种针对Unicode的可变长度字符编 码，又称万国码。 由KenThompson于1992年创建。 现在已经标准化为RFC3629。 UTF-8用1到4个字节编码UNICODE字符。 用在网页上可以同一页面显示中文简体、繁体及其他语言（如日文、韩文）。 国家标准GB18030—2000《信息交换用汉字编码字符集基本集的扩充》是我国继GB2312—1980和GB13000—1993之后最重要的汉字编码标准，是我国计算机系统必须遵循的基础性标准之一。 目前，GB18030有两个版本：GB18030—2000和GB18030—2005。 GB18030—2000是GBK的取代版本，它的 主要特点是在GBK基础上增加了CJK统一汉字扩充A的汉字。 GB18030—2005的主要特点是在GB18030—2000基础上增加了CJK统一汉字扩充B的汉字。 5．在Eclipse集成开发环境中正确配置Tomcat服务器（1）创建与配置Tomcat服务器图1-7切换到“Servers”视图【说明】：这里选择“Tomcatv7.0Server”选项，是因为作者计算机安装的Tomcat服务器版本为“Tomcat-7.0.47”，与安装的版本一致即可。图1-8

【NewServer】对话框的“DefineaNewServer”界面图1-9

【NewServer】对话框的“TomcatServer”界面图1-10在“Servers”视图中添加一个服务器项目（2）在Eclipse集成开发环境中启动Tomcat服务器【注意】：如果需要在Eclipse集成开发环境中启动Tomcat服务器，此时Tomcat服务器应处于关闭状态，否则会出现错误信息，无法成功启动。图1-11在快捷菜单中选择【Start】命令 6．准备网页素材 7．在计算机的【资源管理器】中创建文件夹unit01 8．在EclipseIDE集成开发环境中新建动态Web项目project01 9．在EclipseIDE集成开发环境中创建文件夹css和images图1-12

【NewDynamicWebProject】对话框的“DynamicWebProject”界面图1-13

【NewDynamicWebProject】对话框的“配置Java应用”界面图1-14

【NewDynamicWebProject】对话框的“WebModule”界面【任务描述】【任务1-1】在DreamweaverCS6中创建静态网页task1-1.html图1-15网页task1-1.html的浏览效果【任务1-2】在EclipseIDE集成开发环境中创建JSP页面task1-2.jsp【任务1-3】将多个页面组合成一个完整的JSP页面，并对登录页面中的信息进行处理与显示【任务实施】【网页结构设计】 本单元将会创建多个网页，其主体结构的HTML代码如表1-2所示。行号HTML代码0102030405060708091011121314151617<!--头部导航--><navclass="navwpr"></nav><!--中部主体内容--><divclass="w"><ulclass="easy-headerfix"><liclass="img-header"></li><liclass="header-text"></li></ul></div><!--底部导航--><footerclass="footerw"><divclass="layoutfixuser-info"><divclass="user-namefl"></div><divclass="fr"></div></div><ulclass="list-ui-afoot-listtc"></ul></footer>表1-2单元1网页主体结构的HTML代码【网页CSS设计】 在DreamweaverCS6开发环境中创建两个CSS文件：base.css和view.css，base.css文件中主要的CSS代码如表1-3所示，view.css文件中主要的CSS代码如表1-4所示。 这两个CSS文件具体的代码见本书提供的电子资源。行号CSS代码行号CSS代码010203040506070809101112131415161718192021222324252627282930313233343536373839.w{width:320px!important;margin:0auto;}.pr{

position:relative;}.nav{height:46px;background:-webkit-gradient(linear,0%0,0%100%,from(#F9F3E6),to(#F1E8D6));border-top:1pxsolid#FBF8F0;border-bottom:1pxsolid#E9E5D7;}.nav.logo{display:block;width:190px;margin-top:5px10px5px45px;}.nav.goback{

position:absolute;left:15px;width:30px;height:46px;

background:url(../images/arrow_header.png)no-repeatcenter;background-size:25px20px;text-indent:-100px;

overflow:hidden;}.nav.nav-title{line-height:46px;width:30%;font-size:16px;margin:0auto;text-align:center;color:#766d62;height:46px;

overflow:hidden;66676869707172737475767778798081828384858687888990919293949596979899100101102103104.nav.home{right:60px;width:19px;height:22px;

background:url(../images/icon-home.png)no-repeat00;background-size:contain;}.nav.my-cart{right:15px;width:24px;height:20px;

background:url(../images/cart_off.png)no-repeat00;background-size:contain;}.nav.my-cart.my-cart-in{

background:url(../images/cart_on.png)no-repeat02px;background-size:contain;}.nav.my-cart.my-cart-in.count{

position:absolute;right:-5px;top:-5px;width:13px;height:13px;background:-webkit-gradient(linear,0%0,0%100%,from(#FFB700),to(#FD6500));color:#999;border-radius:15px;text-align:center;line-height:13px;

color:#fff;}.nav.my-cart.my-cart-in.countem{

display:block;text-align:center;表1-3

base.css文件的主要CSS代码行号CSS代码行号CSS代码4041424344454647484950515253545556575859606162636465}.nav.my-account,.nav.my-cart,.nav.home{

position:absolute;top:12px;}.nav.cate-all{left:15px;width:18px;height:19px;

background:url(../images/title_bar.png)no-repeat00;background-size:contain;}.nav.my-account{right:50px;width:20px;height:23px;background:url(../images/user.png)no-repeat00;background-size:contain;}.foot-lista{padding:015px025px;border-right:1pxsolid#afaba5;margin:07px;}105106107108109110111112113114115116117118119120121122123124125126127128129130

-webkit-transform:scale(0.75);font-size:13px;}.fix:after{

display:block;

clear:both;

visibility:hidden;}.footer{margin-top:10px;font-size:14px;}.layout{margin:10px;-webkit-box-sizing:border-box;}.fl{float:left}.fr{float:right;}.tc{text-align:center;}续表行号CSS代码行号CSS代码010203040506070809101112.easy-header{width:320px;height:175px;margin:0auto;background-size:320px175px;}.header-text{float:left;margin-left:10px;margin-top:60px;color:#fff;text-shadow:1px1px3px181920212223242526272829.img-header{float:left;width:70px;height:65px;margin-left:40px;margin-top:50px;background:#e6e7e1;border:#fffs

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论