项目三母版、主题及外观.pptVIP

项目三母版、主题及外观 任务一Master页面的创建与使用 任务二创建自己的网站主题和外观 任务三在程序中创建多个主题并实现主题切换 任务一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.创建Skin 3.在主题中包含CSS文件 4.在主题中包含图像 【案例】 根据所给素材，创建网站的主题。具体运行效果如图3-13所示。 任务二创建自己的网站主题和外观 【具体步骤】 （1）右击【项目】，在弹出的快捷菜单中选择【添加ASP.NET文件夹】【主题】命令，如图