Make Life Easier with Shared Page Elements

Make Life Easier with Shared Page Elements

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 sites 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 companys 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 youre still living in the horseandbuggy world of building every page top to bottom from scratch, repeatedly coding your banners and footers, its time to harness the power of shared page elements.

FrontPageAchieve consistency in your FrontPagebuilt 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. Youll 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.

Thats 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. 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, youll have to define what is editable and what isnt.

Theres a lot to this powerful feature, so refer to Dreamweavers online help for more information.

NetObjects FusionIf this is your tool of choice, make sure youre using Fusions 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 youll want to use are navbars navigation bars. These are Fusion generatednavigation aids which appear as a series of links or linked buttons in your web pages. One great thing about these highlycustomizable navbars is that they continually reflect your sites structure as you add sections and pages to your site.

For more information about sitestyles and navbars refer Fusions online User Guide.

HomeSiteWhile HomeSite is not a WYSIWYG tool like FrontPage or Fusion, its 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 sitewide changes to existing files. Essentially youll create separate text files that contain the code for shared page elements, and then call upon these files as needed.

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

When the server opens an HTML file on your site and sees this code, it grabs your banner code and merges it with the other HTML code on the page. The beauty of this is that you can use this include over and over. Note that your server must be set up to process SSI. Contact your server administrator if you have questions. PHP PHP is a scripting language which excels at the dynamic delivery of web content. Similar to SSI, you can embed code in one file to bring in page elements stored in another file. To include your banner code, place a command like this in your php file:

SummaryIf youre 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.