Web Template Guidelines

.: Contents :.

Introduction

Requirements

About Web Templates

About the SU Web Template

Updating Your Web Pages

Styles

Creating a New Page

Editing the Left-hand Menu

Need help? Contact the Web Office staff:

David Raizen
Web Developer HH 273
410-677-5056
or ext 75056
dnraizen@salisbury.edu 

Todd Smith
Web Communications Manager HH 273
410-677-5487
or ext 75487
tvsmith@salisbury.edu
 

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 Expression Web 4 or SharePoint Designer 2007. If you need either installed, please contact the Help Desk (75454) or the Web Development Office (75487).

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 regions defined as editable. The Web Development Office has created the SU template and has pre-defined the editable region(s).

[ Top

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), is located in the site's template folder, 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.

[ Top


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 Expression Web or SharePoint Designer 2007.
  2. Click Site > Open Site (or File > Open Site for SharePoint).
  3. Enter the full Web address of your site (e.g. http://www.salisbury.edu/nameofyoursite) in the Location field.
  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 Expression Web or SharePoint, unless you access the site in 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:

Expression Web and SharePoint 2007 have 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.

[ Top

view of web page in design view

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.

[ Top

view of web page in template

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 with a 5px wide padding. Therefore, any images or tables you place inside of the page should not be wider than 552px.

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.
[ Top

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.

[ Top

view of the left hand menu