Register Custom Templates in Expression Web 3.0

Tina Clarke

Expression Web ships with a selection of generic site templates packaged as dwts (Dynamic Web Templates). These can be found under Site - New Site - Templates, numbering six organizational, seven personal and six small business. These have a few quirks however, such as having a folder for each file complete with home page. Using underscores in the style names (some older browsers don't 'see' the underscores) and the same with some folder file names (SEO - search engine optimisation, search engines don't 'see' underscores so the file names become one word, always use dashes).

So whilst they provide a helpful starting point to learning about how a template and dwt is put together, they do require some tweaking, plus, everyone that owns Expression Web has the SAME site templates, and when you need to make your unique mark upon the world Organization 1 is just not going to cut the mustard with your clients, they will think if you can't take the time with your website to make a little effort, your services might not be the best either. The solution is to make your own sites or purchase them. However, what if you want them to hand without having to import them from a stored location on your hard drive?

NOTE:- Click thumbnails to enlarge

The solution is, to put your own templates in the same location as Microsoft Expression Web's very own generic site templates. To do this you have to take a series of specific steps which are outlined below.

If you don't yet have a custom site design of your own, you might like to follow along with this tutorial by using our Cracked Ice Expression Web DWT free to our readers for Xmas 2009. Follow the instructions on the above link to download the free dwt. If you are using your own custom Site then you need to note what folders you have and the files within the Site, you will need this information further on. I would also make sure you have run 'Tools - Recalculate Hyperlinks' to make sure everything is pointing correctly.

If you want new sites to be made with index for the homepage file name instead of default then you will need to change your settings in 'Page Editor Options - Authoring' to the html selection. Otherwise when a New Site is generated you will see right before your eyes your home page file name change from either index.htm or index.html if you have named it so, to default.htm. You can of course immediately rename the file by right clicking on the file and choosing rename then naming accordingly. Personally, I prefer having new homepages being named initially as index.htm, so I will keep my setting of the htm selection and rename a New Site homepage from default.htm to index.htm but if you prefer index.html you are in luck the setting selection keeps your New Site homepage in that exact file name. This appears to be a bug within the program.

NOTE: Make sure the Expression Web program itself is not open during the below procedures.

Turn off User Account Control

For the following procedures much time can be saved if you don't have click to give permission for each edit, so turn off user Account Control for the duration of this process. (You don't have to do this it just saves time if you do)

Open a windows help file and enter User Account Control in the search pane, the following file will appear follow its instructions to turn off UAC.

User Account Control (UAC) can help you prevent unauthorized changes to your computer. It works by prompting you for permission when a task requires administrative rights, such as installing software or changing settings that affect other users. We don't recommend turning User Account Control off. If you do turn it off, you should turn it back on as soon as possible. Click Turn User Account Control on or off. If you are prompted for an administrator password or confirmation, type the password or provide confirmation. Select the Use User Account Control (UAC) to help protect your computer check box to turn on UAC, or clear the check box to turn off UAC, and then click OK. You will have to restart your computer after changing the setting.

Create a folder for your template

Fig 1 - Site Templates folder contents

In the location on your hard drive at C:\Program Files\Microsoft Expression\Web 3\en\WEBS ( C:\ being the drive where Expression Web 3.0 is installed, if yours is installed on another drive letter just change the letter from C:\ to whatever your own is named. With - Program Files\Microsoft Expression\Web 3\en\WEBS - being the path for Expression Web 3.0's Site templates (see Fig 1))

Open a Windows Explorer window ('Start menu - Programs - Accessories - Windows Explorer') and navigate to the above path, right click and click 'New - Folder,' then name the folder E.g. cice.tem The file extension should be designated .tem and should be all one word.

If you want to follow this tutorial for EW 1.0 or 2.0 or 4.0 the file paths are slightly different.

The path for Expression Web 1.0 is; C:\Program Files\Microsoft Expression\Templates\1033\WEBS12
The path for Expression Web 2.0 is; C:\Program Files\Microsoft Expression\Web
The path for Expression Web 3.0 is; C:\Program Files\Microsoft Expression\Web 3\en\WEBS
2\Templates\1033\WEBS12
The path for Expression Web 4.0 is; C:\Program Files (x86)\Microsoft Expression\Web 4\en\WEBS

NOTE: If you have a 64bit computer the paths will be different

The path for Expression Web 1.0 is; C:\Program Files (x86)\Microsoft Expression\Templates\1033\WEBS12
The path for Expression Web 2.0 is; C:\Program Files (x86)\Microsoft Expression\Web 2\Templates\1033\WEBS12
The path for Expression Web 3.0 is; C:\Program Files (x86)\Microsoft Expression\Web 3\en\WEBS
The path for Expression Web 4.0 is; C:\Program Files (x86)\Microsoft Expression\Web 4\en\WEBS

You might wish to include your newly made Site under a section called My Templates instead of Templates alongside the generic Expression Web Sites, in which case you should drag .tem file to the following folder.

(Only for Expression Web 3.0)
C:\Users\username\AppData\Roaming\Microsoft\Expression\Web 3\Legacy\Expression\Web 3\Webs

(Only for Expression Web 4.0)
C:\Users\username\AppData\Roaming\Microsoft\Expression\Web 4\Webs

NOTE: There is no preview thumbnail available at the present time for My Templates. You should still make the .tem the same way however as this will probably be available in future versions.

FrontPage 2003

The path for FrontPage 2003 is C:\Program Files\Microsoft Office\Templates\1033\WEBS11 and for 64bit is C:\Program Files (x86)\Microsoft Office\Templates\1033\WEBS11 File | New | New Web site | More Web Site Templates | Web Site Templates | General to view Site Templates.

SharePoint Designer 2007

The path for SharePoint Designer 2007 is C:\Program Files\Microsoft Office\Templates\1033\WEBS12 and for 64bit is C:\Program Files (x86)\Microsoft Office\Templates\1033\WEBS12 File | New | Web Site | Templates to view Site Templates.

Drag Site files into .tem folder

Fig 2 - cice.tem contents

Open another instance of Windows Explorer and browse to your Cracked Ice Site on your hard drive, minimise that window and drag and drop your files ( DO NOT DRAG ANY FOLDERS ONLY FILES ) into the cice.tem folder you just created on the first instance of Windows Explorer. You must make sure all files are placed individually, in other words there should be no folders and the file structure should include all files needed within the website. You will need to drag cice.dwt and index.htm from the root of the web and then open the images folder and drag the images found there into the cice.tem folder. Then proceed to open the styles folder and drag the two .css files and one .js file into the cice.tem then finally open the .inc folder and drag the menu.htm file into the cice.tem folder. When you have finished close this instance of Windows Explorer.

NOTE: The images, .css, and .js files will be created inside individual sub-folders when a site is created based on your Site template so adjust the paths for your files accordingly when we make the .inf file.

Take a screen capture of your Site homepage

*Take a screen capture of the homepage of your template Site and save it into the cice.tem folder. The Image will serve as the preview thumbnail for your Site template in the 'New Site' dialog box remember to specify the name of this image in the preview field of the .inf file too.

You take a screen capture by using the Print screen key (prt scr) or (Fn and Prt scr) on the top right of your keyboard then using any graphic program to paste. Or you can use Screenshot in Firefox. The image will appear and you can snip and tweak to make it look presentable. If you find the screen print does not show all of your Site homepage and you would prefer a fuller screen shot you can obtain the free addin for the Firefox or Internet Explorer browsers called Fireshot

The placeholder size of the preview thumbnail is approx 134px width x 115px height so size your thumbnail accordingly.

Create a .inf file using notepad

View Screenshot - Fig 3 Example of a Microsoft Expression Web .tem folder which includes a .inf file

Open Notepad from the 'Start menu - Programs - Accessories - Notepad' (Right click and choose 'Run as Administrator' if you have not turned off UAC'. Press continue when the dialog box appears). Click 'File - Save As' - in the 'Save as Type' pane choose 'All files' from the drop down arrow and name the file cice.inf

View Screenshot - Fig 4 - Notepad file being saved as a .inf

You need to specify the following;

template name - Cracked Ice Dynamic Web Template
description - cracked Ice Dynamic Web Template
thumbnail image to display on the New Site dialog box* (How to take a screen capture above) (mine is named cracked-ice.jpg)

List ALL the files in your site template and for each file you will need to specify its destination folder. e.g. images or inc or styles.

NOTE: If your Site template is in a language other than GB English (the Cracked Ice Site is in EN-GB (Great Britain English) you will need to change the LCID 2057 to the appropriate language ID. For your LCID check the chart on MSDN. For instance for EN-US (America) it is 1033. It is mentioned on the instructions in the Cracked Ice DWT but you will also have to change the language meta in the cice.dwt to your own countries, it is currently set for EN-GB.

NOTE: The LCID codes appear of have changed for EN-GB it is now 0x0809 and for EN-US it is now 0x0409

Fig 5 - INF file contents for the Cracked Ice Site

Remember to specify destination folders. If you are working with this tutorial and using a Custom Site of your own you will need to list ALL the files, having an overly complicated file structure will add intricacy to the file paths you will have to name, so try to keep things simple.

When you have finished making the .inf file save and close it. Finally - Close the windows Explorer window file before opening Expression Web.

Open Expression Web and make a New Site

Fig 6 - New dialog box

Open Expression Web 3.0 Go to 'Site - Site New' or keyboard (Control + Shift + N) and the 'New' dialog box will appear. Select 'Templates' from the left hand pane and then select Cracked Ice Dynamic Web Template. In the location pane enter or Browse to the location you wish to save your new site, and tick or un-tick the radio box to add to the Managed List then press ok and your new Site will be made.

Where can I find more custom made .tem's?

Pat Geary and I have have made a set of 12 Site Templates for Expression Web and also 5 Equal Height Site Templates for Expression Web (they are .tem's) which are available free for commercial or private/non-profit use, they may not be included or made available in a package without express permission from the authors. You may change them in anyway you wish.

Cheshire Web Designs - Cheshire website Designs by Any Expression Web Designs
Owner Any Expression Web Designs and Clarke Abstract Art

Are you looking for a Web Designer?
Web Designs created by Any Expression Web Designs