California Department of Transportation
 

Template for External Caltrans Pages

This is the Caltrans version of the template developed by the eServices office for use by all external State of California pages.

The Caltrans-ready version of the template is the same template as you'll find in the Web Toolkit, but it is already configured for our search engine, our tabs, our header graphic and a style declaration for the <h1> tag which was missing from the style sheets offered in the Web Tools. The links to style sheets, Javascript files and images are added so that the template pages can be put in any Caltrans directory and will work and display fine.

It is recommended that before you begin the conversion process that you take time to clean up and reorganize your site. Delete orphan files (files still on the server but not linked to by any web page) and rename any files with spaces or special characters. Now is the perfect time to reassess whether your current web site structure works. Many of you inherited sites from others. Now that you'll need to touch every page you can figure out once and for all whether they're still needed.

If you do no reorganization, at least make sure that you remove all spaces and special characters from your file and folder names.

Can't tell which of your files are orphans? Try Dreamweaver's orphan file report. This will work if you have all of the files that are on the server on your PC. If not, you can use Xenu's Link Sleuth or other link checking software. Xenu will need your staging server username and password to give you an orphan file report. It's safe to enter these in Xenu. These techniques don't work? Ask us for help in determining your orphan files.

Install Firefox and the Web Developer addon product. If you can only use IE, install it's web developer addon product, which is less powerful, but still helpful. Since approximately 18% of our visitors use Firefox, those developing external web pages should check their pages in at least IE and Firefox.

Major differences from the previous template:

  • These templates use an all CSS layout and use web best practices. They adhere to web standards and should give us pages that validate, load faster, will be easier to change in the future and will be easier to manage. The XHTML used in pages using this template should be much easier to navigate. Our current home page weighs 45 KB. The new one, with the same content, weighs only 18 KB!
  • We're using server side includes (SSI) on every page. This allows us to add the same line of code to every page which will insert the contents of a file at the place where the SSI is. In this way we can use SSIs for the header and footer code. Then when either of these files is changed, the update will be reflected in every page.
  • You no longer need to insert class="content" in to every paragraph, list item and table cell tag. The look of all html tags is defined in the style sheets. You can simply add your text and it will be styled correctly without further effort.
  • This template uses XHTML strict, not XHTML transitional or HTML, as with the previous template. Here are a few sites that explain the differences in which tags and attributes are allowed.

More reading on the differences between XHTML and HTML and the XHTML strict vs XHTML transitional doctype

strict vs transitional doctype:
    http://accessites.org/site/2006/09/its-time-to-kill-off-transitional-doctypes/#n23
    http://24ways.org/2005/transitional-vs-strict-markup
    http://www.456bereastreet.com/archive/200609/no_more_transitional_doctypes_please/

XHTML vs HTML:
    http://www.webstandards.org/learn/articles/askw3c/oct2003/
    http://htmlfixit.com/tutes/tutorial_XHTML_and_HTML_-_The_differences.shtml

How to use this template:

  1. Download the Caltrans-ready template files.
  2. Unzip the files it contains in the directory where you have defined your external site. When you look at the sample Caltrans-ready pages in Dreamweaver, they should display correctly. Links to the style sheets, images, javascript and include files have been added to the Caltrans-ready version of the template with leading forward slashes ( ie @import url("/css/ca_master.css"); ) so that no matter where on our web servers pages using this template are, they will display with full styles and functionality.
  3. Select the 1, 2, or 3 column version of the template.
  4. Copy your content and images into the template pages, renaming and saving them as necessary. Your new pages should display fine in Dreamweaver.
  5. Delete font tags and the now-unecessary class="content" and other style attributes that this template doesn't support. Font tags can be removed quickly by using Dreamweaver's Command > Clean up XHTML then checking the 'specific tags' box and entering font in the box next to it. This will likely be the most tedious part of the conversion, but your pages may load slightly faster if the browser doesn't have to look for style declarations that don't exist.
  6. You don't need to upload the following files to the web server:
    • the header graphic and other images associated with the tabs, search box, header and footer
    • the style sheets
    • javascript file
    • the header server side include file. If you create your own header include file (for example, if you have changed the links that appear under the tabs) you will need to upload this header file. Since you will be customizing the Contact Us link in the fooler, you will need to upload that file.

      The above files are included in the Caltrans-ready zip file so your pages will look OK when you work on them in Dreamweaver.
  7. Change the footer server side include code so that the Contact Us link points to either an email link of someone in your group or a comment form configured to send queries to your group. You will want to change the footer SSI link from this:
    <!--#include virtual="/ssi/footer.html" -->
    to this:
    <!--#include virtual="/hq/mygroup/ssi/footer.html" -->
    substituting /hq/mygroup with whatever directory path is approprate for your site.
  8. If you create another style sheet with your own styles, add a link to that at the bottom of the imported styles so that it overwrites any existing styles. We want the basic style sheets to be the same for all web pages so that if the look of our pages changes in the future, changes to the style sheets will allow all pages on our server to take on the new look.
  9. Modify the breadcrumbs at the top of the page to have links to the most likely path a user took to arrive at the given page from our main page.
  10. Validate your pages! Why? So your pages load faster; so search engines have an easier time with them and to future-proof them. The more correct your XHTML is the better they'll display in future versions of browsers. They'll also display better in a wider variety of current browsers. Any changes you'll need to make so your pages will validate are likely to be minor. Here's the HTML Validator site explanation of why to validate links and the W3 explanation page.

Note: To make sure that your pages do display correctly when using Dreamweaver's Preview in Browser feature, make sure you've configured Dreamweaver to use temporary files for previewing. To set this, go to Edit > Preferences, then select Preview in Browser from the options in the lefthand column and make sure the option "Preview using temporary files" is checked.

Converting Existing External Web Pages

On March 29th, 2007, Cindy Walker gave a presentation demonstrating how to change existing external Caltrans web pages to the new look and feel.  A video recording of the presentation, and the PowerPoint slides used, are available.

During the presentation, Cindy used ReplaceEm, a freeware string-replacing utility for Windows.  ReplaceEM is designed to perform multiple operations, on multiple files, at once.  Cindy used a list of search-replace operations from a file, demo.txt, which can make a good start towards conversion of exiting external web pages. This file is also available, and can be imported into ReplaceEm via “File”, “Import Search/Replace Table…” from the ReplaceEM menu bar. Two versions of the file are provided here: demo-dos.txt and demo-unix.txt, since depending on configuration ReplaceEm may expect either a DOS/Windows or UNIX format file for import.  If you see either an empty screen or little solid rectangles within the text after import, try the other file.

How to validate your pages

In Dreamweaver:

Select File > Check Page > Validate Markup.

The Validation tab of the Results panel either displays a "No errors or warnings" message or lists the syntax errors it found. Double-click an error message to highlight the error in the document.

Using Firefox with the Web Developer addon:

If your page is on an external web server, open your page in Firefox and from the Tools menu in the Web Developer bar, choose Validate XHTML.

Through validator.w3.org:

To validate a page that's on your PC, go to http://validator.w3.org/ and validate your code either by file upload or by copying/pasting your code into the Validate by Direct Input form).

The logo

logoThe logo is at the bottom of the left column in the Caltrans-ready version of the template. If you place the logo elsewhere on your page, remove it from the left column. It looks terrible when it appears twice on the same page. Do not use modified versions of the logo, such as the logo with a drop shadow or with program-specific items on top of it.

Use this code to add the logo to a white area:
<img src="/images/ct_logo_small.jpg" alt="logo" width="100" height="81" />

Required parts of the template

In addition to the parts of the template required for all state agencies, which are outlined on the Web Tools site (the styles, tabs, CA.gov logo, header graphic, search box and footer), the following are requirements for external Caltrans pages:

  • The tabs that you see on this page. Tabs for Home, Travel, Business, Engineering, News, Maps, Jobs, About Caltrans and Contact Us. The links that appear under the tabs (level 2 navigation) can be changed if your district or program has links that are more specific to your district/program than those listed in the template. For example, a district page might have its own press release page to link to under the News tab. The level 2 navigation should not be completely changed. Having different sub-menus on different pages will confuse users. Consistent navigation is essential for good web page usability. You are free to use links specific to your program/district in the left (and if used, the right) column.
  • The breadcrumbs that appear right under the tabs. This is a great way to make it easy for users to return to a page they may have just been on. The breadcrumb trail should reflect the path a user most likely took to arrive at a particular page.
  • The Contact Us link in the footer should point either to an email address or custom contact form that sends comments from the public to someone in your district/program. This should not be linked to the web admin email account.

Parts required only on our main page

These items are optional on pages other than our main external page.

  • The Governor's ad at the top of the left column
  • An Amber Alert ad
  • A Flex Your Power ad.

Parts required only on our main page and on District main pages

The 'We're Here...' graphic. It can be placed anywhere on your page. This is the code to use to insert the banner:

<div id="werehere">
</div>

Districts should change the link to the header graphic on their main page from this:

<!--#include virtual="/ssi/heading.html" -->

to this:

<!--#include virtual="/ssi/heading-main.html" -->

The only difference between the two include files is that heading-main.html doesn't have our new slogan in the blue bar under the tabs.