第3章 主题、用户控件和母版页
Ext第3章
第3章Ext Core实例语言实现为了更好地学习和了解Ext Core在实际开发中的应用，本章将通过DIY（do it yourself，自己动手做）一个简单网站的方式，一步一步地讲述如何使用Ext Core。
在开发的过程中还需要使用到LINQ to SQL和Newtonsoft.Json的知识，其中Newtonsoft.Json的相关知识可阅读第5章的相关内容。
在开始讲述本章内容之前，需要感谢Ext Core的一个扩展控件WindowLite的作者何一鸣先生。
WindowLite是在Ext Core基础上构建的一个Window控件，非常实用，大家可以到/blog/374182下载它。
3.1 创建应用并设置开发环境在VS 2008中创建一个名称为"ExtShop"的网站。
在"解决方案资源管理器"的根目录下创建以下目录：App_Code、bin、css、images和js。
建立目录后，将NewTonsoft.Json.dll文件复制到bin目录下，将ext-core.js文件复制到js目录下。
打开web.config文件，在configSections段增加一个名称为"dbConnection"的数据库连接字符串，如下面的代码所示。
<connectionStrings><add name="dbConnection" connectionString="Data Source=192.168.0.254;Initial Catalog=ExtShop;Persist Security Info=True;User ID=sa;password=abcd-1234" providerName="System.Data.SqlClient"/></connectionStrings>代码中的"Source"、"User ID"和"password"对应的值请根据你的数据库环境设置。
第09讲 主题、用户控件和母版页
动态网站设计与开发( C#版)
9.3 “网站版权”案例
本案例由一个首页和一个用户控件组成，用 户控件内容是“版权所有 2008~2010 ，建 议使用800*600分辨率观看(换行)本站技术支 持 微软学生中心”，单击链接可转到相应网 站。首页原只有文字“我是首页中的内容”， 经调用用户控件，首页最终显示效果如图所 示。
动态网站设计与开发( C#版)
9.4 “学习资源网页”案例
本案例制作的网页是由两个网页合成而成， 一个是共用的母板页(名为 MasterPage.master，包含上方的草原图片 和左侧登录框)，另一个是具体的内容页(名 为article.aspx，包含中间的工具图片和超链 接文字)，浏览时输入的是内容页的网址 (article.aspx)，显示则为合成页的效果 (MasterPage.master + article.aspx)。
动态网站设计与开发( C#版)
知 识 点
2.
同一控件多种定义的方法
有时需要对同一种控件定义多种显示风格，此时可以在皮肤文件中， 在控件显示的定义中用SkinID属性来区别。例如，若在主题Theme1 里的皮肤文件TextBox.skin中，对TextBox的显示定义了三种显示风 格： <asp:TextBox BackColor="Green" Runat="Server"/> <asp:TextBox SkinID="B1ueTextBox" BackColor="Blue" Runat="Server"/> <asp:TextBox SkinID="RedTextBox" BackColor="Red" Runat="Server"/> 其中第一个定义为默认的定义，中间不包括SkinID。该定义将作用于 所有不注明SkinID的TextBox控件。第二和第三个定义中都包括 SkinID属性，这些定义只能作用于SkinID相同的TextBox控件。
用户控件和母版页- 福建江夏学院精品课程建设网站.
2.4 母版页工作原理
2.5 母版页的优点
使用母版页可以集中处理页的通用功能，以便可以只 在一个位置上进行更新。 使用母版页可以方便地创建一组控件和代码，并将结 果应用于一组页。例如，可以在母版页上使用控件来 创建一个应用于所有页的菜单。 通过允许控制占位符控件的呈现方式，母版页使您可 以在细节上控制最终页的布局。 母版页提供一个对象模型，使用该对象模型可以从各 个内容页自定义母版页。
WEB项目开发
用户控件和母版页
1.用户控件
除 HTML 和 Web 服务器控件之外，您还可以轻松创 建自己的自定义的可重用控件，所采用的方法与您学 习的用来开发 网页的方法相同。这些控件 称作用户控件。 用户控件。用户控件是能够在其中放置标记和 Web 服务器控件的容器。然后，可以将用户控件作为一个 单元对待，为其定义属性和方法。 自定义控件。自定义控件是编写的一个类，此类从 Control 或 WebControl 派生。
除会在所有页上显示的静态文本和控件外，母 版页还包括一个或多个 ContentPlaceHolder 控件。这些占位符控件定义可替换内容出现的 区域。接着在内容页中定义可替换内容。定义 ContentPlaceHolder 控件后，母版页可能看起 来类似于下面这样。
2.3内容页
通过创建各个内容页来定义母版页的占位符控 件的内容，这些内容页为绑定到特定母版页的 页（.aspx 文件以及可选的代码隐 藏文件）。通过包含指向要使用的母版页的 MasterPageFile 属性，在内容页的 @ Page 指令中建立绑定。
1.3 用户控件演练
创建用户控件，并将 服务器控件添 加到此用户控件。 在用户控件中创建属性和方法。 将用户控件添加到主页面。 向主页面添加代码以处理用户控件。
第3章常用控件与界面设计精品PPT课件
第3章 常用控件与界面设计
1. 窗体的属性
设置窗体的属性有两种方法： （1）程序的界面设计时在“属性”窗口中手
工 设置为各属性设置相应的值即可。 （在界面设计阶段） （2）程序的代码设计时由相应的代码来实现 （在代码设计阶段）
格式：Object . Property = Expression
Visual Basic 程序设计
第3章 常用控件与界面设计
其中BorderStyle属性有六个可取的值，每个值对应一种窗 体的外观。
取值
说
明
0─None
窗体无边框与标题条，且窗体无法移动与 调整大小。建议尽量不要使用这种窗体
1─Fixed Single
窗体有可见边框及标题栏，无最小化与最 大化按钮，不能调整大小
Font示例
Visual Basic 程序设计
第3章 常用控件与界面设计
2. 窗体的事件
不同的对象对应不同事件的发生，VB中窗体有很多事 件。在一个窗体的代码窗口中列出了所有窗体事件。
在此选中对象
列出选中对象事件
Visual Basic 程序设计
第3章 常用控件与界面设计
2. 窗体的事件 Activate：当窗体变为激活的当前窗口时，引发本 ？ 事PPr件rii。vvaattee SSuubb FFoorrmm__CClliicckk(()) Click：FFoo当rrmm用11.户.BBa单acck击kCC窗ooll体oorr时==触v发vbbR本Ree事dd 件。 DEbEnlnCddliSScuukbb：当用户双击窗体时触发本事件。 Deact当iv触at发e：了当Fo窗rm体对失象去的激C活li状ck态事，件即时另，一该个窗体 成为事“当件双前过击窗程”口F实时o际r，m上引_C触发li发c本k两就事个会件事被。件执，行第。一次按鼠 Loa标d：按当钮窗时体产被生加Cl载ic到k单内击存事时件触，发第本二事次件按。鼠Lo标ad事 件往按往钮用时于产在生启Db动lC程li序ck时事对件属。性和变量进行初始化。 注 意Un：loLaoda：d事当件关发闭生窗时体窗时体，是触不发活卸动载的，事而件A，ct将iva窗te体事从件 发生内时存窗中体卸是载活。动的，Print方法不能在不活动窗体上使用， 因此Print不能用于Load事件中。
ASP.NET程序设计习题
《程序设计》复习习题基础一、选择题1、.NET Framework是一种( )。
A、编程语言B、程序运行平台C、操作系统D、数据库管理系统2、用Visual 编写的程序被编译成中间语言（MSIL）后，运行时还要再一次被编译，这种编译被称为( )。
A、CLRB、JITC、GCD、GDI3、运行程序的计算机必须安装 ( )。
A、.NET Framework和IISB、C、C#和D、4、要使程序立即运行需要按( )键。
A、F5B、Ctrl+F5C、F 10D、F11二、判断题１、浏览器只能解释HTML和JavaScript代码，不能解释后台代码。
2、页面的<HEAD>标签是可有可无的，而<BODY>标签是必不可少的。
3、JavaScript脚本在发送到客户端之前，需要将其编译成HTML代码。
三、思考题1、静态网页与动态网页的区别是什么？2、现动态交互式网页的技术与方法是什么？3、微软推出的有什么意义？服务器控件一、选择题1、指定Label控件的边框风格，需要设臵其（）属性。
A、BorderColorB、BackColorC、BorderStyleD、BorderWidth2、要将数据源绑定到控件，需要调用控件的（）方法。
A、LoadB、DataBindC、DisposeD、GetType3、要掩盖TextBox控件中文本，需要将控件的TextMode属性设臵为（）。
A、PasswordB、MultiLineC、SingleLineD、Null4、要使文本框最多输入6个字符，需要将该控件的（）属性值设臵为6。
A、MaxLengthB、ColumnsC、RowsD、TabIndex5、要使Button控件不可用，需要将控件的（）属性设臵为false。
A、EnabledB、EnableViewStateC、VisibleD、CausesValidation6、DropDownList被选中项的索引号被臵于（）属性中。
ASP. NET的皮肤、主题和母版页
ASP. NET的皮肤、主题和母版页在Web应用程序开发中，一个良好的Web应用程序界面能够让网站的访问者耳目一新，当用户访问Web 应用时，网站的界面和布局能够提升访问者对网站的兴趣和继续浏览的耐心。
提供了皮肤、主题和模板页的功能增强了网页布局和界面优化的功能，这样即可轻松的实现对网站开发中界面的控制。
12.1皮肤和主题皮肤和主题是自 2.0就包括的内容，使用皮肤和主题，能够将样式和布局信息分解到单独的文件中，让布局代码和页面代码相分离。
主题可以应用到各个站点，当需要更改页面主题时，无需对每个页面进行更改，只需要针对主题代码页进行更改即可。
12.1.1CSS 简介在任何Web应用程序的开发过程中，CSS （Cascading Style Sheets,级联样式表）都是非常重要的页面布局方法，而且CSS也是最高效的页面布局方法。
CSS发展于1994年10月，是为了补救HTML 3.2语法中的不足，但是由于当时网络的发展的不足和浏览器的支持率较低，直到1996年底，才正式发表了CSS 1.0规格，也正是1996年之后，浏览器才开始正式的支持CSS。
在网页布局中，CSS经常被使用于页面样式布局和样式控制。
熟练的使用CSS能够让网页布局更加的方便，在页面维护时，也能够减少工作量。
通常CSS能够支持三种定义方式，一是直接将样式控制放置于单个HTML元素内，称为内联式；二是在网页的head部分定义样式，称为嵌入式；三是以扩展名为. css文件保存样式，称为外联式。
这三种样式适用于不同的场合，内联式适用于对单个标签进行样式控制，这样的好处就在于开发方便，而在维护时，就需要针对每个页面进行修改，非常的不方便；而嵌入式可以控制一个网页的多个样式，当需要对网页样式进行修改时，只需要修改head标签中的style标签即可，不过这样仍然没有让布局代码和页面代码完全分离；而外联式能够将布局代码和页面代码相分离，在维护过程中，能够减少工作量。
VB3第三章
14
运行
标签应用举例
例:显示浮雕效果的文字，实现方法：字颜色、标
签位置
VB程序设计基础教程—第三章
15
文本框（TextBox）
功能：文 本 框 常 用 的 方 法 有 Refresh 和 SetFocus 等 ， 方 法 : 用于接受用户输入的信息，或显示系统提供的 （3）MultiLine:多行文本，只读属性。True时可输入
VB程序设计基础教程—第三章
11
控件的基本属性
焦点（focus）：窗体和窗体上的对象有很多，用 访 问 键 框架（Frame）、窗体（Form）和图片框 名称（Name）属性：每个控件都有名称属性，用 容器： ： 是 通 过 键 盘 来 访 问 控 件 。 命 令 按 钮
户任何时候只能操作一个对象，当前被操作的对象称它 （CommandButton）、复选框（CheckBox）和选项按钮 于设置控件的名字。创建控件时，新对象的默认名字， （PictureBox）等都可作为其他控件的容器。VB的大多 获得焦点。当对象具有焦点时，可接收用户的输入。将 （OptionButton）都可创建访问键。例如，设置按钮的 由对象类型加上一个唯一的整数组成。例如，第一个 数控件都支持容器（Container）属性，它的值就是控 焦点赋给对象的方法：1.运行时选择对象。 2.运行时 属性“Caption”，为“关闭（＆c）”。则按钮如图（a） 新的Form对象是Form1，第二个为Form2，依次类推； 件所在的容器。在容器中，控件的Left和Top属性值由 用快捷键选择对象。3.在代码中用 SetFocus方法。 所示。若按钮的属性“Caption”为“＆Close”则显示如 其在容器的位置决定。因此，移动容器也就同时移动了 控件的值属性：所有控件都有一个与控件值有关 图（b）所示，在运行时，按Alt+C单击按钮。 Move方法:可用于窗体、控件或移动对象的位置。语 在容器内的控件，控件和容器的相对位置不变（即控件 的属性，在引用该属性时不需要指定属性名，而只需 法形式为： 的 Left和 Top属性值不变）。 要指定控件名即可。控件的值属性是控件最常用的属 ［对象］.Move left［,top［,width［,height］］］ 性 ， 例 如 ， TextBox 控 件 的 Text 属 性 。 下 列 语 句 对 其中：对象为要移动的对象名称；left和top为对象 Text1文本框的值属性Text赋值： 的新left和top值；Width和height为对象的新Width和 Text1＝”Visual Basic” height值。
Web编程技术-布局与导航
制作人：潘冰1.1主题什么是主题 创建主题和外观 主题文件的应用
1.1.1 1.1.2 1.1.3
制作人：潘冰
1.1.1
什么是主题
主题(Theme)是指控件和页面外观属性设置的集合（文件 组）。 主题是一个目录，允许三种类型文件：外观文件、样式文 件和一些图形文件。
– 外观文件（皮肤文件,后缀为.skin）：用来定义一批服务器控件 的外貌。例如，可以定义一批TextBox或者Button服务器控件的底 色、前景色。 – 样式文件（后缀为.css） ：用来定义HTML的标签。
制作人：潘冰
1.网站布局
网站布局概述 1）站点布局传统解决方案
–使用框架、（表格、层） –使用包含文件 –使用用户自己定义控件
2）2.0提供网站布局技术
–主题 –母版 –用户控件
制作人：潘冰
1.网站布局
1.1 主题 1.2 母版 1.3 用户控件
有关实例在samples/myLayOut
相关代 码
制作人：潘冰
演示效果
制作人：潘冰
1.网站显示风格
1.1 主题 1.2 母版 1.3 用户控件
制作人：潘冰
1.3
用 户 控 件
1.3.1 用户控件概述 1.3.2 用户控件举例 1.3.4 使用用户控件注意事项
制作人：潘冰
1.3.1
用户控件概述
用户控件(User Control)是一种将页面的部分内容 单独保存起来的页面，供多个页面重复使用。
制作人：潘冰
1.1.3
主题文件的应用
有时需要对同一种控件定义多种显示风格，此时可以在外观 文件中，在控件显示的定义中用SkinID属性来区别。 例如，在TextBox.skin文件中对TextBox的显示定义了三种 显示风格：
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
3.2.2 创建用户控件的方法
创建用户控件的步骤如下所述。 (1) 先创建一个网站。 (2) 右击网站中某个目录，选择【添加新项】，并在打开的对话框中选择 【Web用户控件】，然后确定用户控件的名称，再单击【打开】按钮。 (3) 从【工具箱】中将控件添加到Web用户控件中。其中凡是希望用服务 器编程方式访问的控件都必须是服务器端控件。 (4) 为各控件设置属性或编写事件代码。 (5) 给用户控件进行编译。方法是先选择用户控件名，然后选择【生成】| 【生成页】命令以便完成编译工作。
用户控件文件的扩展名为 .ascx而不是.aspx；代码的分离(隐藏)文件的 扩展名是.ascx.cs而不是.aspx.cs； 在用户控件中不能包含 <HTML>、<BODY>和<FORM>等HTML语言 的标记； 用户控件可以单独编译，但不能单独运行。只有将用户控件嵌入到.aspx 文件中时，才能和网页一起运行。 除此以外，用户控件与网页非常相似。
(4) 在应用程序中添加多个Web Form(网页)，用于显示各种不同的内容。 (5) 然后通过HyperLink的NavigateUrl属性分别与各窗体链接。 (6) 如果需要，可双击【查询】按钮，在代码隐藏文件中编写查询程序。最后选择【生 成】菜单，再选择【生成页】命令，以编译用户控件。
3.2.4 代码分析
进入的【源】视图，可以看见用户控件的相关代码如下： <%@ Register TagPrefix="uc1" TagName="WebUserControl1" Src="WebUserControl1.ascx" %> <body > <form id="Form1" method="post" runat="server"> <uc1:WebUserControl1 id="WebUserControl11" runat="server"></uc1:WebUserControl1> </form> </body> 代码中粗体为用户控件的相关部分。其中语句： <%@ Register TagPrefix="uc1" TagName="WebUserControl1" Src="WebUserControl1.ascx" %> 代表用户控件已经在.aspx中注册。语句中各个标记的含义如下。
3.2 用 户 控 件
3.2.1 3.2.2 3.2.3 3.2.4 3.2.5
什么是用户控件 创建用户控件的方法 使用用户控件 代码分析 将Web窗体页转换为用户控件
ቤተ መጻሕፍቲ ባይዱ
3.2.1 什么是用户控件
用户控件(User Control)是一种自定义的组合控件，通常由系统提供的 可视化控件组合而成。在用户控件中不仅可以定义显示界面，还可以编 写事件处理代码。当多个网页中包括有部分相同的用户界面时，可以将 这些相同的部分提取出来，做成用户控件。 一个网页中可以放置多个用户控件。通过使用用户控件不仅可以减少编 写代码的重复劳动，还可以使得多个网页的显示风格一致。更为重要的 是，一旦需要改变这些网页的显示界面时，只需要修改用户控件本身， 经过编译后，所有网页中的用户控件都会自动跟随变化。 用户控件本身就相当于一个小型的网页，同样可以为它选择单文件模式 或者代码分离模式。然而用户控件与网页之间还是存在着一些区别，这 些区别包括：
3.1.3 同一控件多种定义的方法
程序运行中三个TextBox控件分别显示不同的风格。情况如图3.3所示。 实际上每个常用服务器控件的属性窗口中都有一个SkinID属性，通过该属 性的下拉列表可以直接确定在皮肤文件中的选项。
图3.3 不同定义下的三个TextBox控件
3.1.4 将主题文件应用于整个应用程序
3.1.3 同一控件多种定义的方法
其中第一个定义为默认的定义，中间不包括SkinID。该定义将作用于所有不注明 SkinID的TextBox控件。第二和第三个定义中都包括SkinID属性，这些定义只能作 用于SkinID相同的TextBox控件。 在网页中为了使用主题，应该做出相应的定义。例如： <form id="form1" runat="server"> <asp:TextBox id="TextBox1" Runat="Server" /> <br /> <asp:TextBox id="TextBox2" SkinID="BlueTextBox" Runat="Server" /> <br />图3.3 不同定义下的三个 TextBox控件 <asp:TextBox id="TextBox3" SkinID="RedTextBox" Runat="Server" /> </form>
TagPrefix：代表用户控件的命名空间(这里是uc1)，它是用户控件名称的前缀。如果 在一个.aspx网页中使用了多个用户控件，而且在不同的用户控件中出现了控件重名的 现象时，命名空间是用来区别它们的标志。 TagName：是用户控件的名称，它与命名空间一起来惟一标识用户控件，如代码中的 “uc1:WebUserControl1”。 Src：用来指明用户控件的虚拟路径。
3.1.2 创建主题的方法
系统为创建主题制定了一些规则，但没有提供什么特殊的工具。这些规则是：对控件显示属性的定 义必须放在以“.skin”为后缀的皮肤文件中，而皮肤文件必须放在“主题目录”下，而主题目录又 必须放在专用目录App_Themes的下面。每个专用目录下可以放多个主题目录；每个主题目录下面 可以放多个皮肤文件。只有遵守这些规定，在皮肤文件中定义的显示属性才能够起作用。 下面举例说明创建的过程。 (1) 右击网站名，选择【添加文件夹】命令，然后选择【主题文件夹】项，系统将会在应用程序 的根目录下自动生成一个专用目录App_Themes，并且在这个专用目录下放置主题文件夹，这里给 文件夹取名为Themes1。 (2) 右击主题文件夹名，在弹出的菜单中选择【外观文件】。 (3) 弹出一皮肤文件的框架，可以给该文件改名，但是文件的后缀必须是“.skin”，这里取名为 SkinFile.skin。 专用目录、主题目录、皮肤文件三者之间的关系如图3.1所示。 (4) 在皮肤文件(这里是SkinFile.skin)中给TextBox和Button两种控件定义显示的语句如下。 <asp:TextBox BackColor = "Orange" ForeColor = "DarkGreen" Runat = "server" /> <asp:Button BackColor = "Orange" ForeColor = "DarkGreen" Font-Bold = "true" Runat= "server" />
3.1.2 创建主题的方法
文件中将两种控件的背景色都定义成Orange，前景色定义成DarkGreen。对Button 控件的字 体定义成粗体。 值得注意的是，有的控件(如LoginView、User Control等)不能用skin文件定义外貌。能够定义 的控件也只能定义它们的外貌属性，其他行为属性(如AutoPostBack属性等)不能在这里定义。 (5) 在同一个主题目录下，不管定义了多少个皮肤文件，系统都会自动将它们合并成为一个文 件。 (6) 项目中凡需要使用本主题的网页，都需要在网页的定义语句增加“Theme = [主题目录]” 的属性，例如： <%@ Page Theme="Themes1"… %> 在设计阶段，并看不出皮肤文件中定义的作用，只有当程序运行时，在浏览器中才能够看到控件 外貌的变化。图3.2就是TextBox和Button控件在上述定义中显示的界面。
<asp:TextBox SkinID="BlueTextBox" BackColor="Blue" Runat="Server" />
<asp:TextBox SkinID="RedTextBox" BackColor="Red" Runat="Server" />
6个HyperLink控件，将它们的Text属性分别设成“新闻”“娱乐”等； 4个Image以及4个Label控件，分别选择各自的图标，标上“保存”“下载”等； 1个TextBox文本框和1个“查询”按钮。
图3.4 用户控件示例
3.2.3 使用用户控件
用户控件只能在同一应用程序的网页中共享。就是说，应用项目的多个 网页中可以使用相同的用户控件，而每一个网页可以使用多种不同的用 户控件。如果一个网页中需要使用多个用户控件时，最好先进行布局。 然后再将用户控件分别拖到相应的位置。 在设计阶段，有的用户控件并不会充分展开，而是被压缩成小长方形， 此时它只起占位的作用。程序运行时才会自动展开。
图3.1 专用目录、主题目录和皮肤文件的关系
图3.2 用皮肤文件定义控件的外貌