《ASP NET程序设计》-项目三母版、主题及外观

任务一Master页面的创建与使用【任务要点】1.创建Master页面2.布局Master页面3.创建Content内容页面【案例1】

创建某企业网站，网站主要功能包括公司简介、公司新闻、产品介绍、联系我们等常用功能。运行效果如图3-1所示。下一页返回任务一Master页面的创建与使用【具体步骤】（1）创建Master页面。创建一个新网站，然后右击网站，在弹出的快捷菜单中选择【添加新项】命令，在弹出的对话框中选择【母版页】选项，如图3-2所示。在名称文本框内输入母版页面的名称，母版的名称可以更改，但是扩展名.master不可以更改。单击【添加】按钮后，此时界面中出现一个ContentPlaceHolder的矩形框，如图3-3所示。（2）布局Master页面。选择【布局】菜单中的【插入表】命令，弹出【插入表】对话框，如图3-4所示。下一页返回上一页任务一Master页面的创建与使用

在【插入表】对话框中选中【模板】单选按钮，在其下拉列表框中选择布局样式，本例中选择【页眉、页脚和边】选项。布局完成后，页面被表格分成4部分，上部是网站的头部，中间左边是产品导航，右边是内容页面，底部是公司的地址和联系方式。将ContentPlaceHolder拖入中间右边的单元格内，并将单元格的“valign”属性设置为“top”,如图3-5所示。（3）填充Master页面元素。首先布局页面的头部，将头部单元格的背景设置为“top.jpg”，并将单元格的高度设置为“190px”，将单元格的“valign”属性设置为“bottom”，在单元格内添加一个一行五列的表格，用来放置页面导航链接，并将此表格的“bgcolor”属性设置为“#35b7ff”，在5个单元格内分别放入对应的链接，效果如图3-6所示。下一页返回上一页任务一Master页面的创建与使用

其次，将Master页面左边单元格的“valign”属性设置为“top”,将单元格的“bgcolor”属性设置为“#35b7ff”，在单元格内放入产品导航。最后将Master页面的底部单元格的“valign”属性设置为“top”，“align”属性设置为“center”，输入相应的版权信息，地址和电话等，如图3-7所示。对于ContentPlaceHolder部分，此时不需要在Master页面中设置，具体的在内容页面中设置。（4）使用Master页面。右击网站，在弹出的快捷菜单中选择【添加新项】命令，在弹出的对话框中选择【Web窗体】选项，选中【选择母版页】复选框，如图3-8所示。在弹出的【选择母版页】对话框中选择刚创建的母版页面，如图3-9所示。下一页返回上一页任务一Master页面的创建与使用【背景知识】（1）使用Master页面的原因。在Web程序中大多数页面都有一些公共元素，在没有Master页面以前，必须把这些元素放到每个页面上去，在多数情况下，这种做法比较困难。通常一些开发人员简单地把这些公共区段的代码复制并粘贴到需要的页面上去，当然这种方法是可行的，但是相当麻烦，并且如果对一个区段中的代码进行修改，就必须在每个页面上重复这个修改，导致开发效率非常低下。（2）Master页面的工作过程。Master页面是提供模板的一种简单方式，并可以由应用程序中任意多个ASP.NET页面使用，只需要把共享的内容放在Master页面中即可。在程序运行时，ASP.NET引擎会把Master页面元素和内容页面元素合并到一个页面上，显示给终端用户，具体工作过程如图3-11所示。下一页返回上一页任务一Master页面的创建与使用（3）编程使用Master页面。在任何内容页面上，都可以轻松地编程指定Master页面，使用Page.MasterPageFile属性就可以把Master页面赋予内容页面，无论是否在@page指令中指定了另外一个Master页面，都可以使用该属性。（4）Master页面的时间触发顺序。在处理Master页面和内容页面时，将两个页面类合并为一个页面类时，需要知道哪些事件先触发，哪些事件后触发。返回上一页任务二创建自己的网站主题和外观【任务要点】1.创建正确的目录结构2.创建Skin3.在主题中包含CSS文件4.在主题中包含图像【案例】根据所给素材，创建网站的主题。具体运行效果如图3-13所示。下一页返回任务二创建自己的网站主题和外观【具体步骤】（1）右击【项目】，在弹出的快捷菜单中选择【添加ASP.NET文件夹】【主题】命令，如图3-14所示。此时在应用程序的目录下创建了一个“App_Themes”文件夹，如图3-15所示。App_Themes目录不使用通常文件夹的图标，而使用包含一个画笔的文件夹图标。（2）在App_Themes文件夹中，为应用程序中使用的每个主题创建一个Theme文件夹，例如，本应用程序有两个主题，WinXP_Blue和WinXP_Silver，就创建两个有相应名称的文件夹，如图3-16所示。下一页返回上一页任务二创建自己的网站主题和外观

在每个Theme文件夹下，都必须包含以下几个主题的元素。①一个Skin文件；②CSS文件；③图像。（3）创建Skin文件。Skin是在ASP.NET页面上应用于服务器控件的样式定义。要创建用于ASP.NET应用程序的主题，可以在Theme文件夹下创建一个Skin文件，文件名称可以任意，但是文件的扩展名必须为.skin。右击【WinXP_Blue】，在弹出的快捷菜单中选择【添加新项】命令，如图3-17所示。下一页返回上一页任务二创建自己的网站主题和外观（4）使用主题。将Skin文件保存后，再新建一个页面Default.aspx，此页面将应用之前设置的主题。首先选择页面的Document属性中的StyleSheetTheme选项，将此选项设置为“WinXP_Blue”,如图3-19所示。（5）在主题中使用CSS文件。除了在.skin文件中创建服务器控件定义之外，还可以使用CSS进行进一步的定义，使HTML服务器控件、HTML和原始文本都根据主题来改变。首先右击【WinXP_Blue】，在弹出的快捷菜单中选择【添加新项】命令，在弹出的对话框中的【名称】文本框内输入样式表的名称，如图3-21所示。下一页返回上一页任务二创建自己的网站主题和外观（6）在主题中使用图像。许多控件都使用图像创建更好的可视化外观，要把图像统一到使用主题的服务器控件中，首先在【WinXP_Blue】的Themes文件夹下创建一个Images文件夹，如图3-24所示。使用这个文件夹下面的图像可以有两种方法。第一种方法就是直接在Skin文件中使用图像。第二种方法是在CSS文件中使用图像，与直接在Skin文件中使用图像一样，将图像放在Images目录下，在Skin文件中设置ASP.NET服务器控件的CssClass属性。这里在default.css文件中添加表格的CSS代码。运行后显示的效果如图3-26所示。返回上一页任务三在程序中创建多个主题并实现主题切换【任务要点】1.创建应用程序的多个主题

2.动态切换应用程序的主题【案例】

在Web应用程序中创建多个主题并实现主题切换本项目主要实现用户在页面中选择相应的主题后，应用程序的外观也随着主题的变化而发生改变。当用户选择WinXpBlue风格时或在程序默认的情况下，运行效果如图3?27所示。当用户选择WinXpSilver风格时，运行效果如图3?28所示。下一页返回任务三在程序中创建多个主题并实现主题切换【具体步骤】（1）布局网站。本程序主要采用表格布局的方式，在页面中添加一个Image控件，一个Calendar控件和两个LinkButton控件，并设置LinkButton的PostUrl属性。（2）创建主题。本程序实现两个主题的切换，所以需要创建两个程序主题，在App_Themes目录下创建两个主题，WinXP_Blue和WinXP_Silver，在每个主题的目录下分别创建default.skin文件、default.css文件和Images目录，如图3-29所示。（3）动态应用主题。当主题创建完成后，在需要应用主题的页面里添加页面预先初始化方法。返回上一页图3-1程序运行效果返回图3-2创建Master页面返回图3-3ContentPlaceHolder返回图3-4【插入表】对话框返回图3-5Master页面布局返回图3-6填充Master页面元素返回图3-7填充Master页面元素返回图3-8使用Master页面返回图3-9【选择母版页】对话框返回图3-11Master页面工作过程返回图3-13程序运行效果返回图