1 / 25

Updating Web Sites for Western Engineering

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

tassos
Download Presentation

Updating Web Sites for Western Engineering

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Updating Web Sites for Western Engineering August, 2011

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

  3. 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.

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

  5. Microsoft Expression Web • 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.

  6. 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.

  7. Let’s Begin! • 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’

  8. Opening Your Site • Insert the URL (the address for your site) into the Location text box. An example of a URL would be “http://www.eng.uwo.ca”

  9. Logging In • 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 email password, unless you have set them to be the same)

  10. After you login your screen will look like this:

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

  12. Hyperlinks • 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.

  13. Hyperlinks (2) • 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.

  14. Adding items to the navigation • 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.

  15. Applying changes to all pages using the dynamic template • 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’

  16. 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

  17. Hyperlinks • 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: <a href=“http://www.eng.uwo.ca” target=“blank” >

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

  19. Editing Pages – Copying and Pasting • 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

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

  21. Detaching files from the Dynamic Web Template • 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”

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

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

  24. Additional References: http://www.eng.uwo.ca/itgroup/webguidelines.php • 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. http://www.eng.uwo.ca/comms/graphics/index.htm • Logos, templates, fonts http://expression.microsoft.com/en-ca/

  25. 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 rkeddie2@uwo.ca Jim Dobravec dobravec@uwo.ca Allison Stevenson asteve27@uwo.ca

More Related