Web site templates for Western’s Web pages



Web site templates for Western’s Web pages

Building Web pages?

This guide is intended to help users with basic Web editing experience cope with the challenges of creating pages that match Western’s standards for design and accessibility, and validate to the World Wide Web consortium’s standards for XHTML 1.0 and CSS.

To use these templates, you should already have a basic working knowledge of Dreamweaver (preferably MX2004) and an image editing program such as Photoshop or Fireworks.

What it looks like:

[pic]

Deployment

This template is being released in the summer of 2005 for any Web development or design community working on one of the official Western Web sites. Communications and Public Affairs is committed to rolling out our top level pages (including the home page) at the beginning of September, 2005, and would appreciate any concurrent development using this template not be made “live” until this time.

A note on standards

This template is constructed on three principle standards of Web design:

• Good markup: the source for this template uses XHTML 1.0 and CSS for its standard, as recommended by the World Wide Web Consortium. A couple of excellent resources we used include:

o Designing with Web Standards by Jeffery Zeldman

o A List Apart at

o Cascading Style Sheets: The Definitive Guide (2nd Ed.) by Eric Meyer

• Accessibility: This template aims to provide you with the basis for creating accessible Web pages in compliance with the World Wide Web Consortium’s Web Accessibility Initiative

• Western’s standards for graphic design and branding: use of the tower logo and the colour purple are part of the Western brand and need to be used consistently throughout our publications ()

Note: you will need the Bembo font installed to edit the artwork that produces the title area for your site. You can download and install it from

If at any time you feel you would like a consultation or help creating the pages we are describing, please don’t hesitate to contact us – we can help to develop your artwork, point you to photos, and give you pointers on effective implementation of this design.

If you feel your existing design deviates from the standards outlined by the Department of Communications and Public Affairs, please contact us and let us help you find a solution.

Contact: Robin Sutherland – tsutherl@uwo.ca

How we get there

Download the file template.zip file. Unzipping it yields three directories and three files, which may serve as the root of a new Web site. If you have a Web site that you are converting, read through these directions and determine how best to adapt your directory structure.

The directories are:

Artwork: contains a basic Photoshop and/or Fireworks file that may be edited to create a new title for your site (replacing “Department or Unit Name” which appears by default)

Images: contains the graphic files actually displayed by your Web site

Templates: contains the Dreamweaver template files you will be able to use to generate your Web pages

The files are:

Standard1.css – primary style sheet, which will govern the look of the Web site at a basic level – do not edit this style sheet

Standard2.css – personal style sheet, which will govern the look of the Web site as you customize it to fit your own material – styles you write to this page will take priority over standard1.css

Print.css – style sheet to control printing, reformatting elements to fit a printed page (modify as suits your content)

Artwork

Note: If you do not have an image editing program, we can help you to create the following image.

Begin by opening the artwork directory and selecting either the file photoshop\section_id.psd or fireworks\section_id.png depending on the image editing program you use. This is the title of your site that will appear at the top of every page.

Change the text “Department or Unit Name” to reflect the name of your Web site.

Use this artwork to export a file called section_id.gif into your \images\layout directory. This should replace a file with the same name already in this directory.

If you would like help creating your banner, please don’t hesitate to call us.

Additional photos for your Web site relating to Western’s campus can be ordered from our “Best of…” CD set – see . Photos can be inserted into your Web pages using Insert > Image from the menu bar. There are also a growing number of photos on our Flickr site at - these photos are NOT all free to use but if you would like permission to use any of them, we can contact the photographer.

Dreamweaver Template

Use the directory structure you have just created to start a new site in Dreamweaver.

The Templates directory contains three files: mixed.dwt, 2column.dwt and 3column.dwt - open the file \template\standard.dwt – you should see a template that matches the Web page shown above, with your section_id.gif image near the top of the page.

If you are using Dreamweaver MX 2004, Web pages that you create will now look like this template by default. If you are using an earlier version of Dreamweaver, you may need to use “File > Preview in Browser” when you begin developing pages to see this.

The following areas marked with a light blue bounding box:

• double_column

• left_column

• center_column

• general_items

These areas are editable both in Dreamweaver and Contribute

Some custom changes you need to make on this template before you build your Web pages:

Navigation

You will need to have worked out the navigation for your site before you can fill in the menu bar or sidebar for the site.

Primary navigation (purple menu bar across the top): What are the main links from your home page? If your site is only composed of a few pages, these pages may comprise the total of your navigation. If your site is larger, you may want to point to primary or home pages for each area of the site. Replace each link of the “Item 1 | Item 2 | Item 3 | Item 4 | Item 5 | Item 6 | Item 7” text with a very brief descriptor of the link you want to make (i.e. “Services | Programs | Benefits” …etc. and delete the unused linking text.

Note on the HTML: This menu is actually built as an unordered list of links, so if you are going to build additional links in this menu, it will be important to continue to so by adding additional list items. Take a look at the HTML to see how this section is constructed.

Now you are caught in a catch-22: in order to make this navigation work, you need to link it to files that have not yet been built, and you would like to build these files with this template!

To help yourself out of this problem, we suggest that you create the structure of your site with the appropriate directories and blank (empty) files. Next, make your links to these blank files. When your template is complete you can use it to create the Web pages you want and overwrite these files.

Sidebar navigation: The right-hand sidebar is outlined in purple and has a purple title bar. Unlike earlier versions of this template, this sidebar area is not editable on each page, although you can designate it to be editable if you wish.

The mixed.dwt file that you have open titles this area “About” and is filled with Greek text. The idea here is that you might choose to use this template for your area home page, and include a permanent descriptor here about your Web site. This would free up the rest of the home page for news or other timely items

If you set page templates for each of your main menu items, you may wish to use this area for secondary navigation. This has already been done for you on the 2column.dwt and 3column.dwt files. If you want to use the mixed.dwt template to display a secondary menu, erase the content of this window and replace it with an unordered list – this should automatically diplay menu items that match the format of the other templates.

Dreamweaver has extensive tools built in to help you manage the different levels of template control you may find appropriate to your site. You may, for example, develop a master template that maintains consistent navigation across the top and contact information across the bottom, and then develop “nested” templates for each of the primary areas of the site with unique navigation. Look to Dreamweaver’s Help for more information on nested templates.

Note: All three templates are actually variations on the mixed.dwt template – the 2column.dwt and 3column.dwt are simple laid out separately for convenience. If you find yourself needing to modify the column layout on a page you can do so without having to “break” the template you are working on – just look for the and within the HTML to make use of these areas.

Additional sidebar items: All three templates allow you to add additional, general items in the sidebar(s) – the 2column.dwt allows you to add items below the purple sidebar, and the mixed.dwt and 3column.dwt will additionally allow you to add items in the left column.

Site specific changes

Title: if you want some part of the title tag of all of your Web documents to remain the same (such as the name of your site), enter it now – you will be able to edit the title on any page, but information entered on the template will show up by default.

Contact: The contact information listed at the bottom of the page should also appear on every page you create. Edit to match your contact information.

Save your template!

Building Web pages

Now comes the fun part! If you haven’t already done so, use the Site > Manage Sites to set up this directory as a new site.

Select File > New or use CTRL + N to start a new Web page. In Dreamweaver MX you will get a dialogue box with a choice of two tabs: “General” and “Templates.” Choosing “Templates” should give you two panels. If your site is listed on the left, selecting it should allow you to select the template mixed.dwt on the right. Be sure that the checkbox “Update page when template changes” is selected.

Clicking on “Create” will produce your first Web page. We highly recommend that you immediately save this file with the directory and filename you want to use. Creating and editing pages is now a matter of filling in the content and sidebar areas with the content for your Web site.

Conclusion

That should be enough to get you well underway!

There are a number of customizations that you can make to personalize the look of your site. If you are familiar with style sheets, take a look at our standard1.css and standard2.css and see how we have set our document defaults. You can change these document defaults by editing or adding to the standard2.css style sheet – any values you specify will overwrite the values of the standard1.css. Please do not edit standard.css itself – by maintaining these documents consistently across campus, we will be able to update this file systemically with improvements.

Please don’t hesistate to contact us if you would like further direction in the use of this template.

Additional Resources

To help support the development of this template, Communications and Public Affairs has created a Web Design and Development online community using the Purple Circles resource made available on campus through Alumni Relations. Here you can post questions about web work at Western, make suggestions, link to relevant articles and other resources, set up calendars, etc. The address for this community is:



and while you will have to join the Purple Circles to participate, it is free and you will be able to set up your own communities with this tool as well.

Please also consider announcing any new launches of Web projects to weblog at:



Please contact tsutherl@uwo.ca for an author status to make postings to this page.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download