Creating web site from site templates in Expression Web

Click on any of the thumbnails for a larger image.

Create a web site from templates

Step 1: Start Expression Web 4.0 > Site > New Site.

Step 2: Click on the 'Site' tab and choose 'Templates' from the left pane. You will see all of the available templates listed. As you browse through the list of templates, you will see a small preview in the right pane.

Select the template that is most appropriate for the site you want to create.

Figure 1: Choose your template.

Location: Type the name of the folder where you want the site to reside or browse to the folder.

NOTE: Folder and file names should be in all lowercase with no spaces. Use a hyphen instead. Example: my-web-site NOT My Web Site

Click 'OK' and the site will be created for you.

Step 3: Your new web site contains folders and files with images and style sheets. The default setup of the site that is created will have a number of folders with only one page in the folder. All are named 'default.html'.

Figure 2: Default site organization

You can leave the default setup OR follow the steps listed below:

Rename the pages within each folder, and move them to the root folder of the web.
Example: rename default.html in the about folder to about.html.
Rename default.html in the contact folder to contact.html.
Move all of your images to the image folder. Any images that have the same name, will overwrite the images of the same name.
Rename the Home Page from 'default.html' to 'index.html' or the default for YOUR server.

Whatever your decision, the site is now ready to work with.

Figure 3: Reorganized site

The 'default.html' or 'index.html' is your default home page and ‘master.dwt’ is the dynamic web template on which your web site is based. I prefer my home page to be called 'index.html' so I rename it immediately. If done within Expression Web, all hyperlinks will be adjusted to reflect the renamed page. The choice is, as always, your decision.

Editing your individual pages

Step 4: If you double click the 'styles' folder, you will see four different styles sheets which include 'layout.css', 'style1.css', 'style2.css', 'style3.css'. The 'layout.css' is imported into each of the style sheets. Each of those sheets will give your page a different look. If you want to see how each style sheet affects the look of the site, you will need to edit the 'master.dwt' style sheet link.

Change the style3.css to the style sheet you wish to view. Once you save the page, you will be told there are # of pages attached, do you want to update them. Click 'Yes' and all pages will be updated.

Step 5: Double click the 'default.html' or 'index.html' page to open it.

Figure 4: index.html editable regions.

Parts of the above page are grayed out which means they are part of a non-editable or locked region. Non-editable regions can only be edited from within the dynamic web template. If you hover the cursor over the menu within the default.html page, you will see that you cannot edit the menu on this page.

If you view the page in 'Split' view, you can more easily see which areas are editable regions and which are not.

Figure 5: master.dwt in Split View.

Any of the code that you see that has been highlighted in tan is part of the dynamic web template and is NOT editable from within an individual page.

View Screenshot of default.html in code view

NOTE: While you can certainly work in 'Design' view to edit your pages, I would encourage you to work in 'Split' view so you can see exactly what the effects of what you do are. Also EW is going to be much easier to work with if you know at least some of the basics of CSS and XHTML.

Three excellent resources for learning XHTML, HTML, and CSS include:

HTML Tutorial from W3Schools
CSS Tutorial from W3Schools
XHTML Tutorial from W3Schools

Step 6: With the 'default.html' or 'index.html' open, there are two areas on this page you can edit: the 'content' region and the 'sidebar' region. Click on the dummy text that has been entered in the content region, select and delete. If you click the <p> tag in the content region, or the <p> tag from the 'Quick Tag Selector' bar, the entire paragraph will be selected and you can delete it. Enter the text that will be the content you want to appear on your Home Page. Save your page - frequently Ctrl + S.

View Screenshot of editable regions for default.html in design view

Step 7: Perhaps you would also like to change the image that appears on the page. Right click on the image and choose 'Picture Properties'. From the dialog box, you can:

Figure 6: Picture Properties

Picture: change the image used by clicking the 'Browse' button and selecting a new image.
Picture: edit the image in your graphics editor by clicking the 'Edit' button. You will need to associate you graphics program in order to do this. Paint is associated by default.
Accessibility: add 'Alternate Text' and/or a 'Hyperlink' to a larger image.
Appearance: change the appearance of the picture by using 'Appearance' tab. Rather than use this, I would encourage you to resize your image with your graphics editor so it is the size you want to use. Also add any borders using your graphics editor. Use your style sheet for changing how you want the image floated.

Editing the Dynamic Web Template

The default templates included with Expression Web are missing some meta tags that are important like description and keywords. You can easily add these to your DWT.

Adding Description and Keywords Meta Tags

Step 8: Double click the 'master.dwt' to open the page. Click the 'Split' view tab so that you can see what code is being added. Right click in 'Design' view section, and select 'Page Properties'.

Figure 7: master.dwt in Split view

Figure 8: Page Properties dialog box.

Title: Type "Page Title Goes Here"
Page description: "Page description goes here"
Keywords: Type "keywords, keyword, keywords,"

You will see that the following code has been added:

<title>Page Title Goes Here</title>
<meta name="keywords" content="keywords, keywords, keywords," >
<meta name="description" content="type a description of your page." >

You will also see that the title tags are surrounded by the code that makes them an editable region which allows each page to have it's own unique page title.

<title>Page Title Goes Here</title>

You will need to make the description and keywords meta tags into editable regions so that those tags on each page are also unique. The easiest way to do this is to copy the

to just before the keywords meta tag and change doctitle to head.

Then copy and paste the

just under the description meta tag. You should now have the following code as part of the DWT.

<meta name="keywords" content="keywords, keywords, keywords," >
<meta name="description" content="type a description of your page." >

Click Ctrl + S to save the changes to the DWT and you will get the following message:

There are 8 files attached to the 'master.dwt'. Would you like to update them now? Click the 'Yes" button and you will see the files being updated.

There are other meta tags you may choose to add to your DWT. Please see Meta Tags - HTML Meta Tags.

You will then need to edit each of the individual pages to add the description and keywords to those pages. Remember, they should be unique to the individual page.

Edit the page links

Step 9: The page links at both the top and bottom of the page are also part of the DWT and in non-editable regions. To change them you will need to open the 'master.dwt' again.

Select the link from either the page or the 'Quick Tag Selector' > right click and choose 'Hyperlink Properties'

Figure 9: Hyperlink Properties dialog box.

In the Hyperlink Properties dialog box, you can edit:

Text to display: Name you want to appear on the menu like Home
Address: Page you want to link to
ScreenTip: A screen tip will be displayed when a mouse is hovered over the hyperlink.

Again, when you save your page you will be asked if you want to update the attached pages, Click OK and the changes will be saved to all of the attached pages.

If you would like to know more about working with DWT's download Tina Clarke's free EBook Expression Web DWT Ebook.

Create New Pages

Step 10: To create a new page, right click on the ‘master.dwt’ and choose New from Dynamic Web Template. The new page will look like the template and is ready for you to add content to. Make sure you save it first, especially if you will be adding images to the page.

Step 11: If want to create a new page that looks like any of the existing pages, right click on the page and select New from Existing Page. This will create a new page that looks exactly like the existing page and is ready for you to edit.

You will also need to add this page to your menus by again editing your dynamic web template.

Working with CSS and the Default Templates

It is beyond the scope of this tutorial to cover the use of cascading style sheets (CSS) in great detail. I would encourage you to make use of the User Guide available to you from the Help menu on which these tutorials are based.

Resources

CSS Basics - written by Ben Partch - an eighteen chapter book you can either download in pdf format or print.
Cascading Style Sheets: Separating Content from Presentation - Owen Briggs, Steven Champeon, Eric Costello, and Matt Patterson
CSS Tutorial from W3Schools
Introduction to CSS
CSS and images
CSS in webpages
CSS Play

Conclusion

Creating a new web site from an existing template can save you time and effort. I would encourage you to explore the default templates and IF you decide to use one, that you reorganize the folder/file system as described in my original post Expression Web “in box” Templates.

Expression Web 4.0 Tutorials 2nd Edition from Install to Publish, a FREE EBook by Pat Geary.

Expression Web has a group on Facebook. If you are a FB user, come join us.

Disclosure: This is an affiliate link, which means that if you visit Bluehost.com through this link and purchase this product, I’ll get a commission.

Microsoft MVP Logo.
April 2007 - April 2013