|
Caltrans
> Second Level > Third
Level > This Page
New Template for External Caltrans
Pages
This is the Caltrans version of the
template developed by the Governor's Office which is
now mandatory for all external state agency web pages.
The objective is to give all state web pages, not just
Caltrans pages, a professional common look and feel.
Many groups in Caltrans have expressed a desire for
their pages to look unique from all other Caltrans pages.
This is opposed to the Governor's office wishes. Please
note that webmasters are not allowed to pick and choose
the elements of the template that they like or to make
substantial alterations to it other than adding their
own content, images and links.
The template pages offered here are
slightly modified from the template the Governor's Office
offers in the following ways:
- The banner image, Caltrans logo, spacer images,
Javascripts, style sheets and Privacy Policy and Conditions
of Use page links point to a central location on our
external server. You will not need to have any of
these items in your own directories.
- The search box is already configured to work with
our search engine.
- The breadcrumb trail has been added. Breadcrumbs
are used to allow visitors to navigate backwards through
the path they may have taken to get from the Caltrans
main page to your page. This is not an area to squeeze
in extra links.
- The required link to the Caltrans home page has
been inserted for you at the top of the left navigation
bar.
- A link near the top of the template file html to
the default style sheet has been added to allow you
to see more accurately what your page will look like
when it is published. Comment this out before publishing. It was included to allow you to see what your
fonts look like as you develop the page.
How to use this template:
Download this zipped
file which contains all of the Caltrans-ready versions
of the template as well as the default.css style sheet.
If you save template files individually using the
links to the left be sure you use Netscape. IE will
create an images directory and rewrite your html,
defeating efforts to have common images located in
one place on the web server.
Unzip the template file(s) you need plus the style
sheet in the directory you defined in Dreamweaver
as your web root directory.
Make sure the link to the default.css style sheet
near the top of the html is uncommented so that you
will see the text on your page accurately as you edit
in Dreamweaver. You still won't see the banner image,
logo or spacer images until the file is uploaded to
the web server. This is o.k.
Add your content and images.
Remove all font tags from your html.
Make sure that all paragraph tags have a class="..."
tag inside them.
Edit the breadcrumb trail so it is appropriate for
your site.
Fill out the meta tag information in the head section
of each page.
Here are the Governor's templates and
style guidelines which you can consult to read the Governor's
Office presentation of how to use the templates.
Location: www.webmasters.ca.gov/styleguide/
Login: California\myca
Password: newlook4ca
More on style sheets
This template relies on style sheets to define the look
of all text. Don't add font tags and be sure that content
you copy and paste into the template contains no font
tags. Combining font tags and style sheet tags will
result in odd fonts that are nothing like either the
font tag or style sheet definition. Here is
what's inside the Governor's default style sheet.
You will need to go over your html and add class="content"
(or other style sheet tag) to every paragraph tag in
your document. This template style sheet hasn't defined
basic html tags such as <h1> , <td> , <li>
, etc as our previous template did. Instead all font
styles are defined by either adding a class attribute
to a paragraph tag (i.e., <p class="subTitle">)
or by adding
<span class="somestylesheetelement">
and </span> tags around text. The latter technique
is necessary if you have list items in your document.
Refer to this style sheet
example sheet to see what styles are available,
what each style looks like and examples of how to
use them.
To apply a style using Dreamweaver's
style sheet tools:
First make sure the link to the default.css style sheet
is uncommented, select the text you want to apply a
style to, open the style editor (Window > CSS Styles
or click the "s" symbol at the bottom right
of your Dreamweaver window) then click on a style to
apply it to your text.
Cautions:
Don't open the template in FrontPage. FrontPage will
add paragraph tags in several unwanted places, adding
large spaces where they aren't wanted.
Be careful about adding images or tables that are
too wide (wider than 593 pixels) to the body of the
document. If you do you may find the column at the
left and the search box are pushed too far out.
Don't try to alter the colors of the template, including
the white background.
Don't substitute rollovers for the links in the navigation
bar at the left or anywhere else. The links are required
to look exactly as they do in the template.
It is still prohibited to add clip art, animations
or background images to your pages.
The banner image cannot be substituted with another
image.
No additions or changes are allowed to the red bar
at the top of the page.
Below are a few bullet images which
may be helpful to you. All of these images are in our
web server's images directory. You don't need to load
them into your own images directory. Right click on
them to save them to your system.
circle.gif - link to it as <img src="Images/circle.gif"
width="8" height="8" alt="">
diamond.gif - link to it as <img src="Images/diamond.gif"
width="8" height="8" alt="">
square.gif - link to it as <img src="Images/square.gif"
width="8" height="8" alt="">
triangle.gif - link to it as <img src="Images/triangle.gif"
width="8" height="8" alt="">
|
