Web Development

  Homes arrow Web Development arrow Make Life Easier with Shared Page Elements
 Webmaster Tools
Base64 Encoding 
Browser Settings 
CSS Coder 
CSS Navigation Menu 
Datetime Converter 
DHTML Tooltip 
Dig Utility 
DNS Utility 
Dropdown Menu 
Fetch Content 
Fetch Header 
Floating Layer 
htaccess Generator 
HTML Encoder 
HTML Entities 
IP Convert 
Meta Tags 
Password Encryption
Password Strength
Pattern Extractor 
Ping Utility 
Pop-Up Window 
Regex Extractor 
Regex Match 
Scrollbar Color 
Source Viewer 
Syntax Highlighting 
URL Encoding 
Web Safe Colors 
Forums Sitemap 
Weekly Newsletter
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Contact Us 
Site Map 
Privacy Policy 
  >>> SIGN UP!  
  Lost Password? 

Make Life Easier with Shared Page Elements
By: Developer Shed
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 2

    Table of Contents:

    Rate this Article: Poor Best 
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article




    Make Life Easier with Shared Page Elements

    By: Keith Reichley

    In the early days of the web, sites were usually built with primitive text editors, one page at a time, one painstaking HTML tag after another. Yeah, back then also we walked five miles to school, uphill both ways. And we liked it.

    Current web building tools make it easier than ever for content managers to maintain a site's consistent look and feel -- every page with your logo at the top, a primary navigation bar in a prominent place, and a footer with your company's address and phone number, for example.

    This article shows how you can create these page elements once and have them shared by every page in your site. So, if you're still living in the horse-and-buggy world of building every page top to bottom from scratch, repeatedly coding your banners and footers, it's time to harness the power of shared page elements. Let's start with a few of the more popular web authoring tools.

    Achieve consistency in your FrontPage-built site by using Shared Borders, which are page regions reserved for content such as page titles and navigation bars that you want to appear consistently throughout the site.

    Start by clicking on the Navigation icon on the Views bar to switch to Navigation view. On the Format menu, click Shared Borders. In the Shared Borders dialog box you can specify where on your pages FrontPage should insert Shared Borders. You'll probably want to make sure the All pages option is selected.

    Note that you can have more than one Shared Border, such as one at the top of the page for your logo, and one down the left for the navigation bar.

    With the Shared Borders in place, all existing and new pages will, you guessed it, "share" the same logo, navigation links, etc. If you make changes to an element in a Shared Border, the change will be reflected automatically throughout your site.

    That's not all. You can apply a Theme that gives pages, banners, navigation bars, and other elements an attractive and consistent appearance. With any page open, click Theme on the Format menu to display the Themes Properties dialog box. Refer to online Help for the the dizzying array of options available to you.

    Our favorite web authoring tool lets you create a template that can be applied to the entire site. In Dreamweaver create a basic page that includes only those elements that you want on every site page. Apply this page to a defined site by selecting File - Save as Template. Select the defined site and give the template a name. Once the template is saved, you'll have to define what is editable and what isn't.

    There's a lot to this powerful feature, so refer to Dreamweaver's online help for more information.

    NetObjects Fusion
    If this is your tool of choice, make sure you're using Fusion's powerful SiteStyles feature. You can select from over 200 SiteStyles that put a consistent look and feel to your site. You can even create your own site style.

    Another feature you'll want to use are navbars (navigation bars). These are Fusion generated-navigation aids which appear as a series of links or linked buttons in your web pages. One great thing about these highly-customizable navbars is that they continually reflect your site's structure as you add sections and pages to your site.

    For more information about sitestyles and navbars refer Fusion's online User Guide.

    While HomeSite is not a WYSIWYG tool like FrontPage or Fusion, it's a fine HTML editor. Your best bet with this tool is to create a template.

    Create an HTML file to hold the repeatable code that contains the "shell" for each page -- at a minimum, the opening and closing HTML and BODY tags. Include code for your logo, primary navigation, and other shared page elements. Save this file as a custom template (File - Save as Template). When you create new pages (File- New), click on the custom template.

    Unfortunately, using this approach will not allow you to make site-wide changes to existing files.

    Home-grown solutions
    Not using a web authoring tool? Even if you're the programmer type with an unnatural affinity for Notepad you can use shared page elements. Essentially you'll create separate text files that contain the code for shared page elements, and then call upon these files as needed.

    Server-Side Includes (SSI)
    The most common way of doing this is with server-side includes (SSI). Create separate HTML files for each shared page element. For example, you might have an HTML file called "banner.htm" that's been saved in a directory called "includes".

    In the HTML file for each page, add the following line:

    <? include("/includes/banner.htm"); ?>


    If you're not using one of these approaches, you probably should be. It allows your content managers to focus on what they do best -- creating and updating content -- without having to worry about recreating common page elements over and over. As with any change in process, anticipate a learning curve, but also be ready for the benefits of a more efficient process and a cleaner web site.

    Top quality daily ASP, PHP and .NET
    articles, tutorials, news, reviews, interviews AND FREE EBOOKS! devArticles is
    the ultimate online resource for the serious web developer. Visit
    http://www.devarticles.com today!


    DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

    More Web Development Articles
    More By Developer Shed



    - On Page SEO for New Domains
    - Improve Your Site`s Speed
    - Safari Books Online Review
    - Creating an Estore From the Ground Up
    - Most Common SEO Mistakes Developers Make
    - Making the Most of Your Titles and Meta Desc...
    - Five Ways Using Flash Can Damage Your Site
    - A Web Designer`s Guide to Colors
    - Use Webstarts to Create a Free Site
    - More Than Just Looks. How Your Web Design C...
    - How to Design Content Pages
    - Mint Review
    - Make Your WordPress Website Look Professional
    - How to Create a Mobile Web Site
    - Meta Tags: Still Useful?

    Developer Shed Affiliates


    © 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap