《电子商务网站建设与管理》图文课件第七章.pptx
《《电子商务网站建设与管理》图文课件第七章.pptx》由会员分享,可在线阅读,更多相关《《电子商务网站建设与管理》图文课件第七章.pptx(95页珍藏版)》请在咨信网上搜索。
1、第七章电子商务网站开发实例第一节 总体功能结构设计一、网站主要功能模块网站的主要功能模块包括商品介绍和在线销售两部分。其中商品介绍功能模块又包括商品展示和商品搜索两个子模块,在线销售模块包括放入购物车、显示购物车、清空购物车和生成订单4个子模块。本示例购物网站的主要功能模块如图7-1所示。第一节 总体功能结构设计一、网站主要功能模块第一节 总体功能结构设计二、网站数据库设计为本示例网站创建一个mydb.mdb数据库,其中包含以下主要数据表:(1)商品(Products)表:包括商品编号、商品名称、市场价、优惠价和简短说明等信息。(2)购物车(Carts)表:为每一个购物的客户自动产生一个唯一的
2、购物车编号,并保存该客户的购物日期等信息。第一节 总体功能结构设计二、网站数据库设计(3)购物车明细(CartItems)表:保存每一辆购物车中所购商品的编号、名称、单价和数量等信息。(4)订单(Order)表:为确定购买的客户自动产生一个唯一的订单编号,并保存该客户的订购日期和订购总计金额,同时保存该客户的姓名、电子邮件地址、详细住址、邮政编码和联系电话等信息。第一节 总体功能结构设计二、网站数据库设计(5)订单明细(OrderItems)表:保存每一个订单中所订购的各项商品的编号、名称、单价和数量等信息。第一节 总体功能结构设计三、主要程序模块(一)主要页面程序模块及其工作流程网站功能主要
3、通过Search.asp、Products.asp、AddItem.asp、Cart.asp、Delete.asp、Recalc.asp 和Order.asp页面实现,其工作流程如图7-2所示。第一节 总体功能结构设计三、主要程序模块(一)主要页面程序模块及其工作流程第一节 总体功能结构设计三、主要程序模块(二)各主要页面程序模块实现的功能(1)Products.asp:商品展示页面,同时提供到其他各类商品展示网页的链接。客户单击某商品旁的“购买”链接,即可将该商品放入购物车。(2)Search.asp:商品搜索页面,用来处理在商品展示页面中客户提出的商品搜索请求,并将搜索的结果返回商品展示页
4、面中进行展示。第一节 总体功能结构设计三、主要程序模块(二)各主要页面程序模块实现的功能(3)AddItem.asp:添加商品页面,一旦客户单击所选商品旁的“购买”链接,本页面立即判断该客户是否已拥有购物车,若没有就为其分配一辆,再将所购之物存入对应购物车明细表,并调用购物车页面显示所购商品的具体信息。第一节 总体功能结构设计三、主要程序模块(二)各主要页面程序模块实现的功能(4)Cart.asp:购物车页面,显示客户已购各项商品的信息,包括商品名称、单价、数量、金额及所购商品的总价。允许客户修改所购商品的数量,并重新计算和显示金额和总价。该页面还提供“继续购物”、“清除购物车”和“去收银台”
5、链接。第一节 总体功能结构设计三、主要程序模块(二)各主要页面程序模块实现的功能(5)Recalc.asp:重新计算页面,响应客户的“重新计算”请求,根据修改后的商品数量重新计算金额和总价,并负责修改购物车明细表中的相关数据。(6)Delete.asp:清除购物车页面,响应客户提出的“清除购物车”请求,并负责删除该客户在购物车明细表中的相关数据。第一节 总体功能结构设计三、主要程序模块(二)各主要页面程序模块实现的功能(7)Order.asp:订单页面,响应客户的“去收银台”请求,为确定要购买商品的客户自动产生一个唯一的订单编号,然后要求客户如实填写姓名、送货地址、联系电话等信息,再将当前购物
6、日期、总计金额以及送货地址等信息保存到订单表中,并将购物车内所购商品的信息保存到订单细节表中。第二节 站 点 设 置本节的站点设置使用Dreamweaver CS4来完成。在建设电子商务网站时,首先要新建站点,搭建网站的开发环境,为后续的开发打好基础。新建站点的基本过程如下:(1)执行“站点”“新建站点”命令,打开新建站点向导对话框。(2)在“您打算为您的站点起什么名字?”文本框中输入网站的名称,这里将网站命名为“ch7”,如图73所示。第二节 站 点 设 置第二节 站 点 设 置(3)单击“下一步”按钮,弹出选择服务器技术对话框,由于本章网站使用ASP技术开发,因此选择“是,我想使用服务器技
7、术”单选按钮,然后在下方的下拉列表框中选择“ASP VBScript”选项,如图74所示。第二节 站 点 设 置第二节 站 点 设 置(4)单击“下一步”按钮,设置站点的编辑方式和文件的存储位置。因为是在本地计算机上进行网站编辑和测试,因此,选中“在本地进行编辑和测试(我的测试服务器是这台计算机)”单选按钮。“您将把文件存储在计算机上的什么位置?”文本框用来设置本地站点文件夹的地址,这里设置为“c:inetpubwwwrootch7”(IIS的默认根目录),如图75所示。第二节 站 点 设 置第二节 站 点 设 置(5)单击“下一步”按钮,打开设置浏览站点根目录URL的对话框,这里采用自动生成
8、的“http:/localhost/ch7/”,如图76所示。(6)单击“下一步”按钮,打开设置远程服务器对话框。选中“否”单选按钮,表示不再使用其他的Web服务器,如图77所示。第二节 站 点 设 置第二节 站 点 设 置第二节 站 点 设 置(7)单击“下一步”按钮,向导显示站点设置的概要,如图78所示。表示站点已经建立完成,单击“完成”按钮,完成设置。当站点创建完成后,就会更新站点中的文件,并且可以在“文件”面板内看到刚才建立的站点信息,如图79所示。现在可以直接在Dreamweaver中编辑网页并查看其运行效果了。第二节 站 点 设 置第二节 站 点 设 置第三节 商品展示功能设计一、
9、数据库设计在实现商品展示功能之前,应先设计数据库的表结构。课本165页表71为Products表的结构。第三节 商品展示功能设计二、包含文件设计包含文件是指可以被包含在其他页面中的文件。如果一个程序代码段会多次出现在一些页面中,不妨将其保存为扩展名为.inc的包含文件。当在某个页面中需要插入该代码段时,可用以下形式的语句将其包含进来:第三节 商品展示功能设计二、包含文件设计实际上,不仅扩展名为.inc的文件可以用上述的语句形式包含到当前页面中,扩展名为.htm或.asp的文件也都可以用此方式包含进来。使用包含文件不仅可以简化页面代码的编写,解决代码重用问题,更重要的是有利于减轻页面的维护工作。
10、如果某个包含文件所实现的功能需要修改,则仅需修改该包含文件即可,而不必逐个修改该文件所涉及的所有页面。第三节 商品展示功能设计二、包含文件设计在本示例网站中,使用了Head.inc、Foot.inc和Conn.asp三个包含文件。1.Head.inc2.Foot.inc3.Conn.asp第三节 商品展示功能设计三、商品搜索页面设计商品搜索功能的作用是方便用户对商品的检索。以下为利用Dreamweaver CS4制作商品搜索页面的过程。(1)在“文件”面板的ch7站点中新建search.asp文件。第三节 商品展示功能设计三、商品搜索页面设计(2)双击打开“文件”面板中的search.asp文
11、件,选择设计视图进行设计。单击属性面板中的“页面属性”按钮,在弹出的“页面属性”对话框中选择“标题/编码”选项,设置“标题”为“商品搜索”,设置“编码”(表示页面的编码方式)为“简体中文(GB2312)”,单击“确定”按钮。第三节 商品展示功能设计三、商品搜索页面设计(3)执行“插入”“表格”命令,在弹出的“表格”对话框中,设置表格行数、列数均为1,表格宽度为240像素。单击“确定”按钮,在网页中创建1行、1列,宽为240像素的表格。然后在属性面板中设置表格的对齐方式为“居中对齐”。第三节 商品展示功能设计三、商品搜索页面设计(4)将光标定位至单元格内,即选中标签,设置“水平”为“居中对齐”,
12、“高”为89像素,“背景颜色”为#FF9933。(5)执行“插入”“表单”“表单”命令,在表格内添加一个表单,设置表单的“动作”为Products.asp。第三节 商品展示功能设计三、商品搜索页面设计(6)在表示表单的红色虚线框内输入“商品搜索”(中间的空格可通过执行“插入”HTML“特殊字符”“不换行空格”命令实现)。选中“商品搜索”文字,单击属性面板中的HTML分类,单击其中的按钮对文字进行加粗(也可以执行“插入”HTML“文本对象”“粗体”命令来实现)。第三节 商品展示功能设计三、商品搜索页面设计(7)执行“插入”HTML“特殊字符”“换行符”命令,将光标定位至下一行,输入“关键字:”,
13、再执行“插入”“表单”“文本域”命令,在弹出的“输入标签辅助功能属性”对话框中单击“取消”按钮(“输入标签辅助功能属性”对话框主要用来设置CSS中的类和ID,第三节 商品展示功能设计三、商品搜索页面设计暂时不考虑使用此类CSS,故单击“取消”按钮,以下所有表单控件均采用此种方式处理,不再赘述),添加一个文本域。在属性面板中设置文本域名称为searchkey,字符宽度为14(即设置size为14)。第三节 商品展示功能设计三、商品搜索页面设计(8)执行“插入”HTML“特殊字符”“换行符”命令,将光标定位至下一行,连续执行两次“插入”“表单”“按钮”命令,插入两个按钮。将第二个按钮的“动作”设置
14、为“重设表单”,将该按钮设置为重置按钮。第三节 商品展示功能设计三、商品搜索页面设计然后分别修改这两个按钮的“值”为“搜索”和“清除”。在两个按钮之间重复执行3次“插入”HTML“特殊字符”“不换行空格”命令,在两个按钮之间添加3个空格。第三节 商品展示功能设计三、商品搜索页面设计(9)单击属性面板中的CSS标签,进入CSS属性设置界面。单击“编辑规则”按钮,在弹出的“新建CSS规则”对话框中设置“选择器类型”为“标签(重新定义HTML元素)”,“选择器名称”为td,“规则定义”为“(仅限该文档)”,第三节 商品展示功能设计三、商品搜索页面设计单击“确定”按钮,弹出“td的CSS规则定义”对话
15、框,在“分类”列表框中选择“类型”选项,设置Lineheight为200%,表示设置标签的内容的行间距为2倍行距。单击“确定”按钮完成设置。(10)按F12键,在浏览器中显示运行结果,如图736所示。第三节 商品展示功能设计三、商品搜索页面设计第三节 商品展示功能设计三、商品搜索页面设计单击“确定”按钮,弹出“td的CSS规则定义”对话框,在“分类”列表框中选择“类型”选项,设置Lineheight为200%,表示设置标签的内容的行间距为2倍行距。单击“确定”按钮完成设置。(10)按F12键,在浏览器中显示运行结果,如图736所示。第三节 商品展示功能设计四、商品展示页面设计商品展示页面用于显
16、示用户搜索的商品,在未输入搜索条件的情况下,将显示所有商品信息。在设计此项功能之前,需要将主页用到的图片统一放置在ch7/images目录下。需要注意的是,由于Dreamweaver功能的限制,涉及包含文件的网页将无法使用设计视图,因此,只有在设计完成网页的其他内容之后再通过代码视图添加需要包含的文件。第三节 商品展示功能设计四、商品展示页面设计以下为通过Dreamweaver CS4设计Products.asp页面的过程。(1)在“文件”面板的ch7站点中,新建Products.asp文件。(2)双击打开“文件”面板中的Products.asp文件,选择设计视图进行设计。第三节 商品展示功能
17、设计四、商品展示页面设计单击属性面板中的“页面属性”按钮,在弹出的“页面属性”对话框中,选择“标题/编码”选项,设置“标题”为“商品展示”,“编码”为“简体中文(GB2312)”,单击“确定”按钮。(3)执行“插入”“表格”命令,在弹出的“表格”对话框中设置表格“行数”为1,“列”为6,“表格宽度”为760像素。第三节 商品展示功能设计四、商品展示页面设计单击“确定”按钮,在网页中创建1行、6列,宽度为760像素的表格。然后在属性面板中设置表格的“对齐”为“居中对齐”。(4)将光标定位至表格的第一个单元格中,在属性面板中设置“宽”为260。将光标定位至第二个单元格中,按住鼠标左键拖动鼠标选中表
18、格中的后五个单元格,设置“宽”为100。第三节 商品展示功能设计四、商品展示页面设计(5)如果想将搜索功能放入表格的第一个单元格中,由于涉及包含文件操作,这里暂时跳过,等到完成页面其他功能之后再来处理。在表格的第二个单元格中执行“插入”“图像”命令,在弹出的“选择图像源文件”对话框中选择index_1.jpg文件,单击“确定”按钮,在弹出的“图像标签辅助功能属性”对话框中直接单击“取消”按钮,在表格中添加index_1.jpg图像。第三节 商品展示功能设计四、商品展示页面设计说明:系统中所用到的图片已进行处理,长和宽分别为100像素和140像素,这一尺寸与单元格大小吻合。如果在建立网站的过程中
19、要用到未处理的图片,即长和宽可能不固定,则需要在属性面板设置图片的长和宽,以使其与单元格尺寸匹配,但是,由于尺寸调整过程中并不能保证图片是等比例缩放的,因此就有可能使图片效果失真(图片看起来像被压扁了或被拉长了)。所以建议在使用图片的过程中最好对图片尺寸作统一处理。第三节 商品展示功能设计四、商品展示页面设计(6)使用步骤(5)中添加图片的方法,再在后4个单元格中分别添加index_2.jpg、index_3.jpg、index_4.jpg和index_5.jpg 4张图片。(7)执行“插入”“表格”命令,在弹出的对话框中设置“行数”为1行,“列”为3,“表格宽度”为760像素,单击“确定”按
20、钮。在属性面板中设置表格“对齐”为“居中对齐”。第三节 商品展示功能设计四、商品展示页面设计(8)选中这3个单元格,在属性面板中设置背景颜色为#EFFBFF。然后将光标定位至刚创建的表格的第一个单元格内,拖动鼠标选中表格中的前两个单元格,在属性面板中设置“宽”和“高”均为100,“水平”为“居中对齐”。将光标定位至刚创建的表格的第三个单元格内,在属性面板中设置“宽度”为560,“水平”为“左对齐”。第三节 商品展示功能设计四、商品展示页面设计(9)执行“插入”“数据对象”“记录集”命令,在弹出的“记录集”对话框中设置记录集“名称”为rs,“连接”为conn(即调用已创建好的conn连接对象),
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 电子商务网站建设与管理 电子商务 网站 建设 管理 图文 课件 第七
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【胜****】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【胜****】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。