【IT168技术文档】在前面一节《Master Page锐利体验》中,向读者展示了一个Asp.net 2.0的一个重要特性,master page(母版页),在该章节中我们将向读者展示Asp.net 2.0的另一个重要的特性——Themes(主题)。我们的示例代码任然采用的是Visual Studio 2005中提供的“个人网站初学者工具包”。如果读者不知道如何创建请参阅前面一节《Master Page锐利体验》。
2. Themes(主题)
2.1 Themes 基本概念
用过论坛的朋友,都知道可以通过选择论坛的主题来改变论坛的外观界面,来达到不同的用户来定制自己喜欢的外观。而在之前Asp.net的版本中,或者之前的Asp等其他的Web编程语言中来实现这个功能需要写太多的代码。在Asp.net 2.0中,只需要简单的几句代码或者说几个属性的设置就可以达到这种效果!
Themes文件放在asp.net 站点下的App_Themes 目录下面,与你的程序代码是分开,所以不用担心程序员和美工之间花太多的时间沟通。这也是.net的Code behind的精神吧!
我们可以看到在Microsoft的示例代码中的App_Themes文件夹下面,有两个themes一个是White、一个是Black。在这个两个Themes下面还有我们熟悉.CSS和.Skin文件。.Skin文件就是.net 2.0中新增加的一个定义控件样式的文件。读者可以这样来理解:.CSS是定义html控件样式,而.Skin是定义服务器端的控件样式。
我们下面来看如何定义White下面的Default.Skin文件。
1<asp:imagebutton runat="server" Imageurl="Images/button-login.gif" skinid="login" /> 2
3
<asp:image runat="server" Imageurl="Images/button-create.gif" skinid="create" /> 4
<asp:image runat="server" ImageUrl="Images/button-download.gif" skinid="download"/> 5
<asp:image runat="Server" ImageUrl="images/button-dwn_res.gif" skinid="dwn_res" /> 6
7
<asp:image runat="Server" ImageUrl="images/button-gallery.jpg" skinid="gallery" /> 8
<asp:imagebutton runat="server" imageurl="Images/button-tog8.jpg" skinid="tog8"/> 9
<asp:imagebutton runat="server" imageurl="Images/button-tog24.jpg" skinid="tog24"/> 10
11
<asp:ImageButton runat="server" ImageUrl="Images/button-first.jpg" skinid="first"/> 12
<asp:ImageButton runat="server" ImageUrl="images/button-prev.jpg" skinid="prev"/> 13
<asp:ImageButton runat="server" ImageUrl="images/button-next.jpg" skinid="next"/> 14
<asp:ImageButton runat="server" ImageUrl="Images/button-last.jpg" skinid="last"/> 15
16
<asp:image runat="Server" ImageUrl="images/album-l1.gif" skinid="b01" /> 17
<asp:image runat="Server" ImageUrl="images/album-mtl.gif" skinid="b02" /> 18
<asp:image runat="Server" ImageUrl="images/album-mtr.gif" skinid="b03" /> 19
<asp:image runat="Server" ImageUrl="images/album-r1.gif" skinid="b04" /> 20
<asp:image runat="Server" ImageUrl="images/album-l2.gif" skinid="b05" /> 21
<asp:image runat="Server" ImageUrl="images/album-r2.gif" skinid="b06" /> 22
<asp:image runat="Server" ImageUrl="images/album-l3.gif" skinid="b07" /> 23
<asp:image runat="Server" ImageUrl="images/album-r3.gif" skinid="b08" /> 24
<asp:image runat="Server" ImageUrl="images/album-l4.gif" skinid="b09" /> 25
<asp:image runat="Server" ImageUrl="images/album-mbl.gif" skinid="b10" /> 26
<asp:image runat="Server" ImageUrl="images/album-mbr.gif" skinid="b11" /> 27
<asp:image runat="Server" ImageUrl="images/album-r4.gif" skinid="b12" /> 28
29
30
<asp:ImageButton Runat="server" ImageUrl="images/button-add.gif" skinid="add"/> 31
32
<asp:gridview runat="server" backcolor="#606060"> 33
<AlternatingRowStyle backcolor="#656565" /> 34
</asp:gridview> 35
<asp:image runat="Server" ImageUrl="Images/button-edit.gif" skinid="edit" /> 36
<asp:ImageButton Runat="server" ImageUrl="Images/button-rename.gif" SkinID="rename" /> 37
<asp:ImageButton Runat="server" ImageUrl="Images/button-delete.gif" SkinID="delete" /> 38
<asp:ImageButton Runat="server" ImageUrl="Images/button-save.gif" SkinID="save" /> 39
<asp:ImageButton Runat="server" ImageUrl="Images/button-cancel.gif" SkinID="cancel" /> 40
在上面的代码中的属性和控件的属性意思相同,我们就不一一介绍了。在这里要提到的是“SkinID”。读者希望应用哪个Skin的话,只需要设置控件的SkinID与.Skin文件中的SkinID的名字相同即可。
