1、本科毕业设计（20 届）网页 UI 的设计与实现所在学院 专业班级 电子信息工程 学生姓名 学号 指导教师 职称 完成日期 年 月 目录【摘要】 .0【关键词】 .0【Abstract】 .0【Key Words】 .01.设计的概况 .11.1 设计背景 .11.2 设计目的 .11.3 设计要求 .12.开发工具简介 .12.1Dreamweaver .12.2Photoshop.22.3ASP.NET 技术简介 .23.设计与实现 .23.1 数据库的需求分析 .23.2 数据库的 E-R 图设计 .23.3 数据库的结构创建 .34.系统结构设计与实现 .64.1 系统结构设计 .64
2、.1.1 系统前台功能模块 .64.1.2 系统后台功能模块 .74.2 系统实现 .84.2.1 系统前台功能实现 .84.2.2 系统后台功能实现 .115.网页制作与实现 .135.1 制作网页的步骤 .135.2 网页布局 .145.2.1 常规的页面布局 .145.2.2 页面的配色方案 .145.2.3 页头和页尾 .145.2.4 关于广告 .145.2.5 表单的布局设计 .155.2.6 按钮 .155.2.7 反馈 .155.3 特效实现 .166.总结 .22【参考文献】 .22致 谢 .22网页 UI 的设计与实现【摘要】 网页 UI 设计有一套完整的设计方案，包括人机
3、交互、操作逻辑、界面美观等很多内容，认知心理学、设计学、语言学等不同的学科都参与了这个复杂的过程，在此都扮演着重要的角色。一个成功的网页设计它要具备一个好看时尚的外观，还要考虑到它的结构布局是否合理，本论文将网页设计一般步骤将丰富的效果应用与网页设计理论相结合，通过制作网页，阐述了网页设计过程中一些的视觉效果的效果设计和具体操作方法。【关键词】 电子商务 网页 特效【Abstract】 Webpage UI design has a complete set of design scheme, including human-computer interaction, logic operat
4、ion, beautiful interface, a lot of content, subject in cognitive psychology, design science, linguistics and so different are involved in this complex process, this has played an important role. A successful Webpage design it should have a good fashion appearance, but also take into account the stru
5、cture it is reasonable, this paper will Webpage design general steps of applying effects and Webpage design theory rich combination, through the production of Webpage, design and operational methods described Webpage design some visual effects in the process of.【Key Words】 E-Commerce Web Effects 11.
6、设计的概况1.1 设计背景自从1946年世界上第一台电子计算机在美国宾西法尼亚大学莫尔学院问世以来，时至今日互联网早已成为了一条将全球的人们紧紧联系在一起的纽带，特别是在这几年电子商务这种不受时间与空间限制的经营方式出现后现在越来越多的企业都开始重视并乐衷于在互联网上建设自己的官方网站，拥有一个页面精美的网站就相当于在网上建立一个展示企业的精品橱窗，提供了一个让外界了解自己的平台，能够很好的推广企业的文化与实力，扩大市场。一个网页设计的成不成功取决于用户对于这个页面的认可，用户的感受决定了开发者的采用哪种设计方案。在将实习过程与服装网站建设的设计过程相结合的时候，对网页设计与制作过程中的网页布
7、局的方法，框架结构的架构，特效展示的合理安排等相关事项做以下论述。1.2 设计目的UI 界面的设计，一直都没能在软件设计当中得到很好的重视。大家对界面设计的理解也只是局限于美工而已。 把 UI 当做只是做一些简单的美术设计去对待，认为 UI 的工作只是简简单单的绘图，对用户交互的重要性缺乏足够的理解； 认为 UI 也只是作为次要性的工种，在一个设计团队当中 UI 工作人员相对于整个团队的人员配比，薪资福利都可以证明这一问题。一个界面设计的友好美观，会让人更容易对商家，对产品产生好感，为商家创造更有优势的卖点。想要通过设计结构层次分明美轮美奂的网页页面达到树立公司形象，宣传产品，招商加盟的目的，
8、UI 设计就显得尤为重要。1.3 设计要求网页风格要在保证整个页面协调有序的基础上显得有新意和具有时尚的气息、让用户在较短的时间内看到最想看到的内容又不显得凌乱，怎么样让 banner、flash 和图片所制作的页面协调放置是特别要注重的一点，它强调的是一个协调性而不是简单的理解为一种效果的堆砌；在安排首页的信息分布时要注重主次的区分，不能造成信息冗余。页面要求精致，通过在页面中搭配图片、广告条、flash等装饰手段，让页面产生一种更加生动的展示效果 。可以通过后台控制网页的设计风格的改变以及图片新闻内容内容的更新实现产品的3D 效果、产品图片切换效果、产品销售渠道、产品搜索等方面。2.开发工
9、具简介2.1DreamweaverDreamweaver 是现在应用最为广泛的可见网页编辑软件，Dreamweaver 可以制作出的网页在不同的操作系统平台，浏览器当中都能够得到很好的运行，大大提高了网页的开发效率，这也是现在制作web 的最常用工具。Dreamweaver 的主要特点有：（1）形式灵活：Dreamweaver 将设计与代码可以自由的切换，不仅方便了源代码的编辑，还能在第一时间查看代码所要展现的最直观效果。（2）可视化编辑环境：Dreamweaver 是一种可视化的网页编辑软件，由于软件自带的代码生成能力在很多时候我们只要对页面进行版面的设计，节省了开发人员的时间。（3）强大的
10、 CSS 功能：在网页中使用 CSS 样式可以有效的将网页对象的外观，网页界面的美化，进行统一修改和管理。Dreamweaver 编辑 CSS 样式表的功能非常完善和强大，用它来编辑 CSS 样式是非常简单的。（4）集成性高：Dreamweaver 与 Fireworks，Flash，Shockwave 的功能都大同小异，可以在这些2Web 创作工具之间自由的进行切换。（5）媒体支持能力强：在 Dreamweaver 里面进行制作时，可以添加很多比如JAVA，Flash，Shockwave，ActiveX 这些媒体元素， 。（6）Dreamweaver 还具有其他软件所不具有的强大扩展能力。2
11、.2PhotoshopPS 俗称网站开发软件当中的“三剑客”之一，对图片的特殊效果处理能力，展示出的效果是得到了众多设计者的认可的。2.3ASP.NET 技术简介ASP.NET 是微软公司使用.NET 框架所提供的编程类库所构建成的 WEB 应用程序开发平台。它使得ASP.NET 管理、部署、创建 WEB 应用程序变的非常简单。ASP.NET 的编译程序采用的是通用语言，所以在很多情况下都可以和其他软件兼容。ASP.NET 可同时支持 C#、VB、Jscript 这些目前主流的开发语言，通用性就更广泛了。ASP.NET 具有效率高、可重复利用性、代码量少这三大优势。所有 ASP.NET代码都可
12、以进行直接的编译，代码量相对于 ASP 可以减少很多。开发人员还可以按照自己的需要对ASP.NET 进行一些功能的移除。3.设计与实现3.1 数据库的需求分析现在的很多网站都要求加入数据库管理系统来实现网站内容的管理和数据的维护。在这个系统我选取的是 Access 这个系统。服装在线销售系统的设计和模块的具体划分以及具有的主要结构和数据项有以下几个方面：用户信息表：用户的编号、用户的名称、用户的密码、用户的权限、Email、密码的问题和答案。购物车信息表：购物的编号、会员的编号、商品的编号、商品的数量、商品的价格和是否结账选项。留言信息表：留言人的 ID 号、留言人的名称、留言的内容、留言时间
13、和是否删除留言内容等。订单信息表：订单的编号、商品的编号、用户的编号、收货人的姓名、收货的地址、邮政编码、联系人电话、送货方式、付款方式、订单状态、下单时间和订单总额。商品信息表：商品的编号、名称、商品第一级分类、商品第二级分类、是否推荐、是否特价、商品的原来价格、会员优惠价、点击次数、图片路径、商品库存、销售数量、商品描述。回复信息表:回复人的 ID 号、回复的内容、回复的时间、留言人的 ID 号和回复人的 ID 号。3.2 数据库的 E-R 图设计概念模型是对这个世界用一种抽象的方法，在众多的表达方式里面最常用的就是 E-R 模型图。在E-R 图中，实体是用矩形框表示的；椭圆形代表实体的属
14、性；菱形代表实体间的联系，为了更好的设计数据库，清楚简便的描述出实体与属性的关系，图 1 所示一张包含实体属性的完整 E-R 图。3管理员会员管理用户名密码用户名密码email地址问题查询订单编号名称 价格用户数量用户管理留言标题时间管理购物车编号商品数量价格用户答案管理商品库存 价格 数量编号名称权限图 1 E-R 模型图3.3 数据库的结构创建本系统一共创建了 6 个用户表，下面对这些表格和其中字段所代表的含义做个简单的介绍。名称：用户信息表。标示：userinfo。数据来源：前台页面获得。用户信息表如表 1 所示。表 1 用户信息图表列名 类型 是否主键 说明useridusername
15、passwordpoweremailquestionanswer自动编号文本文本数字文本文本文本是是否否否否否用户编号用户名密码1 会员 2 管理员电子邮件密码问题问题答案4名称：购物车信息表。标示：cart。数据来源：前台页面获得。购物车信息表如表 2 所示。表 2 购物车信息表列名 类型 是否主键 说明cartid userid productid count checkout自动编号数字数字数字是/否是否否否否购物编号用户编号商品编号商品数量是否结帐名称：订单信息表。标示：orders。数据来源：前台页面获得。订单信息表如表 3 所示。表 3 订单信息表列名 类型 是否主键 说明Orde
16、redProductidUseridAcceptnameAddressPostalcodePhoneDeliveryPaymentStateOrdertimeOrderprice文本文本数字文本文本文本文本文本文本数字日期/时间货币是否否否否否否否否否否否订单编号商品编号用户编号收货人收货地址邮政编码联系电话送货方式付款方式订单状态下单时间订单总额名称：留言信息表。标示：message。数据来源：前台页面获得。留言信息表如表 4 所示。表 4 留言信息表列名 类型 是否主键 说明Messages_IDMessages_NameMessages_ContentMessages_TimeIsDel
17、ete自动编号文本备注日期/时间是/否是否否否否留言 ID留言人名称留言内容留言时间是否删除名称：商品信息表。标示：products。数据来源：后台页面获得。5商品信息表如表 5 所示。表 5 商品信息表列名 类型 是否主键 说明ProductidProductnametypeid_1typeid_2recommendedspecialspriceuserpricespecialspricepointcountimagepathcountsellcountdescription自动编号文本数字数字是/否是/否货币货币货币数字文本数字数字备注是否否否否否否否否否否否否否商品编号商品名称商品第一级
18、分类商品第二级分类是否推荐是否特价商品原价会员价格特价点击数量图片路径商品库存数量销售数量商品描述名称：商品一级类别表。标示：type_1。数据来源：后台页面获得。商品一级类别表如表 6 所示。表 6 商品一级类别表列名 类型 是否主键 说明typeid_1typename自动编号文本是否商品一级分类商品一级名称名称：商品二级类别表。标示：type_2。数据来源：后台页面获得。商品二级类别表如表 7 所示。表 7 商品二级类别表列名 类型 是否主键 说明typeid_2typeid_1typename自动编号数字文本是否否商品二级分类编号商品一级分类编号商品二级名称名称：回复信息表。标示：us
19、erinfo。数据来源：前台页面获得。表 8 回复信息表列名 类型 是否主键 说明Relay_IDRelay_ContentRelay_Time自动编号备注日期/时间是否否回复 ID回复内容回复时间6Messages_IDMUser_ID数字数字否否留言 ID回复人 ID4.系统结构设计与实现4.1 系统结构设计这个在线服装销售系统主要分为前台和后台两个功能模块。前台部分是提供给普通用户和那些未注册用户使用的，主要包括用户注册、用户登录、用户中心、常见问题、商品搜索、商品分类、销售排行、新品上架、特价商品、热销商品、购物车和用户留言这些功能模块。后台只有管理员才有权限登录，主要在后台管理留言板
20、、订单信息、会员、商品类别等。4.1.1 系统前台功能模块（1）用户功能模块用户功能模块包括用户注册、用户登录、用户中心、常见问题四大模块。用户点击注册的时候，页面会自动跳转到注册页面，用户需要填写用户名、密码、确认密码、电子邮箱、密码问题和密码答案。还可以使用用户名检测功能，找出没有被注册使用的名字。最后点击“注册新用户”按钮进行注册，完成注册之后页面会自动跳转到购物网的首页。用户中心里面对个人资料可以进行修改，也可以在我的订单中查看已经购买的商品，还可以进行密码的修改。常见问题页面显示的是用户在服装销售网站常见的一些问题，新手应先查看常见问题页面。（2） 商品搜索分类模块该模块主要包括商品
21、的搜索、商品的分类、商品销量的排行、新品上架、特价商品、热销商品这几个方面的内容。用户想要购买何种商品可以按照分类去查询。在高级搜索页可以限定搜索的服装类别和服装的价格区间，使得搜索的商品更加符合用户的需求。商品分类可以使用户快捷的查看该服装分类下面的所有服装。销售排行是根据商品销售的数量进行的智能排行，热门商品则是根据所有用户对该服装点击数目进行的排行，点击越多排名越高。特价商品与热销商品是管理员在后台的商品管理中进行手动管理，可以手动添加商品到这两个页面。（3） 购物车模块购物车模块是用户在服装页面点击“购买”按钮之后，将订单信息放在购物车里面，在购物车中可以删除不想买的商品，修改商品的购
22、买数量和最终金额，当购买完成之后点击去收银台，填写自己联系方式和地址并选择付款和快递方式，点击提交后订单就会在后台自动生成订单号。（4） 留言板模块留言板提供了一个用户和网站之间互动交流交流平台，用户通过在留言板上给网站进行留言，包括留言的姓名，标题，内容和一些联系方式。系统前台是为前台会员设计的包括用户功能、商品搜索分类、购物车和留言板，如图 2 系统前台功能模块7系统前台功能模块用户功能商品搜索分类 购物车 留言板商品搜索商品分类热销商品新品上架特价商品销售排行用户注册用户登录用户中心常见问题图 2 系统前台功能模块图4.1.2 系统后台功能模块（1）用户管理模块用户管理分为管理员管理与会
23、员管理两大模块。管理员登录后台可以修改用户的账号密码和其他的一些基本信息。当会员很多时，可以利用会员管理的查找会员进行会员查找添加新会员等。（2） 留言管理模块当用户发布留言后管理员可以在后台查看回复留言信息。（3）订单管理模块顾客在前台将中意的商品拍下之后，管理员可以登录后台对订单进行管理，每一笔订单都有一个唯一的编号，通过用户名可以找出相应的订单，在后台可以看见订单的状态，商家将货品发送出去之后顾客收到货物就可以在前台的会员中心确认收货。（4）商品管理模块商品管理包括商品类别管理和商品管理两大模块。管理员可以在后台完成对商品类别的划分。设置完类别之后，管理员可以添加商品，先给商品选定类目，然后给商品添加适当的标题、商品价格、商品库存，添加商品图片，对商品进行详细的描述、还可以选择是否推荐和是否特价，提交保存，进行发布商品修改已发布商品。本系统的后台分为用户管理、留言板管理、订单管理和商品管理四个部分。如图 3 系统后台功能模块。
