TRINITY COLLEGE Web GUIDELINES

The Trinity College Web site is an online means of communicating a wide variety of information about the College to a diversified audience, including prospective students. It represents the identity and image of the College, and reinforces the mission and values of Trinity. The purpose of the Web Guidelines is to ensure that all official Web pages representing the College consistently reflect Trinity's quality and image. It is the responsibility of each department or office that maintains its individual section of the College site to follow the content, navigation, and design guidelines as described below.

Content/Navigation standards:

• Official logo headers must be used as laid out in the templates, including the global links bar as well as the "logo" link back to the home page. If templates are not being used for pages within a department site, the individually designed Web page must use the official Trinity logo that is also a link back to the home page.
    
• Contact information, or link to contact information must be prominently displayed on the landing page of each individual department or office site.
    
• Title to each page that describes the content of the page must be prominently displayed at the upper right side of the page.
    
• All pages must have clear and effective navigational links to get back to the home page or to the landing page of the department or office site. Please note that your site landing page URL should always begin with www.trincoll.edu/, followed by the path to your site location within the overall College site.
    
• Duplication of content from other departments and offices must be avoided. Instead, links to existing content should be provided when needed. This will assure accuracy and timeliness of content.
    
• It must be ensured that there are no broken links or dead ends on each Web page.
    
• Any links that take the Web visitor off a Trinity site page to an external site or to a non-office page (e.g. individual home pages) must open up in another window.
    
• All Trinity College Web sites/pages are expected to follow legal and copyright laws regarding content, including the use of photographs, artwork, audiovisual materials, and other intellectual property.

 back to top

Design standards:

• Colors must be selected from the Web-safe color choices provided within the color palette.
• Fonts must be used as detailed below:

Titles –

font: Times New Roman
style: bold italic
size: 18 point (24 pixels)
color: #A13400

Subtitles –

font: Verdana
style: bold, all caps
size: 10 point (11 pixels)
color: #666666

Text –

font: Verdana
style: regular
size: 10 point (11 pixels)
color: #000000

Graphics must have meaningful descriptions entered (will display as  alternate text tags), and must include height and width attributes. All photos/graphics should not exceed 250 pixels in width.

• Overloading a page with photos should be avoided, as this will slow the page download time considerably. It is strongly recommend that no more than one or two photos be used on a Web page. (If you do have several photos you want to post online, a “photo gallery” Web page that opens up in another window should be set up.) 
     
• To maintain visual attractiveness, please use formatting (bold, italics, colors, etc.) judiciously. The use of frames within sites is particularly discouraged, as there are serious search and navigational problems associated with the use of frames. Web pages must not use technology that interferes with the navigation or significantly hinders download times.

 back to top
  

The Content Management System (CMS) User Guide: 

The Content Management System (CMS) allows you to access and enter data (text and graphics) through a Web-browser interface, so that content can be easily created and updated by users with little technological training. It also allows for display of the same content in various locations, in different ways. This User Guide provides information about how to use the new CMS – how to move your Web pages into the new templates, and how to update and maintain your Web pages accurately and efficiently.

 back to top

CMS Terms and Definitions:

Editors – Users who can access the CMS resources to create/edit pages, and post new/edited pages on the live site.

Authors – Users who can access the CMS resources to create/edit pages and save them (but not post them to the live site)           

CMS Channels – Folders where CMS pages are stored.

Resource Gallery – Folders where graphics, documents, etc. are stored.

Template Gallery – Folders where templates to create new pages are stored.

 back to top

CMS Technical Requirements:

The CMS is designed to work on a PC Windows platform (and not on Macs), and requires the Internet Explorer browser 6.0 (and will not work with Netscape, Safari, Opera, etc.).

back to top

Using the CMS:

To log in:

1. Open Internet Explorer and go to https://www.trincoll.edu/trincoll/admin/login.aspx 

2. Enter your NT username and password to log in to the CMS.

 back to top

To create new Web pages: 

Once you’ve logged in, you will be taken to the new College home page.  Navigate to your site landing page, and click the Switch to Edit Site link that appears on the bottom of the page to access the editing functionality. (Note: Clicking on the same …Edit Site link on the home page or any other page for which you don’t have editing rights, will let you view some page attributes, but will not give you the editing functionality.)

Click on the Create New Page link, and the Select Template Gallery will appear. Open the Shared Templates folder, decide which template you will need, and then click the Select icon associated with the specific template.

Enter the appropriate content in all the placeholders, following the guidelines below, then click Save new page.  You will now be prompted to assign a name and a display name for the page (there is a different function for each).

The name of the page will appear in the final url: www.trincoll.edu/path to your site/name.htm. When assigning the name for the page, try to keep it as short as possible. Also, do not use spaces. If you must use more than one word, either run them together or use an underscore between the words (two_words). 

The display name will appear in the navigation and the breadcrumb trail on the top of the page. Assign a short and concise display name in order to keep the breadcrumb trail compact. An especially long breadcrumb trail will break the template.

If you’re an Author, and the page is ready for the Editor to review, you must now click Submit. The Editor will now be able to access the new page by logging into the CMS, navigating to your site, and clicking the Approval Assistant.  The Approval Assistant will display all pages that are waiting to be reviewed before publishing. If the pages are ready to be published, the Editor simply selects the check box next to the pending page, and then clicks Approve. (Note: a page will not display on the live site until an Editor has  Approved it.)

 back to top

To copy content from a current Web page on your site, simply select the text, then copy and paste it into the template Content Body field.

NOTE: Sometimes, text from another Web page will have embedded HTML tags that will override the CMS formatting functions. If you should encounter this, try pasting the content from the original page into Notepad, and then copy the same text from Notepad into the CMS.

To copy tables from a current Web page (using FrontPage):

1. Open the page that has the table in Frontpage;
    
2. Place your curser anywhere in the table, then using the Frontpage toolbar, select Table/Select/Table.
    
3. Copy the highlighted table, and paste it into the template’s Content Body field.
    
4. If, after pasting the table in the template, you notice that the font within the table retains the original font specifications that were assigned in Frontpage, click and drag over the text to select it, and then use the font tools in the CMS toolbar to assign the correct font specifications (see design standards above).

NOTE: If the table width has been set to a specific pixel size that is greater than the dimensions of the available space in the CMS template, the template will break. The maximum width for tables is 525 pixels. To find out how wide a table is (using Frontpage) place your curser anywhere in the table, right click and select Table Properties.  

 back to top

To import graphics (new or from a current Web page), you will need to upload them to your department's CMS Resource Gallery:

1. Save the image you would like to upload to your desktop. (If saving from a current Web page, right-click on the graphic in your Web browser, select Save Picture As… and save it to your desktop.)
     
2. Log into the CMS, navigate to your landing page, and click the "Switch to Edit Site" link at the bottom of the screen.
    
3. Click the Resource Manager link which appears among the list of edit links at the bottom of the screen.
    
4. If necessary, navigate through the image gallery list until your department's gallery is selected. Click the "Add New" button. In the resulting box, click "Browse" to locate the image file you saved to your desktop.
    
5. After you have chosen the image and its path is displayed in the text field next to the "Browse" button, click OK.
     
6. The system will prompt you to assign a display name to the image, as well as a description. You must assign a name, but the description is optional.
    
7. Click OK.

 back to top

To insert an image from the shared CMS Resource gallery, …

1. Click your cursor in the main text box to define where you want your image to appear.
     
2. In the toolbar, click the Insert Image icon. (click here for detailed view)
     
3. In the resulting box, click Insert Shared Image. You will see a list of image galleries available to you depending on your permissions. Select the appropriate gallery.
     
4. The CMS will display the first five images in the gallery. To find a specific image, either select "All" from the Items per Page popup menu, or click the "..." in the list of numbers at the bottom of the page. You can preview an image by clicking its thumbnail under the "Preview" column. (If you are looking for a recently uploaded image, it should be the very last image in the gallery.)
     
5. After you have located your image, select it by clicking the hand icon (click here for detailed view) in the "Select" column.
     
6. The CMS will then display the image's properties. Unless the image is a link, leave the HyperLink field blank. Type a brief description (this can be one word) in the Alternate Text box and click "Insert". (NOTE: the alternate text will display when a viewer hovers over the image you insert. It will also be used by viewers that have opted to turn off image display when browsing Web pages.)
     
7. The image will now appear in your page.

 back to top

To wrap text around an image, …

1. After you have placed the image following the steps above, click on the image to select it;
      
2. In the CMS toolbar, click the edit source icon (click here for detailed view)
       
3. Scroll through the html code until you find the end of the image tag. example: <IMG alt="Goodwin Arch" hspace=10 src="/NR/rdonlyres/DF868A4F-F418-45E2-AADD-7B710CDBFFBA/0/applying.jpg" border=0>
       
4. Insert the following code: align="right" hspace="10" exactly as shown below:
       
   <IMG alt="Goodwin Arch" hspace=10 src="/NR/rdonlyres/DF868A4F-F418-45E2-AADD-7B710CDBFFBA/0/applying.jpg" align="right" hspace="10" border=0>
      
5. In the CMS toolbar, click the edit source icon again to return to normal view, and then save the page.

 back to top

To insert a hyperlink in your CMS page, type the text for your link and select it by highlighting it. Click the Edit Hyperlink icon on the toolbar. If the link is to an external page, type the URL for that page in the Hyperlink Address box (http:/...etc). If the link is to a page within the CMS, click the Browse button, then select the page title you want to link to and click OK.  If you want the page you are linking to open in new window (instead of opening in the same window) make sure that you select New Unnamed Window from the drop down menu that appears next to the Open Link In… field.

When you are finished assigning properties for the new hyperlink, click OK.

 back to top

Linking to documents/attachments (non-image files such as PDfs, Word documents, etc.):

All documents and attachments should reside in the Web space that has been assigned to your department, office or program. This is the same Web space that your entire site used to reside in before the introduction and migration to the CMS. (Most of you probably accessed this Web space utilizing Frontpage.)

To create a link to a document or attachment in this Web space from the CMS page, type the link copy, highlight it, and then select the Edit Hyperlink icon in the CMS toolbar.

In the hyperlink address field, enter the complete address for the document or attachment. Please note that this full address should be the address that points to your Web space (which you will see on the top of a page when you are editing in Frontpage), or the complete address that appears to the general public when they visit the page.
      For example:
          http://www.trincoll.edu/depts/pubrel/alumni/contact_us. pdf is correct.
          http://www.trincoll.edu/pub/alumni/contact_us. pdf is also correct.

The Open Link In drop down menu should have the New Unnamed Window option selected. This will cause the document/attachment to open in a separate window, and allow the viewer to close the window when they are finished and remain on your site.

Click OK, and the link is ready.

 back to top

To edit a CMS page:

1. Follow the same procedure as described above to Log In,;

2. then navigate to the exact page in your department or office site you wish to edit;

3. click the Switch to Edit site link at the bottom of the page;

4. From the list of edit options that will now appear at the bottom of the screen, click on the Edit link;

5. make any necessary changes to your page;

• If you are an Author, click Exit and Save, and then Submit. The edits will not appear in the live version of the site until the editor for your department approves the revised page.
   

• If you are an Editor, click Exit and Save and then approve to post your changes on the live site.

 back to top

Editing navigation items in the left column

Deleting a page from the navigation:

1. Make sure you are working in Edit mode;
2. Click on the navigation link that you would like to delete;
3. Now that the page you want to remove has been selected, scroll down the page so you can view all of the edit functions at the bottom of the page and select “delete”;
4. Click Okay when prompted, and the page will be removed along with the supporting link in the navigation.

Renaming a link in the navigation:

1. Make sure you are working in Edit mode;
2. Click on the link in the left column that you want to rename (this will select the specific page);
3. Scroll down the edit function links that appear at the bottom of the page until you see the Page Properties link;
4. Click this link, and a new window will open. At the top of this window, you will see two fields; name and display name.
    
   • The name is used in the final URL for the page, and must be as concise as possible without blank spaces between words. The name of the page that you want to have function as the home or landing page for your site MUST be default. Do not use the same name for more than one page in your site.
      
   • The display name will appear in the left navigation, and also in the bread crumb trail that appears on the top of the page (home: academics: study: etc.) Keep in mind that a very lengthy display name may cause the bread crumb trail to be especially long, and this could break the template. You can change the Display Name (which will appear in the left navigation), but the Name itself must remain default.

Changing the order of links in the navigation:

1. Make of list showing the desired order for the links to appear, and send this list along with your department name to Webmaster@trincoll.edu

 back to top