Designing your Web site for easy maintenance

August 2002

By David Berry

Applies to
Microsoft FrontPage® 2002

An important goal when building your Web site should be to automate the process as much as possible so that the site is easy to maintain and update. Good site design practices can save you hours of work later.

Good Web site design doesn’t just mean good layout and useful content. It also means designing your site so that it’s easy for you or a colleague to maintain. This article will discuss some of the features available in the Microsoft FrontPage 2002 Web site creation and management tool to make your job easier when it comes time to update your site.

Most small businesses have only one person working on their Web site (and it's usually in addition to his/her other responsibilities), so you want to set up your site so that it’s easy to maintain and keep content fresh. The built-in components of FrontPage—such as templates, included pages, and shared borders—as well as style sheets, good directory structures, and other techniques make it easy to add pages or update content.

Setting up a good directory structure

Taking the time to map out a good site design before you start developing your site can save you hours of work later when you need to update a file or add new content.

Setting up your directories

Good directory structure makes it easier for you to segment your site so that you or a coworker can quickly find the files you need to update. For example, files that are used throughout the site may be kept in a directory called shared or global, and images should all be kept in the images directory. Each section of your site, such as current news, should be kept in its own folder as well.

Using subwebs

In FrontPage, you can easily convert any folder in a Web to a subweb. Because each subweb can have its own set of permissions for who can author, browse, or administer it, you can set up individual subwebs with different levels of permissions and different groups of users.

For example, you might set up different subwebs for marketing and for human resources. Within the human resources subweb, you might have different subwebs with different permissions for job postings, employee records, and the employee handbook. Only recruiters could update the job postings subweb, but everyone in the company could browse it. Only human resources managers could browse and author the employee records subweb, while everyone in the company could browse (but not author) the employee benefits subweb.

 Warning   Do not convert the root folder (for example, C: or D:) of your computer's hard disk to a Web. Doing so may render your hard disk unusable and could also pose a security risk.

You can create a subweb using the New Page or Web task pane, or by converting an existing folder into a subweb. To convert a folder to a subweb, go to the Folder List, right-click the folder you want to convert to a Web, and click Convert to Web on the shortcut menu. You can also select Add to current Web when you choose an Empty Web or a page from the Web Site Templates in the New Page or Web task pane.

When converting a folder to a subweb, there are a few things you should be aware of:

  • Pages in the subweb that included other files that were originally in the root Web may not be updated when those files change.
  • Hyperlinks on navigation bars can be linked to pages outside the new Web.
  • The larger the contents of the folder, the longer it will take to convert the folder to a subweb. For a large folder, this process could take several minutes.

Subwebs make it easier for you to let authors work on their content only without having access to the main site.

Templates make your life easier

The hardest part of Web development is getting the design of the site built. Once you have your basic design, which normally consists of a header, footer, menu/navigation, and content, you can use a template to quickly start a new page and add new content. There are several ways you can set up templates for your site.

Use the built-in templates provided with Microsoft FrontPage

  1. On the File menu, point to New and click Page or Web.
  2. In the New Page or Web task pane, under New from Template , click one of the choices that are provided.
  3. Click the tab for the template you want to use, click the template, and click OK. FrontPage will open a new page based on the template that you selected.

In addition to the templates that come with FrontPage, you can select a page that you’ve created to use as the template for your site. To do this, create a page that will contain the common design elements for all the pages in your site. Save the page with any name you like; I prefer Template.htm. The next time you want to create a new page for your site, in the New Page or Web task pane, click Choose page under New from existing page.

Finally, when you first open FrontPage, you’ll notice that a blank page called new_page_1.htm has been created for you. This is the default template page. You can edit this page by changing the normal.htm file in the C:\Program Files\Microsoft Office\Templates\Pages\normal.tem directory. Once you’ve done that, this is the page you’ll see whenever you open FrontPage or start a new blank page by clicking New and Blank Page.

Commenting your code

In your business, you may have other people using your templates to add new pages to your Web site. By adding comments to your pages and code, you can let other developers see exactly where you want them to add content. Comments are very easy to add in FrontPage.

To add a comment

  1. Click where you’d like the comment to appear.
  2. On the Insert menu, click Comment.
  3. Type your comment in the Comment dialog box that appears and click OK.

Once you’ve created a comment, you will see purple text on the page that says Comment: Your comment text. This text will appear on your page in Page view but will not appear when you publish your Web site. If you switch to the HTML pane, the code will look like this:

<!--webbot bot="PurpleText" PREVIEW="Your comment text" -->

Using global elements

As I mentioned, one of the most important steps in designing a Web site is prior planning. Years ago, when I first started designing sites for people, I would create the design, save one page as a template, open my template, add new content, and save it under a different name until I had all the pages in the site completed. This was fine until the owner of the site wanted to add a change, like a new menu item, to the site. Then I would have to open each and every page to add the change. This was okay for small sites, but I maintained a site that had more than 800 pages, and it took a long time to redesign each page.

That's when I discovered the included pages component of Microsoft FrontPage.

Included pages

A typical Web site consists of four basic parts: header, footer, navigation menu, and content. The header, menu, and footer are generally the same throughout your site, and they can change often. To cut down on the time it takes to make updates to multiple pages on your site, or global updates, you can use "included" pages.

Included pages allow you to display an HTML or ASP page on another page in your Web, allowing you to maintain separate pages. For example, to display a copyright notice on several pages in a Web, create one page that contains the copyright notice and include that page on the other pages. When you update the copyright notice, you simply update that one page; all other pages that include the copyright page will be updated automatically.

To add an included page

  1. In Page view, click where you want to include a page.
  2. On the Insert menu, click Web Component. In the Component type list, click Included Content.
  3. Double-click Page.
  4. In the Page to include box, type the relative URL of the page to include, or click Browse to find the file.

If you click on the HTML tab at the bottom of the screen, you can see the HTML source code for the included page you just inserted, you'll see a line that looks like this:

<!--webbot bot="Include" U-Include="myfile.htm" TAG="BODY" -->

Using included pages will greatly speed up the time it takes to update your Web site. By using the include pages component of FrontPage, you can quickly update elements of your entire site by simply changing a single page (such as the copyright date in your footer).

Style sheets

Cascading style sheets give you more control over the appearance and presentation of your pages. By using cascading style sheets, you can extend the ability to precisely specify the location and appearance of elements on a page and create special effects. You can also make your site more accessible for visitors with specialized browsers or output devices.

There are three ways you can use style sheets on pages in your Web:

  • Link a page to an external style sheet.
  • Create an embedded style sheet on a page.
  • Apply inline styles to individual page elements.

Each method has advantages and disadvantages.

Use an external style sheet when you want to apply the same styles consistently across some or all pages in your Web. By defining styles in one or more external style sheets and linking them to pages, you ensure consistency of appearance throughout those pages. If you decide to change a style, you need to make only one change in the external style sheet and the change will be reflected in all of the pages linked to that style sheet. Typically, an external style sheet uses the .css file name extension, such as mystyle.css.

If you link a page to an external cascading style sheet in your Web, the styles in that style sheet can be applied to any element on the page. Styles from a linked external style sheet are displayed in the list of available styles in the Style box.

  1. In Page view, open the page you want to link to the style sheet.
  2. On the Format menu, click Style Sheet Links.
  3. In the URL list, click the style sheet you want to link to the page.

If you look at the code for the style sheet in HTML view, it will look like this:

<HEAD>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</HEAD>

Use an embedded style sheet when you want to define styles for the current page only. An embedded style sheet is a type of cascading style sheet that's "embedded" within the <HEAD> tags of a page. Styles in an embedded style sheet can be used only on that same page. An embedded style sheet would look like this:

<HEAD>
<style>
<!--
a:link { text-decoration: none: }
-->
</style>
</HEAD>

Use inline styles to apply cascading style sheet properties to individual elements on a page. An inline style looks like this:

<p >

If a page is linked to an external style sheet, the embedded or inline styles that you create for that page will either extend or override properties specified in the external style sheet.

Shared borders

Another way of maintaining shared content across all of your pages is to use shared borders.

  1. In Page view, click Format and then click Shared Borders.
  2. In the Shared Borders dialog box, choose to insert Top, Left, Right, and Bottom borders to all pages in your site or just to the current page.
  3. Click OK.

To add content to these pages, choose Folders view and edit the top.htm, right.htm, left.htm, and bottom.htm files in the _borders folder. (This is a hidden folder in your Web site. If you don’t see the folder, click Tools, click Web Settings, and then click Advanced. Select Show hidden files and folders.)

While shared borders can provide a quick way to include pages to your entire site, you may find that they aren’t as flexible as the included content component.

Themes

Another way to quickly apply a common look or design to your Web site is to use themes:

  1. On the Format menu, click Theme.
  2. Click a theme from the available list, and choose whether you’d like to apply the theme to all pages or just selected pages.
  3. Click OK, and the theme will be applied to your Web site.

You can change a theme or create your own theme by clicking the Modify button in the Themes dialog box when you click Format, and then click Theme on the menu bar. Once you’ve modified a theme, click Save or Save As to give the new theme its own name. You can find more information about themes as well as view a sample of the different themes available with FrontPage at:

Conclusion

As you’ve seen, Microsoft FrontPage comes with a wide variety of tools and features to make it easier for you to design and maintain your company Web site. By using some or all of the components and techniques mentioned in this article, you’ll be able to quickly and effectively organize, maintain, and add new content to your site.


David Berry has an extensive background in technical and IT skills, Web site design work, application development, and technical support with over 17 years of diverse experience with government and federal agencies as well as competitive business markets. He is also a Microsoft Certified Professional and has been a Microsoft FrontPage Most Valuable Professional (MVP) since 1999. David co-authored Microsoft FrontPage 2002 Unleashed, Microsoft FrontPage 2000 Unleashed, and Microsoft Windows 2000 Professional Unleashed.