C#WEB开发技术.ppt

1、Visual C#.net web 应用程序设计,第1章 .net框架与ASP.NET概述,1.1 .net简介 .net在微软内部被称为第二次重要转折，是从MS-DOS向Windows转化后的又一次策略上的大变换 1.1.1 .net 一方面，.net代表着计算模式的转变 另一方面，.net带来了软件服务化的商业模式。 总体说来，.net就是一个应用基础平台，它包括一组软件产品、技术和服务，用来连接信息、人、系统和各种设备，连接的主要方式是Web Service，其最终目的就是让用户在任何地方，任何时间，以及利用任何设备都能访问所需的信息、文件和程序。用户不需要知道这些文件放在什么地方，只需

2、要发出请求后接收即可，而所有后台的复杂性是完全屏蔽起来的。,第1章 .net框架与ASP.NET概述,1.1.2 .net框架概述 .net框架包含两个最基本的部分：公共语言运行库CLR和.net类库CL。 公共语言运行库是.net框架的基础，可以将它看成一个程序执行时的容器，提供内存管理、线程管理和远程处理等核心任务。用户编写的程序并不是直接编译为windows可以执行的二进制文件，而是编译为CLR能够执行的中间语言IL，然后由CLR来执行。 托管代码与非托管代码,第1章 .net框架与ASP.NET概述,.net类库是一组广泛的、面向对象的、可重用类的集合，可以为应用程序提供各种高级的组件

3、和服务。它主要包括以下组件和服务： ADO.NET组件 XML组件 Windows表单组件 ASP.NET Web组件 ASP.NET应用服务 XMLWeb服务 系统框架服务,第1章 .net框架与ASP.NET概述,第1章 .net框架与ASP.NET概述,1.2 Web服务与Web程序设计模式 Web程序或网站的运行方式不同于普通的Windows应用程序 1.2.1 Web服务与动态网页 网页的内容是存放在服务器上的，服务器是网络中的一台主机，由于它提供Web、FTP等网络服务，因此称为服务器。 当用户在地址栏中输入地址时，浏览器会向服务器发送HTTP请求，这个请求使用HTTP协议，其中包

4、括请求的主机名、HTTP版本号、端口、虚拟目录、网页名称等信息。服务器在收到请求信息后，将回复的信息准备好，再通过网络传递给客户端浏览器。客户端浏览器在接收到服务器传递的信息后，将其解释并显示在浏览器的窗口中。,第1章 .net框架与ASP.NET概述,第1章 .net框架与ASP.NET概述,在这个过程中，如果在服务器上存放的网页为静态HTML网页文件，服务器会原封不动地传递回网页的内容，如果存放的是动态网页，如ASP,JSP,APS.NET等文件，则服务器会执行动态网页的代码，执行的结果将生成一个HTML文件，然后将其传递给客户端浏览器。 动态网页和静态网页的根本区别在于服务器端传递给客户

5、端浏览器的HTML文件是事先存储好的还是由动态网页程序生成的。静态网页文件里只有HTML标记，动态网页文件里不仅有HTML标记，并且还含有程序代码。,第1章 .net框架与ASP.NET概述,1.2.2 浏览器/服务器模式及其优点 这种软件架构主要利用了不断成熟的WWW浏览器技术，结合动态网站制作技术，通过通用浏览器实现了原来需要复杂的专用软件才能实现的强大功能，节约了开发成本，是一种全新的软件系统构造技术。,第1章 .net框架与ASP.NET概述,1.2.3 常见动态网页制作技术 目前，使用比较多的动态网页制作技术有ASP,ASP.NET,JSP,PHP等。 ASP：ASP的核心是脚本语言

6、，这决定了它的先天不足，即它无法进行像传统编程语言那样的底层操作，ASP通过解释执行，运行效率较低，脚本代码与HTML代码混在一起，不利于开发人员进行管理与维护。 JSP：是Sun公司推出的一种动态网页技术标准，它主要的编程脚本为Java。 PHP： ASP：是微软继ASP后推出的全新动态网页制作技术,第1章 .net框架与ASP.NET概述,1.3 ASP.NET技术概述 ASP.NET采用编译方式。大规模地应用了缓存技术，它采用事件机制，最大限度地实现了处理逻辑与显示代码分离。ASP.NET提供了功能强大的服务器控件。ASP.NET AJAX内建支持，.net中连接数据库的类库由ADO升级

7、到ADO.NET，ASP.NET是一个完全面向对象的系统。ASP.NET支持多语言开发。,第1章 .net框架与ASP.NET概述,1.3.1 搭建ASP.NET的运行环境 ASP.NET Web应用程序是由多个ASP.NET页面、相关配置文件及其他成分组成的。页面的扩展名为aspx，页面程序运行在服务器端，需要一系列的运行环境支持。如图所示。,ASP.NET应用程序,IIS6.0网站服务器,.NET Framework,操作系统,IE6.0浏览器,第1章 .net框架与ASP.NET概述,1 操作系统 ASP.NET被推荐运行在Windows操作系统上。ASP.NET可以运行的操作系统如下：

8、 Windows2000 Windows XP Professional Windows Server 2003 Windows Vista Windows Server 2008 Windows 7,第1章 .net框架与ASP.NET概述,2 Web服务器 运行ASP.NET应用程序需要 IIS6.0以上版本的Web服务器。 3 .NET环境 要正常运行ASP.NET需要在计算机上安装.NET运行环境，即.NET Framework。ADO.NET需要安装微软数据访问组件MDAC2.7以上的版本。,第1章 .net框架与ASP.NET概述,1.3.2 网站根目录、虚拟目录与ASP.NET页

9、面 1、Web应用程序 Web应用程序和一般的Windows程序一样，由许多的文件组成，只不过Web应用程序的文件由Web页面及其他相关配置文件组成，并且需要在Web服务器上才能正常运行。 在一个Web服务器上可以运行多个网站，但每一个网站端口或者IP地址都应该不相同。每个网站只有一个根目录，可以有多个虚拟目录，每个虚拟目录可以运行一个Web应用程序。通常情况下，IIS中一个虚拟目录下的所有文件组成一个Web应用程序，不同的虚拟目录代表着不同的Web应用程序。,第1章 .net框架与ASP.NET概述,2、创建C#Web程序设计网站 3、创建虚拟目录 4、创建一个ASP.NET页面 1.3.3

10、 安装ASP.NET的开发环境 1、安装Visual Studio 2、安装MSDN帮助 3、启动Visual Studio,第1章 .net框架与ASP.NET概述,1.3.4 使用Visual Studio创建Web应用程序 1、创建Web应用程序 2、编辑、编译应用程序 3、发布应用程序 复制网站 发布网站,第1章 .net框架与ASP.NET概述,IIS6.0网站的目录管理 在较小的Web网站上，Web内容文件通常包含在一个目录树下，管理起来并不复杂。较大的Web网站通常将HTML内容文件、Web应用程序及数据库存储在同一计算机的若干个目录中，或者网络中多个计算机上的多个目录中，目录管

11、理就不那么简单了，为使其他目录中的内容和信息也能够通过Web网站发布，应创建虚拟目录，当然也可在主目录或虚拟目录的物理目录下直接创建目录来管理内容,第1章 .net框架与ASP.NET概述,1、虚拟目录与物理目录 虚拟目录实际上并不包含在主目录中，但在显示给客户浏览器时就像是位于主目录中一样。虚拟目录有一个别名，供Web浏览器访问此目录，别名通常比目录的路径短，更便于用户输入。使用别名更安全，因为用户不知道文件是否真的存在于服务器上，所以无法使用这些信息来修改文件。使用别名可以更方便地移动和修改网站中的目录结构，一旦要更改目录，只需更改别名与目录实际位置的映射即可。可将主目录看成网站的“根”虚

12、拟目录。,第1章 .net框架与ASP.NET概述,与虚拟目录不同，物理目录就是直接在文件系统中创建的真实目录，它可映射为不同的主目录或虚拟目录。用户可以直接在Windows系统中创建和删除物理目录，也可在IIS管理器中管理物理目录。在IIS管理器中展开某个主目录或虚拟目录时，其对应的物理目录中的内容也将显示出来。,第2章 Web开发基础,本章重点 HTML标记的使用 DIV+CSS页面布局 HTML/XHTML是网页设计语言，CSS是描述页面外观的层叠样式表，DIV+CSS模式是当面页面布局的主流技术,第2章 Web开发基础,2.1 HTML简介 2.1.1 HTML HTML（Hyper

13、Text Markup Language，超文本标记语言）是描述网页的标记语言。XHTML是更严格、更纯净的HTML版本，符合W3C标准，HTML4.1与XHTML几乎是相同的。HTML大约有一百多个标记，这些标记用于描述HTML文档中数据的显示格式。HTML网页是HTML标记语言描述的文本文件。HTML文件由Web服务器发送给客户端浏览器，客户端浏览器按HTML描述的格式将其显示在浏览器窗口内，HTML文件通过HTTP协议，使HTML文件可以在因特网上进行文件交换和访问。 HTML文件是纯文本文件。,第2章 Web开发基础,2.1.2 URL URL（Uniform Resource Loc

14、ators，统一资源定位器）是Internet中资源的简单命名机制。它由三部分组成：协议、主机DNS名或IP地址、文件名。 URL的优点在于，可明确指定使用Internet服务的协议，每个文档、程序、其他文件都有各自的地址。,第2章 Web开发基础,URL支持的协议 file 资源是本地计算机上的文件。格式file:/ ftp 通过 FTP访问资源。格式 FTP:/ gopher 通过Gopher协议访问该资源。 http 通过HTTP访问该资源。 格式 HTTP:/ https 通过安全的HTTPS访问该资源。 格式 HTTPS:/ mailto 资源为电子邮件地址，通过 SMTP 访问。

15、格式 mailto: mms 通过支持MMS（流媒体）协议的播放该资源。（代表软件：Windows Media Player）格式 MMS:/ ed2k 通过支持ed2k（专用下载链接）协议的P2P软件访问该资源。（代表软件：电驴） 格式 ed2k:/flashget 通过支持Flashget:（专用下载链接）协议的P2P软件访问该资源。（代表软件：快车） 格式 Flashget:/ thunder 通过支持thunder（专用下载链接）协议的P2P软件访问该资源。（代表软件：迅雷） 格式 thunder:/ news 通过 NNTP 访问该资源。 tencent 通过支持tencent(专用

16、聊天连接) 协议和用户对话。(代表软件：QQ、TM)格式 tencent:/message/?uin=号码&Site=&Menu=yes msnim 通过支持msnim(专用聊天连接) 协议和用户对话。(代表软件：MSN、WLM) 格式 msnim:chat?contact=邮箱地址,第2章 Web开发基础,2.1.3 HTML文件结构 1、HTML的标记与属性 HTML标记又称标签，是用”括起来的标识符，括号中间的标识符为标记名称。 HTML标记通过指定某块信息为段落或标题等来标识文档的某个部分。 HTML标记分为单标记和成对标记两种。成对标记有开始标记和结束标记,并配套使用，成对标记只作用

17、于开始标记和结束标记之间的文档。单标记只有开始标记。 属性是标记中的参数选项，大多数标记有一些自己的属性，有些标记有一些共用的属性，各属性之间无先后顺序，如果省略属性则采用默认值。属性的一般使用格式如下： ,第2章 Web开发基础,一个标记可以有多个属性，它们都被放置在起始标记内 一个属性一般只在定义它的标记范围内起作用，但对于嵌套的标记结构，外层样式表单的某些属性可能被内层标记继承 不同的标记所拥有的属性是不同的，有些属性为某一标记所独有，有些属性为某几个标记所共有，有些属性是绝大多数标记都有的，它们称为通用属性，HTML定义了6个通用属性，它们是： ID:文档范围内的标识符 CLASS：给

18、一个标记指定一个或多个类名 LANG：文档的语言信息 DIR：文档文字的走向信息 TITLE：关于标记的简短说明 STYLE：给出标记的样式,第2章 Web开发基础,2、文档头与文档体 HTML文件必须由标记开头，标记结束。一个完整的HTML文档分为文档头和文档体两部分。文档头信息包含在之间，包括有关此网页的标题、导入样式表等信息。文档体包含在之间，是网页的主体部分。,第2章 Web开发基础,3、标记与颜色设定 文档体标记有影响整个网页显示方式的属性，颜色设置通常有两种形式，一种是直接表示法，另一种是RGB三色表示法，用三组十六进制数的RGB值表示，如#FF0000，#00FF00，#0000

19、FF。,第2章 Web开发基础,2.2 常用的HTML标记 2.2.1 HTML的文字标记 1、标记 该标记在之间，标记之间的内容将显示在浏览器的标题栏中。 2、标记 是一个段落的开始标记 段落文字 是换行标记 用于插入一条水平线 ,第2章 Web开发基础,3、标记 用来设置网页中标题的文字，标题分为6级，用hn标记中的n：16表示。 标题内容 4、标记 用来控制文字的字体、大小和颜色 5、标记 分别表示文字的粗体、斜体、下划线标记，可以组合使用。,第2章 Web开发基础,6、标记 分别是文本的下标和上标标记 2.2.2 特殊标记和图形标记 1、表示双引号 2、标记 注释标记,第2章 Web开

20、发基础,3、标记 用来在网页中显示图形。图形文件与网页文件是分别存储的，可以通过标记将图形显示在网页中。 4、标记 对象居中标记，凡在此标记中间的对象都会被居中输出。,第2章 Web开发基础,2.2.3 超链接标记 标记为超链接标记，一般使用格式如下: 超链接显示名称 Href属性取值为链接的目标地址，可以是绝对路径，也可以是相对路径。 Target属性取值为链接的目标窗口，可以是_parent、_blank、_self、_top等值，也可以是窗口名称或id Title属性取值为指向链接时所显示的标题文字,第2章 Web开发基础,2.3表格 2.3.1 定义表格的基本语法 在HTML中表格是通

21、过表格标记、行标记、列标题标记和列内容标记等配合使用来定义的。,第2章 Web开发基础,2.3.2 表格标记的属性 Align属性为表格在页面上水平摆放的位置 Border属性取值单位为像素，值为表格边框的宽度 Cellpadding属性取值单位为像素，值为单元格内容与单元格边界之间的空白距离 Cellspacing属性取值单位为像素，值为单元格之间的距离 Width属性为表格宽度，取值单位为像素或页面宽度的百分比 Heigth属性为表格高度，取值单位为像素或页面高度的百分比 Frame属性为表格四周边框的显示状态，取值为box、void、hsides、vsides、alove、below、r

22、hs、lhs Rules属性为表格内分隔线的显示方式，取值为all、groups、rows、cols、none。,第2章 Web开发基础,2.3.3行标记的属性 Align属性 Valign属性：行内容的垂直对齐方式 Bgcolor属性取值为行的背景色 Bordercolorlight属性取值为行的亮边框颜色 Bordercolordark属性取值为行的暗边框颜色 Height属性 2.3.4单元格和标记的属性,第2章 Web开发基础,补充：有序表与无序表 创建一个有序列表，创建一个无序列表。对于有序列表和无序列表，表中的每一项由元素定义。浏览器自动给有序表中的项目冠以序号，给无序表中的项目冠

23、以黑点，并且缩进编排。 常见属性 Type属性：适用于，用以给出表项的样式信息 Start属性：适用于元素，用以给出有序表中首项的起始编号,第2章 Web开发基础,补充：表单 表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。表单使用表单标签（）定义。,第2章 Web开发基础,输入 多数情况下被用到的表单标签是输入标签（）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下 文本域（Text Fields） 当用户要在表单中键入字母、数字等内容时，就会用到文本域。,第2章 Web开发基础,单选按钮（Radi

24、o Buttons） 当用户从若干给定的的选择中选取其一时，就会用到单选框。,第2章 Web开发基础,复选框（Checkboxes） 当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。,第2章 Web开发基础,表单的动作属性（Action）和确认按钮 当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。假如您在下面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 html_form_action.asp 的页面。该页面将显示出输入的结果。,第2章 Web开发基础

25、,第2章 Web开发基础,第2章 Web开发基础,第2章 Web开发基础,2.4 页面布局 页面布局技术是Web应用程序开发的关键技术之一，DIV+CSS页面布局模式是w3c标准的一个典型应用，具有许多功能上的优势。 2.4.1CSS简介 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一个样式表,第2章 Web开发基础,样式解决了一个普遍的问题 HTML

26、标签原本被设计为用于定义文档内容。通过使用 、 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。 由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。 为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。 所有的主流浏览器均支持层叠样式表

27、。,第2章 Web开发基础,样式表极大地提高了工作效率 样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。 由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。,第2章 Web开发基础,多重样式将层叠为一个 样式表允许以

28、多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。 层叠次序 当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？ 一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。 1浏览器缺省设置 2外部样式表 3内部样式表（位于 标签内部） 4内联样式（在 HTML 元素内部） 因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览

29、器中的样式声明（缺省值）。,第2章 Web开发基础,CSS 语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。,第2章 Web开发基础,第2章 Web开发基础,多重声明： 提示：如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师

30、会在每条声明的末尾都加上分号，这么的好处是，当你从现有的规则中增减声明时，会尽可能的减少出错的可能性。就像这样：,第2章 Web开发基础,空格和大小写 大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑： 是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。,第2章 Web开发基础,选择器的分组 你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。

31、在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。,第2章 Web开发基础,id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 # 来定义。,第2章 Web开发基础,CSS 类选择器 在 CSS 中，类选择器以一个点号显示,第2章 Web开发基础,如何插入样式表 当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种 外部样式表 内部样式表 内联样式,第2章 Web开发基础,外部样式表 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整

32、个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。,第2章 Web开发基础,内部样式表 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 标签在文档头部定义内部样式表，就像这样:,第2章 Web开发基础,内联样式 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。 要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。,第2

33、章 Web开发基础,伪类 伪类用来表示动态事件、状态改变或在文档中以其他方法不能轻易实现的情况。伪类对目标元素中出现的某种特殊状态应用样式，例如超链接等。伪类允许设计人员自由指定元素在一种状态下的外观。与普通类不同，伪类属性的前面只能有一个冒号。 伪类语法,第2章 Web开发基础,锚伪类 在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。 a:link color: #FF0000 /* 未访问的链接 */ a:visited color: #00FF00 /* 已访问的链接 */ a:hover color:

34、#FF00FF /* 鼠标移动到链接上 */ a:active color: #0000FF /* 选定的链接 */ 提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 提示：伪类名称对大小写不敏感。,第2章 Web开发基础,第2章 Web开发基础,应用字体外观,第2章 Web开发基础,操作文本显示,第2章 Web开发基础,背景色和背景图像,第2章 Web开发基础,盒模型：控制外边距、边框、内边距、宽度和高度 CSS中的盒模型是基于CSS的We

35、b设计中取重要的概念之一。盒模型是针对HTML元素的一组规则，指定了元素的高度、宽度、内边距、边框和外边距是如何度量的。 CSS盒模型是定义元素周围的间隔、尺寸、外边距、边框以及元素内容和边框之间内边距的一组属性的集合。,第2章 Web开发基础,第2章 Web开发基础,元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。 提示：背景应用于由内容和内边距、边框组成的区域。 在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域

36、的尺寸，但是会增加元素框的总尺寸。,第2章 Web开发基础,假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：,第2章 Web开发基础,使用margin属性使页面居中,第2章 Web开发基础,CSS浮动 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。,第2章 Web开发基础,当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：,第2章 Web开发基

37、础,当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。,第2章 Web开发基础,如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：,第2章 Web开发基础,CSS float 属性 在 CSS 中，我们通过 float 属性实现元素的浮动。 float 属性定义元

38、素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。,第2章 Web开发基础,行框和清理 浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框,第2章 Web开发基础,CSS 定位 (Positioning) CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想

39、很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。,第2章 Web开发基础,一切皆为框 div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。 您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所

40、有内容就不再显示，不占用文档中的空间。,第2章 Web开发基础,CSS 定位机制 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。 块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。 行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。,第2章 Web开发基

41、础,CSS position 属性 通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。 position 属性值的含义： static 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 relative 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 absolute 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它

42、在正常流中生成何种类型的框。 F ixed 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。,第3章 Web窗体,本章内容 了解Web窗体的概念与技术优点 理解Web窗体的代码分离技术，掌握代码内联与后台编码 理解Web窗体的事件驱动编程 了解Web窗体的处理过程及窗体事件 掌握Web窗体的常用事件编程 本章重点 Web窗体的概念及代码分离 Web窗体的事件驱动编程及窗体处理过程,第3章 Web窗体,3.1 Web窗体概述 3.1.1 Web窗体的创建 Web窗体（Web Form，Web表单）及其架构是基于.net通用运行环境的可扩展编程模型，类似于

43、C#程序设计中的Windows窗体，主要是用来生成与用户交互的界面，并实现页面内容与代码的完全分离。,第3章 Web窗体,3.1.2 Web窗体的概念与技术优点 1、Web窗体的概念 开发工具为用户提供了一个ASP.NET页面编辑界面，一个名称为Default.aspx的页面，可以将这个可视化的编程界面理解为Web窗体，它是一个ASP.NETWeb窗体在编程阶段的呈现。 ASP.NET提供的Web窗体是一个容器对象，它不仅有自己的属性、方法和事件，而且能容纳HTML服务器控件、Web服务器控件等对象。开发工具通过Web窗体架构，实现了Web页面设计中“所见即所得”。,第3章 Web窗体,ASP

44、.NET的Web窗体模型由两部分组成，即用户界面UI和实现逻辑。 用户界面中含有页面布局信息和ASP.NET服务器控件的HTML模板，它负责对浏览器上的Web窗体进行显示。 实现逻辑部分是对Web窗体进行逻辑处理的ASP.NET代码，它负责生成Web窗体上动态显示的内容，这些内容通常由用户界面部分定义的服务器控件显示。 实现逻辑和用户界面生成的HTML协同工作，可以实现完全动态的Web页面。,第3章 Web窗体,2、Web窗体的技术优点 Web窗体可以使用公共语言运行库所支持的程序语言来编写 Visual Studio集成开发环境提供了丰富的服务器控件，为页面设计提供了所见即所得的设计支持，极

45、大地提高了开发效率 丰富的服务器控件使开发者能够顺利地将页面逻辑封装至一个可重复使用的组件中，减少了开发人员必须编写的代码量 Web窗体模型将页面的显示代码和逻辑处理代码分离，从而解决了页面代码难以维护的问题 Web窗体模型包含了多状态管理的特性，可以方便地保存页面的状态 Web窗体具有可扩展性，能够很好地使用第三方控件,第3章 Web窗体,3.1.3 Web窗体的组成文件 一个Web窗体由两个文件构成，即包含HTML内容的用户界面（.aspx或ascx文件）和后台代码文件（.aspx.cs）。,第3章 Web窗体,3.2 代码内联与后台编码 ASP.NET是通过代码内联和后台编码这两种形式来

46、实现用户界面和实现逻辑的联系的。 代码内联就是将用户界面和实现逻辑放在同一个文件中 后台编码就是将实现逻辑和用户界面分别存在两个不同的文件中。 ASP.NET默认创建的页面是页面显示代码和逻辑处理代码相分离的，在添加新页面时，可以选择采用代码内联或后台编码模式。,第3章 Web窗体,3.2.1 后台编码 当执行ASP.NET页面时，.aspx文件和.aspx.cs文件会编译生成一个可执行的page对象。 每个.aspx文件都有一个Page指令，Page指令的常用属性如下： Language：指定了该页面所使用的语言 AutoEventWireup：指示控件的事件是否自动匹配。如果启用事件自动匹

47、配，则为 true；否则为 false。默认值为 true。 CodeFile：指定了该页面所关联的后台处理代码文件 Inherits：定义供页继承的隐藏代码类，可以是从Page类派生的任意类。,第3章 Web窗体,2、代码内联 代码内联是将用户界面与逻辑实现部分的代码放在一个文件中，但是逻辑部分和页面部分还是明显地区分为两个部分。其中逻辑部分包含在标记之间，并为标记添加了runat=“server”属性。用户界面部分包含在之间。在标记中添加了runat=“server”属性。 runat=server表示在服务器端运行，然后生成相应的客户端代码。普通的HTML控件，如果不加runat=ser

48、ver，直接在客户端运行。,第3章 Web窗体,3.3 ASP.NET的执行过程 当用户请求Default.aspx页面时，IIS是如何将Default.aspx与Default.aspx.cs进行组合编译生成HTML代码响应用户的请求呢。 ASP.NET页面的执行过程是一个较复杂的过程，涉及到IIS、CLR、Framework等。 1、IIS将请求转交给aspnet_isapi.dll。IIS会根据访问者请求的IP、端口、虚拟目录和文件名查找对应站点，找到站点后依据所要求的文件扩展来启动对应的IIS Extension程序处理此要求，aspx这个文件扩展名与aspnet_isapi.dll对

49、应，控制权交给aspnet_isapi.dll。,第3章 Web窗体,2、aspnet_isapi.dll转交给ASP.NET Worker Process.aspnet_isapi.dll只是一个入口，真正处理工作的是其转交的ASP.NET WP，WP首先解析访问者请求中的虚拟目录信息，决定创建或使用先前已建好的AppDomain对象来处理此请求。 3、WP将请求转交给ISAPIRuntime对象。WP将要求转送至虚拟目录对应的Application Domain中的ISAPIRuntime对象。此对象的主要功能是由ISAPI封包中解析出信息后转交给HttpRuntime对象。 4、ISAP

50、IRuntime对象将请求转交给HttpRuntime对象。 5、HttpRuntime对象将请求转交给HttpApplication对象。 6、 HttpApplication对象将请求转交给Httphandler对象 7、 Httphandler对象转交给Page对象 8、Page对象创建过程。,第3章 Web窗体,3.4 Web窗体的事件驱动编程 3.4.1事件驱动编程的概念 在DOS时代的编程模型中，程序是按顺序执行的，这类程序称为面向过程的程序设计。面向过程的应用程序一般有一个明显的开始，一个明显的过程和一个明显的结束。 事件驱动程序的最大特点就是：程序的执行不是由程序的顺序来控制的

51、，而是由事件的发生顺序来控制的。,第3章 Web窗体,启动,输入姓名,查询成绩,打印成绩,结束,消息处理,启动,结束,输入姓名,查询成绩,打印成绩,第3章 Web窗体,基于过程驱动的程序，只能让用户按照程序规定好的步骤进行操作，用户不能以任何顺序跳跃性地输入数据和使用功能。 基于事件驱动的程序，是围绕着消息的产生与处理而展开的，而消息不会以任何预定的顺序出现，因此，Windows程序设计主要是编写消息的接收与发送的响应代码。,第3章 Web窗体,Web窗体实现事件驱动的编程模型和Windows窗体中实现事件驱动编程模型的机理是不一样的。 C/S结构的Windows窗体应用程序与服务器之实现的是

52、有状态持续连接。 Web应用程序与服务器之间是通过HTTP协议来实现通信的，是无状态的断续连接。 ASP.NET的Web窗体提供了一种标准的保持状态的方式，并隐藏了实际执行的细节。其原理是，Web页面会在两次请求之间存储自己的ViewState（视图状态），ViewState保存了页面及页面上所有控件的状态值。ViewState由System.Web.UI.StateBag对象负责存储。在服务器端，将ViewState存储为一个字符串变量，返回客户端。在客户端，将ViewState存储为一个隐藏的窗体字段,第3章 Web窗体,Web窗体和服务器控件都默认支持ViewState，可以通过指令实现

53、对页面级的ViewState状态的打开或关闭。,第3章 Web窗体,3.4.2 Web窗体的处理过程及窗体事件 要学习Web窗体的事件驱动编程，必须要掌握Web窗体的处理过程及阶段发生的事件。 Web Form的扩展名是.aspx，当一个浏览器第一次请求一个aspx文件时，Web窗体将被CLR编译器编译成一个Page类并实例化，当每次请求这个页面时，这个动态创建的Page类就会实例化，从而得到一个可输出HTML页面的Page对象。这样，ASP.NET就做了一次编译多次执行。,第3章 Web窗体,一个Web窗体页面（Page对象）从实例化分配内存空间到处理结束释放内存，一般要经历10个阶段，其中

54、有一些阶段会触发Page对象的事件，这些事件各自有不同的事件处理程序。 1、页面初始化：此阶段是初始化页面生命周期内所需的设置，并生成控件树。初始化会触发Page对象的第一个事件Page_Init，可以利用这个事件处理过程重置控件的属性。Page_Iint事件只是在第一次调入页面时被调用，重新载入页面时并不触发该事件。实际应用时，一般都跳过Page_Iint，直接使用Page_OnLoad事件。,第3章 Web窗体,2、视图状态加载：在此阶段读取隐藏窗体字段的值，恢复控件的ViewState属性。 3、回传数据处理：页面加载在Request对象中缓存的窗体数据，然后更新页面和控件属性。Requ

55、est对象中缓存的窗体数据是由于用户在客户端操作控件而回传的数据。 4、页面加载：在此阶段创建控件树中的服务器控件，初始化这些控件并恢复状态，会触发Page对象的Load事件。 5、回传数据变化检查：在此阶段检查当前回传和前一次回传之间的状态改变，并发送通知，引发更改事件,第3章 Web窗体,6、回传事件处理：执行与导致回传的客户端相关联的.aspx服务器代码。 7、页面预返回：在页面输出之前，执行任意更新处理。与这个阶段相关联的Page对象事件是PreRender事件。 8、保存视图状态：页面将ViewState属性的内容序列化为一个字符串，这个字符串将作为一个隐藏域被附加到HTML页面。

56、9、页面返回：在此阶段创建呈现在客户端的HTML输出 10、页面卸载：这个阶段发生于一个窗体完成了它的任务并且准备卸载的时候，这个时候引发页面的Unload事件。,第3章 Web窗体,3.5 Web窗体的程序实例,第3章 Web窗体,补充内容 ASP.NET网页扩展名 ASP.NET网站应用程序中可以包含很多种文件类型，下表列出了文件类型及其扩展名。,第3章 Web窗体,常用页面指令 ASP.NET窗体的源视图，代码的前几行包含%.%这样的代码，叫做页面指令。页面指令用来定义ASP.NET页分析器和编译器使用的特定于该页的一些定义。在.aspx文件中常用的页面指令一般有以下几种。 1、指令 P

57、age指令可以指定页面中代码的服务器编程语言；指定页面是将服务器代码直接包含在其中，还是将代码包含在单独的文件中；调试和跟踪选项，以及页面是否为某母版页的内容页。 语法：,第3章 Web窗体,第3章 Web窗体,2、指令 Import指令用于将命名空间显式导入到ASP.NET应用程序文件中，并且导入该命名空间的所有类和接口。导入的命名空间可以是.NET Framework类库的一部分，也可以是用户定义的命名空间的一部分。 语法：,第3章 Web窗体,3、指令 Register指令创建标记前缀和自定义控件之间的关联，这为开发人员提供了一种在ASP.NET应用程序文件中引用自定义控件的简单方法。

58、语法：,第3章 Web窗体,Register指令语法中各属性的说明如下表：,第3章 Web窗体,4、指令 Control指令与Page指令基本相似，在.aspx文件中包含了Page指令，而在.ascx文件中则不包含Page指令，该文件中包含Control指令。该指令只能用于用户控件（.ascx）中。每个.ascx文件只能包含一条Control指令。此外，对于每个Control指令，只允许定义一个Language属性，因为每个控件只能使用一种语言。 语法：,第3章 Web窗体,5、指令 Master指令只能在母版页（.master文件）中使用，用于标识ASP.NET母版页。每个.master文件

59、只能包含一条Master指令。 语法：,第3章 Web窗体,第3章 Web窗体,6、指令 MasterType指令为ASP.NET页的Master属性分配类名，使得该页可以获取对母版页成员的强类型引用。 语法：,第3章 Web窗体,ASPX文件内容注释 服务器端注释（）允许开发人员在ASP.NET应用程序文件的任何部分（除了代码块内部）嵌入代码注释。服务器端注释元素的开始标记和结束标记之间的任何内容，不管是APS.NET代码还是文本，都不会在服务器上进行处理或呈现在结果页上。 如果代码块中的代码需要注释，则使用HTML代码中的注释（）。此标记用于告知浏览器忽略该标记中的语句。,第3章 Web窗体,第3章 Web窗体,服务器端注释用于页面的主体，但不在服务器端代码块中使用。当在代码声明块（包含在标记中的代码）或代码呈现块（包含在标记中的代码）中使用特定语言是，应使用用于编码的语言的注释语法。如果在块中使用服务器端注释块，则会出现编译错误。开始和结束注释标记可以出现在同一行代码中，也可以由许多被注释掉的行隔开。服务器端注释块不能被嵌套。,第3章 Web窗体,ASP.NET 服务器控件标记语法 ASP.NET服务器控件比HTML控件具有更多内置功能。Web服务器控件不仅包括窗体控件，而且包括特殊用途的控件。Web服务器控件与HTML控件