|
About this Guide
This guide describes the HTML code and graphics used to create web pages for Wake Forest University. Web authors are encouraged to familiarize themselves with the examples and templates described below.
Maintaining Personal Web Pages
The WFU graphic identity is not to be used on personal pages. Specifically, personal pages should not contain images, logos, graphics or text from the Wake Forest University home page or other official pages. Students, faculty and staff maintaining personal web pages, including student organization sites, should instead refer to the guide on Maintaining Personal Web Pages.
The Wake Forest Web Style: An Overview
Web pages can be wildly different in design, and to present a consistent, easy to use interface, the University has adopted a standard design style for all official University Web pages.
The standard design incorporates:
- A solid white background
- Black text
- The Wake Forest header graphic and imagemap
- A horizontal text header with page title & navigation menu
- Non-framed page design
- Use of cascading stylesheets (CSS) to control typography.
The reason for the standard is simple: each page on the University web site — no matter how obscure — can be reached directly through search engines and links from other sites, bypassing the top-tier pages of the site. Using a standard design at all levels of academic and administrative department sites ensures that users have ample navigational aids to commonly requested pages. The Wake Forest University identity is thus continually reinforced on each page within the site.
Note that the standard does not apply to and should not be used on personal pages of students, faculty and staff.
Sample HTML Code
Web authors can easily build pages that conform to the standard Web style by using some common HTML code for the graphic header, text header and logo footer.
The Graphic Header
The standard header incorporates a graphic and imagemap, a javascript that refers conditionally to one of four cascading style sheets (optimized for Windows, Macintosh, Unix and generic browsers), a BODY tag, and a table that contains the header graphic and background image. The code has been tested on a variety of browsers and appears to function properly across platforms and browser types. The appearance of the header graphic and text may differ on older browsers that do not make use of cascading style sheets and javascript functionality. The complete code for the graphic header is included in the template and should not be altered by the web developer.
The Text Header
The text header includes the page title and navigation menu for the subsite. Because the text header is unique for each page or subsite, it must be edited manually by the web author. The text header is included in the template page.
The Content Area
The content area may be freely edited to suit the needs of the web developer — only the primary table width needs to remain the same. It is strongly recommended that developers use nested tables to columnize or otherwise partition the content area.
The Logo Footer
The footer consists of a simple table with the Wake Forest University logo, address and feedback link. The footer is included in the template and should not be altered by web authors. It should appear on all official university pages.
The Template
The template provides all of the elements of the standard design and serves as a starting point for understanding and using the features described above. Web developers should understand basic HTML prior to using the template.
Please contact Creative Services for a copy of the template.
Additional design elements
The Page Up Pointer
For lengthy pages where users may want to go back to the top of the page, consider using the Page Up pointer:
The HREF tag is needed to make the graphic to work:
<![CDATA[<A HREF="#top">
<IMG SRC="http://www.wfu.edu/images/up.gif" WIDTH="43"
HEIGHT="32" BORDER="0" ALT="Go to top of page">
</a>]]>
Note that a "top" anchor is necessary at the top of the page for this code to work in all browsers. A top anchor is included in the template file.
Current Date
The following code will display the current date in any style text you wish.
<!--#exec cgi="/cgi-bin/textclock.pl"-->
Modifying it with the tag <![CDATA[<FONT COLOR="630000">]]>
Results in:
Saturday, July 5, 2008
Last Date Modified
The following code will display the modification date of a document.
Last modified: <!--#echo var="LAST_MODIFIED" -->
As in:
Last modified: Monday, 01-Oct-07 12:52:03
Access Counts
To include access counts in documents, add the following:
Access count: <!--#exec cmd="/pub/gopher-data/cgi-bin/access_count username-docid" -->
Replace username-docid with your user name and an ID of your own choosing
for the document. For example, if your username is Mary, and you want to keep an access counter for your home page, you could use:
<!--#exec cmd="/pub/gopher-data/cgi-bin/access_count mary-home" -->
Tips For Wake Forest Web Developers
Below are several links to online resources for Web authors, but before you surf on, here are a few quick tips that will help make your Web site more usable.
Avoid large graphics
For most Web pages, graphics should be no more than 15 to 20 KB in size. One rule of thumb is to limit the "load" of images and text to no more than 70 kilobytes per page. The goal is for modem-based users to download a page in less than 20 seconds.
If you do need to display large graphics, provide a thumbnail image that links to the larger graphic. Don't make the mistake of simply resizing a large image using the WIDTH and HEIGHT arguments in the IMG tag — that makes the dimensions smaller, but the file size remains the same.
Compatibility is crucial
Not everyone's Web world revolves around Netscape or Internet Explorer. Do not create pages specifically for one brand of browser. If possible, preview your pages in several different browsers before posting them on the Web.
Just because you can do something...
...doesn't mean you should. A neon purple background and blinking lime-green text IS possible. Need we say more?
Keep track of changing standards
HTML standards change, and features once limited to specific browsers may now be universally accepted. Visit the WWW Consortium to see what's new.
Evaluate your HTML code: Get an estimate of download times through a free HTML validator, such as Doctor HTML. Yahoo also offers an index of HTML validators.
Use repeated graphics: A repeated graphic element, such as the "to top" triangle on this page, is loaded into the user's cache when it is first encountered. Subsequent use of that graphic therefore requires no additional download time. [This holds true as long as you use the identical IMG SRC tag and path to the image.]
Resources for Web Authors
For information on graphic design, HTML, CGI, JAVA and other Web-related issues, consider visiting the following sites.
World Wide Web Consortium (AKA W3C)
The standards body for HTML, CSS, XML and other web language development. Please see the following areas:
CSS Level 2 Recommendation
Style Sheet Validation
HTML 4.0 Recommendation
The Webdeveloper.Com library
Info on HTML, CGI, Javascript, streaming video...
HotWired's Webmonkey
Be real cool. What was that we said about lime-green text?
The Yale Web Style Guide
A comprehensive reference for interface design principles. Produced by Yale's Center for Advanced Instructional Media.
Yahoo's HTML Documentation Index
Includes everything--and then some.
See Also: Yahoo's Guides and Tutorials
|