As you start to build bigger and more elaborate Web sites, you'll no doubt discover one of the royal pains of Web site design: getting a common ingredient to appear on every page.
For example, you might decide to add a menu of links that lets visitors jump from one section of your site to another. You can place these links in a table or a <div> element (two techniques shown in Chapter 9) to get them in the right position on a page, but either way there's a problem—you need to do a fair bit of copying and pasting to display the menu on every page of your site. If you're not careful, one page can end up with a slightly different version of the same menu. And when you decide to make a change to the menu, you'll face the nightmare of updating every one of your pages. Web creators who try this approach don't get out much on the weekend.
There's no simple solution to this problem, but crafty Web designers can use a variety of techniques to get around it:
Server-side includes. A server-side include is a command that injects the contents of one XHTML file inside another. This lets you carefully separate a block of XHTML content (for example, a menu) and reuse it in multiple pages. However, there's a significant caveat—the XHTML standard doesn't support server-side includes on its own, so you can use this feature only if you have the right type of Web server.
Frames. Frames are a sometimes-controversial XHTML feature that let you display more than one Web page in the same browser window. Although frames work well and have been used for years, they're distinctly unpopular today thanks to a variety of minor quirks (discussed on Creating a Frames Page).
Page templates. Some high-powered Web page editors (namely, Expression Web and Dreamweaver) include a page template feature. You begin by creating a template that defines the structure of your Web pages and includes the repeating content you want to appear on every page (like a menu or a header). Then you use that template to create all your site pages. Here's the neat part: when you update the template, your Web page editor automatically updates all the pages that use that template.
In this chapter, you'll see how you can use these techniques to tame large Web sites, and you'll consider their risks and rewards.
By this point, you've amassed a solid toolkit of tactics and tricks for building Web pages. You learned to polish your pages with modern fonts and colors, gussy them up with a trendy layout, and add images and links to the mix. However, as you apply these techniques to a complete Web site, you'll run into some new challenges.
One of the first hurdles you face when you go from one Web page to a dozen or more is how to make them all consistent. Consistent formatting is relatively easy—as long as you carefully plan the structure of your Web site and use an external style sheet (see Chapter 6), you can apply a common look and feel to as many pages as you want.
But style sheets have their limits. They can't help you if you need to have the same content in more than one page. That's a problem, because modern Web sites have specific elements that repeat on every page, like a header and a set of navigation buttons (see Figure 10-1).
So how do Web designers create multipart pages? For large sites, individually pasting the same bit of XHTML into every page just isn't an option—it would be a management disaster. But popular Web sites don't seem to have a problem dealing with repeated content. No matter what product you view on Amazon, for example, you see the familiar tabbed search bar at the top. No matter what vacation you check out in Expedia, you keep the same set of navigation tabs. That's because Amazon and Expedia, like almost all of the Web's hugest and most popular sites, are actually Web applications. When you request a page from one of these sites, a custom-tuned piece of software creates the right XHTML page on the fly.
For example, when you view a product on Amazon, a Web application reads the product information out of a gargantuan database, transforms it into an XHTML page, and tops it off with the latest version of the search bar. Your browser displays the end result as a single page. This technique avoids the hassle of maintaining the same content (in this case, the search bar) in thousands of different files.
Figure 10-1. Every page on www.expedia.com is a multipart page. Each one stitches together several pieces of information, including navigation tabs (which are always the same, no matter where you go on the site) and content (which varies from page to page). This sort of design crops up on sites throughout the Web.
Although Web applications offer an elegant solution for creating multipart pages, it's a dead end for the casual Web-head. To build and maintain a Web application of your own, you'd need top-shelf programming skills and a team of IT experts to help you out. So unless you're ready to start a new career as a hard-core code jockey, you need to compromise.
Note
Don't rush off to pick up a degree in computer science just yet. Programming is a completely different cup of tea than writing XHTML. Unless you have a lot of time to spare for removing cryptic errors from computer code (a process known as debugging) and even more time to put them there in the first place (politely known as programming), you're better off using the techniques described in this chapter.