Search This Blog

Importing the HTML

Your new master page file is ready for build-out. You can copy code from your HTML template (on your local system) into the new master page. HTML comments in the master page will help guide where the code from your HTML template should go.

Open your new master page in code view in SPD and follow these step-by-step tips...




















Incorporating the HTML - <body> tag

Normally styles for the body tag would be set in the CSS file. However, in MOSS the WYSIWYG content editor uses styles from your CSS file for its display. This causes problems if the editor window picks up a background color or other properties from your body style.

Therefore it is best to hardcode any body styles directly into the master page <body> tag. For example:

<BODY onload="javascript:if (typeof(_spBodyOnLoadWrapper)
!='undefined') _spBodyOnLoadWrapper();"
style="background-color:#CCCCCC;margin:0px;">


































Incorporating the HTML - Header to Main Navigation

  1. In your master page file, scroll down past the Accessibility Feature and Upper Bar Code. Those areas should be left intact.
  2. Copy the code in your HTML template file from the line immediately after the <body> tag to the line above where the main navigation will go.
  3. Paste the code into the master page where shown below:
<!-- begin MAIN LAYOUT -->
     <wssuc:Welcome id="IdWelcome" runat="server" EnableViewState="false">
     </wssuc:Welcome>
     <Sharepoint:DelegateControl ControlId="GlobalSiteLink1" Scope="Farm" runat="server"/>
    <Sharepoint:DelegateControl ControlId="GlobalSiteLink2" Scope="Farm" runat="server"/>
     ((PASTE CODE HERE))
<!----begin TOP NAVIGATION ---->

You may delete the Welcome, My Site, and My Links code if not using them.





























































Incorporating the HTML - Between Main Navigation & Main Content Area


  1. Copy the code in your HTML template file from the line immediately after the main navigation to the line above where the main content area will go.
  2. Paste the code into the master page where shown below:
           <!---- end TOP NAVIGATION ---->
          ((PASTE CODE HERE))
          <!---- begin MAIN CONTENT AREA ---->
                    <A name="mainContent"></A>
                    <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server"/>
         <!---- end MAIN CONTENT AREA ---->












































Incorporating the HTML - Below Main Content Area Through Footer

  1. Copy the code in your HTML template file from the line immediately after the main content area down to (and including) the footer. DO NOT include the closing </body> or </html> tag.
  2. Paste the code into the master page where shown below:

<!---- begin MAIN CONTENT AREA ---->
          <A name="mainContent"></A>
         <asp:ContentPlaceHolder id="PlaceHolderMain" runat="server"/>
<!---- end MAIN CONTENT AREA ---->
(( PASTE CODE HERE))
<!-- end MAIN LAYOUT -->











































































  • Your basic custom master page is now complete. You may also add additional components into your code such as custom Content Place Holders.
  • You must check in your new master page file before it can be used in the website.
  • You will assign your master page and CSS to the website via the Site Settings in a later step.
  • First you will need to create one or more page layouts. Please continue in the next series for instructions.



























Subscribe to: Posts (Atom)