电子商务网页设计(第二版)第一章

第一章网页设计概述据中国互联网信息中心统计,全国数千万网民中37.8%有过网上购物的经历.在未来一年中,这一比例将增至50%.作为新兴零售业,网上商店显示出巨大的发展空间.我们不仅可以在网上购物,在网上开加盟店,还可以用Dreamweaver等专业网页制作工具构建商务网站,借助于网络将自己的产品通过自建商务网站推向市场.怎么样,心动了吧?快来加入网上开店之旅吧!【知识学习目标】了解网站的基础知识掌握Dreamweaver的基本操作掌握HTML语言基础【能力学习目标】学会欣赏网站，说说这些网站的优缺点【重点难点】建立Dreamweaver的站点；HTML语言基础1.1网页案例赏析网站上的网页丰富多彩,有B2B、B2C、C2C、B2G和C2G类型。

海尔集团公司的电子商务网站有与经销商的（B2B）业务还有企业与消费者业务的（B2C）网上商城；中国外经贸网站属于企业与政府之间的业务往来（B2G）；8848、卓越网上商城是属于企业与消费者业务的（B2C）；淘宝属于消费者之间的业务往来网站（C2C）。

【案例1-1】：海尔集团公司电子商务网站图1-1图1-2海尔集团公司网站（/）是一个典型的电子商务网站，海尔网站建设体现了以下特点：◇结构合理、层次分明、功能齐全的网站规划设计。

整个网站有8个大的功能模块，每一模块又由一系列功能模块组成，如：“海尔产业”模块又分为“家电”“通讯”“IT”“家居”13个子功能模块。

◇简洁明快、风格一致的网页设计。

浏览海尔网站，会感觉网站的每一个网站的每一个页面都体现了简洁明快的特点，同时每个网页的背景、颜色、字体、布局等都非常一致。

◇颇具匠心的主页设计。

网站主页除了具有简洁明快、风格一致、信息量大等特点外，在网页上不停闪烁的Flash动画为主页面又增添了几分活泼的色彩，同时清晰的导航和搜索系统设计可以引导用户浏览每一个想要浏览的页面。

图1-3◇综合性较强的电子商务网站系统。

网站除了具备一般信息发布型网站的基本内容之外，为了快速满足用户的个性化需求，还建立了完善的网上零售（B to C）体系，同时，面对供应商的企业间电子商务平台（B to B）也展示了海尔现代企业的风采。

◇完善的电子商务系统设计。

海尔网站电子商务最核心部分——海尔商城。

商城对各类产品的功能作了详尽介绍，拥有方便快捷的购物环境、清晰流畅和操作性能的购物流程。

“海尔商城”的架构和设计真正体现了“想你所想”的海尔理念。

◇独特、成熟的配送体系和发货渠道。

海尔可以根据用户的地址，选择最快捷的配送方案。

◇方便快捷的与客户经常性联系的渠道。

客户可通过“服务专区”在网上反映所遇到的问题，或拨打“服务热线”要求上门服务。

“FAQ”可在线及时解答用户疑问。

◇鲜明的主题、丰富的信息含量。

网站的每一个页面都有鲜明的主题，整个网站丰富的信息含量并没有使网站显得累赘，反而更好地体现了海尔的理念和文化。

综上所述，海尔在网站架构和网页设计中蕴含了一整套现代网络营销思想，特别是海尔网站通过独特栏目的架构和设计，体现了国际化海尔的气度和经营理念。

我们可以在学习和实践过程中去认真地体会和感受它，熟悉和掌握企业电子商务网站规划的设计思想和方法。

【案例1-2】：中国外经贸网站图1-4网站设计思路“中国外经贸”（/）是外经贸领域专业站点，它面向国内外客商，能提供丰富、详实、准确、快捷、互动的信息内容，具有完善的检索功能，力求成为外商了解中国外经贸信息动态的窗口。

网站内容和目标“中国外经贸”提供综合信息、商务信息、企业网络广告等多项服务，并且实现了供求双方的真正互动——采购商需求信息发布、供应商企业及其产品信息发布。

同时，“中国外经贸“与商务部网站、中国国际电子商务网、中商易通、在线广交会、在线义博会、中国招商网等网站链接、互通，丰富了网站内容。

“中国外经贸“提供的服务：◇采购信息、企业及其产品信息的免费发布。

国内外采购商、供应商可以随时发布自己的采购信息、企业及其产品信息，零成本即可获得最大的成交机会。

◇免费查询信息。

“中国外经贸“与多个网站保持链接、互通，浏览者无须付费就可通过其强大的搜索功能获取丰富信息。

◇网络广告服务。

“中国外经贸“所提供的网络广告形式生动突出，有文字链接、悬浮按钮广告、全屏广告、巨幅广告、擎天柱广告、通栏广告、流媒体广告、弹出窗口广告等各种形式，同时绝佳的广告位臵可使外商在第一时间找到推荐的中国企业和名优产品。

◇二级域名服务。

用户可以在该网站注册二级域名，设立一个永久“摊位“。

◇企业网站设计与制作。

包括提供域名注册、虚拟主机托管、网站策划、网页设计与制作、数据库开发、搜索引擎加注等一系列服务。

网站整体框架和主页设计网站分为以下模块：综合经贸新闻、外经贸政策发布、地区外经贸信息、中国企业、供应专区、采购互动、网站介绍、联系我们、产品与服务等。

网站有中英文两个版本。

网站风格和主页设计特点：页面设计简洁明快、色彩和谐、导航清晰、主题突出（见图1-4）。

主页有以下几个区域：、◇企业标志和菜单。

◇广告。

◇主要信息导航区。

发布最新新闻和企业采购、供应等市场信息。

◇功能区。

包括友情链接、网站介绍、联系关系、版权声明等。

网站维护与管理“中国外经贸“本着”以企业为本，信息为龙头“的服务宗旨，十分重视网站的维护和管理。

主要体现在以下几个方面：◇经常进行页面更新，给人以不断创新的形象。

◇网站维护人员多，确保页面正确无误和网站的正常运行。

◇提供良好的链接服务，对提出申请链接的企业，网站管理人员在检查该企业网站无误后，将其链接到相应的行业中，并向用户发送链接成功的反馈信息邮件。

◇反馈信息答复及时，对于用户提出的问题和要求，网站及时给予答复。

◇专业的网络安全、数据库维护，确保系统使用中的安全性、快速性。

【案例1-3】：8848网上商城图1-58848作为全球性的中文网上商品交易平台，提供B to C 网络平台的搭建与服务，提供完善的商品展示、结算、后台自行维护、客户关系管理等全方面的服务。

特点：◇人性化的交易流程设计让商户在网上出价和登录商品更加便捷省力。

◇完善的功能设计商户能轻松管理自己的网上店铺与交易商品。

◇eStore后台帮助广大商家方便、迅速地登录商品；网上店铺给每个卖家一个展示自己个性和发展网上业务的空间。

◇严格的网上认证制度以及专设的管理网上交易行为的部门打造了一种诚信的网上交易氛围。

◇强大的客户服务队伍周到热心地解答用户的各类咨询，帮助您学会使用8848 eStore后台管理各项功能，并顺利完成网上交易。

8848网上商城前台主要模块：网上商店图书期刊：经管、人文社科、文学等。

音乐影视：电影、电视剧、流行、怀旧等。

IT产品：硬件、软件、耗材、游戏等。

数码摄像：MP3、数码相机、数码摄像机等。

通信器材：手机、电话、配件等。

鲜花礼品：鲜花、时尚礼品、工艺品、蛋糕等。

保健用品：保健食品、保健服装、保健器械、成人用品等。

数字卡类：IP 卡、电话卡、上网卡、游戏卡等。

化妆美容：护肤、美容、香水、美容资讯等。

家用电器：小家电子、大家电、空调、冰箱等。

体育用品：品牌、服装、鞋帽、器械、纪念品等。

汽车用品：配件、装饰、保养、资讯等。

票务中心：演唱会、音乐会、体育竞技、戏剧、休闲等。

日用超市：食品、玩具、特产、宠物用品、家居用品等。

金融资讯：股票分析、投资咨询、在线查询等。

8848购物引擎8848购物引擎是面向中国大陆地区的专用用户产品搜索引擎。

Internet 用户通过8848购物引擎网站的搜索框输入想要购买的产品名称，就可以在几秒种内找到Internet 上成百上千种电子商务网站经营的相关产品。

用户在浏览器上可以看到产品的图像、价格和简单介绍，同时提供给用户价格比较、产品排序以及多种显示方式。

用户点击搜索结果链接，可以直接访问提供此商品网站的该产品最终页面，甚至可以直接进行在线购买。

大客户服务8848向企业提供商务电子化解决方案，帮助企业运用现代信息技术，优化生产流程，实现企业管理网络化和电子化，从页改善企业经营管理，实现管理的系统化、规范化和科学化，降低成本，图1-6图1-7图1-81.2 网站、网页基础1.2.1网页基本组成元素网页基本组成元素有：文本、图片、超链接、动画、表单、音频、视频等。

1.2.2网页网站基本知识Internet 又名国际互联网，或称因特网，是全球公共信息网络系统的基本构成部分，它将无数的计算机连接起来，为公众提供大量的服务，被称为信息高速公路。

网站和网页则是互联网的重要组成部分，也是最主要的信息交流界面，通过页面技术，世界各地的网民进行信息交换、沟通，实现了信息的共享。

当然，互联网中除了网站外还有很多的服务，比如邮件服务、FTP 服务、TELNT 服务等。

现在用的最多的WWW 网（World Wide Web ，万维网），1990年开始建立，同时确立了HTML 语言作为信息传输语言。

1.2.3网页与网站关系网站是互联网的一个节点，网页都存在于网站中，就象一本书一样，网页是书的每一页，封面是主页，页码就是网址，网址全称是“统一资源管理器”，即URL ，URL 与页面是一一对应关系。

我们在浏览器的地址栏中输入网址后，按回车键就可以打开网站的首页，此时在网页上移动鼠标，就可以看到有时鼠标的光标变为手形，这说明该处是一个超链接，每个超链接都对应着一个网页。

无论网页的数量多少，都需要建立一个独立的网站来存放网页。

网站中除了网页以外，还包括网页中应用到的各种图象、音乐、视频、数据库等，也有独立于页面的图象、音乐、视频等，但它们可以通过链接来实现与网页的关联。

1.3常用的网页制作工具网页的设计制作一般分三个阶段：一是设计，二是布局，三是动画的添加，复杂的还可以能牵涉到脚本程序，针对不同的阶段，网页的制作就需要不同应用软件的支持。

在设计阶段，常用的应用软件有Photoshop 、Fireworks 等专业的图形图象设计软件。

在布局阶段，常用的应用软件有FrongPage 、Dreamweaver 等专业网页制作软件。

网页动画一般都为二维动画，常用的动画软件以Flash 为最佳。

1.3.1 FrongPageFrongPage 是Microsoft 推出的优秀网页制作软件，是办公软件套装Office 的组件之一。

它的最大特点就在于采用Word等类似的界面，所以比较容易操作。

它是一种“所见即所得”的网页编辑器，用户使用FrongPage，无需懂得HTML的语法和元素，就能制作出引人入胜的具有一定专业水准的网页。

图1.3-11.3.2 网页三剑客Fireworks、Flash和Dreamweaver是Macromedia公司出品，通常被称为网页三剑客，它们是制作专业网站的必备武器。

Fireworks的作用主要就是作图，它即可以制作位图，又能制作矢量图和动画。