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

第(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课时)
暂无评价|0人阅读|0次下载|举报文档 第1课 色彩的纯度渐变(2课时)_其它课程...学生准备:1.课前收集纯度渐变的有关材料。 2.水粉颜料以及调色工具。 3.抹布...
...二年级上册《锯是怎样发明的》公开课教案第一课时
2017-2018年教科版(六三制)语文小学二年级上册《锯是怎样发明的》公开课教案第一课时 - 《锯是怎样发明的》教案 教学目标 、知识与技能 1.正确、流利、有...
高一历史(人民版)必修2课时作业 专题4 中国近现代社会...
高一历史(人民版)必修2课时作业 专题4 中国近现代社会生活的变迁 第2课 交通和通信工具的进步 - 专题四 、选择题 1.关于近现代自行车的叙述,正确的是( A....
...第2单元 第2章 第4节 动物的行为(第一课时)教学案
暂无评价|0人阅读|0次下载|举报文档 2014年秋七年级生物上册 第2单元 第2章 第4节 动物的行为(第一课时)教学案_理化生_初中教育_教育专区。动物的行为(第一...
湘教版高中数学选1-2《复数的四则运算(第1课时)》优质...
湘教版高中数学选1-2《复数的四则运算(第1课时)》优质学案[精] - 复数的四则运算(1) 【要点梳理】 1. 设 z1 ? a ? ?bi, z 2 ? c ? di 是...
【教案二】14.1.4整式的乘法(第二课时)
【教案】14.1.4整式的乘法(第二课时)_数学_初中教育_教育专区 暂无评价|0人阅读|0次下载|举报文档 【教案】14.1.4整式的乘法(第二课时)_数学_初中...
29.2三视图(第1课时)教案
29.2 三视图(第一课时)教学设计教学时间 2013.3.18 课题 29.2 三视图(第一课时)执教人 管维林 课型 新授课 教学目标 知识和能力过程和方法情感态度 价值观...
...四年级上册《人们怎样传递信息》学案第二课时(1)(新版)
暂无评价|0人阅读|0次下载2017-2018学年语文A版小学语文四年级上册《人们怎样传递信息》学案第二课时(1)(新版)_四年级语文_语文_小学教育_教育专区。《人们怎样...
...3.2.1 人体与外界的气体交换(第2课时)优秀教案
暂无评价|0人阅读|0次下载|举报文档山东滕州市滕洪绪中学2014-2015七年级生物下册 3.2.1 人体与外界的气体交换(第2课时)优秀教案_理化生_初中教育_教育专区。人...
...《国旗和太阳一同升起》优质课教学设计第一课时(新...
暂无评价|0人阅读|0次下载2017-2018年语文S版小学语文年级上册《国旗和太阳一同升起》优质课教学设计第一课时(新版)_二年级语文_语文_小学教育_教育专区。《国旗...
更多相关标签: