第 六 章 电子 商务网站 平台 建设

1. 第六章 电子商务网站平台建设

2. 4 5 3 电子商务网站建设的基本技术 电子商务网站的建设与管理 使用第三方平台和软件组件实现商务网站平台 1 2 商务网站开发流程 网站设计 内容概要 电子商务研究中心

3. 6.1 商务网站开发流程 表4-1 商务网站开发流程 电子商务研究中心

4. 6.2 网站设计 网站设计可以分为基本设计策略、艺术性设计等方面。具体而言，就是需要确定网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局以及文字图片的应用等。 电子商务研究中心

5. 6.2.1 电子商务网站的基本设计策略 • 1、页面设计的基本策略 • 2、信息量和数据量的均衡 • 3、动画、图象与文本的匹配 • 4、企业优秀形象的渲染与长期业务的拓展 电子商务研究中心

6. 1、页面设计策略 • 制作网页时，无须从头做起，可以把现成资料转到网页上使用。 • 一般网站都有多层网页，主页是门面，子页要以信息为主，艺术为次。 • 网页上的链接一般10~20个较为理想。 • 子页的层数不宜太多，穿越5个以上的层次令人厌烦。 • 主页须负载的事项：标题栏、电子邮件地址、版权资料、通讯联系资料、设置主页链接。 • 确保主页上提供的是最新内容。 返回 电子商务研究中心

7. 2、信息量和数据量的均衡 • 电子商务网站的信息量和数据量要权衡考虑。 • 商务网站的信息量，指网页上能够向用户传递信息的有效内容的多少。 • 数据量是指整个网站所要处理的信息和数据的总量，包含客户浏览网站、下载资料、上传给网站的注册申请等。 • 网站创建初期，动态数据量较少，可以适当增加信息量。 • 网站运行一段时间后，业务量增多，动态数据量增多，考虑对网站网页进行改版，对信息量和数据量均衡处理。 返回 电子商务研究中心

8. 3、动画、图象与文本匹配 • 一个电子商务网站的网页设计，如果能够合理搭配动画、图象与文本，可以达到增加信息量、减少数据量、增强对客户吸引力的极佳效果。 返回 电子商务研究中心

9. 4、企业优秀形象的渲染与长期业务的拓展 • 企业的优秀形象是商业的信誉。 • 先进的设备投入，精美的网站设计。 • 网络广告中动画、图像、文本交叉使用。 • 网站的建设不能是急功近利短期行为。 • 例如：网站宣传、网站上的有奖大赛等。 返回目录 电子商务研究中心

10. 6.2.2 电子商务网站艺术设计 • 网站的CI设计 • 网站的布局设计 • 网站的风格设计 • 网站的色彩应用 电子商务研究中心

11. 网站的CI设计 • CIS（Corporate Identity System）简称CI，就是企业识别系统，它是企业形象的形成、是提高企业形象的一种经营手段。 • 企业形象，是指企业的关系者对企业的整体感觉、印象和认知。CI有三个基本内容： • 企业理念识别（MI） • 企业行为识别（BI） • 企业视觉识别（VI） • 网站的CI设计主要指网站的标志、色彩、字体、标语设计，是一个网站建立CI形象的关键和形象工程。通过对网站的标志、色彩、字体、标语进行设计，可以建立起网站整体的形象。 电子商务研究中心

12. 1、设计网站的标志（Logo） • 网站的标志就像企业的商标一样 • 标志可以是中文、英文字母、符号、图案。 • 新浪网站标志、搜狐网站标志 • 可以用有代表性的人物、动物、花草作为蓝本加以卡通化和艺术化。 • 搜狐的狐狸尾巴 • 专业性的网站，可以用本专业有代表的物品作为标志 • 中国农业银行金穗标志 • 最常用最简单的是用网站自身的英文名称作标志。 • IBM公司的英文名称 电子商务研究中心

13. 2、设计网站的标准色彩 • 不同的色彩搭配会产生不同的效果，反映出不同网站的文化内涵，并可能影响到访问者的情绪。 • 标准色彩：指能体现网站形象和延伸内涵的色彩。 • 如IBM深蓝色主色调，肯德基网站红色条形主色调等。 • 一般一个网站的标准色彩不超过3种，太多让人眼花缭乱。标准色彩要用于网站的标志、标题、主菜单和主色块，给人以整体统一的感觉。其他色彩只能作为点缀和衬托，不能喧宾夺主。 电子商务研究中心

14. 3、设计网站的标准字体 • 标准字体是指用于标志、标题、主菜单的特有字体。 • 粗仿宋体体现专业 • 广告体体现设计精美 • 手写体体现亲切随意 • 美术字体现文化内涵 电子商务研究中心

15. 4、设计网站的标语 • 指网站的精神、网站的目标。可用一句话或一个词概括，类似广告语。 • 6大网站的标语 • 百度的标语：2005 • 领先中文搜索引擎百度在线网络技术有限公司(Nasdaq:BIDU) • 新浪网：2000 • 服务于中国及全球华人社群的领先在线媒体及移动增值服务提供商新浪公司 (Nasdaq: SINA) • 搜狐：2000 • 中国领先的互联网媒体、搜索、在线游戏及移动增值服务公司 (Nasdaq: SOHU) • 网易:2000 • 中国领先的互联网技术、在线游戏服务提供商网易 (NASDAQ:NTES) • 腾讯：2004 • 中国领先的互联网服务和电信及移动增值服务供应商——腾讯控股有限公司 (HK:0700) • 阿里巴巴：2007 • 全球领先的B2B电子商务公司阿里巴巴网络有限公司(HK:1688) 电子商务研究中心

16. 5、企业CI设计的基本要素 返回 • （1）企业标志的要素 • 企业的标志、所经营产品的商标 • （2）企业名称标准字体要素 • 企业的正式名称，如：***有限公司 • （3）品牌标准字体要素 • 代表企业产品的品牌 • （4）企业的标准色彩要素 • 象征企业的指定色彩 • （5）企业标语要素 • 对外宣传企业的特长、业务、目标等短语 • （6）专用字体要素 • 作为主要品牌、企业名称、广告等所用的文字 电子商务研究中心

17. 网站的布局设计 • 网站布局的基本概念 • 就是以最合适浏览的方式将图片和文字排放在页面的不同位置。 • （1）页面的尺寸 • 分辨率越高，页面的尺寸就越大，显示的内容就越多。 • 不要让访问者拖动页面超过三屏，超过最好做页面链接 • （2）整体造型 • 指整个页面应该是一个整体，图形和文本的结合应该是层叠有序。 • （3）页头 • 又称为页眉，就是定义页面的主题。 • （4）文本 （5）图片 （6）多媒体 电子商务研究中心

18. 几种典型的布局设计 • （1）“弯角”型结构布局 • （2）“对比”型结构布局 • （3）“三”型结构布局 • （4）“同”字型结构布局 • （5）“整幅效果”结构布局 返回 电子商务研究中心

19. 网站的风格设计 • 网站的风格？ • 指站点的整体形象给浏览者的综合感受。建立在网站内容的质量和价值性基础上，体现在作品内容和形式等各种要素中。风格是有人性的，能通过网站的外型、内容、文字、交流等概括出一个网站独特的个性和特色。 电子商务研究中心

20. 网站的风格设计 • 1、网站首页的风格 • 纯粹的形象展示型 • 这种类型文字信息较少，图象信息较多。 • 信息罗列型 • 这种类型一般是大、中型企业网站和门户网站常用的方式，即在首页中就罗列出网站的主要内容分类、重点信息、网站导航、公司信息等。 • 2、风格保持一致 • 一个网站，特别是电子商务网站，需要统一的风格，即网站中每一个网页风格必须保持一致。 • 指结构的一致、色彩的一致、导航的一致、图像的一致、背景的一致等。 电子商务研究中心

21. 几个典型网站的风格 • （1）迪斯尼网站——世界最大的游乐场 • （2）网易网站——门户网站 • （3）IBM网站——专业的IT公司 • （4）淘宝网站——购物网站 返回 电子商务研究中心

22. 　　　网站的色彩应用 • 色彩是人视觉最敏感的东西，不同色彩之间的对比会有不同的效果。 • 色彩总的应用原则是“总体协调，局部对比”主页的整体色彩效果应该是和谐的，局部的、小范围的地方可以有一些色彩的对比。 返回 电子商务研究中心

23. 6.2.3 网站功能与结构设计 网站功能与结构设计的主要工作是绘制网站的功能结构图，进行网站的主要信息内容与导航的策划。 中文首页 公司简介 产品信息 营销网络 服务中心 联系我们 论坛 图4-1 某公司网站整体结构图 电子商务研究中心

24. 6. 3 电子商务网站建设的基本技术 • 6.3.1 电子商务软件平台技术 • 6.3.2 电子商务应用开发技术 电子商务研究中心

25. 电子 商务 软件 平台 技术 操作系统 Web服务器 数据库 电子商务软件平台技术 • 电子商务软件平台技术组成 电子商务研究中心

26. 主要的操作系统 • （1）Windows NT操作系统 • （2）Windows 2000操作系统 • （3）NetWare操作系统 • （4）Unix操作系统 • （5）Linux操作系统 电子商务研究中心

27. 主要的Web服务器软件 • Web服务器的主要任务是响应客户机的请求，并将页面返回发出请求的客户机。 • Web服务器主要有以下功能：Web服务、网站管理、应用构造与动态内容。 • Web服务器既可位于Internet中，也可以位于企业的内部网中。 • 目前，主要的Web服务器包括以下几种：IIS服务器，Apache服务器。 • IIS服务器——Internet Information Server • 是一种流行的Web服务软件，它被捆绑在WindowsNT或Windows 2000操作系统上，提供基本Internet服务。 • 既适用于小型网站也适用于企业级网站。 • IIS服务器支持VB，VBScript，Jscript、JAVA、CGI 电子商务研究中心

28. 主要数据库软件 • （1）Oracle数据库软件 • （2）MicrosoftSQL Server数据库软件 • （3）Informix数据库软件 • （4）IBM的DB2数据库系统 • （5）MySQL数据库系统 电子商务研究中心

29. （1）Oracle数据库 数据库 数据库在网站的建设中已是必不可少的重要内容。在电子商务系统中，产品资料管理、数据资料管理、客户资料管理和分析、物流配送管理等都离不开网络数据库的支持。数据库技术已成为电子商务系统建设的核心技术。 现在比较常用的数据库： Oracle数据库是美国甲骨文公司的产品，它是一个功能极其强大和灵活的、基于高级结构化查询语言(SQL)为基础的大型关系数据库，它适用于80多种不同的硬件系统和操作系统平台，是目前最流行的跨平台的大型数据库之一。 电子商务研究中心

30. （3）IBM DB2 数据库 （2）SQL Server数据库 数据库 SQL Server 是微软公司开发的数据库，它是一种高效的关系数据库系统，它与Windows NT/2000及Windows 9x等操作系统紧密集成。对于复杂的客户/服务器系统来说，SQL Server是一个很好的选择，尤其适用于中小型数据库的使用。 IBM公司的DB2通用数据库（DB2 UDB）是一个具有全部Web功能，可以从单一处理扩展到对称多处理和巨型并行群集系统的关系型数据库管理系统，以强劲的多媒体能力和支持图像、声频、视频、文本与其他高级对象为特征，提供强大的Web功能。 电子商务研究中心

31. （5）MySQL数据库 （4）SyBase 数据库 数据库 是一种典型的UNIX或WindowsNT平台上客户机/服务器环境下的大型数据库系统。 MySQL一般用于中小型数据库。MySQL自身不支持Windows的图形界面，许多第三方软件公司推出了MySQL在Windows环境中的具有图形界面的支持软件。 （6）Informix Dynamic Informix Dynamic Server适用于任何规模的数据库，支持数以千计的集中式或分布式并发用户。在NT和UNIX平台具有同样功能，无缝移植，可配置选件满足特殊需要等。 电子商务研究中心

32. 　电子商务应用开发技术 • 网站开发技术分类 • 网页相关技术 电子商务研究中心

33. 网站开发技术分类 对于网页设计与制作，一般来说分为“静态网页”和“动态网页”两大类型。 （1）静态网页指网页的内容已预先设计好，存放在WEB服务器上，当用户使用浏览器通过互联网的HTTP协议向WEB服务器提出请求时，服务器仅仅是将原已设计好的静态HTML文档传送给用户浏览器。在网页上加上一些动画和视频并不是动态网页。 （2）动态网页指能够根据用户的要求和选择，进行不同的处理，并根据处理的结果，自动生成新的页面，不再需要设计者手动更新HTML文档。 电子商务研究中心

34. WEB开发技术分类 电子商务研究中心

35. 关于Web的几个基本概念 • 1．超级链接和超文本 • 超级链接（Hyperlink）是文件中一些特殊的文字和图形，用鼠标单击这些文字和图形时，会从一个文本跳到到另一个文本。含有超级链接的文本称超文本（Hypertext）。 • 超文本形式上仍然是ASCII文件，可以用一般的文字处理软件进行编辑、处理。 电子商务研究中心

36. 2．HTML与网页 • HTML，是用于编写超文本文件的语言。用HTML编写的超文本文件称为HTML文件，以 .htm或 .html为文件扩展名。 • 网页（Web）是在WWW服务器上发布的HTML文件。 • 网站的首页称“主页”（Home Page）。 电子商务研究中心

37. ３．Web的工作过程 Web的工作过程 电子商务研究中心

38. 了解Dreamweaver8的操作环境 • 了解 Dreamweaver 8 工作区 • 工作区布局 • ”文档”窗口 • “文档”工具栏 • 状态栏 • “插入”栏 • “编码”工具栏 • “属性”检查器 • “文件”面板 • “CSS 样式”面板 电子商务研究中心

39. 在 Dreamweaver 中创建新文件 • 如何在 Dreamweaver 中创建新的空白文档？ • 您也可以在 Dreamweaver 中基于Dreamweaver 设计文件或现有模板创建新文档。 • 若要创建新的空白文档，请执行以下操作： • 选择“文件”>“新建”。 即出现“新建文档”对话框。“常规”选项卡已被选定。 • 从“类别”列表中选择“基本页”、“动态页”、“模板页”、“其它”或“框架集”；然后从右侧的列表中选择要创建的文档的类型。 电子商务研究中心

40. 在 Dreamweaver 中保存文件 • 选择“文件”>“保存”。 • 最好将您的文件保存在 Dreamweaver 站点中。 • 在出现的对话框中，定位到要用来保存文件的文件夹。 • 在“文件名称”文本框中，键入文件名。 • 单击“保存”。 电子商务研究中心

41. 了解 Dreamweaver 站点 • 在 Dreamweaver 中，“站点”一词既表示 Web 站点，又表示属于Web站点的文档的本地存储位置。在开始构建Web站点之前，您需要建立站点文档的本地存储位置。Dreamweaver 站点可组织与Web站点相关的所有文档，跟踪和维护链接，管理文件，共享文件以及将站点文件传输到Web服务器。 电子商务研究中心

42. 了解 Dreamweaver 站点 • Dreamweaver站点最多由三部分组成，具体取决于您的计算机环境和所开发的Web 站点的类型： • 本地文件夹是您的工作目录。Dreamweaver将此文件夹称为本地站点。本地文件夹通常是硬盘上的一个文件夹。 • Dreamweaver将此文件夹称为远程站点。远程文件夹是运行 Web 服务器的计算机上的某个文件夹。运行 Web 服务器的计算机通常是（但不总是）使您的站点可在 Web 上公开访问的计算机。 • 动态页文件夹（“测试服务器”文件夹）是 Dreamweaver 用于处理动态页的文件夹。此文件夹与远程文件夹通常是同一文件夹。除非您在开发 Web 应用程序，否则无需考虑此文件夹。 电子商务研究中心

43. 建立本地站点 • 启动 Dreamweaver，选择“站点 ”>“管理站点”。 出现“管理站点”对话框。 • 单击“新建”按钮，然后选择“站点”。 出现“站点定义”对话框。 • 可以在对话的上部选择（“基本”选项卡），或者“高级”选项卡，然后从“分类”列表中选择“本地信息” 。 • 设置完以后，点击文件面板，点击鼠标右键，选择”新建“文件，建立主页。 • 创建和编辑文档的两种方式：创建新的空白文档；创建以模板为基础的文档。 电子商务研究中心

44. HTML • 什么是 HTML？ • HTML 是用来描述网页的一种语言。 • HTML 指的是超文本标记语言 (Hyper Text Markup Language) • HTML 不是一种编程语言，而是一种标记语言(markup language) • 标记语言是一套标记标签(markup tag) • HTML 使用标记标签来描述网页 • HTML 标签 • HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 • HTML 标签是由尖括号包围的关键词，比如 <html> • HTML 标签通常是成对出现的，比如 <b> 和 </b> • 标签对中的第一个标签是开始标签，第二个标签是结束标签 • 开始和结束标签也被称为开放标签和闭合标签 电子商务研究中心

45. 1、网页相关技术——HTML语言 • 1．HTML文件的基本结构 • HTML文件的基本形式如下： • <html> <head> • <title> HTML文件标题</title> • </head> <body> • HTML文件内容</body> </html> • HTML文件以<html>开头，以</html>结束。 • 主要包括两个部分——头部和主体。 电子商务研究中心

46. 简单HTML实例 • <html><head><title>这里是显示在网页中标题栏内的内容</title></head><body>好呀，现在我们可以真正开始写HTML代码了！</body></html> • 说明： 1、HTML标记(告诉浏览器这个一个web页）<html> --------------</html>2、首部标记(提供一些与web页有关的特定信息）　　　　　　　　信息包括：网页标题、定义样式表、插入脚本<head>-------</head>3.正文标记符　　　　　　　　包含web页的具体内容，包括文字、图形、超级链接及其它html对象<body>在这儿写内容</body> 电子商务研究中心

47. 2．常用的HTML标记 • （1）段落标记<p>和</p> • （2）字体变换标记<font>和</font> • （3）超级链接标记<a href>和<／a> • （4）插入图片标记<img> • (5) 插入背静音乐<bgsound src=.mp3 loop=n> • (6) 插入背静图片<body bgcolor=black> • (7) 换行标记<br> 电子商务研究中心

48. <html> • <body> • <h1>My First Heading</h1> • <p>My first paragraph.</p> • </body> • </html> • <html>与</html> 之间的文本描述网页 • <body>与</body> 之间的文本是可见的页面内容 • <h1>与</h1> 之间的文本被显示为标题 • <p>与</p> 之间的文本被显示为段落 电子商务研究中心

49. HTML 标题 • HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。 • <h1>This is a heading</h1> • <h2>This is a heading</h2> • <h3>This is a heading</h3> • HTML 段落 • HTML 段落是通过 <p> 标签进行定义的。 • <p>This is a paragraph</p> • <p>This is another paragraph</p> • HTML 链接 • HTML 链接是通过 <a> 标签进行定义的。 • <a href="http://www.w3school.com.cn">This is a link</a> • HTML 图像 • HTML 图像是通过 <img> 标签进行定义的。 • <img src="w3school.jpg" width="104" height="142" /> 电子商务研究中心

50. HTML <br> 标签 • <br> 可插入一个简单的换行符。 • <br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。 • <html> • <head> • <title>换行示例</title> • </head> • <body> • 如梦令 • <br>常记溪亭日暮， • <br>沉醉不知归路， • <br>兴尽晚回舟， • <br>误入藕花深处。 • </body> • </html> 电子商务研究中心