Baldwin's DNN-Category-DNN皮肤设计

黑暗的艺术: CSS Hack

dnnsun@gmail.com — Wed, 22 Jul 2009 10:32:14 GMT

何谓CSS hack ?

由于不同的浏览器，比如IE6,IE7,Mozilla Firefox等，对CSS的解析原理不一致导致生成的页面效果千差万别，此时我们需要生成不同的样式让其兼容不同的浏览器，并得到理想的效果。详细请看: http://en.wikipedia.org/wiki/CSS_filter

说到底就是利用浏览器某些bugs来做文章, 没有哪位UI设计者希望使用CSS Hack, 大家羞于表达自己曾用过Hack, 但是有时你不得不出卖自己的灵魂给Hack. 目前我们项目希望可以在大部分的浏览器上通过验证, 工作量可想而知, 就好比我这会的签名档是“在windows7上蹂躏IE6,是无奈也是悲哀啊", 不管怎么样，总之本人的机器已经安装了5款浏览器，同时因为有些没法在windows7下安装，我们不得已独立一个额外的机器专门安装其他旧版本的浏览器，蔚为壮观。正希望浏览器这个恶魔在娘胎里就是over了, 有点”矫枉过正“,:) 回归正题, 其实今天在此就想跟大家分享一些目前基本的CSS Hack, 至少对我们目前这个项目蛮管用的(日子还得一天一天过, 尽管牢骚不断, 呵呵)

/* Internet Explorer */
 
/* IE 6 only */
body #ie6 {
     _display: block;
}

/*IE 6 and IE 7 */
#ie6andie7 {
     *display: block;
}

/* IE 7 only */
html > body #ie7 {
    *display: block;
}

/* IE 6, IE 7 and 8 */
body #ie6andie7andie8{
    display:block\9;
}   

/* IE 8 only */
body #ie8{
    display:block\9;
    *display: none; /*overrule for ie6 and ie7 which also read this rule*/
}

 
/* Firefox */
 
/*Firefox 2 and 3 */
#firefox2, x:-moz-any-link {
    display: block;
    *display: none; /*overrule for ie6 and ie7 which also read this rule*/
}

/*Firefox 3 only (for Firefox 2 only use the rule above and this to overwrite for Firefox 3*/
#firefox3, x:-moz-any-link, x:default {
    display: block;
    *display: none; /*overrule for ie6 and ie7 which also read this rule*/
}
  
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #safari {
        display: block;
    }
}
    
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    head~body #opera {
        display: block;
    }
}

最后喊一下口号: 尽量做到符合W3C标准, 不得已才Hack, 并尽可能用简便灵活的方案.

http://lifesinger.org/blog/2009/06/goodbye-to-css-hack/

拥抱PNG(如何在DNN应用PNG格式图象)

dnnsun@gmail.com — Sat, 28 Jun 2008 10:19:16 GMT

PNG 是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式网络图形格式(Portable Network Graphic Format，PNG)这一名称来源于非官方的“PNG's Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据.

展望DNN皮肤前景及其推荐一些皮肤资源

dnnsun@gmail.com — Fri, 16 May 2008 05:16:02 GMT

自从DNN发布以来，用户对DNN皮肤机制一直以来都是褒贬不一,我对此也曾写过一些文章分析其中道理,有兴趣者不妨看看我之前的文章,目前DNN即将升级到5.0版本(代号为Cambrian),这将是一个具有里程碑意义的版本发布,时间大概是今年秋天,估计应该是在DotNetNuke OpenForce '08 大会之前吧,让我们拭目以待吧. 关心DNN皮肤的朋友们, 现在让我们先来看看皮肤机制将发生哪些变化...

DNN登陆注册链接小变身(Skin Object定制开发)

dnnsun@gmail.com — Thu, 15 May 2008 09:50:01 GMT

上一篇文章简单解析了DNN多语言解决方案,其中提到了一个皮肤级别的本地化支持.这篇文章接着简单分析如何定制开发自己的皮肤对象(在dnn称之为Skin Objects),不妨来看看我们如何给DNN默认的登陆注册链接皮肤对象做个小变身.首先还是先描述一下需求,例如有客户需要在设计皮肤时可以在登陆注册这两个链接增加一个小图象提示,起到修饰美观的作用,最终效果如图:

如何开发呢?其实对我来说,开发DNN的原则就是如何节省代码量,同时可以让DNN物尽所用,但又不能影响以后的升级.我想这个理念在前几篇文章都阐述得淋漓尽致(比如浅谈如何做到dnn物尽所用(二), 浅谈如何做到dnn物尽所用).有兴趣者不妨回头看看,也许你也会得到些许提示的.回到正题,首先我想到就是利用原有的登陆注册这两个链接皮肤对象,再结合DNN自带的CommandButton(文章"再谈dnn的物尽所用(三)"对此有所解析)这一用户控件就可以实现我们的需求了.那我们就开始吧,还是我之前提到开发皮肤对象的步骤:

1) 在网站根目录下的admin/Skins文件夹里创建一个UserControl,比如现在新增dnnsunUser.ascx和dnnsunLogin.ascx(请注意该文件夹下的代码不需要重新编译,如果你是以站点形式发布的).

2) 创建对应的资源文件(dnnsunUser.ascx.resx, dnnsunUser.ascx.zh-CN.resx及其dnnsunLogin.ascx.resx,ascx.resx, dnnsunLogin.ascx.zh-CN.resx)

其中上述步骤你可以直接拷贝默认的登陆注册链接皮肤对象,然后重命名即可.接下来就是替代我们即将加入的CommandButton,在页面中注册并添加实例:

dnnsunLogin.ascx

<%@ Register TagPrefix="dnn" Assembly="DotNetNuke" Namespace="DotNetNuke.UI.WebControls" %>

<dnn:CommandButton ID="cmdLogin" runat="server" CssClass="SkinObject" CausesValidation="false"/>

或

dnnsunUser.ascx

<%@ Register TagPrefix="dnn" Assembly="DotNetNuke" Namespace="DotNetNuke.UI.WebControls" %>

<dnn:CommandButton ID="cmdRegister" runat="server" CssClass="SkinObject" CausesValidation="false"/>

接下来就是修改默认的属性及其Page_Load事件,以达到我们的需求,具体实现我就不细说,大家可以下载来看看,逻辑还是原来的逻辑,修改只是一些细微之处,需要注意的现在我们增加了一个属性ImageUrl以满足我们的需求.在该属性中你只要设置当前皮肤的图象路径,比如:

YourSkin.ascx

<%@ Register TagPrefix="dnn" TagName="DNNSUNLOGIN" Src="~/Admin/Skins/dnnsunLogin.ascx" %>

<%@ Register TagPrefix="dnn" TagName="DNNSUNNAV" Src="~/Admin/Skins/dnnsunNav.ascx" %>

<dnn:DNNSUNUSER runat="server" ID="dnnUSER" ImageUrl="register.gif"/> |

<dnn:DNNSUNLOGIN runat="server" ID="dnnLOGIN" ImageUrl="login.gif"/>

回过头来看代码如何实现的,你会比较清晰思路,那就是在Page_Load中获取当前皮肤的目录然后合并文件路径,我想大家一看代码就一清二楚了:

If Not String.IsNullOrEmpty(ImageUrl) Then
cmdRegister.ImageUrl = PortalSettings.ActiveTab.SkinPath & ImageUrl
End If

需要注意的是资源文件定义的键值对,如果你需要定制自己的提示信息,不妨打开对应的资源文件修改其中的定义.比如:

WelcomeInfo.Text -- Welcome to dnnsun,{0}

你可以修改成:

WelcomeInfo.Text -- Hi,{0} you are login incurrently!

这些都是很方便的,^_^
最后一点需要提的是你可能需要在skin.css定义以下类似样式,让提示图片跟文字对齐:

/* For The Login and Register Link */
.SkinObject input {vertical-align:bottom;}

就像我之前文章提到那样,定制开发自己的皮肤对象最大的优势就是满足定制的需求和支持本地化.这两个控件当然也不例外,本网站就是应用这些控件部分实现了多语言机制!
你可以从这里获取到这些皮肤对象, dnnsunUser and dnnsunLogin Skin-Objects
安装步骤如下:
1) 解压缩zip文件,拷贝dnnsunUser.ascx,dnnsunUser.ascx.vb,dnnsunUser.xml和dnnsunLogin.ascx,dnnsunLogin.ascx.vb,dnnsunLogin.xml到站点根目录下的admin/Skins
2) 拷贝dnnsunLogin.ascx.resx,dnnsunLogin.ascx.zh-CN.resx和dnnsunLogin.ascx.resx,dnnsunLogin.ascx.zh-CN.resx到站点根目录下的admin/Skins/App_LocalResources
使用方法上边已提到,在此就不再累赘了.

相关链接:

Fixing the DNN Breadcrumb Skin Object

你需要么,dnn多语言解决方案?

dnnsun@gmail.com — Tue, 13 May 2008 06:19:57 GMT

目前dnn多语言解决方案是我这段时间研究的重点, 我接下来也许会写几篇相关文章阐述这些问题.

切入正题, 本地化是ASP.NET的特性, 无疑dnn也会直接支持, 但是事实上并不是很乐观, 因为dnn本身也只是在表面上作些文章吧了, 如果你想利用dnn实现多语言门户(Portals), 那你可能想错了, 除非你重新开发或在模块级别上定制的开发支持多语言. 那dnn究竟支持多语言到何种程度呢? 让我慢慢道来, 其实dnn默认支持的多语言只局限于页面标签(Tags,Token etc), 比如登陆链接, 编辑模块时的字段Label等等, 而这些并非我们通常理解的内容本地化(多语言支持). 当然你可以通过下列两种解决方案来实现:

1) 模块级别的多语言开发,但你的内容可能需要存储好几个版本(根据你站点支持的语言总数)
2) 站点级别的多语言开发,也就是你需要发布好几个站点(根据你需要支持的语言总数)
目前在DNN模块市场也有一些模块按照第一种思路做到了内容上支持多语言,比如:
1) MLSkinHelper, PageLocalization Module,Language Selector skin object 等等
http://www.apollo-software.nl/Home/tabid/36/language/en-US/Default.aspx
最经典的范例就是http://declic-video-fx.com/,它利用apollo-software相关模块实现了多语言站点,可以说基本上实现了多语言支持的所有功能.
2) Localization Extensions: Easily implement multilingual portals
http://www.adequation-dotnetnuke.com/en/AboutUs.aspx
该站点的公司主页就是利用来实现了多语言支持,请访问http://www.adequation-informatique.com/en/Home.aspx
3) 这是一个免费的模块Magic Content,同时也是DNN Forget下的一个新模块,该模块属于proeder.network.consult公司.
Magic Content is a multi-lingual content publishing module for the DotNetNuke plattform that can be used as a replacement for the current Text/HTML module. It's very easy to use and extends content publishing by many useful features. * one edit tab for each portal locale * advanced edit tab for role based content management * newsletter tab for sending content out via e-mail * replacement token tab.
http://www.codeplex.com/MagicContent
http://www.portalfabrik.net/
相关链接:
How to localization with dnnMenu or solpartMenu?
http://www.dotnetnuke.com/Community/Forums/tabid/795/forumid/76/threadid/224072/scope/posts/Default.aspx
how to localization in skin?
http://www.dotnetnuke.com/Community/Forums/tabid/795/forumid/109/threadid/222245/scope/posts/Default.aspx

在此我不就以上话题详细阐述如何开发多语言模块等等细节问题, 以后也许有机会我会讲解一些模块的开发经验等等, 现在我只是简单说明一个相关的问题, 就是皮肤级别上的多语言支持. 比如说我有一个需求,客户需要在某个皮肤添加说明性文字或提示, 类似于当前位置:首页/新闻中心/某某新闻, 这"当前位置"需要进行本地化, 例如You Are Here:(English version), 当前位置(Chinese version). 我们该如何解决这一问题, 目前dnn没有在皮肤上支持本地化,但在皮肤控件上是支持的. 我曾在论坛逛了一些时候,发现dnn牛人Sebastian Leupold说:
DNN 5 will allow for more flexibility using the [Text] skin object, which supports core token replace, which gives you more flexibility and a bunch of additional tokens and formatting options.

好吧,那我们就先来尝个新鲜,自己定制一个简单的皮肤本地化控件WindyText.首先需要在网站根目录下的admin/Skins文件夹里创建一个UserControl(请注意该文件夹下的代码不需要重新编译,如果你是以站点形式发布的),该控件只有三个属性(DefaultValue,CssClass和LocalizationKey),CssClass自然不需要解释了,就是定义该皮肤对象的样式,而LocalizationKey也表示你需要显示说明性文字或提示对应在资源文件的键值,如果你曾经开发过模块,应该很清楚,最后DefaultValue则是默认显示信息,为了防止资源文件里没有定义键值对.比如你设置LocalizationKey="AA",那么你对应的资源文件(WindyText.ascx.resx或WindyText.ascx.zh-CN.resx)里边就应该有一组键值对AA.Text = "你需要显示的说明性文字或提示".代码实现其实很简单,其实就是定制开发皮肤对象(Skin Object)的过程,比如说你必须继承SkinObjectBase等等:

#Region "Public Members"
Public Property DefaultValue() As String
Get
Return _DefaultValue
End Get
Set(ByVal Value As String)
_DefaultValue = Value
End Set
End Property
Public Property LocalizationKey() As String
Get
Return _LocalizationKey
End Get
Set(ByVal Value As String)
_LocalizationKey = Value
End Set
End Property
Public Property CssClass() As String
Get
Return _cssClass
End Get
Set(ByVal Value As String)
_cssClass = Value
End Set
End Property
#End Region
#Region " Event Handlers "
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
If Not String.IsNullOrEmpty(LocalizationKey) Then
Dim localizationString As String = Localization.GetString(LocalizationKey, Localization.GetResourceFile(Me, MyFileName))
lblLocalization.Text = IIF(String.IsNullOrEmpty(localizationString),DefaultValue,localizationString)
End If
If CssClass <> "" Then
lblLocalization.CssClass = CssClass
Else
lblLocalization.CssClass = "Normal"
End If
End Sub
#End Region

      我已把WindyText皮肤对象打包一下,你可以从此下载.安装步骤如下:
     1) 解压缩zip文件,拷贝WindyText.ascx,WindyText.ascx.vb,WindyText.xml到站点根目录下的admin/Skins
     2) 拷贝WindyText.ascx.resx,WindyText.ascx.zh-CN.resx到站点根目录下的admin/Skins/App_LocalResources
那我们该如何使用WindyText呢,首先你需要在页面注册一下,操作类似其他皮肤控件那样:

<%@ Register TagPrefix="dnn" TagName="WINDYTEXT" Src="~/Admin/Skins/WindyText.ascx" %>

然后你就可以直接使用WindyText了,例如:

<div class="siteBreadCrumb">
<dnn:WINDYTEXT ID="lblbreadcrumbTip" LocalizationKey="breadcrumbTip" runat="server" />
<dnn:BREADCRUMB runat="server" ID="dnnBreadCrumb" Separator=" / " RootLevel="0" />
div>

请注意你需要在资源文件里定义对应键值,比如现在我设置的是breadcrumbTip.Text = "You Are Here:"(WindyText.ascx.resx版本)和breadcrumbTip.Text = "当前位置:"(WindyText.ascx.zh-CN.resx版本).到此你就大功告成了.目前http://www.dnnsun.com就是利用WindyText这一皮肤控件实现的,这一控件还要其他很有用的功能,以后有机会将继续扩展一些更强大的功能. ^_^

NUS项目告一段落

dnnsun@gmail.com — Fri, 28 Mar 2008 09:26:47 GMT

最近加班加点,终于在10天之内把客户这一网站给整出来,真是不容易啊,在此弄个截图以资鼓励我们团队的斗志, :)

加速DNN的新举措

dnnsun@gmail.com — Sat, 27 Oct 2007 12:03:59 GMT

在优化DNN的过程中我们可能注意到这一点, 就是我们的皮肤文件一般都写在同一个文件，可能是skin.css或container.css, 也就是说不论我们页面加载是否应用到该样式文件里边的所有属性，我们总会必须加载这样一个CSS样式文件，尽管皮肤有很多属性并不是我们所需要的，但有时我们所创建的皮肤可能会包含好些个类别的skin(也就是我们通常提到的主题theme), 比如专为首页显示的xx_Home.ascx, 专为管理页面的xx_admin.ascx, 一般的xx_skin.ascx等等, 显然这些页面可能是不同的布局设计, 不同的样式定义, 如果这些不同的样式都在一个skin.css里定义的话, 那肯定导致该文件冗赘, 并且不能达到不同的样式的目的(前提是你使用同样的class样式定义). 今天准备在此分享一个针对此类问题的解决方案, 简约而实用, 采用此方案将不会造成数据加载的不必要负荷, 提高页面的加载速度, 从而达到我们加速DNN的目的。

解析DNN皮肤级别的doctype声明

dnnsun@gmail.com — Sat, 20 Oct 2007 04:57:51 GMT

自从DNN 4.4版本开始, DNN主要的重心转移到性能和优化方面,由此引入了一系列的优化措施和功能的改进, 如今的DNN已是今非昔比。而在跟Web标准的靠拢方面，DNN也做出了一定的努力，比如这篇文章即将提到doctype的概念, 在文章中将详细说明DNN中doctype的用途及其优势,以此对应的优化等等。

DNN Style Sheet简要总结

dnnsun@gmail.com — Sun, 07 Oct 2007 08:38:09 GMT

在上一篇文章DNN默认核心CSS继承关系解析,我曾简要分析了DotNetNuke的样式继承关系,在此我再对此作些补充，算是做些总结。

是的，DNN是通过外部样式表来规划页面布局和交互界面设计的，其途径就是把所有样式文件拆分到不同的,具体的样式单(比如skin.css,portal.css)，而在页面的加载时是按照一定的优先级顺序来界定的，从而达到后一样式表能够覆盖前一样式的作用，实现我们所熟悉的CSS样式继承关系。其优先级排列如下（靠后者可覆盖前者的样式）:

1) Modules – 模块控件样式，一般定义为module.css,可选项。

2) Default – 默认网站主机样式(default.css)

3) Skin – 皮肤样式，可取名为skin.css 或 skinfilename.css

4) Container –容器皮肤样式，可取名为container.css 或 containerfilename.css.

5) Portal –自定义网站管理级别的样式，这是最后一级的样式定义，一般为空定义(portal.css)

具体对这些样式的解析请查看我上一篇文章，而以下相关链接则是解析了一下如何在DNN合适使用CSS样式，在哪些地方是最安全的（升级时不受影响等），哪些地方是最有效的等的运用，有兴趣者不妨看看。

同时在此推荐一本DNN Skin-Design参考手册,它主要介绍了skin的制作及其所有skin占位符的解析和用户，其中包括SolpartMenu的所有属性设置的参考，是一本不可多得的skin资源手册,如果你想设计自己的skin，如果你想把自己的网站绚起来，那么你不妨拿着这本参考手册照猫画虎一般，最终你会发现其实DNN Skin是如此简单…. Enjoy!下载地址

DNN默认核心CSS继承关系解析

dnnsun@gmail.com — Fri, 21 Sep 2007 02:53:38 GMT

在DNN里,因为存在皮肤主题及插件模块的概念,故而衍生出一系列的产物,比如Tab Skin(页面皮肤), Container Skin(容器皮肤), Module Template(模块模版)等等,而这一切都是DNN布局显示所需要的.那DNN是如何处理这些文件所包含的样式？