9_1母版页、主题和皮肤
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Hands-On实训教程系列
相关实践知识30-19
20. 右键单击“Blue”文件夹，选择“添加新项”， 在弹出的对话框中选择“外观文件”，单击“添加” 按 钮 ， 将 在 主 题 “ Blue” 下 新 建 一 个 名 为 SkinFile.skin的皮肤文件。
Hands-On实训教程系列
相关实践知识30-20
Hands-On实训教程系列
相关实践知识30-7
6. 向网站中添加内容页。右击网站的名称， 然后单击“添加新项”。在“Visual Studio 已安装的模板”之下单击“Web窗体”，在 “名称”框中键入母版页的名称 “Default.aspx”，勾上“选择母版页”前面 的复选框（如图9-2所示），点击“添加”按 钮 ，出现 如图9-3所示的 “选择母版页对话 框”。
相关实践知识30-2
Hands-On实训教程系列
相关实践知识30-3
3. 设置母版页的页面布局，向母版页中添加一个 HTML的Table控件，修改源代码，把表格设为三行 一列，并设置表格的宽度为“800px”，高度为 “560px”，border属性设为“1”，在第一行和第 三行的td标记中设置其align属性为“center”。把 ContentPlaceHolder2控件拖入到第二行的单元格 中。
Hands-On实训教程系列
相关实践知识30-10
9. 向Default.aspx页中加入一个HTML的 Table，修改源代码，把表格设为三行一列。 向每一列的单元格中各加入一个Label控件， 其Font-Size属性设为12，Text属性从上到下 分别设置为“经营理念：诚信教育，把需要工 作的人变成工作需要的人”、“经营宗旨：做 最好的IT职业教育服务提供商”和“企业精神： 专注，专业，创新，共赢”。
专题九 母版页、主题皮肤和个性化
案例一 母版页、主题和皮肤
Hands-On实训教程系列
用户控件 自定义控件
回顾
Hands-On实训教程系列
教学目标
掌握母版页和内容页的创建方法，了解母版页 的优点
理解母版页的运行机制 理解主题、皮肤文件、样式表文件的概念及其
关系 了解主题的应用范围 掌握各种主题样式的优先级
4. 向表格的第一行中添加一个Label标签控件，修 改其Text属性为“北京翰子昂教育科技发展有限公 司”，ID属性改为“lblComName”。
Hands-On实训教程系列
相关实践知识30-4
5. 再向表格的第三行添加两个Label标签控件， 中间用换行符<br/>隔开，修改上面标签的 Text属性为“地址：北京市海淀区上地三街9 号”，ID属性改为“lblAddress”；下面标签 的Text属性为“电话：010-82807099”，ID属 性改为“lblPhone”。到此，母版页设置完毕， 完成后母版页的源代码大致如下：
Hands-On实训教程系列
相关实践知识30-18
17. 可以看出，呈现出的页面是母版页和内容页合并 后的结果，而地址栏中显示的URL仍为内容页的 URL，从而理解母版页的运行机制。
18. 下面开始通过主题来美化和控制页面的外观。 19. 在解决方案资源管理器中，右击网站的名称，鼠
标移到“添加ASP.NET文件夹”，在弹出的菜单中 单击“主题”，在网站下将自动创建App_Themes 文件夹，在这个文件夹下自动创建了一个名为“主 题1”的文件夹，“主题1”就是主题的名称，把“主 题1”改为“Blue“。
Hands-On实训教程系列
相关实践知识30-5
<%@ Master Language="C#" AutoEventWireup="true"
CodeFile="MasterHandsOn.master.cs" Inherits="MasterHandsOn" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<form id="form1" runat="server">
<table style="Width:800px; height:560px;" border="1" >
<tr>
<td align="center">
Text="北京翰子 SkinID="head" ></asp:Label>
<asp:Label ID=" lblComName" runat="server" 昂教育科技发展有限公司"
Hands-On实训教程系列
工作任务
制作北京翰子昂教育科技发展有限公司的首页 及会员登陆页面。
Hands-On实训教程系列
相关实践知识30-1
1. 启动Microsoft Visual Studio 2005，新建一个 “ASP.NET 网站”。创建时在“位置”框中输入要 保存网站的文件夹的名称“D:\WebSiteHandsOn”。 为了以后的操作方便，把自动生成的Default.aspx 文件删除。
相关实践知识30-13
11. 向register.aspx页中加入一个HTML的表 格控件，修改源代码，把表格设为6行2列。 合并第一行的两个单元格，并修改其align属 性为center。把下面5行中的左边单元格的 align属性设为right，右边单元格的align属性 设为left。
12. 按表的内容向窗体的表格中加入控件并设 置属性。
21. 向SkinFile.skin文件中加入如下的代码：
<asp:Label runat="server" ForeColor="blue" Font-Size="9"/> <asp:Label runat="server" ForeColor="blue" SkinId="vip" Font-Size="20"/> <asp:Label runat="server" ForeColor="blue" SkinId="head" Font-Size="28"/> <asp:Button runat="server" ForeColor="blue" /> <asp:TextBox runat="server" BackColor="blue"/>
</td>
</tr>
Hands-On实训教程系列
相关实践知识30-6
北
</table> </form> </body> </html>
<tr> <td>
</td> </tr> <tr align="center">
<td>
</tr>
</td>
<asp:contentplaceholder id="ContentPlaceHolder2" runat="server"></asp:contentplaceholder>
属性 Text ID
ID Text ID ID id id ID Text
会员注册 lblTitle 用户名：
属性值
Emial：
密码：
确认密码：
btnOK 提交 txtName txtEmail txtPwd txtConfirmPwd btnCancel 取消
Hands-On实训教程系列
相关实践知识30-15
Hands-On实训教程系列
相关实践知识30-11
<%@ Page Language="C#" MasterPageFile="~/MasterHandsOn.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default"
<asp:Label ID=" lblAddress" runat="server" Text="地址： 京市海淀区上地三街9号" ></asp:Label><br />
<asp:Label ID=" lblPhone" runat="server" Text="电话： 010-82807099" ></asp:Label>
Text="经营理念：诚信教育，
把需要工作的人
变成工作需要的人" Font-Size="12" ></asp:Label>
</td>
</tr>
Hands-On实训教程系列
相关实践知识30-12
<tr align="left">
<td>
<asp:Label ID="Label2" runat="server" Text="经营宗
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<bodBiblioteka Baidu>
2. 在解决方案资源管理器中，右击网站的名称，然 后单击“添加新项”，弹出如图所示的对话框。在 “Visual Studio 已安装的模板”之下单击“母版 页”，在“名称”框中键入母版页的名称 “MasterHandsOn.master”，单击“添加”按钮， 创建一个母版页。
Hands-On实训教程系列
Hands-On实训教程系列
相关实践知识30-8
Hands-On实训教程系列
相关实践知识30-9
7. 在对话框中选择母版页 “MasterHandsOn.aspx”，点击【确定】按 钮，创建出第一个内容页。然后修改其 @Page指令的Title属性值为“公司首页”。
8. 按上面的方法创建第二个内容页，名称为 “register.aspx”，修改其@Page指令的Title 属性值为“会员注册”。
Hands-On实训教程系列
相关实践知识30-14
单元格 第一行
第二行左
第三行左
第四行左
第五行左 第六行左
第二行右 第三行右 第四行右 第五行右 第六行右
控件类型 Label
HTML文字
HTML文字
HTML文字
HTML文字 Button
TextBox TextBox Input(Text) Input(Text) Button
Title="公司首页" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder2"
Runat="Server">
<table>
<tr align="left">
<td>
<asp:Label ID="Label1" runat="server"
旨：做最好的
IT职业教育服务提供商" Font-Size="12"
></asp:Label>
</td>
</tr>
<tr align="left">
<td>
<asp:Label ID="Label3" runat="server" Text="企业精
神：专注，专
业，创新，共赢" Font-
Size="12" ></asp:Label>
</tr>
Hands-On实训教程系列
相关实践知识30-16
15.按F5启动调试，浏览器打开Default.aspx页，页 面效果如图所示。
Hands-On实训教程系列
相关实践知识30-17
16. 点 击 “ 会 员 注 册 ” 超 链 接 ， 转 到 register.aspx页，效果如图所示。
册" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder2"
Runat="Server"> <table style="Width:100%; height:100%">
<tr> <td colspan="2" align="center"> <asp:Label ID="lblTitle" runat="server" Text="会员注册" ></asp:Label> </td>
13. 在表格下方插入3个换行符后，拖入一个 HyperLink控件，设置其NavigateUrl属性为 “~/Default.aspx”，Text属性为“公司首页”。
14. 此时，register.aspx页的源码大致如下：
<%@ Page Language="C#" MasterPageFile="~/MasterHandsOn.master" AutoEventWireup="true" CodeFile="register.aspx.cs" Inherits="register" Title="会员注
</td>
</tr>
</table>
<br /><br /><br />
<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl="~/register.aspx">会员注册</asp:HyperLink>
</asp:Content>
Hands-On实训教程系列
相关实践知识30-19
20. 右键单击“Blue”文件夹，选择“添加新项”， 在弹出的对话框中选择“外观文件”，单击“添加” 按 钮 ， 将 在 主 题 “ Blue” 下 新 建 一 个 名 为 SkinFile.skin的皮肤文件。
Hands-On实训教程系列
相关实践知识30-20
Hands-On实训教程系列
相关实践知识30-7
6. 向网站中添加内容页。右击网站的名称， 然后单击“添加新项”。在“Visual Studio 已安装的模板”之下单击“Web窗体”，在 “名称”框中键入母版页的名称 “Default.aspx”，勾上“选择母版页”前面 的复选框（如图9-2所示），点击“添加”按 钮 ，出现 如图9-3所示的 “选择母版页对话 框”。
相关实践知识30-2
Hands-On实训教程系列
相关实践知识30-3
3. 设置母版页的页面布局，向母版页中添加一个 HTML的Table控件，修改源代码，把表格设为三行 一列，并设置表格的宽度为“800px”，高度为 “560px”，border属性设为“1”，在第一行和第 三行的td标记中设置其align属性为“center”。把 ContentPlaceHolder2控件拖入到第二行的单元格 中。
Hands-On实训教程系列
相关实践知识30-10
9. 向Default.aspx页中加入一个HTML的 Table，修改源代码，把表格设为三行一列。 向每一列的单元格中各加入一个Label控件， 其Font-Size属性设为12，Text属性从上到下 分别设置为“经营理念：诚信教育，把需要工 作的人变成工作需要的人”、“经营宗旨：做 最好的IT职业教育服务提供商”和“企业精神： 专注，专业，创新，共赢”。
专题九 母版页、主题皮肤和个性化
案例一 母版页、主题和皮肤
Hands-On实训教程系列
用户控件 自定义控件
回顾
Hands-On实训教程系列
教学目标
掌握母版页和内容页的创建方法，了解母版页 的优点
理解母版页的运行机制 理解主题、皮肤文件、样式表文件的概念及其
关系 了解主题的应用范围 掌握各种主题样式的优先级
4. 向表格的第一行中添加一个Label标签控件，修 改其Text属性为“北京翰子昂教育科技发展有限公 司”，ID属性改为“lblComName”。
Hands-On实训教程系列
相关实践知识30-4
5. 再向表格的第三行添加两个Label标签控件， 中间用换行符<br/>隔开，修改上面标签的 Text属性为“地址：北京市海淀区上地三街9 号”，ID属性改为“lblAddress”；下面标签 的Text属性为“电话：010-82807099”，ID属 性改为“lblPhone”。到此，母版页设置完毕， 完成后母版页的源代码大致如下：
Hands-On实训教程系列
相关实践知识30-18
17. 可以看出，呈现出的页面是母版页和内容页合并 后的结果，而地址栏中显示的URL仍为内容页的 URL，从而理解母版页的运行机制。
18. 下面开始通过主题来美化和控制页面的外观。 19. 在解决方案资源管理器中，右击网站的名称，鼠
标移到“添加ASP.NET文件夹”，在弹出的菜单中 单击“主题”，在网站下将自动创建App_Themes 文件夹，在这个文件夹下自动创建了一个名为“主 题1”的文件夹，“主题1”就是主题的名称，把“主 题1”改为“Blue“。
Hands-On实训教程系列
相关实践知识30-5
<%@ Master Language="C#" AutoEventWireup="true"
CodeFile="MasterHandsOn.master.cs" Inherits="MasterHandsOn" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<form id="form1" runat="server">
<table style="Width:800px; height:560px;" border="1" >
<tr>
<td align="center">
Text="北京翰子 SkinID="head" ></asp:Label>
<asp:Label ID=" lblComName" runat="server" 昂教育科技发展有限公司"
Hands-On实训教程系列
工作任务
制作北京翰子昂教育科技发展有限公司的首页 及会员登陆页面。
Hands-On实训教程系列
相关实践知识30-1
1. 启动Microsoft Visual Studio 2005，新建一个 “ASP.NET 网站”。创建时在“位置”框中输入要 保存网站的文件夹的名称“D:\WebSiteHandsOn”。 为了以后的操作方便，把自动生成的Default.aspx 文件删除。
相关实践知识30-13
11. 向register.aspx页中加入一个HTML的表 格控件，修改源代码，把表格设为6行2列。 合并第一行的两个单元格，并修改其align属 性为center。把下面5行中的左边单元格的 align属性设为right，右边单元格的align属性 设为left。
12. 按表的内容向窗体的表格中加入控件并设 置属性。
21. 向SkinFile.skin文件中加入如下的代码：
<asp:Label runat="server" ForeColor="blue" Font-Size="9"/> <asp:Label runat="server" ForeColor="blue" SkinId="vip" Font-Size="20"/> <asp:Label runat="server" ForeColor="blue" SkinId="head" Font-Size="28"/> <asp:Button runat="server" ForeColor="blue" /> <asp:TextBox runat="server" BackColor="blue"/>
</td>
</tr>
Hands-On实训教程系列
相关实践知识30-6
北
</table> </form> </body> </html>
<tr> <td>
</td> </tr> <tr align="center">
<td>
</tr>
</td>
<asp:contentplaceholder id="ContentPlaceHolder2" runat="server"></asp:contentplaceholder>
属性 Text ID
ID Text ID ID id id ID Text
会员注册 lblTitle 用户名：
属性值
Emial：
密码：
确认密码：
btnOK 提交 txtName txtEmail txtPwd txtConfirmPwd btnCancel 取消
Hands-On实训教程系列
相关实践知识30-15
Hands-On实训教程系列
相关实践知识30-11
<%@ Page Language="C#" MasterPageFile="~/MasterHandsOn.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default"
<asp:Label ID=" lblAddress" runat="server" Text="地址： 京市海淀区上地三街9号" ></asp:Label><br />
<asp:Label ID=" lblPhone" runat="server" Text="电话： 010-82807099" ></asp:Label>
Text="经营理念：诚信教育，
把需要工作的人
变成工作需要的人" Font-Size="12" ></asp:Label>
</td>
</tr>
Hands-On实训教程系列
相关实践知识30-12
<tr align="left">
<td>
<asp:Label ID="Label2" runat="server" Text="经营宗
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<bodBiblioteka Baidu>
2. 在解决方案资源管理器中，右击网站的名称，然 后单击“添加新项”，弹出如图所示的对话框。在 “Visual Studio 已安装的模板”之下单击“母版 页”，在“名称”框中键入母版页的名称 “MasterHandsOn.master”，单击“添加”按钮， 创建一个母版页。
Hands-On实训教程系列
Hands-On实训教程系列
相关实践知识30-8
Hands-On实训教程系列
相关实践知识30-9
7. 在对话框中选择母版页 “MasterHandsOn.aspx”，点击【确定】按 钮，创建出第一个内容页。然后修改其 @Page指令的Title属性值为“公司首页”。
8. 按上面的方法创建第二个内容页，名称为 “register.aspx”，修改其@Page指令的Title 属性值为“会员注册”。
Hands-On实训教程系列
相关实践知识30-14
单元格 第一行
第二行左
第三行左
第四行左
第五行左 第六行左
第二行右 第三行右 第四行右 第五行右 第六行右
控件类型 Label
HTML文字
HTML文字
HTML文字
HTML文字 Button
TextBox TextBox Input(Text) Input(Text) Button
Title="公司首页" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder2"
Runat="Server">
<table>
<tr align="left">
<td>
<asp:Label ID="Label1" runat="server"
旨：做最好的
IT职业教育服务提供商" Font-Size="12"
></asp:Label>
</td>
</tr>
<tr align="left">
<td>
<asp:Label ID="Label3" runat="server" Text="企业精
神：专注，专
业，创新，共赢" Font-
Size="12" ></asp:Label>
</tr>
Hands-On实训教程系列
相关实践知识30-16
15.按F5启动调试，浏览器打开Default.aspx页，页 面效果如图所示。
Hands-On实训教程系列
相关实践知识30-17
16. 点 击 “ 会 员 注 册 ” 超 链 接 ， 转 到 register.aspx页，效果如图所示。
册" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder2"
Runat="Server"> <table style="Width:100%; height:100%">
<tr> <td colspan="2" align="center"> <asp:Label ID="lblTitle" runat="server" Text="会员注册" ></asp:Label> </td>
13. 在表格下方插入3个换行符后，拖入一个 HyperLink控件，设置其NavigateUrl属性为 “~/Default.aspx”，Text属性为“公司首页”。
14. 此时，register.aspx页的源码大致如下：
<%@ Page Language="C#" MasterPageFile="~/MasterHandsOn.master" AutoEventWireup="true" CodeFile="register.aspx.cs" Inherits="register" Title="会员注
</td>
</tr>
</table>
<br /><br /><br />
<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl="~/register.aspx">会员注册</asp:HyperLink>
</asp:Content>
Hands-On实训教程系列