Jump to main content or area navigation.

Contact Us

EPAFiles: Web Design

Updating Existing Pages with Template 4

Note: EPA no longer updates this information, but it may be useful as a reference or resource.

EPA builds all web content in the Drupal WebCMS as of January 2013. All new microsites and resource directories will be created using Drupal WebCMS. There is still content on EPA's legacy servers and this content will be maintained there until it is transformed and moved into the Drupal WebCMS. This information on styles and look and feel only applies to the existing content using Template 4 or older versions of EPA's template. Information for building new content is found in the EPA Web Guide.

Note: These directions apply to static HTML pages. The editor is assumed to be Dreamweaver. (If you're using a standalone HTML editor, like Notepad, many of these instructions apply. You will be editing the static HTML files provided.)

  1. Back Up
  2. Set up Dreamweaver to XHTML 1.0 Strict
  3. Get the Template(s) You Need
  4. Customize the Template for Your Area
  5. Do a Final Check
  6. Apply the New Template (Dreamweaver)
  7. Fine Tune Individual Pages

1. Back Up

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

2. Set up Dreamweaver to XHTML 1.0 Strict

For Dreamweaver 8 only (if you're running an earlier version of Dreamweaver, skip to the next section): Edit the following settings in DW 8. Pages created with the template should use the XHTML 1.0 Strict DOCTYPE.

See Writing in XHTML 1.0 Strict for more information.

Top of page

3. Get the Template(s) You Need

Download the appropriate model template. In Dreamweaver, save the model template in the Templates folder. If you do not use Dreamweaver, download the appropriate HTML file.

Do not download the style sheets and javascript files. Use the links, as is, in the template.

4. Customize the Template for Your Area

You'll need to modify the model template. One approach is to recreate the template for your area and apply it to existing pages. If you do that, you'll need to match editable areas from the old template to editable areas in the new one. Template 4 re-uses the same editable regions as Template 3.

Top of page

Start with the <head>

<title>

You will not need to edit the title of your document. Applying a new template does not affect the title of existing pages, as the title is part of an editable region.

Metadata Elements

Metadata elements (meta tags) provide additional information about the document to search engines. These metadata elements will aid in building epa.gov's information architecture and improve search.

See EPA's Metadata FAQs for metadata requirements.

Importing Local Style Sheet(s)

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

JavaScript

JavaScript now goes into the <footer>.

Top of page

Header <div id="header">

Notes: In Template 4, the Recent Additions link is in the sidebar. The Print Version link has been removed. Breadcrumbs are no longer separated with &gt; (">").

Lozenge

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

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.

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

Your content should not be affected by the switch to a new template.

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:

Use the Area Navigation (sidebar) requirements:

  • [Subject] Home
  • Basic Information
  • Where You Live (optional)
  • Recent Additions (optional)
Example of sublinks under a heading

<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>

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.

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.

If you add javascript, reference it here.

Top of page

5. Do a Final Check

Gotchas

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.

Top of page

6. Apply the New Template (Dreamweaver)

Save your template with the same name as the old template and apply it. When asked "The file you selected already exists. Overwrite?" choose Yes.

Generally, when you save a template, Dreamweaver will ask you if you want to update all pages that use that template. If it doesn't, choose Modify > Templates > Update Pages… and select Look in Files That Use and select the name of your new template file. Even this step may not convert all pages. The last method is to open a page, choose Modify > Templates > Apply Template to Page.

Top of page

7. Fine Tune Individual Pages

Modify each page that uses the template as follows:

The <head> Section of the Document

  1. <title>: Do not forget the title of the page.
  2. <metadata>: To modify the metadata elements in Dreamweaver:
    1. Add changes to code in Code View, or
    2. Make the changes in Design View. Use View -> Head content to fill in the metadata element. Look in the Property Inspector panel at the bottom of the screen as you click on each Head Content icon. The properties for each metadata tag will display in the Properties Inspector as you step through the Head Content icons.

Header <div id="header">

Breadcrumbs

Breadcrumbs will need to be modified on each page because they're part of an editable region. (Updates will not happen automatically in editable regions.) 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.

Long breadcrumbs may be problematic. Shorten them if necessary.

  • Each new breadcrumb link is a separate list item.
  • Remove the > (&gt;). The master style sheet inserts separators automatically.
  • More on breadcrumbs.

Example:

<ul> <!-- BEGIN BREADCRUMBS -->
	<li class="first">You are here: <a href="http://www.epa.gov/">EPA Home</a></li>
	<!-- START AREA BREADCRUMBS -->
	<!-- #BeginEditable "breadcrumbs" -->
	<li><a href="index.html">Area Home Page</a></li>
	<li><a href="subtopic.html">Sub-topic</a></li>
	<li>Current Page</li>
	<!-- #EndEditable -->
	<!-- END AREA BREADCRUMBS -->
</ul> <!-- END BREADCRUMBS -->

Content <div id="content">

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 your epa.gov web design, contact the Web Template Workgroup.

Jump to main content.