《ASP.NET网页开发实用教程教学课件作者陈运海电子教案第2章节》由会员分享,可在线阅读,更多相关《ASP.NET网页开发实用教程教学课件作者陈运海电子教案第2章节(49页珍藏版)》请在金锄头文库上搜索。
1、ASP.NET网页开发实用教程,Title slide,第2章 C#语言、HTML标签与控件,本章应会 1HTML标签的使用 2设置超级链接 3制作表单 4常用HTML控件的使用,本章应知 1语言的基本知识和应用 2HTML元素的组成 3HTML文件的整体结构 4HTML服务器端控件的应用,2.1项目1 制作双向乘法九九表,在这里,我们通过制作双向乘法九九表来初步熟悉ASP.NET C#脚本语言的基本语法。我们首先来掌握一些在C#脚本语言中必要的常识。,2.1.1 声明变量,在C#脚本语言中,声明变量的方式十分简单,格式如下所示: int x; String s; String s1, s2;
2、 Object o; Object obj = new Object(); public String name;,2.1.2 语句、表达式,输出语句:Response.Write(“今天的天气真好!“); 条件语句:if else 循环语句:for(j=1;j=i;j+) Response.Write(“*”); while(a!=0) a+; doa+;while(a!=0);,2.1.3注释,在C#语言中,注释的方式和C/C+的相同,都是使用“/”和“/* */”来表示: /这是我的注释,/*这 是 我 的 注 释 */,2.1.4开始制作双向乘法口诀表,下面就是我们使用条件语句和循环语
3、句编写的双向乘法口诀表,效果如下所示:,1*1=1 1*2=2 2*2=4 1*3=3 2*3=6 3*3=9 1*4=4 2*4=8 3*4=12 4*4=16 1*5=5 2*5=10 3*5=15 4*5=20 5*5=25 1*6=6 2*6=12 3*6=18 4*6=24 5*6=30 6*6=36 1*7=7 2*7=14 3*7=21 4*7=28 5*7=35 6*7=42 7*7=49 1*8=8 2*8=16 3*8=24 4*8=32 5*8=40 6*8=48 7*8=56 8*8=64 1*9=9 2*9=18 3*9=27 4*9=36 5*9=45 6*9=54
4、 7*9=63 8*9=72 9*9=81 1*8=8 2*8=16 3*8=24 4*8=32 5*8=40 6*8=48 7*8=56 8*8=64 1*7=7 2*7=14 3*7=21 4*7=28 5*7=35 6*7=42 7*7=49 1*6=6 2*6=12 3*6=18 4*6=24 5*6=30 6*6=36 1*5=5 2*5=10 3*5=15 4*5=20 5*5=25 1*4=4 2*4=8 3*4=12 4*4=16 1*3=3 2*3=6 3*3=9 1*2=2 2*2=4 1*1=1,之所以称为双向乘法口诀表,是因为乘数示由19依次递增的,而当乘数达到9时,乘
5、数又由91依次递减,最终形成了一个由乘法口诀构成的等腰三角形。,制作双向乘法九九表的操作步骤如下:,(1)了解 。使用过其他动态Web技术的人都不会对陌生,大部分的动态Web技术都支持它(包括ASP、PHP、JSP等),包含在标签中的程度代码,将会在服务器端执行,并且生成动态Web页面。,(2)下面的代码就是双向乘法口诀表的运算代码,在关键部分我们都进行了注释:,(3)在这里我们还要注意的是:,所有的ASP.NET程序都必须包含在中。而程序中段的“”字符代表的是换行,即我们通常说的“回车”。因为它是HTML语言,所以我们可以看到,程序在这里分为了两部分“% %”。今后我们需要在ASP.NET程
6、序中使用html语言时,都必须如此操作。 所有的ASP.NET程序的关键字都是大小写敏感的,这与ASP不同。 输出语句Response.Write(”)中的变量是不包含在“”中的,它们之间使用“+”相连。,完整的源代码如下:,2.2 项目2 用HTML标签及客户端控件制作网页,HTML语言有特定的逻辑结构,分成不同的逻辑单元,它是一种结构化的纯文本文件。因此,可用任何一个文本编辑器进行编写。HTML的文件扩展名为.htm或.html。它能够提供图像、动画以及其它多媒体信息的超级链接。它作为Web上通用的描述语言,为各种计算机提供了一个公开的标准接口,它与平台无关。 HTML只能开发静态网页,这
7、严重阻碍了信息在网络上高速传递。但用它来与ASP.NET结合,能够建立很多功能强大而高效运行的网站。 下面主要讲述HTML(超文本标记语言,HyperText Markup Language)语言,主要包括HTML语言的标记、结构及常用HTML控件。 请用HTML标记语言及HTML控件制作如图2-1所示的网页文件。并要求: 当用鼠标点击其中一带下划线的文字“表格”时,打开一个如图2- 2所示页面。 当用鼠标点击其中一带下划线的文字“表单”时,打开一个如图2- 3所示页面。,图2-1 HTML网页显示,图2-2 课程表,图2-3 表单的应用,2.2.1 任务1 用基本HTML标签建立文本页面文件
8、, HTML语言基础 HTML语言基础 ,(1)建立HTML文本。打开记事本,输入以下代码:,保存文件,命名为“1-1.htm”,注意扩展名为”.htm”。 (2)生成页面。双击文件1-1.htm,即可生成页面,如图2- 4所示。,图2-4 最简单的HTML页面,从上面的执行中可以看出,HTML文档是以标记开始,以标记结束的。文件头包含在标记和标记之间。在文件头中应使用一个文档标题,即必须使用标记,以窗口的名称显示。文件体部分包含在和标记之间。这是一个最基本的、典型的HTML网页文件。,2.2.2 任务2 添加标题、清单标签到网页文件中,选择页面1-1.htm的菜单“查看”|“源文件”,打开代
9、码窗口,在其中与添加如下代码:, HTML语言基础 HTML语句和结构 HTML语句结构 HTML基本元素 HEAD BODY TITLE Hn P LI 超级链接、图像、动画和声音 表格 表单 层叠样式表 ,刷新页面,生成如图2-5所示页面。,图2-5 包含多种HTML标签的网页,我们可以看出:标题元素Hn有6种,分别为H1、H2H6,用于表示文章中和各种题目,并且标题号越小,字体越大。常用清单有无序清单(UL,无序列号)和有序清单(OL,有序列号),表示列举项目明细。这些在列出同类项时特别有用。,2.1.3 任务3 制作一个表格网页文件, table应用 课程表 星期一 星期二 星期三 星
10、期四 星期五 ,制作如图2-2所示的页面,其内容主要是一个表格。按任务1的方法用文本编辑器编写以下页面代码:,第一二节 JAVA C语言 JAVA 英语 C语言 第三四节 C语言 JAVA 英语 C语言 JAVA 第五六节 JAVA C语言 英语 JAVA C语言 ,保存为3-01.htm,双击生成页面,如图2- 6所示。,图2-6 课程表,从代码及网页的显示结果,我们可以看出: 表格的基本形式为:, caption 内容 单元cell 内容 单元cell内容 单元内容 单元内容 ,表格属性cellspacing表示单元格之间的距离,cellpadding单元格边框距内容的距离。Border表
11、示边框的粗细,width表示表格的宽度,可用百分比表示,也可直接用像素表示。align表示表格的水平对齐方式,可为左对齐(left)、居中对齐(center)、右对齐(right)。valign表示竖直对齐方式,可为上对齐(top)、下对齐(bottom)、居中对齐(middle)。,2.2.4 任务4 生成超级链接功能,这里假设文件1-1.htm 和3-01.htm在同一站点的同一目录下。用文本编辑器打开文件1-1.htm的代码窗口,添加如下所示代码:, HTML语言基础 HTML语句和结构 HTML语句结构 HTML基本元素 HEAD BODY TITLE Hn,P LI 超级链接、图像、
12、动画和声音 表格 表单 层叠样式表 ,保存代码,刷新页面,发现在文字表单变为蓝色,下面多了一条下划线,点击可以转到页面3-01.htm,颜色变为红色,如图2- 7所示。,图2-7 链接的应用,现在对照网页文件代码和网页的显示结果可以看出: (1)超文本链接的标记为,添加链接的格式为: 链接的文本,如果要对一图片作超级链接,只需将文本改为相应的图片即可,比如,即是要将图片02_08.JPG链接到文件first.htm(这里也假设02_08.jpg与文件first.htm在同一目录),图片名取自的SRC属性,WIDTH,与HEIGHT表明图片的宽与高,若要链接到一多媒体,只需将HREF改为多媒体的
13、地址即可。,2.2.5 任务5 用HTML客户端控件制作一个表单文件,制作如图2-3所示的网页文件,其中主要应用表单和HTML控件生成。用文本编辑器创建网页文件4-01.htm,代码如下:,(2)href属性指明链接对象的地址,可以是绝对地址,也可以是相对地址。 下面我们生成一表单页面4-01.htm,请大家动手为文字“表单”作超级链接。, 表单的应用 表单的应用 , 姓别: 男 女 , 出生日期: 1975 1976 1977 1978 1979 1980 ,年 1 2 3 4 5 6 7 8 9 10 11 12 ,月 1,2 3 4 5 6 7 8 9 10 11 12 13,14 15 16 17 18 19 20 21 22,23 24 25 26 27 28 29 30 31 ,日 婚姻状况: 未婚 已婚 离异 , 您的身高: 厘米 最高学历: 中技 中专 大专 本科 硕士 博士 , 毕业学校及专业: 教育情况描述: ,在浏览器中生成页面,如图2- 3所示。我们来分析一下表单中各控件的用法: (1)创建表单的标记为。 (2)属性可以有: name:定义表单的