A master template has been created to define the header, footer, and global navigation of all PCC websites. Each time the template is significantly updated, the version number will be increased.
The layout can be adjusted to 6 different variants of the page:
- one-col-fluid: No side navigation is included. Page will expand with browser window.
- one-col-fixed: No side navigation is included. Page size is fixed.
- two-col-fluid: Sidebar included. Page will expand with browser window.
- two-col-fixed: Sidebar included. Page size is fixed.
- popup: No side, header or global navigation. Page will contract to fit in very small window
- home: Special layout for home and sub-home pages.
Each template's theme can be changed by setting a class to the <body> element. Themes provide an added layer of customization while still maintaining the branding integrity provided in the templates.
Pages that use the template
The following pages use the current template and will be affected by any update.
- Static pages on pcc.edu
- Most dynamic pages (applications) on pcc.edu including:
- Class Schedule
- Staff Directory
- CCOG (Public View & Management Tool)
- International Application & Orientation
- Service Learning & Admin
- Student Job Posting (accessed through portal)
- Parking Permit Sale (accessed through portal)
- PCC Non-credit Admissions
- Financial Aid
- Locker (Student & Staff)
- Parking Appeals (developed by T2 systems vendor)
- Search (powered by google mini)
- Wireless login (infranet)
- Keyword Search (404)
- Several dynamic on intranet.pcc.edu:
One of great things about building a web site is the ability to link lots of resources together. However when the number of resources and pages becomes massive, it is imperative that the hyperlinks, anchors and url's are formatted in a standard way. During the last check, there were over 600,000 links on the on www.pcc.edu.
Linking to Internal Pages
Do not link to index.html. Instead, point to it's containing folder rather than the file itself. For example, link to
Include the trailing slash. When linking to a folder, always add a slash at the end, such as
/about. Folders with a dash-in-their-name will convert the dash to %2D if the link does not contain the trailing slash.
Use relative links inside of sub-sites. Relative links reflect the relationship between two the documents.
Use root relative links for linking to other areas of the site. Simple relative links can become ugly when linking to documents that are in a different section of the file hierarchy. An initial slash refers to the top level of the hierarchy. Use
Point to actual locations instead of shortcuts or keywords. This makes it much easier to track down links when a site is moved.
Linking to External Sites
Only link to permanent locations if possible. Avoid linking to content that may be moved, or removed. Also choose links at the upper levels of a site, since they are less likely to be changed often. For example: Link to
http://www.adobe.com/products/acrobat/readstep2.html. If needed, extra instructions can be provided: Click on the "Get Adobe Reader" icon.
Encode URL Variables. When linking to a dynamic page which requires URl data, the ampersand ("&") must be encoded as
&The page will not validate if this is not done. Learn more about encoding URL variables
Anchors should not be empty. Just like regular links, they should enclose some relevant fragment of text. For example, place the anchor tags around the full text of a heading to create an anchor for that section.
Links intended to open in a new window should make use of the
linksSetup function of PCC's
be setup to launch a new window on click. For example, the class
be used for all links that point to a web contact form. See the documentation for
the JS Library for more info.
All links to pcc.edu addresses with the
mailto: prefix will have click event handlers automatically attached
to them to launch the PCC email form in a new popup (
popup-form) window. It is possible
to override this behavior by attaching a custom
onclick (attribute) handler. Non-pcc.edu addresses will act as normal and invoke the users mail client.
- Meaningful images must have a text equivalent, namely an
altattribute. Alt text should be brief but descriptive. If the image requires more than a single phrase to describe use a separate text file linked to the image through the
- Purely decorative images should contain an empty
- Need a photo? The Marketing Communications (x4390, firstname.lastname@example.org) has a collection of professionally taken photographs of the campuses and students available for college publications, including websites.
- see Images and Documents under Directory Structure for information about where to store images.
ID's, Names, and Labels
You must specify both an id and name on all form fields. Though they are not required to be the same it is often the most logical, except in the cases of radio buttons and checkboxes where name acts as a control (or group) name and must be the same on all in the group, while ID's must always be unique. Label all <input>, <textarea>, and <select> fields using the <label> tag.
<label for="comments">Your Message:<textarea id="comments" name="comments"></textarea></label>
If information is required both it's label and field should be given a class of required. The label will be given special formatting to denote its importance and a validation function, part of pcclib.js, will scan all fields on submit of the form and prompt the user on missing required fields. Note: by also assigning a class of email to an input field the validation script will check to make sure the entered data is a valid email address.
<label for="email" class="required">Your email address:<input id="email" name="email" class="required email" /></label>