毕业设计(论文)-电子商务网站的设计与实现.doc_第1页
毕业设计(论文)-电子商务网站的设计与实现.doc_第2页
毕业设计(论文)-电子商务网站的设计与实现.doc_第3页
毕业设计(论文)-电子商务网站的设计与实现.doc_第4页
毕业设计(论文)-电子商务网站的设计与实现.doc_第5页
已阅读5页,还剩17页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

电子商务网站的设计与实现目 录0. 引言31. 电子商务概述31.1.电子商务的定义及特点31.2.电子商务活动的主要流程42. 电子商务网站规划52.1.网站定位52.2.电子商务网站功能的规划52.3.网络营销功能规划52.4.电子商务网站风格和开发环境的选择53. 电子商务网站的总体设计63.1.网站设计的规划63.2.网页素材的收集、选择与安排73.3.网页版面的布局设计73.4.网页色彩和文字字体规划84. 电子商务网站的实现过程84.1.本地站点的规划和创建84.2.首页的制作94.3.留言板的制作135. 电子商务网站的后期工作165.1.网站测试165.2.域名申请165.3.信息发布175.4.上传网站175.5.网站宣传和维护176. 总结187. 致谢18参考文献19附录19电子商务网站的设计与实现学生:何文玲 指导教师:周晶平摘 要:本文讨论了电子商务网站的设计与实现,介绍了电子商务以及电子商务活动相关的基本概念,给出了详细的电子商务网站的设计与实现过程。设计过程包括网站定位、网站功能规划、网站风格和开发环境的选择以及网页版面布局色彩文字的规划;实现过程包括创建站点、制作首页和分页、制作留言板等方面的详细介绍。最后还针对网站的发布、宣传和维护等方面的知识进行了一定的介绍。网站的测试和运行结果表明:该小型商务网站能实现用户浏览产品、搜索产品、用户留言等电子商务网站的基本功能。关键词: 电子商务,电子商务网站,站点创建,首页制作0. 引言随着计算机、网络、通信技术的发展和日益融合,以及Internet的普及应用,包括电子商务(EC)、视频会议、远程医疗等在内的一些应用已开始引起社会的关注,并逐步走进人们的日常生活。电子商务是一个全新的概念,它描述了通过包括因特网在内的计算机网络来购买、销售和交换产品、服务和信息的过程,简言之即通过电子手段来完成整个商业贸易活动的过程。从最初的电话、电报到电子邮件以及20多年前开始的EDI,都可以说是电子商务的某种形式,而发展到今天,人们已提出了包括通过网络来实现从原材料的查询、采购、产品的展示、定购到出品、储运以及电子支付等一系列贸易活动在内的完整电子商务的概念。在发达国家,电子商务已发展迅速,通过Internet进行交易已成为潮流。基于电子商务而推出的金融电子化方案、信息安全方案、Internet方案,形成一个又一个的产业,给信息技术带来许多新的机会,把握和抓住这些机会,正成为国际信息技术市场竞争的主流。电子商务离不开因特网,也离不开网站,正是由于Web技术的发展才造就了电子商务发展的大潮,同时Web技术应用的最广泛的领域也正是电子商务。随着信息技术的发展,网站在电子商务中的作用会不断扩展和延伸。1. 电子商务概述电子商务的广泛推广,打破了时空界限,改变了贸易形态,大大加速了整个社会的商品流通,有助于降低企业的成本,提高企业的竞争力,尤其是能使中小企业迅速进入国际市场参与竞争。电子商务正是为了适应这种以全球为适应市场的变化而出现和发展起来的,它可以让商家在全球范围内选择最佳供应商,从而在全球市场上销售商品。电子商务利用Internet技术,将企业、用户、供应商以及其他商业和贸易所需环节连接到现有的信息技术系统上来,从专用的Internet网到共享的Extranet网、Intranet再到公共的Internet网,实现了充分利用有限资源,缩短了商业环节和周期,提高了效率,降低了成本。1.1. 电子商务的定义及特点 电子商务,顾名思义就是指在Internet网上进行的商务活动。其主要功能包括网上的广告、订货、付款、客户服务和货物递交等销售、售前和售后服务,以及市场调查分析、财务核计及生产安排等多项利用Internet开发的商务活动。电子商务有广义和狭义之分。狭义的电子商务也称作电子交易(e-commerce),主要是指利用Web提供的通信手段在网上进行的交易。而广义的电子商务包括电子交易在内的利用Web进行的全部商业活动,如市场分析、客户联系、物资调配等等,亦称作电子商务(e-commerce)。这些商务活动可以发生于企业内部、企业之间及企业与客户之间。Internet为企业和客户提供相互沟通的渠道,便于客户更广泛地了解企业的产品及服务。电子商务提供企业虚拟的全球性贸易环境,大大提高了商务活动的水平和服务质量。其特点为:l 大大提高了通信速度,尤其是国际范围内的通信速度。l 节省了潜在开支。l 增加了客户和供货方的联系。如电子商务系统网络站点使得客户和供货方均能了解对方的最新数据,而电子数据交换(EDI)则意味着企业间的合作得到了加强。l 提供了交互式的销售渠道。l 提供全天候的服务。l 电子商务增强了企业的竞争力。1.2. 电子商务活动的主要流程一般情况下,电子商务,电子商务活动由如图1 所示的5个流程构成:信息共享、洽谈订购、支付、交付及售后服务等过程。电话传真等 web站点 新闻组网络通信web站点EDI支付商品web站点、传真等 卖主确定需求寻找资源评估购买使用维护提供信息寻找客户提供信息订购与支付客户支持信息共享企业数据库支付等售后服务买主图1 电子商务活动的主要流程图2. 电子商务网站规划网站是一个相当复杂的系统。因此无论是企业或组织建立网站,还是准备一个纯粹的网络公司,开发网站都首先需要认真规划,然后再按照系统工程的方法组织实施。在规划商务网站时,特别需要注意对网站定位、环境设置等方面的总体考虑。2.1.网站定位 网站系统开发制胜的关键之一是定位准确,而不是盲目的跟风和简单的模仿。定位是否准确关键则是要符合且也的实际和长远的利益,而且要可以实现、易于操作。网站定位的具体内容包括: 应当策划短期和长期赢利项目; 主要商品和服务的项目; 网络市场分析; 分析网络中现有的竞争对手; 分析取胜的机会; 制定相应策略和正确的操作步骤。2.2.电子商务网站功能的规划要建立一个适合企业的电子商务的网站,应进行如下工作: 企业进行理想的域名设计,域名和服务器的快速申请; 规划适合企业在线生意的网站; 站点能提供主要产品或服务外的附有价值的信息内容; 有与检索排名密切相关的关键词设计和网页制作; 站点能提供全面的与在线生意密切相关的信息; 将网站中主要页面向世界各大搜索引擎和国内主要搜索引擎登记注册,并使搜索结果排名进入搜索引擎的前列;建立在线交易的在线支付平台; 提供多语言的网站版本,便于全球范围的网站推广。2.3.网络营销功能规划电子商务的主要功能之一是开展网络营销,网站又是开展网络营销的主要平台。在制定网站系统规划时一定要以实现网络营销的功能为一个基本出发点。其具体内容包括以下几个方面。(1)网络营销具体内容的规划在电子商务网站设计时,一定要在网页中体现网络营销的多种内容。例如,在线广告设计、电子邮件营销设计、网络社区、商品和服务的展示等。(2)网络营销创意的规划网络营销创意是关于电子商务的奇思妙想。例如,有奖销售、个性化服务等。(3)网络营销策略的规划2.4.电子商务网站风格和开发环境的选择 网站是一个企业或组织在网上形象的展示,所以网站要能全面、恰当地放映出企业文化和企业内在特征。1、网站风格首先,网站风格是网页风格的综合体现。包括网页的布局、主色调、字体样式等,使网站特点、水平的外在表现,当然也体现了设计者的设计水平和审美观念。其次,网站中各个网页,或同一个主题的网页选择接近的网页设计风格会增加浏览的亲切感。要实现这些目标有很多技术可以应用。第三,网站风格与网站提供服务的内容有关,网站的风格应首先服务于网站的目标。给网站配置过多的图片、色彩过于花哨等,都不是好的网站设计风格。2、网站开发环境网站开发和运行环境的选择是网站系统规划的重要内容之一,其中包括以下几项重要内容: 网络平台选择;数据库平台选择;开发环境和工具的确定。3. 电子商务网站的总体设计前台系统直接与客户打交道,其内容的完整性和合理性,是电子商务网站是否吸引用户的关键因素之一,所以在设计前台系统时应尽量从用户的角度和网络营销的角度出发考虑其功能的实现。在本文中将以一个网上数码商店为实例,详细介绍电子商务网站的功能和设计过程。3.1.网站设计的规划构建一个网上商店的网站前,要对它先进行合理的规划,就像我们在现实生活的建立传统的商店一样,要了解建店的环境特点和交易过程、确定商店的性质、规模和消费对象。 网上商店是在互联网上进行商品交易的商店。由于互联网有无国界、无地域、无时间限制的特点,网上商店在经营思路和商品营销方面与传统商店的商业模式有很大差别。网上购物自身具备的24小时7天的模式与即时互动方式已经吸引了很多购物者的注意力。网上商店能够随时让顾客参与购买,更方便、更详细、更安全。在网上商店购物和传统的购物有很大的区别。顾客不需要亲自到商店去挑选商品,他只要通过互联网登录到网站,浏览、选购自己所需商品,填写一定的资料,就可以等商家送货上门了。网上商店的购物过程的各个阶段如下图:(兰色字体部分为商家对网上商店的操作部分)支付送货费和优惠结账收据购物推车产品浏览处理订单访问网上商店履行订单按订单送货消费者、参观者市场 我制作的是一个网上数码商店的网站,由于人力的限制,它只是一个小型的网上商店。它能实现用户浏览产品、搜索产品、用户留言等网上商店的基本功能。对于它的消费对象,我考虑到网上商店还是一种新型的商业模式,而上网用户以中青年人为主,所以我把网上数码商店的主要消费对象定位在20岁40岁年龄段的用户。这类人大多喜欢尝试新事物,所以我把简单、明快定为网页的整体风格。3.2.网页素材的收集、选择与安排确定了网页的主题后,就要开始着手制作网页了。一个网页不仅要求内容丰富、精彩,形式活泼,还要求页面美观大方,以此来吸引顾客。这就要求我们收集大量的素材。网页素材的来源很多,在互联网上有很多网站提供了大量的无版权信息的网页素材,可以根据需要下载;还可以自己动手制作网页素材,例如运用图象处理软件(如Photoshop、Firework)和网络多媒体软件(如flash)可以制作具有自己特色的网站的标志、广告条等。市面上有很多网页素材的光盘,可以根据需要购买。制作一个网上数码商店的网站,关于数码产品的信息是必不可少的,它包括产品的图片、品牌型号、价格、详细说明、技术参数等。我主要是通过网络上的搜索引擎,输入数码产品等关键字后找到的一堆相关资料。根据页面制作的需要,我们从收集来的素材中,挑选出合适的素材。在网页制作中使图片与文字相结合。一个清爽漂亮的网页,页面上的文字不能太多,否则就会显得沉闷,缺乏生气;页面上的图片太多,缺少文字,必然会减少页面的信息容量。因此,在素材的安排上应使文字与图片密切配合,互为衬托。这样即能活跃页面,又使网页有丰富的内容。3.3.网页版面的布局设计设计一个网页不仅仅是把相关的内容放到网页中就行了,它还要求网页设计者能够把这些内容合理安排,给浏览者赏心悦目的感觉,这样才能达到内容与形式的完美结合,增强网站的吸引力。通过合理的、有创意的布局,可以把文字、图像等素材,完美的展现在浏览者面前。常见的版面布局形式有:T字型这种布局最为常见,就是指页面最上方是广告条,页面下方左面是菜单,右面显示页面内容,整体上类似英文字母“T”,所以称之为T字型布局。这种布局条理清晰、主次分明。口字型这种布局类似一个方框,上下是广告条,左面是菜单,右面是友情链接,中间是网页内容,页面布局紧凑、信息丰富。对称型整个网页程上下或左右对称布局,非常醒目,如果两部分搭配协调,网页的视觉效果非常好,很有冲击力。海报型这种布局就像我们平时见到的海报一样,中间是一幅很醒目、设计非常精美的图片,周围点缀一些图片和文字链接,常用于首页设计,非常吸引人。我在网上数码商店的制作是采用上面所说的T字型和对称型相结合的结构布局。为了保持整个网站的一致性,我使其他页面同一级网页的外观相似,增强了网站的整体感,使浏览者对网站的印象更加深刻。3.4.网页色彩和文字字体规划1、网站的色彩网页的色彩是树立网站形象的关键之一。色彩在网站设计中的作用是相当大的,它是艺术表现的要素之一。色彩搭配看似简单,但实际上是网页设计中很难处理的问题之一。在网页设计中应根据色彩对人们心理的影响,合理地加以运用。按照色彩的记忆性原则,一般暖色较冷色记忆性强。色彩还能使人产生联想,象征某些事物。 网页色彩搭配的原理如下所示。 鲜明性:网页的色彩要鲜艳,容易引人注目。 独特性:要有与众不同的色彩,使得用户对网站的印象强烈。 合适性:色彩和网站要表达的内容气氛相适应。 联想性:不同的色彩会产生不同的联想,如蓝天想到天空,黑色想到黑夜,红色想到喜事等,选择色彩要和网页的内涵相关联。一般来说,一个网站的标准色彩不要超过3种,太多了容易让人眼花缭乱。标准色彩常用于网站的标志、标题、主菜单和主色块,给人以整体统一的感觉。至于其他色彩只能是作为点缀和衬托,绝不能喧宾夺主。本网上数码商店网站采用了深蓝色与灰色为网站的主色,使得整个页面看上去整洁、清新。2、网站的标准字体 字体和标准色彩一样,标准字体是指用于标志、标题和主菜单的特有字体。一般网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格,用户可以根据需要选择一些特别的字体。4. 电子商务网站的实现过程在做好网站的规划,确定网页的主题和网页的布局后,接着就开始制作网页了。Dreamweaver是一个可视化的编程工具,它支持多种浏览器,可建立跨平台的网页,同时它还提供了友好的界面和功能强大的快捷工具,不需编写任何代码就可以制作出动态网页,所以,我选择Dreamweaver作为制作网上数码商店网页的工具。4.1.本地站点的规划和创建 站点是我们规划、组织网页的地方,作为一个网页制作过程,站点的建立是非常重要的。站点(site)一词既可以指internet上的一个网站,也可以指在本地硬盘上的一个网站,并且更多的时候是指后者。所谓本地站点,就是指本地硬盘中存放远程网站所有文档的地方,实际上是一个文件夹,里面包含了站点的所有页面、图像、声音、动画等。在Dreamweaver中,通过对站点的设置,我们可以方便地实现对网页的统一管理和在服务器上的远程文件的管理以及文件的传输。在Dreamwear中,网页文件是通过创建本地站点来管理的。我们开发过程中都是在本地站点进行的。在开始建设网上商店的网页前,我在本地硬盘上新建一个名为sites的目录,在这个目录下面建立一个images目录放置相关的图片和web目录放置制作的页面。接着用Dreamweaver建立一个本地站点:令菜单栏中的SiteNew Site,就会弹出一个定义站点的对话框,接下来利用建站向导或增强方式建站都可以。我将该网站的站点名称取为“数码在线”。为了组织和管理站点系统中的文件,Dreamweaver在本地系统上重新创建了远程的网站机构。这样在本地站点上创建的链接和远程站点上同样有效,因为两个站点的结构式一样的。Dreamweaver除了包含构建站点的功能外,还可以在文档内或文档之间导航,将文件传输到远程服务器等。4.2.首页的制作一个站点的首页是一个站点最重要的部分之一。当然,通常要求这样的页面越漂亮越好,但是考虑到网络的速度等各方面的问题,页面文件体积也要尽可能的小。于是这里有了一个矛盾,即要求页面精美,有要求内容丰富,还要体积小。在这种情况下,通常有两中处理方法,一种是制作一个没有什么内容,但是特别漂亮的页面。通过链接打开具有真正内容的首页;另一个方法是在首页中尽可能地少用图片,而用表格、层等其他元素制作图片等效果。在这里我选用的是后一种方法。在制作网站前,我对网上数码商店销售系统页面大体结构做了分析:网上数码商店首页特价商品商品专题联系我们信息反馈在线留言 新品上架 精品推荐掌上电脑U盘/MP3数码摄像机数码相机类电脑配件产品分类这个结构分析,对于我做首页的页面布局和设计有很大的帮助。使我对首页应完成的功能有了很清楚的划分。所以在我制作的首页中包含的内容有:精品推荐、新品上架、特价商品、商品专题、信息反馈、联系我们、帮助中心。一个好的网站除了风格与功能以外,还离不开网站形象设计(包括网站标志和广告条等)。网站标志是表明特征的符号,主要由企业品牌的标准名称、标准图形(字体图形和形象图形)、标准色彩,按照标准规范地组合构成。作为独特的传媒符号,标志一直是传播特殊信息的视觉文化语言;具有传媒特性的标志,为了在最有效的空间内实现所有的视觉识别功能,一般是通过特示图案及特示文字的组合。有关网站标志的设计原则应遵循以下几个方面:l 使用通用的设计语言;l 注意设计的素材选择;l 注意适应的主要对象;l 注意徽标形态的美感;l 有内涵的外观和色彩;l 内涵丰富非元素叠加;l 重视加强徽标的原创性;l 配合徽标应用而设计;l 徽标的精细与标准化;我的数码商店的标志叫做“数码在线”,它是我用图像处理软件FireworksMX2004制作的一个静态的gif的图像,网站标志的制作过程如下:(1)首先在编辑区域中画出3个矩形,然后对其进行变形处理,把它的形状调整为菱形,再对其中的两个菱形进行旋转,使之成立体结构。如图(4-1);(2)接着用钢笔工具给里面的3个菱形添加一个外框,使标志更加突出,更加符合高科技的类型。现在可以给标志配色了,一般来说,网站的标准色彩不能超过3种颜色,太多则让人眼花缭乱。为了使标志的颜色与整个网站的色彩相符合,我取用了灰色,白色和深蓝色这3种颜色。(3)做完以上的2个步骤,网站标志基本上已经完成了,剩下的就是导出优化了,因为这个网站的标志的色彩只有3种颜色,所以用GIF格式正好符合标准。最终效果如图(4-2)。 图4-1 图4-2网页的布局和所需的素材都准备好后,开始动手建立首页了。我把网页的主体色调定为深蓝色,用深浅的蓝色和灰色背景相结合布置页面,使页面显得整洁、清新、井井有条。我所采用网页结构是分栏型,这样布局的页面会显得大气、信息丰富。在首页的最上方,是我的网站的标志数码在线,接下来是导航链接。主体部分分为左中右三个区域,左边分为四个版块,分别是产品分类,登录界面,新品展示和特价排行榜;中间分为2个部分,一个是网站的横幅,还有一个就是精品推荐,用的是两幅背景图片。右面分为2个部分,上面是最新公告,下面是产品总的销售排行榜,使浏览者获得最新的产品动态。在页面的最下方是版权等信息。首页如下图(4-3):图4-3在Dreamweaver中,表格是用于在网页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成,其中每一行又由一个或多个单元格组成。可以说表格是Dreamweaver页面排版的核心。页面一般由嵌套表格的技术实现。嵌套表格是一个表格的单元格中的另一个表格。可以像对其他任何表格一样对嵌套表格进行格式设置。但是其宽度受所在单元格的宽度的限制。引入嵌套表格,由总表格负责整体的排版,由嵌套的表格负责各个子栏目的排版,并插入到总表格的相应位置中。这样一来可以各司其职,互不冲突。在制作数码在线首页时,我利用了表格中嵌套表格来实现,具体的制作过程如下: (1)打开Dreamweaver,新建一个页面,页面背景为白色。点击对象面板中的Table按钮,在页面中加入一个宽度为780象素的一行三列的表格。把它的水平对齐方式设置为“居中对齐”。在第1个单元格中插入一个2行2列的嵌套表格1,再将光标定位在嵌套表格1的第1行第一个单元格,水平对齐方式设为“左对齐”,垂直对齐方式设为顶端。再点击对象面板中Image按钮,插入网站的标志数码在线。在第2行第二个单元格中将水平对齐方式设为“右对齐”,垂直对齐方式设为“底部” 然后在里面添加“设为首页 / 加入收藏 / 联系我们”的链接。(2)将光标定位在所在嵌套表格1的下一行,设置水平对齐方式为“居中对齐”垂直对齐方式为“顶端”,在里面输入要导航的文字,将其距离调整到适当的位置,它们将会链接到相应的页面。而背景和文字这一块是在CSS中控制的,在这里我就大致的介绍一下CSS。CSS是Cascading Style Sheet(层叠样式表)的简称,是一系列的格式规则,它们控制网页内容的外观。使用CSS样式可以非常灵活并更好地控制确切的网页外观,它不但可以定义文字,还可以定义表格、层以及其他元素。早期创建CSS需要有专门的知识,需要直接编写样式表文件,如今在Dreamweaver中使得这项工作可以在一个统一的界面中进行,通过简单的操作即可完成创建、修改、添加等样式表功能,这些设置可以影响到任何事物,从普通的文本布局到复杂的多媒体文件控制。在此控制文字和背景的相关代码如下:.dh font: bold 14px 华文中宋; /*设置字体的粗细、大小以及类型*/color: #FFFFFF; /*设置字体的颜色*/text-decoration: none; /*设置字体的修饰*/background-attachment: fixed; /*设置背景为固定*/background-image: url(images/dh_bg.jpg); /*设置背景的路径*/background-repeat: repeat-x; /*设置背景的重复方式*/background-position: left top; /*设置背景的位置*/效果图如图(4-4):图4-4(3) 接下来将制作首页的中间部分。在最开始一行三列的表格中,在第二个单元个插入一个一行两列的嵌套表格2,再选中第一个单元格,在里面插入一个八行一列的嵌套表格3,对齐方式都为“左对齐”和“顶端”。这里主要是用来放置首页中左边的四个版块。然后在CSS中控制单元格的背景与文字的格式,接着再在各个单元格中输入相关的信息。这样左边的版块就完成了。效果图如图(4-5)。完成上面的步骤后,把光标定在嵌套表格2第2个单元格内,在里面插入一个2行2列的嵌套表格4,把第1行中的2个单元格合并为一个单元格,用它来放置首页中的横幅图片。接着再到嵌套表格4的第2行的第1个单元格中插入一个3行1列的嵌套表格5,嵌套表格5是用来放置精品推荐这一栏的,再在里面的每个单元格中输入相应的内容。再接着把光标定在嵌套表格4的第2行的第2个单元格中,在里面插入一个4行1列的嵌套表格6,该表格是用来放置首页中最右边的2个版块。在嵌套表格6中的各个单元格输入相关信息,到此首页的中间部分的制作已经全部完成。效果图如图(4-6) 图4-5 图4-6(4)最后在底部输入版权相关信息。这样,数码在线的首页制作就大体完成了。在首页中还有很多的链接页面,制作过程和首页相似。为了整个网站的风格一致,我在其他页面的制作时把相同的部分直接包含近来了,这样一来可以方便统一管理,二来可以提高制作的效率。其他的分页面如下图(4-7,4-8):图4-7 特价商品页面 图4-8 商品详细信息页面4.3.留言板的制作1、留言板的机制和制作前的准备该网站中的留言板包括3个功能模块:l 客户模块:该模块任何人都可以进入,包括观看留言的页面和输入留言的页面。l 管理模块:该模块是为管理员设计的,包括管理首页面、回复页面和删除页面。l 权限模块:该模块是为了限制非管理员进入管理页面而设计的。一个留言板一般都会分为书写留言、存储留言、显示留言和管理留言这4个部分。用户看到的是显示留言的部分,之后才能选择是书写留言还是对留言进行管理,一般的用户可以随意地书写留言。而对管理者来说,就需要存在密码登陆机制,以保证留言板的安全性。管理模块允许管理员进行留言的删除和站长回复。由于留言板是个动态页面,所以首先要将静态站点转换成动态站点。转换的方法是:在站点定义的【高级】选项卡中做一些必要的改动。具体来说就是打开【站点定义】对话框,并切换到【高级】选项卡。(1) 从【服务器模型】下拉列表中选择“ASP VBScript”。(2) 从【访问】下拉列表中选择“本地/网络”。(3) 在【测试服务器文件夹】输入框中填写站点所在的文件夹。(4) 在【URL前缀】输入框中采用默认设置,然后单击“确认”按钮。2、数据库的创建留言板所存储的信息都是要保存在数据库中的,所以在制作这个留言板的过程中要用到数据库。在这里我选择简单易学的Access 2000数据库管理软件来创建数据库。打开Office工具中的Access 2000,然后创建名为“gstbook.mdb”的数据库,并把数据库文件保存在站点目录下,接下来就可以在数据库中创建数据表了。数据表guestbook用于保存访客的信息和站长的回复信息,在留言板里一般都会有显示留言的时间,为了方便简洁就把时间放在标题里,这就需要在标题Title字段属性的【默认值】中写入VBA的内置函数“Now ()”。这样,当用户添加一条记录时就会显示其添加记录的时间。还需建立一个数据表Admin,此表示用来实现对留言的维护和删除(存放用户名和密码)的。创建好数据库以后即可在ODBC中添加系统数据源,创建系统DSN的操作步骤如下:在【控制面板】中找到【数据源ODBC】图标,双击该图标打开【ODBC数据源管理器】对话框 。在该对话框中切换到【系统DSN】选项卡,然后单击“添加”按钮,在弹出的对话框中选择【Microsoft Access Driver(*.mdb)】选项,单击“完成”按钮。在弹出的对话框中,在【数据源名】输入“gstbook”,然后单击“选择”按钮,从弹出的对话框中选择新创建的数据库“gstbook.mdb”。最后单击“确定”,这时在【ODBC数据源管理器】里就可以看到刚创建的系统数据源。3、显示留言 留言板的首页是用来显示留言的,并且能链接到管理和书写留言的界面。在内容主体制作之前,先来预览一下实例中内容主体的最终效果。下面介绍其制作步骤:(1)首先按图所示设计好表格,然后在Dreamweaver 中连接数据库,在【应用程序】面板中选择【数据库】选项卡。(2)在【数据库】面板中单击添加按钮“+”,从弹出式菜单中选择【数据源名称(DSN)】选项,在弹出的对话框的【连接名称】输入框中“conngstbook”,在【数据源名称】下拉列表中选择“gstbook”,单击“确定”按钮完成数据库的连接。(3)回到【应用程序】面板中切换到【绑定】选项卡,然后单击按钮“+”,从弹出式菜单中选择【记录集(查询)】。(4)在弹出的对话框中,从【连接】下拉列表中选择“conngstbook”。从【表格】下拉列表中选择“guestbook”。单击“确定”按钮完成对记录集的设置。(5)接下来把表格和记录集绑定。只需在【绑定】面板中把记录集中的字段项拖曳到表格中相应的单元格就可以了。4、留言首先,客户端的验证需要在书写留言的页面内做。在页面“guestbook.asp”中选中表单,再选择【设计】面板中的【行为】选项卡,单击添加按钮“+”,从弹出式菜单中选择【检查表单】菜单项。实例中要求用户填写留言的标题和合法的E-Mail地址,所以在弹出的“检查表单”对话框中,从【命名的栏位】列表中选择【文本“txtName”在表单“frmGstBook”(R)】选项,在【值】域选中【必需的】复选框,从【命名的栏位】列表中选择【文本“txtEmail”在表单“frmGstBook”】选项,然后在【可接受】域中选中【电子邮件地址】单选按钮,这样客户端验证就设置好了。然后就是要将用户填写的记录添加到数据库中,这就需要向页面中添加一个【插入记录】的【服务器行为】。在【应用程序】面板中选中【服务器行为】选项卡,单击添加按钮“+”,从弹出式菜单中选择【插入记录】菜单选项,在弹出的对话框中完成以下设置:从【连接】下拉列表中选择“conngstbook”;从【插入到表格】下拉列表中选择“guestbook”;在【插入后,转到】输入框中输入“index.asp”;从【获取值自】下拉列表中选择“frmGstBook”;在【表单元素】列表中先选择【txtName插入到列“name”】项,然后从【列】下拉列表中选择【name,这样就建立了表单元素txtName和字段列Name之间的对应关系,继续建立其他表单元素和字段列的对应关系。5、管理留言管理页面是“admin.asp”是管理员或站长能够进入的页面。管理留言的页面看起来和主页很相似,只是在每条留言的后面增加了回复和删除两个链接。最终效果如图所示。在如图所示的页面里,对“回复”进行链接设置。先选中文本“回复”,然后在【应用程序】面板中选择【服务器行为】选项卡。单击添加按钮“+”,从弹出式菜单中选择【转到详细信息页】菜单项,对弹出的对话框进行设置。用同样的方法设置“删除”链接。(1)删除页面 在站点中设置del.asp作为删除页面。该页面根据admin.asp传过来的id值,利用【命令】来执行删除操作,该页面不需要制作前台界面。单击【服务器行为】面板中添加按钮“+”,从弹出式菜单中选择【命令】菜单项,对弹出的对话框进行设置。然后再【代码】视图的标签的上面添加如下代码。%if(commdel_strid”)thenset Commdel=Server.CreateObject(“ADODB.Command”)Commdel.ActiveConnection=MM_conngstbook_STRINGCommdel.CommandText=”DELETE FROM guestbook WHERE id=”+Replace(Commdel_strid,”,”)+”Commdel.CommandType=1Commdel.CommandTimeout=0Commdel.Prepared=trueCommdel.Execute()end if执行删除操作后,转到其他页面response.Redirect(“admin.asp”)%这样删除页面就做好了。(2)回复页面在站点中设置reply.asp作为站长回复用户留言的页面。该页面的功能是:根据admin.asp传过来的id值来取得记录,然后以取得的记录替换数据库中相应id值的记录。所以本页面需要添加一个【更新记录】的服务器行为。具体设置过程与删除页面类似,这里就不再赘述。另外,对于一般的用户来说是不用登陆的,因为他们只有浏览留言的权利。而对于站长来说,当进入管理页面进行维护、删除和修改时,就要有一个登陆机制来保证这些页面是不能被其他用户进入的。限制用户登录采用的方法是:先在数据库中存储管理员的用户名和密码,当访问者要访问这些限制访问的页面时,要求访问者输入用户名和密码,然后把用户输入的数据与数据库中的记录核对,向符合则允许进入,否则不允许登陆该限制页面。其设置过程在这里就不详述了。至此,一个留言板的制作过程就已经完成了。5. 电子商务网站的后期工作网站设计完了,并不意味着工程就结束了。接下来还有测试、域名的申请、上传、宣传与维护等大量的后期工作。5.1.网站测试网站在发布前要进行细致周密的测试,以保证浏览者能正常地浏览和使用。例如检测浏览器的兼容性、文档与站点的链接等,以保证上传到服务器上后,不会出现链接断开、浏览器不支持等这样那样的问题。测试主要分为兼容性测试、链接测试和实地测试。兼容性测试是指浏览器的兼容性问题,一些在IE浏览器下非常漂亮的网页有可能在其他的浏览器变得一团糟,这是就可以用IE和Netscape Navigator这两个目前使用较广的浏览器对网站进行测试。链接测试是指为了避免网页文件之间一些链接出错,需要对各个链接进行检查。Dreamweaver不但能快速地测试出网页中的错误、损坏的内链接,外部链接和单独文件,还能帮助用户对错误的链接做出快速轻松的修改。在【站点】面板中的【本地视图】中,右键单击里面的任意文件或文件夹,从弹出式菜单中选择【检查链接】【整个当前站点】,即可对整个网站链接进行测试。实地测试是指把网页上传到服务器上,测试链接与下载速度等问题。同一主页在不同速率的网卡或者Modem下的下载速度是不同的,可选择不同速率的网卡或者Modem对主页进行测试。5.2.域名申请 域名也称“网上商标”,是一种宝贵的无形资产。任何单位只有注册了域名才能拥有自己的网络地址,才能在互联网上发布信息。要想把设计好的站点放到Internet上供人浏览,先应该申请域名,并且向ISP申请主页空间,也就是存放网页的地址。如或者是等域名,其中以.cn结尾的域名为国内域名,而以.com结尾的为国际域名。对于个人网站,同样可以像企业一样去申请国际域名,这样可以得到更好的服务。在互联网上也有很多商业网站提供免费的个人主页空间和免费的域名,但大多数免费空间不支持ASP、PHP和CGI等功能,而且免费空间的容量有限,性能不稳定,有时还会在别人访问你的个人网站时弹出广告窗口,严重影响个人网站的访问量。同时,免费空间的域名一般为二级域名,并非顶级域名,所以在设置网址的时候更要取一个简短易记的名字。5.3.信息发布为了将企业的网站发布到Internet上,企业可以建立自己的机房,配置专业人员、服务器、路由器和网站管理软件等资源,并且向电信部门申请专线、出口等,由此建立一个完全属于自己的并由自己管理的独立网站。这样需要比较多的投资及日常运营费用。事实上使用虚拟主机方案也是一个不错的选择。虚拟主机方案是租用ISP的Web服务器的磁盘空间,将自己的网站放在ISP的Web服务器上。对一般的网站来说是最经济的方案。虚拟主机与真实主机在运作上没有任何区别,对于访问者来说也没有任何区别,虚拟主机完全可以具有独立网站的所有功能,而资金投入又可以大大减少。除此之外,还有服务器托管方案和DNN专线接入方案 。5.4.上传网站站点设计完成后,就可以向Internet服务器上发布站点了,使之成为一个真正的网站,以供访问者浏览。目前大多数ISP都支持FTP上传功能,因此可通过Dreamveaver MX内置FTP功能向服务器上传本地站点。设置过程如下:选择菜单“窗口文件”菜单项,则在界面右侧出现“文件”资源面板;单击站点选择下拉列表中选择“管理站点”选项;在打开的“管理站点”对话框中选中要上传的站点名称,然后单击编辑按钮;在打开的“站点定义”对话框中选择“高级” 选项卡,并在“分类”栏中选中“远程信息”选项,在右边的“远程信息” 栏中单击“访问”下拉列表,并选择“FTP”选项,这时就打开了对FTP服务器设置各种参数的窗口。在【FTP主机】名称文本框中输入FTP主机的名称;在【主机目录】文本框中,输入远程主机上用以存储本站点的目录;在【登陆】和【密码】文本框中输入用于连接到FTP服务器的登陆名和密码;单击“测试”按钮测试登陆名和密码;默认情况下,Dreamveaver MX保存密码。如果希望每次连接到远程服务器时Dreamveaver MX都提示输入密码,应取消选择【保存】复选框;如果防火墙配置要求使用被动式FTP,应选择【使用被动FTP】复选框;单击“确认” 按钮完成设置。这样设置后就可以很方便的将网站发布到网上。5.5.网站宣传和维护要想要网站有更多的访问者,除了主页要做得精彩、有内容外,还应积极推广,才能提高知名度。它的方法有很多:注册各个搜索引擎 在各个搜索引擎登录自己的站点,让别人可以搜索到你的网站,这是最基本的方法。互换广告 广告交换是宣传网站的一种较为有效的方法。在网页中会常常见到一些标题广告,即通常所说的“Banner Advertising”,大小通常为46860像素或12060像素,一般都是静态的gif动画或Flash图形。当访问者被广告标题所吸引并点击时,即被链接到广告发布者的网站,所以广告Banner做得越生动被点击的几率就越高。其他方法 去一些BBS站点,在各个论坛及BBS上发布自己网站的消息也是网站推广的好办法。友情链接登录也是一种很好的方法,让自己的网友去宣传也可以提高名气。网站制作好后,还要经过精心的后期维护。Dreamweaver提供了一些工具可以尽早检查出各种错误,如检测站点范围内的链接可以自动查找到空链接、错误的外部链接、无用的孤立文件;改变链接可以很方便的修改大量的链接;目标浏览器检查可以选择不同的浏览器来预览网页,若有错误就会生成报告让你参考。同时,也可以用站点资源管理来整理网站。经过这样的维护,站点就会干净许多,文件就会变得更加规范,组织更有条理。6. 总结 通过网上数码商店的制作使我认识到:要想制作一个好的网站,必须首先有一个合理的规划。只有确定了网站的目的、规模、对象,运行过程,才能在清楚而有条理的来制作网站,不会顾此失彼,分析使用流程是一个不错的方法。其次,制作一个网站必须一切从用户的角度出发考虑,使网站的操作方便、简单。另外,页面的布局也是很重要的。只有一个漂亮、有特点的页面才能吸引浏览者的停留。 经过这个毕业课题的训练,使我基本掌握了Dreamweaver的一些操作并认识到Dreamweaver在制作网页上的功能确实非常强大,要想完全掌握它就必须在长期的运用中慢慢积累。网站上的客户留言板是采用ASP技术制作的,通过对它的制作,我对AS

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论