电子商务PPT教学课件第四章 电子商务网站建设

第四章第四章 电子商务网站建设电子商务网站建设4.1 网页与网页与HTML最简单的网页编写：工具：“记事本”(Notepad)大家好！大家好！这是我们制做的第一个网页。点击超级链接进入新浪保存网页文件名：“index.htm”（*.htm，超文本文件），效果。代码查看第四章第四章 电子商务网站建设电子商务网站建设网页语言：HTML（ HyperText Markup Language，超文本标记语言）HTML组成： 标记(Tag)：“” 双边标记“/” 单边标记 文本第四章第四章 电子商务网站建设电子商务网站建设HTML基本结构： HTML文件开始 文件头部开始 文件头部内容（文档的相关信息，标题和关键字） 文件头部结束 文件体开始 文件头部内容（正文部分，所有出现在网页上的正文内容） 文件体结束 HTML文件结束第四章第四章 电子商务网站建设电子商务网站建设超媒体：超文本与多媒体（图片、动画、声音、视频）的融合，使用超文本获取结点存储的多媒体信息带图的网页编写：大家好！大家好！这是我们制做的第一个网页。点击超级链接进入新浪保存网页文件名：“img.htm” ，效果。代码查看(图片存放路径)第四章第四章 电子商务网站建设电子商务网站建设4.2 所见即所得所见即所得型网页制作工具型网页制作工具4.2.1 所见即所得型网页制作工具标记型网页制作工具：手工输入标记 优点：用户能很方便地控制代码，同时保证代码是最精简的 缺点：用户必须相当熟悉HTML，效率太低，容易发生错误“所见即所得”型网页制作工具：Htm文件在编辑过程中的显示与在浏览器中的显示是一样的。工作：“画页面”，由工具自动生成代码。 第四章第四章 电子商务网站建设电子商务网站建设主要工具：FrontPage和Dreamweaverindex_fp.htm（用FrontPage 2000），效果。代码查看比较：FrontPage：容易使用，与Word兼容性好，丰富的内置模板；不灵活Dreamweaver：强大的网页控制、设计能力，创意的完全发挥，快速、复杂、创意性强；入门难，高级功能学习难。众多独具特色的设计新概念，支持层叠式样表(CSS)和动态网页设计。第四章第四章 电子商务网站建设电子商务网站建设4.3 页面动态效果页面动态效果4.3.1 页面动态效果 实现页面元素的二维空间移动 DHTML(Dynamic HTML，动态HTML)，各种技术的综合，不同的浏览器实现的程度不一样 JavaScript VBScript Cascading Style Sheets(层叠样式表，CSS) Document Object Model(文件目标模块，DOM)第四章第四章 电子商务网站建设电子商务网站建设4.3.2 JavaScriptJavaScript，脚本语言（Scripting Language） 嵌入到HTML 文件中 由客户浏览器编译运行，在客户机上执行 实现交互式Web网页。“跑马灯”的动态效果：第四章第四章 电子商务网站建设电子商务网站建设var msg=大家好！这里是跑马灯的动态效果！; var interval = 300;seq = 0;function Scroll() len = msg.length; window.status = msg.substring(0, seq+1);seq+;if ( seq = len ) seq = 0 ;window.setTimeout(Scroll();, interval );大家好！跑马灯效果的制作！第四章第四章 电子商务网站建设电子商务网站建设JavaScript程序段。JavaScript程序段的调用：第四章第四章 电子商务网站建设电子商务网站建设4.3.3 VBScript VBScript和JavaScript的功能基本上是相同的，实现页面动态效果。 Microsoft公司为了对抗JavaScript而推出的第四章第四章 电子商务网站建设电子商务网站建设4.3.4 Cascading Style Sheets（CSS，层叠样式表）弥补HTML在页面排版和格式控制上面的不足，对网页中的文本内容进行精确的格式化控制，实现很多页面效果。CSS程序段。第四章第四章 电子商务网站建设电子商务网站建设使用例子：鼠标放到超级链接上的时候，超级链接会改变颜色大家好！a:link color: #0000FF;a:visited color: #0000FF;a:hover color: #FF0000;新浪搜狐第四章第四章 电子商务网站建设电子商务网站建设4.3.5 Document Object Model (文档对象模型，DOM)DTHML对象模型：每个HTML标记作为对象，具有单独的属性、方法和事件，可以通过它的ID和Name属性被操纵（访问或更新），操纵由事件触发，通过对象的方法完成。DOM：改进的DTHML对象模型，脱离手册操作对象；将整个文档描绘为一个树形（ Tree ）结构，树的每个节点表现为一个HTML标记或者HTML标记内的文本项。需要操作时： 查看HTML源代码，推算出Tree结构模型 按照页面的层次结构关系直接操作的对象的属性第四章第四章 电子商务网站建设电子商务网站建设4.4 网网 站站 的的 发发 布布4.4.1 WWW（ World Wide Web ）技术基于Internet的，提供/获取各种格式信息的技术Web： 客户机/服务器(C/S，Client/Server)模型 HTML语言（ HyperText Markup Language，超文本标记语言），组织构建网络页面的各种超文本对象 HTTP协议（ HyperText Transfer Protocol ，超文本传输协议），请求、传送、更新各种超文本对象，包括页面及页面内的对象 提供面向各种Internet服务的用户界面第四章第四章 电子商务网站建设电子商务网站建设1. Web的体系结构： C/S（ B/S）交互的实现 浏览器：客户(Client)端软件，发出请求 服务器：为客户提供服务是的软、硬件系统，响应请求 C/S的联系基于HTTP协议Internet服务，包括静态HTML页面、E-mail服务、FTP服务、Telnet服务、新闻组(Newsgroup)服务等WWW：在统一的用户界面内获取各种Internet服务客户端Web浏览器服务器端Web服务器发出HTTP请求返回HTML文档第四章第四章 电子商务网站建设电子商务网站建设2. Web浏览器的功能向Web服务器发出服务请求接收Web服务器送回的请求响应，解释并以Web页面的形式显示出来具体功能：1) 检索查询，获得信息2) 通过链接获取文件3) 热表管理（历史记录）4) 离线浏览把已获取数据存放在磁盘缓存中，并建立相应的文档索引。检索时，浏览器首先检索磁盘缓存，如果有则直接读取、显示。位置： Documents and SettingsUser_NameLocal SettingsTemporary Internet Files5)获取其他Internet服务的统一平台（FTP、E-mail、Telnet、UseNet等）B/S体系结构：基于Browser强大的解释功能、系统应用接口、控件加载和专用插件等，集成多种Client的功能，提供多样化的Internet服务基于中心数据库和工作流的Lotus Notes / 基于分布式处理的Google Apps流媒体播放第四章第四章 电子商务网站建设电子商务网站建设3. Web服务器的功能响应用户请求，发送数据，与用户进行交互具体功能：1) 静态信息发布2) 动态信息发布，根据用户要求，结合服务器数据库和实时处理程序，生成动态生成页面第四章第四章 电子商务网站建设电子商务网站建设4.4.2发布站点主页空间： 自己安装服务器(安装Web服务器软件) 向专门的ISP申请主页空间后进行主页上传自己安装服务器简单举例： 操作系统：Windows2000 Server 服务器软件：个人Web服务器（PWS，Personal Web Server) 系统服务管理新建站点 设置地址、路径 选择首页启动服务 如果要让外部的用户访问，还需要 向电信公司申请IP地址和专线接入，或者将服务器放入电信公司的机房(称为服务器托管)， 申请域名第四章第四章 电子商务网站建设电子商务网站建设4.4.3虚拟主机自营主机 自己拥有并维护服务器 优点：完全的控制权、随时接近硬件和完全的灵活性 缺点：维护人员、昂贵的设备和接入线路虚拟主机 (Virtual Host/Virtual Server) ISP把一台服务器分成若干台“虚拟”的主机，使多个用户可以共用一台服务器，且每一台“虚拟主机”都具有独立的域名或IP地址，互相之间完全独立 优点：降低建站成本和维护费用 缺点：性能上不如专有的服务器第四章第四章 电子商务网站建设电子商务网站建设4.5 数据库与动态网页设计数据库与动态网页设计4.5.1 动态网页 静态页面：任何人访问该页面，看到的都是同样的结果。传统媒体的电子化 动态页面：根据用户的需求，服务器动态生成页面的代码，然后提供给用户；实现交互功能，用户可以获取和处理服务器上的资源和数据。第四章第四章 电子商务网站建设电子商务网站建设4.5.2 数据库 动态网页的核心技术 向WWW服务器提供数据资源，再由服务器传递给用户 帮助系统管理员方便地维护和更新数据（新闻页面的制作）数据库的基本概念表(Table)：根据数据的类型和特征来存储数据的空间 数据库管理软件(DBMS，Database Management System)： 创建和维护数据库 向用户提供查询功能 生成用户所需界面(如报表、视图等) SQL（Structured Query Language，结构化查询语言）：关系型数据库管理系统的标准操作语言第四章第四章 电子商务网站建设电子商务网站建设4.5.3 CGICGI(Common Gateway Interface，公共网关接口) 后台数据库与前台服务器的“连接”技术 服务器与外部扩展程序交互的一个标准接口客户端Web浏览器服务器端Web服务器中间件（如CGI、API等）超文本内容数据库应用软件发出HTTP请求返回HTML文档第四章第四章 电子商务网站建设电子商务网站建设一个好的比喻： 顾客=网络用户 商场柜台=浏览器，顾客在柜台选购 售货员=WWW服务器，获取顾客需求，转达给取货人 仓库取货人=CGI等中间件 仓库=数据库 货物=信息数据，存在仓库里CGI的其他应用：网页计数器、留言版、搜索引擎、实时交易等第四章第四章 电子商务网站建设电子商务网站建设4.5.4使用脚本语言编写服务器端的应用程序的技术1. ASP (Active Server Pages，动态服务器页) 使用脚本语言VBScript或JavaScript 工作原理：收到浏览请求时，服务器将ASP的程序码解释为标准HTML格式的网页，再送到浏览者的浏览器上显示出来 优点：灵活性、代码的安全性；简单、直观、易学 缺点：使用局限于Microsoft的操作系统，跨平台性差2. JSP (Java Server Pages) 使用JavaScript作为其脚本语言 工作实质：在客户端，将.jsp转化成Servlet，运行Servlet得到静态网页的数据输出和Servlet服务 先进、安全和跨平台第四章第四章 电子商务网站建设电子商务网站建设3. ASP与JSP的比较(1) 编程使用的脚本语言(2) 跨平台性 (3) 语言引擎 ASP：VBScript代码被ASP引擎解释执行 JSP： JavaScript代码被编译成Servlet并由Java虚拟机执行第四章第四章 电子商务网站建设电子商务网站建设4.5.5 PHP （HyperText Preprocessor，超文本预处理器） 跨平台 运行效率高 支持目前绝大多数数据库 完全免费第四章第四章 电子商务网站建设电子商务网站建设4.5.5 全开源建站体系LAMPLinux+Apache+Mysql+PHP，一组常用来搭建动态网站或者服务器的开源软件，本身都是各自独立的程序，但是因为常被放在一起使用，拥有了越来越高的兼容度，共同组成了一个强大的Web应用程序平台。 Apache是最通用的网络服务器；mySQL是带有基于网络管理附加工具的关系数据库；PHP是流行的对象脚本语言，它包含了多数其它语言的优秀特征来使得它的网络开发更加有效。随着开源潮流的蓬勃发展，开放源代码的LAMP已经与J2EE和.Net商业软件形成三足鼎立之势，并且该软件开发的项目在软件方面的投资成本较低，因此受到整个IT界的关注。从网站的流量上来说，70%以上的访问流量是LAMP来提供的，LAMP是最强大的网站解决方案开发者在Windows操作系统下使用这些Linux环境里的工具称为使用WAMP。第四章第四章 电子商务网站建设电子商务网站建设4.5.5 基于MVC的应用开发模型在传统的基于Web的应用系统中，例如ASP，CGI等，通常开发者将业务逻辑，数据逻辑、展示逻辑等混杂在一起，在同一个界面面里既进行后台数据库的访问和操作，同时还包含业务流程和页面表示。这样编写出来的程序，既不利于程序员对业务代码的调试，同时也不利于编辑人员进行交互页面的设计。同时系统也不具备可扩展性，当要在现有业务上进行扩展的时候，通常无法借助于现有的资源和应用，而只能够重新编写，大大增加了投资，延长了系统上线的时间。采用通行的MVC模式来构建Web应用系统，可解决前面所述的问题。MVC英文即Model-View-Controller，即把一个应用的输入、处理、输出流程按照Model、View、Controller的方式进行分离，这样一个应用被分成三个层模型层、视图层、控制层。第四章第四章 电子商务网站建设电子商务网站建设4.5.5 基于MVC的应用开发模型第四章第四章 电子商务网站建设电子商务网站建设4.5.5 基于MVC的应用开发模型视图(View)代表用户交互界面，对于Web应用来说，可以概括为HTML界面，但有可能为XHTML、XML和Applet。随着应用的复杂性和规模性，界面的处理也变得具有挑战性。一个应用可能有很多不同的视图，MVC设计模式对于视图的处理仅限于视图上数据的采集和处理，以及用户的请求，而不包括在视图上的业务流程的处理。业务流程的处理交予模型(Model)处理。比如一个订单的视图只接受来自模型的数据并显示给用户，以及将用户界面的输入数据和请求传递给控制和模型。第四章第四章 电子商务网站建设电子商务网站建设4.5.5 基于MVC的应用开发模型模型(Model)：就是业务流程/状态的处理以及业务规则的制定。业务流程的处理过程对其它层来说是黑箱操作，模型接受视图请求的数据，并返回最终的处理结果。业务模型的设计可以说是MVC最主要的核心。对一个开发者来说，可以专注于业务模型的设计。MVC并没有提供模型的设计方法，而只告诉你应该组织管理这些模型，以便于模型的重构和提高重用性。业务模型还有一个很重要的模型那就是数据模型。数据模型主要指实体对象的数据 保存（持续化）。比如将一张订单保存到数据库，从数据库获取订单。我们可以将这个模型单独列出，所有有关数据库的操作只限制在该模型中。 第四章第四章 电子商务网站建设电子商务网站建设4.5.5 基于MVC的应用开发模型控制(Controller)可以理解为从用户接收请求, 将模型与视图匹配在一起，共同完成用户的请求。划分控制层的作用也很明显，它清楚地告诉你，它就是一个分发器，选择什么样的模型，选择什么样的视图，可以完成什么样的用户请求。控制层并不做任何的数据处理。例如，用户点击一个连接，控制层接受请求后, 并不处理业务信息，它只把用户的信息传递给模型，告诉模型做什么，选择符合要求的视图返回给用户。因此，一个模型可能对应多个视图，一个视图可能对应多个模型。 模型、视图与控制器的分离，使得一个模型可以具有多个显示视图。如果用户通过某个视图的控制器改变了模型的数据，所有其它依赖于这些数据的视图都应反映到这些变化。因此，无论何时发生了何种数据变化，控制器都会将变化通知所有的视图，导致显示的更新。这实际上是一种模型的变化-传播机制。第四章第四章 电子商务网站建设电子商务网站建设4.5.5 基于MVC的应用开发模型第四章第四章 电子商务网站建设电子商务网站建设4.6电子商务站点需求电子商务站点需求电子商务网站的Web页设计的几个基本功能：商品目录显示功能需要建立商品目录数据库，并提供导航工具或搜索引擎搜索引擎网络蜘蛛、索引和实用程序（匹配页面的寻找和排序）购物车功能根据用户请求下定单识别用户并保存其选择的方法：1）生成并保存Cookie，用户数据保存在用户主机；2）根据顾客来源给顾客自动签发一个临时编号， 用户数据保存在服务器交易处理功能安全性及交易相关工作（计算折扣、销售税和送货费等）第四章第四章 电子商务网站建设电子商务网站建设4.7小小 结结本章主要介绍了电子商务网站建设的基本方法和流程。网站建设首先是网页的设计，网页文件是一种比较特殊的文本文件，称为超文本文件，扩展名为.htm或者.html。制作网页使用的语言为HTML。HTML的主要内容是HTML标记，学习HTML就是要掌握HTML标记的含义、属性和使用方法。我们可以使用标记型网页制作工具和所见即所得型网页制作工具来制作网页。由于标记型网页制作工具开发效率太低，所以现在一般选择所见即所得型网页制作工具作为开发工具。市面上流行的两种所见即所得型网页制作工具是FrontPage和Dreamweaver。第四章第四章 电子商务网站建设电子商务网站建设页面动态效果主要依靠DHTML来实现。DHTML并不指一种专门技术，而是通过各种技术的综合发展而得以实现的概念。DHTML涉及的技术包括JavaScript、VBScript、Cascading Style Sheets(层叠样式表，简称CSS)、Document Object Model(文件目标模块，简称DOM)等。网页上传时如果自建服务器，可以选择Windows NT/2000、UNIX/Linux等网络平台。自建服务器需要专线接入或服务器托管，所需费用较高，但性能更好。中小型网站可以使用虚拟主机，费用很低，并能达到较好的效果。第四章第四章 电子商务网站建设电子商务网站建设静态页面对电子商务网站建设来说还是不够的，我们还需要使用动态网页设计。动态网页设计是网站建设的较高阶段，需要制作人员具备较高的计算机水平。动态网页设计涉及数据库、CGI、ASP、JSP、PHP等技术。用户可以选择CGI、ASP、JSP、PHP中的一门技术来实现对服务器端的数据库操作。此外，作为电子商务网站来说，还必须具备商品目录显示功能、搜索引擎、购物车功能和交易处理功能，可通过前面介绍的各种技术实现。