Building Websites with Master Pages (Visual Studio)

Last week I was tasked with building a site from scratch with a very short deadline. Normally, I’d accomplish this with a WordPress install and a few theme tweaks, but my bosses didn’t want to go that route. I thought I was going to have to do things the old fashioned way (Dreamweaver, lots of typing, lots of coffee) until a friend of mine told me to take a look at Master Pages in Visual Studios.

The Master Pages feature, found in the latest versions of Visual Studio, is a very powerful tool for developing and maintaining a web site. By using a master page, you’ll be able to do to great things:

1. Create a template for your site that you can use over and over again.
2. Make site-wide changes in one location. This alone can save you hours of future work.

If you’re new to creating web sites, try not to be intimidated by all the jargon and fancy web development tools. All you need is some basic HTML and CSS knowledge to get started. The rest will fall into place as you go

Download and Install Visual Studio 2008 Express Edition

The first thing you need to do is download Visual Studio Express Edition. This is a free version of the popular development tool that professionals use. There are a few bells and whistles missing in this free version, but it is certainly capable of building just about anything the average guy can dream up.

The current version of Visual Studio Express is 2008, but if you happen to already have version 2005, you’ll be fine. To download Visual Studio Express edition, go to www.microsoft.com/express. Click on the download link to see all of the various Express packages that are available. The one you’ll want for this tutorial is the Visual Web Developer. If you’re interested in the other packages available, you may want to download them all by grabbing the DVD .iso file. You’ll have to burn this to a DVD before you can use it.

The initial download of Visual Web Developer is quick as it’s just an installer. When you run it, you’ll begin to download the actual program. Also, you’ll have an opportunity to go ahead and download SQL Server Express. This isn’t necessary for what I’m going to demonstrate, but if you think you will tinker with database driven sites in the future, I’d go ahead and get it. The download and install process will take a few minutes (it took me about 20 minutes). A reboot will be required right in the middle of the install.

The last step will be to register your copy of Visual Web Developer. You don’t have to do it right away, you have 30 days to register. To register, you will have to sign into your Microsoft account and accept some agreements. After that, you’ll be given a registration code that you’ll copy and paste into a form located under Help > Register Product (from within Visual Web Developer).

Using Master Pages

Now that everything is set up, let’s get started. Open Visual Web Developer and take a look around. You’ll see the Start Page displayed with a few panels on the right and the typical-looking menus up top. Feel free to explore and take it all in. When you’re ready, keep reading.

The first thing we’re going to do is to tell the Visual Web Developer that we want to create a new website. To do this, click File > New Web Site….

A window will appear, asking what sort of site you want to create. Select “ASP.NET Web Site” in the Templates box, select your favorite programming language at the bottom left (don’t worry, we’re not doing any programming today. I just want you to know it’s there and get into the habit of choosing a language), and finally set a location to save the website. I suggest putting all of your websites into one main folder to keep yourself more organized. Click OK to proceed.

Now you have a sort of shell for a site. On the right side in the Solution Explorer, you’ll see that several files and folders have already been made for you. We need two more folders added to the site, so right-click in the Solution Explorer where it shows the directory your site is located in (just above “App_Data”) and choose “New Folder“. Name the folder “master” and then create another new folder and name it “css“.

We need to add a file into each of our new folders. So, right-click on the “master” folder you just created and select “Add New Item…” from the menu. In the Add New Item window, select “Master Page,” give it a good name, and click OK. Repeat the process from the “css” folder, except you need to select “Style Sheet” from the Add New Item window.

Now we have everything that we need to build our site. From here, you’re going to actually create (or paste in the code) for your site. To do this, double-click the Master Page file your created in the Solution Explorer. The will open the file so that you can edit it. Notice that there’s already quite a bit of code already written for you. Use this file to structure your site with HTML. To apply styling to your site, double-click the style sheet file you created and type (or paste) your CSS code there. You’ll reference the CSS file in the Master Page just like you always do. (Did I lose you? Click these links if you need help with basic HTML or CSS). When you’re done, continue to the next step.

Alright, here comes the cool part. At this point, you’ve got a template that all the pages in your website will use. All you have to do now is determine what sections of template will change. Most often, this will be a “content” section the <head> section. In these sections, we are going to apply a <asp:ContentPlaceHolder /> control.

The <asp:ContentPlaceHolder /> control is a way to tell a web server to look in another place for a specific bit of content. In this case, we’re going to store the things that change, such as content and <head> information in another file.