Recipe 3.5. Expanding Your Web Site


Problem

You need to add pages, a new section, or a distinct subsite to your web site.

Solution

You should design your web site only once, not each time you create a new page. Follow these code and site management techniques to make sure every page on your site has a consistent look and feel:


Separate shared code blocks into include files.

When you save common elements of your site design as include files, you can be sure that the content, wording, and links are the same on every page where that include file appears. For example, if you put all the code for your primary navigation in an include file called primnav_inc.php, then a change to your main navigation requires editing just one file, rather than every page on your site. You can follow the same strategy for other discrete blocks of code, such as the page header and logo, other navigation blocks, and the page footer.


Isolate content from display rules using CSS stylesheets.

In the days before reliable browser support for (and widespread use of) stylesheets, web designers would specify background images, link colors, font sizes, and other display characteristics in the individual tags on every page of a web site. When an inevitable change became necessary, every page on the site had to be edited and re-uploaded to the web server. The process is tedious and introduces the risk that an inadvertent change might mangle the code. Putting the display rules in every page also increases the file's size.

Separating content from display makes sitewide changes easier, and also allows you to apply different styles to the same code used in different areas of your site. For example, you might want to create a subsite or microsite to promote a particular part of your online endeavors. The design of a subsite should be distinct but related to the design of your main site. The subsite also should retain at least a small part of the main site's global navigation, such as the logo, links to the main home page, site map, and site-wide search. By saving the global code in an include file, you can give it two different design treatments on the main site and subsite using two different stylesheets.


Learn and use a site management application's template system.

With web design applications such as Dreamweaver, GoLive, and FrontPage, you can create page templates that prevent unwanted changes to common code. When you create a new page based on a template, the unique content for that page can be added to only one of the template's editable sections. Used in combination with include files and stylesheets, templates ensure that pages remain consistent, especially when a group of site editors shares responsibility for adding new pages and maintaining a web site.

Discussion

Consistency is a key trait of a successful web site. It encourages visitors to trust your web site and facilitates a smooth, efficient browsing experience. Even subtle changes to the color, position, size, or functionality of design elements that appear on every page force a visitor to spend extra time trying to decide if the page he's viewing has the information he's seeking. Visitors should have to learn the design and navigation scheme of your site only once. Then, on that first and subsequent visits, your site layout should serve as a constant background that frames the content that deserves your visitors' attention.

See Also

Recipe 1.4

Recipe 4.4

The CSS Zen Garden (http://www.csszengarden.com) provides a powerful demonstration of using different stylesheets on the same content. Many other sites provide CSS-based layout templates for free, including the Layout Reservoir (http://www.bluerobot.com/web/layouts/), Intensivstation (http://intensivstation.ch/templates/), and inknoise (http://www.inknoise.com/experimental/layoutomatic.php).



Web Site Cookbook.
Web Site Cookbook: Solutions & Examples for Building and Administering Your Web Site (Cookbooks (OReilly))
ISBN: 0596101090
EAN: 2147483647
Year: N/A
Pages: 144
Authors: Doug Addison

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net