Expression Web Site Templates

NOTE: The site template packages will work with ALL versions of Expression Web. They will also work with Microsoft FrontPage 2003 as well as SharePoint Designer 2007.

WARNING: If you are installing the templates using Expression Web 4.0, it is very important that you read Expression Web 4.0 Site Templates HTM/HTML Bug.

The Site Templates may also be found and downloaded from the Microsoft Expression Gallery.

Eric Meyer's CSS Sculptor for Expression Web was an Expression Web Add-in developed by WebAssist. The program is no longer available. Eric Meyer is an internationally recognized authority on HTML, CSS, and web standards, and author of some of the essential books on CSS.

Pat Geary, MS MVP-  Expression Web and Tina Clarke, MS MVP - Expression Web are proud to bring you TWELVE new Expression Web Site DWT's based on Eric Meyer's CSS Sculptor for Expression Web. They have been tweaked and both the css and html have been heavily commented to assist in the learning process.

Background

Tina Clarke's tutorial Register Custom Templates in Expression Web 3.0 encouraged us to pursue a project we have often discussed and felt was needed especially by Expression Web Newbies.

Templates

The series of twelve templates are divided into four layout groupings:

  • One column with top navigation, header, and footer
  • Two column with left sidebar, top navigation, header, and footer
  • Two column right sidebar, top navigation, header, and footer
  • Three columns, left and right sidebar, top navigation

An additional five templates are available as equal height column site templates. NEW

Within each of the layout groups you will find the following different types:

  • Fixed to 800px- Page and column  widths are set with pixels and do not resize if the browser window or browser text size changes.
  • Fixed to 1024px- Page and column  widths are set with pixels and do not resize  if the browser window or browser text size changes.
  • Liquid - Page and column  widths are set with percentages which allows them to resize when the browser window changes with the exception of the three column templates which has the left and right side columns set in pixel widths.

Each of the site templates includes a sample search box as well as a contact form. Instructions for modifying both the search box and contact form are listed below plus the instructions are linked from each of these relevant  template pages themselves for easy access. We have also included information about the other basic pages and how to work with a Site DWT below.

NB: In 'Page Editor Options' under the 'Authoring' Tab you will find 'default htm file extension', and a radio button selection of either .htm or .html. If you have this setting on .htm when you select and make a Site from one of the .tem downloads (or the generic Expression Web Site Templates) you will see as if by magic the index.html page change to default.html, this is a little known bug. If you have it set to .html then your homepage extension will remain index.html. Of course you can rename your homepage file to whatever your host requires by right clicking on the selected link in Folder List View (Panels - Folder List or Alt + F21) and choosing Rename. When you select either .htm or .html in Page Editor Options this designates the file extension of new pages.

Site Map page

An essential part of SEO (Search Engine Optimisation) is having a site map of your site. Not only a html version but a xml version too. With the html version not only do you need to provide a link to every page on your site but you need to add a short description also. XML sitemaps can generate both versions for you.

Before you make the sitemaps version it's a good idea to check in 'Site View' that all your page titles are well written with no mistakes as they are used to generate the anchor text. When the html site map is generated you will need to remove the links from the table they are generated in and make an unordered list from them. If you place the cursor within the table and in the Table menu click Convert - Table to Text this will remove the table quickly. Select the links and paste them into your links page, select the links again and use the bullets icon or the unordered lists section from the Paragraph pane on the Formatting or Common Toolbar which can be turned on from the View Menu to make the list. Then add a short description of what is on the page under or beside each link.

Links page

Ask other webmasters if they would be happy to link back to your site when you link to theirs. Always link using good anchor text, for example if we wanted you to link to our site we would ask you to link in the following way.

Using the following code - copy and paste into notepad or use Paste Text under Edit if you are using Expression Web then paste into Code View.

<p><a title="Migrating from FrontPage to Expression Web" href="http://www.frontpage-to-expression.com/">Migrating from FrontPage to Expression Web</a><br />
Helping users understand the methods and solutions available in order to transition their sites either from FrontPage or just bad coding</p>

The results will look like the following:

Migrating from FrontPage to Expression Web
Helping users understand the methods and solutions available in order to transition their sites either from FrontPage or just non standard coding

When you are producing your link back details be sure to use a title attribute (Screen Tip button on the top right of the of the Hyperlink dialog box) which matches your anchor text precisely. Then include a short description of what the site is about.

When you ask other webmasters to link to you, search their site before-hand to find out their name so you can address them directly. Do not send out emails en-block that are not personal to the webmaster, or it will just be deleted. Explain why you think their readers would benefit from visiting your site.

The same premise applies to your visitors. If you are asked to provide reciprocal  links, do not link unless your visitors will benefit from those links. You should also insist that anyone linking to you use your format of linking. You should ensure that they always use your direct URL and to not include a file name. For instance http://yoursite.com/index.htm.  At some later date you might want to use a different homepage file name, either if you move hosts and they want you to use default.html or you might want to use ASP or PHP and your file name will change. By always using the exact same linking method, your homepage link is not diluted within the search engines. This also applies in the use of www before the domain name. if you are going to use www, always use www, if you are not make sure it is not used elsewhere. You can also set this in Google webmaster tools or by creating a 301 permanent redirect in your .htaccess file.

About page

To engage your visitors in personal way the about page is an essential tool in your bag of tricks. Don't just write a few links, explain about your experience for your subject matter, include any qualifications. Link to your other websites and make sure your contact information is listed in short with a link to the contact page. How you or your company got started or how the website came about written in a chatty way is always a delight to readers. Being bland or worst irritating  can make the about page the only page the visitor will look at, encourage them to look through your site by showing your personality and telling them what they want to know - about you. To underline just how good about pages can look and just how badly they can be presented Smashing Mag best practices for effective design of about pages and A List Apart - Your About Page Is a Robot have some entertaining insights on about pages.

NOTE: The filler text within the templates is just that, filler text. You can remove it and insert your own content of whatever you wish.

Instructions for Use

Turn off User Account Control

If you do NOT turn off User Account Control, you are going to have to click to give permission for each of the templates you want to copy/move. You can turn off user Account Control while you copy the files then turn it back on. It does require a restart of the computer each time. (You do not have to do this it just saves time if you do)

Download and Unzip the Template Package

WARNING: Do not download the zipped tem files to the same folder you will be unzipping to or the templates will not work. Download the files to your desktop and then unzip them to the proper folder.

Download any or all of the four template packages which are in zipped format. Each of the packages contains three separate folders with the files associated for that site template. Unzip the templates to one of two places.

NOTE: Make sure Expression Web is NOT open when you unzip the templates.

Expression Studio 4 - Expression Web 4

C:\Program Files\Microsoft Expression\Web 4\en\WEBS

Open Expression Web. After that you’ll see the new templates in the general list pane along with the current generic templates included with Expression Web, under Site > New Site > Templates. You will see a preview of any of the templates listed here.

WARNING: This will only work if you set your default file extension to .html by selecting 'Tools' from the menu, then 'Page Editor Options' > 'Authoring' tab.

If you are using Windows 64 bit, the path will be:

C:\Program Files (x86)\Microsoft Expression\Web 4\en\WEBS

OR for Expression Web 4.0 ONLY

C:\Users\username\AppData\Roaming\Microsoft\Expression\Web 4\Webs
Open Expression Web after that you’ll see the new templates in the general list pane along with the current generic templates included with Expression Web, under Site > New Site > My Templates

EXPRESSION WEB 3.0:

C:\Program Files\Microsoft Expression\Web 3\en\WEBS
Open Expression Web. After that you’ll see the new templates in the general list pane along with the current generic templates included with Expression Web, under Site > New Site > Templates. You will see a preview of any of the templates listed here.

If you are using Windows 64 bit, the path will be:

C:\Program Files (x86)\Microsoft Expression\Web 3\en\WEBS

EXPRESSION WEB 2.0:

C:\Program Files\Microsoft Expression\Web 2\Templates\1033\WEBS12

If you are using Windows 64 bit, the path will be:

C:\Program Files (x86)\Microsoft Expression\Web 2\Templates\1033\WEBS12

EXPRESSION WEB 1.0:

C:\Program Files\Microsoft Expression\Templates\1033\WEBS12

If you are using Windows 64 bit, the path will be:

C:\Program Files (x86)\Microsoft Expression\Templates\1033\WEBS12

OR for Expression Web 3.0 ONLY

C:\Users\username\AppData\Roaming\Microsoft\Expression\Web 3\Legacy\Expression\Web 3\Webs
Open Expression Web after that you’ll see the new templates in the general list pane along with the current generic templates included with Expression Web, under Site > New Site > My Templates  No preview of these will be available BUT the preview feature will be available in the next release of EW.

NOTE: Insert the username YOU are using in place of username. C:\ is the drive Expression Web is normally installed upon, change the drive name if you have Expression Web installed on another drive.

Screenshot Webs Folder with Unziped tem folders.
Unzipped .tem folders

FRONTPAGE 2003

C:\Program Files\Microsoft Office\Templates\1033\WEBS11
Open FrontPage 2003. After that you will see your new templates under File > New > New Web site > More Web Site Templates > Web Site Templates > General 

View Screenshot

SharePoint Designer 2007

C:\Program Files\Microsoft Office\Templates\1033\WEBS12
Open Sharepoint Designer 2007. After that you will see your new templates under File > New > Web Site > Templates. You will see a preview of any of the templates listed here.  

View Screenshot

Using the Site Templates

Once you have copied the .tem folders to the proper location, you can begin using them to create a new site.

NOTE: There is a bug within Expression Web that causes the thumbnail preview to overlay another template preview. View screenshot

Open Expression Web 4.0 in the Site Menu > New Site > My Templates or Templates > Choose the layout you want and the location > name your web > Click OK

Open Expression Web 3.0 in the Site Menu > New Site > My Templates or Templates > Choose the layout you want and the location > name your web > Click OK

Open Expression Web 2.0 in the File Menu> New > Web Site > Templates > Choose the layout you want and the location > name your web > Click OK

Open Expression Web 1.0  in the File Menu> New > Web Site > Templates > Choose the layout you want and the location > name your web > Click OK

Template Gallery

NOTE: You can click any of the thumbnails for a larger view of the template.

One Column Fixed Width to 800px.
1 Column Fixed Width
 to 800px

One Column Fixed Width to 1024px.
1 Column Fixed Width
 to 1024px

One Column Liquid
1 Column
Liquid Width

Download One Column Template Package

Two Column Left Fixed Width to 800px.
Two Column Left
Fixed Width to 800px

Two Column Left Fixed to 1024px.
Two Column Left
Fixed Width to 1024px

Two Column Left Liquid Width.
Two Column Left
Liquid Width

Download Two Left Column Template Package

Two Column Right Fixed to 800px.
Two Column Right
Fixed to 800px

Two Column Right Fixed Width to 1024px.
Two Column Right
Fixed Width to 1024px

Two Column Liquid Width.
Two Column
Liquid Width

Download Two Right Column Template Package

Three Column Fixed Width to 800px.
Three Column
Fixed Width to 800px

Three Column Fixed Width to 1024px.
Three Column
Fixed Width to 1024px

Three Column Liquid Width.
Three Column
Liquid Width

Download Three Column Template Package

License Information

These Site Templates are licensed to you under Creative Commons by the owners, Pat Geary and Tina Clarke. If you are a web designer/developer and want to use these for clients you MAY NOT claim them as your own design either through a link on the site or a copyright meta. You may put:

Designed by Pat Geary and Tina Clarke of Migrating from FrontPage to Expression Web and edited by 'your name' and 'your link'.

You may use these Site Templates for commercial or noncommercial usage. You may add, tweak or change them in anyway you wish. You may NOT include any of the Site Templates in any packages for resale or distribution or download without full written permission from Pat Geary and Tina Clarke of Migrating from FrontPage to Expression Web

 Pat Geary & Tina Clarke.

 Copyright 2010 all rights reserved Pat Geary and Tina Clarke
Updated September 2011