Allegheny Web Development: Standards

As you have already noticed, the current template system used throughout the Allegheny College web site is one of consistency and simplicity. Using this approach is appropriate in conveying information in a clear and easy to use format.

It is important to keep in mind that the focus is not on the design of the pages or the placement of images and text, rather it is the content itself that people are coming to the website to read.

With that in mind here is a short guide on how to properly utilize the 'official' Allegheny College templates.

The first thing you will notice is that the page extensions to these files end in *.php and not *.html.

Simply put, PHP is the technology being used to deliver the page to the viewer. Using PHP we are able to include a single file across multiple pages allowing us to edit one file effectively 'editing' all pages that call on that file.

You will see some of these PHP commands in the template looking like this <?php blah blah blah ?>. Do not edit these lines of code unless you understand what you are doing. You risk breaking the templates if changes are made to those statements.

In order to simplify and condense the amount of html contained in the template we are using style sheets. These style sheets tell the web browser how to display certain html characters (i.e. <p>, <h1>, etc). Using style sheets we are able to have continuity across multiple pages and it allows pages to load faster for the user.

Please avoid using superfluous tags such as <font>, <u> and to a lesser extent <b> and <i> tags. Remember, it's not how the content looks but how it reads. Focus your energy on the message. Leave the rest to the template and style sheets.

If you have questions about things in the style sheet, please let Mike Richwalsky know.

Inside the two templates we have placed comments () to show you where it's ok to edit and add content.

The other file is template2.php which contains the same content area but with a yellow directory on the right hand side of the page. You will notice in the yellow sidebar adding an <h2> tag creates a title bar where you can add a header to a section of text.

You'll notice there are no tables used for layout or design, and this is on purpose. We are using DIV tags and the stylesheet to format the pages without tables. This allows us to send pages to the browsers faster and have those browsers render them for the user quickly.

Your pages must validate as valid XHMTL 1.0 Strict. You can find an online validation tool here: http://validator.w3.org/

This is important for several reasons. First, your pages will remain consistent with the College's main website. Secondly, we coded to a standard so that the pages will look uniform across many browsers and platforms and will render quickly and efficiently.

Is getting pages to validate tricky? Not really, but it does require you to code correctly and avoid shortcuts (like using tables as layout tools, etc.) The validation tool will point out errors on your page and tell you how to correct them.

Now that your pages are created, you'll need to submit them to me so we can put the Public Affairs stamp of approval on them. Once they're approved by Public Affairs they can be placed online for the world to see.

If you have any questions or run into problems using the templates, please let me know. My email is mrichwal@allegheny.edu and my number is x2769.

Banner Standards

Sub-banner Specifications:

Title text: Font: Univers 65 Bold, Font-size: 18pt, Letter-Spacing: 25
Menu text: Font: Univers 45 Light, Font-size: 12pt, Letter-Spacing: 10, Spacing: 5 spaces between each menu item

Templates

Image Template Examples

menu banner
feature item banner
small feature graphic

Image Templates (Right Click, Select "Save Target As")

menu_banner.psd
feature_item_banner.psd
small_feature_graphic.psd

Page Templates (Right Click, Select "Save Target As")