Creating Websites using templates in Microsoft® Expression® Web

Posted by: Minal Agarwal , on 11/8/2008, in Category Expression Web
Views: 30259
Abstract: We have already seen how to create an empty website in a previous article. But sometimes creating a website from scratch can be tedious and time consuming. In such case you may feel the need to create websites from the templates that are provided by the Expression® Web. So this article will give guide you to create website from the built-in templates in Expression® Web.

Creating Websites Using Templates in Microsoft Expression Web
Creating a website from scratch can cost you a lot of time and effort. Expression Web provides some built-in templates of websites. So it's worth utilizing this provision and use an Expression Web site template to create your own website. Expression Web not only facilitates creating template based websites but also lets you customize and replace such wensites with your own content. So let's get started then!

1. From the File Menu select NewWeb Site… Or from the Common Toolbar click on the arrow next to the New icon (button) as shown in the figure below.

Expression Web New Website menu

2. When you choose the Web Site option a New website dialog box comes up with a couple of choices.

Expression Web New Website Dialog box 

3.    By default the Web Site tab is selected and the category that is selected is General. Now select the Templates category in the left pane.

Expression Web Website Templates listed

The middle column displays the list of the templates to choose from and the right pane is the Preview area, which helps you decide which template suits the best.

4.    You can change the location of the website if you want from the same dialog. Once you are through with selecting the template for your website, click Ok to create the website.

5.    The new template based website is now created. The folder List task pane displays the root folder name and paths along with the folders and files that are created along with the website. The editing window shows a Website tab that also displays the sites’ files as it is shown in the Folder List task pane.   

Expression Web Website tab

NOTE: In an Empty Website, Folder List and Website tab in editing window would display only the root folder name and path. The Web Site tab doesn’t display anything.

6.    A home page is created for the site as default.htm; double click to open the home page. When you open the home page, you will find that the page has some areas that can be clicked, which means the content can be replaced with your own text or graphics.  Expression Web Default Page

And there are some areas which cannot be clicked or edited like the navigation bar because they are shared by multiple pages, as shown in the figure below.Expression Web Uneditable area

7.    To edit such locked site wide areas, click on ‘.dwt’ (Dynamic Web Template) file from the Folder List. This file is usually saved as master.dwt. This opens the template page and its contents can be clicked and edited.

Expression Web Editable Master Page

8.    Once you make the changes the master.dwt tab shows a '*' next to it, which indicates that there are unsaved changes made to the page. To save the modifications, right click on the tab and choose Save.  

 

 

 

Expression Web Save and Close options

A warning will be thrown as shown in figure below:

Expression Web Save warning

Click Yes to update the files.

NOTE: The Save option above allows you to save only the changes made to the master.dwt. Similarly you can right click on each tab to save changes made to each page.Alternatively you can also go to the File menu and click Save or Save All. This would save all the changes made to the Web site.

9.    You can open the home page and the changes will be reflected in the page.

Replacing content in template based websites

You can customize the master.dwt, which is the master template for all the pages in the site by adding your own headings, images and contents. You can follow the steps given below:   

a.     Click and drag to select the heading and type a heading suitable for your website. 

b.    Similarly select a paragraph and type in or paste your own contents in its place. The styles of the template are applied to the text entered. 

c.     You can also insert images. For that go to Insert menu, select Picture and choose either ‘From file’ or ‘From scanner or camera’. Browse to the image you want to insert and enter an alternate text. 

d.    Save your changes.

Adding or Deleting pages from websites created using templates

One of the advantages you have when you create a website from a built-in template is that you can create pages based on the master template. This helps you build pages that have a same layout and design.

Adding pages from template

 

1.    There are three ways you can create a page:   

(i)            From File menu choose New > Page. This will open the New dialog box. 

(ii)           From the toolbar click on the arrow next to New icon and choose page. This will too open the New dialog box.

Expression Web New Page dialog box

In the New dialog box, Page tab is selected by default. We have already seen the Web Site tab. In the Page tab, the left pane shows all the categories of pages you can create like ASP.NET pages or Style Sheets and so on. The middle pane gives you a list of pages available in each category. The rightmost pane gives a description as well as a preview of the page you select. 

            The list of pages is divided by a thin line. The list above the thin line contains:   

HTML – Creates a blank HTML web page 

ASPX – Create a new ASP.NET Web Form 

CSS – Creates a blank Cascading Style Sheet 

Master Page – Creates a master page for Web Applications 

Dynamic Web Template – Creates a Dynamic Web Template 

JavaScript – Creates a JavaScript file. 

XML – Creates an eXtensible Markup Language file 

Text File – Creates a blank text file.   

            The list below the line allows you to create pages based on templates:   

Create from Dynamic Web Template – Creates a new page based on an existing Dynamic Web Template. You can browse to the path of the template and choose to create the new page. 

Create from Master Page – Creates a content based page based on an existing Master Page. You can browse to the path of the master page and choose to create the new page.   

(iii)            In the Folder List task pane, right click on the page which you want to use as a template, so that its basic elements are inherited in the new page. From the menu choose, New from existing page. If you want to create a page based on the master.dwt then right click on the master.dwt and select New from Dynamic Web Template.  

 

2.    The new page is displayed in a new tab in the editing window. It has a temporary name of ‘Untitled_1.htm’. The number in the name depends upon the number of pages created and the extension depends upon the type of page, for instance ‘.aspx’ for ASP.NET page. After adding the page you can add your own contents maintaining the style and design of the original page.

3.    When you make changes to the new page, a '*' appears in the tab of the page, which indicates that the page is not saved.  

4.    Choose File > Save, a Save As dialog box is prompted. Traverse to the site folder where you want to save the page, type in the filename and click on Save. Once the page is saved, it appears in the Folder List task pane.    

Deleting pages from Website

 

Deleting pages is simple.   

1.    Just right click on the page you want to delete and select Delete from the drop down menu. 

2.    You will be prompted with a Confirm Delete dialog box, click Yes.

 Expression Web Confirm Delete dialog box 

 

 

 3.    Once the file or page is deleted it disappears from the Folder List.   

CAUTION: There is no Recycle bin for Expression Web, so once a page or file or a folder is deleted it cannot be retrieved back.   

TIP: A folder can be deleted in the same way a file is deleted.  

Conclusion

I hope this article will be helpful for you to create template based website and fill in with your own content.  I thanks you for veiwing this article.

If you liked the article,  Subscribe to my RSS Feed.

 

Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles


Page copy protected against web site content infringement by Copyscape


User Feedback

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel