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

摘要：我们已经进入互联网时代，互联网实现了世界范围内网络间的互联和信息共享，并已全面介入人们生产生活的方方面面。随着我国计算机技术的发展与普及，网络已经成为人与人之间交流的一种重要形式。购物网站作为互联网的新兴产物，已经成为人们生活中不可缺少的一部分。而作为一个网站，页面视觉效果和页面优化将成为不可缺少的一部分。本文通过结合买卖网的网页设计、布局和页面优化来阐述购物网站的前期的制作与优化。

关键词：网页设计；页面优化；购物网站

目录

引言 (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。