Introduction to ASP.NET Master Pages in Microsoft Expression Web

Author: Dustin Drees

Expression Newsletter, subscribe nowto get yours.

Maintaining a unified design throughout your websites can sometimes be a task. Fortunately, we have options, like ASP.NET Master Pages.

As a web user, a web design novice, or a web design professional, we can all understand the importance of having a consistent design throughout any website. This can sometimes be a tiring task, especially as our sites age. Fortunately for us, there are a number of options available to manage this task in Microsoft Expression Web, including ASP.NET Master Pages.

Master pages are unique because they are a runtime environment, which means our pages are assembled when requested from our server, which allows us certain flexibilities that we’ll look a bit more at soon. They also allow you to use ASP.NET controls. Even if you don’t plan on utilizing ASP.NET controls now, you may in the future, and master pages give you that option. If you’re working on a website that requires the support of developers, master pages are also the right choice, as they enable a smooth workflow between yourself as the designer, and the developers.

Setting up a Master Page Web Site

To get started, let’s create a new web site in Expression Web. (File > New > Web Site) Let’s select an Empty Web Site for this tutorial.

The first thing we want to do is to create our Master Page. Select File > New > Page.

From this dialog box, we can use either General or ASP.NET from the left hand column, and find Master Page in the middle column and select it. Notice that you also have an option to declare whether your site will be support C# or VB, as well.

After we select OK, we will have a file called Untitled_1.master. Let’s save this file first as ourMaster.master. Notice the file extension of “.master.” If you have never worked with Master Pages before, this is something new. This file extension needs to be used on any master pages we assemble for our website.

(click image to zoom)

Let’s take a look at what our default master page. By default Expression Web inserts a ContentPlaceHolder, which it has assigned the default id of ContentPlaceHolder1. While we will need one or more ContentPlaceHolders on our master page eventually, for now, let’s select it and delete it.

You will get a warning dialog asking you to confirm the deletion. At this time, we have no attached pages, so it is safe to delete.

At this point, we want to build our design into the master page that will be shared throughout our site. I have jumped ahead a bit and created a very simple 2-column site layout, with a header and a footer, all encased inside a div with an id of wrapper. You can see the code I set up for this in the provided screen shot if you would like to follow my setup exactly.

(click image to zoom)

Now we have a simple layout that we would like every page of our site to use. However, if we were to start building content pages now, we wouldn’t be able to actually enter any content into this layout. So, now we’ll need to go back and add ContentPlaceHolders in the areas we want to be able to add custom content into this layout.

The ContentPlaceHolder is an ASP.NET control, which creates an area that individual content can be placed. We will see this in action a bit more in a couple of minutes.

You can find the ContentPlaceHolder in the Toolbox under ASP.NET Controls > Standard > ContentPlaceHolder.

Click and drag a ContentPlaceHolder control into both columns of our website. The ContentPlaceHolder will automatically fill the width of any area you have placed it.

Was that simple enough? Technically at this point, we could move onto building out content pages with our Master Page, but let’s do a couple of extra steps first.

It is good practice to give our content regions specific names so we can identify them easily later. Click and select the ContentPlaceHolder in the left column. In our Tag Properties Panel, we can change the ID from the default, by clicking the name and entering what we need the new ID to be. So let’s give the left column and id of leftColumn, and do the same with the right column, by clicking to select it, and entering the ID of rightColumn in our Tag Properties box.

When naming your content regions, keep in mind that we can only use each ID once per page, so calling two ContentPlaceHolders “leftColumn” would not work. Also an ID for the ContentPlaceHolder control cannot have spaces, and is case sensitive.

One last step before moving on, click into your right column and type: This is my right column, where I will enter content.

We have successfully developed our master page. To move forward, save your file, and we’ll start developing pages that use this master page.

Creating pages with our Master Page

(click image to zoom)

In the File > New menu, the last selection is labeled Create from Master Page. This will bring up a dialog box asking us to Select a Master Page to use. By default the option Specific Master Page is selected.

Click the browse button and we will be shown our current site files, and the Master Page file we just created is available.

Select ourMaster.master and click Open and then OK.

We now have a file named Untilteld_1.aspx. We must use .aspx files to use Master Pages. Also notice in our Code View that we don’t have our normal XTHML setup for our page. This is because this information is being carried by the ourMaster.master page. We will only see specific code we create for this content page, and the two will be tied together at runtime.

Let’s save this file as content.aspx and then take a look at our site in the design panel.

Try rolling over the header and the footer, and you will see your cursor change, showing you that you are not able to access those areas. However, you can rollover the left and right columns and select the ContentPlaceHolders that we previously put there. However, you cannot actually do anything further with them at this moment.

Click and select our leftColumn and notice our options tab on the right side of the column. Click it and select Create Custom Content.

(click image to zoom)

We can now enter the left column and enter whatever content we need for this specific page.

We can also do the same thing with our right column, but there is a small difference to notice. When we created ourMaster.master, we entered a small bit of content into the right column, which we’re seeing currently. However, if we tell our right column that we want to use custom content, the content will no longer be tied to the Master page, even though we still see it. This may seem a small detail, but in some cases it could be very useful to realize this.

We can also make ContentPlaceHolders revert to the default again, by selecting Default to Master’s Content inside our options button. This will delete any custom content we may have entered however.

As you create your custom content, make certain that any XHTML that is produced resides inside your content controls, or you will get an error when you try to view your page.

We have now created a content page that is using a Master Page to supply the common details. If you preview your content.aspx file you may notice that the Microsoft Expression Development Server starts, to display your aspx content.

Practical Comparisons

Now that we’ve seen how easy Master Pages are to use in Expression Web, let’s take a practical look at how Master Pages can benefit you immediately.

As we have rolled into 2009, many of us will be tediously updating a simple copyright line in the footer of our site to include 2009. If we’ve used any of a variety of tools available to us, this is an easier task. We have several options available at our disposal for making this task easier on ourselves, including; Dynamic Web Templates, Master Pages, include files and, even Find and Replace.

Dynamic Web Templates (or DWTs) are another popular way to manage websites. DWTs are share a lot of similarities to Master Pages, in so much that they allow you define editable regions of a template file, while locking all other areas from being effected. This enables your site files to easily subscribe to one shared design, which can be updated by you, only once.

If we needed to add 2009 to our DWT based website, Microsoft Expression Web can ultimately do the legwork for you, quickly, and painlessly.  By making the change to 2009 in our main DWT file, Expression Web would go through any local pages tied to that DWT and make the necessary update.

This saves us a lot of repetitive work, but what I’ve never enjoyed about DWTs, is that now you have to reupload every page of your site that was affected by this update. Even small changes lead you to a large scale reuploading of your site. If you only have a handful of pages on your site, this may not be an issue, but if you manage a much larger site, this can be a problematic endeavor.

Master Pages however render at runtime, not on your local machine. As such, we can make the update to 2009 only in our master page and upload only that to our server, and all pages will be able to be updated when they are called. (One difference to note, DWT files are only needed on your local machine, not on your web server, whereas you master page file must be on your server to work.) If we had a very large site, this could save us some unforeseen headaches later on, and keeps us from having to update all of the pages on our server.

If you want as a final step, head back into ourMaster.master, and update the copyright years to include 2009 and save your file. You can see the change reflected in our content.aspx page immediately.

In this tutorial, we’ve seen how easy Master Pages are to use in Microsoft Expression Web, and we’ve used a relatively small example to show a decently large benefit. If you decide to start using Master Pages for your ASP.NET websites, you’re on your way to more robust websites that can harness more ASP.NET technologies.