第3章 电子商务网站设计.pptx

1、第3章 电子商务网站设计与开发,3.1 网页设计工具介绍3.2 电子商务网站设计与制作3.3 网 页 发 布3.4 网页的更新,3.1 网页设计工具介绍,3.1.1 FrontPage 2002和 Dreamweaver MX/20041HTML和FrontPage 2002简介Microsoft FrontPage 2002的功能主要包括以下几个方面。（1）站点管理工具（2）编辑HTML（3）发布网页（4）数据库集成,FrontPage 2002在数据库上集成了很多优秀的功能，典型的包括如下几个。数据库结果向导 访问数据网页 简易的数据库发布 编辑HTML、DHTML、脚本、ASP和XML（

2、5）扩充性和可程序化,FrontPage 2002在程序设计和扩充上的功能包括以下2个。Microsoft脚本编辑器 Visual Basic for Applications,2Dreamweaver 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脚本语言 脚本语言（

3、Script Language）是一种简单的描述性语言，它的语法结构与计算机上的高级语言颇为相似，所以相对于其他的Web技术来说是简单易用的。,2CGI通用网关接口编程CGI的缺点有如下几个。开发CGI需要比较复杂的语言，学习不易。与HTML文件毫无关系，集成困难。程序开发时间长，并且排错困难。维护困难。执行效率低。3ASP技术,ASP是动态服务器页面（Active Server Pages）的简称。ASP为用户提供了一种真正的简便易学、功能强大的服务器编程技术。ASP其实是微软开发的一套服务器端脚本运行环境，通过ASP用户可以建立动态的、交互的、高效的Web服务器应用程序。（1）ASP的特点

4、,（2）ASP基础知识 ASP文件制作 ASP语法 ASP内建对象 服务器组件 使用变量和常量 使用集合,3.1.3 ASP 应用程序举例1订购水果的ASP程序2搜索引擎程序3留言簿程序,3.2 电子商务网站设计与制作,3.2.1 电子商务网站内容设计的流程 要将企业网站作为在Internet上展示企业形象、企业文化，进行电子商务活动的信息空间，除了要进行网站的总体策划，确定网站的目标和定位等，还要进行电子商务网站的内容设计与制作，这是网站开发的重点。,1网站内容设计的原则（1）新、精、专的信息内容 信息内容永远处于第一位 内容设计要有组织 及时更新信息内容,（2）安全快速的访问 提高浏览者的

5、访问速度在确定内容的基础上，尽量提高速度十分必要，速度太慢，浏览者也会失去耐心，从而影响企业网站的访问量。要有安全良好运转的硬件和软件环境 要使信息便于用户浏览,（3）美感十足、方便用户访问的页面 提供交互性 完善的检索和帮助功能 方便用户访问和购买,2网站内容设计流程 电子商务网站的内容设计流程一般要经过如下步骤：首先在网站总体规划阶段所确定的信息需求和网站功能的基础上，收集与网站内容主题相关的关键信息；再利用一个逻辑结构有序地将这些信息组织起来，确定其信息结构，并开发出一个网站内容设计的基本模型；选择本企业一些有代表性的用户进行测试，根据他们提出的意见，再逐步完善这个模型，最终形成正式的企

6、业网站的内容模块。,（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网站链接结构的设计 电子商务网站往往是一个大型的复杂的综合网站，为了实现信息的有效传递，也为了方便用户以最少的时间浏览网站获得所需信

7、息，网站开发人员应在网站信息结构设计的同时，规划并设计好主次分明、结构清晰的网站链接结构，使浏览者对网站内容一目了然。一般地，建立网站的链接结构有如下两种基本方式。（1）树状链接结构（一对一）（2）网状链接结构（一对多）3网站整体风格的设计,体现网站风格的常用方法有如下几个。（1）使企业的标志尽可能出现在每个页面上（2）突出网站的标准色彩（3）突出网站的标准字体（4）设计一条朗朗上口宣传标语（5）使用统一的图片处理效果（6）创造一个企业网站特有的符号或图标,3.2.3 网页的可视化设计,1网页设计应遵循的原则（1）网页命名要简洁（2）确保页面的导航性好（3）网页要易读（4）合理设计视觉效果（5

8、）为图片添加文字说明（6）不宜使用太多的动画和静态图片,（7）页面长度要适中 一个长的页面的传输时间要比较短的页面的传输时间长，太长的页面传输会使用户在等待中失去耐心。（8）Java程序少用为宜（9）整个页面风格要一致（10）尽量使用相对超级链接（11）不要滥用尖端技术,2网页版面布局设计（1）网页版面布局步骤 创建初始方案 初步设计网页的布局 定案,（2）常见的版面布局形式“T”结构布局“口”型布局“三”型布局 对称对比布局 POP布局,（3）页面版面布局原则与技巧 下面是在进行网页版面布局设计时要遵循的一些原则，供读者参考。正常平衡 异常平衡 对比 凝视 空白 尽量用图片解说,3网页色彩设

9、计（1）网页色彩搭配的原理 色彩的鲜明性网页的色彩要鲜艳，容易引人注目。色彩的独特性 色彩的合适性 色彩的联想性,（2）网页色彩搭配的技巧 相同色系色彩 运用对比色或互补色 使用过渡色 用黑色和一种彩色 不要将所有颜色都用到，尽量控制在三种色彩以内，并且在其中选择一种作为主色调。,背景和文字的对比尽量要大，要有足够的对比度来保证页面易于阅读，绝对不要用花纹繁复的图案作背景，以便突出主要的文字内容。由于国家和种族、宗教和信仰不同，以及生活的地理位置、文化修养的差异等，不同的人群对色彩的好恶程度有着很大的差异。,4网页中图片和文字的设计（1）善用图片（2）网站字体 不要使用超过3种以上的字体 不要

10、用太大或太小的文字 避免过多使用不停闪烁的文字,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）创建个人页面 联系信息 组织和部门信息 雇员背景信息 增加一

11、些有趣的材料,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表单，随时收集用户的意见和建议,