1 / 83

第 四 章 商务网站开发技术与网站建设

第 四 章 商务网站开发技术与网站建设. 4. 3. 电子商务网站建设的基本技术. 电子商务网站的建设与管理. 1. 2. 商务网站开发流程. 网站设计. 内容概要. 4.1 商务网站开发流程. 表 4-1 商务网站开发流程. 4.2.1 电子商务网站的基本设计策略. 4.2. ３ 网站功能与结构设计. 4.2. ２ 网站的艺术设计. 4.2 网站设计. 网站设计可以分为 基本设计策略、艺术性设计等方面。具体而言，就是需要确定网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局以及文字图片的应用等。. 4.2.1 电子商务网站的基本设计策略.

kenny
Download Presentation

第 四 章 商务网站开发技术与网站建设

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第四章 商务网站开发技术与网站建设

  2. 4 3 电子商务网站建设的基本技术 电子商务网站的建设与管理 1 2 商务网站开发流程 网站设计 内容概要 电子商务研究中心

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

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

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

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

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

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

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

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

  24. ４. 3 电子商务网站建设的基本技术 • ４.3.1 电子商务软件平台技术 • ４.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. 1、网页相关技术——HTML语言 • 1．HTML文件的基本结构 • HTML文件的基本形式如下： • <html> <head> • <title> HTML文件标题</title> • </head> <body> • HTML文件内容</body> </html> • HTML文件以<html>开头，以</html>结束。 • 主要包括两个部分——头部和主体。 电子商务研究中心

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

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

  41. HTML字体大小 • <html> • <head><title>字体大小 font size</title></head> • <body> • <p><font size="1">这段文字的字体大小值为1。</font></p> • <p><font size="2">这段文字的字体大小值为2。</font></p> • <p><font size="3">这段文字的字体大小值为3。</font></p> • <p><font size="4">这段文字的字体大小值为4。</font></p> • <p><font size="5">这段文字的字体大小值为5。</font></p> • <p><font size="6">这段文字的字体大小值为6。</font></p> • <p><font size="7">这段文字的字体大小值为7。</font></p> • </body> • </html> 电子商务研究中心

  42. HTML字体颜色(font color） • <html> • <head><title>字体颜色 font color</title></head> • <body> • <p>这段文字用的是缺省的字体颜色。</p> • <p><font color="#FF0000">这段文字的字体颜色为红色。</font></p> • <p><font color="gray">这段文字的字体颜色为灰色。</font></p> • <p><font color="#33CC00">这段文字的字体颜色为绿色。</font></p> • </body> • </html> 电子商务研究中心

  43. 设置网页背景音乐 • <html><head><bgsound src=芝华士.mp3 loop=10><title>这里是显示在网页中标题栏内的内容</title></head><body>听听音乐，回顾过去，展望未来</body></html> 电子商务研究中心

  44. 设置个背景颜色 • <html><head><title>设置个背景颜色吧</title></head><body bgcolor=black><font size=10 color=white>你好黑呀！！</font></body></html> 电子商务研究中心

  45. 设置网页背景和前景图像 • <html> • <head> <title> • <font size=10 color=white></font> • 前景图案设一下 • </title> • </head> • <body background=花.jpg> • <font size=10 color=white>好看吗？ </font> • 插入一幅图片 • <img src=1.jpg width=60 height=60> • </body> • </html> • http://www.blabla.cn/index.html 电子商务研究中心

  46. 2、网页相关技术——脚本语言 • 脚本语言就是一种简单的程序，它由一些ASCII码组成，并可以用“记事本”等文本编辑器直接对其进行开发。 • JavaScript、VBScript • JavaScript、VBScript等不需要事先编译，只要利用合适的解释器便可以执行代码。 • 网页脚本语言可由客户端的计算机处理，可以大大提高服务器的工作效率。能够与一般的HTML语言交互使用。在读取网页的同时，脚本语言编写的小程序也被传输到客户机上，并在客户机上执行。 电子商务研究中心

  47. 网页相关技术——主要脚本语言 • 1．JavaScript • JavaScript是一种解释性编程语言，可由浏览器直接解释执行；JavaScript是一种脚本语言，用JavaScript编写网页程序，不需要有很深的编程经验。JavaScript 语言是通过嵌入在标准HTML语言中实现的 • 那么，如何在HTML语言中植入一个JavaScript脚本呢？以下是一个JavaScript脚本结构示例： • <script language="JavaScript"> • …… • </script> • 一段JavaScript代码可以放置于HTML中的任意部位，但多数情况下将其放于<HEAD>…</HEAD>区段中。 电子商务研究中心

  48. JavaScript实例 • 代码放在 body 里实例 • 代码放在 head 里 电子商务研究中心

  49. 代码放在 body 里 • <html> • <head><title>用document.write输出带格式的HTML文本的Javascript示例</title></head> • <body> • <script type="text/javascript"> • document.write("<h1>Hello World!</h1>") • </script> • </body> • </html> 返回 电子商务研究中心

  50. 代码放在 head 里 • <html> • <head> • <style> • div {border:1px solid #00FF00;width:100px;text-align:center;cursor:hand;} • </style> • <script type="text/javascript"> • function clickme() • { • alert("You clicked me!") • } • </script> • </head> • <body> • <p>请点击下面的“click me”。</p> • <div onclick = "clickme()" >click me</div> • </body> • </html> 返回 电子商务研究中心

More Related