blackstoneoffer

Converting an HTML page to an ASP.NET MasterPage

by Blackstone Media on Feb 6, 2009

This is something I’ve been meaning to post for a while now, just havent felt like puting the time in to go through step by step and produce a quality tutorial. Creating a Master Page from an HTML design is one of the first, and definitely one of the most important, steps to turning a good design into a functional website. This tutorial will outline creating the Master Page from an original HTML file, and then recreating the index page using the master page.

If you want to cheat, you can skip to the bottom and download the final version HERE.

1 » Get Organized

1.1 » Download Source Files

You can create a Master Page from any HTML file, as long as you have the CSS and images to go with it. I

downloaded “Shades of Gray” by Arcsin @ FreeLayouts.com. You can download the .zip file from my site HERE.

1.2 » Create a New Website

Open Visual Studio, using the file menu choose “New Website”. (Shift+Alt+N) You can save the project anywhere you like and name it whatever you want, but I saved mine to the desktop and named it “MasterPageTutorial”. This will create a new project for you and add some default files.

1.3 » Clearing Out the Debris

Now lets get rid of the stuff we don’t need. Delete the “App_Data” folder, Default.aspx, and Default.aspx.vb.

Note:If you chose C# as your programming language you won’t have a Default.aspx.vb file. Instead delete Default.aspx.cs. The programming language you choose will not affect this tutorial.

Your project should now only have a Web.Config file. Every ASP.NET website needs this file to run, it stores important information about your site for the server.

1.4 » Unpack Your Files

Open the .zip file you downloaded in step 1.1, and copy the following files into your project folder.

  • index3.html
  • default.css
  • /img/ (Entire Folder)

Note:If you are using your own files you won’t need these. Copy your files instead. Your home page HTML file, any css files, and any images.

If you’re following along your Solution Explorer should look like this:

Solution Explorer

Note:If you don’t see your files right away right click the project node and click “refresh”.

2 » Creating the Master Page

2.1 » Add a New Master Page

Right click the project node, and select “Add New Item”.

Add New Item

Select Master Page. Name it “default.master”, and click “add”.

Master Page Dialog

2.2 » Delete the Default Code

Highlight the DOCTYPE tag and everything below it, then delete it.

Delete HTML

2.3 » Copy the HTML Page

Open index.html (Your Home Page if you’re using your own files), select all, copy, then paste it into the default.master file. You can close the index3.html file.

2.4 » Add a ContentPlaceholder to the Head Tag

In the default.master file locate the the </head> tag. Just above it, but below the <title> tag we’re going to insert a Content Placeholder. Name the placeholder “head”. This can be useful if you have some pages on your site that require an extra .js or .css file that the rest of the site doesn’t need.

Head Content Placeholder

2.4 » Replace the Navigation

Locate the div tag with the class “nav”, select the whole div and delete it. Then add another Content Placeholder in it’s place. Name the placeholder “navigation”.

Nav Div
Navigation Content Placeholder

2.5 » Replace the Content

Now locate the div with the class “content”, select the whole div (collapse if needed), and delete it. Add another Content Placeholder in it’s place. Name the placeholder “content”.

Content Div
Content Placeholder

2.6 » Replace the Subnav

Locate the div with the class “subnav”, select and delete the entire div. (collapse if needed) Add another Content Placeholder in it’s place. Name the placeholder “subnav”.

Subnav Div
Subnav Content Placeholder

2.7 » Replace the Footer

Finally locate the 4 divs inside the div with the class “footer”, they will have the classes of “col3″, “col3center”, “col3″, and “bottom” respectively. Select them all, and delete them. Add another Content Placeholder in their place. Name the placeholder “footer”. Save and close the default.master file.

Footer Div
Footer Content Placeholder

Note:We normally wouldn’t create a content placeholder for a footer element, as it should be the same on every page. For this particular layout, however, I thought you may want to change the content on a per page basis.

3 » Recreating the Index Page

3.1 » Add a New Web Form

Right click the project node and select “Add New Item” again.

Add New Item

Create a new Web Form named “Default.aspx”. Make sure to check “Select Master Page”.

Web Form Dialog

When prompted, select our default.master file and click “ok”. This will give you a new webform preformated for our master page.

Web Form

3.2 » Copy the Navigation

Open index3.html, and locate the div with the class “nav” again. Select the whole div and copy it. Then paste it into the “navigation” content block in our default.aspx web form.

Navigation Content

3.3 » Copy the Content

In the index3.html file, locate the div with the class “content” again. Select and copy the whole div. Now paste it into the “content” content block in the default.aspx file.

Content

3.4 » Copy the Subnav

Back in the index3.html file, select and copy the div with the class “subnav”. Paste it into the content block named “subnav” in our default.aspx file.

Subnav Content

3.5 » Copy the Footer

Finally, copy the 4 divs within the div with the class “footer” in the file index3.html. The div classes will be “col3″, “col3center”, “col3″, and “bottom”. Paste them into our default.aspx file, inside of the content block named “footer”.

Footer Content

3.6 » View the Page

Now save default.aspx, and close all files. We’re done! If you right click the default.aspx page in your Solution Explorer and select “View in Browser” you can see that the page looks just like the one we started with!

View In Browser
Final Version

It may seem like allot of work to reproduce a page you already had created, but this will save you lot of time and frustration while doing maintenance. And it really makes creating additional pages much, much, much, much easier.

Download Final Version

  • http://www.blackstonemedia.net Ralph Severson

    Nice post Chris. We collaborated a bit about a few different ways to configure navigational elements. You stated that that was going to be your next tutorial. I look forward to it!

  • http://na tim

    Nice. This is one of the only posts on converting existing templates into masterpages.

    Everybody else shows you how to create one from scratch, but never converting from a css template. I’ve been dying for this info. Thanks for doing it.
    Tim

  • Abdul Majeed

    I want to open a HTML page in the contetntplaceholder of my master page…Is it possible??
    masterpage = Main.master
    ^ ^ ^ ^ ^ ^ ^ ^
    external HTML page = home.html

contact us

find out what Blackstone can do for you

Louisville 502.276.7921 455 South 4th Street, Suite 910
Starks Building
Louisville, KY 40202 directions
New York 212.951.0834 1 Rockefeller Plaza
11th Floor
New York, NY 10020 directions
Facebook Twitter Google+

no spam here. scouts honor.

Top