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

第一章网页设计概述

据中国互联网信息中心统计,全国数千万网民中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

海尔集团公司网站（https://www.360docs.net/doc/5314194919.html,/）是一个典型的电子商务网站，海尔网站建设体现了以下特点：

◇结构合理、层次分明、功能齐全的网站规划设计。整个网站有8个大的功能模块，每一模块又由一系列功能模块组成，如：“海尔产业”模块又分为“家电”“通讯”“IT”“家居”13个子功能模块。

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

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

图1-3

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

◇完善的电子商务系统设计。海尔网站电子商务最核心部分——海尔商城。商城对各类产品的功能作了详尽介绍，拥有方便快捷的购物环境、清晰流畅和操作性能的购物流程。“海尔商城”的架构和设计真正体现了“想你所想”的海尔理念。

◇独特、成熟的配送体系和发货渠道。海尔可以根据用户的地址，选择最快捷的配送方案。

◇方便快捷的与客户经常性联系的渠道。客户可通过“服务专区”在网上反映所遇到的问题，或拨打“服务热线”要求上门服务。“FAQ”可在线及时解答用户疑问。

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

综上所述，海尔在网站架构和网页设计中蕴含了一整套现代网络营销思想，特别是海尔网站通过独特栏目的架构和设计，体现了国际化海尔的气度和经营理念。我们可以在学习和实践过程中去认真地体会和感受它，熟悉和掌握企业电子商务网站规划的设计思想和方法。

【案例1-2】：中国外经贸网站

图1-4

网站设计思路

“中国外经贸”（https://www.360docs.net/doc/5314194919.html,/）是外经贸领域专业站点，它面向国内外客商，能提供丰富、详实、准确、快捷、互动的信息内容，具有完善的检索功能，力求成为外商了解中国外经贸信息动态的窗口。

网站内容和目标

“中国外经贸”提供综合信息、商务信息、企业网络广告等多项服务，并且实现了供求双方的真正互动——采购商需求信息发布、供应商企业及其产品信息发布。同时，“中国外经贸“与商务部网站、中国国际电子商务网、中商易通、在线广交会、在线义博会、中国招商网等网站链接、互通，丰富了网站内容。

“中国外经贸“提供的服务：

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

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

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

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

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

网站整体框架和主页设计

网站分为以下模块：综合经贸新闻、外经贸政策发布、地区外经贸信息、中国企业、供应专区、采购互动、网站介绍、联系我们、产品与服务等。网站有中英文两个版本。

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

◇企业标志和菜单。

◇广告。

◇主要信息导航区。发布最新新闻和企业采购、供应等市场信息。

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

网站维护与管理

“中国外经贸“本着”以企业为本，信息为龙头“的服务宗旨，十分重视网站的维护和管理。主要体现在以下几个方面：

◇经常进行页面更新，给人以不断创新的形象。

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

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

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

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

【案例1-3】：8848网上商城

图1-5

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

特点：

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

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

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

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

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

8848网上商城前台主要模块：

网上商店

图书期刊：经管、人文社科、文学等。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

8848购物引擎

8848购物引擎是面向中国大陆地区的专用用户产品搜索引擎。Internet 用户通过8848购物引擎网站的搜索框输入想要购买的产品名称，就可以在几秒种内找到Internet 上成百上千种电子商务网站经营的相关产品。用户在浏览器上可以看到产品的图像、价格和简单介绍，同时提供给用户价格比较、产品排序以及多种显示方式。用户点击搜索结果链接，可以直接访问提供此商品网站的该产品最终页面，甚至可以直接进行在线购买。

大客户服务

8848向企业提供商务电子化解决方案，帮助企业运用现代信息技术，优化生产流程，实现企业管理网络化和电子化，从页改善企业经营管理，实现管理的系统化、规范化和科学化，降低成本，

图1-6

图1-7

图1-8

1.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 FrongPage

FrongPage 是Microsoft 推出的优秀网页制作软件，是办公软件套装Office 的组件之一。它的最大特点就在于采用Word

等类似的界面，所以比较容易操作。它是一种

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

图1.3-1

1.3.2 网页三剑客

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

Fireworks的作用主要就是作图，它即可以制作位图，又能制作矢量图和动画。利用Fireworks可以轻松地制作出网页中的图片翻转、菜单下拉等效果，并将图片优化以适合网络应用的需要。

Flash是制作动画的软件。它功能强大，采用矢量图设计，设计的文件体积小，易于网上传播。Flash除了可以制作动画外，还具有交互性，即用户可以通过鼠标、键盘等操作来实现与动画的信息交流，从而实现事件。

Dreamweaver是一种网站和网页制作的专业化可视编辑工具。利用Dreamweaver 可以轻松地制作出具有动态HTML功能的网站，Dreamweaver的“所见即所得”的功能使得编写JSP、ASP、PHP等网站变得很容易。与FrongPage相比，Dreamweaver更具有专业性，功能更强大。

图1.3-2 Fireworks窗口

图1.3-3 Flash窗口

1.3.3 Dreamweaver窗口的介绍

在学习网页制作前，先来认识一下网页编辑软件Dreamweaver的工作环境及功能。

运行环境:

●Window98/Me/2000/xp

●分辨率1024*768像素

●CPU Pentium200以上

●内存256MB以上

●光驱32倍速以上

工作环境:

执行“开始”→“所有程序”→“Macromedia”→“Macromedia Dreamweaver”命令，启动Dreamweaver8窗口，启动Dreamweaver8 时，出现一个欢迎窗口（如图1.3-4所示），其中分为三栏，左边“打开最近项目”栏为近期打开的HTML文件记录，单击标题下方文件可以快速打开HTML文件；中间“创建新项目”栏表示我们建立的文件类型；右边“从范例创建”栏为预先设计的一些模板。

图1.3-4 Dreamweaver8窗口

在“创建新项目”栏中选择建立一个新的HTML 文件，即会出现Dreamweaver8 的程序窗口。一般来说，默认打开的Dreamweaver8应用程序编辑窗口包括如下几个部分，如图所示。

图

1.3-5 图中各标注项含义如下：

A-

菜单栏：由Dreamweaver MX 2004菜单命令构成，汇集各种功能菜单。

B-“插入对象

”面板：单击相应的图标可以轻松插入图像、表格、

Flash 等网页元素。

C-文档工具栏：汇集设计视图、代码视图、活动数据视图、词典检查、更新等，并可以以预览当前编辑的文档，查看最终结果。

D-代码视图：显示当前编辑文档的

HTML 源代码。

E-设计视图：显示当前操作的页面，该窗口显示的内容和浏览器显示的内容大致相同。

F-状态行：显示当前插入点的HTML 源代码标记等，并在单击鼠标时显示当前选定的标记在文档中的对应内容。

G-“属性”面板：显示当前被选对象的属性，通过修改参数可以更改相应的属性。 H-“浮动”面板组：可以将各面板按功能组合，这些面板可以分离出来，根据需要可

以关闭和打开面板。

I-“浮动”面板工具显示、隐藏按钮：单击后可以隐藏和显示操作中的“浮动”面板。 J-视图分隔条：拖动分隔条可以控制设计视图与面板的显示比例。

K-展开/收缩按钮：用于展开/收缩“属性”面板。

Dreamweaver8主要的菜单命令如下：

1．文件 2.编辑 3.查看

4.插入

5.修改

6.文本

7.命令 8.站点 9.窗口

1.4 Dreamweaver基本操作

1.4.1 创建站点

站点分为本地站点和远程站点两种。

●本点站点是将站点及站点文件放置于本点电脑中。

●远程站点需要服务器支持，所以必须先配置好服务器，然后再创建站点。

两种站点的创建相同，其步骤如下：

1.在图1.4-1所示的下拉列表中选择“管理站点”项，打开“管理站点”对话框，如图1.4-1所示

如果Dreamweaver是初装的，可在“文件”面板中直接单击“未定义站点”项，或单击“站点”→“新建站点”命令打开站点创建对话框。

2.单击“新建”按钮，在弹出的列表中选择“站点”项，打开定义站点对话框。其中有“基本”“高级”两个选项卡。

●基本：可以根据操作提示完成站点的创建。

●高级：当熟悉了站点的建立方法后，可直接设置“高级”选项卡中的各项即可。

3.设置完站点后，单击“确定”和“完成”按钮，系统自动将建立的站点添加到站点画板中。

图1.4-1 管理站点

小提示：站点的名称必须是非中文的名称，否则在编辑站点文件是会出错。

【案例1.4-1】建立静态站点---GO58站点

前面学习了站点的基本建立方法,下面利用“基本”选项卡的提示建立GO58静态站点。其步骤如下：

1）启动Dreamweaver8窗口，如图1.3-4所示.

2）执行“站点”→“管理站点”命令，出现管理站点对话框，如图1.4-2的所示.

图1.4-2站点定义对话框

3）选择“基本”选项卡，打开“编辑文件”对话框，如图1.4-3

输入“GO58”

因没有申请

HTTP地址，就

不需要输入

单击

如图1.4-3“编辑文件”对话框

4）单击“下一步”按钮，进入“编辑文件，第2部分”对话框，选中“否，我不想使用服务器技术”单选项，如图1.4-4

选择“否”

单击

图1.4-4 确定是否使用服务器技术

5）单击“下一步”按钮，进入“编辑文件，第3部分”对话框，选择第一个单选项，并单击“您将把文件存储在计算机上的什么位置”文本框的右侧，如图1.4-5。弹出“选择站点本地文件”对话框，选择D盘，新建GO58文件夹，如图1.4-6。

图1.4-5

图1.4-6 建立GO58文件夹

6）选中GO58文件夹，单击“打开”按钮，在单击“选择”按钮，此时创建的站点目录显示在“您将把文件存储在计算机上的什么位置” 文本框中，如图1.4-7。

浏览

选中

单击

图1.4-7添加的站点目录路径

7）单击“下一步”按钮，进入“共享文件”对话框，在“您如何连接到远程服务

器”下拉列表中选择“无”（静态网站不需要服务器的支持，所以在此选择无）如图1.4-8

图1.4-8 指定链接远程服务器的方法

8）进入“总结”对话框，单击“完成”按钮，如图1.4-9所示。新建的GO58站点显示在站点面板中。如图1.4-10所示。

图1.4-9 “总结”对话框