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.)
- Back Up
- Set up Dreamweaver to XHTML 1.0 Strict
- Get the Template(s) You Need
- Customize the Template for Your Area
- Do a Final Check
- Apply the New Template (Dreamweaver)
- 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.
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.
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.
Start with the <head>
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 (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.
Importing Local Style Sheet(s)
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 > (">").
Add your area name to the lozenge by editing the <div id="areaname><p>. More on area names.
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.)
Your content should not be affected by the switch to a new template.
If you have an Area Footer, add it. If not, delete the placeholder text. More on area footers.
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:
- See the sidebar standard for required links
- Each sidebar link is a separate list item (<li>).
- Use an unordered list for sublinks.
- [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>
Global Footer <div id="footer">
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.
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.
5. Do a Final Check
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.
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.
7. Fine Tune Individual Pages
Modify each page that uses the template as follows:
The <head> Section of the Document
- <title>: Do not forget the title of the page.
- <metadata>: To modify the metadata elements in Dreamweaver:
- Add changes to code in Code View, or
- 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 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 > (>) 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 > (>). The master style sheet inserts separators automatically.
- More on breadcrumbs.
<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.