Updating Web Sites for Western Engineering August, 2011

Western Engineering Web Basics Western Engineering has a web template available that is standards based. What does this mean to you?

Good mark up – source code uses xhtml and CSS Accessibility - Web pages in compliance with the World Wide Web Consortium’s Web Accessibility Initiative Western’s and Western Engineering’s standards for graphic design and branding: use of the WE and tower logo and the colour purple are part of the Western brand and need to be used consistently throughout our websites.

Seriously, what does that all mean? Easier to build and maintain websites!

Provides an environment to work in for users of all different levels and skill. You don’t need to know any code in order to update sites. If you can use Microsoft Word and cut & paste, you can use Expression Web with the WE Web templates to create and maintain your web pages. Allows us to edit files directly on the server. When you save your files, they will immediately be available for others to view. Microsoft Expression Web

What templates are available? Standard Templates for departmental, research and faculty websites. These provide correct logos, fonts, colour, headers/footers and applicable navigation. Dynamic Templates also provide same as above. Advantage here is that multiple pages can be updated simultaneously. These templates are available from Engineering Webmaster.

After opening MS Expression Web 4, from the dropdown menu, click ‘Site’, ‘Open Site’ – Note: for MS Expression Web 2, the ‘Open Site’ is located under the dropdown menu item: ‘File’ Let’s Begin!

Insert the URL (the address for your site) into the Location text box. An example of a URL would be “ Opening Your Site

After selecting the site you wish to open, you will be prompted to log in. For your username… – Faculty and staff: All faculty and staff accounts are of this format: engsci-uwo-ca\username Your password is your engineering password (not your password, unless you have set them to be the same) Logging In

After you login your screen will look like this:

Header Footer Navigation Elements of the WE Template WE logo Google Custom Search Western Word mark Tower Logo Static or Dynamic Photo(s)

First, we need to open the dynamic template file. Double click the.dwt file. Editing existing links: – In split mode view, you can click on the item you wish to change; it will go to this section of the code. Hyperlinks

In design mode, if you need to edit the link, highlight the text, click “Insert”, “hyperlink” (or a shortcut is CTRL+k). Type in the desired URL in the “Address” text box. Hyperlinks (2)

Click on one of the items. Move the cursor to the end of the line, press enter. Now you have created a new slot of a menu item. If you need to insert a hyperlink, look at the previous slide for instructions. Adding items to the navigation

After you’ve made the changes to the.dwt file, we need to apply those changes to all the pages attached. Open up all the attached pages Save the.dwt file. You will be asked if you want to apply the changes to all the pages attached. Click ‘Yes’ Select ‘File’, ‘Save all’ Applying changes to all pages using the dynamic template

Tip: if you have multiple pages open, you may wish to close them all at once. Doing this manually can be tedious. There is a shortcut : – Select ‘Window’ from the dropdown menu and ‘Close all pages’, as seen below

As a best practice for the Engineering pages, when we have links that are going off the site the user is currently on, we make the link open up in a new window. How do I make links open up in a new window? In the code, you need to add the red text below to an existing link: Hyperlinks

Select ‘File’, ‘New’, ‘Create From Dynamic Web Template’ Select the.dwt file. Creating a new page attached to the dynamic template

Often you will want to copy and paste text to Expression Web from a Word document or website. The result can sometimes give you strange formatting issues. The best solution is to copy the text you wish to paste. In Expression Web, select “Edit”, “Paste Text…”. Then choose the bottom option: “Normal paragraphs without line breaks” Note: You will still have to add the headers and perhaps correct some spacing issues, but this is probably the best way to ensure your formatting is correct Editing Pages – Copying and Pasting

Generally we try to keep the formatting standard throughout all the pages. – For the title of the page, we use a header 1 or – For subtitles we use header 2, or – For all other text we have in paragraphs, or To change the format, highlight the desired text and select the drop down box indicated. Editing Pages – Format

If you would like to detach a file from a template… – Make a change to one of the uneditable parts of the code. This could be something as simple as adding a space to the end of a line. – Save the file, and select “Keep all changes” and check the box that says “detach from template” Detaching files from the Dynamic Web Template

Menu flyouts Slideshows, rotating banners 3 column template Websites for conferences and special events Other Elements of Interest

Example of a site that uses the 3 column view on some pages and also the slideshow.

Additional References: Western Web Standards Western Web Policies Best Practices: Electronic Posting of Student Personal Information Best Practices Guides for Search Engine Optimization, Accessibility, Twitter, YouTube Western Engineering Graphic Standards - Logos, templates etc. Logos, templates, fonts

Additional Help Provide assistance in migrating your existing site into the Western Engineering template. One on one training in using Expression Web to maintain your website(s) Provide recommendations for best practices Assist in helping you design sites for your audience Help I messed up my page! etc. Contact: Ryan Keddie Jim Dobravec Allison Stevenson