博客园-iiduce

最新新闻：
· Novell董事会拒绝接受对冲基金20亿美元收购(2010-03-21 21:01)
· 9大IT科技公司总部览(2010-03-21 21:00)
· 五个广泛流传的对大龄程序员的误解(2010-03-21 19:51)
· 意大利研发出“移动虚拟校园”技术(2010-03-21 19:33)
· 如果 Facebook 是一个国家，它将是第三大人口国(2010-03-21 17:50)

说说DNN皮肤制作那点事

小狼壮壮 — Tue, 22 Jul 2008 12:16:00 GMT

阅读: 1985 评论: 4 作者: 小狼壮壮发表于 2008-07-22 20:16 原文链接

本文适于那些曾经亲自动手做过DNN皮肤的dnner。

dnn皮肤的制作并不是一件复杂的事情，与dnn本身相关的逻辑规则并不多。好的dnn皮肤还是要看制作者的网页设计的驾驭能力，我认为这其中包括：(x)html、css及js等。除此之外，制作者需要着力熟悉与学习下dnn皮肤控件的相关内容。

首先阐述下DNN的皮肤机制：制作者在用户界面文件（皮肤文件）中使用占位符或标识符来描述页面中需要动态表现的部分。当页面被载入时，网站程序通过智能分解、字符串替换等方法将这些标识用对应的应用逻辑取代。在dnn中，动态内容的填充是主要通过模块部分完成的。

需要开发的皮肤文件有两种类型：一种是应用于整个页面的页面皮肤文件，简称“皮肤”（Skin）；一种是应用于模块的模块皮肤文件，简称“容器”（Container）。皮肤用于生成整个页面的表现形式及布局。页面表现形式主要包括页面的背景、头部（header）、底部（footer）等网站多个页面的共用部分。页面布局主要是指将页面的主要内容部分划分成不同的区域（例如左-中-右页面结构，我习惯把这样的区域称之为“窗格”），以便将模块（内容部分）插入相应的区域；容器是指应用于模块的皮肤。容器可以包括模块的边框、标题等修饰性部分以及最大化最小化、rss图标等功能部分。由于一个容器仅用来放置一个动态模块，因此容器仅有一个“窗格”。

关于dnn皮肤的皮肤包组成、两种开发方式（html和ascx）、创建皮肤的流程，dnner可以很容易在网络上找到相关的教程，不再多说。这里我只说一下，我制作皮肤的几个步骤（使用ascx方式）：

0. 由美工或网页设计师制作好网页的静态页面（即demo，里面包括css及js脚本效果）

1. 打开页面源码，在源码顶部添加

<%@ Control language="vb" CodeBehind="~/admin/Skins/skin.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>

以及在皮肤中将要用到的皮肤控件的控件注册，例如：<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>

2. 将html文件掐头去尾，即只保留之间的部分；并将网页文件所需的css代码统一写到skin.css文件中，所需js代码可以直接写在皮肤文件中或单独写在js文件中（如果js文件与皮肤文件同级目录，则引用地址为<%=SkinPath%>/*.js）

3. 将网页代码中需要动态表现的部分（将要用模块展示的代码）删除，并在最外层节点加入runat="server"属性及id属性；

例如：原始静态代码为

新闻列表的静态代码

，更改后为

4. 将页面中诸如登陆、注册按钮的动态部分使用皮肤控件替换；

5. 更改代码中用到的所有图片、js、flash等资源文件的链接地址。皮肤文件夹的根目录可用<%=SkinPath%>取得，故images/ico.gif可改为<%=SkinPath%>/images/ico.gif。

6. 保存、关闭文件、将文件扩展名更改为.ascx

7. 将.ascx文件与所用到的资源文件打包（.zip格式）。制作完毕。

容器包的制作方式与皮肤包的制作方式完全相同，唯一不同的是容器文件中只有一个窗格，id为ContentPane

以上步骤除去0外，熟练的话大约10~15分钟应该可以搞定。简单吧！那些学会的dnner都在偷着乐呢~

再说下dnn皮肤制作中需要注意的几点及经验：

1. 皮肤包中定义的css文件应命名为skin.css，容器包中为container.css，皮肤或容器文件中不必写引用代码，dnn会自动加载它们；

2. 皮肤包或容器包的根路径为<%=SkinPath %>

3. 皮肤文件或容器文件中一定要有一个窗格的id定义为ContentPane。皮肤如果没有ContentPane的话也许不会报错，但是他将会导致许多系统功能失效或报错，因为这些功能控件默认在当前页面的ContentPane窗格加载；

4. 可在窗格节点指定如下属性 ContainerType="G" ContainerName="容器包名称" ContainerSrc="容器文件名称"。如此一来，则放在该窗格内的模块在不指定容器的情况下默认加载ContainerSrc中指定的容器；

5. 所有代码文件使用utf-8编码。

6. 容器的功能菜单如果显示不正常，需要在module.css或container.css中写入如下代码：

.ModuleTitle_MenuItem {}{
    border: white 0px solid; /**//*override borders*/
}

.ModuleTitle_MenuItem TD {}{  /**//*TD if menu is using tables*/
    cursor: pointer;
    cursor: hand;
    color: black;
    font-family: Tahoma, Arial, Helvetica;
    font-size: 9pt;
    font-weight: bold;
    font-style: normal;
    height: 21px;
        white-space: nowrap;  /**//*Word wrapping menu item now optional*/
        padding: 1px 3px 3px 1px;
}
.ModuleTitle_MenuIcon {}{
    cursor: pointer;
    cursor: hand;
    background-color: #EEEEEE;
    width: 15px;
    height: 100%;   /**//*override the default height for icon so that menubreaks can have heights adjusted*/
}
.ModuleTitle_SubMenu
{}{
    z-index: 1000;
    cursor: pointer;
    cursor: hand;
    background-color: #FFFFFF;
    filter:progid:DXImageTransform.Microsoft.Shadow(color='DimGray', Direction=135, Strength=3);
    padding: 1px 1px 1px 1px;   /**//*explicitly set padding for sub-menus */
}
.ModuleTitle_MenuBreak  {}{
    background-color: #EEEEEE;
    font-size: 1px; /**//*make sure you take out portal.css ModuleTitle_MenuBreak for this to work*/
}
.ModuleTitle_MenuItemSel {}{

    cursor: pointer;
    cursor: hand;
    color: black;
    font-family: Tahoma, Arial, Helvetica;
    font-size: 9pt;
    font-weight: bold;
    font-style: normal;
    background-color: #C1D2EE;
}
.ModuleTitle_MenuItem {}{
    border: white 0px solid; /**//*override borders*/
}
.ModuleTitle_MenuItem TD {}{  /**//*TD if menu is using tables*/
    cursor: pointer;
    cursor: hand;
    color: black;
    font-family: Tahoma, Arial, Helvetica;
    font-size: 9pt;
    font-weight: bold;
    font-style: normal;
    height: 21px;
        white-space: nowrap;  /**//*Word wrapping menu item now optional*/
        padding: 1px 3px 3px 1px;
}
.ModuleTitle_MenuIcon {}{
    cursor: pointer;
    cursor: hand;
    background-color: #EEEEEE;
    width: 15px;
    height: 100%;   /**//*override the default height for icon so that menubreaks can have heights adjusted*/
}
.ModuleTitle_SubMenu
{}{
    z-index: 1000;
    cursor: pointer;
    cursor: hand;
    background-color: #FFFFFF;
    filter:progid:DXImageTransform.Microsoft.Shadow(color='DimGray', Direction=135, Strength=3);
    padding: 1px 1px 1px 1px;   /**//*explicitly set padding for sub-menus */
}
.ModuleTitle_MenuBreak  {}{
    background-color: #EEEEEE;
    font-size: 1px; /**//*make sure you take out portal.css ModuleTitle_MenuBreak for this to work*/
}
.ModuleTitle_MenuItemSel {}{

    cursor: pointer;
    cursor: hand;
    color: black;
    font-family: Tahoma, Arial, Helvetica;
    font-size: 9pt;
    font-weight: bold;
    font-style: normal;
    background-color: #C1D2EE;
}

希望以上所写能对dnner有所帮助，如果有不对或需要补充的地方欢迎提出。

评论: 4　查看评论　发表评论

昨夜半宿难眠，总结了一句话

小狼壮壮 — Tue, 22 Jul 2008 05:35:00 GMT

阅读: 66 评论: 1 作者: 小狼壮壮发表于 2008-07-22 13:35 原文链接

昨夜半宿难眠，总结了一句话：国企的弊端是种种制约与利益导致的无法从实际出发解决问题，从而使摊子变大变烂。在这个机制中，从者与之共生共荣，抗着被其抛弃。

评论: 1　查看评论　发表评论

拍一拍身上的灰尘，让我走进2008

小狼壮壮 — Tue, 01 Jan 2008 16:57:00 GMT

阅读: 190 评论: 2 作者: 小狼壮壮发表于 2008-01-02 00:57 原文链接

    今天，在08年的第一天，我走进了博客园。
    回想07年，从毕业到走向工作岗位，从学生的理想走向“工程师”的现实，这一切对于我，仿佛快了点。
    大学时代就想着，如果将来的工作能是面对一台笔记本，自由的编程该有多幸福（呵呵，我好象是很容易就幸福的人），也同时谋划着将来要怎样创业，在工作后不久的将来就能凭能力去开创一份属于自己的事业。工作了半年了，由于部门的需要，在编程技术上还显得那么稚嫩的我硬是变做边学做了两个项目。我一直想把工作与属于自己的时间分开。所谓自己的时间，就是能按自己的想法去充实自己，去为将来自己事业做准备的时间。半年里，一方面在为项目不停的加班，另一方面，又在为无法找到自己的时间焦虑。结果，虽然把工作扛了下来，但终究有些狼狈不堪。
    我错了，急躁了。半年的时间，这种与工作的对抗，把工作与自我的分离，让我没有好的完成学生到工作者的转变。两顿的馒头也许真能放到一顿来吃，但两年的经验不能用一年换来，知识也不能一下子就多起来。创业，有能者有备者而为之。我知道，我是能者而非有备者。能，是源自自信、自我能力评估；备，是要长久的付诸行动，是耐心、恒心。工作的半年里，我意识到自己的技术还是那么的薄弱、肤浅，自己还有那么多的东西需要去学习、积累。我真的应该先踏下心来学习、做技术，不停的付诸实践、积累，并应用到工作中去检验，也许，学习和工作并不矛盾；同时，我也很庆幸的找到了当前工作与将来事业的结合点，也许，工作和将来的事业并不矛盾。这些，需要我在08年好好把握。
    昨天陪朋友去中关村买数码相机，卖相机的女孩（看到她名片上写着“产品销售工程师”，突然感觉小时的理想是那么的可笑）突然对我说了句，“做软件开发的吧”，真的蛮惊讶的。我问怎么看出来的，她说，也不好说，有那么股气质。呵呵，真有那么点受宠若惊。
    期待新的一年。期待那么一天，待到山花烂漫时，我在百花丛中嘿嘿笑。

评论: 2　查看评论　发表评论