2、OracleJavaFX的需求,并且提供更多能有效增强网络应用的标准集。HTML5是新兴的Web开发技术,其拥有良好的语义化标签,搭配最新CSS3可以展现出无与伦比的显示效果。本课题结合HTML5技术和eclipse开发工具,MySQLServer作为数据库,实现了企业响应式网站及其管理,使得企业官网的展示更精美,管理更便捷。关键词:HTML5;CSS3;JavaScript;MySQLServer;响应式网站ABSTRACTWiththedevelopmentofnetworkandpopularization,theupdatinganduseofallkindsofwebtechnolo
3、gy,nowtimeandcostofbuildingawebsitehasbecomemoreandmorelow,makestheenterprisesofficialwebsitegotgreatdevelopment.Fromtheearlysimplewebpages,tolatermarketingtypesite,theentirenetworkmarketingtypesite,andthereactivesitesofthelatestmostmainstream.BasedontheresponseoftheHTML5responsivewebsitecanautomati
4、callyadapttoscreensize,realizetheendcover,high-enddesign,richinspecificpagetoshowmoreelegant.HTML5isHTMLnextmajorrevision,nowisstillinthestageofdevelopment.Generalizedwhenaskedaboutitactuallymeans,includingHTML,CSS,andJavaScript,asetoftechnologycombination.Ithopestobeabletoreducethebrowserplug-inton
5、eedtherichnessofnetworkapplicationserviceRIA,suchasAdobeFlash,MicrosoftSilverlight,andthedemandoftheOracleJavaFX,andcanprovidemoreeffectiveenhancethestandardsetofnetworkapplications.HTML5istheemergingWebdevelopmenttechnology,hasgoodsemanticlabels,matchthelatestCSS3canshowauniquedisplayeffect.Thistop
6、iccombinesthetechniqueofHTML5andtheeclipsedevelopmenttools,MySQLasthedatabaseServer,realizethereactivesitesanditsmanagement,makeenterprisewebsitetoshowmoreelegant,moreconvenientmanagement.Keywords:HTML5;CSS3;JavaScript;MySQLServer;Reactivesites目录TOCo1-5hzHYPERLINKlbookmark6oCurrentDocument
7、绪论1HYPERLINKlbookmark8oCurrentDocument课题研究意义和目的1HYPERLINKlbookmark10oCurrentDocument国内外发展现状和趋势2HYPERLINKlbookmark12oCurrentDocument本文工作和论文结构3HYPERLINKlbookmark14oCurrentDocument本文工作3HYPERLINKlbookmark16oCurrentDocument论文结构3HYPERLINKlbookmark18oCurrentDocumen
8、t系统技术理论基础5HYPERLINKlbookmark20oCurrentDocumentHTML5简介5HYPERLINKlbookmark22oCurrentDocumentJavaEE简介7HYPERLINKlbookmark24oCurrentDocumentCSS3概述9HYPERLINKlbookmark26oCurrentDocumentJSP概述9HYPERLINKlbookmark28oCurrentDocumentJQuery概述10HYPERLINKlbookmark30oCurrent
9、DocumentB/S模式概述11HYPERLINKlbookmark32oCurrentDocumentMySQL概述12HYPERLINKlbookmark34oCurrentDocument系统需求分析13HYPERLINKlbookmark36oCurrentDocument系统基本需求13HYPERLINKlbookmark38oCurrentDocument系统用例图14HYPERLINKlbookmark40oCurrentDocument系统管理员用例14HYPERLINKlbookmark42o
10、CurrentDocument会员用例14HYPERLINKlbookmark44oCurrentDocument游客用例15HYPERLINKlbookmark46oCurrentDocument系统设计与实现16HYPERLINKlbookmark48oCurrentDocument4.1系统设计原则16HYPERLINKlbookmark50oCurrentDocument4.2系统前端设计与实现17HYPERLINKlbookmark56oCurrentDocument4.3系统后台设计与实现25HYPERLI
11、NKlbookmark58oCurrentDocument4.4数据库设计与实现28HYPERLINKlbookmark60oCurrentDocument数据库表28HYPERLINKlbookmark62oCurrentDocument数据库完整性和安全性33HYPERLINKlbookmark64oCurrentDocument系统测试35HYPERLINKlbookmark66oCurrentDocument5.1测试目的35HYPERLINKlbookmark68oCurrentDocument5.2测
12、试方法35HYPERLINKlbookmark70oCurrentDocument5.3测试过程36HYPERLINKlbookmark72oCurrentDocument总结和展望41HYPERLINKlbookmark74oCurrentDocument参考文献43致谢45%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%xxsxsxsxsxsxsxsxsxsxsxsxsxsxsxsxsxsxsxsxs*X*X*X*绪论课题研究意义和目的现在网络的发展已呈现商业化、全民化、全球化的趋势。目前,几乎世界上所有
15、能手机、平板电脑等来查看邮件、浏览网页。随着移动终端的流行和大趋势的变化,网站设计技术也在随之变化。为了能够给移动终端客户提供更好的体验与服务,我们可以有很多选择。例如为移动设备单独重新设计一个网站,这种情况下所有使用移动终端的访问者都会被指向到这个为他们单独设计的站点2。另外一种选择就是将网站做成响应式,这种情况下无论客户使用何种终端设备访问网站,网站都会根据终端设备屏幕尺寸自动调整网站显示,使所有客户都能有最好的访问体验。响应式Web设计(ResponsiveWebdesign)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具
18、兴的学科响应式架构(responsivearchitecture)提出,物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用,建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构;还可以使用运动传感器配合气候控制系统,调整室内的温度及环境光。已经有公司在生产智能玻璃:当室内人数达到一定的阈值时,这种玻璃可以自动变为不透明,确保隐私4。将这个思路延伸到Web设计的领域,我们就得到了一个全新的概念。为什么一定要为每个用户群各自打造一套设计和开发方案?和响应式建筑相似,Web设计同样应该做到根据不同设备环境自动响应及调整。显然,我们无法也
20、工作本文主要分析了符合企业品牌宣传和产品展示需要的响应式网站的开发过程。阐述了一个基于J2EE基础之上的、应用HTML5,JSP等语言开发的B/S结构的高校办公自动化系统的设计与实现过程。具体工作如下:介绍本系统的开发背景和本系统的国内外发展现状;论述了开发本响应式网站平台开发过程中的理论支持、技术基础和实现的关键技术;对本系统进行了需求分析和功能的设计,确定系统的体系结构;以系统设计原则为标准,完成系统的前端页面、后台管理系统和数据库内容的具体实现过程。论文结构全文共分为六章,具体工作如下:第一章绪论。简单阐述了本系统的开发背景和国内外发展现状。第二章系统技术理论基础。主要介绍开发系统的过程
21、中用到的技术和理论。第三章系统需求分析。主要对响应式网站的基本需求进行分析、建模。第四章系统设计与实现。按照系统设计原则,对系统前端、后台和数据库进行设计,以及系统的前端页面、后台管理系统和数据库内容的具体实现过程。第五章系统测试。对系统的兼容性和功能性进行测试。第六章总结和展望。对当前系统在设计和实现的过程当中遇到的问题和针对这些问题给出的解决的方案做个概要的经验总结,以便今后对类似系统的开发提出良好的可行性的建议。对当前系统的不足加以总结,在今后系统的升级或类似系统的开发时做出修改和调整。%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%xxsxsx
22、sxsxsxsxsxsxsxsxsxsxsxsxsxsxsxsxsxs%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%xxsxsxsxsxsxsxsxsxsxsxsxsxsxsxsxsxsxsxsxs系统技术理论基础HTML5简介HTML5是HTML下一个主要的修订版本,现在仍处于发展阶段。目标是取代1999年所制定的HTML4.01和XHTML1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求。HTML5有两大特点:首先,强化了Web网页的表现性能。其次,追加了本地数据库等Web应用的功能。广义论及HTML5时,实际指的
23、是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务RIA,如AdobeFlash、MicrosoftSilverlight,与OracleJavaFX的需求,并且提供更多能有效增强网络应用的标准集1。HTML5是新兴的Web开发技术,其拥有良好的语义化标签,搭配最新CSS3可以展现出无与伦比的显示效果。支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等;国内的傲游浏览器(Maxthon),以及基于IE或Chromium(Chrome的工程版或称实验版
25、CEACCESS)从Geolocation功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联。连接特性(Class:CONNECTIVITY)更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-SentEvent和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推
26、送”到客户端的功能。网页多媒体特性(Class:MULTIMEDIA)支持网页端的Audio、Video等多媒体功能,与网站自带的APPS,摄像头,影音功能相得益彰。三维、图形及特效特性(Class:3D,Graphics&Effects)基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果。性能与集成特性(Class:Performance&Integration)没有用户会永远等待你的LoadingHTML5会通过XMLHttpRequest2等技术,帮助您的Web应用和网站在多样化的环境中更快速的工作。CSS3特性(Class:CSS3)
27、在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更强的效果。此外,较之以前的Web排版,Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性7。HTML5具有以下优势:网络标准HTML5本身是由W3C推荐出来的,它的开发是通过谷歌、苹果,诺基亚、中国移动等几百家公司一起酝酿的技术,这个技术最大的好处在于它是一个公开的技术。换句话说,每一个公开的标准都可以根据W3C的资料库找寻根源。另一方面,W3C通过的HTML5标准也就意味着每一个浏览器或每一个平台都会去实现。多设备、跨平台用HTML5的优点主要在于,这个技术可以进行跨平台的使用。比如你开发了一款HTML5的游戏,你可以很
28、轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台,甚至可以通过封装的技术发放到AppStore或GooglePlay上,所以它的跨平台非常强大,也是大多数人对HTML5有兴趣的主要原因。自适应网页设计很早就有人设想,能不能”一次设计,普遍适用”,让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)2010年,EthanMarcotte提出了”自适应网页设计“这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。这就解决了传统的一种局面网站为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone/iPad版本。这样做
29、固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。即时更新游戏客户端每次都要更新,很麻烦。可是更新HTML5游戏就好像更新页面一样,是马上的、即时的更新8。总结概括HTML5有以下优点:提高可用性和改进用户的友好体验;有几个新的标签,这将有助于开发人员定义重要的内容;可以给站点带来更多的多媒体元素(视频和音频);可以很好的替代FLASH和Silverlight;当涉及到网站的抓取和索引的时候,对于SEO很友好;将被大量应用于移动应用程序和游戏。JavaEE简介J2EE(Java2Platform,EnterpriseEd
30、ition)是-一套全然不同于传统应用开发的技术架构,包含许多组件,主要可简化且规范应用系统的开发与部署,进而提高可移植性、安全与再用价值9。J2EE的核心是一组技术规范与指南,其中所包含的各类组件、服务架构及技术层次,均有共通的标准及规格,让各种依循J2EE架构的不同平台之间,存在良好的兼容性,解决过去企业后端使用的信息产品彼此之间无法兼容,导致企业内部或外部难以互通的窘境。在J2EE架构下,开发人员可依循规范基础,进而开发企业级应用;而不同J2EE供货商,同会支持不同J2EE版本内所拟定的标准,以确保不同J2EE平台与产品之间的兼容性。对于开发人员而言,只需要专注于各种应用系统的商业逻辑与
32、用服务器,J2EE应用服务器是J2EE企业级应用的部署平台。由于它们都遵循了J2EE规范,因此,使用J2EE技术开发的企业级应用可以部署在各种J2EE应用服务器上。J2EE组成了一个完整企业级应用的不同部分纳入不同的容器(Container),每个容器中都包含若干组件(这些组件是需要部署在相应容器中的),同时各种组件都能使用各种J2EEService/API。J2EE容器包括:Web容器服务器端容器,包括两种组件JSP和Servlet,JSP和Servlet都是Web服务器的功能扩展,接受Web请求,返回动态的Web页面。Web容器中的组件可使用EJB容器中的组件完成复杂的商务逻辑。EJB容器
33、服务器端容器,包含的组件为EJB(EnterpriseJavaBeans),它是J2EE的核心之一,主要用于服务器端的商业逻辑的实现。EJB规范定义了一个开发和部署分布式商业逻辑的框架,以简化企业级应用的开发,使其较容易地具备可伸缩性、可移植性、分布式事务处理、多用户和安全性等。Applet容器客户端容器,包含的组件为Applet。Applet是嵌在浏览器中的一种轻量级客户端,一般而言,仅当使用Web页面无法充分地表现数据或应用界面的时候,才使用它。Applet是一种替代Web页面的手段,我们仅能够使用J2EE开发Applet,Applet无法使用J2EE的各种Service和API,这是为了
34、安全性的考虑。ApplicationClient容器客户端容器,包含的组件为ApplicationClient。ApplicationClient相对Applet而言是一种较重量级的客户端,它能够使用J2EE的大多数Service和API10。CSS3概述CSS即层叠样式表(CascadingStyleSheet)。在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一
35、个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括:盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。CSS3将完全向后兼容,所以没有必要修改的设计来让它们继续运作。网络浏览器也还将继续支持CSS2CSS3主要的影响是将可以使用新的可用的选择器和属性,这些会允许实现新的设计效果(譬如动态和渐变),而且可以很简单的设计出现在的设计效果(比如说使用分栏)11。JSP概述JSP(JavaServerPages)是由SunMicrosystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术
36、,它是在传统的网页HTML文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag),从而形成JSP文件(*.jsp)。用JSP开发的Web应用是跨平台的,即能在Linux下运行,也能在其他操作系统上运行。JSP技术使用Java编程语言编写类XML的tags和scriptlets,来封装产生动态网页的处理逻辑。网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑。JSP将网页逻辑与网页设计和显示分离,支持可重用的基于组件的设计,使基于Web的应用程序的开发变得迅速和容易。Web服务器在遇到访问JSP网页的请求时,首先执行其中的程序段,
37、然后将执行结果连同JSP文件中的HTML代码一起返回给客户。插入的Java程序段可以操作数据库、重新定向网页等,以实现建立动态网页所需要的功能。JSP与JavaServlet一样,是在服务器端执行的,通常返回该客户端的就是一个HTML文本,因此客户端只要有浏览器就能浏览。JSP的1.0规范的最后版本是1999年9月推出的,12月又推出了1.1规范。目前较新的是JSP1.2规范,JSP2.0规范的征求意见稿也已出台。JSP页面由HTML代码和嵌入其中的Java代码所组成。服务器在页面被客户端请求以后对这些Java代码进行处理,然后将生成的HTML页面返回给客户端的浏览器。JavaServlet是
38、JSP的技术基础,而且大型的Web应用程序的开发需要JavaServlet和JSP配合才能完成。JSP具备了Java技术的简单易用,完全的面向对象,具有平台无关性且安全可靠,主要面向因特网的所有特点。自JSP推出后,众多大公司都支持JSP技术的服务器,如IBM、Oracle、Bea公司等,所以JSP迅速成为商业应用的服务器端语言12。JSP技术的优势:一次编写,到处运行。在这一点上Java比PHP更出色,除了系统之外,代码不用做任何更改。系统的多平台支持。基本上可以在所有平台上的任意环境中开发,在任意环境中进行系统部署,在任意环境中扩展。相比ASP/PHP的局限性是显而易见的。强大的可伸缩性。
39、从只有一个小的Jar文件就可以运行Servlet/JSP,到由多台服务器进行集群和负载均衡,到多台Application进行事务处理,消息处理,一台服务器到无数台服务器,Java显示了一个巨大的生命力。多样化和功能强大的开发工具支持。Java已经有了许多非常优秀的开发工具,而且许多可以免费得到,并且其中许多已经可以顺利的运行于多种平台之下13。JQuery概述JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库,它兼容CSS3,还兼容各种浏览器(IE6.0+,FF1.5+,Safari2.0+,Opera9.0+),jQuery2.0及后续版本将不再支持
40、IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互ojQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择2。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。jQuery是一个兼容多浏览器的javascript库,核心理念是writeless,domore(写得更少,做得更多)。jQuery在2006年1月由美国人JohnResig在纽约的ba
41、rcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由DaveMethvin率领团队进行开发。如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery14。jQuery是免费、开源的,使用MIT许可协议。jQuery的语法设计可以使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外,jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。jQuery,顾名思义,也就是JavaScript和查询(Qu
42、ery),即是辅助JavaScript开发的库15。B/S结构概述B/S(Browser/Server)结构即浏览器和服务器结构。它是随着Internet技术的兴起,对C/S结构的一种变化或者改进的结构。在这种结构下,用户工作界面是通过WWW浏览器来实现,极少部分事务逻辑在前端(Browser)实现,但是主要事务逻辑在服务器端(Server)实现,形成所谓三层3-tier结构。这样就大大简化了客户端电脑载荷,减轻了系统维护与升级的成本和工作量,降低了用户的总体成本(TCO)。以目前的技术看,局域网建立B/S结构的网络应用,并通过Internet/Intranet模式下数据库应用,相对易于把握、
43、成本也是较低的。它是一次性到位的开发,能实现不同的人员,从不同的地点,以不同的接入方式访问和操作共同的数据库;它能有效地保护数据平台和管理访问权限,服务器数据库也很安全。特别是在JAVA这样的跨平台语言出现之后,B/S架构管理软件更是方便、快捷、高效16。B/S架构软件的优势:维护和升级方式简单目前,网站平台的改进和升级越来越频繁,B/S架构的产品明显体现着更为方便的特性。B/S架构的平台只需要管理服务器就行了,所有的客户端只是浏览器,根本不需要做任何的维护。无论用户的规模有多大,有多少分支机构都不会增加任何维护升级的工作量,所有的操作只需要针对服务器进行;如果是异地,只需要把服务器连接专网即
46、的开发都选择MySQL作为网站数据库19。*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*1*1*T*TXTXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTTT*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*1*1*T*TXTXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTX
50、用例图如图3-游客用例游客是指,通过互联网在在线访问浏览网站,之前和公司无关联的访客。游客前端功能站内搜索信息浏览图3-4游客用例图游客只能使用前端的信息浏览、站内查询功能和会员的会员注册功能。用例图如图3-4.*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*1*1*T*TXTXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTTT*sl*sl*sl*sl*sl*sl*sl*sl*sl*s
51、l*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*1*1*T*TXTXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTTT*X*X*X*系统设计与实现系统设计原则移动优先原则随着移动互联网的发展,移动设备的不断增加,考虑到当前的发展形势,优先考虑移动设计无可厚非。所谓移动优先原则是指,整个页面设计的流程优先考虑到移动设备的兼容显示,再次前提下在考虑PC机的兼容显示。触控优先原则对触控优先原则的考虑也是基于移动互联网的发展迅速的前提下提出的。在移动设备终端上目
53、同尺寸屏幕中进行测试,以尽早发现问题。开放性原则支持跨平台运行的体系架构,系统可以运行在各种Windows平台。系统具备互操作性和可扩展性性,具有兼容性。稳定性原则保证系统采用成熟稳定的操作系统、数据库、网络协议等,保证系统长期稳定的不间断运行。安全性原则对于基于网络的应用,最重要的问题之一是安全性。系统具备精细的权限管理,在网络安全各个环节采用有力措施,保证系统网络整体安全性。4.2系统前端设计与实现首页:网站首页是一个网站的入口网页,作用是引导互联网用户浏览网站以及其他部分的内容。这部分内容一般被认为是一个目录性质的内容。st杠nsfr*也Ms虫.8中屯inttihuhbiMn*wnr:*
54、iJJJJJJJJJJJJJJJJJJJ*A*A*A*A*A*ZTXTXTZjSXT*XT*XT*艺术品下面二级导航栏目包含鉴证备案,资产管理,修复保养,个性定制。鉴证备案中包含有鉴证的意义以及具体流程和信息,资产管理中包含有基金、信托、按揭和鉴赏管理,修复保养中包含有保养的意义和具体流程,个性定制中包含有服务项目及优势。如图4-3.展览:设计展览栏主要是对公司的产品进行一个集中展示。艺术品图4-4展览和二级导航中国绘画ESWflffl项当代工艺按备歸号查询按场品窖祷展览展览栏主要分为中国绘画,书法篆刻,西画雕塑,古瓷杂项,当代工艺五个板块。可以选择直接点击展览进入展览大厅,也可以选择直接点击
56、l*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*sl*1*1*T*TXTXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTXXTTT片的信息介绍弹出,鼠标离开消失,互动性和体验度很高。这个用到的是jQuery中的mouseover和mouseout事件,鼠标经过悬停时mouseover触发显示信息,鼠标离开mouseout触发信息消失。如图4-5.图4-6商品图片的放大镜功能点击图片信息上的查看详情,就可以看到该展品的详细信息,此时
58、艺术窖家197诈主于两血于眾时沖或Z;祕:山弓商学汹朽宙酉頁:腋应陈膻器中3楓幅良殆春远栩艙商汕儼ft忒热良王耿芬斑于山曰1斑卞.!;註诳铝却施工g酸王诉东9SS*511BiT止葺石斗S6SiFA!Ji=KlT-負歼砒京亂厂斗工就IT学旷内的丸博丄.蔑汕的图4-8艺术名家选择一些优秀的艺术家进行介绍展示,首先可以提升艺术家知名度,提高展品热度,其次访客也可以了解到各个优秀艺术家,了解更多行业知识,当然优秀艺术家入驻,也可以很好的提升企业形象和实力。如图4-8.会员中心:会员制是一种人与人或组织与组织之间进行沟通的媒介,它是由某个组织发起并在该组织的管理运作下,吸引客户自愿加入,目的是定期与会员
60、中心,可以显示自己会员等级和送鉴养护的藏品。如图4-13.关于我们:主要对企业做一个详细的介绍,让访客对企业有个更系统细致的了解。关于我们上罔中蚊博云相E餐胡心专注于乞朮品帀肓曲开搓与j毀齐計剧菁务夸古单f办H抖氐驰3叽|确吟JdJt用討坯磴鼠祚I古.雄迂帝祗、ffnl理寤楼复愫瓠裁宇丸产商|乍和蛭:中心,上出“血黃产译悄中心.上占雅醃:和的中Z黯fi垃:舍m豈罡上曲目脛也甘吕巾鳳aMil-平会正处幵、高爾曲立灶礪f迂it平台勵殍荊扣昏y也駅泌!側一谗元、富嫌安鸟可斑I于向买眉憧斥幫护忙.右工髀曲血iL音丑和店昌總拒他号生囱U卞史札为乞*品币折雕斥育序左厌IS弹肓力焉u!让寸呂t詡有鳥为虧