《脚本语言与动态网页设计（第2版）全书课件电子教案汇总.ppt》由会员分享，可在线阅读，更多相关《脚本语言与动态网页设计（第2版）全书课件电子教案汇总.ppt（612页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、脚本语言与动态网页设计（第2版） 第一章第一章动态网页基础动态网页基础 第第1章章 动态网页基础动态网页基础1.1 Web基础基础1.2 ASP概述概述1.3 ASP的运行的运行本章学习目标本章学习目标vWeb基本概念及工作原理基本概念及工作原理v静态网页与动态网页的概念及执行过程静态网页与动态网页的概念及执行过程vASP的特点及的特点及ASP文件的基本结构文件的基本结构vIIS 5.1的安装与设置的安装与设置vASP文件的基本结构和运行方法文件的基本结构和运行方法1.1 Web基础基础 Internet（因特网）又称为（因特网）又称为国际互联网、国际互联网、因特网、网际网或信息高速公路因特网
2、、网际网或信息高速公路等，它是等，它是将不同地区而且规模大小不一的网络互相将不同地区而且规模大小不一的网络互相连接而成，是当今世界上最大的计算机网连接而成，是当今世界上最大的计算机网络。络。 1.1.1 Web1.1.1 Web概述概述vWeb（World Wide Web或或WWW，万维网）是，万维网）是世界上最大的电子信息仓库，由众多的世界上最大的电子信息仓库，由众多的Web站点站点组成。组成。 vWeb是一种基于是一种基于超级链接超级链接（HyperLink）技术的）技术的分布式的超媒体（分布式的超媒体（Hypermedia）系统，是对超）系统，是对超文本（文本（HyperText）系统
3、的扩充。）系统的扩充。 v利用超级链接技术，利用超级链接技术，Web系统将位于不同网络位系统将位于不同网络位置的文件建立联系，用户通过单击不同的超级链置的文件建立联系，用户通过单击不同的超级链接就可以方便地访问指定的资源，为用户提供了接就可以方便地访问指定的资源，为用户提供了一种交叉式（而非线性）的访问资源的方式。一种交叉式（而非线性）的访问资源的方式。 1.1.2 Web1.1.2 Web工作原理工作原理 vHTTP（Hypertext Transfer Protocol，超，超文本传输协议）文本传输协议）是一种非常重要的是一种非常重要的WWW传传输协议。它规定了在网络中传输信息的内输协议。
4、它规定了在网络中传输信息的内容以及容以及Web客户机与客户机与Web服务器之间交互服务器之间交互的方式。的方式。 Web 客户机 （Browser） Web 服务器 （Server） 请求 响应 1.1.2 Web1.1.2 Web工作原理工作原理vURL（Uniform Resource Locator，统一，统一资源定位符）用于在资源定位符）用于在Internet上惟一地标识上惟一地标识每个资源地址和获取资源的方式，通常也每个资源地址和获取资源的方式，通常也称为称为URL地址、网站地址或网址。地址、网站地址或网址。vURL的一般格式为：的一般格式为：:/:/文件名文件名http:/:80/
5、index.html 1.1.3 1.1.3 静态网页与动态网页静态网页与动态网页 v静态网页是标准的静态网页是标准的HTML文件，其文件扩展名文件，其文件扩展名为为.htm或或.html HTML页面示例页面示例 Hello World！ 1.1.3 1.1.3 静态网页与动态网页静态网页与动态网页HTML文件是一个文件是一个纯文本文件纯文本文件，可以使用任何一种文本编辑，可以使用任何一种文本编辑器（如器（如Windows中的记事本、写字板等）创建。中的记事本、写字板等）创建。任何任何Web服务器都支持静态网页，其服务器都支持静态网页，其执行过程执行过程如下：如下：（1）当用户在浏览器的地址
6、栏中键入要访问的）当用户在浏览器的地址栏中键入要访问的URL地址并地址并回车或单击回车或单击Web页上的某个超级链接时，浏览器向页上的某个超级链接时，浏览器向Web服服务器发送一个页面请求。务器发送一个页面请求。（2）Web服务器接收到这些请求，根据扩展名服务器接收到这些请求，根据扩展名.htm或或.html判断出请求的是判断出请求的是HTML文件，然后服务器从当前硬盘或内文件，然后服务器从当前硬盘或内存中读取正确的存中读取正确的HTML文件，将它送回用户浏览器。文件，将它送回用户浏览器。（3）用户浏览器解释这些）用户浏览器解释这些HTML文件并将结果显示出来。文件并将结果显示出来。 Web
7、客户机 Web 服务器 请求 响应 1接受请求 2找到静态网页 3发送静态网页 1.1.3 1.1.3 静态网页与动态网页静态网页与动态网页v动态网页中除包含有静态网页中可以出现动态网页中除包含有静态网页中可以出现的内容外，还可以包含只能在的内容外，还可以包含只能在Web服务器服务器上运行的服务器端脚本。上运行的服务器端脚本。 1.1.3 1.1.3 静态网页与动态网页静态网页与动态网页v动态网页的执行过程如下所示：动态网页的执行过程如下所示：（1）用户在浏览器地址栏中键入要访问的）用户在浏览器地址栏中键入要访问的URL地地址并回车或单击址并回车或单击Web页上的某个超级链接时，浏页上的某个超
8、级链接时，浏览器将这个动态网页的请求发送到览器将这个动态网页的请求发送到Web服务器。服务器。（2）Web服务器接收这些请求并根据扩展名（例服务器接收这些请求并根据扩展名（例如如.asp）判断请求的是动态网页文件，服务器从）判断请求的是动态网页文件，服务器从硬盘或内存中读取相应的文件。硬盘或内存中读取相应的文件。（3）Web服务器将这个动态网页文件从头至尾执服务器将这个动态网页文件从头至尾执行，并根据执行结果生成相应的行，并根据执行结果生成相应的HTML文件（静文件（静态网页）。态网页）。（4）HTML文件被送回浏览器，浏览器解释这些文件被送回浏览器，浏览器解释这些HTML文件并将结果显示出来
9、。文件并将结果显示出来。 1.1.4 1.1.4 交互式动态网页实现技术简介交互式动态网页实现技术简介 1CGIvCGI（通用网关接口）是外部程序和通用网关接口）是外部程序和Web服务器服务器之间的标准编程接口。之间的标准编程接口。 2ASPvASP（Active Server Pages，活动服务器网页）活动服务器网页）由于其应用程序容易开发和修改、功能强大等特由于其应用程序容易开发和修改、功能强大等特点，再加上微软强有力的支持，可以说是时下网点，再加上微软强有力的支持，可以说是时下网站建设最为流行的技术之一。站建设最为流行的技术之一。 3PHPvPHP（Hypertext Preproce
10、ssor，超文本预处理超文本预处理器器）是一种）是一种HTML内嵌式语言（类似于内嵌式语言（类似于ASP）。）。 1.1.4 1.1.4 交互式动态网页实现技术简介交互式动态网页实现技术简介 4JSPvJSP（Java Server Pages，Java服务器页面）服务器页面）是是Sun公司推出的网站开发技术，是将纯公司推出的网站开发技术，是将纯Java代代码嵌入码嵌入HTML中实现动态功能的一项技术。中实现动态功能的一项技术。 5ASP.NETv作为微软作为微软.NET框架中重要的组成部分框架中重要的组成部分ASP.NET越越来越多地受到开发人员的关注。传统的来越多地受到开发人员的关注。传统
11、的ASP中中ASP程序和网页的程序和网页的HTML标记混合在一起，造成标记混合在一起，造成了网页美工设计人员和程序设计人员在相互配合了网页美工设计人员和程序设计人员在相互配合过程中会出现诸多的不便；此外，过程中会出现诸多的不便；此外，ASP页面的脚页面的脚本语言是解释执行的，其执行速度较慢。为了克本语言是解释执行的，其执行速度较慢。为了克服服ASP以上的种种限制，微软推出了以上的种种限制，微软推出了ASP.NET。1.2 ASP基础基础v1.2.1 ASP的特性点的特性点v1.2.2 ASP程序的基本结构程序的基本结构1.2.1 ASP的特点的特点ASP具有如下几个重要特性：具有如下几个重要特
12、性：（1）在）在ASP页面中可以包含文本、页面中可以包含文本、HTML标记、服务器端标记、服务器端脚本和客户端脚本命令以及脚本和客户端脚本命令以及ActiveX组件。组件。Web服务器只服务器只执行执行ASP页面中的服务器脚本，页面中的其它内容被服务页面中的服务器脚本，页面中的其它内容被服务器原封不动地发送给客户机浏览器。器原封不动地发送给客户机浏览器。（2）ASP中可以有多种脚本语言，包括中可以有多种脚本语言，包括VBScript和和Jscript。在安装了相应的脚本引擎后，还可以使用其它脚本语言。在安装了相应的脚本引擎后，还可以使用其它脚本语言。（3）ASP提供了一些内置对象，使用这些内置
13、对象可以增提供了一些内置对象，使用这些内置对象可以增强强ASP的功能。例如，实现客户机浏览器与的功能。例如，实现客户机浏览器与Web服务器的服务器的交互，在网页间传递参数等功能。交互，在网页间传递参数等功能。 1.2.1 ASP的特点的特点（4）ASP可以使用内置的可以使用内置的ActiveX组件完成许多重组件完成许多重要的功能。例如，借助要的功能。例如，借助ADO对象，可以轻松地完对象，可以轻松地完成对数据库的操作。当然，也可以使用其它第三成对数据库的操作。当然，也可以使用其它第三方提供的组件来完成特定的功能。方提供的组件来完成特定的功能。（5）ASP具有一定的安全性。由于具有一定的安全性。
14、由于ASP页面是在页面是在服务器端运行的，送到客户机浏览器的是服务器端运行的，送到客户机浏览器的是ASP的的执行结果所生成的执行结果所生成的HTML页面，用户只能得到页面，用户只能得到HTML代码而无法获取代码而无法获取ASP页面源代码。页面源代码。（6）ASP是一种解释性语言，服务器只要在使用是一种解释性语言，服务器只要在使用时对其进行解释执行即可。时对其进行解释执行即可。 1.2.2 ASP1.2.2 ASP文件的基本结构文件的基本结构vASP文件中通常包含文件中通常包含HTML标记、脚本命令标记、脚本命令和文本三部分的内容。和文本三部分的内容。v三部分内容可以组合混杂在三部分内容可以组合
15、混杂在ASP文件中文件中 HTML使用标准的使用标准的HTML标记界定标记界定 ASP服务器端脚本命令使用服务器端脚本命令使用“”表表示脚本的开始和结束，可以每一行示脚本的开始和结束，可以每一行ASP语句界语句界定一次，也可以多行语句界定一次。定一次，也可以多行语句界定一次。 1.2.2 ASP1.2.2 ASP文件的基本结构文件的基本结构 FONT size= Hello World! 1.3 ASP1.3 ASP的运行的运行vIIS 5.1的安装的安装 （1）单击）单击“开始开始”|“控制面板控制面板”|“添加添加/删除删除程序程序”，出现，出现“添加添加/删除程序删除程序”对话框，对话框
16、，在在“添加添加/删除程序删除程序”对话框中单击对话框中单击“添加添加/删除删除Windows组件组件”，出现，出现“Windows组组件向导件向导”对话框对话框 1.3 ASP1.3 ASP的运行的运行（2）在）在“Windows组件向导组件向导”对话框中选对话框中选中中“Internet信息服务（信息服务（IIS）”，单击，单击“详详细信息细信息”按钮按钮 1.3 ASP1.3 ASP的运行的运行（3）选择所需安装的组件，然后按照向导提）选择所需安装的组件，然后按照向导提示操作即可。示操作即可。v安装完成后，通过安装完成后，通过“开始开始”|“控制面控制面板板”|“管理工具管理工具”|“I
17、nternet信息服务信息服务”菜菜单，启动单，启动“Internet信息服务信息服务”控制台控制台 1.3.2 IIS 5.11.3.2 IIS 5.1的设置的设置 1启动、停止网站启动、停止网站 1.3.2 IIS 5.11.3.2 IIS 5.1的设置的设置2设置网站设置网站 （1）设置网站常规属性。）设置网站常规属性。 1.3.2 IIS 5.11.3.2 IIS 5.1的设置的设置（2）设置网站的主目录。）设置网站的主目录。 1.3.2 IIS 5.11.3.2 IIS 5.1的设置的设置（3）设置应用程序选项。）设置应用程序选项。 1.3.2 IIS 5.11.3.2 IIS 5.
18、1的设置的设置（4）设置网站的默认）设置网站的默认Web页面。页面。 1.3.2 IIS 5.11.3.2 IIS 5.1的设置的设置3创建和设置虚拟目录创建和设置虚拟目录 （1）创建）创建Web虚拟目录。虚拟目录。1）在）在“Internet信息服务信息服务”控制台中，鼠标控制台中，鼠标右键单击欲添加虚拟目录的网站。右键单击欲添加虚拟目录的网站。2）在弹出的快捷菜单中选取）在弹出的快捷菜单中选取“新建新建”|“虚拟虚拟目录目录”。3）出现）出现“新建虚拟目录新建虚拟目录”向导，单击向导，单击“下一下一步步”按钮，出现按钮，出现“虚拟目录别名虚拟目录别名”输入窗输入窗口。输入别名后，单击口。输
19、入别名后，单击“下一步下一步”按钮按钮. 1.3.2 IIS 5.11.3.2 IIS 5.1的设置的设置（2）设置）设置Web虚拟目录属性。虚拟目录属性。v在创建虚拟目录后，可以根据需要设置该在创建虚拟目录后，可以根据需要设置该虚拟目录的属性。修改和设置虚拟目录的虚拟目录的属性。修改和设置虚拟目录的属性可以在属性可以在“Internet信息服务信息服务”控制台中控制台中鼠标右键单击相应的虚拟目录，在弹出的鼠标右键单击相应的虚拟目录，在弹出的快捷菜单中选择快捷菜单中选择“属性属性”选项选项 1.3.3 ASP1.3.3 ASP的运行的运行 1如果用户正在如果用户正在Web服务器所在的计算机上服
20、务器所在的计算机上进行操作，可以在进行操作，可以在“Internet信息服务信息服务”控控制台中鼠标右键单击相应的制台中鼠标右键单击相应的ASP文件，在文件，在弹出的快捷菜单中选择弹出的快捷菜单中选择“浏览浏览”选项选项 1.3.3 ASP1.3.3 ASP的运行的运行2如果用户通过局域网或互联网访问如果用户通过局域网或互联网访问Web服服务器，需要在客户机浏览器的地址栏中输务器，需要在客户机浏览器的地址栏中输入正确的入正确的URL地址地址例如：例如：http:/ 网站网站IP地址或域名地址或域名/虚拟目录别名虚拟目录别名/文件文件名称（包括扩展名）名称（包括扩展名） 总结：总结：vWeb基本
21、概念及工作原理基本概念及工作原理v静态网页与动态网页的概念及执行过程静态网页与动态网页的概念及执行过程vASP的特点及的特点及ASP文件的基本结构文件的基本结构vIIS 5.1的安装与设置的安装与设置vASP文件的基本结构和运行方法文件的基本结构和运行方法脚本语言与动态网页设计（第2版） 第二章第二章WebWeb网页制作基础网页制作基础 本章学习目标本章学习目标vWeb页面文档的设计方法页面文档的设计方法v网页文本的处理方法网页文本的处理方法v加入多媒体和超级链接的方法加入多媒体和超级链接的方法v表格的使用表格的使用v表单的制作表单的制作v框架的使用框架的使用vCSS基础知识基础知识vXML基
22、础知识基础知识2.1.1 HTML概述概述vHTML（Hyper Text Markup Language，超文本标记语言）的缩写，最早源于超文本标记语言）的缩写，最早源于SGML语言（语言（Standard General Markup Language，标准通用化标记语言），是由标准通用化标记语言），是由Web页面的发明者页面的发明者Tim Berners-Lee和同和同事事Daniel W.Connolly于于1990年创立的一年创立的一种新颖的标记式语言，它是种新颖的标记式语言，它是SGML的应用。的应用。v到到90年代后期，由于网络的飞速发展，使年代后期，由于网络的飞速发展，使得得H
23、TML也达到了空前的繁荣，在也达到了空前的繁荣，在WWW革革命中扮演了核心技术的角色。命中扮演了核心技术的角色。2.1.2 HTML文档的结构文档的结构HTML语言的基本结构：语言的基本结构： 头部信息头部信息 正文部分正文部分 2.1.2 HTML文档的结构文档的结构2.1.3 HTML标记标记1HTML文档标记格式：格式：功能：标志文档开始和结尾的标记。功能：标志文档开始和结尾的标记。 2HTML文件头标记文件头标记格式：格式：功能：用于包含文件的基本信息。功能：用于包含文件的基本信息。3HTML文件主体标记文件主体标记格式：格式：功能：文件主体标记。功能：文件主体标记。2.1.4 常用常
24、用HTML编辑工具编辑工具v使用使用HTML编辑器可以很容易的设计精彩的编辑器可以很容易的设计精彩的网页，实际上，任何一个文档编辑器都是网页，实际上，任何一个文档编辑器都是HTML编辑器，这也是网页制作之所以流行编辑器，这也是网页制作之所以流行的一个原因。的一个原因。 vHTML作为最基本的网页编辑语言，能够实作为最基本的网页编辑语言，能够实现网页的各种效果。但是，它毕竟是一种现网页的各种效果。但是，它毕竟是一种语言，需要记住一些标记。语言，需要记住一些标记。 2.2.1 设置设置的属性的属性v作为网页的主体部分，作为网页的主体部分，有很多的内置属性，这些属性用于设定网有很多的内置属性，这些属
25、性用于设定网页的总体风格。例如，定义页面的背景图页的总体风格。例如，定义页面的背景图像、背景颜色、文字颜色以及超文本链接像、背景颜色、文字颜色以及超文本链接颜色等，主要属性如表颜色等，主要属性如表2-1所示。所示。 标记属性功能background=URL设置网页的背景图片bgcolor=colorvalue设置网页的背景颜色text=colorvalue设置文本的颜色link=colorvalue设置尚未被访问过的超文本链接的颜色，默认为蓝色vlink=colorvalue设置已被访问过的超文本链接的颜色，默认为紫色alink=colorvalue设置超文本链接在被单击的瞬间的颜色，默认为红
26、色bgproperties =fixed设置背景是否随滚动条滚动leftmargin=size设置网页左边的空白topmargin=size设置网页上方的空白margingwidth=size设置网页空白的宽度marginheight =size设置网页空白的高度表2-1 BODY标记属性值2.2.2 段落格式化段落格式化1标题标记格式：格式：，功能：设置各种大小不同标题的标记。功能：设置各种大小不同标题的标记。2段落标记格式：格式：功能：设置段落标记。功能：设置段落标记。3预定义格式标记格式：格式：功能：在浏览器中浏览时，按照文档中预先排好的功能：在浏览器中浏览时，按照文档中预先排好的形式显
27、示内容。形式显示内容。2.2.2 段落格式化段落格式化4分区显示标记格式：格式：功能：分区显示标记。功能：分区显示标记。5换行标记格式：格式：功能：强制换行。功能：强制换行。6水平线标记水平线标记格式：格式：功能：插入水平线标记。功能：插入水平线标记。7注释标记格式：格式：功能：注释标记。功能：注释标记。标题标记标题标记 标题示例！标题示例！ hello world! hello world! hello world! hello world! hello world! hello world!标题标记标题标记预定义格式标记预定义格式标记 显示显示<p>与与<pre>的
28、区别的区别 春晓春晓 春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。 夜来风雨声，花落知多少。夜来风雨声，花落知多少。 春晓春晓 春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。 夜来风雨声，花落知多少。夜来风雨声，花落知多少。 预定义格式标记预定义格式标记水平线标记水平线标记标记属性功能align=alignstyle设置对齐方式。alignstyle的取值为：left，right，centersize =size设置线条宽度（即高度）width=size设置线条长度color=colorvalue设置线条颜色，默认为黑色noshade设置线条是否有阴影表2-2 属性值 注释标记 标记的使
29、用标记的使用 三种标记的使用！三种标记的使用！ 我在中间！我在中间！中间中间 我在左边！我在左边！左边左边 我在右边！我在右边！右边右边 注释标记2.2.3 建立列表建立列表1有序列表格式：格式： 功能：建立有序列表。功能：建立有序列表。2.2.3 建立列表建立列表2无序列表格式：格式： 功能：建立无序列表。功能：建立无序列表。2.2.3 建立列表建立列表 计算机新书计算机新书 ASP程序设计程序设计 HTML网页设计网页设计 FrontPage使用指南使用指南 英语新书英语新书 外经贸英语外经贸英语 实用英语翻译实用英语翻译 朗文英语语法朗文英语语法 2.2.3 建立列表建立列表2.2.3
30、建立列表建立列表3自定义列表自定义列表除了上述两种列表以外，还可以根据需要自定义列除了上述两种列表以外，还可以根据需要自定义列表样式。格式为：表样式。格式为： 2.2.4 字符的格式化字符的格式化1字体设置标记字体设置标记格式：格式：功能：设置字体格式标记。功能：设置字体格式标记。标记提供了几种属性，如表标记提供了几种属性，如表2-3所示，所示，使用它们可以很容易的设置字体的大小、使用它们可以很容易的设置字体的大小、颜色、字型等。颜色、字型等。2.2.4 字符的格式化字符的格式化标记属性标记属性功能功能size=size设置文字的大小设置文字的大小face=fontstyle设置字体设置字体c
31、olor=colorvalue设置文字的颜色设置文字的颜色表2-3 属性值2.2.4 字符的格式化字符的格式化 我是我是<font>标记！标记！我是我是<h1>标记！标记！ 我是我是<U>标记！标记！ 我是我是<S>标记！标记！ 我是我是<B>标记！标记！ 我是我是<I>标记！标记！ 我是我是<BLINK>标记！标记！2.2.4 字符的格式化字符的格式化2.3.1 加入图像、视频、动画加入图像、视频、动画v1插入图像插入图像当使用当使用插入图像时，含有的属性如下表。插入图像时，含有的属性如下表。标记属性功能sr
32、c =URL通过URL给出图像来源的位置，不可缺省width=size设置图像宽度height =size设置图像高度alt= txt设置在图像未载入前图片位置显示的文字border= size设置图像边框，缺省为0align=alignstyle对齐方式。取值：top，middle，bottom，left，righthspace=size设置图片左右边沿空白vspace=size设置图片上下边沿空白2.3.1 加入图像、视频、动画加入图像、视频、动画2插入视频插入视频使用使用插入视频或动画时，属性如表。插入视频或动画时，属性如表。标记属性功能dynsrc=URL设置多媒体来源位置loop=s
33、ize设置视频播放的次数loopdelay=time设置两次播放的间隔时间start=value指定何时开始播放视频文件2.3.2 加入超级链接加入超级链接格式：格式：功能：在当前页和其他页间建立超链接。功能：在当前页和其他页间建立超链接。主要属性如表所示。主要属性如表所示。标记属性功能href=URL给定链接目标的位置target=frametarget设置显示链接目标的框架accesskey=character设置快捷键tabindex=num设置Tab键的顺序rel=linktype设置到链接的关系2.4.1 建立表格建立表格格式：格式： 功能：创建表格。功能：创建表格。在浏览器中显示时
34、，表格的整体外观由该标在浏览器中显示时，表格的整体外观由该标记的属性决定，主要属性如表记的属性决定，主要属性如表2-8所示。所示。标记属性功能border=size设置表格边框大小width= size设置表格的宽度height=size设置表格的高度cellspacing=size设置单元格间距cellpadding =size设置单元格的填充距background =URL设置表格背景图片bgcolor =colorvalue设置表格背景色align=alignstyle设置对齐方式cols =size设置表格的列数2.4.1 建立表格建立表格2.4.2 定制表格定制表格使用使用只是定义空
35、表格，还需要定义只是定义空表格，还需要定义行和单元格。行和单元格。格式：格式：功能：定义表格的一行。功能：定义表格的一行。对于每一行，可以定义行属性。对于每一行，可以定义行属性。2.4.2 定制表格定制表格标记属性功能bgcolor=colorvalue设置行背景颜色align=alignstyle设置行对齐方式valign=valignstyle设置单元格垂直对齐方式表2-9 中行的属性2.4.2 定制表格定制表格格式：格式：功能：定义表格中的单元格。功能：定义表格中的单元格。对于每一个单元格，主要属性如表所示。对于每一个单元格，主要属性如表所示。 标记属性功能bgcolor=colorva
36、lue设置单元格背景颜色rowspan=num设置单元格所占的行数colspan =num设置单元格所占的列数align =alignstyle设置对齐方式valign =valignstyle设置单元格垂直对齐方式width =size设置单元格宽度height=size设置单元格高度2.4.2 定制表格定制表格多层表格嵌套实例！多层表格嵌套实例！ 跟我跟我学网页制作学网页制作 2.4.2 定制表格定制表格 基础知识简介基础知识简介 第一讲第一讲 HTML简介简介 第二讲第二讲 HTML标记标记 第三讲第三讲 CSS基础基础 2.4.2 定制表格定制表格 HTML最新课堂最新课堂 高级应用技
37、术高级应用技术 多层多层表格嵌套示例表格嵌套示例2.4.2 定制表格定制表格2.5.1 表单的结构表单的结构在在Web网页上，包含各式各样的输入表单（网页上，包含各式各样的输入表单（FORM）。）。格式：格式：功能：定义表单。功能：定义表单。在在中要包含很多控件来实现整个表单的交互功能，中要包含很多控件来实现整个表单的交互功能，另外另外标记还有很多的属性来协助完成此项功能。标记还有很多的属性来协助完成此项功能。2.5.2 FORM中常用的标记中常用的标记1输入域（1）单行输入域。）单行输入域。格式：格式：功能：功能：单一标记，是表单中提供给用户进行单一标记，是表单中提供给用户进行输入的一种形式
38、。输入的一种形式。 标记属性功能type= inputtype设置输入域的类型name=cdata设置表项的控制名，在表单处理时起作用（适用于除submit和reset外的其他类型）size=num设置表单域的长度maxlength =num设置允许输入的最大字符数（适用于text和password类型）value=cdata设置输入域的值（适用于radio和checkbox类型）checked设置是否被选中（适用于radio，button，checkbox类型）标记的属性值2.5.2 FORM中常用的标记中常用的标记 1）text类型。类型。 2）password类型。类型。 3）radio
39、类型。类型。 4）checkbox类型。类型。 5）submit类型。类型。 6）reset类型。类型。 7）hidden类型。类型。2.5.2 FORM中常用的标记中常用的标记（2）多行输入域。）多行输入域。格式为：格式为：功能：定义多行文本输入域。主要属性如表功能：定义多行文本输入域。主要属性如表2-12所示。所示。标记属性功能name=cdata设置FORM提交的输入信息的名称rows=num设置文本域的行数cols= num设置文本域的列数tabindex=num设置tab键的次序2.5.2 FORM中常用的标记中常用的标记2按钮按钮定义按钮时，除了可以使用定义按钮时，除了可以使用标记
40、外，标记外，还可以使用还可以使用标记，此标记为非标记，此标记为非表单控件的行内标记。表单控件的行内标记。格式：格式：功能：功能：定义按钮。定义按钮。主要属性如表主要属性如表2-13所示。所示。 属性值标记属性功能name=cdata设置已发送表单的关键字value=cdata设置已发送表单的值type= buttontype设置按钮的类型tabindex=num设置tab键的次序2.5.2 FORM中常用的标记中常用的标记3选择域格式：格式： 选项一选项一 选项二选项二 功能：定义选择栏。功能：定义选择栏。 属性值标记属性功能name=cdata设置选择栏的名字size=num设置在选择栏中一
41、次可见的选项个数multiple设置选项栏是否支持多选属性值标记属性功能value=cdata设置选项的默认值selected表示此选项为预置项2.5.2 FORM中常用的标记中常用的标记选择域选择域! 请选择喜欢的颜色请选择喜欢的颜色: 红色红色 蓝色蓝色 绿色绿色 黑色黑色 白色白色 紫色紫色 2.6.1 框架结构的文件格式框架结构的文件格式 2.6.2 框架结构标记的使用框架结构标记的使用格式：格式：功能：定义一个框架容器。主要属性见表。功能：定义一个框架容器。主要属性见表。 标记属性功能rows=size设置多重框架的高度cols =size设置多重框架的宽度onload=script
42、设置框架被载入的事件onunload=script 设置框架被卸载的事件2.6.3 FRAME标记标记格式：格式：功能：在网页中定义框架。功能：在网页中定义框架。FRAME是一个单一标记，使用时放在是一个单一标记，使用时放在FRAMESET的开始和结束标记之间。它有的开始和结束标记之间。它有6个属性来描述每个子窗口的风格，属性值个属性来描述每个子窗口的风格，属性值的功能如表所示。的功能如表所示。主要属性值标记属性功能src=URL设置要链接到的HTML文件name=framename表示子窗口的名字marginheight= size用来控制显示内容和窗口上下边界的距离，默认为1scrolli
43、ng=scrollingstyle指定子窗口是否使用滚动条，有YES/NO/AUTO三个值，默认为AUTO，即根据窗口内容决定是否有滚动条noresize使用该属性后，指定窗口不能调整窗口大小2.6.4 TARGET属性的使用属性的使用1用于用于A标记标记在在A标记中，除了指定被链接的文件之外，还可以用标记中，除了指定被链接的文件之外，还可以用TARGET属性指定被链接的文件显示在哪个子窗口。语法如下：属性指定被链接的文件显示在哪个子窗口。语法如下：A HREF = TARGET = WINDOWS_NAME2用于用于BASE标记标记如果在同一个文件中有多个链接都指向同一个子窗口，那么使如果在
44、同一个文件中有多个链接都指向同一个子窗口，那么使用用BASE语句将更简单。语法如下：语句将更简单。语法如下：BASE TARGET= WINDOWS_NAME3用于用于FORM标记标记如果想把提交表单的结果放在指定的窗口，可以在如果想把提交表单的结果放在指定的窗口，可以在FORM标记标记中使用中使用TARGET属性。属性。FORM ACTION = TARGET = WINDOWS_NAME2.6.4 TARGET属性的使用属性的使用 2.6.4 TARGET属性的使用属性的使用2.7 CSS基础基础2.7.1 CSS样式简介样式简介2.7.2 CSS样式表的定义样式表的定义2.7.3 在在H
45、TML中加入中加入CSS的方法的方法2.7.1 CSS样式简介样式简介 CSS样式样式 CSS样式文本！样式文本！arial，12pt，normal，blue！ 2.7.1 CSS样式简介样式简介2.7.2 CSS样式表的定义样式表的定义1通过通过HTML标记定义标记定义2用用id属性定义样式表属性定义样式表 3使用使用class定义样式表定义样式表2.7.2 CSS样式表的定义样式表的定义 css实例实例 CSS基础基础 定义定义HTML标记样式表标记样式表 2.7.2 CSS样式表的定义样式表的定义2.7.2 CSS样式表的定义样式表的定义使用使用class方法定义方法定义P使用使用id方
46、法定义方法定义FONT！2.7.2 CSS样式表的定义样式表的定义2.7.3 在在HTML中加入中加入CSS的方法的方法1嵌入式样式表嵌入式样式表2内联式样式表内联式样式表3外联式样式表外联式样式表4输入式样式表输入式样式表2.7.4 2.7.4 网页布局的方法网页布局的方法1通过表格来布局通过表格来布局 2通过通过DIV与层叠样式表与层叠样式表CSS布局布局 3通过框架来布局通过框架来布局 2.8 XML2.8 XML基础基础vXML简介简介vXML文档的结构文档的结构vXML语法规则语法规则vXML元素和属性的对比元素和属性的对比vXML在在HTML中的应用中的应用2.8.1 XML2.8
47、.1 XML简介简介 vXML（Extensible Markup Language，可扩展标记语言）类似于可扩展标记语言）类似于HTML，是一种纯，是一种纯文本标记语言，可以被任何纯文本处理器文本标记语言，可以被任何纯文本处理器编辑。编辑。 vHTML的设计目的是显示数据，它关心的是的设计目的是显示数据，它关心的是数据的布局和外观，而数据的布局和外观，而XML的设计目的是的设计目的是传输和存储数据，对数据进行结构化，其传输和存储数据，对数据进行结构化，其关心的是数据的内容。关心的是数据的内容。 vXML通常用于简化通常用于简化Web开发中的数据存储开发中的数据存储和交换。和交换。 2.8.2
48、 XML2.8.2 XML文档的结构文档的结构 . 2.8.2 XML2.8.2 XML文档的结构文档的结构 你好！很高兴认识你！你好！很高兴认识你！ 我发了一份文件给你，稿件文档请详见附件。我发了一份文件给你，稿件文档请详见附件。 http:/localhost/wenjian/document.doc 2.8.2 XML2.8.2 XML文档的结构文档的结构2.8.3 XML2.8.3 XML语法规则语法规则 vXML文档标记对大小写敏感文档标记对大小写敏感 v元素的开始标记和结束标记必须成对出现元素的开始标记和结束标记必须成对出现 vXML元素的属性取值必须用引号括起来元素的属性取值必须
49、用引号括起来 v元素名称可以随意定义，但是也要遵循一元素名称可以随意定义，但是也要遵循一些命名规则些命名规则 v标记名称可以包含字母、数字以及其他字标记名称可以包含字母、数字以及其他字符，但是不能以数字或者标点符号开头，符，但是不能以数字或者标点符号开头，也不能以特殊保留字符（如也不能以特殊保留字符（如“xml”）开头，）开头，并尽量避免使用并尽量避免使用“-”、“.”、“:”等容易产等容易产生歧义的字符，名称中也不能包含空格生歧义的字符，名称中也不能包含空格 2.8.4 XML2.8.4 XML元素和属性的对比元素和属性的对比 v 在在XML文档中应尽量使用元素来描述数据，仅使用属性来文档中
50、应尽量使用元素来描述数据，仅使用属性来提供与数据无关的信息。提供与数据无关的信息。 2013 9 15 . 2.8.5 XML2.8.5 XML在在HTMLHTML中的应用中的应用 v是是HTML标记不是标记不是XML元素，元素，HTML表格内部的表格内部的span元素使用元素使用datafld属性和相属性和相应的应的XML元素相互绑定。也可以将元素相互绑定。也可以将XML元元素单独存在一个文件中，然后使用素单独存在一个文件中，然后使用标记引入外部文件，如果要绑定到表格上，标记引入外部文件，如果要绑定到表格上，使用表格的使用表格的datasrc属性标出使用的数据源属性标出使用的数据源是哪一个。