任务二 创建自己的网站主题和外观

【任务要点】

1.创建正确的目录结构

2.创建Skin

3.在主题中包含CSS文件

4.在主题中包含图像

【案例一】

　　根据所给素材，创建网站的主题。具体运行效果如图1-1所示。

【具体步骤】

　　（1）选中项目右击，在弹出的快捷菜单中选择【添加】→【添加ASP.NET文件夹】→【主题】命令，如图1-2所示。

　　 此时在应用程序的目录下创建了一个“App_Themes”文件夹，如图1-3所示。

　　（2）在App_Themes文件夹中，为应用程序中使用的每个主题创建一个Theme文件夹，例如，本应用程序有一个主题，名称为主题1，就创建一个有相应名称的文件夹。

　　在每个Theme文件夹下，都必须包含以下几个主题的元素。

　　①一个Skin文件；②CSS文件；③图像。

　　（3）创建Skin文件。Skin是在ASP.NET页面上应用于服务器控件的样式定义。要创建用于ASP.NET应用程序的主题，可以在Theme文件夹下创建一个Skin文件，文件名称可以任意，但是文件的扩展名必须为.skin。选中【主题1】，右击选中【添加】→【新建项】→【Web窗体外观文件】→【添加】，如图1-4所示。

　　（4）使用主题。将Skin文件保存后，再新建一个Web窗体页面Default.aspx，此页面将应用之前设置的主题。首先选择页面的Document属性中的StyleSheetTheme选项，将此选项设置为“主题1”,如图1-5所示。

　　（5）在主题中使用CSS文件。除了在.skin文件中创建服务器控件定义之外，还可以使用CSS进行进一步的定义，使HTML服务器控件、HTML和原始文本都根据主题来改变。首先右击【主题1】，在弹出的快捷菜单中选择【添加】→【新建项】命令，在弹出的对话框中的【名称】文本框内输入样式表的名称，如图1-6所示。

　　（6）在主题中使用图像。许多控件都使用图像创建更好的可视化外观，要把图像统一到使用主题的服务器控件中，首先在【主题1】的Themes文件夹下创建一个Images文件夹，放一张图片，如图1-7所示。

　　（7）打开Skin1.skin，输入如图1-8所示代码。

（8）打开StyleSheet1.css，输入如图1-9所示代码。

（9）在Default.aspx页面拖入Image和Button两个控件并绑定SkinID，如图1-10所示。

（10）运行后显示的效果如图1-11所示。

　　使用这个文件夹下面的图像可以有以下两种方法：

　　第一种方法就是直接在Skin文件中使用图像。

　　第二种方法是在CSS文件中使用图像，与直接在Skin文件中使用图像一样，将图像放在Images目录下，在Skin文件中设置ASP.NET服务器控件的CssClass属性。这里在StyleSheet1.css文件中添加控件的CSS代码。