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

第(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.1任意角的三角函数(第2课时)
课题:1.2.1任意角的三角函数(第2课时) - 班级: 姓名: 课题:1.2.1 任意角的三角函数(第 2 课时) 编写人:郜海峰 审核人: 审批人: 【使用说明】1、课...
部编语文7.大小多少(第二课时)公开课 黄伟君
暂无评价|0人阅读|0次下载|举报文档部编语文7.大小多少(第二课时)公开课 黄伟君_年级语文_语文_小学教育_教育专区。7.大小多少(第二课时) 课时目标: 1.会...
第1课 色彩的纯度渐变(2课时)
暂无评价|0人阅读|0次下载|举报文档 第1课 色彩的纯度渐变(2课时)_其它课程...学生准备:1.课前收集纯度渐变的有关材料。 2.水粉颜料以及调色工具。 3.抹布...
岭南版本美术教案第五册 第1课 各式各样的民居(2课时)
暂无评价|0人阅读|0次下载|举报文档岭南版本美术教案第五册 第1课 各式各样的民居(2课时)_专业资料。岭南版本美术教案第五册 第1课 各式各样的民居(2 课时)...
2015版高中化学(人教版 选修3)练习:第2章 第3节 第1课时
暂无评价|0人阅读|0次下载 2015版高中化学(人教版 选修3)练习:第2章 第3节 第1课时_理化生_高中教育_教育专区。第二、选择题 第三节 第 1 课时 )...
第一节 元素周期表 (第2课时)教学设计
节 元素周期表 (第2课时)教学设计_高一理化生...五、教学方法 启发、诱导、阅读、讨论、练习、探究...是学化学的种重要工具, 对整个中学化学 的学习具有...
1.2 原始农业和先民的家园(第一课时) 教案(人教版《历...
暂无评价|0人阅读|0次下载1.2 原始农业和先民的家园(第一课时) 教案(人教版...、教学目标 1.知识与技能: ①基本概念:原始农业、畜牧业、生产工具、磨制...
19.1.2 函数的图象(第1课时)-公开课-优质课(人教版教学...
暂无评价|0人阅读|0次下载19.1.2 函数的图象(第1课时)-公开课-优质课(人教...是研究函数的重要 工具.学习函数的图象不仅要了解它的意义和画法,更重要的是了解...
2017版高考政治一轮复习练习:必修一 第二单元 课时1生...
2017版高考政治轮复习练习:必修 第二单元 课时...高清电 影在线观看等将成为智能手机的主流应用,用户...D.生产决定消费方式 解析 本题考查学生阅读理解能力...
2.1两条直线的位置关系教学设计(第2 课时)_图文
暂无评价|0人阅读|0次下载|举报文档2.1两条直线的...第 2 课时)刘让娟 、学情分析学生在第 1 课时...工具 2:如果只有直尺,你能在方格纸上画出两条互相...
更多相关标签: