电子课件单元主题皮肤四

单元二母版、主题和皮肤

母版主讲教师：徐占鹏学习目标【知识目标】熟练掌握网站母板的设计

【技能目标】能够通过母版规划网站页面结构布局，并熟练应用。注：本课内容参考教材单元二任务2.4

任务陈述任务构思与目标：根据需求新建SelectOKShop网站的母板，并创建网站的首页Index.aspx，应用该母板，结果如下图所示：

任务陈述任务设计：

页面Index.aspx由4个部分组成：页头、页尾、内容1和内容2。其中页头和页尾是Index.aspx所在网站中页面的公共部分：如图所示：网站中许多页面都包含相同的页头和页尾。页头显示的是Logo，和菜单条，页尾显示的版权声明等。内容1和内容2是页面的非公共部分，是Index.aspx页面所独有的。结合母版页和内容页的有关知识可知，如果使用母版页和内容页来创建页面Index.aspx，那么必须创建一个母版页MasterPage.master和一个内容页Index.aspx。其中母版页包含页头和页尾等内容，内容页中则包含内容1和内容2。

母版页设计的基础知识

母版页的基本概念允许开发人员创建具有指定的可编辑区域的站点级模板。随后用户友好网站的一个共同特征是其具有一致的站点级页面布局，版页，此模板可应用到网站中的ASP.NET

页面上。母版页为具有扩展名.master（如MyMaster.master）的ASP.NET文件，它具有可以包括静态文本、HTML元素和服务器控件的预定义布局。母版页由特殊的@Master指令识别，该指令替换了用于普通.aspx页的@Page指令。

母版页设计的基础知识

母版页的基本概念用户友好网站的一个共同特征是其具有一致的站点级页面布局，版页允许开发人员创建具有指定的可编辑区域的站点级模板。随后，此模板可应用到网站中的ASP.NET

页面上。母版页为具有扩展名.master（如MyMaster.master）的ASP.NET文件，它具有可以包括静态文本、HTML元素和服务器控件的预定义布局。母版页由特殊的@Master指令识别，该指令替换了用于普通.aspx页的@Page指令。创建并使用SelectOKShop电子商务网站母版1.新建母版页。在网站的解决方案下，右击网站名称，在弹出的快捷菜单中选择"添加新项"命令。打开"添加新项"对话框，选择"母版页"，默认名为MasterPage.master，修改默认名字为MasterPageQian.master。单击【添加】按钮就可以创建一个新的母版页。创建并使用SelectOKShop电子商务网站母版2.利用DIV+CSS进行网页布局。(1)新建CSS文件。参照步骤1，在网站的解决方案下，右击网站名称，在弹出的快捷菜单中选择"添加新项"命令。打开"添加新项"对话框。选择"样式表"项，默认名成为“StyleSheet.css”，单击【添加】按钮即可。（2）编写CSS文件。打开StyleSheet.css文件，在空白出输入代码。创建并使用SelectOKShop电子商务网站母版3.设计母版页的层布局4.ContentPlaceHolder控件的使用切换到母版页的设计试图，打开【工具箱】，将ContentPlaceHolder拖放到控件母版页的bodyleft层中，并将ContentPlaceHolder控件名为为“ContentPlaceHolderLeft”。同样步骤，将ContentPlaceHolder拖放到控件母版页的bodyright层中并将ContentPlaceHolder控件名为为“ContentPlaceHolderRight”。创建并使用SelectOKShop电子商务网站母版5.创建内容页创建完母版页后，接下来就要创建内容页。内容页的创建与母版页的创建差不多，其创建步骤如下：（1）在网站的解决方案下，右击网站名称，在弹出的快捷菜单中选择"添加新项"命令。（2）打开"添加新项"对话框。在对话框中选择"Web窗体"并为其命名为index.aspx，同时选中"将代码放在单独的文件中"和"选择母版页"复选框，单击【添加】按钮，弹出"选择母版页"对话框。在该对话框中，选择一个母版页，单击【添加】按钮，就可以创建一个新的内容页。创建并使用SelectOKShop电子商务网站母版(3)编辑内容页。打开index.aspx页面，切换的设计视图，在“ContentPlaceHolderLeft”控件中输入“左侧内容页”，在“ContentPlaceHolderRight”控件中输入“右侧内容页”。母版页运行机制1．母版页和内容页的运行过程母版页和内容页的运行过程可以概括为以下5个步骤。（1）用户通过键入内容页的URL来请求某页。（2）获取内容页后，读取@Page指令。如果该指令引用一个母版页，则也读取该母版页。如果是第一次请求这两个页，则两个页都要进行编译。（3）母版页合并到内容页的控件树中。（4）各个Content控件的内容合并到母版页中相应的ContentPlaceHolder控件中。（5）呈现得到结果页。母版页运行机制2．母版页的优点使用母版页，可以为ASP.NET应用程序页面创建一个通用的外观。开发人员可以利用母版页创建一个单页布局，然后将其应用到多个内容页中。母版页具有下面的优点：使用母版页可以集中处理页的通用功能，以便只在一个位置上进行更新，在很大程度上提高了工作效率。使用母版页可以方便地创建一组共公控件和代码，并