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

第(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技术的性质 (第2课时)
1.2技术的性质 (第2课时)_其它课程_高中教育_...新课: 4、技术的两面性 学生阅读课本 P15 技术两面...技术作为人类使用的工具和物品,不具有正面和负面。...
王兴华2.1整式第1课时(2)
暂无评价|0人阅读|0次下载|举报文档 王兴华2.1整式第1课时(2)_数学_初中教育...来 描述现实世界中的数量关系,并认识到它是解决实际问题的重要的数学工具。...
第七课第2节 第1课时 实现人生价值的条件080314
人生价值的实现1 课时 实现人生价值的条件 ...2阅读思考 根据以下思路阅读教材: 1、实现人生...也是由于当时的社会提供了必要的实践工具和手段才有...
...高中化学必修一同步巩固练习:第1章 第1节第2课时(解...
暂无评价|0人阅读|0次下载|举报文档四川省巴中市茶坝中学新人教版高中化学必修同步巩固练习:第1第1第2课时(解析版).doc_其它课程_高中教育_教育专区。高...
一上第二课时(课内)吴兴泉
暂无评价|0人阅读|0次下载|举报文档第二课时(课内)吴兴泉_年级数学_数学...巧放图片 二、学具:汽车、飞机等交通工具图片;小狗、小猫等动物图片若干 张。...
第1单元 第2课 第2课时职业理想的作用和实现
暂无评价|0人阅读|0次下载|举报文档 第1单元 第2第2课时职业理想的作用和实现_其它课程_初中教育_教育专区。第 1 单元 第 2 课第 2 课时 职业理想的作...
...1.1.2 信用卡、支票和外汇(第2课时)教案 新人教版必...
(第2课时)教案 新人教版必修1_政史地_高中教育_...知识目标:了解两种常用的结算方式和结算工具;了解信用...教师:请同学们阅读课本第 9 页然后小组讨论。请第...
第1~2课时 制作研究性学习成果报告
暂无评价|0人阅读|0次下载|举报文档 第1~2课时 制作研究性学习成果报告_其它...可以让学生参考在 Word 中制作 表格的经验,在幻灯片上制作表格,实现知识的迁移...
第2章第1节第二课时 胶体
暂无评价|0人阅读|0次下载|举报文档第2第1第二课时 胶体_理化生_高中教育...试用采用数学工具(数轴)表示三种分散系本质特征: 1nm ,其宏观特 ,其微粒直 2...
1.1基因工程概述(第2课时)
1.1基因工程概述(第2课时) 暂无评价|0人阅读|0...、回顾: 回顾: 1.DNA 重组技术的基本工具有那些...③④①② 四、筛选重组细胞 和实现功能表达 (目的...
更多相关标签: