ASP-NET编程模型.ppt

第2章 ASP.NET编程模型 Date 1 2.1 ASP.NET页面的结构 ASP.NET页面的内部结构是非常模块化的，包括页 面指令、页面布局和源代码3个独立的部分。 页面指令：页面指令建立该页面的运行环境，规定 ASP.NET引擎的运行库如何处理该页面，控制ASP.NET 页面的行为。 Date 2 页面布局：页面布局：页面布局表示页面的可视元素，包括 HTML(XHTML)标记、服务器控件和静态文本。 页面指令和页面布局页面指令和页面布局 统称为视觉元素页面设计文件， 其文件后缀为 .aspx 源代码部分：源代码部分：源代码部分包括页面和控件事件处理 程序等，先编译后执行。其文件后缀为 .aspx.cs（ 隐藏类文件） Date 3 ASP.NET页面指令有多个，其中最重要的是 Page指令，它定义ASP.NET页分析器和编译器使用的 页特定（.aspx 文件）属性。 Page指令的使用格式如下： 其中常用的属性及其说明如表所示。 Date 4 属性说说明 AutoEventWireup指示页的事件是否自动绑定。如果启用了事件自动绑定，则为 true（默认值）；否则为false。 Buffer确定是否启用了HTTP响应缓冲。如果启用了页缓冲，则为 true（默认值）；否则为false。 CodeFile指定指向页引用的代码隐藏文件的路径。此属性与Inherits属 性一起使用可以将代码隐藏源文件与网页相关联。此属性 仅对编译的页有效。 Inherits定义供页继承的代码隐藏类。它可以是从Page类派生的任何类 。此属性与CodeFile属性一起使用，后者包含指向代码隐 藏类的源文件的路径。Inherits属性在使用C#作为页面语言 时区分大小写，而在使用Visual Basic作为页面语言时不区 分大小写。 Language指定在对页中所有内联呈现（和）和代码声 明块进行编译时使用的语言。值可以表示任何.NET Framework支持的语言，包括Visual Basic、C#或JScript。 每页只能使用和指定一种语言。 Page指令的部分属性及其说明 Date 5 例：设计简单的ASP.NET程序 Date 6 Date 7 无标题页 它表示使用的语言为C#，自动绑定页的事件，代码 隐藏类文件为Default.aspx.cs ，对应的类为 _Default 。也就是说，Default.aspx网页由 Default.aspx和Default.aspx.cs两部分组成，前者 包含该网页的HTML部分，后者包含该网页的源代码 部分。 Date 8 Date 9 using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class _Default : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) Label1.Text = “同学们你们好!“; protected void Button1_Click(object sender, EventArgs e) Label1.Text = TextBox1.Text + “你好!“; Date 10 2.2 HTML(XHTML) 2.2.1 HTML HTML （Hyper Text Markup Language）超文本标记 语言。是用来做网页的。是在互联网发布超文本文 件(也就是通常所说的网页)的通用语言。不需要编 译，可以直接由浏览器执行（属于浏览器解释型语 言）。 Date 11 2.2.2 XHTML XHTML是eXtensible HyperText Markup Language的英 文缩写，即可扩展的超文本标记语言，XHTML是HTML的“ 升级规范”产品，事实上它也属于HTML家族，只是具有更严 格的书写标准、更好的跨平台能力。 除此之外XHTML和HTML基本相同。 Date 12 2.2.3 HTML与XHTML的区别 1）大小写 HTML不区分大小写，HTML元素和属性名称可以是大写、小写 或大小写混合。但是XHTML中大小是敏感的。 例如，XHTML中，和是两个完全不同的标记。 因此XHTML文档要求所有元素和属性名称必须小写，而属性值则 大小写均可。 2）标记嵌套 在HTML中，即使使用了不正确的嵌套，一样可以在很多浏览 器中使用；而XHTML则要求嵌套必须完全正确。 例如，姓名不能写成姓名。 Date 13 3）有否结束标记 在HTML中，有些标记是可以没有结束标记的，而XHTML要求 所有标记都必须有结束标记。 例如，HTML中的在XHTML中必须写成或者简单 地写成。 注意：中的斜杠前有一个空格。 4）引号 HTML中的属性值可以用引号引起来，也可以不使用引号，但 XHTML中要求所有属性值都必须加引号，即使是数字也需要加引 号。例如： 除此之外，XHTML还要求属性值不能省略。 Date 14 5）id和name HTML中每个元素都可以定义name属性，也引入 了id属性，这两个属性都可以标识某一个元素。 而在XHTML中，每个元素只有一个的标识属性id 。 Date 15 2.3 HTML 标记 由HTML（Hyper Text Markup Language）的各 种标记构成的文档就是网页，它是一种普通文本文件 ，网页可以是网站的一部分，也可以独立存在。 HTML的基本结构 文件头和文件体组成 Date 16 一个简单的HTML示例 欢迎光临我的主页 这是我第一次做主页，无论怎么样，我都会努力做好！ Date 17 2.3.1 HTML标记 n基本及标题栏标注 n文 档 整 体 属 性 n文 本 标注 n格 式 排 版 n超级链接 Date 18 基 本 标 注: : 创 建 一 个HTML 文 档 : 设 置 文 档 标 题 以 及 其 它 不 在WEB 网 页 上 显 示 的 信 息 : 设 置 文 档 的 可 见 部 分 标 题 栏 标 注: : 将 文 档 的 题 目 放 在 标 题 栏 中 Date 19 文 档 整 体 属 性 :设 置 背 景 颜 色， 使 用 名 字 或 十 六 进 制 值。 :设 置 文 本 文 字 颜 色， 使 用 名 字 或 十 六 进 制 值。 设置页面的背景图象，使用 “.jpg” 或“.gif”两种格式的图象。 link：设置未被浏览的超级链接颜色，使用名字 或十六进 制 值。 vlink：设 置 已被浏览的超级链接颜色，使用名 字或十六进 制 值。 alink：设 置浏览器当前选中的超级链接颜色， 使用名字或十六进 制 值。 Date 20 十六种颜色及其十六进制RGB值对照表 颜色 RGB数值 （十六进制） 颜色 RGB数值 （十六进制） 黑色000000海军蓝000080 绿色008000暗靛008080 暗红800000紫色800080 橄榄绿808000银灰色C0C0C0 灰色808080兰色0000FF 淡绿00FF00淡靛00FFFF 红色FF0000淡紫色FF00FF 黄色FFFF00白色FFFFFF Date 21 文 本 标 注 创 建 预 格 式 化 文 本 创 建 标 题,n=16，1最大，6最小 创 建 黑 体 字 创 建 斜 体 字 加 重 一 个 单 词（ 通 常 是 斜 体 加 黑 体） 加重一个单词（通常是斜体加黑 体 ） 设置字体大小，从1到7（小 大 ） 设置字体的颜色，使用名字 或 十六进制值 Date 22 格 式 排 版（一） 用来创建一个新的段落。表示一个段落的开始，结尾标记 可以省略，但是一般情况下，为了防止文档出错，尽量不要 省略结尾标记。 align属性将 段 落 按 左（默认的对齐方式） 、中、右对齐。 插 入 一 个 回 车 换 行 符。 从两边缩进文本。 创 建 一 个自 定 义 列 表。 放 在 每 个 定 义列 表之 间，用来标示 定义条目。列表项自动换行并左对齐。 放在标示定义条目 之 间，用来在段落第一个字前 面留出空白。 Date 23 格 式 排 版（二） 创建一个标有数字的 有序列表。属性type用于设定列表符号的款式五种（1、 a、A、i、） 有序列表举例 创建一个无序列表，属性type用于 设定列表符号的款式包括（disc、circle、square）。 放在有序或无序列表项之间。用来增加列表项 。 无序列表举例 Date 24 超级链接： href:给出了该超级链接所指向的页面和文件相对于 当前页面的相对路径或绝对路径。 target:指定链接的目标窗口。个 例如：例如： 青岛科技大学 创 建 一 个 自 动 发 送 电 子 邮 件 的 链 接 信息学生 自定义列表 Date 25 列标题1列标题2列标题n 第1行单元格11单元格12单元格1n 第m行单元格m1单元格m2单元格mn 表标题 2.3.2 HTML表格 表格是一种能够有效的描述信息的组织方式，由行、列和 单元格组成，可以很好地控制页面布局。表格的定义通过 ，和标签实现。 表格的一般样式 : Date 26 1. 建立表格 用法： 其功能是创建一个空的表格，并指定表格的整体外观， 此时在浏览器中看不到该表格，只有添加行后才能看到。表 格标记常用的属性如下： border=“size“：设置表格边框大小。 width= “size“：设置表格的宽度（像素或百分比）。 height=“size“：设置表格的高度（像素或百分比）。 cellspacing=“size“：设置单元格间距。 cellpadding =“size“：设置单元格的填充距。 background =“URL“：设置表格背景图像。 Date 27 bgcolor =“colorvalue“：设置表格背景色。 align=“alignstyle“：设置对齐方式，alignstyle可取值: left（左对齐）、center（居中）和right（右对齐）值之 一。 cols =“size“：设置表格的列数。 2. 定制表格 使用只是定义空表格，还需要定义表标题、行、列标 题和单元格。 1）定义表标题 用法： 其功能是定义表格的表标题，其属性较少使用。 Date 28 2）定义行 用法： 其功能是定义表格的一行。对于每一行，可以定义行属性 ，常用的行属性如下： bgcolor=“colorvalue”：设置行背景颜色。 background=“URL”：设置表格行的背景图像。 align=“alignstyle“：设置行对齐方式，alignstyle可取值 left（左对齐）、center（居中）和right（右对齐）值之 一。 valign=“valignstyle“：设置行中单元格垂直对齐方式， valignstyle可取值top（顶端对齐）、middle（居中）、 bottom（底端对齐）和baseline（基线对齐）值之一。 Date 29 3）定义列标题 用法： 其功能是定义一个列标题。对于每一行，可以定义行属性，常用的行属 性如下： bgcolor=“colorvalue“：设置列标题背景颜色。 background=“URL“：设置列标题背景图像。 align=“alignstyle“：设置列标题对齐方式，alignstyle可取值 left（左对齐）、center（居中）和right（右对齐）值之一。 valign=“valignstyle“：设置列标题垂直对齐方式，valignstyle可 取值top（顶端对齐）、middle（居中）、bottom（底端对齐）和 baseline（基线对齐）值之一。 Date 30 4）定义单元格 用法： 在每一行中可以定义若干单元格。单元格的常用属性如下 ： bgcolor=“colorvalue“：设置单元格背景颜色。 background=“URL“：设置表格单元格的背景图像。 rowspan=“num“：设置单元格所占的行数。 colspan =“num“：设置单元格所占的列数。 align =“alignstyle“：设置对齐方式。 valign =“valignstyle“：设置单元格垂直对齐方式。 width =“size“：设置单元格宽度。 height=“size“：设置单元格高度。 Date 31 表格举例1 表格举例2 Date 32 2.3.3 HTML图像 Web页面中可以使用标签为页面添加 图像，使得页面更加漂亮。在Web页面上可以显示 .gif, .jpeg 等格式的图像。 举例 Date 33 2.3.4 框架标签 n通过框架，可以让多个网页同时显示在浏 览器的一个页面内。框架有两种： 框架集 内嵌框架 Date 34 框架集：框架集：是一种浏览器窗口的分割技巧，通过一个 特殊的框架集网页，将浏览器窗口分割成多个子窗口 ，让每个子窗口各显示一份网页文件，从而实现一个 浏览器窗口同时显示多个网页的效果。 框架集标记：框架集标记：主要有两部分组成，写在之间 框架集：用于定义一个窗 口中显示的框架数、尺寸等。 框架：用于定义网页上的显示区 域。 Date 35 Date 36 u框架集的嵌套 一个框架集只能进行单独横向或纵向的分割，若 要同进包含横向和纵禹的框架，可以使用框架集的嵌 套，即在中再标记一个。 Date 37 Date 38 内嵌框架 内嵌框架标记不是分割窗口，而是与图 片标签类似，也是同其它文字等内容编排在一个普通 网页内。当这个普通的网页显示时，标签所 处位置自动由其src属性所指定的子网页填充显示。 注意： 在Visual Studio.NET 2005中，iframe框架只能 在视图中用直接输入代码的方式创建，iframe框架中 显示的内容用src属性指定。 Date 39 Date 40 2.3.5 HTML 创建移动的文本 其作用是网页中设置一些移动的文字。 标记格式：标记格式： 要滚动显示的文本信息 属性：属性： behavior=alternate/slide/scroll bgcolor=颜色 scrolldelay=150 移动速度（ms） direction=left/right 简单静态网页设计综合示例 Date 41 2.3.6 HTML 表单 表单： 网页中具有可输入表项及项目选择等控制所 组成的栏目称为表单，它是与用户交互信息的主要 手段，在HTML页面中起着重要作用。 表单的组成：一般由表单标记和表单域组成。 表单标记格式： Date 42 属性： name：表单名。 action：用来指出当这个表单提交后需要执行的驻留 在Web服务器上的程序名（包括路径）是什 么。一旦Internet网络用户提交输入信息后 服务器便激活这个程序，完成某种任务。 target：用于确定服务器程序将结果返回时在哪一个 框架窗口中显示，默认值为“_self”。 Date 43 method：发送表单的HTTP方法，有二种方法。 post方法：页面将数据传送给处理程序。 get方法：将表单的输入信息作为查询串附加到目标URL的 后面。 例： 例： /my_page.aspx?bookid=“1245” Date 44 表单域: 表单域是用户输入和交互的主要界面，包括了 ， ， ，四种类型。 其中： 类型又包含Text，Radio，Checkbox， Password，Submit/Reset，Image，File，Hidden， Button等类型。 标记用来在由标记指示的列表框 中指示一个选项。 Date 45 CSS CSS （ Cascading Style Sheet ） 是层叠样式表是一种格式化网页的标准方式，样 式是指每一个网页元素呈现在浏览器中的风格，比如 字体的大小、颜色、页面的背景色、背景图等。 它就颜色、字体、边框、定位等格式提供了多种属性 ，这些属性均可适用于 HTML 标记符，从而使网页 的格式设置功能大大增强。 2.3.7 层叠样式表CSS设计 Date 46 CSSCSS的特点的特点 可对网页进行“精细加工”，以美化由HTML初步定义的网页。 一个CSS式样表可以用来定义多个HTML文本，只要改变CSS 文件，多个HTML文档的显示都将随之改变；反之依然。 多个CSS的定义出现矛盾时，范围越小的优先级越高。 CSS提供的属性能用脚本语言控制。 CSS与XML结合能实现更复杂的式样。 Date 47 CCSCCS样式设计样式设计 定义样式的基本格式如下： 样式属性1:值1; 样式属性2:值2; （1）内联式样式设置 通过style属性指定所修饰的元素使用的“私有样式”，用 法如下： style=“属性1:值1;属性2:值2;属性n:值n“ 例如1： 中华人民共和国 教育部 Date 48 （2）直接嵌入式样式设置 使用和标记建立一个或多个样式，置于 之间，在内直接使用这些样式。 标记有一个属性type，它指出样式的类别，如果使用 CSS样式，则type取值为“text/css”。 例如： 样式引用示例 h1font-size:40px; color:Red; h2font-size:30px; color:Blue; 中华人民共和国 教育部 Date 49 （3）样式表文件设置 所谓样式表文件就是将网页元素的样式定义设计为一个独立 的文件。凡是在网页的部分与该样式表文件建立 链接的HTML文件，其页面元素的样式就会按照样式表文作中的定 义显示。样式表文件的扩展名为“.css” 样式表文件中样式定义的一般格式如下： 样式定义选择符 样式属性1:值1; 样式属性2:值2; 例如：样式表文件StyleSheet1.css的内容为： body background-color:#33bb66; h1 font-size:40pt; color:Blue; h2 font-size:30pt; color:White; Date 50 在网页文件中引用该样式表文件只需要在网页 的与之间添加如下代码： 其中，rel规定了被链接文件的关系，取值永远 是“Stylesheet”，type属性规定了链接文件的类 型；href属性则指定了要链接的样式表文件的URL。 Date 51 一个简单的HTML示例 中华人民共和国 教育部 欢迎光临我的主页 这是我第一次做主页，无论怎么样，我都会努力做好！ 演示2 Date 52 样式表文件中设计每个样式的“样式定义选择符 ”是指样式定义的对象，可选项有：HTML标记、用 户自定义的类、用户自定义的ID和虚类等。 （1）HTML标记 HTML标记是最典型的选择符类型。如果有多个 不同的标记要使用相同的样式，则可以采用编组的 方法简化定义。 例如： H1,H2,H3 color:red Date 53 （2）类（class） 用户自定义的类是用来为某一个HTML标记创建多个样式 ，或者为多个标记创建同一种样式。类的定义格式如下： 样式定义选择符 .类名样式属性1:值1; 样式属性2:值2; 例如：.first和.second的样式代码分别如下： .first color:Red;font-size:40px .secondcolor:Blue;font-size:30px 这样，可以通过以下方式使用它们： 中华人民共和国 教育部 举例 Date 54 （3）自定义ID 自定义ID以“#”为标志，依靠这个唯一的标志可以在定义 一套样式时，称为“私有命名样式”。 私有命名样式的定义方法为： #idname 属性1:值1;属性2:值2;属性n:值n 其中，id标志前的“#”符号一定不能省略。例如： #custom color:Red 在网页中引用该样式的标记符内使用id属性即可，例如： 本段落文字为红色 ID与类主要区别是，类可以在同一个网页的多个标记中重 复使用；而ID则在同一网页中只能使用一次。 举例3 Date 55 （4）虚类 虚类是专用于标记的选择符，使用虚类可以设置不同类型超链接的 显示方式： A:link：未被访问过的超链接。 A:visited：已被访问过的超链接。 A:active：当超链接处于选中状态。 A:hover：当鼠标指针移动到超链接上。 定义虚类的语法格式如下： a:状态 属性:值; 例如： a:visited,a:link color:blue a:hover color:yellow; text-decoration:none 样式生成器 直接使用代码设计样式是十分麻烦的，为此Visual Studio.NET 2005提供了专门的样式生成器可以可视化地设计 样式。 Date 56 CSSCSS的使用总结的使用总结 使用 HTML 标记符的 STYLE 属性嵌套样式 信息 ； 通过在网页 HEAD 标记符中使用 STYLE 标记符嵌 套样式信息； 通过在网页 HEAD 标记符中使用 LINK 标记符链 接外部的层叠样式表文件（.css文件）。 在Visual Studio.NET 2005中建立CSS文件。 Date 57 页面的设计过程：页面的设计过程： u使用HTML+CSS技术设计网页布局。 u将所需服务器控件拖入页面，修改相应的属 性。 u根据需求添加