《ASP.NET程序设计教学课件作者徐占鹏单元二单元2母版主题和皮肤3网站主题皮肤母版的设计与应用课件》由会员分享，可在线阅读，更多相关《ASP.NET程序设计教学课件作者徐占鹏单元二单元2母版主题和皮肤3网站主题皮肤母版的设计与应用课件（21页珍藏版）》请在金锄头文库上搜索。
1、单元二 母版、主题和皮肤 网站主题、皮肤的设计与应用,主讲教师：徐占鹏,学习目标,【知识目标】 掌握主题、皮肤的创建和使用 【技能目标】 能够创建控件的皮肤并进行应用 能够创建网站的主题并进行应用,注： 本课内容参考教材 单元二 任务 2.3,主题和皮肤简介,主题是属性设置的集合，通过使用主题的设置能够定义页面和控件的样式，然后在某个Web应用程序中应用到所有的页面，以及页面上的控件，以简化样式控制。 主题和皮肤 (Theme and Skin) 是ASP.NET所提供的一种确保UI风格一致性的技术, 提供了统一Css与Web控件外观属性的解决方案。 (1) 皮肤: 一种特殊的文件, 用于统一
2、保存各种服务器控件的外观属性的公共设置. 能让控件的外观属性的设置从零星的页面中分离出来, 统一放到一处。 (2) 主题: 一种特殊文件夹, 保存一系列皮肤文件、CSS样式文件和页面外观素材(如图片等). 使用主题甚至可方便地替换整个网站的外观.,主题和皮肤的定义与应用,任务实施： 创建主题文件夹 添加外观控件文件 页中进行主题样式的应用 控件皮肤的设置 禁用主题与默认主题,页面主题和全局主题,用户可以为每个页面设置主题，这种情况被称为“页面主题”。也可以为应用程序的每个页面都使用主题，在每个页面使用默认主题，这种情况被称为“全局主题”。 页面主题是一个主题文件夹，其中包括控件的主题、层叠样式
3、表、图形文件和其他资源文件，这个文件夹是作为网站中的“App_Themes”文件夹和子文件夹创建的。每个主题都是“App_Themes”文件夹的一个子文件夹，如右图所示：,页面主题和全局主题,除了为单个页面使用Theme或者是StyleSheetTheme属性设置主题之外，还可以为应用程序中的所有页面同时应用主题。可以在web.config配置文件中配置Web应用程序的所有页面都可用的主题，代码如下所示。 ,项目实训,【实训目的】 1了解主题的类型； 2熟练掌握创建及应用主题； 3了解皮肤的定义； 4熟练掌握创建皮肤及应用。 【实训内容】 1. 创建一个皮肤文件应用两种页面背景图片。 2. 编
4、程实现全局主题切换。,单元二 母版、主题和皮肤 母版,主讲教师：徐占鹏,学习目标,【知识目标】 熟练掌握网站母板的设计 【技能目标】 能够通过母版规划网站页面结构布局，并熟练应用。,注： 本课内容参考教材 单元二 任务 2.4,任务陈述,任务构思与目标：根据需求新建SelectOKShop网站的母板，并创建网站的首页Index.aspx，应用该母板，结果如下图所示：,任务陈述,任务设计： 页面Index.aspx由4个部分组成： 页头、页尾、内容1和内容2。其中页头 和页尾是Index.aspx所在网站中页面的公共部分：如图所示： 网站中许多页面都包含相同的页头和页尾。页头显示的是Logo，和
5、菜单条，页尾显示的版权声明等。内容1和内容2是页面的非公共部分，是Index.aspx页面所独有的。结合母版页和内容页的有关知识可知，如果使用母版页和内容页来创建页面Index.aspx，那么必须创建一个母版页MasterPage.master和一个内容页Index.aspx。其中母版页包含页头和页尾等内容，内容页中则包含内容1和内容2。,母版页设计的基础知识,母版页的基本概念 允许开发人员创建具有指定的可编辑区域的站点级模板。随后用户友好网站的一个共同特征是其具有一致的站点级页面布局，版页，此模板可应用到网站中的 ASP.NET 页面上。 母版页为具有扩展名.master（如MyMaster
6、.master）的ASP.NET文件，它具有可以包括静态文本、HTML元素和服务器控件的预定义布局。母版页由特殊的Master指令识别，该指令替换了用于普通.aspx页的 Page指令。,母版页设计的基础知识,母版页的基本概念 用户友好网站的一个共同特征是其具有一致的站点级页面布局，版页允许开发人员创建具有指定的可编辑区域的站点级模板。随后，此模板可应用到网站中的 ASP.NET 页面上。 母版页为具有扩展名.master（如MyMaster.master）的ASP.NET文件，它具有可以包括静态文本、HTML元素和服务器控件的预定义布局。母版页由特殊的Master指令识别，该指令替换了用于普
7、通.aspx页的 Page指令。,创建并使用SelectOKShop电子商务网站母版,1.新建母版页。 在网站的解决方案下，右击网站名称，在弹出的快捷菜单中选择“添加新项“命令。打开“添加新项“对话框，选择“母版页“，默认名为MasterPage.master，修改默认名字为MasterPageQian.master。单击【添加】按钮就可以创建一个新的母版页。,创建并使用SelectOKShop电子商务网站母版,2.利用DIV+CSS进行网页布局。 (1)新建CSS文件。参照步骤1，在网站的解决方案下，右击网站名称，在弹出的快捷菜单中选择“添加新项“命令。打开“添加新项“对话框。选择“样式表“
8、项，默认名成为“StyleSheet.css”，单击【添加】按钮即可。 （2）编写CSS文件。打开StyleSheet.css文件，在空白出输入代码。,创建并使用SelectOKShop电子商务网站母版,3.设计母版页的层布局 4.ContentPlaceHolder控件的使用 切换到母版页的设计试图，打开【工具箱】，将ContentPlaceHolder拖放到控件母版页的bodyleft层中，并将ContentPlaceHolder控件名为为“ContentPlaceHolderLeft”。同样步骤，将ContentPlaceHolder拖放到控件母版页的bodyright层中并将Conte
9、ntPlaceHolder控件名为为“ContentPlaceHolderRight”。,创建并使用SelectOKShop电子商务网站母版,5.创建内容页 创建完母版页后，接下来就要创建内容页。内容页的创建与母版页的创建差不多，其创建步骤如下： （1）在网站的解决方案下，右击网站名称，在弹出的快捷菜单中选择“添加新项“命令。 （2）打开“添加新项“对话框。在对话框中选择“Web窗体“并为其命名为index.aspx，同时选中“将代码放在单独的文件中“和“选择母版页“复选框，单击【添加】按钮，弹出“选择母版页“对话框。在该对话框中，选择一个母版页，单击【添加】按钮，就可以创建一个新的内容页。,
10、创建并使用SelectOKShop电子商务网站母版,(3)编辑内容页。打开index.aspx页面，切换的设计视图，在“ContentPlaceHolderLeft”控件中输入“左侧内容页”，在“ContentPlaceHolderRight” 控件中输入“右侧内容页”。,母版页运行机制,1 母版页和内容页的运行过程 母版页和内容页的运行过程可以概括为以下5个步骤。 （1）用户通过键入内容页的URL来请求某页。 （2）获取内容页后，读取 Page指令。如果该指令引用一个母版页，则也读取该母版页。如果是第一次请求这两个页，则两个页都要进行编译。 （3）母版页合并到内容页的控件树中。 （4）各个C
11、ontent控件的内容合并到母版页中相应的ContentPlaceHolder控件中。 （5）呈现得到结果页。,母版页运行机制,2母版页的优点 使用母版页，可以为ASP.NET应用程序页面创建一个通用的外观。开发人员可以利用母版页创建一个单页布局，然后将其应用到多个内容页中。母版页具有下面的优点： 使用母版页可以集中处理页的通用功能，以便只在一个位置上进行更新，在很大程度上提高了工作效率。 使用母版页可以方便地创建一组共公控件和代码，并将其应用于网站中所有引用该母版页的网页。例如，可以在母版页上使用控件来创建一个应用于所有页的功能菜单。,项目实训,【实训目的】 1.掌握网站母版创建和使用的方法。 【实训内容】 1.根据网上书店的文件结构，创建网上书店母版页。在母版页中生成新网页，嵌套模板页。如图：,
