论文∶小型网上商城的设计与实现

《论文∶小型网上商城的设计与实现》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

苏州科技学院天平学院本科生毕业设计（论文）小型网上商城的设计与实现摘要本文对网上购物系统的开发过程作了一个详细的描述，系统是用asp技术和access数据库技术进行开发的，并且达到功能明确，费用低廉，通用性强，适合我国国情的购物网站系统。文中着重论述了该系统的功能与实现、数据流程与存储、网上购物、后台管理等。并对关键的有关技术作了较详细的介绍。本系统共分两个部分:前台用户部分和后台管理部份。在前台系统中有用户注册登陆、查询商品、订购商品、订单查询、发表评论和留言板。后台系统中有系统管理，会员管理，订单管理、商品管理、留言管理。在用户注册模块中，特别加强了用户注册信息验证的严格性；在商品或商家信息浏览和查询模块中，用户可以对商品进行浏览检索，查看商品及商家的详细资料；在商品管理模块中，商家可以发布和管理自己公司生产的产品。在后台系统中，系统管理员可以对已注册的用户进行审查，并对提交的订单进行处理；可以对现有的商品管理。整个系统结构清晰，功能明确，页面风格鲜明，易操作，适合客户的需要。使交易能够更加方便和快捷。关键词：网上购物，ASP，数据库16 苏州科技学院天平学院本科生毕业设计（论文）DesignandImplementationofOnlineShoppingMallAbstractThisarticlethroughdetaileddescriptionfordevelopmentoftheonlineshoppingsystem.ThesystemisbasedonASPandAccessDatabasedevelopmenttechnology,bythetimeachievedfunctionformidable,theexpenseisinexpensive,versatile,suitsourcountrynationalconditiontheshoppingwebsitesystem.Inthearticleelaboratedonemphaticallythissystemfunctionandtherealization,thedataflowandthememory,thenettheshopping,thebackstagemanagementandsoon.Andhasmadethedetailedintroductiontothekeyrelatedtechnology.Thesystemincludestwomoduleswhicharetheforegroundsystemandthebackgroundsystem.Intheforegroundofmysystem，Thereareusersregisteringandlogin,querymerchandise,ordermerchandise,orderedquery，makecommentsandmessageboards.Inthebackgroundsystem,therearesystemmanagement,membershipmanagement,ordersmanagement,productmanagement,messagemanagement.Inthemoduleofusersregistering,inparticular,Istrengthentheuserregistrationinformationtothestrictcertification;inthemoduleofbrowsingandqueryingcommodityorbusinessinformation,userscanbrowseandsearchforproducts,viewsproductsandthebusinessdetails;incommoditymanagementmodule,businessescanissueandmanagetheirowncompany'sproducts.Inthebackgroundsystem,thesystemadministratorhastobearegisteredusertoreviewandsubmitordersforprocessing;thesystemadministratoralsocanmanageexistingproducts,sitenews,transportingwaysandcustomersmail.Theentiresystemstructureisclear,unambiguous,pagestyleclear,easy-to-operate,suitablefortheneedsofcustomers,thusenablingtorealizeonlinetradeandmakingthetrademoreconvenient.Keywords:shoppingonlineASPdatabase16 苏州科技学院天平学院本科生毕业设计（论文）目录摘要Abstract目录…………………………………………………………………………………………2一．引言……………………………………………………………………………………3二．系统开发及运行平台…………………………………………………………….52．1ASP的简介………………………………………………………………………….52．3ACCESS的简介…………………………………………………………………….5系统运行平台三．系统的总体设计……………………………………………………………………………….73．1可行性分析……………………………………………………………………….73.2需求说明3.2.1性能需求3.2.2功能需求3.3系统功能模块……………………………………………………………………..73.3.1前台系统功能模块……………………………………………………………83.3.2后台系统功能模块四．数据库设计……………………………………………………………….94.1数据库需求分析………………………………………………………………94.2数据库概念设计………………………………………………………104.3数据库逻辑结构………………………………………………………………104.3.1数据表结构的详细设计……………………………………………………….13五．系统功能模块设计…………………………………………………………………….145．1客户端………………………………………………………………………………..145．1．1购物篮…………………………………………………………………………….145．1．2会员注册………………………………………………………………………….175．1．3商品查询………………………………………………………………………….205．1．4订单查询………………………………………………………………………….215．2后台管理端………………………………………………………………………….215．2．1商品添加………………………………………………………………………….225．2．2商品的审查……………………………………………………………………….275．2．3订单的审查……………………………………………………………………….285．2．4会员的审查……………………………………………………………………….305．2．5管理员添加……………………………………………………………………….325．2．6管理员审查……………………………………………………………………….33六．结束语………………………………………………………………………………….35七．致谢…………………………………………………………………………………….36八．文献…………………………………………………………………………………….36附录:16 苏州科技学院天平学院本科生毕业设计（论文）第1章绪论随着互联网的不断发展，网络已日益成为收集提供信息的最佳渠道并进入传统的流通领域。于是电子商务开始流行起来，一种全新的购物理念开始形成并逐步发展。越来越多的商家在网上建起在线商店，向消费者展示出一种新颖的购物理念。目前在国内PHP与ASP应用最为广泛。网上购物是一种具有交互功能的商业信息系统。它向用户提供静态和动态两类信息资源。所谓静态信息是指那些不经常变动或更新的资源，动态信息是指随时变化的信息，如商品报价，商品类别等。网上购物系统具有强大的交互功能，可使商家和用户方便的传递信息，完成电子贸易。现在流行的网上购物系统不仅要有漂亮的网页，更要有严谨的规划，注重每一个细小的环节。这样才能使得在电子交易时避免不必要错误发生。我们将使用ASP技术来编辑网页，ASP（ActiveServerPages动态网页）是微软公司推出的一种用以取代CGI（CommonGatewayInterface通用网关接口）的技术。目前，Internet上的许多基于Windows平台的Web站点已开始应用ASP来替换CGI。简单地讲，ASP是一个位于服务器端的脚本运行环境，通过这种环境，用户可以创建和运行动态的交互式Web服务器应用程序，如交互式动态网页，包括使用HTML表单收集和处理信息，上传与下载等等。并运用ACCESS技术把数据库和动态网页相关联。传统的管理信息系统信息获取方法是由专业文字录入人员将信息输入到管理系统的数据库中,这种方法在数据量不大时有很多的应用场合。当数据量比较大,并且有较强的专业性时,录入的费用和出错的可能性都相应上升。本设计在实际应用中的解决方案是建立网站,以及自己的数据库，使得所需商品信息可以及时的保存、更新，可以更好的及时了解商品买卖的情况。16 苏州科技学院天平学院本科生毕业设计（论文）第2章系统开发及运行平台2.1ASP技术介绍当用户浏览器通过互联网的HTTP（HypertextTransportProtocol）协议向WEB服务器请求提供网页内容时，服务器仅仅是将原已设计好的静态HTML文档传送给用户浏览器。其页面的内容使用的仅仅是标准的HTML代码，最多再加上流行的GIF89A格式的动态图片，比如产生几只小狗小猫跑来跑去的动画效果。若网站维护者要更新网页的内容，就必须手动地来更新其所有的HTML文档。作为网站的设计者，必须要设计出更具实用性和交互性的“动态”网站。由于绝大多数网站都具有大量的数据和信息，而建网的初衷也就是在于方便客户查询企业资料，方便同客户的交流，及时获得信息反馈。那么，就必然会面临如何让使用者在浏览器界面中，通过互联网或内联网（Intranet）查询WEB数据库的资料，甚至输入、更新和删除WEB服务器上的资料。ASP（ActiveServerPages）是目前最为流行的开放式的Web服务器应用程序开发技术，使用它可以将HTML语言、脚本语言和Active控件组合在一起，产生动态、交互且高效率的基于Web的应用程序。作为动态网页的重要设计工具，ASP是一种服务器端（Server-side）的脚本（Script）环境，由于ASP使用基于开放设计环境的ActiveX技术，用户可以自己定义和制作组件加入其中，使自己的动态网页具有几何无限的扩充能力。ASP将取代CGI（公共网关接口）和烦琐的Perl编程语言，成为今后Web开发的流行语言。MicrosoftActiveServerPages即我们所称的ASP，其实是一套微软开发的服务器端脚本环境，ASP内含于IIS3.0和4.0之中,通过ASP我们可以结合HTML网页、ASP指令和ActiveX元件建立动态、交互且高效的WEB服务器应用程序。有了ASP你就不必担心客户的浏览器是否能运行你所编写的代码，因为所有的程序都将在服务器端执行，包括所有嵌在普通HTML中的脚本程序。当程序执行完毕后，服务器仅将执行的结果返回给客户浏览器，这样也就减轻了客户端浏览器的负担，大大提高了交互的速度。以下罗列了ActiveServerPages所独具的一些特点：16 苏州科技学院天平学院本科生毕业设计（论文）　1.使用VBScript、JavaScript等简单易懂的脚本语言，结合HTML代码，即可快速地完成网站的应用程序。　2.无须compile编译，容易编写，可在服务器端直接执行。　3.使用普通的文本编辑器，如Windows的记事本，即可进行编辑设计。　4.与浏览器无关(BrowserIndependence),用户端只要使用可执行HTML码的浏览器，即可浏览ActiveServerPages所设计的网页内容。ActiveServerPages所使用的脚本语言(VBScript、Jscript)均在WEB服务器端执行，用户端的浏览器不需要能够执行这些脚本语言。　5.ActiveServerPages能与任何ActiveXscripting语言相容。除了可使用VBScript或JScript语言来设计外，还通过plug-in的方式，使用由第三方所提供的其他脚本语言，譬如REXX、Perl、Tcl等。脚本引擎是处理脚本程序的COM(ComponentObjectModel)物件。　6.ActiveServerPages的源程序，不会被传到客户浏览器，因而可以避免所写的源程序被他人剽窃，也提高了程序的安全性。　7.可使用服务器端的脚本来产生客户端的脚本。　8.ActiveXServerComponents(ActiveX服务器元件)具有无限可扩充性。可以使用VisualBasic、Java、VisualC++、COBOL等编程语言来编写你所需要的ActiveXServerComponent。　　与一般的程序不同，.asp程序无须编译，ASP程序的控制部份，是使用VBScript、JavaScript等脚本语言来设计的，当执行ASP程序时，脚本程序将一整套命令发送给脚本解释器(即脚本引擎)，由脚本解释器进行翻译并将其转换成服务器所能执行的命令。当然，同其他编程语言一样，ASP程序的编写也遵循一定的规则，如果你想使用你所喜爱的脚本语言编写ASP程序，那么你的服务器上必须要有能解释这种脚本语言的脚本解释器。当你安装ASP时，系统提供了两种脚本语言：VBsrcipt和JScript，而VBscript则被作为系统默认的脚本语言。你也可以根据自己的喜好改变系统默认的脚本语言。16 苏州科技学院天平学院本科生毕业设计（论文）简单讲，ASP是位于服务器端的脚本运行环境，通过这种环境，用户可以创建和运行动态的交互式Web服务器应用程序，如交互式的动态网页，包括使用HTML表单收集和处理信息，上传和下载等等，就象用户在使用自己的CGI程序一样。但是它比CGI简单。更重要的是，ASP使用的ActiveX技术基于开放设计环境，用户可以自己定义和制作组件加入其中，使自己的动态网页几乎具有无限的扩充能力，这是传统的CGI等程序所远远不及的地方。使用ASP还有个好处，就是在于ASP可通过ADO（ActiveDataObject）方便的访问数据库，从而使得开发基于WWW的应用系统成为可能。通过ASP我们可以结合HTML网页、ASP指令和ActiveX元件建立动态、交互且高效的WEB服务器应用程序。同时asp也支持VbScript和JavaScript等脚本语言，默认为VbScript。但是这样也导致一个问题，运行ASP页面相对于普通的html页面要慢一点，因为普通的html页面只需要浏览器就能够解析，而ASP则必须是服务器将整页的代码都执行一篇之后再发送数据。MircrosoftActiveServerPages(ASP)是服务器端脚本环境，可用来创建交互式Web页并建立强大的Web应用程序。当服务器收到对ASP文件的请求时，它处理包含在用于构建发送给浏览器的Web页文件中的服务器端脚本。除服务器端脚本外，ASP文件也可以包含HTML（包括相关的客户端脚本）和COM组件调用，这些组件可执行不同的任务，如连接到数据库。如果是HTML创作者，将会发现用ASP编写服务器端脚本可使创建更为复杂、实用的Web应用程序变得十分简单。如果曾希望将HTML表单信息存储在数据库中，根据访问者的自选项自定义Web站点或对不同的浏览器使用不同的HTML功能，将会发现ASP提供了优异的解决方案。例如，从前要在Web服务器上处理用户输入，必须首先学习用Perl或C等语言建立传统的公共网关接口（CGI）应用程序。而使用ASP后，仅通过在HTML文档中直接嵌入的简单服务器端脚本，便可以收集HTML表单信息，并传递到数据库。如果已经熟悉MicrosoftVBScript或MicrosoftJscript，那么学习ASP将不会感觉到有什么困难。由于ASP使用了中性语言，因此如果对VBScript、Jscript或PERL等脚本语言十分熟悉，那么就已经了解了ActiveServerPages的使用方法。再有，在ASP页，可以使用已经装有COM脚本兼容编辑引擎的任何脚本编辑语言。ASP使用VBScript和Jscript脚本引擎，但仍可安装用于Perl、Rexx和Python的脚本引擎，它们可从第三方供应商获得。16 苏州科技学院天平学院本科生毕业设计（论文）如果使用visualbasic、C++或JAVA等编程语言开发过后端Web应用程序，将会发现ASP是用于创建Web应用程序的灵活而快速的方法。除了添加脚本为应用程序创建迷人的HTML界面外，还可以建立自己的COM组件。可以将应用程序的商业逻辑封装在可重复使用的模块中，以便在脚本、其他组件或其他程序中调用。当浏览器向Web服务器请求.asp文件时，服务器端脚本就开始运行。Web服务器于是调用ASP，用它从头至尾处理所请求的文件、执行脚本命令，并将Web页发送到浏览器。因为脚本运行于服务器而不是客户端，所以生成发送到浏览器的HTLM页等工作便由Web服务器负责。服务器端脚本无法预先复制，因为返回到浏览器的只是脚本的运行结果。用户无法得知创建其所查看的页面所使用的脚本命令。ActiveServerPage(ASP)新增了许多特性，有助于轻松编写脚本和开发Web应用程序。ASP的server对象具有2种可用于控制程序流的新方法：“Server.Transfer”和“Server.Execute”。与重定向请求不同，可以使用这些方法将请求直接传送到.asp文件而不需要离开服务器。ASP具有新的错误处理能力，可以使用自定义的错误信息.asp文件来捕捉错误。可以使用新的“Server.GetLastError”方法来显示有用信息，如错误描述或发生错误的行号。ASP现在提供流行的可安装组件的性能增强版本。这些对象能可靠的适用于各种web发布环境。扩展标记语言（XML）允许描写复杂的数据结构或文档。可以在各种应用程序、客户端和服务器之间共享此信息。使用MicrosoftInternetExplorer4.0或更高版本附带的MicrosoftXMLParser，可以创建服务器端应用程序，该应用程序允许Web服务器于InternetExplorer4.0（或更高版本）或任何包含XML解析能力的服务器交换XML格式的数据。ASP支持Microsoft强大的脚本新技术，即Windows的脚本组件。现在可以将商业逻辑脚本过程转换为可重复使用的COM组件，该组件可用于Web应用程序和其他组件对象模型适用的程序。16 苏州科技学院天平学院本科生毕业设计（论文）ASP具有可确定浏览器准确能力的新特性。当浏览器发送描述其能力的cookie时，可以创建一个“浏览器能力组件”实例，以便检索随cookie返回的浏览器属性。可以使用此特性来确定浏览器能力并对应用程序作相应调整。ASP可以检测执行请求何时被外部资源阻断，并自动提供更多线程以便同时执行附加请求和正常处理。如果CPU负担过重，ASP将减少线程数量，以便减少因太多非阻断请求同时执行而产生的持续不断的交换。目前可以使用HTML"response.endendifsql="select*fromuserwhereuser_id='"&user_id&"'anduser_password='"&user_password&"'"Setrs=Server.CreateObject("ADODB.RecordSet")rs.opensql,conn,3,3ifrs.eoforrs.bofthenresponse.write"alert('没有您的注册信息！请注册！');"response.write"javascript:history.go(-1)"response.endendifsession("user_id")=rs("user_id")session("user_grade")=rs("user_grade")rs("lastlogintime")=now()rs("lastloginIP")=request.servervariables("remote_addr")rs("logins")=rs("logins")+1rs.updaters.closesetrs=nothingifsession("0591oldUrl")=""thenresponse.redirect"./"elseresponse.redirectsession("0591oldUrl")endif'url=request("url")'response.redirecturl'response.end%>5.1.3查询商品、商家信息界面用户可以浏览所有商品，同时还能查看商品的详细信息。浏览商品界面如图5.3所示：77 苏州科技学院天平学院本科生毕业设计（论文）图5.3商品详情5.1.4购物车界面购物车界面如图5.4所示：图5.4购物车如果用户点击去收银台，会将界面跳转到cash.asp，选择付款方式和配送方式，然后提交订单。如图5.5所示。77 苏州科技学院天平学院本科生毕业设计（论文）图5.5购物住处确认界面购物确认之后，订单界面如图5.6所示：图5.6完成订购界面5.1.5我的订单界面77 苏州科技学院天平学院本科生毕业设计（论文）用户在购买商品之后，可以查看自己的订单，也可以查看订单的状态，其中订单状态包括（未受理、已付款、已发货）。我的订单如图5.7所示：5.7我的订单界面5.2后台首页设计后台系统中包括以下几个子模块系统管理，会员管理，类别管理，订单管理，商品管理，留言管理等。5.2.1系统管理模块系统管理模块中可以修改管理员密码77 苏州科技学院天平学院本科生毕业设计（论文）修改数据库备份的位置以及其它网站信息的设置5.2.2会员管理模块会员管理模块中可以管理注册的会员对会员的短信进行管理77 苏州科技学院天平学院本科生毕业设计（论文）5.2.3类别管理模块在类别管理模块中可以对所有商品的类别进行管理5.2.4订单管理模块在订单管理模块中可以对顾客下的订单进行处理5.2.5商品管理模块在商品管理模块中，可实现对商品的管理，添加新的商品，并可以实现会员商品的评论管理。5.2.6留言管理模块在留言管理模块中可实现对所有留言用户的管理77 苏州科技学院天平学院本科生毕业设计（论文）结论在历时将近三个月的时间里，我的毕业设计是从学习新的知识（ASP语言和HTML语言），到建立网上购物系统的网站。我遇到了若干的问题和解决了不少的问题.从建立自己的虚拟服务器，到网站服务，我对电子商务认识的无到有，有了具体详细的认识。在我们所建立的网上购物系统只是一个网上的购物的基本原理，里面要涉及到的方方面面的问题我们未曾遇到或现有的条件限制而未能实现。电子商务并不是我们想象的写程序那么简单，它包括了编写程序、数据库设计、网页制作、图象处理、版面设计、数据采集、文本编辑、服务器管理等等，要搞好一个好的，完善的网站需要一个详细的、合理的、可行性的规划设计。在用ASP开发的时候，在程序的调试上出现了很大的问题，要使用浏览器来浏览才能找出错误所在，这一定程度上延长了开发周期。在开始的时候往往要为了找一个小错误花上大半天的时间。经过多写程序，现在一定程度上已经能快效的找出错误，并熟练的操作数据库语言。随着Web技术的进一步发展和Internet的逐渐大众化，基于Internet的电子商务系统无疑比传统商务具有更加广阔的应用前景。而如何提高电子商务系统中的数据访问效率、交易平台的安全性及事务处理的能力仍是当前人们所关注的热点问题。这些问题有待于我们大家作更深入的探讨，相信在不久的将来电子商务将表现出越来越大的作用。在整个设计过程中学习到了很多关于ASP的知识,得到了很多学习经验,也得到了很多锻炼,同时提高了自己分析和解决和问题的能力.我的毕业设计还有一些漏洞和不足之处，由于时间和能力关系，没来得及实现，希望以后能够完善。77 苏州科技学院天平学院本科生毕业设计（论文）致谢此次的毕业设计得到了许多老师和同学的关心和帮助,在此我对他们表示诚挚的谢意.在这次的设计中我学到了很多很多，给我的启示也是让我终生受益。今后我在工作中也许不会触及这方面，也许根本没有机会再与这些知识接触，但是有了这次的体会我会认真的去对待每一个件事和每一个机会，争取做到最好！首先应该要感谢的是我的指导老师陈莹莹老师,在这次的毕业设计过程中,陈莹莹老师一直对我们认真的指导和监督,给我们指出了学习的方向,让我们可以按时的完成设计.其次我要感谢四年来传授知识给我的各位老师,感谢他们四年来对我们的教导和关心,使我们具备了一定的专业知识和能力.最后我还要感谢同学们,因为大家一起的努力,相互帮助学习,我们才可以在这四年的时光时快乐的学习.77 苏州科技学院天平学院本科生毕业设计（论文）参考文献1《ASP网络编程从入门到精通》顼宇峰马军编著清华大学出版社2《ASP开发实例》清汉计算机工作室编著机械工业出版社3《ASP实例演练之组建商务网站》洪传华编著中国电力出版社4《动态Web应用高级开发指南》康博创作室余波等编著人民邮电出版社5《ASP动态网站之旅》李福荣曹庆臻编著人民交通出版社6《ASP数据库开发实例解析》李严于亚芳王国辉编著机械工业出版社77 苏州科技学院天平学院本科生毕业设计（论文）附录A译文可视化组织5.1引言网页的外观，跟外观在其他许多情况中一样重要。精美的履历能给人留下好的第一印象从而赢得信心。有趣的过期报纸比草率的报纸能得到更多的尊重。在网页上，好的可视化组织能让使用者知道那些条目是有联系的，同时也能帮助人们很快的找到需要的页面。内容组织和视觉组织是紧密相连的。一个有效的布局能加强站点的内容组织，当然，也使得站点更容易导航。或许你已经体验到一个视觉组织好的网站带给你方便的实例。比如说，当你行驶在洲际的公路上，如果你看到右侧通道上方有一个出口标志，那么它直接的表示出口也在右侧。再如，当你浏览桌上放着的一本书的目录，内容的布局能使你很快明白书的结构。因此，你能直接翻到你想看的那部分。一旦你知道你的用户群体是哪些，你就能决定网页的外观应该包含什么。简单说来：内容组织依赖与视觉组织。这是一个设计网页布局的开发者的观点。作为一个使用者的观点，我不得不说以下这点。好的视觉组织能使我们快捷的查找出所需内容的地点。看一个网又或者看整个世界，人们往往会从他们看到的外观和事物的布置上来推断它的结构。在本文的第2段格式塔定律（Gestalt）已经充分让我们认识到可视化组织在网页上的必要存在性。在本文章中，你将从四个简单而有强有说服力的原则来教你建网页的视觉组织。按照以下四个原则，网站能让使用者更加快速地找到需要的信息。文章的目标在本文中，你将会了解以下四个关于可视化组织的原则以及如何应用它们：1.近距离性2.线性排列3.一致性4.对比性5.2简单阐述以下就是这四个原则，不要掉以轻心：74 苏州科技学院天平学院本科生毕业设计（论文）近距离性：人们通常认为紧密相关的数据项应该放在一起。把有关系的项目作为组放在一起，分开没有关联的项目。比方说，将段落的标题放到与相对应的段落附近。线性排列：将相关的数据项目排列成为一条虚拟的线。使同等重要的条目排成一行，把略为重要的条目缩进。这些从属于主标题的项目就是清楚使用这些线的具体阐述。一致性：使有关系的数据项目看起来类似。在每个网页的左边建立一个导航条是体现连贯性的的一个方面，使所有的工具按钮为同样的大小是另一个方面。对比性：使不同的数据项目起来也不相同。把每个章节的标题用大的粗体与内容中的略小的字体区分开。一个优秀的网页可视化组织便是依赖与以上四个原则。通常在建网页时，会将这四个原则结合起来，但是首先在设计的时候每个原则都是各自独立的。5.3近距离性丹的服装店女装男装童装特殊尺码七月特卖雨衣特卖粉色袜子脱销店面地址开设帐户帐户等级注销联系我们这是格式塔定律（Gestalt）之一，在第2段中已经提及。应用该原则更能清晰的将有关的数据项组织在一起。如下两图。图1是一个小商店的初步体现近距离性的导航表。图2是一个合理的布局，利用近距离性充分的表达了整个商店的内容结构。丹的服装店注销粉色袜子脱销联系我们七月特卖童装男装开设帐户雨衣特卖特殊尺码店面地址帐户等级女装图1服装店站点草图图2更加合理的布局74 苏州科技学院天平学院本科生毕业设计（论文）从图1中，开发商忘记了什么？很难说，因为我们无法采访他，但一个合理的猜测，他忘记协调好他的任务分析，也没有事先将内容做卡排序。如果他有记得，他会意识到人们去网上购物会带着各自不同的目的。一些人想去浏览着找到他需要的具体条目；有些是针对降价产品或者特卖去的；有些是想与店主洽谈帐户事宜。假设他事先将内容用卡分做为以下几组：第一组：女装、男装、童装、特殊尺码第二组：七月特卖、雨衣特卖、粉色袜子脱销第三组：店面地址第四组：开设帐户、帐户等级第五组：注销第六组：联系我们。上图中图2更加合理的利用了近距离性，将内容清晰的组织了起来。由此看来，近距离性能使表面看起来相关的事物更加紧密的组织在一起。以上两个例子虽然不十分贴切，但是它强调了近距离性的基本思想。究竟哪一个利用可视化组织表达了内容结构，相信读者一眼就能看出来。近距离性不仅仅是你应当将相关内容组织在一起，同样你还得将无关内容区分开来。近距离性屡屡使用在网页设计中，正面看来，有关东西被组织在一起了，相反的看，无关东西被区分开了。5.4线性排列格式塔（Gestalt）心理学的概念连续性直接引导出可视化组织的下一原则,即对准."准"来自拉丁根"线".在平面设计中，它通常是处理何时将东西沿实线放置，何时将东西沿虚线放置。有较强对准性的页面会含有很多连续的实线。很难再找到一个网站没有用到线性排列。图3中显示了一个叫EddieBaner的站点。这个页面很多部分都包含了线性排列这一准则，其中顶部包括公司名标志和一些重要的为客户过去和当前的购物服务的链接。在这个页面的左部保留了一些季节性的或当前的特殊广告，在页面右边的暗色背景部分，是一个为有购物清单用户提供的快速购物通道。所有的这些部分都是以左部为线性排列的。74 苏州科技学院天平学院本科生毕业设计（论文）图3关于线性排列的好例子5.5一致性一致性是使网站易于理解和导航的最强大的工具之一。这里的一致性是指在网站同一页面甚至者跨页的时候，布局上也要保持高度一致。图4地球科学网页74 苏州科技学院天平学院本科生毕业设计（论文）这个页面的布局是否含盖了所有的页面？这是我们所希望的；将一个包含很多站点的页面聚集在一个相同的模板下不能有效的通过视觉效果表达出它的内容。因为，就算是在缩进的第三层页面，那也要与上一页面宝石相当的一致。图4中能显示出网页浏览者“我在哪？我应该去哪？我能从这儿到哪去？”这些问题的答案。使用一致性连接创建网页，或者连使用一致性布置各个文档的时候,都会大大提高整个网页的可用性。下面，我们将话题转向第四个原则，即对比性。5.6对比性四个原则中的最后一个原则就是对比性。对比性能使你网页上的条目更加吸引人的注意，也能使你在创建视觉层次的同时加强你的内容层次感。换句话说，文章标题用大的粗体字比小标题让人感觉到更加重要。当你决定让两个条目不同的时候,那么必须使他们看起来真的,真的不同。如果你决定把标题做得更大,那么就使它们是正文字体的两倍大小。当然，当你做这些的时候，同样也要用粗体标明标题，这样更加增强你页面的对比性。5.7总结如果你在你制作的网页中了使用了这四个原则——近距离性,对准、一致性和对比性,那么结果将是使你的站点看起来更加专业,这将激励用户的信心,并能使用户更加容易地找到他们想要的。下次当你看到一个比较吸引你目光的好网页时,花一点时间来分析一下这四个网页制作的原则。虽然网站还主要是一个视觉媒介,但在我们有限的视野内越来越多的被人们所使用。你不一定要设计出有艺术家视觉效果的网页。你甚至可以建立仅用HTML（超文本标记语言）和文本文档编辑的一些有特色的网页。你需要一些天赋和训练来创造原始的艺术网页,不管是你自己亲自创作或者是使用AdobeIllustrator软件，但你不必以一个艺术家的标准，为了使视觉组织、内容组织更清晰来来布局文本内容。有效的视觉组织,能强化内容组织，使得页面更加容易导航。74 苏州科技学院天平学院本科生毕业设计（论文）附录Y外文原文VisualOrganization5.1IntroductionAppearancematterswithWebpages,justasitdoesinmanyothersituations.Apolishedlooktoyourresumecreatesafirstimpressionandinvitesconfidences.Anattractivelylaid-outtermpapergetsmorerespectthanasloppy.OntheWeb,agoodvisualorganizationletsuserknowwhatcontentitemsarerelatedandhelpsthemfindthepagestheywant.Contentorganizationandvisualorganizationgohand-in-hand.Aneffectivelayoutreinforcesasite’scontentorganization,andtheresultiseasynavigation.Youalreadyhaveexperiencewithusinginstancesofvisualorganizationtoyouradvantage.Forexample,whendrivingonaninterstatehighway,ifyouseeanoverheadsignforanexitovertherightlane,Itisaprettyfairassumptionthattheexitisalsoontheright.Whenyouscanthetableofcontentsofabook’scontentssoyoucangettothepartyouwant.Onceyouknowhowyourusersgroupcontentitems,youcandecidehowtheitemsshouldappearonaWebpage.Simplystated:Contentorganizationdrivesvisualorganization.Thisisadeveloper’spointofviewfordesigningWebpagelayout.Turningitaroundtoauser’spointofview,wemightsaythenext.Goodvisualorganizationmakesiteasytolocatecontent.WhenlookingataWebpageortheworldingeneral,humansinferorganizationfromtheappearanceandarrangementoftheobjecttheysee.ThematerialonGestaltprinciplesinChapter2helpedyourecognizevisualorganizationintheWebpagesthatalreadyexist.Inthischapter,youwilllearnfoursimpleyetpowerfulprinciplesthatwillhelpyoucreateWebpagesthathaveeffectivevisualorganization.FollowingthesefourprinciplesresultsinWebpagesthathelpusersfindthingsquickly.74 苏州科技学院天平学院本科生毕业设计（论文）GoalsofthisChapterInthischapter,youwilllearnthefollowingfourprinciplesofvisualorganizationandhowtoapplythem:1.proximity2.alignment3.consistency4.contrast5.2TheFourPrinciplesHerearethefourprinciplesoverlightly:·Proximity.Peopletendtoperceiveitemsthatarelocatedclosetogetherasbeingrelated.Grouprelatedcontentitemsclosetogether.Separateunrelateditems.Forexample,placeparagraphheadingsclosetotheparagraphtheyintroduce.·Alignment.Placerelateditemsalonganimaginaryline.Alignitemsofequalimportance.Indentsubordinateitems.Indentingtheitemsthatbelongtoamainheadingisanexampleofusingalignmenttoclarifymeaning.·Consistency.Makerelateditemslookthesame.Puttinganavigationbarontheleftsideofeverypageofawebsiteisanexampleofconsistency.Makingallofthebuttonsthesamesizeisanother.·Contrast.Makedifferentitemslookdifferent.Thelarge,boldletteringofachaptertitlesetsitapartfromthesmallerletteringinthebodyofthepage.Awebpagewithgoodvisualorganizationdrawsonallfourprinciples.Usuallyyouwillusesomecombinationofthesefourprincipleswhenyouareplacingitemsonapage,butthisfirstdiscussionwilllookateachprincipleinisolation.5.3ProximityThisisoneoftheGestaltprinciplesdiscussedinChapter2.ApplyingProximitycanaddclaritytoapagebyorganizingrelateditems.Figure1showsapreliminarystudyforthenavigationalplanforadepartmentstore.Figure2isabetterlayout,usingproximitytoconveycontentorganization.74 苏州科技学院天平学院本科生毕业设计（论文）Dan’sClothingStoreCheckoutCloseoutonpinksocksEmailusJulyspecialsKid’sclothesMen’sclothesOpenanaccountSaleonrainwearSpecialsizesStorelocationsYouraccountstatusWomen’sclothesDan’sClothingStoreWomen’sclothesMen’sclothesKid’sclothesSpecialsizesJulyspecialsSaleonrainwearCloseoutonpinksocksStorelocationsOpenanaccountYouraccountstatusCheckoutEmailusFigure1FirstsketchFigure2AbetterlayoutFromFigure1,whatdidourdeveloperforget?Hardtosay,sincewecan’tinterviewhim,butareasonableguesswouldbethatheforgottoconsulthistaskanalysisandcard-sortinginterviews.Ifhehadremembered,hewouldhaverealizedthatpeoplegotothewebsiteforastorewithdifferentgoals.Somewanttobrowsestofindspecificitems;someareattractedtosalesandspecials;someneedtointeractwiththestoreonaccountmatters.Supposethatthecard-sortinginterviewsyieldedthefollowinggroup:Group1:Women’sclothes,Men’sclothes,Kid’sclothes,SpecialsizesGroup2:JulySpecial,Salesonrainwear,CloseoutonpinksocksGroup3:StorelocationGroup4:Openanaccount,YouraccountstatusGroup5:CheckoutGroup6:Emailus.Figure2showsabetterlayout.Theorganizationwillbeasclearasawhole.Thisshowsthatclosetotheperformanceofthesurfacethingsseemmorecloselyrelatedtotheorganizationtogether.Thistongue-in-cheekexampleemphasizesthebasicideaofproximity,whichisusingvisualorganizationtoconveycontentorganization,whichisusingvisual74 苏州科技学院天平学院本科生毕业设计（论文）organizationtoconveycontentorganization.Itisn’tjustthatyoushouldgroupsimilarthingstogether;youshouldseparatethemfromthingsthataredifferent.Asthetermisusedinwebsitedesign,“proximity”ispositive-thingsclosetogetherarerelated,butitisalsonegative-thingsthatareseparatedaredifferent.5.4AlignmentTheGestaltpsychologyconceptofcontinuityleadsdirectlytotheprincipleofvisualorganization,whichisalignment.Theword“alignment”comesfromtheLatinrootfor“line”.Ingraphicdesign,itusuallyhastodowithhowthingsarepositionedalongavirtualorinvisibleline.Pagelayoutswithstrongalignmentwillhavemanyunbrokenlines.ItwouldbehardtofindaWebpagethatdoesnotmakeuseofalignment.Figure3showsapagefromtheEddieBanersite.Thispagehasmanysectionstoit,includingatopareathatcontainsthecompanylogoandimportantlinksforpresentandpastshoppingaswellascustomerservice.Thereisanareaontheleftthat’sreservedforseasonalorcurrentadvertising.Underneaththisarethreecolumnsoflinks,takingausertovarioustypesofmerchandise.Ontherightofthepageisacolumnwithadarkerbackgroundthatoffersquickshoppingforuserswhohaveapapercatalog.Allofthesesectionuseleftalignment.Figure3aGoodexampleofalignment.5.5Consistency74 苏州科技学院天平学院本科生毕业设计（论文）Consistencyisoneofthemostpowerfultoolsformakingawebsiteunderstandableandeasytonavigate.Consistencyheremeansahighdegreeofuniformityinlayoutwithinapageanduniformityinlayoutacrosspages.Figure4TheEarthSciencepageWillthispagelayoutserveallpageinthesite?Thatistoomuchtoexpect;forcingallpagesofsuchalargesitetofitthesamemoldwouldnotservethebroaderpurposeofusingvisualorganizationtocommunicatecontenteffectively.However,evenallthird-levelpagesstillretainquiteabitofconsistencywiththeupper-levelpages.Figure4showsthattheviewerstillknowstheanswertothequestions,“WhereanI?HowdidIgethere?WherecanIgofromhere”.CreatingpageswithconsistentplacementoflinksandconsistentalignmentoftextwillsignificantlyenhancetheusabilityofyourWebpages.Wenowturntothefourthoftheprinciplesthatyoucanapply,contrast.5.6ContrastThefinaloneofthefourprinciplesiscontrast.Contrastcandrawattentiontoitemsonyourpagesandreinforcethecontenthierarchybycreatingavisualhierarchy.Forexample,Textthatislargeandboldwillbeperceivedasbeingmoreimportantthansmallertext.Whenyoudecidetomaketwoitemsdifferent,makethemreally,reallydifferent.74 苏州科技学院天平学院本科生毕业设计（论文）Ifyoudecidedtomakeheadingbigger,thentwicethesizeofnormaltext.Whileyouareatit,alsomaketheheadingsbold,toincreasethecontrastfurther.5.7SummaryIfyouapplythefourprinciples——proximity、alignment、consistencyandcontrast—toyourwebpages,theresultwillbeaprofessional-lookingsitethatwillinspireuserconfidenceandmakeiteasierforyouruserstofindwhattheywant.Thenexttimeyounoticeawebpagethatstrikesyouaslookinggood,takeamomenttoanalyzethepagefortheseprinciples.Althoughthewebisprimarilyavisualmedium,itisincreasinglyusedbypeoplewithlimitedvision.Youdon’thavetobeanartisttodesignvisuallyeffectivewebpages.Youcancreatesomesharp-lookingpageswithjustHTMLandatexteditor.Youdoneedtalentandtrainingtocreateoriginalartforwebpages,WhetherbypaintandbrushesorwithAdobeIllustrator，butyoudon'thavetobeanartisttoknowhowtolayouttextelementssothatthevisualorganizationservestomakecontenttoorganizationclear.Effectivevisualorganizationthatreinforcescontentorganizationwillresultineasynavigation.74 苏州科技学院天平学院本科生毕业设计（论文）74