第3章电子商务网站设计与开发3.1网页设计工具介绍3.2电子商务网站设计与制作3.3网页发布3.4网页的更新3.1网页设计工具介绍3.1.1FrontPage2002和DreamweaverMX/20041.HTML和FrontPage2002简介MicrosoftFrontPage2002的功能主要包括以下几个方面。(1)站点管理工具(2)编辑HTML(3)发布网页(4)数据库集成FrontPage2002在数据库上集成了很多优秀的功能,典型的包括如下几个。①数据库结果向导②访问数据网页③简易的数据库发布④编辑HTML、DHTML、脚本、ASP和XML(5)扩充性和可程序化FrontPage2002在程序设计和扩充上的功能包括以下2个。①Microsoft脚本编辑器②VisualBasicforApplications2.DreamweaverMX/2004(1)最佳的制作效率(2)网站管理(3)无可比拟的控制能力(4)所见即所得(5)梦幻样板和XML(6)全方位呈现(7)支持动态网页3.1.2CGI和ASP随着Web技术的不断发展,Web页面上开始加入了动态和交互式的内容,并取得了成功。Web动态技术发展快,种类多,其中包括脚本语言、CGI、ISAPI、ASP、ActiveX、JavaApplet等。1.脚本语言脚本语言(ScriptLanguage)是一种简单的描述性语言,它的语法结构与计算机上的高级语言颇为相似,所以相对于其他的Web技术来说是简单易用的。2.CGI通用网关接口编程CGI的缺点有如下几个。①开发CGI需要比较复杂的语言,学习不易。②与HTML文件毫无关系,集成困难。③程序开发时间长,并且排错困难。④维护困难。⑤执行效率低。3.ASP技术ASP是动态服务器页面(ActiveServerPages)的简称。ASP为用户提供了一种真正的简便易学、功能强大的服务器编程技术。ASP其实是微软开发的一套服务器端脚本运行环境,通过ASP用户可以建立动态的、交互的、高效的Web服务器应用程序。(1)ASP的特点(2)ASP基础知识①ASP文件制作②ASP语法③ASP内建对象④服务器组件⑤使用变量和常量⑥使用集合3.1.3ASP应用程序举例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(脚本)语言②JavaAplets③层叠样式表(CSS)④虚拟现实建模语言(VRML)(2)网页数据内容的动态制作①数据库设计阶段②程序设计阶段4.用DreamweaverMX制作数据动态网页DreamweaverMX软件功能很强,即可以制作静态网页,也可以制作动态网页,包括可以动态显示数据的网页。这一功能对那些不太熟悉编程的用户来说,非常有价值。(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表单,随时收集用户的意见和建议