
一直有人跟我提为何不做一些DNN皮肤教程什么的,本人甚为惭愧,当初曾夸下海口说没问题,可一拖再拖,倒不是自己没有时间,只是姑且不论自己设计能力的肤浅,光是那一系列教程制作就得花费不少心思,至少得简单易懂吧?至少得图文并茂吧?至少得符合CSS,W3C吧?我可不想随便拿出一样拷贝别人的皮肤来炫耀自己的水平。故折中的做法只能随时分享自己设计开发皮肤的一些经验或想法,希望能满足部分读者的口味。
正文:
其实在国内制作DNN皮肤(其中包括公司或个人)不在少数,业务范围也各不一样,其中主要有几类:
1)现有非DNN网站转化为DNN网站,也就是说已有固定的版式和布局,只需要转化成ascx皮肤。
2)已有design的psd,需要转化为ascx皮肤。
3)重新设计。
那专业的DNN皮肤设计到底需要哪些东西呢,本人可能不是专业的设计人员,列不出什么名名堂堂的东西,不过倒是看过一些观点,颇为赞同,故在此一起分享:

借鉴一下本人的经验,如果你是DNN皮肤设计初学者,不妨尝试如下建议(仅供参考):
1) 不要一上来就想着从头自己设计html或ascx,尽量利用已有的皮肤(DNN默认的皮肤,比如DNN-Blue或DNN-Gray,你在站点根目录往下\Portals\_default\Skins可看到这两个皮肤文件夹)进行修改。比如你可以直接新建一个文件夹SimpleSkin在目录yourweb/Portals/_default/Skins,然后直接拷贝默认的DNN皮肤到该文件夹里,这样你的DNN站点就会自动添加一个皮肤主题SimpleSkin,接下来你应用该皮肤 即可。如此这般速度比较快,而且已有的皮肤在设计代码细节方面已经跟随DNN的升级而有所调整,浏览器兼容性很好,控制也比较好,这算是DNN核心提供的比较完整的皮肤范例。
2)步步修改策略,不妨一步步的修改,也就是说修改的时候大体的框架先不要动,先自己手动的修改一些样式或布局,刷新页面看看效果,如此反复可窥知皮肤设计之精髓。
3)尽管存在所见即所得的编辑器制作皮肤,但在细节方面仍然不太好控制,推荐做法仍为手工写代码,如此印象比较深刻,能力提升也极为显著。
一些在DNN皮肤设计过程中需要注意的地方:
1) html tags一定要well formed,注意关闭tag,如
![]()
2) 合理利用SkinPath这一属性,增加灵活性,可扩展性,可移植性。由于所有皮肤控件都是继承于基类Skin,该基类存在属性SkinPath,其值也就是本皮肤包的根目录,故比如你如果需要添加某图象showMe.jpg(存在相对皮肤包的根目录下的images文件夹),则代码可类似如下:
- <img src="<%# SkinPath %>images/showMe.jpg" alt="Show" />
3) 每一皮肤必须包含至少一个ContentPane,这是DNN默认的模块容器占位符。
4) DNN CSS继承关系,也就是所谓的"层次优先关系",Modules css > Default.css > Skin css >Container css > Portal.css, 更多相关信息可参看我之前的文章:
进阶应用,这里再列举一些在DNN皮肤设计过程中的技巧,推荐比较熟悉DNN皮肤设计者可以尝试:
1) 可以直接使用默认的样式定义文件 skin.css,但还有一种替代的方式,那就是定义为 skinname.css,skinname对应你的需要关联的皮肤控件名称。如此的好处是你可以共享一些基本的样式在skin.css,而一些不一致的样式可定义在skinname.css,从而达到分离耦合的效果。在"
加速DNN的新举措"你可参看到详细的分析。
2) 考虑到上述提到的DNN CSS继承关系,其中Default.css主要汇集一些基本的,全站式的样式定义,比如SkinObject等等,但是唯一的副作用是文件比较大(将近18K),而其实大部分样式在皮肤设计中都会被重写或覆盖,故Default.css对想重新设计的皮肤意义不是很大(它原本的意义无非就是防止某一样式在skin.css没有被重写而导致的界面一塌糊涂)。总之,如果你很有把握,不妨把Default.css置空(删除该文件的样式定义,只留空白,建议不要直接删除该文件,以后也许还需要),当然一些没有被重新活覆盖的样式需要拷贝到skin.css。参考文章:
The Demise of the Default.css3)重置皮肤,有时难免出现错误,可能导致站点无法运行,这时就需要重置皮肤这一技巧,不妨看看这一篇文章:
推荐系列:Scheduler,Reset skin等(2008年第2期)