电子商务网站设计.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,*,第3章 电子商务网站设计与开发,3.1,网页设计工具介绍,3.2,电子商务网站设计与制作,3.3,网,页,发,布,3.4,网页的更新,3.1,网页设计工具介绍,3.1.1,FrontPage 2002,和,Dreamweaver,MX/2004,1,HTML,和,FrontPage 2002,简介,Microsoft FrontPage 2002,的功能主要包括以下几个方面。,（,1,）站点管理工具,（,2,）编辑,HTML,（,3,）,发布网页,（,4,）数据库集成,FrontPage,2002,在数据库上集成了很多优秀的功能，典型的包括如下几个。,数据库结果向导,访问数据网页,简易的数据库发布,编辑,HTML,、,DHTML,、,脚本、,ASP,和,XML,（,5,）,扩充性和可程序化,FrontPage 2002,在程序设计和扩充上的功能包括以下,2,个。,Microsoft,脚本编辑器,Visual Basic for Applications,2,Dreamweaver,MX/2004,（,1,）,最佳的制作效率,（,2,）网站管理,（,3,）无可比拟的控制能力,（,4,）所见即所得,（,5,）梦幻样板和,XML,（,6,）,全方位呈现,（,7,）支持动态网页,3.1.2,CGI,和,ASP,随着,Web,技术的不断发展，,Web,页面上开始加入了动态和交互式的内容，并取得了成功。,Web,动态技术发展快，种类多，其中包括脚本语言、,CGI,、,ISAPI,、,ASP,、,ActiveX,、,Java Applet,等。,1,脚本语言,脚本语言（,Script Language,）,是一种简单的描述性语言，它的语法结构与计算机上的高级语言颇为相似，所以相对于其他的,Web,技术来说是简单易用的。,2,CGI,通用网关接口编程,CGI,的缺点有如下几个。,开发,CGI,需要比较复杂的语言，学习不易。,与,HTML,文件毫无关系，集成困难。,程序开发时间长，并且排错困难。,维护困难。,执行效率低。,3,ASP,技术,ASP,是动态服务器页面（,Active Server Pages,）,的简称。,ASP,为用户提供了一种真正的简便易学、功能强大的服务器编程技术。,ASP,其实是微软开发的一套服务器端脚本运行环境，通过,ASP,用户可以建立动态的、交互的、高效的,Web,服务器应用程序。,（,1,）,ASP,的特点,（,2,）,ASP,基础知识,ASP,文件制作,ASP,语法,ASP,内建对象,服务器组件,使用变量和常量,使用集合,3.1.3,ASP,应用程序举例,1,订购水果的,ASP,程序,2,搜索引擎程序,3,留言簿程序,3.2,电子商务网站设计与制作,3.2.1,电子商务网站内容设计的流程,要将企业网站作为在,Internet,上展示企业形象、企业文化，进行电子商务活动的信息空间，除了要进行网站的总体策划，确定网站的目标和定位等，还要进行电子商务网站的内容设计与制作，这是网站开发的重点。,1,网站内容设计的原则,（,1,）新、精、专的信息内容,信息内容永远处于第一位,内容设计要有组织,及时更新信息内容,（,2,）安全快速的访问,提高浏览者的访问速度,在确定内容的基础上，尽量提高速度十分必要，速度太慢，浏览者也会失去耐心，从而影响企业网站的访问量。,要有安全良好运转的硬件和软件环境,要使信息便于用户浏览,（,3,）美感十足、方便用户访问的页面,提供交互性,完善的检索和帮助功能,方便用户访问和购买,2,网站内容设计流程,电子商务网站的内容设计流程一般要经过如下步骤：首先在网站总体规划阶段所确定的信息需求和网站功能的基础上，收集与网站内容主题相关的关键信息；再利用一个逻辑结构有序地将这些信息组织起来，确定其信息结构，并开发出一个网站内容设计的基本模型；选择本企业一些有代表性的用户进行测试，根据他们提出的意见，再逐步完善这个模型，最终形成正式的企业网站的内容模块。,（,1,）收集与该网站有关的一些关键信息,（,2,）网站信息结构的设计,（,3,）网站运行环境的选择,（,4,）进行网页可视化设计,（,5,）网页制作,（,6,）网站测试,（,7,）网站发布,3.2.2,网站信息结构的设计,1,网站信息内容及其功能模块,（,1,）公司概况,（,2,）员工信息,（,3,）产品目录,（,4,）产品价格表,（,5,）产品搜索,（,6,）公司动态,（,7,）网上订购,（,8,）销售网络,（,9,）售后服务,（,10,）技术支持信息,（,11,）联系信息,（,12,）财务报告,（,13,）辅助信息,（,14,）其他内容信息,（,15,）增值服务,2,网站链接结构的设计,电子商务网站往往是一个大型的复杂的综合网站，为了实现信息的有效传递，也为了方便用户以最少的时间浏览网站获得所需信息，网站开发人员应在网站信息结构设计的同时，规划并设计好主次分明、结构清晰的网站链接结构，使浏览者对网站内容一目了然。,一般地，建立网站的链接结构有如下两种基本方式。,（,1,）树状链接结构（一对一）,（,2,）网状链接结构（一对多）,3,网站整体风格的设计,体现网站风格的常用方法有如下几个。,（,1,）使企业的标志尽可能出现在每个页面上,（,2,）突出网站的标准色彩,（,3,）突出网站的标准字体,（,4,）设计一条朗朗上口宣传标语,（,5,）使用统一的图片处理效果,（,6,）创造一个企业网站特有的符号或图标,3.2.3,网页的可视化设计,1,网页设计应遵循的原则,（,1,）网页命名要简洁,（,2,）确保页面的导航性好,（,3,）网页要易读,（,4,）合理设计视觉效果,（,5为图片添加文字说明,（,6,）不宜使用太多的动画和静态图片,（,7,）页面长度要适中,一个长的页面的传输时间要比较短的页面的传输时间长，太长的页面传输会使用户在等待中失去耐心。,（,8,）,Java,程序少用为宜,（,9,）整个页面风格要一致,（,10,）尽量使用相对超级链接,（,11,）不要滥用尖端技术,2,网页版面布局设计,（,1,）网页版面布局步骤,创建初始方案,初步设计网页的布局,定案,（,2,）常见的版面布局形式,“,T,”,结构布局,“口”型布局,“三”型布局,对称对比布局,POP,布局,（,3,）页面版面布局原则与技巧,下面是在进行网页版面布局设计时要遵循的一些原则，供读者参考。,正常平衡,异常平衡,对比,凝视,空白,尽量用图片解说,3,网页色彩设计,（,1,）网页色彩搭配的原理,色彩的鲜明性,网页的色彩要鲜艳，容易引人注目。,色彩的独特性,色彩的合适性,色彩的联想性,（,2,）网页色彩搭配的技巧,相同色系色彩,运用对比色或互补色,使用过渡色,用黑色和一种彩色,不要将所有颜色都用到，尽量控制在三种色彩以内，并且在其中选择一种作为主色调。,背景和文字的对比尽量要大，要有足够的对比度来保证页面易于阅读，绝对不要用花纹繁复的图案作背景，以便突出主要的文字内容。,由于国家和种族、宗教和信仰不同，以及生活的地理位置、文化修养的差异等，不同的人群对色彩的好恶程度有着很大的差异4,网页中图片和文字的设计,（,1,）善用图片,（,2,）网站字体,不要使用超过,3,种以上的字体,不要用太大或太小的文字,避免过多使用不停闪烁的文字,3.2.4,首页设计,首页的设计应该遵循快速、简洁、吸引人、信息概括能力强、易于导航的原则。,1,首页的功能模块,（,1,）页头,（,2,）主菜单,（,3,）最新消息的传递,（,4,）电子邮件地址,（,5,）联络信息,（,6,）版权信息,（,7,）其他信息,2,首页的可视化设计,3,首页设计要注意的问题,（,1,）首页明确，主题突出,（,2,）尽可能缩短下载时间,3.2.5,其他页面的设计,1,新闻页面的设计,（,1,）主页中的新闻标题,新闻标题组成的要素,新闻标题的版面布置,（,2,）新闻页面,2,产品页面的制作,3,雇员页面,（,1,）设计雇员目录,（,2,）创建默认页面,（,3,）创建个人页面,联系信息,组织和部门信息,雇员背景信息,增加一些有趣的材料,4,其他页面设计,（,1,）客户支持页面,（,2,）市场调研页面,（,3,）企业信息页面,（,4,）其他内容,3.2.6,网页制作,1,电子商务网站中的,Web,资源,2,静态网页的制作,3,动态网页的制作,（,1,）网页表示形式的动态制作,Script,（,脚本）语言,Java,Aplets,层叠样式表（,CSS,）,虚拟现实建模语言（,VRML,）,（,2,）,网页数据内容的动态制作,数据库设计阶段,程序设计阶段,4,用,Dreamweaver MX,制作数据动态网页,Dreamweaver,MX,软件功能很强，即可以制作静态网页，也可以制作动态网页，包括可以动态显示数据的网页。这一功能对那些不太熟悉编程的用户来说，非常有价值。,（,1,）建立数据库,（,2,）建立数据库连接,（,3,）建立一个静态页面,（,4,）定义记录集,（,5,）添加动态内容,（,6,）添加服务器行为,3.3,网,页,发,布,3.3.1 选择,Web,服务器,1,磁盘空间,2,可靠性,3,客户服务,4,价格因素,3.3.2 测试站点,3.3.3 远程设置,3.3.4 发布网页,发布站点是将构成网页和站点的所有文件拷贝到,Web,服务器上，让浏览者看到网页制作者的劳动成果。,3.4,网页的更新,网页更新要注意做好以下几点。,1,专人专门维护新闻栏目,2,时常检查相关链接,3,在网页中应设计并建立信息反馈,FQA,表单，随时收集用户的意见和建议,