I am currently busy re-designed a web site for a company using the "Publishing Feature" in Sharepoint that will be hosted on the Internet. This process is going to keep me busy for a couple of months and I am learning a lot about publishing web sites through Sharepoint. One of the most critical things that you need to learn is the ability to insert the "Content Placeholders" required by Sharepoint into a normal web page and then converting that to a "Master Page".

The unique challenge that Sharepoint causes most IT companies is the fact that it is a "Content Management" tool and not a web design tool and it takes more than a tool to design a web site. If you actually sit down and think about designing a web site in Sharepoint, there are a number of skills required:

• DBA for SQL Server
• Network Engineer for IP, DNS, Firewall.
• Sharepoint Architect/Consultant for design and Implementation.
• Web Designers for look and feel.
• Content Managers to upload the content.
• Project Managers to organize everything.
• Users/Testers to verify the solution.

I am not saying that each of the job roles I defined above is a separate person, but in a lot of instances they might be. Being a technical person myself, I will deploy Sharepoint and Architect the design, but do not ask me to design a "funky" looking web page. The problem expands in the fact that "Web Designers" refuse to use Microsoft tools as they all have their preferences like "Dream Weaver" , "Adobe Flash", PHP, etc. I believe that "Share Point Designer" is a very good tool, but I seem to be in the minority. So where does that leave us?

The only solution I found that works practically in the industry is the following:

• "Web Designer" will design the "Look and Feel" using whatever tools they prefer as long as the output is HTML.
• "Content Manager" will create a new "Publishing site" in Sharepoint using the HTML and insert the content placeholders required by Sharepoint using SPD.
• The new "Web page" will be converted to a "Master page" and uploaded to Sharepoint.
• New "aspx" pages will be derived from this "Master Page" to have the same look and feel.

The bullet points above basically outline what I will be explaining in this blog. At this point I am making the assumption that the "Web Pages" have already been designed and we are going to continue by inserting the placeholders using SPD.

Deriving a New "Master Page" from a HTML Page

I am going to start this section by showing you how to rip and entire page with content from an Internet web site and saving it into "Sharepoint Designer". Once we have done that, we will convert the page into a "Master Page".

The first step is to launch and instance of SPD and select "New -> Web Site" from the file menu.

The dialogue box that opens will then provide you with an option called "Import Web Site Wizard". Select this option and then select "OK". This action will then launch the wizard.

The first page of the wizard provides you with a number of options that allow you to import a web site using different protocols. In this particular example the web site is located on the Internet and therefore I will be using HTTP to import it into the solution. Once you have define the URL, select "Next" to continue.

The second page is where people get confused. The Web location that the wizard is prompting you with is going to be located on your local machine. This is purely for testing purposes and this will not be an "Sharepoint Enabled" site, so do not attempt to test it here later and wonder why it is not working. This also requires you to be running a local instance of IIS, so ensure that you have done this before attempting the steps in this blog. Click "Next".

The third page in the wizard is asking you to limit how much information you will be pulling from the web site that you are referencing. It will default to the "Home" page with content, but it does allow you to go deeper into the site if required. Keep the amount of disk space required in mind. In this case we only require the "Home Page" as we are going to convert it into a "Master Page". Click "Next".

The final page of the wizard is purely a confirmation before initiating the process. Click "Finish" and wait.

The wizard will now import all the HTML, images, script files, etc. as used by the web site that you are referencing and add it to you local copy. This will now be available in SPD for editing and should look something like the image below.

There are a couple of interesting things to note at this point:

• In the "Folder List" a number of additional folders have been created that duplicate what was on the web site and contain the content as referenced by the "Home Page. There will be folders like CSS, Images, JS and a couple of others.
• The "Home Page" is sitting in the root of the site as "Default.htm". This is the page that we will be converting to a master page.

The "Default.htm" page can be converted to a "Master Page" by merely changing it's file extension.

Of course this does not really make it a "Master Page" as we still require "Content Placeholders", but we will fix that problem later. We first need to create a test site in Sharepoint.

 Setting up a "Test Site" in Sharepoint:

The feature in Sharepoint that allows us to use "Content Placeholders" is called the "Publishing Feature". This feature can be enabled at "Site Collection" and "Site" level. The easiest way to do this is merely to create a new "Publishing Site" or "Publishing Portal" in Sharepoint and use that as the testing site. I already have a "Site Directory" setup so I will create it from there.

Select "Create Site" from the "Site Actions" menu or create a new "Site Collection" using the administration console.

Give the site a name and then select one of the publishing templates that are available as standard in MOSS. This does not work in WSS as the publishing feature was actually migrated from a previous MS product called "Content Management Server" and MS needs to make some money on this.

Now that the test site has been created, we need to finish the "Master page" we started with, but where do I find these content place holders?

Adding the "Minimal Master Page" to the Sharepoint Designer Project:

Quite some time ago, I  was struggling with the "Default.Master" that comes with Sharepoint, trying to pull it apart. After a couple of frustrating hours I gave up and started searching the Internet for a easier way to do this. I stumbled upon an article on the MS site that gave me some ideas and I even wrote a blog about it.

I revolves around the concept of an "Minimal Master Page" that has everything stripped out of it except the bare minimum of placeholders that Sharepoint will expect. In that blog I explain how to add a new "Master Page" to a SPD project and how to add the content placeholder to it. You can find the hyperlink in this paragraph and at the bottom of this blog.

To continue the process in the rest of the blog I am going to assume that you have read this blog and added the "Minimal Master" page to the current project.

If you look at the "Minimal Master" page in the image above, you will note that there is almost no HTML in that page and the "Content Placeholders" are stacked neatly below each other.

The next part of the project will be the process of moving the placeholders from the "Minimal Master" page into our new derived "Master Page".

Moving the "Content Placeholders" into the new Master:

Unfortunately this process is not as easy as it sounds and the best way to do this is in the "Code" view of the page and not using the GUI interface of SPD. I have broken the various HTML pieces into sections and I will explain how to move them piece by piece. This might take you a couple of attempts depending on the complexity of the derived "Master" page, so just be patient. All the example HTML section will be copied from the "Minimal Master" and pasted into the "New Master"

The first part that we need to move is the reference section that refers to all the Sharepoint assemblies and controls.

This section of the HTML code must be pasted right at the top of your "New Master" page. It has to be above the "<HTML>" tag.

The second slice of the HTML must be placed below the "<HTML>" tag. This starts the "Web Part Manager" in the Sharepoint site that allows web parts to function.

The third slice of HTML must be placed below the "<Head>" tag of the new page. This placeholder is used for the "Title" of the site.

The fourth slice of HTML places a "<Form>" tag section inside the "<Body>" tag of the new master. Also note that a "Java" script needs to be referenced inside the "<BODY>" tag itself at the top. I do not have an image of it, but you will see it in the "Minimal Master" page. This section will generate the additional placeholders required by Sharepoint. You can place it anywhere in the "<Body>" tag, but I prefer placing it at the bottom so that the placeholders are out of the way and I can move them into place later.

Now that the "New Master" page has been built, we need to publish it to the test Sharepoint site.

Publishing the "New Master" page to the test site:

To publish the "New Master" page from our local site to the test site, we need to use the publishing feature built into SPD.

This can be done by selecting the "Publish Site" option from the "File" menu in SPD.

The corresponding dialogue box that opens allows you to publish the current site content to another location. In our case that would be the "Test" site we created earlier in Sharepoint. Select the option "Sharepoint Services", type in the URL to the Sharepoint site and select "OK".

This action will then open a split window in SPD showing the "Local Web Site" on the left and then "Remote Sharepoint Site" on the right. It now becomes a simple matter of using the arrows in the middle to move the content from the one site to the other, but I will give you some advise:

• Rename you "New Master" page to something other than "Default.master". If you do not do this, you will end up overwriting the "Default.master" page in the Sharepoint site and this will cause other problems.
• Publishing sites store all their pages in a folder called "Pages". Move your pages into this folder on the remote site otherwise you will note be able to see it.
• Remember to move all the dependant folders like "Images", "CSS", "JS" with your pages.
• You can also use "Drag and Drop" capabilities to move things around.
• Remember the relative paths between your pages and the content so that the links are not broken.

Now that the "New Master" page has been published, we still need to create a content page from the "Master" before we will have anything to view.

Create a new "Content Page" from the "Master Page":

Master pages can not be displayed directly in the browser as they are only templates for "aspx" pages. This therefore requires us to derive a content page from the new "Master Page". To do this, launch a new instance of SPD by selecting "Open Site" from the file menu in SPD and then selecting the URL of the "Test" site we created earlier in Sharepoint.

Navigate to the "New Master" page we published earlier and "Right Click" on it. One of the options that will appear on the drop down menu is "New from Master Page". Select this option.

This action will derive a new "aspx" from the master page and they will look identical. There are only one or two things left to do before we can view the result.

• Save the new "aspx" page and call it "Default.aspx".
• Ensure that you either save or move this new page to the "Pages" folder.
• Save the entire solution.

Now it is time to view the result of all this effort. Open your browser and navigate to the URL of the Sharepoint we used for testing. Scroll down to the bottom of the page.

You will notice that the "Switch Account" and "Site Action" components are now available in the bottom left hand corner. If you did not receive any errors and you can view these components, then your site is now Sharepoint enabled. The other placeholders are invisible, because at this point in time, they have not content to display.

The next thing that needs to be done is to move the content placeholders to the correct areas in the page, but that is a blog for another time. I hope you found this blog useful and good luck with your publishing sites.

Related Blogs:

Minimal Master page in Sharepoint Designer

SharePoint default.master page placeholders

Access Denied on a Sharepoint Site when editing Master Pages