《电子商务平台开发技术全套课件.ppt》由会员分享，可在线阅读，更多相关《电子商务平台开发技术全套课件.ppt（365页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、电子商务平台开发技术电子商务平台开发技术 第一章第一章 概述概述 电子商务是以信息网络技术为手段，以商品交换为中心的商务活动；也可理解为在互联网（Internet）、企业内部网（Intranet）和增值网（VAN，Value Added Network）上以电子交易方式进行交易活动和相关服务的活动，是传统商业活动各环节的电子化、网络化、信息化。电子商务平台即是一个为企业或个人提供网上交易洽谈的平台。企业电子商务平台是建立在Internet网上进行商务活动的虚拟网络空间和保障商务顺利运营的管理环境；是协调、整合信息流、货物流、资金流有序、关联、高效流动的重要场所。企业、商家可充分利用电子商务平台
2、提供的网络基础设施、支付平台、安全平台、管理平台等共享资源有效地、低成本地开展自己的商业活动。Web简介 Web是一个基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统，一般而言，Web包括web服务器和web客户端两部分；Web开发是用程序设计语言来解决相关互联网领域问题的技术，Web开发主要集中在服务器端的开发，目前，服务器端的开发技术非常丰富，比如ASP、JSP、PHP、ASP.NET和第三方框架等等。这些技术对Web领域的发展注入了强大的动力。Web技术是Internet的核心技术之一，它的主要功能是信息发布和信息处理，这也是基于互联网的信息系统的一个重要功能。它
3、具有以下特点：（1）Web是一种超文本信息系统。（2）Web是图形化的和易于导航的。（3）Web是平台无关的。（4）Web是分布式的。（5）Web是动态的、交互的。（6）Web具有新闻性。由于技术的进步和网络环境的进化，Web 应用程序开发技术也在不断的进步，在最早，人们为了方便开展科学研究，设计出了Internet用于连接美国的少数几个顶尖研究机构，之后随着进一步的发展，人们开始应用HTTP协议（Hypertext Transfer Protocol，超文本传输协议）进行超文本（hypertext）和超媒体（hypermedia）数据的传输，从而将一个个的网页展示在每个用户的浏览器上，今天的
4、Web已经从最早的静态Web发展到了动态Web阶段，随之而来的像网上银行、网络购物等电子商务站点的兴起，更是将Web带进了人们的生活和工作之中。Web应用程序的运行原理应用程序的运行原理 互联网中有数以亿计的网站，用户可以通过浏览这些网站获得所需要的信息。这些信息存放在服务器上，服务器就是网络中的一台主机，由于它提供Web、FTP等网络服务，因此称其为服务器。Web应用程序通常由大量的页面、资源文件、部署文件等文件组成，组成网站的大量文件之间通过特定的方式进行组织，并且由一个软件系统来管理这些文件。管理这些文件的软件系统通常称为应用服务器，它的主要作用就是管理网站的文件。网站的文件通常由以下几
5、种类型：（1）网页文件：主要是提供用户访问的页面，包括静态的和动态的，这是网站中最重要的部分，如.html、.jsp等；（2）网页的格式文件：可以控制网页信息显示的格式、样式，如.css等；（3）资源文件：网页中用到的图形、声音、动画、资料库、以及各式各样的软件；（4）配置文件：用于声明网页的相关信息、网页之间的关系、以及对所在运行环境的要求等；（5）处理文件：用于对用户的请求进行处理，如供网页调用、读写文件或访问数据库等。静态网页和动态网页静态网页和动态网页 静态网页是指网页的内容是固定的，不会根据浏览者的不同而改变。静态网页一般使用HTML（超文本标记语言）语言进行编写。其文件后缀通常为.
6、htm、.html、.shtml、.xml等。静态网页的基本特点是除非网页设计者修改了网页的内容否则网页内容不会发生变化。静态网页的信息流向是单向的，在执行过程中不能和客户端进行交互，即内容信息流只能从服务器到浏览器。需要注意的是在静态网页上，也可以出现各种“动态效果”，如.GIF格式的动画、FLASH、滚动字母等，但这些“动态效果”只是视觉上的，而不是内容上的动态。所以这样的网页依然是静态网页。静态Web页面存在着一些重要的问题：（1）所有的用户看到的页面效果都是一样的，因为服务器向所有用户提供的内容都是一样的。（2）在静态Web技术中，一个重要的缺点是静态Web页面无法访问数据库资源，而现
7、在用数据库保存数据又是绝大多数应用系统必需的选择，因为需要使用数据库进行数据的CDUR操作（增加Creat，删除Delete，更新Update，查询Requery）。动态网页就是该网页文件不仅包括HTML标记，而且包含一些程序代码。这种网页文件名的后缀依不同的程序设计语言而不同，如使用JAVA语言的JSP文件的后缀为.JSP，除此之外，还有一些动态网页形式，如.asp、.php、.perl、.cgi等形式。动态网页主要用于实现客户端和服务器端的交互，其内容是根据不同用户的不同请求由服务器运行程序后生成不同的网页后返回的。采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、搜索查询、
8、用户管理、订单管理等。还需要注意的是动态网页以数据库技术为基础，可以大大提高网站的效率和降低网站维护的工作量。动态网页和静态网页的根本区别在于服务器端返回的HTML文件是事先存储好的还是由动态网页程序生成的。静态网页文件里只有HTML标记，没有程序代码，网页的内容都是事先写好，存放在服务器上的，用户请求哪个页面就将哪个页面发送给客户端即可；动态网页文件不仅含有HTML标记，并且还含有程序代码，当用户发出请求时，服务器由动态网页程序生成HTML文件。动态网页能够根据不同的时间、不同的用户生成不同的HTML文件，显示不同的内容。Web应用程序开发模式应用程序开发模式C/S模式模式 C/S模式（Cl
9、ient/Server，客户端/服务器端模式）是一种传统的开发模式，在这种开发模式中，客户端是安装在客户机上的，负责用户端业务逻辑的处理，且可以根据不同的用户的需求进行定制。在服务器端仅仅对重要的过程和数据库进行处理和存储。在C/S开发模式中，需要注意将任务合理分配到客户端和服务器端，最简单的C/S体系架构由两部分组成，即客户应用程序和数据库服务器程序，可分别称为前台程序与后台程序。不足之处：（1）伸缩性差：客户机与服务器联系很紧密，在修改客户机或服务器的某一方程序时一般还要修改另一方，这使软件不易伸缩、维护量大。（2）性能较差：在数据量较大的情况下，数据从服务器端传送到客户端进行处理时，会消
10、耗客户机的系统资源，出现网络拥塞，从而使整个系统的性能下降。（3）重用性差：数据库访问、业务规则等都固化在客户端应用程序中，如果客户另外提出的其他应用需求中也包含了相同的业务规则，程序开发者将不得不重新编写相同的代码。（4）移植性差：某些处理任务是在服务器端由触发器或存储过程来实现的，其适应性和可移性较差。因为这样的程序可能只能运行在特定的数据库平台下，当数据库平台变化时，这些应用程序可能需要重新编写。B/S模式模式 B/S模式（Browser/Server，浏览器/服务器模式）是Web兴起后的一种新型的网络结构模式，它是在客户层（Client）和数据服务器层（Data Server）之间添加
11、第三层：应用服务器层。其中客户层只用来实现人机交互,数据服务器层提供数据信息服务,应用服务器层来完成应用逻辑的实现、数据访问等功能。这种模式中，系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用。Web浏览器是客户端最主要的应用软件，客户机上只需要安装一个浏览器即可，如Internet Explorer或Netscape Navigator，服务器端安装Oracle、Sybase、Informix或SQL Server等数据库，浏览器通过服务器同数据库进行数据交互。大大简化了客户端计算机的逻辑功能，减轻了系统维护与升级的成本和工作量，降低了用户的总体成本。优点：（1）B/S结构
12、最大的优点就是可以在任何地方进行操作而不用安装任何专门的软件。只要有一台能上网的计算机或掌上设备就能使用，客户端零维护。系统的使用性非常容易，只要能上网，再由系统管理员分配一个用户名和密码，就可以使用了。（2）安全性高，隔离了客户端与数据服务器的直接访问。（3）易维护，业务逻辑在中间件服务器上，当业务规则发生改变时，客户端不须改动，只升级中间件服务器层的程序即可。（4）快速响应，通过中间件服务器层上的负载均衡及缓存数据的能力。（5）系统扩展灵活，通过在中间件服务器层上部署新的程序组件来扩展系统规模。缺点：（1）B/S架构在图形的表现能力上以及运行的速度上弱于C/S架构。（2）受程序运行环境限制
13、。由于B/S架构依赖浏览器，而浏览器的版本繁多，很多浏览器核心架构差别也很大，导致对于网页的兼容性有很大影响，尤其是在CSS布局，JAVASCRIPT 脚本执行等方面，会有很大影响。在C/S和B/S 两种架构之间，并没有严格的界限，两种架构之间没有好坏之分，使用这两种架构都可以实现系统的功能。开发人员可以根据实际的需要进行选择，例如需要丰富的用户体验(如一些网络游戏)，那就选择C/S架构，如果更偏重的是功能服务方面的实现，就需要选择B/S架构，还有部分管理应用系统采用两种软件架构相结合的方法。第二章第二章 静态网页开发基础静态网页开发基础 在在在在网站设计中，纯粹网站设计中，纯粹网站设计中，纯
14、粹网站设计中，纯粹HTMLHTML格式的网页通常格式的网页通常格式的网页通常格式的网页通常被称为被称为被称为被称为“静态网页静态网页静态网页静态网页”，它的文件扩展名是，它的文件扩展名是，它的文件扩展名是，它的文件扩展名是htmhtm或或或或htmlhtml，可以包含文本、图像、声音、，可以包含文本、图像、声音、，可以包含文本、图像、声音、，可以包含文本、图像、声音、FLASHFLASH动画、动画、动画、动画、客户端脚本和客户端脚本和客户端脚本和客户端脚本和ActiveXActiveX控件及控件及控件及控件及JAVAJAVA小程序等。静小程序等。静小程序等。静小程序等。静态网页是网站建设的基础
15、，早期的网站一般都是态网页是网站建设的基础，早期的网站一般都是态网页是网站建设的基础，早期的网站一般都是态网页是网站建设的基础，早期的网站一般都是由简单静态网页制作的。静态网页是相对于动态由简单静态网页制作的。静态网页是相对于动态由简单静态网页制作的。静态网页是相对于动态由简单静态网页制作的。静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不网页而言，是指没有后台数据库、不含程序和不网页而言，是指没有后台数据库、不含程序和不网页而言，是指没有后台数据库、不含程序和不可交互的网页。可交互的网页。可交互的网页。可交互的网页。HTMLHTML语言概述语言概述语言概述语言概述HTML HT
16、ML 简介简介简介简介 HTML HTML 的英文全称是的英文全称是的英文全称是的英文全称是Hypertext Marked Hypertext Marked LanguageLanguage，即超文本标记语言，即超文本标记语言，即超文本标记语言，即超文本标记语言,是一种用来制作超是一种用来制作超是一种用来制作超是一种用来制作超文本文档的简单标记语言。超文本传输协议规定了文本文档的简单标记语言。超文本传输协议规定了文本文档的简单标记语言。超文本传输协议规定了文本文档的简单标记语言。超文本传输协议规定了浏览器在运行浏览器在运行浏览器在运行浏览器在运行HTMLHTML文档时所遵循的规则和进行的文档
17、时所遵循的规则和进行的文档时所遵循的规则和进行的文档时所遵循的规则和进行的操作。操作。操作。操作。HTTPHTTP协议的制定使浏览器在运行超文本时协议的制定使浏览器在运行超文本时协议的制定使浏览器在运行超文本时协议的制定使浏览器在运行超文本时有了统一的规则和标准，用有了统一的规则和标准，用有了统一的规则和标准，用有了统一的规则和标准，用HTMLHTML编写的超文本文编写的超文本文编写的超文本文编写的超文本文档称为档称为档称为档称为HTMLHTML文档，它能独立于各种操作系统平台，文档，它能独立于各种操作系统平台，文档，它能独立于各种操作系统平台，文档，它能独立于各种操作系统平台，自自自自199
18、01990年以来年以来年以来年以来HTMLHTML就一直被用作（是就一直被用作（是就一直被用作（是就一直被用作（是World Wide WebWorld Wide Web的缩写，也可简写的缩写，也可简写的缩写，也可简写的缩写，也可简写WEBWEB、中文叫、中文叫、中文叫、中文叫做万维网做万维网做万维网做万维网)的信息表示语言，使用的信息表示语言，使用的信息表示语言，使用的信息表示语言，使用HTML HTML 语言描述语言描述语言描述语言描述的文件，需要通过的文件，需要通过的文件，需要通过的文件，需要通过WEBWEB浏览器显示出效果。浏览器显示出效果。浏览器显示出效果。浏览器显示出效果。HTML
19、 的基本结构的基本结构HTML语言格式：卷标名称语言格式：卷标名称 属性名称属属性名称属性值性值 数据内容数据内容/卷标名称卷标名称如如：您好您好 一一个个HTML文档是由一系列的元素和文档是由一系列的元素和标签组成，元素名不区分大小写。标签组成，元素名不区分大小写。HTML 用标签来规定元素的属性和它在文件中的用标签来规定元素的属性和它在文件中的位置，位置，HTML 超文本文档分文档头和文档超文本文档分文档头和文档体两部分，文档头主要是对这个文档进行体两部分，文档头主要是对这个文档进行一些必要的定义，文档体中才是要显示的一些必要的定义，文档体中才是要显示的各种文档信息。各种文档信息。一个最基
20、本的一个最基本的一个最基本的一个最基本的HTMLHTML文档的代码：文档的代码：文档的代码：文档的代码：meta http-equiv=Content-Type content=text/html;charset=gb2312/显示显示显示显示titletitle的内容的内容的内容的内容 内容内容内容内容.bgcolor背景色，background 背景图案,text文本颜色link链接文字颜色alink活动链接文字颜色vlink已访问链接文字颜色leftmargin页面左侧的留白距离topmargin页面顶部的留白距离bodybody属性列表属性列表网页基本结构简单举例网页基本结构简单举例
21、这是标题这是标题 这是文档主体，正文部分这是文档主体，正文部分 常常常常用用用用HTMLHTML排版标记排版标记排版标记排版标记对于对于对于对于HTMLHTML页面，文字排版标记必不可少，一个美页面，文字排版标记必不可少，一个美页面，文字排版标记必不可少，一个美页面，文字排版标记必不可少，一个美观大方的文字页面能够确切地传达出页面的主要观大方的文字页面能够确切地传达出页面的主要观大方的文字页面能够确切地传达出页面的主要观大方的文字页面能够确切地传达出页面的主要信息。常见的信息。常见的信息。常见的信息。常见的HTMLHTML语言排版标记如下：语言排版标记如下：语言排版标记如下：语言排版标记如下：
22、1 1、标记标记标记标记 文本文本文本文本分段一般以分段一般以分段一般以分段一般以开头、以开头、以开头、以开头、以结尾。段落结尾。段落结尾。段落结尾。段落标记标记标记标记是是是是HTMLHTML中最常用的标记，虽然中最常用的标记，虽然中最常用的标记，虽然中最常用的标记，虽然可可可可以省略，因为下一个以省略，因为下一个以省略，因为下一个以省略，因为下一个的开始就意味着上一个的开始就意味着上一个的开始就意味着上一个的开始就意味着上一个的结束，但最好还是遵循规范，正规书写。的结束，但最好还是遵循规范，正规书写。的结束，但最好还是遵循规范，正规书写。的结束，但最好还是遵循规范，正规书写。标记的常用语法
23、格式为：标记的常用语法格式为：标记的常用语法格式为：标记的常用语法格式为：其中，其中，其中，其中，alignalign用来定义段落的对齐方式，它可以用来定义段落的对齐方式，它可以用来定义段落的对齐方式，它可以用来定义段落的对齐方式，它可以取以下值：取以下值：取以下值：取以下值：centercenter：居中对齐。：居中对齐。：居中对齐。：居中对齐。leftleft：靠左对齐，是默认值。：靠左对齐，是默认值。：靠左对齐，是默认值。：靠左对齐，是默认值。rightright：靠右对齐。：靠右对齐。：靠右对齐。：靠右对齐。2、和和标记标记段落与段落之间一般会空出一行距离。如果不想段落与段落之间一般会
24、空出一行距离。如果不想分段而只想分行，可以使用分段而只想分行，可以使用标记，常用格标记，常用格式为：式为：一般来说一般来说，每当浏览器窗口被缩小时，浏，每当浏览器窗口被缩小时，浏览器会自动将段落右边的文字转折至下一行。览器会自动将段落右边的文字转折至下一行。所以编写者对于自己需要断行的地方，应加上所以编写者对于自己需要断行的地方，应加上标记。标记。标记仅仅分行而不分段。需标记仅仅分行而不分段。需要注意的是要注意的是不是成对出现的，也就是说，不是成对出现的，也就是说，没有没有。在浏览器窗口缩小时，如果不想自动折行，可以使用在浏览器窗口缩小时，如果不想自动折行，可以使用在浏览器窗口缩小时，如果不想
25、自动折行，可以使用在浏览器窗口缩小时，如果不想自动折行，可以使用和和和和标记，格式为：标记，格式为：标记，格式为：标记，格式为：在在在在通过各种标记对文字进行排版时如果要保留原始通过各种标记对文字进行排版时如果要保留原始通过各种标记对文字进行排版时如果要保留原始通过各种标记对文字进行排版时如果要保留原始排版效果，例如文本中的空格、制表符等都要保留，则排版效果，例如文本中的空格、制表符等都要保留，则排版效果，例如文本中的空格、制表符等都要保留，则排版效果，例如文本中的空格、制表符等都要保留，则需要使用需要使用需要使用需要使用、标记，主要格式为：标记，主要格式为：标记，主要格式为：标记，主要格式为
26、：pre width=wrap 其中其中其中其中，widthwidth用于指明每行的最大字符数，用于指明每行的最大字符数，用于指明每行的最大字符数，用于指明每行的最大字符数，wrapwrap说说说说明可以折行，默认是不加明可以折行，默认是不加明可以折行，默认是不加明可以折行，默认是不加wrapwrap，也就是不折行。，也就是不折行。，也就是不折行。，也就是不折行。3、标记标记为了使网页更有层次感，可以使用水平线标记为了使网页更有层次感，可以使用水平线标记，语法为：，语法为：4、标记标记 一般一般文章都有标题、副标题、章和节等文章都有标题、副标题、章和节等结构，结构，HTML中也提供了相应的标题
27、标签中也提供了相应的标题标签和和，其中，其中n为标题的等级。为标题的等级。HTML一共提供六个等级的标题，分别从一共提供六个等级的标题，分别从到到。n越小，标题字号就越大，越小，标题字号就越大，主要格式为：主要格式为：其中对齐方式有其中对齐方式有left、right、center三种，三种，默认为默认为center。5、文字标记、文字标记 在在HTML标记中，有两个标记可以指定标记中，有两个标记可以指定字体大小，一个是上一节讲过的字体大小，一个是上一节讲过的标记，标记，还有一个就是还有一个就是标记。但标记。但标记只标记只能用于有限的范围，而能用于有限的范围，而标记的功能则标记的功能则更加强大。
28、另外，还有一些设置字体某个更加强大。另外，还有一些设置字体某个特点的标记，如特点的标记，如、等标记，等标记，它们都是成对的。它们都是成对的。HTMLHTML常用常用常用常用文本文本文本文本格式格式格式格式 HTML图片图片 图片格式有很多种，在网络中使用的图片格式应该能被各种操作系统所接受才行。目前，在网上流行的图片格式以GIF、JPEG 和PNG为主，图片文件一般要经过压缩，否则文件太大不利于在网上传输。可以使用标记把图像插入到网页中了。标记的主要语法为：例如在页面中插入如下代码：运行程序后会在页面中显示效果如图所示：在页面中image/myimage.jpg是相对路径，在HTML页面中涉及
29、到资源文件的地方(如音乐、视频、图片等)就会涉及绝对路径与相对路径的概念。绝对路径是指文件在硬盘上真正存在的路径。相对路径，就是相对于自己的目标文件位置。在相对路径里常使用“./”来表示上一级目录。如果有多个上一级目录，可以使用多个“./”，例如“http:/ HTML 第2章”，而“bg.jpg”图片所在目录为“E:book HTML”，那么“bg.jpg”图片相对于网页文件来说，是在其所在目录的上级目录里，则引用图片的语句应该为：超链接超链接 所谓超链接（hyperlink），就是当单击某个字或图片时，就可以打开另一个网页或画面。超链接的语法根据其链接对象的不同而有所变化，但都是基于标记的
30、，主要语法为：n n 或者n n 其中，href是hypertext refernce（超文本引用）的缩写。target用于指定如何打开链接的网页，有以下几个值：n n_blank：打开一个新的浏览器窗口显示。n n_self：用网页所在的浏览器窗口显示，是默认设置。n n_parent：在上一级窗口打开，常用在框架页面中，请参看第八章“框架”。n n_top：在浏览器的整个窗口打开，将会忽略所有的框架结构。超链接还可以用来发电子邮件，语法为：链接的文字这就创建了一个自动发送电子邮件的链接，“mailto:”（注意其中有一个半角的冒号）后边紧跟想要制动发送的电子邮件的地址，例如：给站长发ema
31、il HTML超链接 HTML列表列表 列表（List）是一种常用的数据排列方式，它以条列式的模式来显示数据，使读者能一目了然。在HTML有三种列表，分别是无序列表（unordered lists）、有序列表（ordered lists）和定义列表（definition lists）。1、无序列表（、无序列表（unordered lists）是一种不编号的）是一种不编号的列表方式，而在每一个项目文字之前，用符号列表方式，而在每一个项目文字之前，用符号作为分项标识，最常用的符号是圆黑点。常用作为分项标识，最常用的符号是圆黑点。常用语法为：语法为：第第1项项 第第2项项 第第n项项无序列表由无序列
32、表由开始，每个列表项由开始，每个列表项由开始，开始，最后由最后由结束。结束。在默认情况下，无序列表的项目符号是在默认情况下，无序列表的项目符号是“”，但通过但通过type属性可指定项目符号，其值有三个，属性可指定项目符号，其值有三个，分别是：分别是：n ndisc：默认的项目列表符号：默认的项目列表符号“”。n ncircle：空心园符号：空心园符号“”。n nsquare：方块符号：方块符号“”有序列表（ordered lists）中的每个列表项使用编号、而不是符号来进行排列，以表示顺序性，一般采用数字或字母作为顺序号。常用语法为：n nn n 第1项n n 第2项n n n n 第n项n
33、n 有序列表由开始，每个列表项由开始，最后由结束。在默认情况下，无序列表的编号是阿拉伯数字，但通过type属性可指定编号，其值有五个，分别是：1 1（阿拉伯数字（阿拉伯数字1 1）：用）：用1 1、2 2、3 3、4 4、编号。编号。a a：用小写英文字母：用小写英文字母a a、b b、c c、d d、编号。编号。A A：用大写英文字母：用大写英文字母A A、B B、C C、DD、编号。编号。i i：用小写罗马数字：用小写罗马数字i i、ii ii、iii iii、iv iv、编号。编号。I I（大写的字母（大写的字母i i）：用大写罗马数字）：用大写罗马数字、编号。编号。在默认情况下，有序列
34、表的列表项从在默认情况下，有序列表的列表项从1 1开始编号，但开始编号，但通过通过startstart属性可设置起始数值，它不仅对数字起作用，属性可设置起始数值，它不仅对数字起作用，而且对英文和罗马字母起作用。而且对英文和罗马字母起作用。定义列表（definition lists）通常用于术语的定义，它包含两个层次的列表，第一层次是需要解释的名词，第二层次是具体的解释。常用语法为：n nn n 第1项解释1n n 第2项解释2n n n n 第n项解释nn n 定义列表由开始，每个列表项由开始，列表项的解释由开始。最后由结束。HTML列表标记 HTML表格表格 HTML表格用表示。一个表格可以
35、分成很多行(row)，用表示；每行又可以分成很多单元格(cell)，用表示。这三对标记是创建表格最常用标记，需要统一使用。在、标记中嵌套、标记，在、标记中嵌套、标记。标记标记中的属性很多，用于控制表格的整体显示。常用语法格式为：标记 标记用来设置表格各行的属性。标记的常用语法格式为：标记标记的常用语法格式为：标记的一些和或不同的属性的意义如下：n ncolspan：该单元格在水平方向上跨的列数，默认为1。n nrowspan：该单元格在垂直方向上跨的行数，默认为1。colspan和rowspan是为制作复杂表格准备的，具体使用见例子。n nnowrap：如果单元格格中的内容超过了单元格的宽度，
36、则用此属性禁止内容折行显示。HTML表格应用 表单的使用表单的使用 表单(Form)是实现图形用户界面的基本元素，它包括按钮、文本框、单选框、复选框等，它们是HTML实现交互功能的主要接口。程序通过表单向服务器提交用户数据。表单的使用包括两个部分：一部分是用户界面，提供用户输入数据的组件；另一部分是处理程序，可以是客户端程序，在客户端的浏览器中执行；也可以是服务器端程序，在服务器端执行，无论是在客户端还是在服务器端处理用户提交的数据，都需要将处理结果返回到浏览器中。设计一个表单示例程序，定义一个简单的用户注册界面。编写一个表单示例程序，定义了一个如图所示简单的员工管理录入界面。使用使用fram
37、e框架分割浏览器窗口框架分割浏览器窗口 框架（Frame）最主要的功能是用来分割页面窗口，使每个“小窗口”能显示不同的HTML文件。这样的页面结构称为框架结构的页面，而这些“小窗口”就被称为框架的“窗口”。框架又常被称为帧。利用框架可以将浏览器窗口分割成多个相互独立的区域，每个区域可以显示独立的HTML页面。用标记划分区域，用标记定义各区域要执行的程序。框架的基本语法如下：框架的外层标志是和，这对标志用来定义主文档中有几个帧、并且各个帧是如何排列的，定义的方法是使用cols属性或rows属性，cols属性值用来垂直分割窗口，rows属性值用来水平分割窗口。使用标志时，这两个属性必须至少选择一个
38、，否则浏览器只显示第一个定义的帧。rows和cols的属性值可以是百分数、像素值或星号“*”，其中星号代表那些未被说明的空间，即除了已说明的部分后的剩下所有的。同时，所有的帧按照rows和cols的值从左到右、然后从上到下排列。标志放在之间，用来定义某一个具体的框架。标志具有src和name属性，这两个属性一般都需要赋值。src是此框架要显示的HTML文件名（包括路径），name是此框架的名字，这个名字用来供超链接标志使用的。使用frame框架技术实现如下页面的内容 应用音乐与视频标记应用音乐与视频标记 使用标记可以将多媒体文件添加进网页中。但仅仅这样做还不够，还需要在客户端的计算机中安装相应
39、的播放软件，这样浏览器才能顺利播放。标记的主要语法为：在该语法中，width和height一定要设置，单位是像素，否则无法正确显示播放多媒体文件的软件。1、加背景音乐标记:2、在页面中添加影片标记:3、在页面中插入FLASH可以使用+标记 滚动标记滚动标记在HTML中要设置动态文字，需要使用标记，主要语法为：滚动的文字 一个垂直滚动的消息提示板。使用使用Dreamweaver编辑网页编辑网页 Dreamweaver 是由Micromedia公司出品的一款流行的专业从事网页设计、网站管理、网页可视化编程的应用软件。具有跨平台、跨浏览器的特点。它与Flash、Fireworks合在一起被称为网页制
40、作三剑客，这三个软件相辅相承，是网页制作的最佳选择。Dreamweaver制作网页的效率很高，制作出来的网页兼容性也比较好，Flash主要用来制作精美的网页动画，而Fireworks用来处理网页中的图形。Dreamweaver的基本操作的基本操作1、建立站点2、建立网页3、建立超链接 创建表格创建表格插入新表格有三种方法：n n从插入菜单中选择表格命令。n n使用组合键Ctrl+Alt+t。n n将对象面板调整到Common类上，单击插入表格按钮。设置表格基本属性：行数（rows）、列数(columns)、表格宽度(width,单位可用象素或百分比表示)、边框宽度(border)、单元格间距(
41、cell spacing)、单元格中的内容与边框之间的间隙(cell padding)。选定表格：与Word中的操作基本相同。添加行/列：将光标置入需在其前面插入行的单元格中，右击表格插入行/列。删除行/列：将光标置入需删除的单元格中，右击表格删除行/列。调整行高/列宽有两种方法：n n用类似于Word中表格操作，直接用鼠标拖动到需要的高/宽。n n选中所需要的行/列，在属性面板上的height/width框中输入所需要的数值。合并/拆分单元格：与Word中操作类似，先选中该单元格，然后单击属性面板上的合并/拆分按钮，再从对话框中给出需要的数值即可。或者选中目标后右击，从菜单中选择Merge
42、Cells(合并)/Spilt Cell（拆分）命令。表格的嵌套：在表格中可以再插入一个完整的表格。选中单元格后，直接从插入菜单里单击表格即可。导入表格数据文件：可以把其它应用程序（如Excel、Access）建立的表格数据假如到网页中。方法：先将表格数据文件转换成文本文件，并且每行数据要带分隔符（如逗号、分号、冒号）然后选择文件导入导入表格数据。或从插入菜单中选择表格数据命令。用表格进行页面布局：用表格可以对页面上的多个对象进行复杂的排版。注意：在进行页面布局设计时，表格的边框（border）一定要设置为0，这样设计中可以看到表格的虚线框，而浏览是没有任何痕迹，否则比较难看。另外，浏览器在下
43、载网页时，先下载整个表格，然后再下载表格中的内容，所以在用表格布置页面时，不能将整个网页的内容都放在一个大表格中，以免影响网页的下载速度。层的使用层的使用 在Dreamweaver中，通过层（Layer）可以对文档内容实现精确的绝对定位。层相当于网页内的一种容器，凡是可以放到网页上的对象几乎都可以放在层中，如：文本、图像、表格、表单等，层中还可以包含层。层可以重叠，可以控制隐藏或显示其中的任何一个，通过设置行为可以使其交替出现，以产生动态效果。在HTML中，层用 或来标记，现在版本的浏览器一般都支持层标记。创建：从插入菜单中选择层命令，即可插入一个默认大小的层（200 x115）。需要改变其大
44、小时，可以直接用鼠标拖动边框上的控制块，或用从属性面板中修改其高度（H）和宽度（W）。属性设置：通过属性面板可以控制层的可见性、溢出处理、背景颜色、背景图片、距网页左边距/顶边距、层中可见区域大小。使用Dreamweaver设计如图所示的网页 案例实践案例实践案例需求说明案例需求说明 使用Dreamweaver建立网站站点，并在网站中建立简单的网页，在网页中使用表单设计新用户注册页面，页面的设计效果如图所示。技能训练要点技能训练要点1.熟悉Dreamweaver工作环境。2.掌握创建、编辑和删除本地站点的方法。3.掌握创建网页文档的方法。4.掌握页面属性设置的方法。5.掌握表单的使用方法。6.
45、掌握创建和编辑表格的方法。第第三三章章 WEB客户端编程技术客户端编程技术 在浏览网页时，除了能看到静态的文本、图像，有时也会看到浮动的动画、信息框动态变换的时钟信息以及用户名和密码的确认等。页面上这些实时的、动态的、可交互的网页效果在web应用开发时可以使用JavaScript语言来编写实现。JavaScript是一种用于Web程序开发的编程语言，它功能强大，主要用于开发交互式的Web页面。JavaScript不需要进行编译，可以直接嵌入在HTML页面中。CSS(Cascading Style Sheet)即层叠样式表，又称为级联样式,它是一种用来表现HTML文件样式的计算机语言。是网页设计
46、不可缺少的工具之一。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。CSS文件可由记事本和Dreamweaver等网页文件编辑器打开。nJavaScript概述概述n JavaScript是是Web程序开发过程中一种功能程序开发过程中一种功能强大的编程语言，用于开发交互式的强大的编程语言，用于开发交互式的Web页页面。它不需要进行编译，而是直接嵌入在面。它不需要进行编译，而是直接嵌入在HTML页面中，把静态页面转变成支持用户页面中，把静态页面转变成支持用户交互并响应事件的动态页面。交互并响应事件的动态页面。JavaScript是Web页面中的一种脚本编程语言
47、，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。JavaScript的前身叫做LiveScript，是由Netscape(网景)公司开发的脚本语言。后来在Sun公司推出著名的Java语言之后，Netscape公司和Sun公司于1995年一起重新设计了LiveScript，并把它改名为JavaScript。在概念和设计方面，JAVA和JavaScript是两种完全不同的语言。Java是面向对象的程序设计语言，用于开发企业级应用程序，而JavaScript是在浏览器中执行，用于开发客户端浏览器的应用程序，能够实现用户与浏览器的动态交互。JavaScript是一种基于对象（Ob
48、ject）和事件驱动（Event Driven）并具有安全性能的解释性脚本语言，它具有以下几个主要特点：解释性基于对象事件驱动跨平台性安全性 n nJavaScript语法语法n n变量声明与赋值变量声明与赋值 在JavaScript中，使用变量前需要先对其进行声明。所有的JavaScript变量都由关键字var声明，语法格式如下：var abc;在声明变量的同时也可以对变量进行赋值，例如：var abc=1;声明变量时，需要遵循的规则如下：（1）可以使用一个关键字var同时声明多个变量，例如：var a,b,c （2）可以在声明变量的同时对其赋值，即初始化，例如：var a=1,b=2,c=
49、3；（3）如果只是声明了变量，并未对其赋值，则其默认为undefined。（4）var语句可以用作for循环和for/in循环的一部分，这样就使循环变量的声明成为循环语法自身的一部分，使用起来比较方便。（5）使用var语句多次声明同一个变量，如果重复声明的变量已经有一个初始值，那么此时的声明就相当于对变量的重新赋值。由于JavaScript采用弱类型的形式，因此可以不理会变量的数据类型，即可把任意类型的数据赋值给变量。例如，声明一些变量，具体代码如下：var a=100 /数值类型var str=网页平面设计学院/字符串类型var bue=true /布尔类型 在JavaScript中，变量可
50、以先不声明，而在使用时，根据变量的实际作用来确定其所属的数据类型，为了良好的编程习惯和能够及时发现代码中的错误，建议在使用变量前就对其声明。JavaScript的基本语法规则的基本语法规则1、执行顺序n n流程控制语句依然分为顺序结构、选择结构、循环结构。（1）顺序结构按代码顺序执行。（2）选择结构使用关键字if、switch。n nif语法格式为：n nif(判断条件)n nn n/条件为真时执行的语句n nn nelsen nn n/条件为假时执行的语句n nn n其中，else部分是可选的 n nswitch语句称为开关语句，实现多重条件判断，语法格式为：n nswitch(variab