电子商务网站设计及其开发

《电子商务网站设计及其开发》由会员分享，可在线阅读，更多相关《电子商务网站设计及其开发（42页珍藏版）》请在装配图网上搜索。

1、第第3 3章章 电子商务网站设计与电子商务网站设计与开发开发 3.1 网页设计工具介绍网页设计工具介绍3.2 电子商务网站设计与制作电子商务网站设计与制作3.3 网网 页页 发发 布布3.4 网页的更新网页的更新 3.1 网页设计工具介绍网页设计工具介绍n33.11.1 1 Froront tPaage 2 20022和和 Dr Dreamwamweavaver Mr MX/220044n1HTML和和FrontPage 2002简介简介nMicrosoft FrontPage 2002的功能主要包括以下几个方面。的功能主要包括以下几个方面。n（1）站点管理工具）站点管理工具n（2）编辑）编辑

2、HTMLn（3）发布网页）发布网页n（4）数据库集成）数据库集成n FrontPage 2002在数据库上集成了很多优在数据库上集成了很多优秀的功能，典型的包括如下几个。秀的功能，典型的包括如下几个。n 数据库结果向导数据库结果向导n 访问数据网页访问数据网页n 简易的数据库发布简易的数据库发布n 编辑编辑HTML、DHTML、脚本、脚本、ASP和和XMLn（5）扩充性和可程序化）扩充性和可程序化nFrontPage 2002在程序设计和扩充上的功能包在程序设计和扩充上的功能包括以下括以下2个。个。n Microsoft脚本编辑器脚本编辑器n Visual Basic for Applicat

3、ionsn2Dreamweaver MX/2004n（1）最佳的制作效率）最佳的制作效率n（2）网站管理）网站管理n（3）无可比拟的控制能力）无可比拟的控制能力n（4）所见即所得）所见即所得n（5）梦幻样板和）梦幻样板和XMLn（6）全方位呈现）全方位呈现n（7）支持动态网页）支持动态网页33.11.2 C2 CGI I和和ASPn 随着随着Web技术的不断发展，技术的不断发展，Web页面上开始加入页面上开始加入了动态和交互式的内容，并取得了成功。了动态和交互式的内容，并取得了成功。Web动态技动态技术发展快，种类多，其中包括脚本语言、术发展快，种类多，其中包括脚本语言、CGI、ISAPI、A

4、SP、ActiveX、Java Applet等。等。n1脚本语言脚本语言n 脚本语言（脚本语言（Script Language）是一种简单的描述）是一种简单的描述性语言，它的语法结构与计算机上的高级语言颇为相性语言，它的语法结构与计算机上的高级语言颇为相似，所以相对于其他的似，所以相对于其他的Web技术来说是简单易用的。技术来说是简单易用的。n2CGI通用网关接口编程通用网关接口编程nCGI的缺点有如下几个。的缺点有如下几个。n 开发开发CGI需要比较复杂的语言，学习不易。需要比较复杂的语言，学习不易。n 与与HTML文件毫无关系，集成困难。文件毫无关系，集成困难。n 程序开发时间长，并且排错

5、困难。程序开发时间长，并且排错困难。n 维护困难。维护困难。n 执行效率低。执行效率低。n3ASP技术技术n ASP是动态服务器页面（是动态服务器页面（Active Server Pages）的简称。）的简称。ASP为用户提供了一种真正为用户提供了一种真正的简便易学、功能强大的服务器编程技术。的简便易学、功能强大的服务器编程技术。n ASP其实是微软开发的一套服务器端脚本其实是微软开发的一套服务器端脚本运行环境，通过运行环境，通过ASP用户可以建立动态的、交用户可以建立动态的、交互的、高效的互的、高效的Web服务器应用程序。服务器应用程序。n（1）ASP的特点的特点n（2）ASP基础知识基础知

6、识n ASP文件制作文件制作n ASP语法语法n ASP内建对象内建对象n 服务器组件服务器组件n 使用变量和常量使用变量和常量n 使用集合使用集合n33.11.3 3 ASP 应用程序举例应用程序举例n1订购水果的订购水果的ASP程序程序n2搜索引擎程序搜索引擎程序n3留言簿程序留言簿程序3.2 电子商务网站设计与制作电子商务网站设计与制作n33.22.1 1 电子商务网站内容设计的流程电子商务网站内容设计的流程n 要将企业网站作为在要将企业网站作为在Internet上展示企业上展示企业形象、企业文化，进行电子商务活动的信息空形象、企业文化，进行电子商务活动的信息空间，除了要进行网站的总体策

7、划，确定网站的间，除了要进行网站的总体策划，确定网站的目标和定位等，还要进行电子商务网站的内容目标和定位等，还要进行电子商务网站的内容设计与制作，这是网站开发的重点。设计与制作，这是网站开发的重点。n1网站内容设计的原则网站内容设计的原则n（1）新、精、专的信息内容）新、精、专的信息内容n 信息内容永远处于第一位信息内容永远处于第一位n 内容设计要有组织内容设计要有组织n 及时更新信息内容及时更新信息内容n（2）安全快速的访问）安全快速的访问n 提高浏览者的访问速度提高浏览者的访问速度n在确定内容的基础上，尽量提高速度十分必要，在确定内容的基础上，尽量提高速度十分必要，速度太慢，浏览者也会失去

8、耐心，从而影响企速度太慢，浏览者也会失去耐心，从而影响企业网站的访问量。业网站的访问量。n 要有安全良好运转的硬件和软件环境要有安全良好运转的硬件和软件环境n 要使信息便于用户浏览要使信息便于用户浏览n（3）美感十足、方便用户访问的页面）美感十足、方便用户访问的页面n 提供交互性提供交互性n 完善的检索和帮助功能完善的检索和帮助功能n 方便用户访问和购买方便用户访问和购买n2网站内容设计流程网站内容设计流程n 电子商务网站的内容设计流程一般要经过如下步电子商务网站的内容设计流程一般要经过如下步骤：首先在网站总体规划阶段所确定的信息需求和网骤：首先在网站总体规划阶段所确定的信息需求和网站功能的基

9、础上，收集与网站内容主题相关的关键信站功能的基础上，收集与网站内容主题相关的关键信息；再利用一个逻辑结构有序地将这些信息组织起来，息；再利用一个逻辑结构有序地将这些信息组织起来，确定其信息结构，并开发出一个网站内容设计的基本确定其信息结构，并开发出一个网站内容设计的基本模型；选择本企业一些有代表性的用户进行测试，根模型；选择本企业一些有代表性的用户进行测试，根据他们提出的意见，再逐步完善这个模型，最终形成据他们提出的意见，再逐步完善这个模型，最终形成正式的企业网站的内容模块。正式的企业网站的内容模块。n（1）收集与该网站有关的一些关键信息）收集与该网站有关的一些关键信息n（2）网站信息结构的设

10、计）网站信息结构的设计n（3）网站运行环境的选择）网站运行环境的选择n（4）进行网页可视化设计）进行网页可视化设计n（5）网页制作）网页制作n（6）网站测试）网站测试n（7）网站发布）网站发布33.22.2 2 网站信息结构的设计网站信息结构的设计n1网站信息内容及其功能模块网站信息内容及其功能模块n（1）公司概况）公司概况n（2）员工信息）员工信息n（3）产品目录）产品目录n（4）产品价格表）产品价格表n（5）产品搜索）产品搜索n（6）公司动态）公司动态n（7）网上订购）网上订购n（8）销售网络）销售网络n（9）售后服务）售后服务n（10）技术支持信息）技术支持信息n（11）联系信息）联系信

11、息n（12）财务报告）财务报告n（13）辅助信息）辅助信息n（14）其他内容信息）其他内容信息n（15）增值服务）增值服务n2网站链接结构的设计网站链接结构的设计n 电子商务网站往往是一个大型的复杂的综合网站，电子商务网站往往是一个大型的复杂的综合网站，为了实现信息的有效传递，也为了方便用户以最少的为了实现信息的有效传递，也为了方便用户以最少的时间浏览网站获得所需信息，网站开发人员应在网站时间浏览网站获得所需信息，网站开发人员应在网站信息结构设计的同时，规划并设计好主次分明、结构信息结构设计的同时，规划并设计好主次分明、结构清晰的网站链接结构，使浏览者对网站内容一目了然。清晰的网站链接结构，使

12、浏览者对网站内容一目了然。n一般地，建立网站的链接结构有如下两种基本方式。一般地，建立网站的链接结构有如下两种基本方式。n（1）树状链接结构（一对一）树状链接结构（一对一）n（2）网状链接结构（一对多）网状链接结构（一对多）n3网站整体风格的设计网站整体风格的设计n体现网站风格的常用方法有如下几个。体现网站风格的常用方法有如下几个。n（1）使企业的标志尽可能出现在每个页面上）使企业的标志尽可能出现在每个页面上n（2）突出网站的标准色彩）突出网站的标准色彩n（3）突出网站的标准字体）突出网站的标准字体n（4）设计一条朗朗上口宣传标语）设计一条朗朗上口宣传标语n（5）使用统一的图片处理效果）使用统

13、一的图片处理效果n（6）创造一个企业网站特有的符号或图标）创造一个企业网站特有的符号或图标33.22.3 3 网页的可视化设计网页的可视化设计n1网页设计应遵循的原则网页设计应遵循的原则n（1）网页命名要简洁）网页命名要简洁n（2）确保页面的导航性好）确保页面的导航性好n（3）网页要易读）网页要易读n（4）合理设计视觉效果）合理设计视觉效果n（5）为图片添加文字说明）为图片添加文字说明n（6）不宜使用太多的动画和静态图片）不宜使用太多的动画和静态图片n（7）页面长度要适中）页面长度要适中n 一个长的页面的传输时间要比较短的页面一个长的页面的传输时间要比较短的页面的传输时间长，太长的页面传输会使

14、用户在等的传输时间长，太长的页面传输会使用户在等待中失去耐心。待中失去耐心。n（8）Java程序少用为宜程序少用为宜n（9）整个页面风格要一致）整个页面风格要一致n（10）尽量使用相对超级链接）尽量使用相对超级链接n（11）不要滥用尖端技术）不要滥用尖端技术n2网页版面布局设计网页版面布局设计n（1）网页版面布局步骤）网页版面布局步骤n 创建初始方案创建初始方案n 初步设计网页的布局初步设计网页的布局n 定案定案n（2）常见的版面布局形式）常见的版面布局形式n“T”结构布局结构布局n“口口”型布局型布局n“三三”型布局型布局n 对称对比布局对称对比布局n POP布局布局n（3）页面版面布局原则

15、与技巧）页面版面布局原则与技巧n 下面是在进行网页版面布局设计时要遵循的一些下面是在进行网页版面布局设计时要遵循的一些原则，供读者参考。原则，供读者参考。n 正常平衡正常平衡n 异常平衡异常平衡n 对比对比n 凝视凝视n 空白空白n 尽量用图片解说尽量用图片解说n3网页色彩设计网页色彩设计n（1）网页色彩搭配的原理）网页色彩搭配的原理n 色彩的鲜明性色彩的鲜明性n网页的色彩要鲜艳，容易引人注目。网页的色彩要鲜艳，容易引人注目。n 色彩的独特性色彩的独特性n 色彩的合适性色彩的合适性n 色彩的联想性色彩的联想性n（2）网页色彩搭配的技巧）网页色彩搭配的技巧n 相同色系色彩相同色系色彩n 运用对比

16、色或互补色运用对比色或互补色n 使用过渡色使用过渡色n 用黑色和一种彩色用黑色和一种彩色n 不要将所有颜色都用到，尽量控制在三种色彩以内，不要将所有颜色都用到，尽量控制在三种色彩以内，并且在其中选择一种作为主色调。并且在其中选择一种作为主色调。n 背景和文字的对比尽量要大，要有足够的对背景和文字的对比尽量要大，要有足够的对比度来保证页面易于阅读，绝对不要用花纹繁比度来保证页面易于阅读，绝对不要用花纹繁复的图案作背景，以便突出主要的文字内容。复的图案作背景，以便突出主要的文字内容。n 由于国家和种族、宗教和信仰不同，以及生由于国家和种族、宗教和信仰不同，以及生活的地理位置、文化修养的差异等，不同

17、的人活的地理位置、文化修养的差异等，不同的人群对色彩的好恶程度有着很大的差异。群对色彩的好恶程度有着很大的差异。n4网页中图片和文字的设计网页中图片和文字的设计n（1）善用图片）善用图片n（2）网站字体）网站字体n 不要使用超过不要使用超过3种以上的字体种以上的字体n 不要用太大或太小的文字不要用太大或太小的文字n 避免过多使用不停闪烁的文字避免过多使用不停闪烁的文字33.22.4 4 首页设计首页设计n 首页的设计应该遵循快速、简洁、吸引人、信息首页的设计应该遵循快速、简洁、吸引人、信息概括能力强、易于导航的原则。概括能力强、易于导航的原则。n1 1首页的功能模块首页的功能模块n（1）页头）

18、页头n（2）主菜单）主菜单n（3）最新消息的传递）最新消息的传递n（4）电子邮件地址）电子邮件地址n（5）联络信息）联络信息n（6）版权信息）版权信息n（7）其他信息）其他信息n2 2首页的可视化设计首页的可视化设计n3首页设计要注意的问题首页设计要注意的问题n（1）首页明确，主题突出）首页明确，主题突出n（2）尽可能缩短下载时间）尽可能缩短下载时间33.22.5 其他页面的设计其他页面的设计n1新闻页面的设计新闻页面的设计n（1）主页中的新闻标题）主页中的新闻标题n 新闻标题组成的要素新闻标题组成的要素n 新闻标题的版面布置新闻标题的版面布置n（2）新闻页面）新闻页面n2产品页面的制作产品页

19、面的制作n3雇员页面雇员页面n（1）设计雇员目录）设计雇员目录n（2）创建默认页面）创建默认页面n（3）创建个人页面）创建个人页面n 联系信息联系信息n 组织和部门信息组织和部门信息n 雇员背景信息雇员背景信息 增加一些有趣的材料增加一些有趣的材料n4其他页面设计其他页面设计n（1）客户支持页面）客户支持页面n（2）市场调研页面）市场调研页面n（3）企业信息页面）企业信息页面n（4）其他内容）其他内容33.22.6 6 网页制作网页制作n1电子商务网站中的电子商务网站中的Web资源资源n2静态网页的制作静态网页的制作n3动态网页的制作动态网页的制作n（1）网页表示形式的动态制作）网页表示形式的

20、动态制作n Script（脚本）语言（脚本）语言n Java Apletsn 层叠样式表（层叠样式表（CSS）n 虚拟现实建模语言（虚拟现实建模语言（VRML）n（2）网页数据内容的动态制作）网页数据内容的动态制作n 数据库设计阶段数据库设计阶段n 程序设计阶段程序设计阶段4用用Dreamweaver MX制作数据动态网页制作数据动态网页n Dreamweaver MX软件功能很强，即可以制作静软件功能很强，即可以制作静态网页，也可以制作动态网页，包括可以动态显示数态网页，也可以制作动态网页，包括可以动态显示数据的网页。这一功能对那些不太熟悉编程的用户来说，据的网页。这一功能对那些不太熟悉编程

21、的用户来说，非常有价值。非常有价值。n（1）建立数据库）建立数据库n（2）建立数据库连接）建立数据库连接n（3）建立一个静态页面）建立一个静态页面n（4）定义记录集）定义记录集n（5）添加动态内容）添加动态内容n（6）添加服务器行为）添加服务器行为3.3 网网 页页 发发 布布n33.33.1 1 选择选择Web b服务器服务器n1磁盘空间磁盘空间n2可靠性可靠性n3客户服务客户服务n4价格因素价格因素n33.33.2 2 测试站点测试站点n33.33.3 3 远程设置远程设置n33.33.4 4 发布网页发布网页n 发布站点是将构成网页和站点的所有文件拷发布站点是将构成网页和站点的所有文件拷贝到贝到Web服务器上，让浏览者看到网页制作者的劳服务器上，让浏览者看到网页制作者的劳动成果。动成果。3.4 网页的更新网页的更新 n网页更新要注意做好以下几点。网页更新要注意做好以下几点。n1专人专门维护新闻栏目专人专门维护新闻栏目n2时常检查相关链接时常检查相关链接n3在网页中应设计并建立信息反馈在网页中应设计并建立信息反馈FQA表单，表单，随时收集用户的意见和建议随时收集用户的意见和建议演讲完毕，谢谢观看！