Previous Topic

Next Topic

Book Contents

Converting Design to HTML

When converting a template design into HTML code, pay special attention to the structure of the directories. The sample of a correct structure is given below:

Template

  Themes

    Color1

      Menus

        Menu1

        Menu2

        Menu3

      Headers

        Header1

        Header2

        Header3

      Images

    Color2

      Menus

        Menu1

        Menu2

        Menu3

      Headers

        Header1

        Header2

        Header3

      Images

    Color3

      Menus

        Menu1

        Menu2

        Menu3

      Headers

        Header1

        Header2

        Header3

      Images

The Template directory is the root template directory.

The Themes directory contains all color themes (Color1, Color2, Color3). By default, there are three color themes, but you can vary this number. Also, you can rename the color themes (for example, red, blue, green).

The Menus directory is divided into the subdirectories Menu1, Menu2, Menu3. Similar to color themes, there could be one or more menu themes. These directories contain the graphic files with the menu items images (usually, these are active and inactive bullets).

The Headers directory is divided into the subdirectories Header1, Header2, Header3. By default, there are three variants of design, but this number is not fixed. These directories contain the graphic files with the headers images.

The Images directory contains the graphic files with the images specific to a corresponding color theme. The default logo template is stored in this directory under the name of logo.gif. (it should be in GIF format).

The color theme directory contains the styles.css file. Styles.css is a file containing CSS styles of a template. It should contain only two selectors: pageContent and pageContent a.

Example:

pageContent { font-size: 8pt; font-family: Tahoma, sans-serif; color: #818181; }

pageContent a { font-size: 8pt; font-family: Tahoma, sans-serif; color: #818181; }

This class must be applied to the content area.

In This Chapter

Requirements for Templates

Converting HTML Code to SiteBuilder Format

Creating info.xml File

Creating Base Document Template Master.page

Creating Menus