DotNetNuke Skinning Whitepaper (skin-making part)

There is no specific order for making skin, but it is better if you do it in the following order.

Setting up a skin development environment

To simplify the development of the skin and speed up subsequent packaging, it is recommended that you organize your files according to the following file structure

\skins
  \skinname (custom name of the skin package you developed)
      ... (Here is the zip file for the skin package you want to release)
    \containers (this are a static name to identify the container files for the skin package)
      ... (All resource files associated with the container)
    \skins (this are a static name to identify the skin files for the skin package
      ... (All documents related to the skin)

For example:

Design Skin

The free-form nature of skinning provides almost unlimited creative freedom with your. The designer usually creates a picture as the original design prototype (using the Phote Shop or other professional design tools. It should be noted that in the prototype design should include all the user interface elements, including static elements such as pictures and text, but also to include dynamic elements, such as login links, navigation bars, menus and so on. But it should also include active elements such as Login links, a navigation/menu system, etc ... Because the system is dynamically loading content at runtime, it is designed to make room for these content. Since This is a portal system which injects dynamic content on runtime, you'll need to leave room in your S content.

At the end of the design, the designer will have to step forward: convert the picture into an HTML document. How to effectively drop graphic elements into HTML forms involves a lot of technical problems. HTML displays are much more structured than freedom Fighters ' pictures and translating images into HTML documents is important to the final product presentation. Because the HTML document itself has a lot of dynamic properties, you also need to address these dynamic issues. For example, you learn to determine whether a portion of your skin is scaled or maintained at a fixed width according to the screen resolution of the client browser.

Select the HTML or Ascx editor.

If you are familiar with HTML forms and related attributes and can handle simple CSS, you can make skin. The WYSIWYG editor is that it becomes quite easy. You can use FrontPage, HoTMetaL, ColdFusion, DreamWeaver, VS. NET and so on, any editor you like. ' It's all HTML anyway.

All HTML tags must be "OK formed." That means all HTML tags must be closed. For example, if you have a <TABLE> tag, you must use </TABLE> to close it. The attribute value must have a double quotation mark (such as <table width= "... </TABLE>") without padding on the "=" side of the property of all tags. Typically, the professional HTML editor is processed automatically, but some parameter settings may be other forms, It's better to have a closer look at once.