摘要：我们已经进入互联网时代，互联网实现了世界范围内网络间的互联和信息共享，并已全面介入人们生产生活的方方面面。

随着我国计算机技术的发展与普及，网络已经成为人与人之间交流的一种重要形式。

购物网站作为互联网的新兴产物，已经成为人们生活中不可缺少的一部分。

而作为一个网站，页面视觉效果和页面优化将成为不可缺少的一部分。

本文通过结合买卖网的网页设计、布局和页面优化来阐述购物网站的前期的制作与优化。

关键词：网页设计；页面优化；购物网站目录引言 (1)1. 市场调研 (1)1.1行业网站的现状 (1)1.2买卖网的功能 (1)2. 文献检索 (2)2.1网页制作工具简介 (2)2.2网页设计流程 (3)2.3网页设计要素 (3)2.3.1页面板式结构 (3)2.3.2页面色调 (4)2.3.3网页的色彩设计 (4)2.4网页优化 (5)3. 设计实践 (6)3.1买卖网的总体设计 (6)3.1.1功能设计 (6)3.1.2布局设计 (6)3.1.3颜色搭配 (7)3.2买卖网的详细设计过程 (7)3.2.1买卖网首页设计过程 (7)3.2.2买卖列表页设计过程 (9)3.2.3买卖详细页设计过程 (9)3.3网页优化 (10)3.3.1关键词选择 (10)3.3.2网站描述 (10)3.3.3网站logo优化 (10)3.3.4网站结构清晰 (11)3.3.5网站内容更新 (11)3.4制作总结 (11)4．设计自评 (12)参考文献 (13)附录1网页特效和作品图片 (14)1.javascript实现tab切换 (14)2.javascript实现焦点图切换 (15)3.作品图片 (19)附录2设计作品光盘 (22)引言跟随着网购之风“淘宝网”之后，不断的出现各种购物网站。

所谓的购物网站，从专业术语来讲，分为B2B、B2C、C2C网站。

买卖网作为一个购物网站，在很大程度上给消费者带来了很大的方便,可以不出门就能买到自己想要的东西,节省了很多的人力物力，同时也有大批的商家应运而生。

此外购物网站也从另一方面带动了消费，促进了互联网的发展。

1.市场调研1.1行业网站的现状二十一世纪信息高速发展，网络已逐渐成为人们获取信息的主要渠道，成为人们日常生活中不可缺少的组成部分，网络购物这种新型的购物方式也已融入寻常百姓的生活。

网络购物进入中国市场短短十年来，从边缘人群消费边缘商品，发展到主流人群消费主流商品，中国的网络购物市场逐渐成熟，并且呈现一种高速发展的态势。

1.2买卖网的功能1．客户前台功能：a．客户管理功能系统实行会员注册或登陆，对客户的相关信息的信息可以进行修改。

b．商品信息查询功能为客户提供查询商品信息、搜寻商品。

c．购买功能客户确定购买对象、下订单、进入购物系统，完成购买。

d．网上结算银行功能系统采用网上银行方式，支持网上结算，经过认证后，根据银行帐号在网上处理购买结算。

e．售后评价及退货功能完成购物后，可以进行评价或者要求商家予以退货服务。

2．商家后台功能a．商品信息管理功能由系统管理员或由系统管理员授权委托管理整个系统的商品信息，发布销售商品信息，商家注册取得授权后可在系统后台随时增添、修改、更新销售商品信息。

b．订单管理功能系统内构成由订单生成，按时间顺序生成订单号、订单入库，订单查询组成的完整的订单处理流程。

c．配送管理功能合同（订单）确认后，卖方向买方送提货单证（网上下载），凭单提货、配货送货。

d．商品退货处理和售后评价功能售后服务中不合格退货的要求，系统支持退货处理，包括货款退还的操作，同时对客户予以评价。

e．客户信息管理功能系统实行会员注册，对客户的相关信息、交易信息等实行跟踪管理，适时会员实行升级制度。

f．网上结算银行功能系统采用网上银行方式，支持网上结算，经过模拟认证后，根据银行帐号在网上处理收款结算。

2.文献检索2.1网页制作工具简介Dreamweaver是美国Macromedia公司开发的集网页制作和管理网站于一身的网页编辑器，它是第一套针对专业网页设计师特别开发觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

Dreamweaver是当前主流的站点和网页编辑器，其代码简洁、兼容性和整体功能都很强。

Dreamweaver的介入，使得网页一些部分的实现变得更加直观简便。

Photoshop是Adobe公司旗下最为出名的图像处理软件之一。

多数人对于Photoshop的了解仅限于“一个很好的图像编辑软件”，并不知道它的诸多应用方面，实际上，Photoshop的应用领域很广泛的，在图像、图形、文字、视频、出版等各方面都有涉及。

2.2网页设计流程图2.1 网页设计流程2.3网页设计要素2.3.1页面板式结构网站的布局类型大致可以分为单一结构、普通结构和复杂结构3种。

单一结构：以宣传为目的的网站常用的单一结构一般只是由主画面和网站导航组成。

采用单一结构的网站目的不是为了提供信息，而是旨在通过视觉效果提供个性的外观风格。

普通结构：通常的普通结构是由主画面、网站导航、新闻及公告、快捷菜单、横幅广告等最常见的内容组成。

普通结构常见于企业信息、服务介绍等网站信息不太庞大的信息提供网站。

复杂结构：复杂结构常见于旨在提供购物、新闻、专业门户等庞大信息和服务功能性网站。

这类网站在初始页面提供大量的信息，有助于使用者快捷的查找自己想要的信息，能更诱发使用者的兴趣，促使使用者点击网站内容。

为了让使用者在网上冲浪时明确自己所停留的位置，准确传递网站的整体性很重要。

通常有网页布局和视觉效果体现整体性。

通过所有页面都适用的网站导航、标志、标题、子菜单、内容排列及位置连贯性等让使用者方面浏览网站。

买卖网的布局结构属于复杂结构，它主要提供购物，信息等服务性方面的信息，主体的布局是左右形式的，符合大众的审美观和浏览观。

将主导航分类醒目的放在左侧，消费者能清楚的看到商品的分类，从而快速的找到自己所要购买的产品。

另外，在导航栏上设有搜索栏目，可以让买家快速找到产品，如图2.2。

图2.2买卖网首页导航另外，将热门的产品分类也进行了罗列，之所以要罗列出来，是为了能让买家知道别人都在搜哪些产品，哪些产品比较受欢迎。

2.3.2页面色调一般而言，人们对大型设计作品的视觉要素的认知顺序依次为“色彩-图画-图案-标志-文字”，色彩是最先吸引人门视线的特殊视觉要素。

色调的冷暖。

色调一般分为暖色系、冷色系、中性色系三类。

红橙黄等颜色使人想到阳光，故为“暖色”。

绿青蓝等颜色与黑夜、寒冷相连，称“冷色”。

中性色彩使人产生休憩、轻松的心情，可以避免产生疲劳感。

颜色的轻重感觉：各种色彩给人的轻重感不同，重量感是质感和色感的复合感觉。

目测物体的颜色能得到轻重感，浅色密度小，有一种向外扩散的现象，给人质量轻的感觉。

深色密度大，给人一种内聚感，从而产生质量重的感觉。

色彩艳丽与素雅：一般认为，如果是单色，饱和度高，则色彩艳丽，饱和度低，给人素雅的感觉，除了饱和度，亮度也有一定的关系。

不论什么颜色，亮度高时即使饱和度低也给人艳丽的感觉。

高饱和度、高亮度的色彩显得艳丽。

2.3.3网页的色彩设计网页使用色彩大致可以分为三大类：主体色、辅助色和强调色。

主体色是指页面最基本的代表色彩。

辅助色是指辅助或补充主体色的色彩。

强调色是指起强调作用，具有醒目视觉效果的色彩。

网页的色彩设计大致可以分为以下3种方式。

1.只使用基本色：将主体色、辅助色及强调色的基本色彩运用到整个网站，保持网站的整体连贯性、确定网站的色彩形象。

2.不同的服务菜单使用不同的色彩：选择运用相同的主体色，以及不同的辅助色和强调色，或者选择运用完全不同的主体色、辅助色及强调色。

3.多种色彩搭配：运用多样化的色彩进行搭配，不仅要确定主体色、辅助色及强调色，更要考虑如何为网站配色、如何搭配多样化的色彩以及表现丰富多彩的形象。

2.4网页优化网站页面优化就是通过seo手段使得我们的网站在搜索引擎友好度和站内用户的良好体验度上升。

这样做的目的很简单，就是为了让我们的网站在搜索引擎的排名靠前并且得到很好的客户转换率，主要包括一下几个内容：1.关键词的选择网站关键词对网站排名的影响很大，所以确定好网站的关键词是网站不可缺少的一部分。

首先网站的关键词要和网站的主题与内容高度相关，如果关键词跟网站的内容不相关，也会影响搜索引擎的收录和排名。

所以，相关性是关键词选择的根本因素。

其次，关键词的热度也是重要的参考指标，最为理想的关键词是搜索次数最多，竞争强度最小的那些词，不过大部分搜索次数多的词，也是竞争最大的词，我们可以通过Google关键词工具以及百度指数来帮助我们进行关键词的挖掘、扩展。

2.网站标题的定位题中需要包含有优化关键字的内容，同时网站中的多个页面标题不能雷同，标题一旦确定就不要再做修改。

3.网站内部链接结构尽量改变原来的图像链接和flash链接，使用纯文本链接，并定义全局统一链接位置。

必须要用图片的地方可以使用alt标签，并且在alt标签属性中加入关键词。

4.每个页面包含有关键字并保持一定的频率简单做好了内容结构的调整之后，立即到搜索引擎登录，希望能尽早收录新标题和新描述。

3.设计实践3.1买卖网的总体设计3.1.1功能设计1．登录功能买卖网首页顶部有登录按钮，买家和卖家都是通过此处进行登录操作。

2．搜索功能导航旁边的搜索框主要提供买家进行产品搜索的，只要输入关键词即可搜出带有此关键词的产品。

3．活动公告首页左侧购物公告和促销活动功能主要是将网站的信息公布给用户。

4．排行榜功能排行榜功能是根据产品的销量自动排名的。

5．筛选功能买家可以通过筛选功能来查找产品，这样能缩小范围，更贴近买家的要求。

3.1.2布局设计1．首页布局买卖网首页分为上、中、下三个部分。

顶部主要是logo及横向导航，采用通栏的方式进行布局。

中间部分主要是产品，以左右为布局，左边是产品，右边是公告、活动、排行榜等信息。

底部是版权信息，采用的也是通栏布局。

2．栏目页布局买卖网栏目页以及详细页的顶部和底部都是和首页的相同的，中间部分采用左右布局的形式，左边是一个筛选界面，右边是产品的展示，买家唉通过筛选，产品会在右边展示出来。

3．详细页布局买卖网详细页采用左右布局的形式，左侧是筛选功能，和列表页一样，右侧是产品的详细情况，包括产品的详细图、产品描述、产品评价等信息。

3.1.3颜色搭配买卖网颜色以红色和白色为主，红色代表热情、活泼、热闹、温暖、幸福、吉祥、奔放、喜悦。

采用红色能在第一时间给顾客视觉冲击，让顾客记住网站。

我们在日常用语中使用红色描述一些事情：我们会大怒(see red)、有大喜之日(red letter day)、坐上红眼航班(red eye flight)、扑上红地毯(red carpet)然后狂欢作乐(paint the town red)。