Show All

Hide All

This article was excerpted from Microsoft® Office FrontPage® 2003 Inside Out by Jim Buyens. Visit Microsoft Learning to buy this book. View other articles written by Jim Buyens.

This is the third in a sequence of three articles excerpted from Chapter 4, "Planning and Organizing FrontPage-Based Web Sites."

See links to all articles in this sequence

In this article

Page planning basics

Achieving effective page layout

Page planning basics

Given a mission, an audience, a content plan, management go-ahead, a visual concept, and knowledge of what HTML can and cannot do, you are finally ready to design pages in detail. To at least some extent, this will probably involve storyboards and sketches.

The classic storyboard consists of index cards pinned to a wall. You write up an index card for each Web page, annotate it to indicate planned content, and then arrange all the cards in some kind of hierarchy or sequence. Web visitors will traverse the site along these sequences and hierarchies. Team members and your project sponsor will review the chart, suggest revisions, and someday pronounce it worthy of prime time.

Actual storyboards of this type are rare, but the concept is sound. Your storyboard might be notes on a yellow pad, an outline in a word processor, a preliminary set of Web pages containing only headings and hyperlinks, or even a Navigation view in FrontPage. No matter: The key result is a well-organized set of pages, not the method used to achieve it.

 Note   FrontPage Navigation view provides an excellent means to record and modify your storyboard electronically. Navigation view has the added bonus of building and hyperlinking your pages for you. Find links to more information about Navigation view in the See Also section, which is visible when you are connected to the Internet.

It is easy to go wild with menu structure. Visitors are unlikely to find pages more than two or three clicks away from the main page, however, so don't nest menus too deeply. Avoid long pages of hypertext links by using drop-down lists, option buttons, check boxes, and other HTML form elements. Together, a drop-down list of 10 product names and another with 4 kinds of information can efficiently support 40 menu choices.

You should also start sketching or drafting pages at this point. Identify each type of page you plan to use, and then make up a draft or template for each type. Identify changeable components that will exist on multiple pages — menu bars, signature blocks, contact names, and the like. Then plan site parameters and include blocks to support them. Accumulate pictures from stock collections, too. These are logos, icons, buttons, bars, and theme pictures that, if standardized, will help the site achieve a unified appearance.

Lengthy text, either as content or as HTML commands, is seldom the cause of excessive download times. Pictures, Java applets, and Microsoft ActiveX controls are far more often the culprits. As you plan your pages and accumulate your pictures, keep a rough total of download bytes for each type of page. There are no hard-and-fast rules on the size of Web pages, and this is less a consideration on high-bandwidth intranets than on public Internet sites that Web visitors access by dial-up. Most designers consider pages with more than 25,000 to 30,000 download bytes too large for dial-up Web visitors. This is equivalent to 15 to 20 pages of double-spaced plain text, or one uncompressed picture that is 170 pixels on a side.

A final bit of planning advice: You can have too much of a good thing. All Web sites are always under construction, so trying in advance to nail down every nit for every page is probably a futile exercise. If you try to plan too much detail, the site's rate of change will exceed the rate of planning. Don't let "paralysis by analysis" happen to you.

 Top of Page

Achieving effective page layout

The normal progression of topics on a Web page should be the same as that in your morning paper. For Western languages, this is top to bottom and left to right. Every Web page should have both a meaningful title and a meaningful heading. As the following illustration shows, the title appears in the browser's title bar, and the heading appears somewhere near the top of the page. The title serves to identify the page externally to processes such as FrontPage and to search engines such as Yahoo!, Lycos, AltaVista, and MSN Search. The heading immediately informs the Web visitor what content appears on the page. A visitor who has chosen a wrong link can immediately jump back to the previous page. Otherwise, the heading confirms that the visitor has arrived at the correct page. If the page is long, bookmark links should provide pathways to each major subsection, to avoid extensive scrolling (at least on the home page).

Experienced page designers often find HTML's weak page-layout features extremely frustrating. This reflects a fundamental conflict between the HTML goal of device independence and the artistic desire for precise control. This conflict isn't likely to subside any time soon, although FrontPage does support a number of recent HTML page-layout facilities:

• Alignment tags   The normal flow of HTML text is down the left margin, wrapping lines automatically when they reach the right margin, a hard-coded line break, or an explicit or implied paragraph ending. Pictures, Java applets, and ActiveX controls retain their relative positions within the HTML text.

  Implied paragraph endings occur in several situations:

  • Before and after tables
  • At transitions in paragraph style
  • Before and after numbered and bulleted lists

  Recent versions of HTML support attributes to left-align or right-align pictures and other objects, flowing text around them. A centering attribute centers the same kinds of objects, but no text flows to the right or left of the centered picture. Additional attributes align non-text objects vertically with the surrounding text flow. FrontPage supports all of these attributes.

• HTML tables   Originally designed to display tabular data, HTML tables have become one of the premier means to place items spatially on a page. Any time you want to draw an imaginary grid on a page and align items within it, an HTML table should be your choice.

• Cascading style sheet (CSS) positioning   This technology finally gives Web designers pixel-precise positioning and layering control over their work. FrontPage provides access to CSS positioning though the Position command on its Format menu.

• Frames   This feature provides a way to divide a Web page into tiled rectangles and to independently control the content of each rectangle. One Web page defines a frames page — an object that controls the number, sizes, and placement of the frames — while additional Web pages provide the content for each frame. Standard frames have visible borders between them and scroll bars for moving up, down, left, and right within each frame. Borderless frames have no visible borders and are simply page-layout areas that corral your text where you want it.

Find links to more information about placing and positioning text and other elements on a Web page in the See Also section, which is visible when you are connected to the Internet. You will also find links to more information about using FrontPage to create HTML tables, and about creating Web sites by using frames, in the See Also section.

 Top of Page

This is the last article in this sequence

About the author   Jim Buyens is a FrontPage, Web programming, and networking expert who has written several books, including Microsoft® FrontPage® Version 2002 Inside Out, Web Database Development Step by Step .NET Edition, Faster Smarter Beginning Programming, and Microsoft® Windows® SharePoint® Services Inside Out, all from Microsoft Press. Jim is a Microsoft Most Valuable Professional (MVP) who contributes extensively to the Microsoft FrontPage online communities. He currently develops Web-based business systems for the telecommunications industry.