Jump to main content.

Updating ColdFusion Templates with Template 3

Note: These directions apply to ColdFusion pages. The editor is assumed to be Dreamweaver. However, if you're using a standalone HTML editor, like Notepad, many of these instructions apply.

  1. Back Up
  2. Get the Template(s) You Need
  3. Customize the Template for Your Area
  4. Save, Test, Tinker

1. Back Up

Back up your site files before switching templates. It helps if you create a test folder.

2. Get the Template(s) You Need

  1. Download the appropriate model template.
  2. Create a new form
  3. Import the HTML source code from Template 3.x
    Depending on whether you use Fusebox or have developed your own template, you will need to copy the HTML code for the Template 3 into the header and footer files. If you were using a cfm file for the navigation side bar, this file will need to be included in the footer file.

Should you download the style sheets and JavaScript files?

3. Customize the Template for Your Area

You may have other ways of populating the various fields of information required in your forms; the following examples illustrate how NCEA creates the information.

Top of page

Start with the <head>

<title>

NCEA created a variable with data from an Oracle database which servers as the title of the record and thus the page. We call it "pageName".

To reproduce that same information in the <title> section of the <head>, we use a computed text field that copies that information. Insert that field in the <title> section of the template so that the code in your header file looks like this:

<title><cfoutput>#pageName#</cfoutput> | NCEA | US EPA</title>

We do recommend editing your title to follow EPA's web standard for title elements.

Metadata Elements

Metadata elements (meta tags) generally provide additional information about the document to search engines. These metadata elements will aid in building epa.gov's information architecture and our move to a Web Content Management System.

NCEA uses fields within the database for metadata.

As with the <title> field above, for the metadata information, create computed text fields which mirror the content in the <body>. The metadata code looks like this:

<meta name="keywords" content="<cfoutput>#qryRecs.keywords#</cfoutput>" />

There are a number of new metadata elements in Template 3.x.

Importing Local Style Sheet(s)

I have local styles. What do I do about them?

JavaScript

Do not remove the <script> elements calling the files epa-core.js or extra.js. These files hold the code for the "New!" icon, the page last updated date (in the footer), the URL of the page (in the footer), and other functions the Agency may develop.

Top of page

Header <div id="header">

Lozenge

Add your area name to the lozenge by editing the <div id="areaname><p>. More on area names.

Recent Additions

Edit the Recent Additions link so it points to your Recent Additions page. If you do not have a Recent Additions page, remove the link and the vertical bar ("|") character. More on Recent Additions.

Contact Us

Edit the Contact Us link so it points to your Contact Us page. Make sure your Contact Us page meets EPA specification. Email addresses must follow standards, too.

Search

Edit the search code with information for your area.

Breadcrumbs

Insert your breadcrumb-generating code here. NCEA uses a variable generated from the record name, which is used in breadcrumbs section in a header file. The code for the breadcrumbs looks like this:

<cfset crumbName="<li>#pageName#</li>">

The code in the header file will look something like this:

<li><a href="http://www.epa.gov/ord">Research & Development</a></li>
<li><a href="index.cfm">NCEA Home</a></li>
<cfoutput>#crumbName#</cfoutput>

You may want to use a few if statements to allow your header file to work for both the home page and the next level pages.

If you are not using information from a database to generate breadcrumbs, you will need to set the breadcrumb name at the top of each page, because they're displayed in an included file.

Breadcrumbs will need to be modified on each page. Because the breadcrumbs are part of an unordered list in the new template, the > (&gt;) in the current template needs to be removed and replaced with <li> elements.

Top of page

Content <div id="content">

EPA Site-wide Banner Announcements

If your page will become the home page for an area or a Program Office, in Dreamweaver, detach the page from the template and change "sitewidec" to "sitewideb". If this page is not a home page, leave it as "sitewidec". (If you're editing an AA/RA home page, the banner announcement will say "sitewidea". Do not edit.)

More on site-wide announcements.

Content
Page Name

NCEA uses a dir_entry_name field from EIMS (i.e., the pageName variable) for the name of the page. Insert your page name field here, so that the code looks like this:

<!-- BEGIN PAGE NAME -->
<h1><cfoutput>#pageName#</cfoutput></h1>
<!-- END PAGE NAME -->

Body

Insert the field you use for your page content here. NCEA uses a variable from a SQL query named qryRec to populate the content area. The code looks like this:

<cfoutput query="qryRecs">
<p>#variable1#</p>
<p>#variable2#</p>
</cfoutput>

Area Footer

If you have an Area Footer, add it. If not, delete the placeholder text. More on area footers.

Top of page

Left sidebar (Area Navigation) <div id="area-nav">

The area navigation holds your sidebar links. This portion of the code is at the bottom of the template, and must remain there. (It will display last when styles are disabled in a browser.) In the code, the area navigation is an unordered list. When viewed in a capable browser, the style sheet displays the area links as expected.

Add your area sidebar links:

More on what belongs in the sidebar.

Example of links under a heading

<div id="area-nav"> <!-- BEGIN AREA NAVIGATION -->
	<h3 class="skip">Local Navigation</h3>
	<ul>
		<li><a href="careers/index.html">Careers</a>
			<ul>
				<li><a href="careers/legal/index.html">Legal jobs</a></li>
				<li><a href="careers/index.html">Other jobs</a></li>
			</ul>
		</li>
		<li><a href="library/index.html">Library</a></li>
	</ul>
</div> <!-- END AREA NAVIGATION -->

Top of page

Global Footer <div id="footer">

Contact Us

Edit the Contact Us link in the global footer so it points to your Contact Us page, ensuring that the link points to the same place as the Contact Us link at the top of the page.

Top of page

4. Save, Test, Tinker

You'll have to tinker a bit to ensure the page looks exactly as you wish it to. Make sure that you open and close tags in the same file. It will ensure that when you update the file, you will not leave any tags open which can break the application. But other than appearance, these instructions should help you produce a page using the new template.

Check your template against the list of common issues. Do not modify any code other than what is necessary to meet the specification. Editing or removing any other elements can seriously degrade the page.

Edit your content. There are a number of styles you can use. Don't forget your contact us, comments, and thank you response pages.

Recommended: clean up your markup, including layout tables. Now that browsers handle CSS more consistently, we can use styles instead of tables to lay out Web pages.

You do need to verify that the code in your content section is XHTML 1.0 compliant.

Top of page

For help with these pages, contact the Web Redesign Workgroup.

Local Navigation

Jump to main content.