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
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.
- /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:
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”.
Select Master Page. Name it “default.master”, and click “add”.
2.2 » Delete the Default Code
Highlight the DOCTYPE tag and everything below it, then delete it.
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.
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”.
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”.
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”.
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.
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.
Create a new Web Form named “Default.aspx”. Make sure to check “Select Master Page”.
When prompted, select our default.master file and click “ok”. This will give you a new webform preformated for our master page.
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.
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.
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.
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”.
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!
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.