Skip to main content

Customizing a Website Template with Expression Web

Author: Anna Ullrich
Website: http://msdn.microsoft.com/en-US/expression/profile/?User=Anna%20Ullrich

Expression Web provides several predesigned website templates you can use to build a new website quickly, complete with pages, style sheets, images, and a navigation menu. This tutorial shows you how to create a new website from one of these templates, edit the content of the site, and edit the site template that defines the site’s look and feel.

Dynamic Web Templates

The website templates in Expression Web use a Dynamic Web Template to define the page layout and appearance of the site. By using a Dynamic Web Template, you are able to edit a single page (the template) in order to change the appearance of all pages in the entire site, such as the header, footer, and navigation menu that appears in all pages.

If you’ve been relying on the FrontPage Shared Borders, Themes, and Link Bars features, you will find that Dynamic Web Templates in Expression Web provide the same benefits of Shared Borders and more. For information on converting Shared Borders to Dynamic Web Templates and the benefits of doing so, see Convert FrontPage Shared Borders to Dynamic Web Templates in Expression Web.

For more in-depth information about Dynamic Web Templates, see the Help topics online at: http://expression.microsoft.com/en-us/library/cc295515.aspx

To create a new site from a website template

  1. Choose File > New > Web Site.

  2. In the New dialog box, on the Web Site tab, click Templates.

  3. Select a template you want to start with, and then click OK. (I chose the Small Business 5 site template for this tutorial.)
    After you click OK, Expression Web creates a website based on the template you selected, including folders, pages, links between the pages, images, CSS files, and a single Dynamic Web Template file that defines the look and feel of your website.

    Open any HTML page in your site to view the default appearance of that page. The following is a screenshot of the homepage for the Small Business 5 website template, on which my site is based.

  4. If you’d like to test the links in the site and quickly review all of the pages in your site, click the Preview in Browser button  in the Expression Web toolbar to open the current page in a web browser. Then just click any of the page links in your web browser to view the other pages in the site.

Customize the Body Content

To edit the body area of any HTML page in the website, including the headings, paragraphs, and any images in the content area of the page, you edit the page like any other ordinary HTML page. It’s only when you want to edit the other areas of the page, including the header, navigation menu, and footer that you need to use different steps, which I’ll cover in the section Editing the contents of the header, footer, and navigation menu.

To edit the headings or paragraphs in a page of your site:

  1. Open the HTML page you want to edit and click the Design button at the bottom of the page view to hide the Code pane.
  2. Select the heading or text you want to replace, and then type the text you want to add to the page.

    Tip: If you want to add existing text that is in another document, such as a web page or a Word document, then copy the content in that other document, such as in Word or your web browser, and then in Expression Web choose Edit > Paste Text (instead of using the Paste command).  In the Paste Text dialog box, select the paste text option you want, and click OK. I recommend selecting either the “Plain text” option or “Normal paragraphs with line breaks” option so that you don’t paste any styles and bloated markup from the original document.

    The following is a screenshot of my Small Business 5 website’s homepage with a new heading and text I leveraged from the homepage of the FrontPage to Expression Web community portal.

    Editing the body contents of each page in your site is straight forward, but you need to follow different steps in order to edit the other areas of the pages, including the header, navigation menu, footer, as well as page properties, such as hyperlink color, fonts, and background colors. I’ll cover this next.

Editing the Contents of the Header, Footer, and Navigation Menu

The website templates provided in Expression Web are built using a Dynamic Web Template. The Dynamic Web Template defines areas of the page that you want to remain the same on all pages that use the template. These fixed areas are not editable on the HTML pages of the website. When you try to edit one of these areas in the Design view of your page, your cursor changes to a universal “No” sign and you are not able to edit the underlying area. The following is a screenshot of my cursor in the header section of my site’s homepage.

To edit any of these restricted areas, you simply need to edit the dynamic web template file that defines those areas, and then save the dynamic web template. All of the pages in your site are then automatically updated for you. The following steps illustrate how to update a dynamic web template and the pages that are attached to it.

  1. Open the master.dwt file. The following is a screenshot of the master.dwt for the Small Business 5 site template.

  2. In the master.dwt file, edit the templates areas you want, such as the header, logo, navigation menu, and footer.

    The following screenshot shows my master.dwt file after I’ve changed the logo, edited the contact numbers, and removed some of the links in the navigation menu and footer.

  3. To apply your changes to your entire website, choose File > Save to save the changes you made to the master.dwt file.  A dialog box asks if you’d like to update the files that are attached to the master.dwt file; click Yes in this dialog box.

    Note: If you changed the logo image, the Save Embedded Files dialog box appears first before the dialog box that enables you to update the attached pages. The Save Embedded Files dialog box lets you save the logo image to your website (if needed) and also updates the CSS file that refers to the logo image; if this dialog box appears, click OK.

    After the program updates your web pages, a dialog box shows the number of files that were updated. If you select the Show Log box in this dialog box, you can review the list of pages that were updated.

    Note: If a page that is attached to the master.dwt was open while Expression Web was updating attached pages, you must save that open page in order to keep the changes that were made to it by the dynamic web template.

Customize the Appearance of Your Site

To change the visual appearance of the page, such as the colors, fonts, and spacing, you need to edit the cascading style sheets (CSS) of the site. CSS intimidates some, but I’ll show you how easy it is to get the results you want using some of the CSS features in Expression Web.

  1. Open the master.dwt file.
  2. To change the color of the links in the main navigation menu, put your cursor in any link in the main navigation menu.
  3. Go to the CSS Properties task pane, and select the Show alphabetized list button and also the Show set properties on top button as shown in the following screenshot.

    When you select those two buttons, any properties that are defined by the selected style will appear at the top of the list of properties.
    The Applied Rules area of the CSS Properties task pane lists all of the styles that can affect the element you have selected in your page. The style that has the highest precedence for the current selection in your page is selected by default at the bottom of the list of Applied Rules. The properties listed below the list represent the properties for the selected style.

  4. You can either modify the properties of the current style in the list of properties in the CSS Properties task pane, or you can right-click the name of the selected style (“#sidebar a” in my example) in the task pane and click Modify Style to edit the properties in the more user-friendly Modify Style dialog box.

  5. To change the color that appears behind the main navigation menu, select the <div> element that contains the menu. To do this, make sure your cursor is still in a link in the main navigation menu, then in the tag bread crumb along the top of your page, click on the first <div> tag that appears to the left of the <ul> tag. This selects the <div> that contains your main navigation menu.

    In the CSS Properties task pane, the last style in the list of Applied Rules is selected, and the current color that appears behind your navigation menu should be the same as the color swatch that is next to the background-color property.

    Click in the value for the background-color property and then click the drop down arrow that appears and select a new color for your menu background.

  6. Save the master.dwt file and click Yes when prompted to update all attached pages.
  7. You can continue to customize other areas of your master.dwt page, such as the footer and header areas using the same techniques we just used: select an element, and then use the CSS Properties task pane and the Modify Style dialog box to change the associated styles and properties.