制作皮肤没有特定的顺序，但如果按如下顺序操作会更好。

设置皮肤开发环境

为了简化皮肤的开发并加快后续打包的速度，建议按如下的文件结构组织文件
\Skins
\SkinName ( 你开发的皮肤包的自定义名称 )
      … ( 这里放要发布的皮肤包的zip文件)
    \containers ( this is a static name to identify the container files for the skin package )
      … ( 与容器相关的所有资源文件 )
    \skins ( this is a static name to identify the skin files for the skin package
      … ( 与皮肤有关的所有文件 )

例如：
设计皮肤

The free-form. nature of skinning provides almost unlimited creative freedom with your design. 设计者通常创建一幅图片作为最初的设计原型( 使用PhoteShop或其他的专业设计工具 ). 应当注意的是在原型设计当中应包括所有的用户界面元素，包括静态元素如图片和文本，同时也要包含动态元素，如登录链接、导航栏、菜单等。 but it should also include active elements such as Login links, a navigation/menu system, etc… 由于本系统在运行时动态的加载内容，所以在设计是要为这些内容留出空间。Since this is a portal system which injects dynamic content at runtime, you will need to leave room in your design for this content.

设计结束的时候，设计者就要站到下一步：将图片转换为html文档。如何有效的降图形元素转换为html形式涉及到很多技术问题。HTML展示形式要比自由战士的图片要规整很多而且将图片转换为HTML文档对于最终产品的展现形式非常重要。由于HTML文档本身也有很多动态的属性，所以你也需要处理这些动态的问题。例如, 你学要确定皮肤的某一部分是否根据客户端浏览器的屏幕分辨率缩放或者保持固定宽度。

选择HTML 或ASCX编辑器.

如果你熟悉HTML表格和相关属性并且能处理简单的CSS，你就可以制作皮肤。所见即所得的编辑器是其变得相当容易。你可以使用 FrontPage, HotMetal, ColdFusion, DreamWeaver, VS.NET等等，任何你喜欢的编辑器。 ’反正都是HTML。

所有的HTML标记必须是"well formed." 就是说所有的HTML标记都必须闭合。例如, 你有一个

标记, 就必须用

闭合。所有的标记的属性的“=”边上不留空格, 属性值必须有双引号( 如…

). 通常专业的HTML编辑器会自动处理，但是某些参数设置可能是别的形式，一次最好仔细检查一下。

管理图片

图片是皮肤设计内在的一部分。为了让皮肤引擎能找到你的图片文件，在引用图片的时候你需要使用特殊的格式。将图片文件和皮肤文件放在同一个文件夹里是个好办法。当然也不是必须这么做，因为皮肤引擎能识别你所指定的任何文件夹。

为了让DotNetNuke找到你的图片文件，皮肤上传工具必须在处理皮肤包的时候将图片引用的URL转换为相对路径。这种路径形式能在加载皮肤图片时有最好的性能 (相对路径不需要在运行时每次请求都要进行检测).

皮肤上传工具将会将如下的HTML标记转化为相对路径( 包含在HTML或ASCX 文件中的 ): IMG SRC, TD BACKGROUND, SCRIPT. SRC. 同时也会处理叠层样式表( CSS )标记: BACKGROUND-IMAGE:URL(). 为了支持众多HTML编辑器产生的代码，各标记的顺序对于皮肤上传工具并不重要。

DotNetNuke 包含一些静态的图片并不能自皮肤包中设定。这些图片代表应用程序的全局管理功能，存储在网站的/images文件夹下。在完全灵活的皮肤架构中绝对不应该有静态图片。也就是说在灵活和性能之间应该有一个折中，在这方面DotNetNuke选择了后者。使用静态的管理图片主要有如下几点好处: 1)提高性能，皮肤架构在单一的位置访问管理图标，而不要那个一个一个的确定该图标在皮肤中是不是存在2) 简化皮肤管理，皮肤中只需要包含同皮肤直接相关的图片 3)减少磁盘空间占用，管理图标不必在每一个皮肤包里都包含4) 使DotNetNuke有一致的管理界面体验 –每一个皮肤的管理图标都一致对编写文档和用户培训有好处。

加入皮肤对象Skin objects和内容块Content Panes

皮肤对象是在运行时动态处理的对象。如果你要创建 ASCX 皮肤，你就需要指定 @Register 和实际的用户控件标记 (如 ). 如果创建的是 HTML皮肤，你只需要简单指定标记即可( 如 [LOGIN] ). 为了设计皮肤了解每一个皮肤对象的功能很重要 ( 参见附录B ).

除了皮肤对象还有一个概念内容块 Content Panes. 内容块是运行时动态插入的内容模块的容器。内容块是带有和DotNetNuke皮肤交互的自定义属性的简单HTML标记。内容块允许的HTML标记有,

, ,和

. 最精简的情况下你也必须包含至少一个内容块，并将其命名为“ContentPane”. 内容块不需要连续，他们可以在页面的任何地方。内容块时可折叠的，也就是说如果在运行时内容块也不包含仁和内容，它就是不可见的。如果你创建的是HTML内容块，你就可以在设计中使用皮肤标记[CONTENTPANE] 来表示你要插入内容的区域。

皮肤对象支持实例命名named instances. 例如, 你想在皮肤中包含两个菜单控件, 你就可以在皮肤文件里设定 [MENU:1] 和 [MENU:2]. 多数情况下在你的皮肤里只使用一个皮肤对象实例，所以最好使用单一实例方式 ( 如 [MENU] ). 实例命名对内容块很重要，因为多数情况下在皮肤中你需要使用不止一个内容块。这样你就需要使用 [CONTENTPANE:1], [CONTENTPANE:2], 等实例命名( 由于 [CONTENTPANE] 是默认的皮肤块，所以你必须有一个内容块叫这个名字).

皮肤对象还包含属性。属性允许你在皮肤中自定义皮肤对象的外观。每一个皮肤对象都包含一个属性对象集，详见附录B.如果你创建的是ASCX 皮肤，你就需要在皮肤中直接指定属性 (如 Text=”Signin” /> ). If you are creating HTML skins then you must include your attributes specifications in a separate file – this preserves the presentation of the HTMLskin file for the designer. 皮肤包可以包含全局属性设定文件“skin.xml” ( 或者容器的 “container.xml”) ，应用到皮肤包的每一个文件. 另外, 你也可以通过为皮肤提供一个 “skinfilename.xml”文件来覆盖全局皮肤属性设定.皮肤上传工具通过将皮肤属性设置和HTML展示文件合并创建一个ASCX皮肤文件。下面的XML片段描述了属性文件的结构:

注意在XML文件中将是一个接一个的皮肤对象的定义和属性设置( 如 [MENU] ) ，当然也包含实例命名. 例如，你想在皮肤中包含一个垂直的和一个水平的菜单，你就可以在XML文件中指定两个实例命名 [MENU:1] 和 [MENU:2]，并设置不同的属性。

在创建HTML皮肤并使用多个内容块的时候，你需要在属性文件里指定“ID”属性。

创建叠层样式表

DotNetNuke使用外部叠层样式表 (CSS ) ，以充分利用叠层样式表优点。实质上DotNetNuke可以在同一个页面引用多个外部的叠层样式表，每一个叠层样式表的引用都指定引用顺序，这样就可以实现层次覆盖. 叠层样式表的层次顺序简述如下( 每一项覆盖前一项):

1.

来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/15040802/viewspace-418954/ ，如需转载，请注明出处，否则将追究法律责任。

ITPub博客

DotNetNuke：皮肤制作部分

最新文章

ITPub博客

DotNetNuke： 皮肤制作部分

最新文章

DotNetNuke：皮肤制作部分