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

第(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课时)教案 (新版)商...
地球仪和经纬网(第 2 课时)【课型】新授课 【...学生结合经度的划分方法,阅读完成问 题: (1)纬度...实实在在地把地球仪当作学习的工具来看待,让学生...
1.2 技术的性质(第2课时)
暂无评价|0人阅读|0次下载|举报文档 1.2 技术的性质(第2课时)_其它课程_高中...正反两面性 3、总结:技术作为人类的使用工具和物品,那就看什么人使用和使用的...
...探索生命第1节《探索生命的器具》第一课时教案1
暂无评价|0人阅读|0次下载|举报文档苏教版七上生物...《探索生命的器具》第一课时教案1_理化生_初中教育...2.FLASH:显微镜的结构与作用 3.视频文件:探究工具...
1.2(2) 小数(第二课时)
个加数=和-另个加数 (2)对于理解有困难的学生借助竖状算图这一工具...预览复制 收藏此文档 免费 下载此文档 大小:46.00KB 所需财富值:0 加入阅读...
1.2数轴、相反数与绝对值(1) 第2课时
§1.2 数轴、相反数与绝对值(1)2 课时 教学目标: 1、知识与技能 (1...总结反思 指导学生阅读教材后指出: 数轴是非常重要的数学工具,它使数和直线上的...
软件工程(第2版)_在线作业_1
暂无评价|0人阅读|0次下载|举报文档软件工程(第2版)_在线作业_1_其它_工作范文...(SA)是软件开发需求分析阶段所使用的方法,下列( )不是 SA 所使用 的工具。...
备课纸2(一份正反面)
暂无评价|0人阅读|0次下载|举报文档备课纸2(一份...节次 总内容课时 1. 物联网技术及实现 2 智能...工具 3.网络营销策略,成功案例 4 4 4 讲授 2 2...
新视野大学英语读写教程(第二版 )第四册unit1教案_图文
暂无评价|0人阅读|0次下载|举报文档新视野大学英语读写教程(第二版 )第四册unit...(第 3,4 课时 第, 课时) K Key points: 1) Discuss with the Ss about...
...版A必修1同步训练:2.1.2指数函数及其性质第2课时(附...
暂无评价|0人阅读|0次下载|举报文档 数学人教版A必修1同步训练:2.1.2指数函数及其性质第2课时(附答案)200992914734671450_建筑/土木_工程科技_专业资料。fssd第...
《财政学》第15章在线测试
暂无评价|0人阅读|0次下载|举报文档《财政学》第 15 章在线测试 剩余时间:56...() 2.1 [多选] [对] 财政政策工具主要包括以下几种: 2.2 [多选] [对]...
更多相关标签: