Western Engineering Web Information Session

1
Western Engineering Web Information
Session Monday, February 26, 2007 Presented
by Jim Dobravec Allison Stevenson
2
Agenda

• Why the new template?
• Definitions
• W3C
• XHTMLCascading Style Sheets (CSS)
• Western Engineerings TemplateElements of
  Western Engineerings new web templateWorking
  with Western Engineering's new web
  templateHelpful hintsLinks to other resources

3
Why the new template?

• Consistent with Westerns homepage
• Conforms to W3C standards which is a consortium
  of www standards
• Uses XHTML coding which has browser compatibility
  for increasing range of browser platforms
  including cell phones, PDAs, kiosks, and
  desktops
• Uses Cascading Style Sheets (CSS)
• Compatibility with todays browsers
  (Internet Explorer, Fire Fox)

4
General Web Information
The World Wide Web Consortium (W3C) is an
international consortium where Member
organizations, maintain full-time staff, and the
public work together to develop Web standards.
W3C's mission is To lead the World Wide Web to
its full potential by developing protocols and
guidelines that ensure long-term growth for the
Web. The University of Western Ontario and
Western Engineering strive to meet these
protocols and guidelines.
Ref http//www.w3.org/Consortium
5
General Web Information
XHTML XHTML is the next generation of HTML and is
a hybrid between HTML and XML. XML was designed
to describe data. HTML was designed to display
data. XHTML is much stricter than HTML. Not all
browsers support XML so XHTML provides an
intermediary solution and can be interpreted by
XML and HTML browsers. The University of
Western Ontario and Western Engineerings new web
template uses XHTML.
6
General Web Information

• XHTML continued
• Cleaner markup code with use of cascading style
  sheets (CSS), enabling quick loading of pages.
• WE template code
• ltligtlta href"default.htm"gtHome Pagelt/agt lt/ligt
• Microsoft Word code
• ltp classMsoNormal aligncenter
  style'margin-left0intext-aligncenter
• text-indent-.25inmso-listl1 level1
  lfo1tab-stopslist .5inbackground660099'gtlt!if
  !supportListsgtltspan
• langEN style'font-size10.0ptmso-bidi-font-size
  8.5ptfont-familySymbol
• mso-fareast-font-familySymbolmso-bidi-font-famil
  ySymbolcolorwhite
• mso-ansi-languageENmso-bidi-font-weightbold'gtlts
  pan style'mso-listIgnore'gtltspan
• style'font7.0pt "Times New Roman"'gtnbspnbsp
  nbspnbspnbspnbspnbspnbspnbspnbspnb
  spnbspnbspnbspnbspnbspnbspnbspnbsp
  nbspnbspnbspnbspnbspnbspnbspnbsp
  nbspnbspnbspnbspnbsp
• lt/spangtlt/spangtlt/spangtlt!endifgtltbgtltspan langEN
  style'font-size8.5pt
• font-familyArialcolorwhitemso-ansi-languageEN
  'gtlta
• hrefhttp//www.eng.uwo.ca/template/default.htm"gt
  ltspan
• style'colorwhite'gtHome Pagelt/spangtlt/agt
  ltopgtlt/opgtlt/spangtlt/bgtlt/pgt

In both cases the browser displays
7
General Web Information
Markup Validator A free service that checks Web
documents in formats like HTML and XHTML for
conformance to W3C recommendations and other
standards. http//validator.w3.org/ The
University of Western Ontario and Western
Engineering check uwo and eng.uwo sites regularly
for compliance. Not all Western Engineering sites
curently comply.
8
General Web Information

• Cascading Style Sheets (CSS)
• Standard layout language for the web that
  controls colours, typography, and size and
  placement of elements and images.
• One CSS file can control the appearance of an
  entire site.
• Makes sites easier to maintain.
• Code is easier to read troubleshoot.

The University of Western Ontario and Western
Engineerings web template use CSS for a
consistent look and to comply with W3C
Recommendations and other standards.
9
Western Engineerings Web Template

• Western Engineerings web template consists of
  the following
• Header
• Footer
• Menu
• Columns
• Images
• Navigation
• All elements have been set-up using CSS for
  consistency and web compliance

10
Western Engineerings xhtml tag definitions -
overview
ltdiv idheadergt
ltdiv idmenugt
lth2 classnav_about_boxgtMenult/h2gt
lth1gtWelcome to the Dept. of lt/h1gt
ltdiv idsidebargt
ltImg src../images/mypicture.jpggt
ltdiv idlipsumgt
lth2 classgeneral_itemsgtContact Infolt/h2gt
ltdiv idfootergt
11
Font tags in the style sheet file (standard1.css)

• h1
• font-familyVerdana, Arial, Helvetica,
  sans-serif
• font-size 18px
• color 609
• padding 0px 10px 0px 0px
• font-weight bold
• margin0
• h2
• font-familyVerdana, Arial, Helvetica,
  sans-serif
• font-size 14px
• padding 10px 10px 0px 0px
• font-weight bold
• margin0
• color 609
• h3

• p
• font-familyVerdana, Arial, Helvetica,
  sans-serif
• font-size 12px
• line-height 150
• padding 0px 10px 10px 0px
• margin0
• li
• font-familyVerdana, Arial, Helvetica,
  sans-serif
• font-size12px
• line-height 150

12
Some other tags in the style sheet file
(standard1.css)
header background-colorfff clearboth wi
dth750px margin0px auto padding 10px 0 0
0 menu background 609 width
540px font-size 11px font-weightbold font-
family Arial, Helvetica, sans-serif color
fff padding 3px text-align left
margin-bottom 10px img display
block border 0 footer displayblock f
loatnone font-familyVerdana, Arial,
Helvetica, sans-serif font-size
10px clearboth border-top 1px solid
609 padding 10px 0 20px 0 width
750px margin-top 20px
.nav_about_box background-color
609 font-familyArial, Helvetica,
sans-serif font-size 11px color
fff font-weight bold text-align
center padding 1px sidebar text-align
center border 1px solid 609 padding 0 0
10px 0 width 190px margin
0 .general_items background-coloreee fo
nt-familyArial, Helvetica, sans-serif font-size
11px color 000 font-weight
bold text-align center padding
0px border-top 1px solid 000 border-bottom
1px solid 000 margin 20px 5px 10px 0
13
Western Engineerings Web Template
Coding for new template see handout
14
Western Engineerings Web Template

• Images
• LogosWestern Engineering logo and the
  University Tower logo are included in the footer
  of the template.
• Main pictureCreate image in PhotoShop or
  Microsoft Office PictureManager or whatever
  PhotoSoftware you likeSize 72 dpi
  540 pixels wide 250 pixels tall

15
Western Engineerings Web Template

• Images Continued
• Pictures in 3 column templateCreate image in
  PhotoShop or Microsoft Office PictureManager or
  whatever Photo Software you likeSize 72 dpi
  125 pixels wide 125 pixels tall
• Example www.eng.uwo.ca/comms/dept.htm

16
Setting up your screen
code view window
design view window
switching to split screen view
17
Using the split screen

• Gives code and design view.
• Edits done in code view window.
• Highlight text to change between tags.
• Type or paste new content.

18
Using the template for your content

• Option 1
• Start with new template and add information.
• Option 2
• Use cut and paste for transferring existing
  content into new template.
• Use Notepad to remove excess formatting code from
  old content before pasting into new template.
• Content is pasted into code view between tags.
• Images and resizing to fit template without
  losing resolution.

19
Folder List Organization

• http//www.eng.uwo.ca/yourwebsite
• Top level of your site
• /images
• Holds graphics (photos, logos)
• /style
• Holds style sheet files (.css)

20
Adding Photos Images

• Work in the code view window to position image
  first. Use Insert Picture From File
• Code will be placed to reference image.
• Click in design view window to see image
  placement.
• Right click image in the design view window and
  select Picture Properties.
• Click Appearance tab to select Wrapping style and
  Horizontal / Vertical margins in pixels.

21
Adding Photos Images
22
Adding Photos and Images
By inserting values here you can have your text
and image wrapped.
23
Formatting photos for the web

• Use program such as Photoshop or Microsoft Office
  Picture Manager.
• Resolution need only be 72 dpi, any more will
  increase file size.
• Keep aspect ratio (width X height) locked
  together, otherwise distortion occurs.
• Crop when necessary.
• Photo will only be as good as the source. Cannot
  increase a low resolution photo to higher
  resolution.
• Use Alt-tags for accessibility compliance.

Campus building
24
Westerns Web Accessibility Initiative

• http//communications.uwo.ca/comms/web.htm

25
Helpful Hints

• Always use the split view mode
• Copy paste information in the coding area
  only
• Add alt tags to all photos
• Keep images in one folder for better
  organization
• Reduce images to 72 dpi before inserting into
  FrontPage
• Keep web page names short, with NO spaces
• Keep your pages clean and simple

26
Helpful Web Links
W3C Standards - http//www.w3.org/ XHTML
http//www.w3.org/TR/xhtml1/ Markup Validator -
http//validator.w3.org/ Cascading Style Sheets -
http//www.w3.org/Style/CSS/ WE Graphic
Standards - http//www.eng.uwo.ca/comms/graphics/i
ndex.htm
27
(No Transcript)