【复合式网页界面设计9400字（论文）】

复合式网页界面设计 目录一、相关概念及理论 一、相关概念及理论（一）WEB界面概述根据用户的需求,可以把网页界面的体验分为三个层面感官层面、行为层面和反思层面。其中,感官层面是指用户通过视、听等感官刺激实现对网页界面的认知。这时,用户通过视、听、触、嗅等感官刺激能够体验到网站界面的主题、性质、风格、色调、肌理、形状、装饰、级别等信息,顾客接触到界面设计的印象是直观的。这种主要由美学因素决定的界面印象,起到引起用户注意的作用。可见视觉设计是非常重要的影响因素。在新形势下,网页界面的视觉元素设计不能一成不变,仅贯穿第一层面满足美观需求,还要求对另外个层面也起到促进作用。二是用户在使用网页,即操作时产生的印象,即行为层面,是指页面通过布局、板块逻辑设计等在功能上的实现程度。网站的界面设计不光要使用户感觉好看,重要是用起来好用,不仅使用顺利而且在用户掌控之中。例如流畅的触摸屏操控总是使人倍感惬意。三是页面在使用后期用户的评价回顾,即反思层面。这个层面与用户感受有关,是用户对自我行为产生的思考。这最能体现成熟设计与不合格设计的区别。优秀的界面设计会使用户在使用过程中感到舒适、和谐,使用起来有自豪感甚至“忘适”。网站按照功能分类,可以分为信息类网站、购物类、视频类、下载类、综合类等。按照网站构建的异同特点可以分为大信息量、中等信息量和小信息量的个性化网站。（二）DreamweaverMX简介MacromediaDreamweaverMX是创建专业网站的最佳途径,同时也是构建强大Internet应用程序的最简便的途径。它是Macromedia公司推出的网页设计、网站开发和动画图像处理等方面的综合性工具，它具有强大的功能和友好的工作界面，已经被越来越多的网页设计者和网站开发人员所接受。随着该软件应用范围的扩大，其版本得到快速地更新，功能也不断增强。它集网页设计、网站开发和站点管理功能于一身，具有可视化、跨浏览器和支持多平台的特性。支持多种标准服务器终端交互技术，利用该软件可开发功能强大、高效的动态交互式网站。Dreamweaver具有以下特点：（1）最佳的制作效率（2）无可比拟的控制能力（3）所供即所得（4）梦幻样板和XML（5）全方位的呈现（三）复合式网站设计的必要性经观察研究和思考上百个网站的模块架构及盈利方式,可以得出如下结论综合类型的网站需综合其他类型模块,开辟新的商业模式,以不断满足用户的需要,而网络本身信息量大,信息源广泛,内容形式丰富,增长速度迅速网站与网站间,链接犹如各种吊桥,在原有的复杂结构中构筑新的联系,以供用户在不同网站间跳跃,其动态性强,也加大了网站结构的复杂性随着技术近来不断迅猛发展,用户和网站互动、交互行为增多,用户也更易迷失在浩瀚的信息海洋中。网站呈现综合型趋势的今天,信息架构的难度随之增加,以前单一的网站模式更加复杂,更加大了网站的整体、搜索系统设计、导航系统设计的难度。在网站复杂性增加的今天,信息架构的要求和水准也水涨船高。因此，本文设计以及开发复合式的网站是十分有必要的。（四）复合式网站的价值（1）新的盈利方式深入挖掘或开发了用户需求,争取和开发了新的用户群,寻找到新的盈利方式。新生的综合型网站基于对用户需求的探索、市场分析,吸引和发展了一批用户。全新的综合网站因其明确定位、清晰商业模式引人注目。（2）提升用户体验使用户完成任务更有效、有效率、更高满意度。综合型的网站,使用户可以在同个网站上完成多任务,这些任务可能原来需要登录不同的网站,可能更有利于用户的管理,它们在一定程度上节省了用户完成任务的时间,提高了效率。（3）增加网站粘度对于已有网站来说,不断提升的用户体验,新内容的适度增加、融合,可使网站保持新鲜感,它们带给用户更多期待和惊喜。在长期使用中,增加网站的使用粘度。二、复合式网站设计简介（一）网页设计开发背景随着网络技术的飞速发展，使人类的信息资源实现了高度共享，并从根本上改变了人类进行信息交流的方式，展开了一场史无前例的信息革命。信息革命对社会的各行各业的促进和冲击作用是巨大的，以计算机和网络技术为主的信息技术，已在社会各个领域得到了广泛应用，并逐步改变着人们的生活、学习和工作方式，展示出良好的前景。Internet是目前世界上最大的计算机互联网络，它遍布全球，将世界各地各种规模的网络连接成一个整体。据估计，Internet上内容范围跨越了教育科研、文化事业、金融、商业、新闻出版、娱乐、体育等各个领域，其用户群十分庞大，因此，建设一个好的Web站点对于一个机构的发展十分重要。随着网络用户要求的不断提高及计算机科学的迅速发展，特别是数据库技术在Internet中的广泛应用，Web站点向用户提供的服务将越来越丰富，越来越人性化。数据库技术和网站的结合是当今Web技术的一个热点。有了数据库的支持，可以扩展网页的功能，可以方便地设计出交互式页面，可以构造功能强大的后台管理系统，可以为网站的更新、维护提供极大的方便。复合式网页的设计以及制作方法随着Internet的飞速变化也在不断的更新和发展，设计以及制作的工具也越来越多，使用的语言也越来越多。在这个背景下复合式网站的制作也随之兴起，并日渐趋于成熟起来。基于这个背景，笔者在本次毕业设计中，主要基于复合式网页的使用界面进行探讨以及分析。（二）网页设计开发的目的和意义网站建设在Internet应用上的地位显而易见，它已成为机关、学校、企事业单位，甚至寻常百姓家的信息交流的桥梁，为广大用户提供了一个资源共享和信息交流的平台。开发该复合式网站，其目的有二：第一，使用先进的开发平台和Web编程技术，创建一个功能完备的复合式网站系统。在开发设计的过程中，充分运用技术，体现其自身具有的优点，真正把理论知识运用在实践中。第二，开发本复合式网站，希望能够给用户提供一个便捷的网站使用平台。该网站将为用户提供丰富的信息，用户可以购物、游戏以及进行影片分享。与此同时，网站管理员会及时更新网站信息，使得用户能够快速获取最新的新闻。（三）网页设计任务本文的任务是在.NET平台下的Web编程技术的基础上，充分运用ASP.NET技术设计一个动态的复合式网站系统，该网站要体现.NET技术的优越性。在设计的过程中，进一步学习和掌握ASP.NET的核心技术。这个复合式网站主要整合了购物网站、影片分享网站以及游戏网站三种为一体的复合式网站，通过这三种网站的使用对象以及使用群体的不同的，来将所有的网站使用者整合在本次课题设计中的复合式网站平台内，最终将这三大网站的优势集合为一体。（四）复合式网站设计的条件及开发环境该复合式网站设计需要的条件有：（1）具有一定的网络条件。（2）系统设计的软件和硬件设备：Dreamweaver软件、VB.NET编程语言、FireworksMX、电脑等。（3）文献数据库，例如知网、万方等下载论文需要的参考资料。开发环境：根据本人所掌握的技术及本系统的对硬件平台的要求，本文选择.NET作为系统的开发环境。Microsoft.NET开发环境主要包含两部分内容平台分别是.NET应用程序的运行平台.NETFramework和.NET的开发环境VisualStudio.NET。VisualStudio是微软公司推出的开发环境，可以用来创建Windows平台下的应用程序和网络应用程序，也可以用来创建网络服务、智能设备应用程序和Office插件。VisualStudio2005包含了一系列高效的、智能的开发工具，它结合了Microsoft以往编程语言(VB，C#语言)的优势，不论是为开发初学者，还是为经验丰富的企业开发团队都提供了很多全新的、强大的功能。因此，本人选择VisualStudio2005及C#编程语言作为开发工具。下面是复合式网站的开发及运行环境。（1）技术平台：微软的.NET框架。（2）信息服务器：InternetInformationService6.0。（3）开发语言：ASP.NET2.0技术框架，实现语言完全采用c#语言。（4）数据库：SQLServer2005。（5）服务器操作系统：开发过程采用WindowsXPProfessional操作系统，系统实施后可采用的Windows2003Server或Windows2003Server服务器操作系统。平台硬件标准配置如下表1所示：表1系统运行环境序号服务器及客户端配置参数数量1综合管理平台服务器刀片式服务器，2CPU或双核，4GB内存，Windows2003Server操作系统。根据需要，可作双机备份，也可作容灾备份基本数量1台2客户端主机CPU：IntelCore2双核，DDR2内存，容量2G，硬盘160G，独立显卡，预装正版WindowsXPProfessionalSP3操作系统基本数量1台(根据客户端数量作调整)三、复合式网站需求分析需求分析是软件生存周期中相当重要的一个阶段，通过开发人员与用户之间的广泛交流，确定待开发软件的功能、性能、数据、界面等要求。需求分析的好坏将直接影响到开发的软件的成败。（一）功能需求功能需求说明了系统的功能，即系统是如何记录、计算、转换和传输数据的。每个接口都有它自己的功能。通常，用户界面是最重要的接口。（1）用户基本需求=1\*GB3①购物=2\*GB3②游戏=3\*GB3③影片分享（2）用户功能需求=1\*GB3①需要了解站点的总体概况=2\*GB3②需要提供丰富的信息供用户浏览=3\*GB3③需要拥有一个用户和用户之间、用户和管理人员之间的信息交流平台=4\*GB3④需要发布公告和重要通知=5\*GB3⑤需要提供友情链接=6\*GB3⑥需要让用户知道如何联系我们（二）数据需求数据需求是需求的重要组成部分，用于说明系统的输入、输出数据以及系统内部存储的数据。该复合式网站中，数据库的内容是系统的最重要部分，网站功能的实现主要用于数据维护和数据的各种显示。其中数据模型则说明了系统所要存储的数据以及数据之间的关系。下面给出该复合式网站的实体/关系模型。用户名用户用户名用户用户角色电话性别电子信箱QQ号码个人简介注册日期浏览次数影片分享次数密码图1用户属性图m普通用户m普通用户浏览影片影片购物购物下载分享回复管理员编辑影片分享论坛版主删除置顶购物栏目购物栏目物品编辑mnmnmmnnn1nnnn11nnn图2复合式网站的E-R图（三）质量需求质量需求说明了系统执行功能的好坏程度。许多质量需求不仅仅是软件需求，而是对整个系统的需求。下面分别来进行说明。（1）界面风格需求①风格倾向名次：明亮、时尚、活泼②主色调倾向名次：橙黄色、红色、淡紫色（2）可用性需求①网站界面友好，简洁清晰，以便用户能快速地掌握并使用②网站访问速度要快，避免等待③网站应使用通俗的语言，也就是一般用户熟悉的词汇、惯用语和概念，而不是术语④避免出现有歧义的词汇，方便用户的正确选择（3）环境需求需要分享数据，上传文件，因此网站应遵循通用的网络技术（4）可维护性需求网站应具有延展性并且可维护（5）安全性需求用户的信息能够得到尊重，不能被随意篡改；网站应该是安全的尽量不受到黑客的攻击。四、网站概要设计（一）网站结构设计根据网站开发的目的以及上面获得的需求分析，将网站的内容划分为以下几个方面：（1）用户登录注册模块用户通过注册，可以成为网站的合法用户，并享受网站提供的特别服务。（2）购物网站模块在本复合式网站中，购物网站模块是三大网站功能之一，其中购物网站模块可以细分为商品模块、用户中心模块、留言板模块、商品查询模块以及帮助系统模块。（3）游戏网站模块在本复合式网站中，游戏网站模块也是其中三大主要模块之一，其中游戏网站模块可以分为游戏登录模块、游戏主界面模块以及游戏后台模块。（4）影片分享网站模块在本复合式网站中，影片风向网站模块也是其中三大主要模块之一，其中影片分享网站模块可以分为影片网站主界面、影片观看界面模块以及影片分享模块。（5）后台管理模块后台管理是为管理员提供了一个方便操作数据库的平台。管理员可以对用户、新闻、影片文件以及网站信息进行管理。（二）网站布局设计网页是网站构成的基本元素，网页的精彩与否，除了色彩的搭配、文字的变化、图片的处理等这些不可忽略的因素外，还有一个非常重要的因素——网页的布局。通常有三种网页布局技术：层叠样式表、表格、框架。该网站中页面的板块布局均采用表格进行定位，然后根据网站的内容对其使用相应的CSS样式。（三）网站视觉设计1.网站风格设计网站风格是一个抽象的概念，是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括网站的CI（标志，色彩，字体，标语）、版面布局、浏览方式、视觉效果等。风格是独特的，是站点不同于其它网站的地方，通过网站的外表、内容、文字以及交流，可以概括出一个站点的个性。根据需求分析中用户对界面风格的需求，将网站的总体风格定义为生动活泼、热情、具有时尚感。2.网站色彩设计色彩能够在不知不觉中影响人的心理，左右人的情绪，因此一个站点根据自身的内容以及性质来对色彩进行定位显得尤为重要。为了与设计的网站风格相协调，将网站的色彩定义如下：绿色：柔和，能使人精神平缓，给人一种平和的感觉淡黄色：亮度低，给人温暖的感觉红色：强有力、喜庆的色彩，能使人精神兴奋淡紫色：给人宁静的感觉黑色：大众化颜色，不会产生视觉疲劳通过整合风格和色彩定位，将网站的视觉设计总结以下几点：使用宋体黑色作为网站的主要字体网站中穿插绿色、红色提示亮点网站标志、名称、标语明亮活泼，色彩鲜艳使用尽量少的颜色五、网站详细设计与实现（一）网站实现过程分析首先根据用户需求确定各个模块要实现的功能，然后根据功能分析设计出数据库，包括各个数据表关系图的详细结构。实现功能模块时，采用先模块化，后集成的方式。即对网站各个功能模块分别独立设计和调试，在创建网站主页面时再将各个功能模块通过主页面的导航菜单系统集成到一起，最后进行整体设计调试。在访问数据库时，将数据库连接字符存放在web.Config文件中，避免对数据库的反复连接，并可减少代码编写，从而提高系统开发效率。用户登录注册模块以及购物网站模块、游戏模块和影片分享模块中，涉及到的页面比较多，在这里只对核心页面的实现进行介绍。（二）用户登录注册模块该网站中，对于前面介绍的两个模块，所有用户均可使用。也就是说未注册用户也可以享受其功能。但是对于分享以及留言板和影片上传以及后台管理来说，基于安全性考虑，必须是合法用户才可使用。特别是后台管理，其安全性更加重要，仅仅允许网站管理员使用。1.功能概述用户登录是影片分享以及影片上传和后台管理的入口，只有合法用户才可进入。未注册用户可以先完成注册再进入网站，实现浏览和分享影片视频等功能。管理员用户登录后进入后台管理页面进行相应的操作。2.数据库设计基于不同角色的用户拥有不同的权限，现设计表users来保存网站的所有用户信息，包括管理员。其结构如表4-1所示。表2users存放用户信息字段名称数据类型说明UserId文本用户名（主键）RoleId文本用户角色：A表示管理员N表示普通用户UserPWD文本用户密码UserName文本用户姓名Sex文本性别Tel文本电话Email文本电子信箱QQ文本QQ号码Intro备注个人简介SubmitDate日期/时间注册时间Movie数字上传影片数ReMovie数字分享影片数表5-1中，字段RoleId用来区分用户的角色，不同角色可以实现不同的功能。另外，当用户在论坛中每次发表和回复文章后，就会更新Movie和ReMovie字段，这样就可以随时获取用户的上传影片视频和分享影片视频数目。3.具体实现（1）注册表单register2.aspx用户表users中设置了用户名为主键，那么在用户注册的过程中不可避免会出现用户名重复的情况，许多网站中，用户在提交表单后被拒绝注册时系统才提示用户名重复的问题，这样用户输入的大量信息将无效。为了避免这种情况，该网站中在用户输入了用户名后可以及时对其进行检验，检验数据库中是否存在该用户名的用户，存在与否，都会给用户一个提示。由于难点在于正则验证中正则表达式的语法，那么在这里列出所有使用了正则验证的正则表达式。用户名：^[a-zA-Z0-9_]{4,20}$——4-20位字母、数字和下划线密码：^[a-zA-Z0-9_]{4,30}$——4-30位字母、数字和下划线真实姓名：^.{1,20}$——1位到20位任意字符电话：^([0-9]{3,4}-[0-9]{7,8})|([0-9]{11})$——如格式E-mail：^.{1,}@.{1,}\.[a-zA-Z]{2,3}$——如同abceef@163.com的格式QQ号码：^[0-9]{5,15}$——5-15位数字该页面负责生成了验证码图片，那么在注册表单中，利用普通的img标记显示该图片。当用户提交表单后，将其输入的验证码和Session中的验证码比较即可。（2）登录表单登录模块使用了用户控件，由于所占版面比较小，把它放在了网站的主页中。用户在登录时系统会判断其身份，如果是管理员，将进入后台管理页面；如果是普通用户，在进入影片分享网站界面后，可以浏览影片、上传影片、分享影片；如果是某个栏目的版主，除了浏览影片、上传影片、分享影片外，还可以实现删除影片和将影片置顶的功能。用户登录以后，页面上显示欢迎用户登录字样，并允许用户修改个人基本信息和修改密码。在修改个人信息和修改密码页面表单中同样使用了验证控件。（三）购物网站模块1.功能概述网站是交流的重要工具，目前在门户网站、游戏、教育、娱乐等网站中的作用都非常大。该购物网站模块支持多个板块，但只支持一级分类。普通消费者用户可以浏览商品、购买商品；而对于购物网站的卖家来说，可以上传商品，对商品的信息进行编辑，以及管理自己的店铺等。2.数据库设计根据上面介绍的功能，下面来进行数据库的设计。由于该购物网站模块支持多个板块，因此首先设计一张栏目信息表forum，如同前面购物网站模块中的产品类别表一样。结构如表5-2所示。表3forum存放论坛栏目字段名称数据类型说明ForumId自动编号商品编号（主键）ForumName文本商品名称ForumCount数字商品数目ForumManager文本卖家ForumPicture文本商品图片表5-2中，字段ForumCount统计该栏目中的商品数目，其实在存放商品信息的表中也可以统计，但是经常统计计算会花费大量的时间，该字段放在表5-5中，只要用户上传商品时更新一下该数目即可。下面来设计表商品，该表比较重要，用来存放所有商品章。其结构如表5-3所示。表4商品栏目存放商品字段名称数据类型说明BBSId自动编号商品编号（主键）ForumId数字商品编号Title文本商品标题Body备注商品内容FatherId数字商品编号Childs数字购买商品次数Hits数字点击次数UserId文本买家用户名Email文本买家支付信息SubmitDate日期/时间上传商品时间SetTop数字是否购买1是0否LastUserId文本最后更新时间3.具体实现购物网站模块的实现采用了三层结构，并且使用了业务对象。使用业务对象，可以把开发中经常用的功能封装起来，然后就可以在各个页面像使用内置类一样方便地调用。下面对该设计用到了业务对象源文件作一个简单的介绍。1)源文件Common.vbCommon.vb中定义了一个类ConvertString，用来转换字符串。它的两个共享方法HTMLEncode和URLEncode分别用于显示HTML标记和UBB代码。2)源文件DataUsers.vb在用户登录注册模块、论坛模块以后后面将要介绍的后台管理模块，都要对用户进行管理。源文件DataUsers.vb则主要用于用户管理，其中定义了四个类。DataUsers类主要用于添加、删除用户等操作，它的属性和方法如表4-4所示。表5DataUsers类的属性和方法名称类型说明Count属性获取注册的用户数目GetUser方法获取所有用户InsertUser方法添加用户DeleteUser方法删除用户UpdateUserInfo方法更新用户个人信息UpdatePWD方法更新用户密码IsExist方法查找指定用户名是否存在IsPassed方法判断用户名和密码是否正确Items方法返回一个DataUser对象DataUser类则主要用来返回一个用户的各种信息和对该用户进行操作，它的属性和方法如表5-5所示。表6DataUser类的属性和方法名称类型说明UserId属性获取用户名RoleId属性获取用户角色DataUserLog类主要用来判断用户是否已经登录，是否具有相应的权限。它有两个共享方法IsNormal和IsAdmin，分别用来判断登录用户是否是普通用户和管理员。（3）购物网站详细页面particular.aspx在goodsslist.aspx页面中，当选定商品标题时，就可以打开particular.aspx页面，在其中利用Repeater控件显示该标题对应的商品内容和相应的商品详情。并且在下方提供一个购买商品的表单。利用Repeater控件绑定数据时，每绑定一条记录后，就会执行MyRepeater_ItemDataBound过程。显示发表该文章的用户信息时，此处利用一个用户控件，将用户名UserId传递给该用户控件，其中就会显示用户名、发表和回复数目、是否在线等信息。为了显示HTML标记和UBB代码，其中用到了ConvertString类的方法。显示数据时，利用SetForm过程将商品编号GoodsId保存到一个隐藏的文本框中，用于添加商品时使用。此外，还自动设置了商品标题、商品详情以及商品购买信息。六、网站测试与性能分析网站测试是保证网站质量的主要手段，其主要方式是在设计测试用例的基础上检验网站的各个组成部分是否符合网站需求。该网站主要包括五大功能模块，在设计各个功能模块的过程中，采用白盒测试的方法对各个模块进行测试，以发现编码和详细设计过程中发现的错误。设计完所有模块，对其进行集成测试，检查模块间的接口和通信，最后进行确认测试。其中集成测试和确认测试采用了黑盒测试。下面分别对网站的各个重要模块设计测试用例，进行测试。测试过程以及测试结果用网站界面表示出来。首先给出网站的首页，其中包括网站标志、名称，网站导航，站点公告，站点日历，新闻以及名站导航。测试十：在注册表单中，输入个人信息。“检测用户名”可以判断用户输入的用户名是否已经存在。如果输入用户名test，测试结果显示如图6-1。图3检测用户名用户输入用户名123，则提示“只能输入4-20位字母数字合下划线”，如图5-2。图4用户名错误用户输入确认密码和密码不一致，如图5-3。图5密码错误当在注册表单中输入的所有信息都通过验证后，点击“确定”按钮，则注册成功。在注册表单中输入的用户信息如下图6-4所示。图6注册表单填写完注册表单，点击“确定”按钮，则提示注册成功，如图6-5所示。图7注册成功注册完毕用户，返回到登录页面，输入以上注册的用户名和密码，则进入网站。各大界面实现图：图8购物网站主界面（1）图9购物网站主界面（2）图10游戏网站主界面图11影片分享网站主界面总结本设计实现了一个基于ASP.NET的复合式网站系统。