Web templates are pre-designed layouts that allow beginners and experienced designers alike to build professional quality web sites faster and easier. Web templates will also help to provide a consistent look and image and serve to further connect all of the constituencies to the University.
As part of the branding initiative currently engaged by the University, it's expected that all official URI web pages utilize the Web Templates. Official web pages are defined as any web page on a URI web server that have been created by the University, its schools, departments, or other administrative offices.The URI Web Templates are NOT intended for use on personal or student organization web sites.
The Web Templates are designed to operate within the guidelines defined in the URI's Visual Standards Guide. It is strongly recommended that departments and administrative units get familiarized with these sites/guidelines to follow them while utilizing the templates. Please also refer to the campus web page guidelines for logo usage and color specifications, for access to URI ImageBANK, and for web page authoring tips and techniques. If you have questions about the Web Templates, please contact the URI HelpDesk.
Template components
The Web Templates consist of:
- URI masthead uniquely and consistently identifying the University on all URI web pages,
- department content area, determined and designed by site owners,
- URI footer listing copyright, disclaimer and contact information for the University.
URI masthead: The masthead incorporates the University Signature (currently the University of Rhode Island text) and a Web toolbar with utility links to URI A-Z and Directories and a search form at the top of the page in dark blue background. The University Signature will change as the University develops its new brand in spring 2008.
Department content area: Departments are responsible for the design, layout and content of this area. To help orient site owners to develop functional and user friendly web sites, the URI Web Templates include the following suggested elements for that area:
- Breadcumb section listing the current path users have taken to navigate a site. This field can also be used to display a second set of navigation for a site.
- Navigation on the left providing main navigational links specific to a school or department
- Department contact information listing its mailing address (plus physical location if different), email address and/or phone number
- Department photo
- Site title displaying the name of a school or department. It should appear at the top of every page of a site.
- Page title unique to a specific page
- Spotlight section highlighting important news, events and programs of a school or department
- Page content providing the main content of the page
URI footer:The footer on the bottom includes footer rule, copyright, University contact information and links to disclaimer statement and the feedback tool at the bottom of every page.
View template outline | View detailed template outline
Template styles
Three variations of the templates were developed, all of which include similar elements.
- Version 1 Two column layout (with top department photo, left navigation and right content column)
- Version 2: Two column layout (with left navigation and right column containing department photo and content )
- Version 3: Three column layout (with left navigation, middle column containing department photo and content, and right column for highlighting specific programs, services or events.)
- Template 1 with second set of navigation (instead of breadcrumb)
- Templates as implemented on Providence campus site
- Templates as implemented on College of Nursing site
- Templates as implemented on College of the Environment and Life Sciences site
Template download
The Web Templates are provided in three different formats. For Macromedia Dreamweaver users, the .ZIP file below contains new template (.DWT) files and the corresponding CSS and images. A .ZIP file containing examples of the HTML, CSS, and images used in the site is available for other users.
Click on the links below to download the zip files. When prompted, click "Save" or "Save as ..." and save the files to an appropriate location on your computer.
Macromedia Dreamweaver 8 Templates: |
dreamweaver_templates.zip | |
HTML Templates: |
html_templates.zip | |
Templates for Campuses (other than the main Kingston campus) |
Contact the University Webmaster |
How to use the templates
Instructions on how to use the Dreamweaver templates
Template standards used
Alignment: The templates are 768 pixels wide and centered in the browser window.
Color scheme: The colors below represent the hexadecimal and RGB values of the colors that appear on the templates.
Color R G B HEX Value Dark Blue 0 0 153 #000099 Gold 255 153 51 #FF9933 Dark Gray ( for body text) 51 51 51 #333333 Light Gray (for header background) 204 204 204 #CCCCCC
Text fonts: The system text for body copy is Arial, Helvetica, Verdana, San-serif.
- Text size is set to "small" which is equivalent to 10 point font size / regular
- Text color is dark grey, #333333.
- Text link color is URI dar blue, #000099
- The rollover state for text links has background color of grey and light blue.
Page style and layout: The Web Templates use strictly CSS-based layout which separates the content from the presentation of the site and allows for easier design updates, improved accessibility features and significant cost savings to the site owner.
Stylesheet: There are two types of stylesheets attached to the Web Templates, one for defining visual formating and positioning of content on screen and the other for rendering nice and readable content for print that are devoid of all the screen-specific elements found on most web pages.
Template validation (for compliance with latest web standards and accessibilitly guidelines)
The Web Templates follow the XHTML 1.0 transitional and Cascading Style Sheets, Level 2 standards. The URI Web Templates are also constructed to comply with the Web Content Accessibility Guidelines 1.0, Priority 2. More information on web accessibility is available on the World Wide Web Consortium (WC3) web site at: http://www.w3.org/WAI/. A list of page validation tools can be found below:
- The W3C Markup Validation Services - http://validator.w3.org/
- The W3C CSS Validation Service - http://jigsaw.w3.org/css-validator/
- Watchfire WebXACT (page accessibility validation tool): http://webxact.watchfire.com/
- Lynx (text-only web browser): http://www.delorie.com/web/lynxview.html
Browser compatility
The Web Templates have been tested to be compliant with the following browsers:
- Microsoft Internet Explorer 7
- Microsoft Internet Explorer 6
- Opera 9.10
- Mozilla Firefox 2.0.0.1
- Mozilla Firefox 1.5.0.7
- Mozilla Firefox 1.08
- Netscape 8.1
- Netscape 7.0
- Apple Safari 2.0.4
- Camino 1.0.
Consistent use of terminology
To promote URI's brand identity, official URI web sites are encouraged to use consistent terminology. All official web sites are advised to follow the guidelines below:
- web site: Use as two words; do not capitalize except at the start of a sentence.
- homepage: Use as one word and in lowercase.
- email: Use "email" instead of "e-mail; do not hyphenate.
- online: Use "online" instead of "on-line", do not hyphenate.
- Internet: Capitalize when referring to the Internet.
- World Wide Web: Capitalize when referring to the "World Wide Web" or the "Web".
- webmaster: Use as one word; do not capitalize.
- URL: capitalize. Do not spell out "uniform resource locator".
- webcast: Use as one word; do not capitalize.
References: Hale, Constance, and Jessie Scanlon. 1999. Wired style: Principles of English usage in the digital age. New York: Broadway Books.
