当前位置:首页 >> 其它课程 >>

第(1、2)课时 在线阅览工具的实现


【教学时间 教学时间】 教学时间 【课 课 题】

第 1,2 课 在线阅览工具的实现 ①掌握 HTML 控件的使用; ②掌握 WEB 控件的使用; ③掌握动态网页的编辑;

【教学目的 教学目的】 教学目的

【教学重点 教学重点】 教学重点 【教学难点 教学难点】 教学难点 【教学方法 教学方法】 教学方法 【教学过

程 教学过程】 教学过程 (Ⅰ)引入

动态网页的编辑 动态网页的编辑 讲授法,举例法

每一个网页制作的初学者都想让自己的网页更漂亮,看起来更专 业.要想制作出声形兼备的动态网页,您需要了解动态网页的制作技 术,它是建立在动态 HTML 语言之上的一种新技术,包括 CSS 文字效 果,层技术,框架结构等.只要使用 ASP.NET 制作网页,这些操作都 能实现. (Ⅱ)新授 一, 程序设计目的 每个 ASP.NET 服务器端组件都能自动生成一段可以显示在浏览 器上的 HTML 代码,就像一个 Windows 应用程序一样,在开发应用程 序时,代码中会出现各种样的组件,而在程序运行时,由 Windows 系 统而不是开发人员将这些组件显示在屏幕上.

如何才能控制某个 HTML 代码呢?设置好元素 ID 值, 再让这个元 素 runat="server",就可以在 ASP 代码中控制这个元素了.利用这 个功能可以实现动态地改变 HTML 元素的样式, 从而让 HTML 元素展现 出不同的显示效果而不用写一行 JAVE 代码. 二, 程序功能的介绍 ASP 框架中的第一组控件称为 HTML 控件, 控件中包括传统的 WEB 表单控件和其他更高抽象级别的控件, 它们提供了如下一些能够简化 开发工作的特性: (1) 丰富且一致的对象模型 (2) 对浏览器的自动检测 (3) 数据绑定 三, 程序设计 1, ASP+HTML 控件 几乎所有包含 runat="server"属性的标记,都会为其生成 HTML 控件.例: <input type="text" runat="server" id="textBox1" value="some text"> 此 HTML 可以创建一个名为"textBox1"的 htmlInputText 控件 2, (1) ASP+Web 控件 文本显示

Lable 控件用于在页面中显示只读的静态文本或数据绑定的文本.

<asp:Label runat="server" Text="Label1" font-Italic="true"> </asp:Label> (2) (3) 输入控件 RadioButton 控件 RadioButton 控件与 CheckBox 控件相似,但使用时通常会与其 他 RadioButton 控件组成一组,以提供一线互斥的选项: <asp:RadioButton runat="server" Text="Radiobutton1" GroupName="Group1" Checked="true"> </asp:RadioButton> <asp:RadioButton runat="server" Text="Radiobutton2" GroupName="Group1"> </asp:RadioButton> (4) (5) (6) (7) 选择控件 ListBox 控件 表单提交和回传 日期选择

四, 代码编写
<html> <script language="C#" runat="server"> String[,] a = { { "white", "960", "400", "14pt 楷体_gb2312",

"#8888ff", "dotted", "white", "900" }, { "white", "960", "400", "14pt 宋体", "black", "dotted", "black", "900" }, { "black", "960", "400", "14pt 楷体_gb2312", "white", "dotted", "#555555", "900" } }; void Change_Style(Object Src, EventArgs E) { int i = Int32.Parse(PreStyle.SelectedItem.Value); MyText.Style["color"] = a[i,0]; MyText.Style["width"] = a[i,1]; MyText.Style["height"] = a[i,2]; MyText.Style["font"] = a[i,3]; MyText.Style["background-color"] = a[i,4]; MyText.Style["border-style"] = a[i,5]; MyText.Style["border-color"] = a[i,6]; MyText.Style["font-weight"] = a[i,7]; } void Style_Change(Object Src, EventArgs E) { MyText.Style["color"] = FontColor.SelectedItem.Value; MyText.Style["width"] = TextWidth.Text; MyText.Style["height"] = TextHeight.Text; MyText.Style["font"] = FontSize.Text+"pt "+FontName.SelectedItem.Value; MyText.Style["background-color"] = BackColor.SelectedItem.Value; MyText.Style["border-style"] = BorderStyle.SelectedItem.Value;

MyText.Style["border-color"] = BorderColor.SelectedItem.Value; MyText.Style["font-weight"] = FontWeight.Text; } </script> <body> <form runat="server"> <h2>在线阅读</h2> 选择预定义样式: <asp:DropDownList id="PreStyle" style="font: 9pt 宋体;font-weight:100;color:red" AutoPostback="true" OnSelectedIndexChanged="Change_Style" runat="server" > <asp:Listitem value="0" selected="True" >蓝天白云</asp:Listitem> <asp:Listitem value="1" >黑白分明</asp:Listitem> <asp:Listitem value="2" >白字黑字</asp:Listitem> </asp:DropDownList> <Br> 文本宽度: <asp:TextBox id="TextWidth" Columns="6" AutoPostBack="True" Text = "600" runat="server"/> &nbsp 文本长度: <asp:TextBox id="TextHeight" Columns="6" AutoPostBack="True" Text = "700" runat="server"/> &nbsp 文本字体大小: <asp:TextBox id="FontSize" Columns="6" AutoPostBack="True" Text = "14" runat="server"/> &nbsp 文本字体粗细:

<asp:TextBox id="FontWeight" Columns="6" AutoPostBack="True" Text="700" runat="server"/> &nbsp 选择文本字体: <asp:DropDownList id="FontName" style="font:9pt 宋体;font-weight:100;color:red" AutoPostback="true" OnSelectedIndexChanged="Style_Change" runat="server"> <asp:Listitem value="宋体" selected="True"/> <asp:Listitem value="黑体" /> <asp:Listitem value="楷体_gb2312" /> <asp:Listitem value="隶书" /> </asp:DropDownList> &nbsp;&nbsp; <br> 选择文本颜色: <asp:DropDownList id="FontColor" style="font: 9pt 宋体;font-weight:100;color:red" AutoPostback="true" OnSelectedIndexChanged="Style_Change" runat="server"> <asp:Listitem value="red" selected="True" >红色</asp:Listitem> <asp:Listitem value="blue" >蓝色</asp:Listitem> <asp:Listitem value="green" >绿色</asp:Listitem> <asp:Listitem value="lightgreen" >淡绿色</asp:Listitem> <asp:Listitem value="black" >黑色</asp:Listitem> <asp:Listitem value="yellow" >黄色</asp:Listitem> <asp:Listitem value="gray" >灰色</asp:Listitem> <asp:Listitem value="white" >白色</asp:Listitem> </asp:DropDownList> &nbsp;&nbsp; 选择背景颜色: <asp:DropDownList id="BackColor" style="font: 9pt 宋体;font-weight:100;color:red" AutoPostback="true" OnSelectedIndexChanged="Style_Change" runat="server"> <asp:Listitem value="red" >红色</asp:Listitem>

<asp:Listitem value="blue" >蓝色</asp:Listitem> <asp:Listitem value="green" >绿色</asp:Listitem> <asp:Listitem value="lightgreen" >淡绿色</asp:Listitem> <asp:Listitem value="black" >黑色</asp:Listitem> <asp:Listitem value="yellow" >黄色</asp:Listitem> <asp:Listitem value="gray" >灰色</asp:Listitem> <asp:Listitem value="white" selected="True" >白色</asp:Listitem> </asp:DropDownList> &nbsp;&nbsp; 选择边缘样式: <asp:DropDownList id="BorderStyle" style="font: 9pt 宋体;font-weight:100;color:red" AutoPostback="true" OnSelectedIndexChanged="Style_Change" runat="server"> <asp:Listitem value="Dashed" selected="True" >虚线</asp:Listitem> <asp:Listitem value="Dotted" >点线</asp:Listitem> <asp:Listitem value="Double" >双线</asp:Listitem> <asp:Listitem value="Groove" >凹陷</asp:Listitem> <asp:Listitem value="Inset" >凸出 1</asp:Listitem> <asp:Listitem value="None" >无</asp:Listitem> <asp:Listitem value="NotSet" >未设定</asp:Listitem> <asp:Listitem value="OutSet" >凸出 2</asp:Listitem> <asp:Listitem value="Ridge" >脊状</asp:Listitem> <asp:Listitem value="Solid" >立体</asp:Listitem> </asp:DropDownList> &nbsp;&nbsp; 选择边缘颜色: <asp:DropDownList id="BorderColor" style="font: 9pt 宋体;font-weight:100;color:red" AutoPostback="true" OnSelectedIndexChanged="Style_Change" runat="server"> <asp:Listitem value="red" selected="true" >红色</asp:Listitem> <asp:Listitem value="blue" >蓝色</asp:Listitem> <asp:Listitem value="green" >绿色</asp:Listitem> <asp:Listitem value="lightgreen" >淡绿色</asp:Listitem> <asp:Listitem value="black" >黑色</asp:Listitem> <asp:Listitem value="yellow" >黄色</asp:Listitem> <asp:Listitem value="gray" >灰色</asp:Listitem> <asp:Listitem value="white" >白色</asp:Listitem> </asp:DropDownList> <br><br> <span

id="MyText" type="text" style="font:14pt 宋体;color:red;border-style:Dashed; width:600; height:700;border-color:red;font-weight:700;background-color:white;" runat="server"> &nbsp;&nbsp;&nbsp;&nbsp; 他们也许是全中国学历最高的一支足球队!在人杰地灵的清华大学校园里,有这 样一群博士生,在勇攀科学高峰的同时,在足球场上也活跃着他们矫健的身影.他们都是来 自于各个专业的博士研究生,他们中有人曾获得"北京市优秀学生干部",有人曾获得"北 京市三好学生",有人是清华大学的"学术新秀",在国内外高水平的刊物上发表了多篇 SCI 和 EI 的论文,有 5 人担任了清华大学各系的辅导员……但是在足球场上,他们的表现 同样出色, 1999 年他们代表清华大学参加了北京市高校研究生足球赛, 就获得了冠军; 2000 年荣升为清华大学体育代表队 C 类队伍, 正式成为清华大学体育代表队的成员之一; 先后有 6 名队员入选清华大学男子足球队参加"飞利浦"杯全国大学生足球联赛.值得关注的是, 全队没有一个队员是通过足球特招进入清华大学本科学习的, 完全是通过高考的拼杀进入清 华大学的,而且在清华大学完成了足球技能的飞跃.中央电视台"足球之夜"栏目于 2001 年专门制作了一部短篇来介绍他们, 但是由于各种原因最后没有能够播出, 他们的故事也被 编入了 2001 年清华大学 90 周年校庆的"清华故事"中. 最近几年在足球场上的主要战绩: <br> &nbsp;&nbsp;&nbsp;&nbsp; 1999 年 北京市高校研究生足球赛冠军 <br> &nbsp;&nbsp;&nbsp;&nbsp; 2000 年 对阵中央电视台"足球之夜"足球队,以 3:1 获胜 <br> &nbsp;&nbsp;&nbsp;&nbsp; 2001 年 对阵北京城建女足替补阵容,以 0:0 战平 <br> &nbsp;&nbsp;&nbsp;&nbsp; 2001 年 第 5 届清华-北大博士生足球对抗赛,6:1 获胜 <br> &nbsp;&nbsp;&nbsp;&nbsp; 2002 年 第 6 届清华-北大博士生足球对抗赛,7:0 获胜 <br> &nbsp;&nbsp;&nbsp;&nbsp; 2002 年 对阵澳大利亚墨尔本皇家理工大学,以 1:2 告负(中央电视台体育新闻 进行了报道) <br> &nbsp;&nbsp;&nbsp;&nbsp; 2003 年 对阵刚代表中国参加世界大学生运动会的北京师范大学女子足球队,以 3:0 获胜 </span> </form> </body> </html>

(Ⅲ)作业与思考题 编写一段 ASP 程序,实现一个动态网页选课系统. 【教学后记】

相关文章:
第(1、2)课时 在线阅览工具的实现
4页 2财富值如要投诉违规内容,请到百度文库投诉中心;如要提出功能问题或意见建议,请点击此处进行反馈。 第(12)课时 在线阅览工具的实现 人人隐藏>> 【教学时间...
阅读第1课时
33页 5财富值 第(12)课时 在线阅览工具... 9页 免费 人教版高中选修《新闻阅读... 7页 1财富值喜欢此文档的还喜欢 完形阅读练习(1) 5页 8财富值 08...
1.2 技术的性质(第2课时)
暂无评价|0人阅读|0次下载|举报文档 1.2 技术的性质(第2课时)_其它课程_高中...正反两面性 3、总结:技术作为人类的使用工具和物品,那就看什么人使用和使用的...
第1章第1节第2课时(信息与信息技术)
暂无评价|0人阅读|0次下载|举报文档第1第1第2课时(信息与信息技术)_其它课程_初中教育_教育专区。信息与信息技术(第 1 章第 1 节第 2 课时) 课题:信...
2014年第2、4单元课时学案 (1)
暂无评价|0人阅读|0次下载|举报文档2014年第2、4单元课时学案 (1)_英语_高中...体现了语文学科的工具性; 三、恰当地使用现代化教学技术手段,以提高课堂教学的...
第一周第1、2课时总第1、2课时九上第一单元第1课《沁园春雪》(教学设计 2课时)
第1课【课标要求】 《语文课程标准》指出: 1.能利用工具书识字词;规范书写。...2.能熟练使用朗读、默读、略读、浏览等阅读方法。 3.第一周第 12 课时总...
八年级历史与社会上册 第四单元 第一课 从封邦建国到一统天下(第2课时)教案 人教版
八年级历史与社会上册 第四单元 第一课 从封邦建国到一统天下(第2课时)教案 ...(1)春秋战国时期生产力的发展 【展示】各个不同时期的生产工具 打制石器、...
1Word2003基本操作(2课时)
暂无评价|0人阅读|0次下载|举报文档Word2003 基本操作教学课时 2 教学目标 1、...不仅可以运用 Word2003 中的命令实现制表,而且可以运用“绘制表格” 工具栏灵活...
在线阅读实现方案
4页 5财富值 阅读实践方案 2页 免费 亲自阅读理论方案 7页 1财富值喜欢...开源工具,加之 Win7 系统不兼容(我现在用的系统),所以就 没采用第三种实现...
大气压(第1、2课时) 教案
大气压(第12课时) 教案_初二理化生_理化生_初中教育_教育专区。大气压(第...;夏天比 任务:大气压强的测量工具 自学:阅读相关内容,回答问题: (1)测量大...
更多相关标签:
中文在线少儿阅览室 | 中国在线少儿阅览室 | 中文在线阅览室 | 中文在线少年阅览室 | 中文在线儿童阅览室 | pdf在线阅览 | 图片阅览工具 | winform word在线阅览 |