Jump to main content.

Creating New Areas and Pages with Template 3

Note: These directions apply to static HTML pages. The editor is assumed to be Dreamweaver. However, 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. Set up Dreamweaver to XHTML 1.0 Strict
  2. Get the Template(s) You Need
  3. Customize the Template for Your Area
  4. Do a Final Check
  5. Fine-tune Individual Pages Created with the Template
  6. Create auxiliary and other pages

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

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

Should you download the style sheets and JavaScript files?

3. Customize the Template for Your Area

You'll need to modify the model template.

Start with the <head>

<title>

Edit the <title> tag to match the title of your document. There should be three parts to the title:

<title>Your Page Name Here | Area Name Here | US EPA</title>
<title>Household Waste | Region 9 | US EPA</title>

We recommend that your template include " | Area Name | US EPA", so that only the title needs to be completed for each page. Follow EPA's web standard for title elements.

Dreamweaver has a title panel at the top of the screen in the Design View where the title can be modified.

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.

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 (including the ACSI survey).

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.

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 already say "sitewidea". Do not edit.)

More on site-wide announcements.

Content

If you plan to apply a local style sheet, do so in the <head> section of the template code. The master style sheet includes styles for some of the basic elements used on EPA Web pages, so check for available styles first before creating something new.

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

5. Fine-tune Individual Pages Created with the Template

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 must be added to each page. Long breadcrumbs may be problematic. Shorten them if necessary.

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

Add your content. There are a number of styles you can use.

6. Create auxiliary and other pages

Don't forget your contact us, comments, and thank you response pages.

Recommended: Now that browsers handle CSS more consistently, we can use styles instead of tables to lay out Web pages.

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.