Transcript Power Point Seminar September 2011

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!
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.
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.
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’
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”
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)
After you login your screen will look like this:
Elements of the WE Template
Header
Western
Word mark
WE logo
Static or
Dynamic
Photo(s)
Google
Custom Search
Navigation
Footer
Tower
Logo
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.
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.
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.
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’
• 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
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” >
Creating a new page attached to the
dynamic template
• Select ‘File’, ‘New’,
‘Create From Dynamic
Web Template’
• Select the .dwt file.
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
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.
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”
Other Elements of Interest
•
•
•
•
Menu flyouts
Slideshows, rotating banners
3 column template
Websites for conferences and special
events
Example of a
site that uses
the 3 column
view on some
pages and also
the slideshow.
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/
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 [email protected]
Jim Dobravec [email protected]
Allison Stevenson [email protected]