cweb开发技术专题知识讲座

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

2、即可，而全部后台复杂性是完全屏蔽起来。cweb开发技术专题知识讲座第2页第1章 .net框架与ASP.NET概述1.1.2 .net框架概述.net框架包含两个最基础个别：公共语言运行库CLR和.net类库CL。公共语言运行库是.net框架基础，能够将它看成一个程序执行时容器，提供内存管理、线程管理和远程处理等关键任务。用户编写程序并不是直接编译为windows能够执行二进制文件，而是编译为CLR能够执行中间语言IL，然后由CLR来执行。托管代码与非托管代码cweb开发技术专题知识讲座第3页第1章 .net框架与ASP.NET概述.net类库是一组广泛、面向对象、可重用类集合，能够为应用程序提

3、供各种高级组件和服务。它主要包含以下组件和服务：ADO.NET组件XML组件Windows表单组件ASP.NET Web组件ASP.NET应用服务XMLWeb服务系统框架服务cweb开发技术专题知识讲座第4页第1章 .net框架与ASP.NET概述cweb开发技术专题知识讲座第5页第1章 .net框架与ASP.NET概述1.2 Web服务与Web程序设计模式Web程序或网站运行方式不一样于普通Windows应用程序1.2.1 Web服务与动态网页网页内容是存放在服务器上，服务器是网络中一台主机，因为它提供Web、FTP等网络服务，所以称为服务器。当用户在地址栏中输入地址时，浏览器会向服务器发送

4、HTTP请求，这个请求使用HTTP协议，其中包含请求主机名、HTTP版本号、端口、虚拟目录、网页名称等信息。服务器在收到请求信息后，将回复信息准备好，再经过网络传递给客户端浏览器。客户端浏览器在接收到服务器传递信息后，将其解释并显示在浏览器窗口中。cweb开发技术专题知识讲座第6页第1章 .net框架与ASP.NET概述cweb开发技术专题知识讲座第7页第1章 .net框架与ASP.NET概述在这个过程中，假如在服务器上存放网页为静态HTML网页文件，服务器会原封不动地传递回网页内容，假如存放是动态网页，如ASP,JSP,APS.NET等文件，则服务器会执行动态网页代码，执行结果将生成一个HT

5、ML文件，然后将其传递给客户端浏览器。动态网页和静态网页根本区分在于服务器端传递给客户端浏览器HTML文件是事先存放好还是由动态网页程序生成。静态网页文件里只有HTML标识，动态网页文件里不但有HTML标识，而且还含有程序代码。cweb开发技术专题知识讲座第8页第1章 .net框架与ASP.NET概述1.2.2 浏览器/服务器模式及其优点这种软件架构主要利用了不停成熟WWW浏览器技术，结合动态网站制作技术，经过通用浏览器实现了原来需要复杂专用软件才能实现强大功效，节约了开发成本，是一个全新软件系统结构技术。cweb开发技术专题知识讲座第9页第1章 .net框架与ASP.NET概述1.2.3 常

6、见动态网页制作技术当前，使用比较多动态网页制作技术有ASP,ASP.NET,JSP,PHP等。ASP：ASP关键是脚本语言，这决定了它先天不足，即它无法进行像传统编程语言那样底层操作，ASP经过解释执行，运行效率较低，脚本代码与HTML代码混在一起，不利于开发人员进行管理与维护。JSP：是Sun企业推出一个动态网页技术标准，它主要编程脚本为Java。PHP：ASP：是微软继ASP后推出全新动态网页制作技术cweb开发技术专题知识讲座第10页第1章 .net框架与ASP.NET概述1.3 ASP.NET技术概述ASP.NET采取编译方式。大规模地应用了缓存技术，它采取事件机制，最大程度地实现了处

7、理逻辑与显示代码分离。ASP.NET提供了功效强大服务器控件。ASP.NET AJAX内建支持，.net中连接数据库类库由ADO升级到ADO.NET，ASP.NET是一个完全方面向对象系统。ASP.NET支持多语言开发。cweb开发技术专题知识讲座第11页第1章 .net框架与ASP.NET概述1.3.1 搭建ASP.NET运行环境ASP.NET Web应用程序是由多个ASP.NET页面、相关配置文件及其它成份组成。页面扩展名为aspx，页面程序运行在服务器端，需要一系列运行环境支持。如图所表示。ASP.NET应用程序IIS6.0网站服务器.NET Framework操作系统IE6.0浏览器c

8、web开发技术专题知识讲座第12页第1章 .net框架与ASP.NET概述1 操作系统ASP.NET被推荐运行在Windows操作系统上。ASP.NET能够运行操作系统以下：WindowsWindows XP ProfessionalWindows Server Windows VistaWindows Server Windows 7cweb开发技术专题知识讲座第13页第1章 .net框架与ASP.NET概述2 Web服务器运行ASP.NET应用程序需要 IIS6.0以上版本Web服务器。3 .NET环境要正常运行ASP.NET需要在计算机上安装.NET运行环境，即.NET Framewor

9、k。ADO.NET需要安装微软数据访问组件MDAC2.7以上版本。cweb开发技术专题知识讲座第14页第1章 .net框架与ASP.NET概述1.3.2 网站根目录、虚拟目录与ASP.NET页面1、Web应用程序Web应用程序和普通Windows程序一样，由许多文件组成，只不过Web应用程序文件由Web页面及其它相关配置文件组成，而且需要在Web服务器上才能正常运行。在一个Web服务器上能够运行多个网站，但每一个网站端口或者IP地址都应该不相同。每个网站只有一个根目录，能够有多个虚拟目录，每个虚拟目录能够运行一个Web应用程序。通常情况下，IIS中一个虚拟目录下全部文件组成一个Web应用程序，

10、不一样虚拟目录代表着不一样Web应用程序。cweb开发技术专题知识讲座第15页第1章 .net框架与ASP.NET概述2、创建C#Web程序设计网站3、创建虚拟目录4、创建一个ASP.NET页面1.3.3 安装ASP.NET开发环境1、安装Visual Studio2、安装MSDN帮助3、开启Visual Studiocweb开发技术专题知识讲座第16页第1章 .net框架与ASP.NET概述1.3.4 使用Visual Studio创建Web应用程序1、创建Web应用程序2、编辑、编译应用程序3、公布应用程序复制网站公布网站cweb开发技术专题知识讲座第17页第1章 .net框架与ASP.N

11、ET概述IIS6.0网站目录管理在较小Web网站上，Web内容文件通常包含在一个目录树下，管理起来并不复杂。较大Web网站通常将HTML内容文件、Web应用程序及数据库存放在同一计算机若干个目录中，或者网络中多个计算机上多个目录中，目录管理就不那么简单了，为使其它目录中内容和信息也能够经过Web网站公布，应创建虚拟目录，当然也可在主目录或虚拟目录物理目录下直接创建目录来管理内容cweb开发技术专题知识讲座第18页第1章 .net框架与ASP.NET概述1、虚拟目录与物理目录虚拟目录实际上并不包含在主目录中，但在显示给客户浏览器时就像是位于主目录中一样。虚拟目录有一个别名，供Web浏览器访问此目

12、录，别名通常比目录路径短，更便于用户输入。使用别名更安全，因为用户不知道文件是否真存在于服务器上，所以无法使用这些信息来修改文件。使用别名能够更方便地移动和修改网站中目录结构，一旦要更改目录，只需更改别名与目录实际位置映射即可。可将主目录看成网站“根”虚拟目录。cweb开发技术专题知识讲座第19页第1章 .net框架与ASP.NET概述与虚拟目录不一样，物理目录就是直接在文件系统中创建真实目录，它可映射为不一样主目录或虚拟目录。用户能够直接在Windows系统中创建和删除物理目录，也可在IIS管理器中管理物理目录。在IIS管理器中展开某个主目录或虚拟目录时，其对应物理目录中内容也将显示出来。c

13、web开发技术专题知识讲座第20页第2章 Web开发基础本章重点HTML标识使用DIV+CSS页面布局HTML/XHTML是网页设计语言，CSS是描述页面外观层叠样式表，DIV+CSS模式是当面页面布局主流技术cweb开发技术专题知识讲座第21页第2章 Web开发基础2.1 HTML介绍2.1.1 HTMLHTML（Hyper Text Markup Language，超文本标识语言）是描述网页标识语言。XHTML是更严格、更纯净HTML版本，符合W3C标准，HTML4.1与XHTML几乎是相同。HTML大约有一百多个标识，这些标识用于描述HTML文档中数据显示格式。HTML网页是HTML标识

14、语言描述文本文件。HTML文件由Web服务器发送给客户端浏览器，客户端浏览器按HTML描述格式将其显示在浏览器窗口内，HTML文件经过HTTP协议，使HTML文件能够在因特网上进行文件交换和访问。HTML文件是纯文本文件。cweb开发技术专题知识讲座第22页第2章 Web开发基础2.1.2 URLURL（Uniform Resource Locators，统一资源定位器）是Internet中资源简单命名机制。它由三个别组成：协议、主机DNS名或IP地址、文件名。URL优点在于，可明确指定使用Internet服务协议，每个文档、程序、其它文件都有各自地址。cweb开发技术专题知识讲座第23页第2

15、章 Web开发基础URL支持协议file 资源是当地计算机上文件。格式file:/ ftp 经过 FTP访问资源。格式 FTP:/ gopher 经过Gopher协议访问该资源。 http 经过HTTP访问该资源。 格式 HTTP:/ https 经过安全HTTPS访问该资源。 格式 HTTPS:/ mailto 资源为电子邮件地址，经过 SMTP 访问。 格式 mailto: mms 经过支持MMS（流媒体）协议播放该资源。（代表软件：Windows Media Player）格式 MMS:/ ed2k 经过支持ed2k（专用下载链接）协议P2P软件访问该资源。（代表软件：电驴） 格式 ed

16、2k:/flashget 经过支持Flashget:（专用下载链接）协议P2P软件访问该资源。（代表软件：快车） 格式 Flashget:/ thunder 经过支持thunder（专用下载链接）协议P2P软件访问该资源。（代表软件：迅雷） 格式 thunder:/ news 经过 NNTP 访问该资源。 tencent 经过支持tencent(专用聊天连接) 协议和用户对话。(代表软件：QQ、TM)格式 tencent:/message/?uin=号码&Site=&Menu=yes msnim 经过支持msnim(专用聊天连接) 协议和用户对话。(代表软件：MSN、WLM) 格式 msnim

17、:chat?contact=邮箱地址cweb开发技术专题知识讲座第24页第2章 Web开发基础2.1.3 HTML文件结构1、HTML标识与属性HTML标识又称标签，是用”括起来标识符，括号中间标识符为标识名称。HTML标识经过指定某块信息为段落或标题等来标识文档某个个别。HTML标识分为单标识和成对标识两种。成对标识有开始标识和结束标识,并配套使用，成对标识只作用于开始标识和结束标识之间文档。单标识只有开始标识。属性是标识中参数选项，大多数标识有一些自己属性，有些标识有一些共用属性，各属性之间无先后次序，假如省略属性则采取默认值。属性普通使用格式以下：cweb开发技术专题知识讲座第25页第2

18、章 Web开发基础一个标识能够有多个属性，它们都被放置在起始标识内一个属性普通只在定义它标识范围内起作用，但对于嵌套标识结构，外层样式表单一些属性可能被内层标识继承不一样标识所拥有属性是不一样，有些属性为某一标识所独有，有些属性为某几个标识所共有，有些属性是绝大多数标识都有，它们称为通用属性，HTML定义了6个通用属性，它们是：ID:文档范围内标识符CLASS：给一个标识指定一个或多个类名LANG：文档语言信息DIR：文档文字走向信息TITLE：关于标识简短说明STYLE：给出标识样式cweb开发技术专题知识讲座第26页第2章 Web开发基础2、文档头与文档体HTML文件必须由标识开头，标识结

19、束。一个完整HTML文档分为文档头和文档体两个别。文档头信息包含在之间，包含相关此网页标题、导入样式表等信息。文档体包含在之间，是网页主体个别。cweb开发技术专题知识讲座第27页第2章 Web开发基础3、标识与颜色设定文档体标识有影响整个网页显示方式属性，颜色设置通常有两种形式，一个是直接表示法，另一个是RGB三色表示法，用三组十六进制数RGB值表示，如#FF0000，#00FF00，#0000FF。cweb开发技术专题知识讲座第28页第2章 Web开发基础2.2 常见HTML标识2.2.1 HTML文字标识1、标识该标识在之间，标识之间内容将显示在浏览器标题栏中。2、标识是一个段落开始标识

20、段落文字是换行标识用于插入一条水平线cweb开发技术专题知识讲座第29页第2章 Web开发基础3、标识用来设置网页中标题文字，标题分为6级，用hn标识中n：16表示。标题内容4、标识用来控制文字字体、大小和颜色5、标识分别表示文字粗体、斜体、下划线标识，能够组合使用。cweb开发技术专题知识讲座第30页第2章 Web开发基础6、标识分别是文本下标和上标标识2.2.2 特殊标识和图形标识1、和表示空格， 表示双引号2、标识注释标识cweb开发技术专题知识讲座第31页第2章 Web开发基础3、标识用来在网页中显示图形。图形文件与网页文件是分别存放，能够经过标识将图形显示在网页中。4、标识对象居中标

21、识，凡在此标识中间对象都会被居中输出。cweb开发技术专题知识讲座第32页第2章 Web开发基础2.2.3 超链接标识标识为超链接标识，普通使用格式以下:超链接显示名称Href属性取值为链接目标地址，能够是绝对路径，也能够是相对路径。Target属性取值为链接目标窗口，能够是_parent、_blank、_self、_top等值，也能够是窗口名称或idTitle属性取值为指向链接时所显示标题文字cweb开发技术专题知识讲座第33页第2章 Web开发基础2.3表格2.3.1 定义表格基础语法在HTML中表格是经过表格标识、行标识、列标题标识和列内容标识等配合使用来定义。cweb开发技术专题知识讲

22、座第34页第2章 Web开发基础2.3.2 表格标识属性Align属性为表格在页面上水平摆放位置Border属性取值单位为像素，值为表格边框宽度Cellpadding属性取值单位为像素，值为单元格内容与单元格边界之间空白距离Cellspacing属性取值单位为像素，值为单元格之间距离Width属性为表格宽度，取值单位为像素或页面宽度百分比Heigth属性为表格高度，取值单位为像素或页面高度百分比Frame属性为表格四面围框显示状态，取值为box、void、hsides、vsides、alove、below、rhs、lhsRules属性为表格内分隔线显示方式，取值为all、groups、rows

23、、cols、none。cweb开发技术专题知识讲座第35页第2章 Web开发基础2.3.3行标识属性Align属性Valign属性：行内容垂直对齐方式Bgcolor属性取值为行背景色Bordercolorlight属性取值为行亮边框颜色Bordercolordark属性取值为行暗边框颜色Height属性2.3.4单元格和标识属性cweb开发技术专题知识讲座第36页第2章 Web开发基础补充：有序表与无序表创建一个有序列表，创建一个无序列表。对于有序列表和无序列表，表中每一项由元素定义。浏览器自动给有序表中项目冠以序号，给无序表中项目冠以黑点，而且缩进编排。常见属性Type属性：适合用于，用以给

24、出表项样式信息Start属性：适合用于元素，用以给出有序表中首项起始编号cweb开发技术专题知识讲座第37页第2章 Web开发基础补充：表单表单是一个包含表单元素区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单项选择框、复选框等等）输入信息元素。表单使用表单标签（）定义。cweb开发技术专题知识讲座第38页第2章 Web开发基础输入多数情况下被用到表单标签是输入标签（）。输入类型是由类型属性（type）定义。大多数经常被用到输入类型以下文本域（Text Fields）当用户要在表单中键入字母、数字等内容时，就会用到文本域。cweb开发技术专题知识讲座第39页第2章 Web开发基础单

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

26、 页面。该页面将显示出输入结果。cweb开发技术专题知识讲座第42页第2章 Web开发基础cweb开发技术专题知识讲座第43页第2章 Web开发基础cweb开发技术专题知识讲座第44页第2章 Web开发基础cweb开发技术专题知识讲座第45页第2章 Web开发基础2.4 页面布局页面布局技术是Web应用程序开发关键技术之一，DIV+CSS页面布局模式是w3c标准一个经典应用，含有许多功效上优势。2.4.1CSS介绍CSS 指层叠样式表 (Cascading Style Sheets) 样式定义怎样显示 HTML 元素 样式通常存放在样式表中 把样式添加到 HTML 4.0 中，是为了处理内容与

27、表现分离问题 外部样式表能够极大提升工作效率 外部样式表通常存放在 CSS 文件中 多个样式定义可层叠为一个样式表cweb开发技术专题知识讲座第46页第2章 Web开发基础样式处理了一个普遍问题HTML 标签原本被设计为用于定义文档内容。经过使用 、 这么标签，HTML 初衷是表示“这是标题”、“这是段落”、“这是表格”之类信息。同时文档布局由浏览器来完成，而不使用任何格式化标签。因为两种主要浏览器（Netscape 和 Internet Explorer）不停地将新 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清楚地独立于文档表现层站点变得越来越困难。

28、为了处理这个问题，万维网联盟（W3C），这个非营利标准化联盟，担负起了 HTML 标准化使命，并在 HTML 4.0 之外创造出样式（Style）。全部主流浏览器均支持层叠样式表。cweb开发技术专题知识讲座第47页第2章 Web开发基础样式表极大地提升了工作效率样式表定义怎样显示 HTML 元素，就像 HTML 3.2 字体标签和颜色属性所起作用那样。样式通常保留在外部 .css 文件中。经过仅仅编辑一个简单 CSS 文档，外部样式表使你有能力同时改变站点中全部页面布局和外观。因为允许同时控制多重页面样式和布局，CSS 能够称得上 WEB 设计领域一个突破。作为网站开发者，你能够为每个 HT

29、ML 元素定义样式，并将之应用于你希望任意多页面中。如需进行全局更新，只需简单地改变样式，然后网站中全部元素均会自动地更新。cweb开发技术专题知识讲座第48页第2章 Web开发基础多重样式将层叠为一个样式表允许以各种方式要求样式信息。样式能够要求在单个 HTML 元素中，在 HTML 页头元素中，或在一个外部 CSS 文件中。甚至能够在同一个 HTML 文档内部引用多个外部样式表。层叠次序当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？普通而言，全部样式会依据下面规则层叠于一个新虚拟样式表中，其中数字 4 拥有最高优先权。1浏览器缺省设置 2外部样式表 3内部样式表（位于 标

30、签内部） 4内联样式（在 HTML 元素内部） 所以，内联样式（在 HTML 元素内部）拥有最高优先权，这意味着它将优先于以下样式申明： 标签中样式申明，外部样式表中样式申明，或者浏览器中样式申明（缺省值）。cweb开发技术专题知识讲座第49页第2章 Web开发基础CSS 语法CSS 规则由两个主要个别组成：选择器，以及一条或多条申明。选择器通常是您需要改变样式 HTML 元素。每条申明由一个属性和一个值组成属性（property）是您希望设置样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。cweb开发技术专题知识讲座第50页第2章 Web开发基础cweb开发

31、技术专题知识讲座第51页第2章 Web开发基础多重申明：提醒：假如要定义不止一个申明，则需要用分号将每个申明分开。下面例子展示出怎样定义一个红色文字居中段落。最终一条规则是不需要加分号，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验设计师会在每条申明末尾都加上分号，这么好处是，当你从现有规则中增减申明时，会尽可能降低犯错可能性。就像这么：cweb开发技术专题知识讲座第52页第2章 Web开发基础空格和大小写大多数样式表包含不止一条规则，而大多数规则包含不止一个申明。多重申明和空格使用使得样式表更轻易被编辑：是否包含空格不会影响 CSS 在浏览器工作效果，一样，与 XHTML

32、不一样，CSS 对大小写不敏感。不过存在一个例外：假如包括到与 HTML 文档一起工作话，class 和 id 名称对大小写是敏感。cweb开发技术专题知识讲座第53页第2章 Web开发基础选择器分组你能够对选择器进行分组，这么，被分组选择器就能够分享相同申明。用逗号将需要分组选择器分开。在下面例子中，咱们对全部标题元素进行了分组。全部标题元素都是绿色。cweb开发技术专题知识讲座第54页第2章 Web开发基础id 选择器id 选择器能够为标有特定 id HTML 元素指定特定样式。id 选择器以 # 来定义。cweb开发技术专题知识讲座第55页第2章 Web开发基础CSS 类选择器在 CSS

33、 中，类选择器以一个点号显示cweb开发技术专题知识讲座第56页第2章 Web开发基础怎样插入样式表当读到一个样式表时，浏览器会依据它来格式化 HTML 文档。插入样式表方法有三种外部样式表内部样式表内联样式cweb开发技术专题知识讲座第57页第2章 Web开发基础外部样式表当样式需要应用于很多页面时，外部样式表将是理想选择。在使用外部样式表情况下，你能够经过改变一个文件来改变整个站点外观。每个页面使用 标签链接到样式表。 标签在（文档）头部。外部样式表能够在任何文本编辑器中进行编辑。文件不能包含任何 html 标签。样式表应该以 .css 扩展名进行保留。cweb开发技术专题知识讲座第58页

34、第2章 Web开发基础内部样式表当单个文档需要特殊样式时，就应该使用内部样式表。你能够使用 标签在文档头部定义内部样式表，就像这么:cweb开发技术专题知识讲座第59页第2章 Web开发基础内联样式因为要将表现和内容混杂在一起，内联样式会损失掉样式表许多优势。请慎用这种方法，比如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关标签内使用样式（style）属性。Style 属性能够包含任何 CSS 属性。cweb开发技术专题知识讲座第60页第2章 Web开发基础伪类伪类用来表示动态事件、状态改变或在文档中以其它方法不能轻易实现情况。伪类对目标元素中出现某种特殊状态应用样式，比如超

35、链接等。伪类允许设计人员自由指定元素在一个状态下外观。与普通类不一样，伪类属性前面只能有一个冒号。伪类语法cweb开发技术专题知识讲座第61页第2章 Web开发基础锚伪类在支持 CSS 浏览器中，链接不一样状态都能够不一样方式显示，这些状态包含：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。a:link color: #FF0000 /* 未访问链接 */ a:visited color: #00FF00 /* 已访问链接 */ a:hover color: #FF00FF /* 鼠标移动到链接上 */ a:active color: #0000FF /* 选定链接 */ 提醒：在 C

36、SS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效。提醒：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效。提醒：伪类名称对大小写不敏感。cweb开发技术专题知识讲座第62页第2章 Web开发基础cweb开发技术专题知识讲座第63页第2章 Web开发基础应用字体外观cweb开发技术专题知识讲座第64页第2章 Web开发基础操作文本显示cweb开发技术专题知识讲座第65页第2章 Web开发基础背景色和背景图像cweb开发技术专题知识讲座第66页第2章 Web开发基础盒模型：控制外边距、边框、内边距、宽度和高度CSS中盒模

37、型是基于CSSWeb设计中取主要概念之一。盒模型是针对HTML元素一组规则，指定了元素高度、宽度、内边距、边框和外边距是怎样度量。CSS盒模型是定义元素周围间隔、尺寸、外边距、边框以及元素内容和边框之间内边距一组属性集合。cweb开发技术专题知识讲座第67页第2章 Web开发基础cweb开发技术专题知识讲座第68页第2章 Web开发基础元素框最内个别是实际内容，直接包围内容是内边距。内边距展现了元素背景。内边距边缘是边框。边框以外是外边距，外边距默认是透明，所以不会遮挡其后任何元素。提醒：背景应用于由内容和内边距、边框组成区域。在 CSS 中，width 和 height 指是内容区域宽度和高

38、度。增加内边距、边框和外边距不会影响内容区域尺寸，不过会增加元素框总尺寸。cweb开发技术专题知识讲座第69页第2章 Web开发基础假设框每个边上有 10 个像素外边距和 5 个像素内边距。假如希望这个元素框到达 100 个像素，就需要将内容宽度设置为 70 像素，请看下列图：cweb开发技术专题知识讲座第70页第2章 Web开发基础使用margin属性使页面居中cweb开发技术专题知识讲座第71页第2章 Web开发基础CSS浮动浮动框能够向左或向右移动，直到它外边缘碰到包含框或另一个浮动框边框为止。因为浮动框不在文档普通流中，所以文档普通流中块框表现得就像浮动框不存在一样。cweb开发技术专

39、题知识讲座第72页第2章 Web开发基础当把框 1 向右浮动时，它脱离文档流而且向右移动，直到它右边缘碰到包含框右边缘：cweb开发技术专题知识讲座第73页第2章 Web开发基础当框 1 向左浮动时，它脱离文档流而且向左移动，直到它左边缘碰到包含框左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。假如把全部三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。cweb开发技术专题知识讲座第74页第2章 Web开发基础假如包含框太窄，无法容纳水平排列三个浮动元素，那么其它浮动块向下移动，直到有足够空间。假如浮动

40、元素高度不一样，那么当它们向下移动时可能被其它浮动元素“卡住”：cweb开发技术专题知识讲座第75页第2章 Web开发基础CSS float 属性在 CSS 中，咱们经过 float 属性实现元素浮动。float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都能够浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。假如在一行之上只有极少空间可供浮动元素，那么这个元素会跳至下一行，这个过程会连续到某一行拥有足够空间为止。cweb开发技术专题知识讲座第76页第2章 Web开发基础行框和清理浮动框旁边行框被缩短，从而给浮动框留出空间，行

41、框围绕浮动框cweb开发技术专题知识讲座第77页第2章 Web开发基础CSS 定位 (Positioning)CSS 为定位和浮动提供了一些属性，利用这些属性，能够建立列式布局，将布局一个别与另一个别重合，还能够完成多年来通常需要使用多个表格才能完成任务。定位基础思想很简单，它允许你定义元素框相对于其正常位置应该出现位置，或者相对于父元素、另一个元素甚至浏览器窗口本身位置。cweb开发技术专题知识讲座第78页第2章 Web开发基础一切皆为框div、h1 或 p 元素经常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是

42、因为它们内容显示在行中，即“行内框”。您能够使用 display 属性改变生成框类型。这意味着，经过将 display 属性设置为 block，能够让行内元素（比如 元素）表现得像块级元素一样。还能够经过把 display 设置为 none，让生成元素根本没有框。这么话，该框及其全部内容就不再显示，不占用文档中空间。cweb开发技术专题知识讲座第79页第2章 Web开发基础CSS 定位机制CSS 有三种基础定位机制：普通流、浮动和绝对定位。除非专门指定，不然全部框都在普通流中定位。也就是说，普通流中元素位置由元素在 (X)HTML 中位置决定。块级框从上到下一个接一个地排列，框之间垂直距离是由

43、框垂直外边距计算出来。行内框在一行中水平布置。能够使用水平内边距、边框和外边距调整它们间距。不过，垂直内边距、边框和外边距不影响行内框高度。由一行形成水平框称为行框（Line Box），行框高度总是足以容纳它包含全部行内框。不过，设置行高能够增加这个框高度。cweb开发技术专题知识讲座第80页第2章 Web开发基础CSS position 属性经过使用 position 属性，咱们能够选择 4 种不一样类型定位，这会影响元素框生成方式。position 属性值含义：static 元素框正常生成。块级元素生成一个矩形框，作为文档流一个别，行内元素则会创建一个或多个行框，置于其父元素中。 rela

44、tive 元素框偏移某个距离。元素仍保持其未定位前形状，它原本所占空间仍保留。 absolute 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中另一个元素或者是初始包含块。元素原先在正常文档流中所占空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型框。 Fixed 元素框表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。cweb开发技术专题知识讲座第81页第3章 Web窗体本章内容了解Web窗体概念与技术优点了解Web窗体代码分离技术，掌握代码内联与后台编码了解Web窗体事件驱动编程了解Web窗体

45、处理过程及窗体事件掌握Web窗体常见事件编程本章重点Web窗体概念及代码分离Web窗体事件驱动编程及窗体处理过程cweb开发技术专题知识讲座第82页第3章 Web窗体3.1 Web窗体概述3.1.1 Web窗体创建Web窗体（Web Form，Web表单）及其架构是基于.net通用运行环境可扩展编程模型，类似于C#程序设计中Windows窗体，主要是用来生成与用户交互界面，并实现页面内容与代码完全分离。cweb开发技术专题知识讲座第83页第3章 Web窗体3.1.2 Web窗体概念与技术优点1、Web窗体概念开发工具为用户提供了一个ASP.NET页面编辑界面，一个名称为Default.aspx

46、页面，能够将这个可视化编程界面了解为Web窗体，它是一个ASP.NETWeb窗体在编程阶段展现。ASP.NET提供Web窗体是一个容器对象，它不但有自己属性、方法和事件，而且能容纳HTML服务器控件、Web服务器控件等对象。开发工具经过Web窗体架构，实现了Web页面设计中“所见即所得”。cweb开发技术专题知识讲座第84页第3章 Web窗体ASP.NETWeb窗体模型由两个别组成，即用户界面UI和实现逻辑。用户界面中含有页面布局信息和ASP.NET服务器控件HTML模板，它负责对浏览器上Web窗体进行显示。实现逻辑个别是对Web窗体进行逻辑处理ASP.NET代码，它负责生成Web窗体上动态显

47、示内容，这些内容通常由用户界面个别定义服务器控件显示。实现逻辑和用户界面生成HTML协同工作，能够实现完全动态Web页面。cweb开发技术专题知识讲座第85页第3章 Web窗体2、Web窗体技术优点Web窗体能够使用公共语言运行库所支持程序语言来编写Visual Studio集成开发环境提供了丰富服务器控件，为页面设计提供了所见即所得设计支持，极大地提升了开发效率丰富服务器控件使开发者能够顺利地将页面逻辑封装至一个可重复使用组件中，降低了开发人员必须编写代码量Web窗体模型将页面显示代码和逻辑处理代码分离，从而处理了页面代码难以维护问题Web窗体模型包含了多状态管理特征，能够方便地保留页面状态

48、Web窗体含有可扩展性，能够很好地使用第三方控件cweb开发技术专题知识讲座第86页第3章 Web窗体3.1.3 Web窗体组成文件一个Web窗体由两个文件组成，即包含HTML内容用户界面（.aspx或ascx文件）和后台代码文件（.aspx.cs）。cweb开发技术专题知识讲座第87页第3章 Web窗体3.2 代码内联与后台编码ASP.NET是经过代码内联和后台编码这两种形式来实现用户界面和实现逻辑联络。代码内联就是将用户界面和实现逻辑放在同一个文件中后台编码就是将实现逻辑和用户界面分别存在两个不一样文件中。ASP.NET默认创建页面是页面显示代码和逻辑处理代码相分离，在添加新页面时，能够选

49、择采取代码内联或后台编码模式。cweb开发技术专题知识讲座第88页第3章 Web窗体3.2.1 后台编码当执行ASP.NET页面时，.aspx文件和.aspx.cs文件会编译生成一个可执行page对象。每个.aspx文件都有一个Page指令，Page指令常见属性以下：Language：指定了该页面所使用语言AutoEventWireup：指示控件事件是否自动匹配。假如启用事件自动匹配，则为 true；不然为 false。默认值为 true。CodeFile：指定了该页面所关联后台处理代码文件Inherits：定义供页继承隐藏代码类，能够是从Page类派生任意类。cweb开发技术专题知识讲座第8

50、9页第3章 Web窗体2、代码内联代码内联是将用户界面与逻辑实现个别代码放在一个文件中，不过逻辑个别和页面个别还是显著地域分为两个个别。其中逻辑个别包含在标识之间，并为标识添加了runat=“server”属性。用户界面个别包含在之间。在标识中添加了runat=“server”属性。runat=server表示在服务器端运行，然后生成对应客户端代码。普通HTML控件，假如不加runat=server，直接在客户端运行。cweb开发技术专题知识讲座第90页第3章 Web窗体3.3 ASP.NET执行过程当用户请求Default.aspx页面时，IIS是怎样将Default.aspx与Defaul

51、t.aspx.cs进行组合编译生成HTML代码响应用户请求呢。ASP.NET页面执行过程是一个较复杂过程，包括到IIS、CLR、Framework等。1、IIS将请求转交给aspnet_isapi.dll。IIS会依据访问者请求IP、端口、虚拟目录和文件名查找对应站点，找到站点后依据所要求文件扩展来开启对应IIS Extension程序处理此要求，aspx这个文件扩展名与aspnet_isapi.dll对应，控制权交给aspnet_isapi.dll。cweb开发技术专题知识讲座第91页第3章 Web窗体2、aspnet_isapi.dll转交给ASP.NET Worker Process.a

52、spnet_isapi.dll只是一个入口，真正处理工作是其转交ASP.NET WP，WP首先解析访问者请求中虚拟目录信息，决定创建或使用先前已建好AppDomain对象来处理此请求。3、WP将请求转交给ISAPIRuntime对象。WP将要求转送至虚拟目录对应Application Domain中ISAPIRuntime对象。此对象主要功效是由ISAPI封包中解析出信息后转交给HttpRuntime对象。4、ISAPIRuntime对象将请求转交给HttpRuntime对象。5、HttpRuntime对象将请求转交给HttpApplication对象。6、 HttpApplication对象

53、将请求转交给Httphandler对象7、 Httphandler对象转交给Page对象8、Page对象创建过程。cweb开发技术专题知识讲座第92页第3章 Web窗体3.4 Web窗体事件驱动编程3.4.1事件驱动编程概念在DOS时代编程模型中，程序是按次序执行，这类程序称为面向过程程序设计。面向过程应用程序普通有一个显著开始，一个显著过程和一个显著结束。事件驱动程序最大特点就是：程序执行不是由程序次序来控制，而是由事件发生次序来控制。cweb开发技术专题知识讲座第93页第3章 Web窗体开启输入姓名查询成绩打印成绩结束消息处理开启结束输入姓名查询成绩打印成绩cweb开发技术专题知识讲座第9

54、4页第3章 Web窗体基于过程驱动程序，只能让用户按照程序要求好步骤进行操作，用户不能以任何次序跳跃性地输入数据和使用功效。基于事件驱动程序，是围绕着消息产生与处理而展开，而消息不会以任何预定次序出现，所以，Windows程序设计主要是编写消息接收与发送响应代码。cweb开发技术专题知识讲座第95页第3章 Web窗体Web窗体实现事件驱动编程模型和Windows窗体中实现事件驱动编程模型机理是不一样。C/S结构Windows窗体应用程序与服务器之实现是有状态连续连接。Web应用程序与服务器之间是经过HTTP协议来实现通信，是无状态断续连接。ASP.NETWeb窗体提供了一个标准保持状态方式，并

55、隐藏了实际执行细节。其原理是，Web页面会在两次请求之间存放自己ViewState（视图状态），ViewState保留了页面及页面上全部控件状态值。ViewState由System.Web.UI.StateBag对象负责存放。在服务器端，将ViewState存放为一个字符串变量，返回客户端。在客户端，将ViewState存放为一个隐藏窗体字段cweb开发技术专题知识讲座第96页第3章 Web窗体Web窗体和服务器控件都默认支持ViewState，能够经过指令实现对页面级ViewState状态打开或关闭。cweb开发技术专题知识讲座第97页第3章 Web窗体3.4.2 Web窗体处理过程及窗体事

56、件要学习Web窗体事件驱动编程，必须要掌握Web窗体处理过程及阶段发生事件。Web Form扩展名是.aspx，当一个浏览器第一次请求一个aspx文件时，Web窗体将被CLR编译器编译成一个Page类并实例化，当每次请求这个页面时，这个动态创建Page类就会实例化，从而得到一个可输出HTML页面Page对象。这么，ASP.NET就做了一次编译屡次执行。cweb开发技术专题知识讲座第98页第3章 Web窗体一个Web窗体页面（Page对象）从实例化分配内存空间处处理结束释放内存，普通要经历10个阶段，其中有一些阶段会触发Page对象事件，这些事件各自有不一样事件处理程序。1、页面初始化：此阶段是

57、初始化页面生命周期内所需设置，并生成控件树。初始化会触发Page对象第一个事件Page_Init，能够利用这个事件处理过程重置控件属性。Page_Iint事件只是在第一次调入页面时被调用，重新载入页面时并不触发该事件。实际应用时，普通都跳过Page_Iint，直接使用Page_OnLoad事件。cweb开发技术专题知识讲座第99页第3章 Web窗体2、视图状态加载：在此阶段读取隐藏窗体字段值，恢复控件ViewState属性。3、回传数据处理：页面加载在Request对象中缓存窗体数据，然后更新页面和控件属性。Request对象中缓存窗体数据是因为用户在客户端操作控件而回传数据。4、页面加载：在

58、此阶段创建控件树中服务器控件，初始化这些控件并恢复状态，会触发Page对象Load事件。5、回传数据改变检验：在此阶段检验当前回传和前一次回传之间状态改变，并发送通知，引发更改事件cweb开发技术专题知识讲座第100页第3章 Web窗体6、回传事件处理：执行与造成回传客户端相关联.aspx服务器代码。7、页面预返回：在页面输出之前，执行任意更新处理。与这个阶段相关联Page对象事件是PreRender事件。8、保留视图状态：页面将ViewState属性内容序列化为一个字符串，这个字符串将作为一个隐藏域被附加到HTML页面。9、页面返回：在此阶段创建展现在客户端HTML输出10、页面卸载：这个阶

59、段发生于一个窗体完成了它任务而且准备卸载时候，这个时候引发页面Unload事件。cweb开发技术专题知识讲座第101页第3章 Web窗体3.5 Web窗体程序实例cweb开发技术专题知识讲座第102页第3章 Web窗体补充内容ASP.NET网页扩展名ASP.NET网站应用程序中能够包含很各种文件类型，下表列出了文件类型及其扩展名。cweb开发技术专题知识讲座第103页第3章 Web窗体常见页面指令ASP.NET窗体源视图，代码前几行包含%.%这么代码，叫做页面指令。页面指令用来定义ASP.NET页分析器和编译器使用特定于该页一些定义。在.aspx文件中常见页面指令普通有以下几个。1、指令Pag

60、e指令能够指定页面中代码服务器编程语言；指定页面是将服务器代码直接包含在其中，还是将代码包含在单独文件中；调试和跟踪选项，以及页面是否为某母版页内容页。语法：cweb开发技术专题知识讲座第104页第3章 Web窗体cweb开发技术专题知识讲座第105页第3章 Web窗体2、指令Import指令用于将命名空间显式导入到ASP.NET应用程序文件中，而且导入该命名空间全部类和接口。导入命名空间能够是.NET Framework类库一个别，也能够是用户定义命名空间一个别。语法：cweb开发技术专题知识讲座第106页第3章 Web窗体3、指令Register指令创建标识前缀和自定义控件之间关联，这为开