购物网站的设计与页面优化.docx

1、购物网站的设计与页面优化摘 要：我们已经进入互联网时代，互联网实现了世界范围内网络间的互联和信息共享，并已全面介入人们生产生活的方方面面。随着我国计算机技术的发展与普及，网络已经成为人与人之间交流的一种重要形式。购物网站作为互联网的新兴产物，已经成为人们生活中不可缺少的一部分。而作为一个网站，页面视觉效果和页面优化将成为不可缺少的一部分。本文通过结合买卖网的网页设计、布局和页面优化来阐述购物网站的前期的制作与优化。关键词：网页设计；页面优化；购物网站 目 录引言 11. 市场调研 11.1行业网站的现状 11.2买卖网的功能 12. 文献检索 12.1网页制作工具简介 12.2网页设计流程 2

2、2.3网页设计要素 22.3.1页面板式结构 22.3.2页面色调 32.3.3网页的色彩设计 32.4网页优化 43. 设计实践 53.1买卖网的总体设计 53.1.1功能设计 53.1.2布局设计 53.1.3颜色搭配 63.2买卖网的详细设计过程 63.2.1买卖网首页设计过程 63.2.2买卖列表页设计过程 83.2.3买卖详细页设计过程 83.3网页优化 93.3.1关键词选择 93.3.2网站描述 93.3.3网站logo优化 93.3.4网站结构清晰 103.3.5网站内容更新 103.4制作总结 104设计自评 11参考文献 12附录1网页特效和作品图片 131.javascr

3、ipt实现tab切换 132.javascript实现焦点图切换 143.作品图片 18附录2设计作品光盘 21引言跟随着网购之风“淘宝网”之后，不断的出现各种购物网站。所谓的购物网站，从专业术语来讲，分为B2B、B2C、C2C网站。买卖网作为一个购物网站，在很大程度上给消费者带来了很大的方便,可以不出门就能买到自己想要的东西,节省了很多的人力物力，同时也有大批的商家应运而生。此外购物网站也从另一方面带动了消费，促进了互联网的发展。1. 市场调研1.1行业网站的现状二十一世纪信息高速发展，网络已逐渐成为人们获取信息的主要渠道，成为人们日常生活中不可缺少的组成部分，网络购物这种新型的购物方式也已

4、融入寻常百姓的生活。网络购物进入中国市场短短十年来，从边缘人群消费边缘商品，发展到主流人群消费主流商品，中国的网络购物市场逐渐成熟，并且呈现一种高速发展的态势。1.2买卖网的功能1客户前台功能：a客户管理功能系统实行会员注册或登陆，对客户的相关信息的信息可以进行修改。b商品信息查询功能为客户提供查询商品信息、搜寻商品。c购买功能客户确定购买对象、下订单、进入购物系统，完成购买。d网上结算银行功能系统采用网上银行方式，支持网上结算，经过认证后，根据银行帐号在网上处理购买结算。e售后评价及退货功能完成购物后，可以进行评价或者要求商家予以退货服务。2商家后台功能a商品信息管理功能由系统管理员或由系统

5、管理员授权委托管理整个系统的商品信息，发布销售商品信息，商家注册取得授权后可在系统后台随时增添、修改、更新销售商品信息。b订单管理功能系统内构成由订单生成，按时间顺序生成订单号、订单入库，订单查询组成的完整的订单处理流程。c配送管理功能合同（订单）确认后，卖方向买方送提货单证（网上下载），凭单提货、配货送货。d商品退货处理和售后评价功能售后服务中不合格退货的要求，系统支持退货处理，包括货款退还的操作，同时对客户予以评价。e客户信息管理功能系统实行会员注册，对客户的相关信息、交易信息等实行跟踪管理，适时会员实行升级制度。f网上结算银行功能系统采用网上银行方式，支持网上结算，经过模拟认证后，根据银

6、行帐号在网上处理收款结算。2. 文献检索2.1网页制作工具简介Dreamweaver是美国Macromedia公司开发的集网页制作和管理网站于一身的网页编辑器，它是第一套针对专业网页设计师特别开发觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver是当前主流的站点和网页编辑器，其代码简洁、兼容性和整体功能都很强。Dreamweaver的介入，使得网页一些部分的实现变得更加直观简便。Photoshop是Adobe公司旗下最为出名的图像处理软件之一。多数人对于Photoshop的了解仅限于“一个很好的图像编辑软件”，并不知道它的诸多应用方

7、面，实际上，Photoshop的应用领域很广泛的，在图像、图形、文字、视频、出版等各方面都有涉及。2.2网页设计流程图2.1 网页设计流程2.3网页设计要素2.3.1页面板式结构网站的布局类型大致可以分为单一结构、普通结构和复杂结构3种。单一结构：以宣传为目的的网站常用的单一结构一般只是由主画面和网站导航组成。采用单一结构的网站目的不是为了提供信息，而是旨在通过视觉效果提供个性的外观风格。普通结构：通常的普通结构是由主画面、网站导航、新闻及公告、快捷菜单、横幅广告等最常见的内容组成。普通结构常见于企业信息、服务介绍等网站信息不太庞大的信息提供网站。复杂结构：复杂结构常见于旨在提供购物、新闻、专

8、业门户等庞大信息和服务功能性网站。这类网站在初始页面提供大量的信息，有助于使用者快捷的查找自己想要的信息，能更诱发使用者的兴趣，促使使用者点击网站内容。为了让使用者在网上冲浪时明确自己所停留的位置，准确传递网站的整体性很重要。通常有网页布局和视觉效果体现整体性。通过所有页面都适用的网站导航、标志、标题、子菜单、内容排列及位置连贯性等让使用者方面浏览网站。买卖网的布局结构属于复杂结构，它主要提供购物，信息等服务性方面的信息，主体的布局是左右形式的，符合大众的审美观和浏览观。将主导航分类醒目的放在左侧，消费者能清楚的看到商品的分类，从而快速的找到自己所要购买的产品。另外，在导航栏上设有搜索栏目，可

9、以让买家快速找到产品，如图2.2。图2.2买卖网首页导航另外，将热门的产品分类也进行了罗列，之所以要罗列出来，是为了能让买家知道别人都在搜哪些产品，哪些产品比较受欢迎。2.3.2页面色调一般而言，人们对大型设计作品的视觉要素的认知顺序依次为“色彩-图画-图案-标志-文字”，色彩是最先吸引人门视线的特殊视觉要素。色调的冷暖。色调一般分为暖色系、冷色系、中性色系三类。红橙黄等颜色使人想到阳光，故为“暖色”。绿青蓝等颜色与黑夜、寒冷相连，称“冷色”。中性色彩使人产生休憩、轻松的心情，可以避免产生疲劳感。颜色的轻重感觉：各种色彩给人的轻重感不同，重量感是质感和色感的复合感觉。目测物体的颜色能得到轻重感

10、，浅色密度小，有一种向外扩散的现象，给人质量轻的感觉。深色密度大，给人一种内聚感，从而产生质量重的感觉。色彩艳丽与素雅：一般认为，如果是单色，饱和度高，则色彩艳丽，饱和度低，给人素雅的感觉，除了饱和度，亮度也有一定的关系。不论什么颜色，亮度高时即使饱和度低也给人艳丽的感觉。高饱和度、高亮度的色彩显得艳丽。2.3.3网页的色彩设计网页使用色彩大致可以分为三大类：主体色、辅助色和强调色。主体色是指页面最基本的代表色彩。辅助色是指辅助或补充主体色的色彩。强调色是指起强调作用，具有醒目视觉效果的色彩。网页的色彩设计大致可以分为以下3种方式。1.只使用基本色：将主体色、辅助色及强调色的基本色彩运用到整个

11、网站，保持网站的整体连贯性、确定网站的色彩形象。2.不同的服务菜单使用不同的色彩：选择运用相同的主体色，以及不同的辅助色和强调色，或者选择运用完全不同的主体色、辅助色及强调色。3.多种色彩搭配：运用多样化的色彩进行搭配，不仅要确定主体色、辅助色及强调色，更要考虑如何为网站配色、如何搭配多样化的色彩以及表现丰富多彩的形象。2.4网页优化网站页面优化就是通过seo手段使得我们的网站在搜索引擎友好度和站内用户的良好体验度上升。这样做的目的很简单，就是为了让我们的网站在搜索引擎的排名靠前并且得到很好的客户转换率，主要包括一下几个内容：1.关键词的选择网站关键词对网站排名的影响很大，所以确定好网站的关键

12、词是网站不可缺少的一部分。首先网站的关键词要和网站的主题与内容高度相关，如果关键词跟网站的内容不相关，也会影响搜索引擎的收录和排名。所以，相关性是关键词选择的根本因素。其次，关键词的热度也是重要的参考指标，最为理想的关键词是搜索次数最多，竞争强度最小的那些词，不过大部分搜索次数多的词，也是竞争最大的词，我们可以通过Google关键词工具以及XX指数来帮助我们进行关键词的挖掘、扩展。2.网站标题的定位题中需要包含有优化关键字的内容，同时网站中的多个页面标题不能雷同，标题一旦确定就不要再做修改。3.网站内部链接结构尽量改变原来的图像链接和flash链接，使用纯文本链接，并定义全局统一链接位置。必须

13、要用图片的地方可以使用alt标签，并且在alt标签属性中加入关键词。4.每个页面包含有关键字并保持一定的频率简单做好了内容结构的调整之后，立即到搜索引擎登录，希望能尽早收录新标题和新描述。3. 设计实践3.1买卖网的总体设计3.1.1功能设计1登录功能买卖网首页顶部有登录按钮，买家和卖家都是通过此处进行登录操作。2搜索功能导航旁边的搜索框主要提供买家进行产品搜索的，只要输入关键词即可搜出带有此关键词的产品。3活动公告首页左侧购物公告和促销活动功能主要是将网站的信息公布给用户。4排行榜功能排行榜功能是根据产品的销量自动排名的。5筛选功能买家可以通过筛选功能来查找产品，这样能缩小范围，更贴近买家的

14、要求。3.1.2布局设计1首页布局买卖网首页分为上、中、下三个部分。顶部主要是logo及横向导航，采用通栏的方式进行布局。中间部分主要是产品，以左右为布局，左边是产品，右边是公告、活动、排行榜等信息。底部是版权信息，采用的也是通栏布局。2栏目页布局买卖网栏目页以及详细页的顶部和底部都是和首页的相同的，中间部分采用左右布局的形式，左边是一个筛选界面，右边是产品的展示，买家唉通过筛选，产品会在右边展示出来。3详细页布局买卖网详细页采用左右布局的形式，左侧是筛选功能，和列表页一样，右侧是产品的详细情况，包括产品的详细图、产品描述、产品评价等信息。3.1.3颜色搭配买卖网颜色以红色和白色为主，红色代表

15、热情、活泼、热闹、温暖、幸福、吉祥、奔放、喜悦。采用红色能在第一时间给顾客视觉冲击，让顾客记住网站。我们在日常用语中使用红色描述一些事情：我们会大怒(see red)、有大喜之日(red letter day)、坐上红眼航班(red eye flight)、扑上红地毯(red carpet)然后狂欢作乐(paint the town red)。还有红娘、戴红帽、红颜知己等。毫无疑问，红色对很多人以为着很多事情。买卖网之所以采用红色，是因为红色会吸引注意。它不是个低调的背景颜色，它会在页面中”叫喊”，它会从照片中跳出来，你可以很大胆地在整个设计中广泛使用，就算是一点点也会起到很大的作用。而白色作

16、为背景色，给人清爽舒适的感觉，买卖网运用了红色与白色的对比配色，这样就不会因为红色的出现而过于温暖，也不会因白色的出现而显得单调。在整个热烈的色彩中加入一点变化，让网站别具一格。3.2买卖网的详细设计过程3.2.1买卖网首页设计过程买卖网首页主要以左右布局为主，一共分为三大区块，第一区块以左中右形式布局，有三部分内容组成，分别是导航、广告位和公告信息。左侧的导航基本把全部的产品都包括在了里面。之所以放在左侧，是因为人们习惯了从左侧开始阅读，放在第一区块的左侧，当顾客进入网站时，第一眼就能看到，这样方便了消费者寻找自己需要购买的产品。中间这部分是广告区，卖家可以在这块区域打广告，之所以将这块区域

17、作为广告，是因为这块紧跟着导航，并且处于中间位置，这样很醒目。右边的是公告和信息板块，这块选择放公告信息，一是为了图文结合，二是为了让最新的公告、活动等信息能让顾客第一时间看到，如果放到下面去的话效果就完全变了，如图3.1。图3.1 首页第一区块第二区块主要是产品区，包括了四大内容：1.热门分类；2.新品展示；3.畅销商品；4.广告图片；第一块热门分类采用的是文字的形式，而新品展示和畅销商品采用了图片形式，并且新品展示和畅销商品图片展示的方式也是不同的，这样就避免了样式单一、重复累赘，如图3.2。图3.2 首页第二区块第三区块主要由新手上路、购物保障、售后服务、加盟买卖网组成，四个栏目横向并排

18、，清晰整齐，一幕了然，如图3.3。图3.3 首页第三区块3.2.2买卖列表页设计过程买卖网列表页主要以左右布局位为主，左侧是导航，导航里包含了产品的名称、品牌、价格区间、材料和颜色。这样的方式方便了顾客的筛选。右侧是产品的展示，右侧顶部是最近热销商品，这是让顾客参考用的，如图3.4。图3.4 列表页设计图3.2.3买卖详细页设计过程买卖网详细页也是左右布局，左侧和列表页一样，右侧是产品的详细信息，当鼠标放到产品图片上时，图片会被放大，这样可以让顾客清楚的看到产品的细节部分以及材质问题。底部是针对这件产品的评价，顾客有不满意或者意见等都可以在评价区进行评价，如图3.5。图3.5 详细页设计图3.

19、3网页优化3.3.1关键词选择 站内关键词选择。关键词的多少也会影响网站的权重，而3-4个关键词是最适合的。买卖网选择的关键词是，。3.3.2网站描述一个网站最好的描述就是将网站的关键词也嵌入到网站描述中，而买卖网就采用了这样的方法，在网站描述中，我们将关键词“购物商城”和“购物网站”这两个关键词也写在网站描述中，这样大大提高了XX排名的效果。买卖网的描述是。3.3.3网站logo优化网站的logo是网站的标志，一般都会采用图片的形式来表现，买卖网也是用了图片，而最符合seo的是用文字来表现，为了达到美观的效果，可以在图片中添加alt属性，买卖网将关键词写进了alt描述中，。3.3.4网站结构

20、清晰Div的层次要分明，这样有利于XX蜘蛛的爬行，另外可以采用h1-h6标签。这里先解释一下为什么要采用h1标签，标题（H1-H6）标签是指网页html 中对文本标题所进行的着重强调的一种标签，以标签、到依此显示重要性的递减，制作标签的主要意义是告诉搜索引擎这个是一段文字的标题，起强调作用。H1表示最重要的。买卖网将h1放在logo处，这也是有讲究的，、尽量靠近在html 中的标签，越近越好，以便让搜索引擎最快的领略主题。买卖网将h1标签放在logo处，这样比较靠近。3.3.5网站内容更新一个好的网站，是每天坚持更新内容（文章、产品等信息），并且这些内容都是原创或者伪原创的，如果网站的内容都是

21、其他站点上去拷贝过来的，长此以往，XX蜘蛛每次来访问你的网站，而你的网站的内容总是和其他站的内容一样的，那它就会把你认定为你就是一个垃圾站，只会从别人那里拷贝。如果经常不更新内容，那它也会慢慢厌恶你。这样就会导致XX快照停滞，这样就严重影响了网站的排名，所以高质量的内容是站内优化的关键。买卖网主要是卖家上架新产品来更新内容的。3.4制作总结随着毕业日子的临近，毕业论文设计也接近了尾声。在指导老师的带领下，我终于顺利的完成了毕业论文。在没有做论文之前，我觉得毕业论文知识将这三年的知识做个总结罢了，但是通过这次论文，我发现之前的想法太片面了，毕业设计不仅是对三年所学的知识的一种检验，而且也是对自己

22、能力的一种提升。在本次制作过程中，遇到了很多的困难。包括页面设计时布局和颜色的选择、制作页面时各个浏览器兼容的问题、js实现特效的问题。在老师和同学以及XX搜索的帮助下，一个个问题最终都解决了。通过这次毕业设计，使我知道自己对网页代码方面的欠缺还很多，也明白了学习是个长期积累的过程，需要在工作中、生活中不断的学习和总结，以提高自己的能力和综合素质。同时，我也受到了很大的启发，做任何事情，首先态度要端正，不懂可以请教别人，但要虚心听取别人的意见，不能盲目、自大。希望通过今后的学习，能在网页设计方面更上一层楼。4设计自评买卖网经过了多次修改终于出炉了，虽然还存在着一些问题，但总体来说已经具备了一个

23、购物网站的基本功能。比如首页产品信息不够全面，主要集中在数码和服装这一块，其他产品涉比较少，应该体现多方面的产品，这样顾客进入网站看见产品比较丰富，才能留住回头客。还有页面的布局也有不合理的地方，比如列表页左侧和详细页左侧都是筛选功能，这样给人的感觉有点累赘，用户体验做的不是很到位。我会在以后的修改中做得更完善。参考文献 1崔美善，马晓阳，刘娟. 设计师谈网页视觉特效M电子工业出版社，2006-10.2秦然，吴金秀，杨东燕新概念网页设计三合一教程M兵器工业出版社，2007-103 李超CSS网站布局实录M科学出版社，2007-09-014 朱印宏CSS3实战M机械工业出版社，2011-05.5

24、 何丽精通DIV+CSS网页样式与布局M清华大学出版社，2011-04.6 藏锋者，郝永清SEO实战指导：知识策略案例M中国铁道出版社，2011-05.7 严家成，卢盟晃SEO关键解码：网站营销与搜索引擎优化M人民邮电出版社，2011-08.8 高峰SEO兵书：搜索引擎优化手册M电子工业出版社，2012-04.附录1网页特效和作品图片1.javascript实现tab切换附图1 tab切换 畅销商品 时尚女装 品牌男装 运动户外 function setTab(name,cursel,n)for(i=1;i=n;i+)var menu=document.getElementById(name+

25、i);var con=document.getElementById(con_+name+_+i);menu.className=i=cursel?hover:;con.style.display=i=cursel?block:none;2.javascript实现焦点图切换附图2 焦点图切换 乐途新店开业4折起 蓝弦J9蓝牙耳机 Kenzo花样年华 Levis polo女装 /*焦点广告js*/ var glide =new function() function $id(id)return document.getElementById(id); this.layerGlide=funct

26、ion(auto,oEventCont,oSlider,sSingleSize,second,fSpeed,point) var oSubLi = $id(oEventCont).getElementsByTagName(li); var interval,timeout,oslideRange; var time=1; var speed = fSpeed var sum = oSubLi.length; var a=0; var delay=second * 1000; var setValLeft=function(s) return function() oslideRange = M

27、ath.abs(parseInt($id(oSlider).stylepoint); $id(oSlider).stylepoint =-Math.floor(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +px; if(oslideRange=(sSingleSize * s) clearInterval(interval); a=s; var setValRight=function(s) return function() oslideRange = Math.abs(parseInt($id(oSlider).stylepoint); $id(oSlider).stylepoint =-Math.ceil(oslideRange+(parseInt(s*sSingleSize) - oslideRange)*speed) +px; if(oslideRange=(sSingleSize * s) clearInterval(interval); a=s; function autoGlide() for(var c=0;csum;c+)oSubLic.className=;