The template files have been created with straight HTML, and you should be able to take a "fill in the blanks" approach with the template. However, it is in your best interest to attempt to understand the HTML structure of the template, as well as any cascading style sheets or JavaScript that it may reference.
The main template file contains HTML with minimal inline JavaScript, but it may also reference external JavaScript, CSS, and images.
For layout purposes, the template contains HTML tables that are nested several layers deep. Try to identify the hierarchy and see where your site's content will fit in. (Tip: change the value of the "border" attribute to "1" to see where a table's cells are located). Look at all referenced image files (.gif, .jpg), cascading style sheets (.css), and JavaScript function libraries (.js). Some common ones are most likely in a central location (currently in a hierarchy under http://www.sc.edu/template/). Do not attempt to make local copies of these files; instead, use the central resource to help in maintenance and browser caching.

What is in the template folder?
When you uncompress the zip files and open the template folder, you will find three folders: "Basic," "Tool-tip," and "Photoshop." These folders include the necessary image files needed to begin building a site.
Basic refers to the skeleton Web page contained in the folder that designers may use to build pages that are basically navigation and text only, with no photos or Tool-Tip Bars. The basic template page is similar to the page you see when you click on the Site Information button at the bottom of this page.
Tool-tip refers to the skeleton Web page contained in the folder, with space for photos and Tool-Tip Bars as well as text and additional graphics.
In both the basic and tool-tip folders you will find two additional folders: one titled "graphics" and the other titled "text." Web designers can choose either of these two HTML versions of the template, depending on how they want their pages to perform and be viewed.
The graphics-based version is for Web designers who prefer to create art files for labels and menu items so that font characteristics and page layout remain consistent no matter which browser or monitor settings the end viewer uses. There are editable art files supplied in the Photoshop folder for these labels, as well as files needed to create the Header Page Titles.
The text-based version is for designers who prefer a page that will download as fast as possible and allow the text in a page to be enlarged or reduced in the viewer's browser settings. Designers using the text-based version will still need to edit the Header Page Title art files found in the Photoshop folder. The orientation session will explain in detail the items you will find in the template folder and how to use them. Click here for illustrations of Template Options.

What programs can I use to create a site using the template?
The templates have been created via straight HTML coding. Common HTML editors such as Notepad and BB Edit can be used, as well as commercial Web design programs such as Dreamweaver, Microsoft's FrontPage, and Adobe's GoLive. It is up to individual Web masters to choose the tool they are most comfortable and familiar with.
Although the templates are not dependent on any particular piece of editing software, you need to be extra careful with HTML generators to make sure they do not insert proprietary code into the template that could break compatibility with certain browsers.
Please note that even though the templates are designed using HTML code, there are parts of the design that will require the creation of art elements specific to your site, such as custom page titles in the Header Area. These elements are supplied in the template package as Adobe Photoshop files, and the Web designer will need to have access to programs such as Photoshop or FireWorks to be able to create customized files. If your department does not have image editing applications, University Publication may be able to supply you with art files. Contact webpresence@sc.edu for more information.

How flexible is the template system?
The USC Web Presence is designed to be a flexible system while maintaining a consistent University identity. There are certain elements in the design that must remain consistent to achieve the common look and feel. These elements include the South Carolina Banner, the Header Page Title typographic style, and the USC Home Button and USC Logo Button in the Header Area portion of the page; the width and font of the Left Navigation Bar; and the menu items and art that make up the Footer Bar.
While these few items must retain their built in characteristics, the template system was created to be a starting point and a framework to build on; it is not meant to be a rigid mold that makes all pages exactly alike. For example, in the Tool-Tip Split Template, the Left Navigation Bar is divided by the black Tool-Tip Bar into two sections, with a garnet area and white menu items above and a gray area with black menu items below. This design was created to delineate the natural break between two distinct types of menu items. Not all sites have this natural break and thus do not necessarily need the divided Left Navigation Bar. A solid Left Navigation Bar is an acceptable variation to the template.
The greatest amount of flexibility is available inside the content area, and the Style Gallery illustrates some of the variations in the presentation of sites. Please note that some of the images illustrate pages that are live while others represent acceptable variations and design concepts.

What colors can I use?
There are standard colors built into the template based on the University of South Carolina school colors of garnet and black. These colors are used most prominently in the Header Area and Left Navigation Bar to convey a consistent University image. The garnet, black, and shades of black (gray) are also built into the cascading style sheets and indicate regular text (black), linked text (garnet), and visited linked text (gray). To keep the template as accessible as possible to viewers with all levels of monitors, a Web-safe color palette is being employed in our system. In addition to the Web-safe garnet, black and gray, an additional palette of complimentary colors is available. Click here for the Visual Style Guide color chart. While these are not the only colors available, this chart represents a good range of colors that should work well with the embedded school colors. The template is meant to be flexible. While the colors in the Header Area cannot be altered, colors can be changed in the left navigation bar and content areas. If you have a color you would like to try, contact the Web Presence Team with your suggestion.

Why use the fixed-width format?
The template is targeted for a monitor with a resolution of at least 800 x 600. This sizing of the template should not be modified. Research shows that the vast majority of our users are visiting the USC Web site using computers that are able to display (at least) this resolution. Ideally, a page's content will resize along with the browser window, but using a fixed width provides much more positioning control. Because of the fixed-width tables, you will see bands of white space to the right (and possibly to the bottom) on some screens set for a higher resolution. We have attempted to strike a balance between aesthetics and mainstream technology. Before the Web Presence project was originally launched, a survey of SEC school Web sites in August 2002 showed that all 12 used the fixed-width format. Additionally, 55 of the Web sites at the 63 Association of American Universities institutions used the fixed-width format.

Why does some text look "grayed" out?
Garnet, black, and shades of black (gray) are built into the cascading style sheets contained in the template to indicate regular text (black), linked text (garnet), and visited linked text (gray). After a text link has been used, the text turns gray so viewers have a visual clue as to which links they have already used. These gray visited links are still active and available to be visited again. This simplified color scheme is in keeping with the USC school colors.

How does this system work for people with disabilities?
The USC portal and directory pages, which were built with the template system using tables, have been tested by sight impaired users with the JAWS software program. The portal pages were also found to read logically by mechanical screen readers. Sight-impaired users while using page readers found the relatively limited number of navigational links on the portal page to be an advantage. An overwhelming number of choices to remember can frustrate the user experience for the sight-impaired audience. The templates will continue to be reviewed for useability. For more information about accessibility, visit USC's Accessibility Project site.