-
From a browser, save the generic template at http://www.cvmbs.colostate.edu/webmaster/style_guide/2004/generic_template.htm with a new name to your hard drive or desired location.
In Internet Explorer, choose File > Save As.
You will be prompted for the location to "Save in:" (in
Clark C143, please use c:\UserData\) and "File name", such
as "indexnew.htm", for example. "Save as type"
should be "Web Page, HTML Only".
Open saved file in HTML editor.
If using Dreamweaver, open/define site: Site > Open or Define Site.
Browse to local root folder (in Clark C143, please use c:\UserData\)
and Select. Double click on the html file name in the Site Files Window
to open it.
Suggested Dreamweaver options:
View > Code & Design
View > Code View Options > check Word Wrap and Line Numbers
View > Rulers > check Show and Pixels -
Customize the top navigational table, if desired.
Copy and paste a customized top nav table from http://www.cvmbs.colostate.edu/webmaster/style_guide/2004/topnav.htm over the existing top navigation table in the template. Comments have been inserted to easily find the specific table code to copy and paste.
If you need one customized for your department or unit, please contact Jill Lenz at 491-6585 or jill.lenz@colostate.edu.
- Gather and organize image files.
Transfer existing gifs and jpgs to an images subfolder
or save images from an existing web page to an images subfolder.
If using a customized top navigation banner, you will need to save the
four images from the customized top navigation as well as the Web Access
Symbol from the template page.
In Internet Explorer, right click on image, choose "Save Picture
As". You will be prompted for the location to "Save in:"
(in Clark C143, please use c:\UserData\images\). Use the name and file
extension type default.
- Verify CSU and CVMBS images in the top navigation are showing.
To view live, save and upload html and image files. View in browser.
To view locally, you will need to redefine the path from absolute to
relative. In Dreamweaver, select the image in the Design window, choose
the path in the Properties Inspector by browsing with the folder icon
to the image in your site's image folder and verify "Relative To:"
is set to "document".
Refresh and save the html file. The images should appear. If not, verify
image names, locations and paths to images.
Customize the Title <title> tag.
Titles
All <title> tags should include "CVMBS - " and descriptive text
about the page. It should also include the text "Colorado State
University" per the CSU Web Site Requirements, Guidelines, and
User Responsibilities at http://graphicstandards.colostate.edu/index.asp?page=web_standards_guidelines
<title>CVMBS - Descriptive Text - Colorado
State University</title> -
Customize three metadata tags.
There are three meta tags to customize for 1) description, 2) keywords
and 3) author name. The description and keywords help search engines
find your site and are per the CSU Web Site Requirements, Guidelines,
and User Responsibilities at http://graphicstandards.colostate.edu/index.asp?page=web_standards_guidelines.
The author name helps the CVMBS web administrators identify owners
of pages.
<meta name="description" content ="Text describing the content
of the page.">
<meta name="keywords" content="College of Veterinary Medicine and
Biomedical Sciences, CVMBS, include additional keywords as needed">
<meta name="author" content="names of all persons who have worked
on the document">
-
Customize the header of the page.
<h1> Header </h1>
-
Modify left-hand navigational links in the left hand column. (sectionhead=main
heading under which menu items are listed; menuitem= linked menu items
listed under a section head; menuhead= linked sectionheads). Add more
as needed.
- Modify content to the main column, especially the mailing address.
Other modifications may include copying and pasting from an existing
file into Dreamweaver.
- Mark up content with CSS styles as needed.
- Delete the following:
All <font> and </font>
elements and their attributes. Use classes from the style sheet instead.
Font tags are deprecated per W3C
for this version of HTML.
All repetitive occurrences of forcing spacing.
- Verify the Body Tag does not contain any attributes such as link
color because it is defined in the Style Sheet.
<BODY>
- Check your document at this point. Save the document and/or upload
to the web server.
- Verify all hyperlinks are changed from absolute links.
ex: <a href="http://www.cvmbs.colostate.edu/images/csu_logo.gif">
to relative links
ex: <a href="/images/csu_logo.gif">
- Change all <b> ... </b> bold tags to
<strong> ... </strong> per CSU
Accessibility Guidelines (1.d.).
- Change all <i> ... </i> italic tags to
<em> ... </em> per CSU
Accessibility Guidelines (1.d.).
- Modify page footer.
The footer at the bottom of each page is centered with a horizontal
ruler and text containing the contact e-mail address, an optional copyright
statement and JavaScript for date of update.
The footer also incorporates links to the University's equal opportunity
statement (welcome.colostate.edu/index.asp?url=info_csu-equalop),
disclaimer statement (welcome.colostate.edu/index.asp?url=info_csu-disclaimer),
and privacy policy (welcome.colostate.edu/index.asp?url=info_csu-privacy_pol)
per the CSU Web Site Requirements, Guidelines, and User Responsibilities
at http://graphicstandards.colostate.edu/index.asp?page=web_standards_guidelines.
Update the e-mail address contact. Only one contact e-mail address
should be listed at the bottom of a page. This should be the e-mail
address of the person ultimately responsible for the content of the
document, not the coding of the document. Remove the <em> tags
around the contact name.
Keep or delete the optional "Web Access Symbol" that links
back to the CVMBS
Web Accessibility features built-in to the 2001 website redesign.
- The following requirement applies to all pages of official University
Web sites and Web applications for academic departments
per the CSU Web Site Requirements, Guidelines, and User Responsibilities
at http://graphicstandards.colostate.edu/index.asp?page=web_standards_guidelines
and is built into the footer.
"All official University Web pages for academic departments
will include, in a prominent location, a link to the Office of Admissions
Web site (admissions.colostate.edu). The link may read "Apply
to Colorado State" or "Apply to CSU" or even simply
"Admissions." The goal in this is to ensure that prospective
students and others always have a clear pathway to joining our University
from all entry pages."
- Check Spelling.
In Dreamweaver, use the menu commands Text > Check Spelling or Shift+F7.
- Save and/or upload, and review in at least two browsers, Internet
Explorer and Netscape Navigator.
- Validate links.
W3C Link Checker (http://validator.w3.org/checklink/)
The W3C HTML Validation Service checks HTML documents for conformance
to W3C HTML and XHTML HTML standards. Enter the URL of your page, or
upload pages from your computer.
- Validate code.
HTML Help (http://www.htmlhelp.org/tools/)
The Web Design Group (WDG) offers an HTML validator, a link checker,
and a CSS check. Has material on a wide range of HTML related topics,
including an excellent reference guide to HTML 4.0 elements and their
usage.
-
Validate for accessibility.
Cynthia Says (http://www.cynthiasays.com)
Cynthia is a web content accessibility validation solution, it is designed
to identify errors in design related to Section 508 standards and the
WCAG
guidelines. The main purpose of this portal is to educate web site developers
in the development Web Based content that is accessible to all. This
online test only validates one page at a time. Note this demo will test
about one (1) page per minute / per site.
More validators and tools available at http://www.colostate.edu/Depts/ATRC/tools.htm
|
