Register  |  Login

DNN Skin旅程之琐碎杂想

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

A MustHave List

借鉴一下本人的经验,如果你是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文件夹),则代码可类似如下:
 
  1. <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.css
3)重置皮肤,有时难免出现错误,可能导致站点无法运行,这时就需要重置皮肤这一技巧,不妨看看这一篇文章:
推荐系列:Scheduler,Reset skin等(2008年第2期)
4)如果有你能力,你可以扩展或开发符合自己需求的皮肤控件,其参考例子如:
你需要么,dnn多语言解决方案? (WindyText皮肤控件)
DNN登陆注册链接小变身(Skin Object定制开发)
This posting is provided "AS IS" with no warranties, and confers no rights.
Popular tags: 皮肤设计, 优化DNN
Previous Entry: 拥抱PNG(如何在DNN应用PNG格式图象)
Next Entry: 不一样的分页算法

Comments

Was it good for you, too? Join the discussion »

leave a reply

About the author
Baldwin's Status
 Contact Me
Baldwin Sun
Senior Developer for dnn solution & founder of SunBlog module...
网站主页
dnnsun
最新评论
  1. Re: (转载)掌握JavaScript语言的思想前提

    Thanks for your comment, actually we are planning to own our english blog later.

    --baldwin

  2. Re: (转载)掌握JavaScript语言的思想前提

    This seems exciting but I wish it were in English

    --Joey

  3. Re: 加速DNN的新举措

    SkinPath是类Skin的一个自读属性, 你直接在模块里是没法用的,需要你初始化:)

    --baldwin

  4. Re: 加速DNN的新举措

    为什么我的模块里用SkinPath,找不到SkinPath的定义?

    --xmen

  5. Re: 读书杂感--开源与我

    支持一下楼主。说的很好!

    --qilei

  6. Re: 如何在DNN模块级别以编程方式添加样式文件

    reports 模块主要是用于展示自定义的SQL语句获取的数据, 你可以定义不同的SQL及其相关参数, 至于详细的用法不妨Google一下, 貌似国外有不少关于这一模块的资源:)

    --baldwin

  7. Re: 如何在DNN模块级别以编程方式添加样式文件

    请问楼主 DNN 4.5.3 reports 模块怎么使用啊?

    --DNN菜鸟

  8. Re: 如何在DNN模块级别以编程方式添加样式文件

    恩 谢谢楼主 呵呵

    --DNN菜鸟

Blog搜索
Rss Feed
feedsky
抓虾
pageflakes
newsgator
哪吒
相册库
更多照片请查看相册库
我们的服务
  • DotNetNuke 咨询
  • Web设计及其模块开发
  • 免费建站
  • 电子商务
  • 开拓市场
我们致力于开发定制的web 2.0 ,所服务的客户主要包括小中型企业,社区俱乐部及其非盈利机构组织。我们将利用开源的DNN作为我们核心的系统机制,更多相关信息...
版权声明
本站任何言论仅代表个人观点,与作者所在的公司没有任何关系,所有贴子皆以“现状”提供且没有任何担保,同时也没有授予任何权利。