Creating web site from built in templates in Microsoft Expression Web

Posted by: Minal Agarwal , on 1/17/2009, in Category Expression Web
Views: 25568
Abstract: With a hullabaloo of blogging and online business transactions, everybody wants to have their own website. For users who do not have any knowledge about writing HTML or CSS and who want to create a web site on their own, Expression Web has integrated a bunch of built-in web templates into it. These templates help you create your web site with the layout and all basic elements and all you have to do is enter text and images. In this article we will learn how to create a web site from such templates and also how to customize it.
Creating web site from built in templates in Microsoft Expression Web
With a hullabaloo of blogging and online business transactions, everybody wants to have their own website. Be it a personal web site or for an organization, to get a clean, neat and professional looking web site done from a designer can cost you plenty of dollars. If your business is big enough and the requirements demand a multi-page dynamic website; then of course it is a wiser thing to do. But for small organizations, business and personal web sites that are static you can create your own website, without spending much of time and effort, neat and professional web site and that too absolutely free. Expression Web can help you create such web sites even if you do not have any knowledge about writing HTML or CSS. You can create web sites from the built in templates that are integrated in Expression Web. Ah! But before you ask any more questions, let us see how to create the web site.
Create a web site from templates
Launch Expression Web and Go to File > New > Click on the ‘Web Site’ tab and choose ‘Templates’ in the left pane to list all the available templates besides it. As you browse through each of these templates, you get a small preview in the right pane. See image below:
New Web site dialog box
Choose a template that suits you best. As soon as you click on OK a web site is created for you.
Web Site view
This web site contains folders and files including images and corresponding style sheets.  The ‘default.html’ is your default home page and ‘master.dwt’ is the dynamic web template on which your web site is based. Let us take a look at the default.html. Double click to open. See image below:
Default HTML Page
The first thing you may notice is that some areas are grayed out and you cannot click on them; while some areas could be edited. This is because the areas that are non-editable are inherited from the template (master.dwt) and they are applied to all the files derived from the template. Whereas the areas that are editable are the content entered in this page and hence can be modified. So you can edit, delete and add your own content in these areas. How? Let us see that.
If you change the view to ‘Split’ or ‘Code’ you can get a better insight into what all areas are editable.
Code
In the above image the code that has been highlighted (in yellow) has been taken from the template and hence is non-editable. But the code in the box is editable. If you are not an expert in HTML/XHTML, do not worry as you need not have to actually code for any customizations you wish to make to your page. You can work on it from the ‘Design view’. So switch to the design view by clicking on the tab at the left bottom corner of the workspace. Let us say for instance if you want to change the image placed on the page, right click on the image and choose Picture Properties. This would take you the Picture Properties dialog box. Here you can insert a new picture by browsing or edit the existing picture in your image editor. You can also set certain other properties like the picture file type, alternate text for the picture and so on. The appearance of the picture can also be changed in the Appearance tab. It allows you to resize, position the picture to wrap around the text and align the picture. 
Other portion that you would like to customize is the actual content of the page. For that simply click on the dummy text that has been entered in the page, select and delete. Now enter the text that will form your home page.
But I want to edit the links on the page and that area is non-editable, would I be able to change that? Yes you can, but not in this page. As I told you earlier those areas that are non-editable in the home page or for that matter all the other pages that you would create further are based on the dynamic web template. So any modifications to be made in the non-editable region of such pages need to be made in the template and not to this page. Switch to the Website tab at the top of the workspace or in theFolder List task pane, find ‘master.dwt’.Double click to open the file. It looks alike to any other page.
Master Template
You can click and edit any and all elements in this page. As soon as you save your changes in this template, Microsoft Expression Web will alert you that there are a number of files attached to it and would you like to update all of them. Click OK and the same would be replicated in your ‘default.html’; all other linked files and consequently inherited by all the pages that you further create from this template.
Save warning
To know more about editing templates, read article on ‘Creating a Page Template with Expression Web’.
Similarly you can edit the links on the Home page; corresponding linked pages are organized in folders. See the folder list:
Folder List
The images and styles that are applied to the pages are also saved in their respective folders. In case you want to delete any page, folder; right click on the page/folder and choose Delete, or choose the file/folder and hit the Delete key on your keyboard. Remember to remove all the references and links to those pages from all the other pages. And now you know the fastest way to do that! Just remove the links from the dynamic web template (master.dwt) and you are done!
To create a new page you can right click on the ‘master.dwt’ and chooseNewfrom Dynamic Web Template. The page that would be created would look similar to the template. But if want to create a new page that looks like any of the existing pages, for instance like ‘news.htm’, then all you have to do is right click on the ‘news.htm’ and from the menu choose New from Existing Page.
New From Existing Page
This would create a new page that looks exactly like the ‘news.htm’. Note to save any changes made to the original page before you create a new page from it. While saving this page, create a new folder with the same name with which you want to save this page and then save the page into this folder.
Conclusion
Creating new web site from an existing template saves you lot of time and effort and gives that professional look to your website, which would otherwise mean spending lot of time and brain to do something that is easily available for you. I hope this article was helpful. If you like this article, then do subscribe to RSS and stay updated.

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce the The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on .NET Standard and the upcoming C# 8.0 too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Minal Agarwal, Expression Web MVP, MCDST, works as a freelance web designer (SaffronStroke) working on Expression Web, Photoshop and other Graphical tools. As a hobby, she also runs a famous Food site called Foodatarian.com. Follow her on twitter @ saffronstroke


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook