Web Template Guidelines

Introduction

In an effort to present a consistent look and feel to the Salisbury University Web site, the Web Development Office has created a Web template for pages on the University Web site. This template helps ensure compliance with Web standards and consistent branding and messages.

Requirements

For the template to work correctly, a content editor must use a computer with Front Page 2003 or SharePoint Designer 2007 . If you need either installed, please contact the Help Desk (75454) or the Web Development Office (75487).

Note: To see which version you have installed, open Front Page (Start > All Programs > Microsoft Office > Front Page)and click Help > About Microsoft Front Page. The version number will be near the top of the window that appears. Click OK to close the window.
Using the Web template

About Web templates:

A web template is a special file that always has the file extension “.dwt” (for Dynamic Web Template). This file “governs” any page to which it is attached. The template has at least one “editable” region defined. When the template is attached to a page, a user can only edit the area(s) defined as editable. The Web Development Office has created the SU template and pre-defined the editable region(s).

About the Salisbury Web template:

The Salisbury Web template is set up so that the Web Development Office has control of the top and bottom of the pages (the header and the footer) and you have control over the content of the menu and the main area of the pages. This scheme provides for a global navigation bar near the top of the page freeing you from having to place links on your site to other areas of the University site.

The template is designed to adhere to Web standards and to work well with older monitors. The width of the page is set to 760 pixels so that a person using a monitor set to 800px by 600px does not have to scroll left to right.

The Web Development Office has designed the left-hand menu of your pages to reside in a single file that is included (or “pulled in”) programmatically on each page to which the template is attached. This file is named menu.htm (or menu.html) and can be edited by you. This scheme allows you to add a new page or section to your site and add your links to one file (instead of adding links to each page in your site).

While you have control over the content of the page and the style of the text, the template is set up so that if you follow a few design suggestions, your Web pages will have a consistent look and feel throughout. These suggestions are covered later in the document.

If you have any questions about updating and maintaining your web site, please contact the Web Development Office at 7-5487.

Updating your Web pages

Logging in to your Web site: 

The first time you log in to your site, follow the steps below:

1. Open Front Page.
2. Click File > Open Site.
3. Enter the full Web address of your site (e.g. http://www.salisbury.edu/nameofyoursite) in the Site Name field. Note:
4. Click “Open.” Your site should open. If you are prompted to login, enter “salisbury\yourusername” (no quotes) as the username and enter your regular network/
   e-mail password.

Subsequently, your site should open when you start Front Page, unless you access the site in Front Page from a different computer (or you get a new computer) in which case you’ll need to follow the steps above.

Opening and editing existing pages:

Front Page 2003 has an “Explorer”-style interface where you can have your folders, files and Web pages appear on the left-hand side of the window, and the page you are editing appears in the larger, right-hand side.

Note: To turn on/off your left-hand Folder List, click View > Folder List.

To open a page in the right-hand side of the window, double-click on a Web page in the Folder List view. Once the page is open in the right-hand side of the window, editing the content is similar to using Microsoft Word in that you click to place your cursor in the document and start typing.

Styles

Several styles are pre-defined to help you achieve a consistent look:

Heading 1 – Use this for the top title of the content.
Heading 2 – Use for sub-headings.
Heading 3 – Use for sub-sub-headings 

Note: to apply a Heading style to text, highlight the text and select the heading style form the Style Selector drop-down at the upper left (if you do not see the Style Selector, click View > Toolbars > Formatting).

Regular text font is set to web standard Verdana.

Note: You can bold, bullet, enumerate, and italicize  text in the same way you bold text when using Microsoft Word.

Hyperlinks are set to maroon and underlined in the body of the page.

Note: To create a hyperlink (i.e. a link to another Web page or document), highlight the text, click Insert > Hyperlink. In the window that appears, select the Web page or document you want to link to, or type in the full Web address of the Web page, click OK.

Style suggestions:

While you can change the font and font size of any text on the page, we suggest you use these pre-defined styles to help keep your site internally consistent and consistent with the overall Salisbury University site.

Note: The width of the main content area of the page is set to 562px. Therefore, any images or tables you place inside of the page should not be wider than 562px.

Creating a new page in your site

To create a new page in your site, you can do one of the following (whichever is easier for you):

1. Save an existing file with a different name (File > Save As...) and replace the contents.
2. Click File > New... and attach the template to the new page.
   
   Note: to attach template to a page, open the page and click Format > Dynamic Web Template > Attach Dynamic Web Template. Then, locate and double-click on the template.dwt file. Click OK in the window that appears – telling you that the body of the page will be placed in the “PageContent” region of the template.

Editing the left-hand menu

The left-hand menu is contained in a separate page called menu.htm (or menu.html) and is programmatically included on all pages to which the template is attached. To edit this page, double-click on the menu.htm or .html file in the left-hand Folder List view - it may be in a folder called 'template.'

Having the menu of your site in an included page allows you to add a new page to your site and then link to it from this menu page. You only need to add the link to this one page and it will be included on all pages on your site.

The styles on the Menu page are predefined for you as is the background image and color.

Heading 1 – Use this for the top title of the menu. This text should also be a link to the homepage of your site.

Heading 2 – Use for sub-headings. The maroon background image is part of the style.

Note: to apply a Heading style to text, highlight the text and select the heading style form the Style Selector drop-down at the upper left (if you do not see the Style Selector, click View > Toolbars > Formatting).

Links – The link style is predefined for you when you create a hyperlink on the menu.

To add a link on the Menu page: Click where you want to place the new link, press enter to create the new line, type the text, highlight the text, from the top menu click the Insert > Hyperlink, select the page (or type the Web address) and click OK.

Style suggestions:

While you can change the font and font size of any text on the page, we suggest you use these pre-defined styles to help keep your site internally consistent and consistent with the overall Salisbury University site 

Note: The width of the menu of the page is set to 178px. Therefore, any images or tables you place inside of the page should not be wider than 178px.