Eric Hartwell's InfoDabble

  
Welcome to Eric Hartwell's InfoDabble
About | Site Map
Home Tech Notes Apollo 17: Blue Marble Apollo 17 Flight Journal   Calendars About me  

HowTo: Integrate FrontPage Webs With Community Server

Look and Feel

By Eric Hartwell - last updated March 7, 2006

While Community Server 2.0 is an excellent knowledge management and collaboration platform, it's not designed to integrate with existing web sites created with a traditional website builder such as FrontPage. Some parts of a web site, such as this Tech Notes section, for example, are better suited to a more traditional design with static HTML pages. 

I wanted my web to use the Community Server 2.0 look and feel, while working within the limitations of FrontPage 2003.

This tech note documents my progress using FrontPage shared borders, style sheets, a bit of JavaScript, a bit of brute force, and a roll of duct tape. The whole thing can be saved as a FrontPage Page Template.

Shared Borders

FrontPage, uses Shared Borders, to automatically apply one or more common border elements to pages in your Web. For a good explanation of the details, see Microsoft's Best Practices for Working with HTML Code in FrontPage 2002.

When inserting a shared border to a Web page, FrontPage creates a folder on the Web root called _borders, and places HTML files (Top.htm, Right.htm, Bottom,htm, and Left.htm) in this folder, corresponding to the top, right, bottom, and left shared borders. These are full HTML files, including <html> and <head> elements. FrontPage automatically extracts the inner HTML from the <body> elements and uses it as the contents of the border when it publishes each page. It does not use server­side includes.

When you use any shared border elements, FrontPage renders the entire page as a table. With a header and footer, it looks like this:

<html ...
<head> ... </head>
<body>
<!--msnavigation--><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td>

<body> contents of /_borders/Top.htm
</td></tr>
<!--msnavigation--></table>
<!--msnavigation--><table dir="ltr" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><!--msnavigation--><td valign="top">

<body> contents of the current page
<!--msnavigation--></td></tr>
<!--msnavigation--></table>
<!--msnavigation--><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td>

<body> contents of /_borders/Bottom.htm
</td></tr>
<!--msnavigation--></table>
</body>
</html>

For this site, I used the top border for the page header and tab bar, and the bottom border for the page footer and copyright notice.

I opened a typical Community Server page, clicked on View Source, then copied the raw HTML into the BODY of the Top.htm and Bottom.htm files. [Note: It helps if you create a style sheet link in the Top and Bottom pages. Even though FrontPage ignores the header when it builds the final page, you can get a better feel for how it will look.]

Styles

I tweaked the Community Server styles so they work with FrontPage. I created a single style sheet, WebStyles.css. 

<STYLE TYPE="text/css" MEDIA="screen">
<!--
@import url(cs2/Themes/basic blue/style/Common.css);
@import url(cs2/Themes/basic blue/style/Blog.css);
@import url(cs2/Themes/basic blue/style/Home.css);

The first section uses @import to include the basic Community Server style sheets. [Note: for some reason <STYLE TYPE="text/css" MEDIA="print"> gets used regardless of MEDIA type so I deleted it.]. For this to work, the entire body of the content page must be inside <div class="CommonContentArea">.

.CommonContentArea
{
	margin: 0px;
	padding: 0px 15px 0px 15px;
}
.CommonTitleBar
{
	padding-bottom: 0px;
}

The next section tweaks some of the settings to eliminate spaces between the sections. In a normal CS page, it's all inside the same DIV, but in FrontPage any gaps show the page background.

body, p, td, li, dt, dd	{font-family: Arial, Helvetica, sans-serif; font-size: 12px}
pre		{font-family: Courier New, Courier, fixed; font-size: 10px}
.caption	  	{font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 9px}
.codeprop	 	{font-family: Arial, Helvetica, sans-serif; font-size: 11px; margin-left: 30}
.codefixed		{font-family: Courier New, Courier, fixed; font-size: 10px; margin-left: 30}
.subhead		{font-family: Arial, Helvetica, sans-serif; font-size: 16px}
-->
</STYLE>

The final section contains basic HTML styles, since Community Server uses DIV and SPAN for formatting.

Navigation

The standard Community Server tab bar is built as a table. It's easy to add columns with manually set links. I created a tab for each section of my site, where each section has its own subdirectory. I identified each column with a unique ID.

<td id="techTab" class="CommonSimpleTabStripTab" onmouseover="tabOver(this);" onmouseout="tabOut(this);" nowrap>
<a href="http://ehartwell.com/TechNotes/index.htm">Tech Notes</a>
</td>

Normally, when Community Server renders a page, it identifies the current section tab with a different class, so it can be rendered differently. The selected tab is identified by <td class="CommonSimpleTabStripSelectedTab"  instead of <td class="CommonSimpleTabStripTab".

How do we get a single, HTML top border to show the current section of the site?

Since each section has its own subdirectory, all it takes is a little JavaScript to look at the current URL and change the class name of the associated tab:

<script language="javascript" type="text/javascript">
strUrl = new String(document.URL)
if         (strUrl.search("About") != -1)        { document.getElementById("aboutTab").className="CommonSimpleTabStripSelectedTab"}
else if (strUrl.search("TechNotes") != -1) { document.getElementById("techTab").className="CommonSimpleTabStripSelectedTab"}
else                                                           { document.getElementById("homeTab").className="CommonSimpleTabStripSelectedTab" }
</script>

This code can be placed inline in /_borders/Top.htm right after the tab bar table is defined.

A similar approach can be used for a double level tab bar as used in the Apollo 17 subsite.

Page Template

To summarize, each "skinned" FrontPage page needs the following custom elements:

  • A link to the WebStyles style sheet: <link rel="stylesheet" type="text/css" href="/WebStyles.css">
  • FrontPage code to include the top and bottom borders: <meta name="Microsoft Border" content="tb">
  • A wrapper DIV for the page body: <body><div class="CommonContentArea"> .... </div></body>

The whole thing can be wrapped up in a custom Page Template.

  1. In FrontPage, create an empty page with the basic header, footer, style sheet, and body DIV.

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="/WebStyles.css">
    <meta name="Microsoft Border" content="tb">
    </head>
    <body>
    <div class="CommonContentArea">
    </div>
    </body>
    </html>
     

  2. Click File, Save As...
     
  3. In the Save As dialog box, click FrontPage Template (*.tem).

When you want to create a new page, click File, New..., then select More page templates... and choose your site template.

References

Revision History
  • 20060307 - Initial version
Creative Commons License

Unless otherwise noted, this work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License

 

Site Map | About Me