D客商城的网站前端开发.doc

吉林大学珠海学院毕业论文（设计）d客商城的网站前端开发web front-end development ofd ke mall完成日期 2013年4 月 18 日吉林大学珠海学院本科毕业论文（设计）开题报告d客商城的网站前端开发摘要现在计算机与计算机网络的飞速发展的时代，人们对计算机以及计算机网络的使用依赖也是越来越大。用户可以网上交友、聊天，在网上学习，查阅资料，还在网上听音乐。另外，用户还可以在网上下载资源、进行电子商务交易。特别是电子商务大大的减少了人们对周围环境的依赖，无聊你是哪个国家的用户，都可以通过浏览器浏览到世界各地的各类信息，总之方便，正因为有了上面说的优点，各类大大小小的网站快速的出现，这也就是我这次毕业设计的选题意义。本文就电子商务网站的规划而建设，以软件工程的思想对进行研究和分析。本论文主要工作在于：首先web2.0页经行了详细概述，对internet的作了详细说明。然而web设计能健康发展是因为采用了web2.0标准，如果没有web标准就不会有那么多的可访问性和连贯的设计。不采用web标准，就落后与时代。在这个网站泛滥时代，我们要网页页更好扩展性，适用于自动数据转换，而且要更加规整，实现网页的内容和表现分离。基于web2.0标准，本论文是对div+css布局公司网页进行了讨论。而且对网页设计两个重要软件作了简单介绍。其中，也对网站建设中提到的专业术语作了简单介绍，并对商城网站设计进行讨论；对公司网站规划建设过程进行了详细的分析；使用photoshop、dreameaver等软件进行网站的各种功能实现。关键词：div+css；网页设计；网站重构 ；internet；dreameaver；photoshopweb front-end development ofd ke mallabstractthe rapid development of computers and computer networks, the growing reliance on computer networks. people dating online chat, ask questions online access to information, still listening to music online. in addition, people will also conduct business transactions online, download information, has a large number of users. especially e-commerce greatly reduce the dependence of the people on the surrounding environment, where users can browse to the types of information around the world, very convenient, due to the above advantages, various types of websites have mushroomed appear this is the practical significance of my graduation project. personal website planning on building a software engineering process line analysis and research. in this paper, the main work is focused on:an overview of the web page through the line, reviewed the history and development of the internet, the definition of the web page and then elaborate characteristics. web design health development depends on the adoption of web standards, web standards can not be real accessible and coherent design. without web standards, and can not keep up with the times. era in this standard, we need the pages more easily extensible, suitable for automatic data exchange and more structured. css, page content and style separation. view of web standards, the paper focuses on the div + css layout company website. and the development tools and techniques used in the website development process are briefly introduced.term by line explanation of the origin and development of the website by line; own personal website from the planning and construction of the line detailed analysis; dreameaver, photoshop technology to achieve a personal website building referred tothe various functions of the website and website building put forward their own ideas and suggestions.key words:div + css ;web design ;website reconfigurable;internet;dreameaver photoshop目录1 web概述11.1 什么是web11.2 web 2.0标准11.2.1 结构标准语言21.2.2表现标准语言21.2.3 行为标准 dom ecmascript22 d客商城的开发背景32.1 div+css简介32.1.1 什么是div32.1.2 什么是css32.1.3 div+css32.2 层叠样式表简介42.3 div+css布局结构方式43 网页设计开发工具介绍63.1 梦幻网页的编织者dreamweaver cs563.2图形、图像编辑设计软件制作软件adobe photoshop cs464 d客商城的需求分析74.1 消费者的需求分析74.2 企业需求分析74.3 d客商城功能分析84.3.1 功能描述 前台管理 后台管理95 d客商城页面分析与设计105.1从需求到分析105.2 d客商城首页设计105.2.1 布局设计105.2.2风格定位115.2.3具体设计 页头设计 主体内容设计145.3.1 2d定制街页面展示175.3.2 3d打印街页面展示185.3.3 3d打印机页面展示195.3.4 2d批发街页面展示205.3.5 d客学院页面展示215.3.6 d客网址导航页面展示226 网站测试23总结24参考文献25致谢261 web概述1.1 什么是webweb意思是蜘蛛网和网。现广泛用于网络、互联网等领域。表现有三种表现形式，即超媒体、超文本、超文本传输协议等。万维网是现在internet上应用最重要最广泛的信息服务类，它已经影响到了互联网上的新闻、广告、展示信息和电子商务等各个服务类领域。 web采用（b/s）工作模式也就是浏览器/服务器模式，它的运行模式是：请求处理应答。web是以超文本标记语言html与超文本传输协议http作为基础，用户可以通过浏览器友好的信息浏览。web的诞生，将全世界互联网中的不同网站的信息有机的连在一起。在web服务模式中，信息是以网页面（也称web页）的形式储存在web服务器中，这些web页通过超文本的形式对信息进行组织，一个信息页通过链接到另外一个信息页。这些所有的链接也既可以放在一个主机上也可以放在多个主机上。页面到另外一个页面的信息链接是由统一资源定位器url(uniform resource locator)实现。这样用户通过浏览器向web服务器发出请求命令，服务器根据浏览器的请求命令将保存在服务器中的指定页面返回给客户的浏览器，浏览器接收到页面命令后对其进行解释，最终将信息以文本、声音、图像等的形式呈现给用户。 web服务的最大特点就在于其有高度的集成性，能够实现不同类型数据信息（比如图像、文本、动画、声音和视频等）和服务（比如new、telnet、ftp、mail及gopher等）的无缝链接，它适用于广域网中信息的检索、组织与显示。1.2 web 2.0标准“web 2.0”的概念原始与一个会议中，展开于oreilly公司与medialive国际公司两者之间的头脑风暴。被称作互联网先驱和oreilly公司副总裁的戴尔多尔蒂(dale dougherty)发现，和称为的“崩溃”截然不同，互联网比其他的任何东西都更重要，使人激动的新应用程序与网站正在以令人惊讶的规律性涌现出来。重要的是，那些在网络泡沫幸存下来的公司，看起来都有共同之处。那么会不会是互联网公司那场泡沫的破灭标志了互联网的一种转折，使得呼吁“web 2.0”的行动有了意义？人们都认同这种观点，web 2.0会议由随之诞生。web 标准不是特指某一个标准，而是一系列的标准集合，现在的网页主要是由三部分组成：结构、表现、和行为。对应的标准分为三个方面：结构化标准语言主要包括 xhtml和xml ，表现标准语言主要包括css，行为标准主要包括对象模型（如 w3cdom）、ecmascripr等。这些标准大部分由w3c起草和发布， 也有一些是其他标准组织制订的标准， 比如 ecma (european computer manufacturers asscoiation) 的 ecmasscript 标准。 我们来简单了解下这些标准：1.2.1 结构标准语言xml(the extensible markup language)是可扩展标识语言。目前推荐遵循的是w3c在2000年10月6日发布的xml1.0。和xthml一样，xml 同样是来自sgml，但是xml是一种可以定义其他语言的语言。xml 最初被设计出来是弥补html的不足，以其强大的扩展性满足网络信息发布的需要，后来慢慢的用于网络数据的描述和转换。xhtml是 the extensible hapertext markup language的缩写，意思是可扩展标识语言。现在推荐遵循的是w3c于2000年1月26日发布的xthml1.0 ，即使xml数据转换的能力强大，可以完全替代html，但是面对现在成千上万的站点，直接串通xml还尚早。所有，我们可以在html4.0的基础上，用xml的标准对html进行扩展，得到了xhtml 。总之，建立xhtml的目的在于实现xhtml向xml的过渡。1.2.2表现标准语言css(caseading style sheets)意思是层叠样式表。现在推荐遵循的是w3c于1998年5月12日发布css2。w3c之所以创建css标准，目的在于以css取代传统的表格式布局和其它表现的语言。纯css布局和结构式xhtml结合能很好的帮助设计师将表现与结构分离，这样使得网站更容易被访问以及更加容易维护。1.2.3 行为标准 domdom (document object model)是文档对象模型。根据 w3c 发布规范/dom/,dom是一种系统平台，浏览器，语言的接口，以便访问其他网页的组件。总而言之，dom是解决netscaped 的javascript和microsoft 的 jscript 之间的冲突，给予web 开发者和设计师一个标准的方法，让他们来访问他们站点中的脚本、数据和表现层对象。 ecmascriptecmascript是ecma（european computer manufacturers association) 制订的标准脚本语言javascript。目前推荐遵循的是 ecmascript 262。2 d客商城的开发背景2.1 div+css简介2.1.1 什么是divdiv标签和其他html标签都是一样的，都要由关闭标志。要是不擦入css样式表，它的效果和标记一样。div代码如下：内容如果把css的扩展属性放入div标签中，那么可以控制div容器中的元素显示在屏幕的具体位置，为了控制一一对应，最好是给当前的div加上标识id名，以区分其他div标记。另外一种情况是：如果你想让多个个div具有相同的样式属性时，可以给每个div加上相同的class属性，这种具有同样class属性的div标记样式相同。如下：内容内容2.1.2 什么是csscss是英文cascading style sheet缩写形式，中文意思为级联样式表或层叠样式表。网页设计师可用它来定义文档的表现样式，这里指的文档不仅限于（x）html。通过css，设计师可控制文档的颜色、字体、链接、图像、表格和布局格式，设计师也可以将表现充网页内容中分离出来，放在网页的某一处，而且可以保持一个独立文件存放，大大得减少文件容量，节省网络和空间的带宽、节约网页维护这的维护时间。css有如此多的好处，使用好和掌握css技术对于网页设计师来说是非常重要的。2.1.3 div+cssdiv+css是网站标准中常用术语之一，div+css 是布局方式一种形式,这种网页布局有有别于传统的表格网页布局,真正的达到由w3c提出的内容与表现的分离。自从html4.01以来，w3c就没有发布过新版本，因为html变得越来越复杂了、更专用化。xhtml语言可以将html语言标准化，用xhtml语言编写的html页面，就可以使用xml技术。使得网页有更好的扩展性，适用数据自动交换，而且更加规整。现在大多网站都已经使用div+css布局而放弃了表格布局，下面是div+css的特点：1）符合由w3c提出的标准。微软等很多大公司都是w3c支持者。这点很重要，这使得你制作的网站不会很快的被淘汰。2)浏览器能向后兼容，未来的浏览器，无论是ie7或者是火狐，这些浏览器都能兼容你所制作的网站。3)搜索引擎更加友好。div+css网页布局和表格布局对比，会使搜索引擎更加友好。4)方便重新调节样式。样式和内容实现分离，使样式和页面的调整变起来非常方便，便于改版。现在大型的门户网站和主流的web2.0网站，都是以div+css的网页布局，更加证明了div+css是越来越受设计师欢迎。5)css的最大优势之一是简洁的代码，对于一个大型门户网站来说，节约传输带宽，大部分人都知道，搜索引擎喜欢简单清洁的代码。6)表现和内容的分离，在团队开发中分工更明确，减少相互关联性。2.2 层叠样式表简介目前有三种方法在站点网页上使用css：1) 网页上创建内部的样式表2) 应用内嵌样式到各个网页元素3) 网页链接到外部样式表3种方法各自有各自优点：当你的网站大部分页面用同一个样式是，你可使用外部样式表。用一个或者是多个样式表定义样式，并且连接到所有网页，就能是所有网页达到外观一致的效果。如果你想把网站改版，这需要改外部样式表一次就够了，而效果会反应到所连接的网页上。外部样式表通常文件扩展名是.css如 123.css。当设计师只要定义一个页面样式时，那么就可以使用内部样式表，是一种级联样式表，“嵌”在网页的 标记符内。内部的样式表只能适用于当前网页。2.3 div+css布局结构方式近年来，业界越来越对div+css感兴趣，无聊时个人网站，还是企业网站，设计师业界对div+css作为一个很好的标准。用div+css建立网站，那div就是整个网站的架构，css就想网站的衣服。其中的内容，就是血肉。要设计一个网站，就得从div+css入手。div元素是用来为html文档内大块的内容提供结构和背景的元素。div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。各大个人网、门户网、企业网基本上都在用div+css这一网页布局方式。比如：腾讯网、新浪网、网易网、ibm官网、等等。下面就经典的网页布局为例子，顶部是导航，下面为flash，底部用ul 列举出公司各项服务的连接。从整体布局来看，采用的是单栏式，页面简洁大方，受国外影响，现在国内的网页布局逐渐由华丽转变到简单大方，个人也比较喜欢比较简约的网站。经典网页div布局：图2-1 常见网站布局图3 网页设计开发工具介绍3.1 adobe dreamweaver cs5adobe公司出的dreamweaver是可视网页设计编辑软件。使用dreamweaver可以轻松简单设计一些建跨平台、跨浏览器的页面。dreamweaver可以为用户做到的：使用动态html功能而不用重新写一行代码。它甚至还可以检测用户的工作成果在所有流行的系统平台和浏览器中可能发生的bug。dreamweaver可以自定义功能。用户可以创建自己想创建的命令和对象修改菜单和快捷键，甚至可以编写javascript代码来扩展dreamweaver的行为和属性检查器。另外dreamweaver工作区是很常灵活的，所有他适合各用户的应用习惯调节工作区域。常用的dreamweaver工作组件有以下几类：1) 工作区可以看到选中当前文档，它的外观和浏览器的差不多。2)装载器中包含一些打开和关闭常用检查器和模板的按钮。3 )对象工具栏中有创建不同类型的对象（例如图象、表格和层等）的按钮。4 )属性检查器可以查看选定对象的属性。5 )快捷菜单能使用户对当前选择或区域快速执行某些命令。6) 可固定的浮动工具栏，用户可以将浮动窗口、检查器和工具栏组合在一个或者是多个选择窗口中。3.2 adobe photoshop cs4adobe公司的photoshop是目前最流行的图像、图形编辑设计软件，在数码影像处理、广告设计、图像编辑合成、美术绘画、封面设计、网页设计等领域都广泛应用。1) 方便出来图文。2）使用图层集管理。3）剪裁和剪切图像更加方便。4）将所有工具属性设置放在头部，用户设置参数更加方便。4 d客商城的需求分析4.1 消费者的需求分析作为一个消费者，网购重要的需求，无疑是安全快捷方便的完成购物流程，一个优秀的购物系统应能够满足以下几点的需求：在最短时间内找到消费者需要买的商品；用快捷、安全、简便的方式完成电子交易并可以随时可以关注自己的订单状态；可以根据自身实际情况选择最合适自己的购物配送方式；在以消费者为中心的购物系统中完成最舒适的购物过程等等。1）商品分类与商品搜索功能。 为了满足消费者能够方便快捷的找到自己需要或是感兴趣商品，网上购物系统必须有一个健全的符合大部分消费者思维的商品分类等级，为消费者提供完善的商品分类目录。这个分类目录能指导整个网站展示结构建立，企业有个好商品分类目录在整个网络购物系统的开发中有着非常重要的意义，满足在多种情况下的需求。2）电子交易方式需求。现在国内在电子交易与电子认证模块的发展已经很大程度上满足消费者对快捷，安全，简便电子交易方式的需求。尽可能满足大多数消费者对交易方式需求，是网上购物系统在交易支付方面需求重点考虑问题。3）订单状态实时追踪。在购物网站中，订单是重要的交易凭证之一，物流配送与交易支付都需要以订单作为依据，对消费者跟企业双方都是很重要的。4）物流配送方式需求。最大满足大部分消费者对物流配送方式上的不同需要。因此从消费者利益角度出发，使消费者可以选择自身最信赖或最合适自身实际情况的物流配送方式，尽可能为消费者节省运费成本，也是网上购物系统要着重考虑一个问题。4.2 企业需求分析一个企业，对网上购物系统中最主要的需求，以企业提高工作效率与经济效益为前提条件，与其同时处处表现企业优秀的客户服务理念。一个优质的购物系统应该要满足消费者以下几点需求：1）整体vi需求。良好页面展示效果，在网上购物系统中，企业需要依靠整体vi来建立和提高企业形象度，以获取消费者的初步好感，才可以刺激消费者的消费欲望，获得经济效益。2）商品分类目录和优惠活动信息发布。企业为消费者提供方便快捷安全的购物环境同时，更需要用商品目录与商品搜索功能为消费者展示更多类似的产品，因此产品分类目录和产品搜索功能需要在消费者进行商品选择时，展示更多企业能提供的类似的或相关的商品。3）订单管理和查询。订单的管理对消费者与企业的重要性已经在上面做说明，企业需求根据消费者订单来了解消费者的购物状态，消费者购买的商品数量、其他信息，及支付方式选择和是否完成支付。完成支付之后，需要依据订单的联系方式，收货的地址以及选择配送的方式为消费者进行物流配送。4）用户信息管理和客户服务。企业要对消费者信息进行分析，管理，统计等。这对于为何处有市场和如何开拓潜在市场都是有着重要的意义的。4.3 d客商城功能分析根据需求分析，得到商城的功能模块，如图所示：d客商城前台管理后台管理商品查询购物车管理用户管理订单管理商品分类管理商品信息管理订单处理会员信息管理图5-1 d客商城功能模块图4.3.1 功能描述 前台管理商品查询：当消费者进入商城主页时候，可以通过主页的分类查看最新或者是优质的商品信息，如：按照不同的礼品分类查看，还可以通过产品名或者产品型号等关键字进行查询自己所需要的商品。购物车管理:当消费者决定购买某件商品时，应该能够将商品对应基本信息记录到购物车里，而且用户能返回到商品展示页面，继续挑选商品。与其同时消费者还能删除，添加购物车的商品及清除购物车所有商品操作。但是购物车中的订单生成后，购物车信息自动清除。订单处理：在消费者确定支付之后，提示消费者选择送货方式和付款方式，之后生成对应的订单的记录，以便于配送人员依据订单的信息进行后续出货、发货的处理，同时消费者也可以随时进入订单管理界面，查询与自己的订单信息，并可以随时取消商品订单。会员信息管理：为了能够实现商品购买，会员要注册并且正确登陆，之后产生用户相关信息，如联系方式、详细地址等需要有系统进行管理的。而且也应该允许用户修改自己相关信息。 后台管理商品分类管理：通过这模块，网站后台管理人员根据实际需要增加新商品类别也可以对已原有的商品分类进行删除、修改等操作。商品基本信息管理：为了保证网上商城商品的信息实效性，后台管理人员可以用这模块随时添加新商品的信息，同时亦可以对原来的商品进行删除及修改等操作。后台订单处理：后台管理人员可以借助查询功能模块查询订单信息，方便与网站配货人员根据订单信息进行后续的出货、发货的处理。已经处理过的订单，也应原来记录，以便于管理人员进行查询订单。会员信息管理：管理人员可以在这模块中查询对应的消费者信息，并可以删除消费者的相关信息，这对确保用户信息的有效性。5 d客商城页面分析与设计5.1从需求到分析要做一个商城网站，能让消费者快速的了解产品内容和快速找到自己想要的产品，因此商城网站的目的主要有两个：1.使浏览者或消费者迅速知道公司大部产品资料，这就要求网站的文字要精简，减少大篇幅的文字描述，以图片为主。图片要清晰，设计简单清晰，使消费者或者浏览者感到公司的水平；2.使浏览者或消费者快速了解商城的定制购买产品流程，注册过程，以及对业务的一般操作过程，方便消费者能够与公司方便快捷地进行沟通和联系，减少中间带来的麻烦环节。建立商城网站要有一个清晰明了的网站布局。比如，导航条，无论是门户网站，个人网站，政府网站都要导航条的，所有商城也不列外。但导航条现在还是有很多人用，是因为它给消费者或者浏览者一个明确的布局，便利人们查找本身所需商品的信息。某个角度，大家都在用的东西说明已经被大家接受了。网站做错了事个每一个用户看的。网站要经常改变，给人以新意。5.2 d客商城首页设计5.2.1 布局设计根据需求可以知道，在页面上部要有logo和导航，中间插一个搜索栏，接下来使banner，展示商城最新产品和以下广告，中间商品内容展示各种分类的热销产品，以供消费者浏览。接下来又一个banner，介绍公司信息。页面最底端为页脚区域，显示一些版权信息。很明显可以用四行两列的布局方式来安排页面内容。如下图：图5-1 d客商城首页布局5.2.2风格定位当用户打开一个网站，给用户留下第一印象不是网站丰富的内容，不是网站漂亮的版面布局，而是网站的色彩搭配。色彩对用户的视觉效果是非常明显的，一个网站设计是否成功，某种程度上决定于设计者对色彩的搭配和运用。因为网页设计是一种平面效果设计，在排除动画效果、立体图形之外，在平面效果图上，最强是色彩的冲击力，很容易给可以留下深刻印象。所有，在网页设计时，必须注重色彩的搭配。d客商城的搭配主色为：白、橙色、黑、三种颜色。白色代表纯洁、朴素、纯真、神圣、明快。橙色是活泼欢快的光辉色调，是一种温暖的色，它可以使人想到丰收的秋天，硕果累累，是一种富足、幸福而快乐的颜色。充分表现了一个商城网站应有的气质和形象。给消费者留下深刻的印象。5.2.3具体设计 页头设计网站的头部主要分为两个部分，放在一个div容器中。一是logo、搜索栏、登陆注册信息。，logo使一张早做好的图片，直接放置在头部容器左侧，调整好位置，中间是搜索栏，容器的右边是注册登陆信息；二是导航条，网站导航条没有立体感效果，依然用文本流。网站的导航栏目可以让消费者对网站的内容和信息一目了然。导航分为：所有商品分类、2d定制街、3d打印街、3d打印机、2d批发街、d客学院和购物车。导航采用的是ul li布局，之后再用a标签对进行连接到对应页面，设计操作上都是非常简单。其中3d打印街相关代码如下：3d打印产品：礼品类| 玩具类| 文具类| 服饰类| 居家类| 建筑类3d模型：礼品类| 玩具类| 文具类| 服饰类| 居家类| 建筑类| 工业类3d打印手板：按用途分类| 按打印机型分类| 按打印材料分类| 按成型原理分类 对应的css代码：ul#navmenu ul border: 1px solid #93d6c5; display: none; height: auto; left: 0; list-style: none outside none; margin: 0; padding: 0; position: absolute; top: 24px; white-space: nowrap; width: 100px; word-spacing: inherit; ul#navmenu .menu_tridprint left: 0px; top: 29px; width: 670px; z-index:600; 其效果图：图5-2 页头效果图 主体内容设计根据用户在阅读时经常采用从左到右，从上到下的习惯，主体内容之中，用一个大div盒子，其中分为两个banner，上下各一个，中间位产品分类展示。这样能更好地吸引浏览者的眼球。在第一个banner中，采用商品图片切换的形式展现在首页中，打破整个精态页面的风格，两侧是2d定制街和3d打印机的一些静态图片，动静结合。接下来就是具体的产品分类，以静态图片方式展现。之后又是另外一个banner，介绍企业背景文化。如下图：banner效果图：图5-3 banner效果图商品展示效果图：图 5-4 商品展示效果图底部banner效果图：图6-5 底部banner效果图 页脚页脚用.foot 在里面嵌套表格排列，左面是公司其他网站的友情链接等等，右面是网站的版权和法律条款属于本公司等。5.3 其他页面设计为了方便管理，其他页面导航与页面属性都是采用首页的导航和body属性。5.3.1 2d定制街页面展示图5-6 2d定制街页面效果图5.3.2 3d打印街页面展示图5-7 3d打印街页面效果图5.3.3 3d打印机页面展示图5-8 3d打印机页面效果图5.3.4 2d批发街页面展示图5-9 2d批发街页面效果图5.3.5 d客学院页面展示图5-10 d客需要页面效果图5.3.6 d客网址导航页面展示图5-11 d客导航页面效果图头部注册栏代码：hi， document.write(readlocal_user(local_username,);请 | 登录 | 注册 | 收藏 | 设为首页对应的css代码：.header_right color: #fff3ba; float: left; font-size: 12px; height: 50px; line-height: 20px; overflow: hidden; text-align: right; width: 200px; 6 网站测试代码完成后，之后对源程序进行测试。软件测试目的在于争取在于用最短的时间发现程序中多的错误，方便及时纠错，增加软件可靠性，实用性。它在整个设计过程中占有相当重的分量。测试是软件开发中的