|
Guidelines and Standards for VIMS Web pages
VIMS Web pages are defined as those pages / sites that convey and fulfill the mission of VIMS, including its science, research, teaching, and advisory services. To place personal pages, please read this.
You may contact Dr. Dave Malmquist, Director of Communications, or Barb Parcell, Webmaster, for any matters regarding the VIMS Web site.
Web Design Criteria
- All pages should carry a VIMS banner with a link to William & Mary, a navigation bar, “bread crumb", and “Quick Links and Search” drop-down box
- Use Arial, Helvetica, or sans serif fonts
- Color palette should reflect coastal ocean (e.g., green/blue/gray/sand)
- Avoid clip art. The VIMS Publications Department has an extensive image bank from which you can obtain high-quality digital images.
- Any page whose URL begins with text other than www.vims.edu.(e.g., www.wm.edu ) should display in a pop-up window. (See below, "Code")
- HTML templates for faculty home pages and other web-page types are available.
- Pages should meet Accessibility Standards as defined by Section 508 of the Rehabilitation Act. (see these practical applications)
- The main page of a site is named index.html
- There should be NO spaces in filenames / page names
Images
- Use an image editor to crop, resize or adjust an image for a web page. Do not use HTML code to resize an image, as this does nothing to reduce the actual filesize of the image.
- Download the VIMS logo
- Download the larger page banner
- Download the smaller page banner
Code
Putting together the following sections of code creates a page that looks like this (full set of code is available here).
-
This code creates a title for the page. It appears in the very top bar of the page, and it helps search engines to discover the page. Include it in the < head > section of the page.
-
This code is an example of CSS coding (stylesheets), which is the preferred way to control the appearance of text. It goes in the < head > section of a web page.
- This code contains two javascript functions. Place this code in the < head > section of a web page.
1. The function, jumpPage, is needed so that the drop-down navigation menu can work without a "go" button.
2. The function, newWindow, creates a pop-up window. Non-VIMS URLs should display in a pop-up window.
-
This begins the < body >. It sets the background color to white (#ffffff), and invokes "maintext" from the stylesheet, setting the font style to "arial" and "10-point".
-
This code is an example of an image map, sometimes called a "hot spot". It creates sections of an image that can link to other web pages. Include it in the < body > section of a web page. This code is for the large VIMS banner.
-
This table code goes in the < body >. It does two things.
1. It creates the "breadcrumb" trail that serves as a navigation aid. The "class=trail" refers back to the stylesheet.
2. It performs a virtual include of the file quicksearch.html. It creates the drop-down navigation menu.
Note: The permissions on any page displaying the drop-down menu need to be set to 755 (rwxr-xr-x) in order for the drop box to appear.
|
<!--#include virtual="../quicksearch.html" -->
|
){kind=link}
){kind=link}
){kind=link}
