IS&T Web Site Style Guide

Web Page Templates

Web page templates are provided for a wide range of document types which include, but are not limited to, simple text, tables, lists, forms, how-to procedures, project notebooks, and team pages. The variety of templates allows for flexibility in the presentation of content on the IS&T site.

Note: Some content on the IS&T web site is delivered dynamically via databases and does not require the use of these templates. Please consult the IS&T Web Site Guidelines and Procedures for content submission guidelines, or contact the IS&T Web Site Team with questions.

Using the templates to add your own pages to the site is a three-step process:

• STEP 1: Preview the Templates.
• STEP 2: Download the Templates to your computer.
• STEP 3: Customize the Templates with your own content.

STEP 1: Preview the Templates

The following templates are available. You should use the template that makes the most sense for the type of content that you want to create. For help with choosing or customizing templates or for additional template options, contact the IS&T Web Site Team. Information on how to download the templates is below.

STEP 2: Download the Templates

You can download a self-extracting archive of all of the templates listed above to your computer by clicking the appropriate link for your platform below.

Windows:	IS&T Web Page Templates download [.zip file]
Macintosh:	IS&T Web Page Templates download [.sitx file]
Linux/Unix:	IS&T Web Page Templates download [.tgz file]

After you download the file, double-click to extract the templates to your machine. Once extracted, the files are stored on your computer where you can edit them using your favorite HTML editor. The template filenames are named in a manner consistent with the conventions in the preview table above (e.g., template01-simple-text.html). For help, contact istweb@mit.edu.

STEP 3: Customize the Templates

While IS&T recommends and supports Macromedia Dreamweaver as a tool for web page development, the templates can be edited using just about any HTML editor. (Note that the Computing Help Desk provides support for Dreamweaver only.)

The following are some general tips and guidelines for template editing:

• The first paragraph of content for each of the templates provides editing tips specific to that template.
  
  
• If editing the templates in Dreamweaver's "Design" view, note that images will appear to be broken and style sheets (such as font face, color, and size), will not be applied. This is a limitation of Dreamweaver's Design view. However, you can easily preview your changes (i.e., to see what the pages will look like when they are published to the Web), in your favorite web browser. From Dreamweaver's File menu, choose Preview in Browser, or press the F12 key.
  
  
• If editing the templates with a text editor (such as NotePad, Emacs, SimpleText, BBEdit, HomeSite, etc.) note that HTML comments have been added to the code to help identify unique areas of the template (e.g., <!-- begin Information Services and Technology topnav -->) and to help guide you as to where to insert your content (e.g., <!-- Page content --> )
  
  
• Font face, type size, type style, etc. are all controlled by the cascading style sheet. For this reason, you will NOT need to specify font face, size, or color in any document. Simply follow the conventions provided in the templates to achieve the style you want. See the Cascading Style Sheets section of this guide for additional reference.
  
  
• It is important to edit page <title></title> and <meta name="Author" content="">, <meta name="keywords" content="">, and <meta name="description" content=""> tags so the pages will be indexed properly by the search engines (and for other reasons). For guidelines, see Using Meta Tags. Also please remember to update the <!-- Page Last Modified: XX/XX/XXXX --> comment tag with the latest modification date.
  
  
• Do not edit any code between the <!-- begin Information Services and Technology topnav --> and <!-- end Information Services and Technology topnav --> comment tags or between the <!-- begin Information Services and Technology footer --> and <!-- end Information Services and Technology footer --> comment tags
  
  
• After you customize a template, be sure to review the Publishing Checklist. It is recommended that you then upload your draft pages to a draft directory within your site (e.g., yoursite/dontindex) and submit the URLs to istweb@mit.edu for final review by the IS&T Web Team.
  
  
• For help, contact the IS&T Web Site Team.