ࡱ> yxG(    Vhttp://www.webstyleguide.com/type/case.htmlVhttp://www.webstyleguide.com/type/case.htmlXhttp://www.webstyleguide.com/type/align.htmlXhttp://www.webstyleguide.com/type/align.html/ 0DArialUnicode MSll(0DGaramondcode MSll(0 DTimes New Romanll(00DWingdingsRomanll(0@DPapyrussRomanll(0BPDArial Unicode MSl(0"@0.  @n?" dd@  @@`` ($k      " #  0AA@8!"1ʚ;ʚ;g4<d<dd 0Vppp@ <4dddd8A10l 60___PPT10 ___PPT9,   ,?  %@=The World Wide WebThe Web DefinedSoftware application to browse and publish documents Web is a large  sub-set of Internet Uses xhtml, urls, http to request and send documents over the Internet Browser is the application that serves as interface between users and the Internet,_Web Browser FeaturesPersonal Preferences Cookies Disk Cache Fonts, Colors Show Images Home Page Location Bookmarks (aka  Favorites ) Saves urls of Web pages Reasons for using: You visit that site frequently You want to save it so you can find it againjZ@ZZ,ZLZ@,L wn8Web Browser Features (con t)dPlug-ins and Helper Applications Used to extend the capabilities of browsers since they are not able to handle every file type that exists (or may exist in the future) Plug-ins are tightly integrated with browser Usually run in browser window Launch quickly Helper Applications are stand alone Usually launch in their own window May take longer to launchb!-%>!-%> 8Web Browser Features (con t)TNot all browsers are exactly the same: MIE  supported marquees and font faces initially; packaged and distributed with other Microsoft products Netscape  introduced tables and frames; had to download and install Others: Mozilla, Firefox, Opera, Lynx All browsers do not support the same tags in the same way: e.g., <blink> Web pages may look different depending on the browser and platform Some browsers are more  forgiving D'ZZZ', Web PublishingWeb Presentation:  Collection of associated, hyperlinked Web pages that have some underlying theme - aka  Web site Comparison of on-line publishing and traditional  off-line publishing Time spent viewing or reading Length of material Longevity of material How info is accessed Where info is accessed How info is maintained and updated Who is able to publish Form and appearance vs. qualitylZd%ZGZ  ZdG &Key Elements and Design Considerations''&Layout Easy navigation (obvious and logical) Logical organization Minimum of scrolling (info fits on 1-2 screens with *no* horizontal scrolling) Short, descriptive writing Error-free (no typos, no grammatical errors) Easy-to-read colors, fonts Non-distracting background DZZZZ &Key Elements and Design Considerations''&Layout (con t) Headers and footers that provide continuity and determine boundaries of Web site Headers Top of Web page (not contents of <head> tag!) Creates identity Includes some of following: Title, sub-title Logo Navigation aids Last update info ZYZ[Z7ZZZZY[7  &Key Elements and Design Considerations''&&Layout (con t) Footer Bottom of Web page Contains info that doesn t necessarily need to appear at the top: Navigation aids (even if already at the top, repeat here if reader needs to scroll OR offer  Go To Top link) Last update info Author s name, mailto link to author FAQs link, Credits link Copyright notice - &copy; OR &169; Any disclaimers Home link Need this info because there is no preamble ZZUZZ,ZZZU, , &Key Elements and Design Considerations''&<Load time  some readers are still using dial-up so don t over-do graphics Page size: In most cases, page should not exceed 1  2 screens Longer Web pages are sometimes okay: Good for material that will be printed Easier to maintain (fewer links) Not concerned about losing readers But Can lose navigation aids (readers need to see them to retain them)  repeat nav. aids OR use  Go To Top links May lose readers VZYZkZ!Z ZZVYk  j2 &Key Elements and Design Considerations''&lPage size (con t) Assume minimum screen size in general use today is 800 x 600 (800 pixel wide by 600 pixels high) Usable space is 681 to 780 pixels wide by 382 to 514 pixels high L  &Key Elements and Design Considerations''&Page Layout Line length Determined by reader s browser window Reading is most comfortable when there are no more than 12 words/line To limit number of words in line: Use tables without borders Use CSS margin property Frames  allows more than 1 Web page to display in your window at a time; use one for site navigation, one for display N    &Key Elements and Design Considerations''&Page layout (con t) Typography  the process of printing with type Use CSS to separate content structure and graphic design: <h1>, <h2>, ...<h6> are heading tags and their purpose is to designate a hierarchy of headline importance; human readers and search engines can easily determine info structure <h1> is usually too big; <h6> is too small Reconcile structural logic and graphic design by using CSS to specify  set all h3 headings in 12-pt Arial bold font lZ/ZZZZ/   &Key Elements and Design Considerations''&bPage layout (con t) Typography (con t) Use upper and lower case for large areas of text  makes it easier to recognize words: Hello World vs. HELLO WORLD http://www.webstyleguide.com/type/case.html Align text (if there is a lot of it)  makes it easier for your readers eyes to track back to left side: abc defgh ijk l mno pqrstuv wx yz ab cd efghijk lm no p qrs tu v wxyz abcdefg hi jkl http://www.webstyleguide.com/type/align.htmlZZWZ!Z,!ZjZU!Z-!ZW  U-n u$k %T0T0 Web DesignProduce an Outline Subject will determine how topic is partitioned Use various heading tags to impart headline importance (

,

, ...,

) Keep amount of information on each page to approx. 1- 2 screen lengths0 "  Web DesignDetermine Navigation Hyperlinks that allow readers to move thru presentation Subject determines best arrangement: Circular Supports forward and back Good for step-by-step instructions Exploratory Allows jumping from nearly every page to every other page Image maps work well in exploratory type of organization Hierarchy Limited number of links from top; each succeeding page has a limited number Fanout  max number of links available from any page  " ]$  " = "   " s "   "  " ] =   s 0 Web DesignCoding and Writing Create pages with links between them (stubs) Migrate outline to appropriate pages Insert headers and footers (This creates a  shell ) Fill in the shells with writing Add graphics, bells, and whistlesV " m$%B$ Web DesignRevising Test hyperlinks, check navigation Comment code (good to do while you go along) Ask opinion of others Review goals Evaluate graphics Are pages consistent? Evaluate writing  check for typos etc. **Check site with another browser or two!** \ " $ , Registering Web PagesAssume one goal is to have the page viewed by as many people as possible How to be found: Register your page by filling out on-line form telling search engines about your page(s) Wait to be found by search engines Pay to have a business add your link to their site Ask a non-business related page to add you (if you complement their page) Pay a company to take care of registering for you for a fee.ZZ5ZZ5/     0` 3333ff3` 3333f33ff3` "3333̙ff3` Kf3̙` &e̙3g3f` f333̙po7` ___f3̙;/f9` ff3Lm` ff3LmNLm>?" dd@*?nAd@q<nAqFLK#M n?" dd@   @@``PR    M`2p>>  (    Ht? ?" `}  X Click to edit Master title style!!  @  H`? ?" `  RClick to edit Master text styles Second level Third level Fourth level Fifth level!    S    6, #" `] `}  \*     6< #" ``   V*      6 #" `] `}  V*      C @ABCDE FjJ@3"0`B  s *DjJ"0 `0H  0޽h ? ___f3̙;/f9___PPT10i.  +D=' = @B + Edge 0 0(    H? ?"@  X Click to edit Master title style!!    H? ?"   [#Click to edit Master subtitle style$$    6Ⱥ #" `] `}  \*     6$ #" `]}   V*      6( #" `] `}  V*      C @ABCDE F8c@3"@B  s *DjJ"  ,$0H  0޽h ? ___f3̙;/f9___PPT10i.  +ityD=' = @B +0 zr` (    0 P    P*    0$     R*  d  c $ ?    0  0  RClick to edit Master text styles Second level Third level Fourth level Fifth level!     S  6 _P   P*    6  _   R*  H  0޽h ? 3380___PPT10.w](0  0(  x  c $3@  x  c $4   H  0޽h ? 33___PPT10i.q4+D=' = @B + 0 0 *(   x  c $. `}   r  S ~03  H  0޽h ? 33___PPT10i.s`TN+D=' = @B +} 0 @$(  r  S 4 `   r  S  `   H  0޽h ? 33___PPT10i.t %+D=' = @B + 0 P*(  x  c $ `}   r  S p  `  H  0޽h ? 33___PPT10i.vp&Q+D=' = @B + 0  0(   x  c $ `}   x  c $Ⱥ `  H  0޽h ? 33___PPT10i.w j+D=' = @B + 0 (:(  (r ( S 8 `    ( S 0`  "P@08XH ( 0޽h ? 33___PPT10i.xRB+D=' = @B + 0 00(  0x 0 c $  `}   x 0 c $  `  H 0 0޽h ? 33___PPT10i.x +D=' = @B + 0 40(  4x 4 c $p `}   x 4 c $ `  H 4 0޽h ? 33___PPT10i.P:+D=' = @B +} 0 <$(  <r < S .` `   r < S t.`  H < 0޽h ? 33___PPT10i.*H+D=' = @B + 0 D0(  Dx D c $ `}   x D c $ `  H D 0޽h ? 33___PPT10i.|+D=' = @B + 0  H*(  Hx H c $ 8 `}   r H S 8@ `c  H H 0޽h ? 33___PPT10i.Pρ+D=' = @B + 0 0L0(  Lx L c $H `}   x L c $H `  H L 0޽h ? 33___PPT10i.%+D=' = @B + 0 PT*(  Tx T c $P `}   r T S pQ`  H T 0޽h ? 33___PPT10i.]+D=' = @B + 0 p\0(  \x \ c $L] `}   x \ c $$^ `  H \ 0޽h ? 33___PPT10i.@T+D=' = @B +0 d(  d d 0} `` TLD___PPT9& Goal Setting State objective Define audience Determine timeframe Determine scope How much research is required Consider maintenance How many graphics Money? Writing quality0 "  p`Pp d 6  `}  Web DesignH d 0޽h ? 33___PPT10i.i+D=' = @B + 0 lF(  lx l c $ `}    l c $l `  "p`PpH l 0޽h ? 33___PPT10i.ePP+D=' = @B + 0 p:(  pr p S d `    p S ԑ `P  "p`PpH p 0޽h ? 33___PPT10i.Pi+D=' = @B + 0 tF(  tx t c $H `}    t c $x `  "p`PpH t 0޽h ? 33___PPT10i. $+D=' = @B + 0 xF(  xx x c $ `}    x c $4 `  "p`PpH x 0޽h ? 33___PPT10i.@q+D=' = @B + 0 |0(  |x | c $̻ `}   x | c $ `  H | 0޽h ? 33___PPT10i.+D=' = @B +0 F>p(  X  C    >  S  0   Plugin Examples: Macromedia Shockwave, Quicktime, RealPlayer, Flash Helper Application Examples: Adobe Acrobat Reader, Viewer for Word, Viewer for Excel$! iH  0޽h ? 3380___PPT10.wpPg(20 $B(  $X $ C     $ S \ 0   D0Need to view your pages with different browsers!H $ 0޽h ? 3380___PPT10.xr 0   , (  ,X , C     , S x! 0X  @8___PPT9  JTime spent viewing or reading - Readers spend less time viewing Web pages Length of material - Web presentations contain pages (or pieces of info) that are short; printed material can be any length Longevity of material  material on the Web may have a short shelf life; printed material hangs around longer How info is accessed  Web presentation is not necessarily accessed in sequential order; printed material is accessed sequentially Where info is accessed  Web material must be read at a computer while connected; printed material is portable How info is maintained and updated - Web material is easy to maintain and update; printed material is more difficult to update Who publishes  material on the Web can be published by anyone; printed material is written and edited by professionals so it tends to be more credible an reliable  it also costs more $$$ Form and appearance vs. quality  appearance and form are critical to grab reader s attention on the Web; quality of writing is critical with printed material" H , 0޽h ? 3380___PPT10.y$0 8(  8X 8 C    ! 8 S ! 0  ! Header is  above the fold type info  more important than footer infoH 8 0޽h ? 3380___PPT10.`9B0 @R(  @X @ C    ! @ S $! 0d  !LD___PPT9&  pAuthors name is important to know who is responsible for publishing Need all the footer info because you can not be sure how your reader arrived here: Bookmark Link from someone else Search engine _____________________________________________________ Top | next | previous | home email | credits | FAQs copyright Ellen Hepp, 2005. All rights reserved. </" " :3H @ 0޽h ? 3380___PPT10.8g 0 @P(  PX P C    ! P S B! 0d  !LD___PPT9&  NTable cells should be no wider than 365 pixels to constrain number of words to about 12 Problems with frames: May be difficult to print or bookmark Difficult for seach engines to catalog Might be difficult for browser s forward and back button Might need to scroll to view full content BUT  easier to maintain, esp. for site whose content changes frequently,o" oH P 0޽h ? 3380___PPT10.64d 0 `Xt(  XX X C    ! X S W! 0d  !LD___PPT9&  "Type = printed characters Recall: xhtml is *not* a page layout tool; describes structural info about a page Pluses to using CSS: Lets you mark up content to reflect logical structure of info Lets you specify exactly how each xhtml tag will look You can use a single master style sheet to control  look and feel of entire site," ,#aH X 0޽h ? 3380___PPT10.M0 RJh(  hX h C    !J h S dc! 0  ! State objective  personal page, business, special objectives Define audience  general, peers, family, children, etc. Timeframe  will determine: how large presentation will be; how much research you will have time to do; Scope  How much material will be included in your presentation (will be influenced by timeframe) Research  will be influenced by timeframe and scope Maintenance  will it need to maintained on a regular basis or is it static? Graphics  how many; will you design your own? Money  is one of the goals to make money with this site? Writing quality  error-free and accurate?N H h 0޽h ? 3380___PPT10.rpa!df[1ikhMn6ppys vx {}<جǂpXܷG0דGS"1Oh+'0 hp    $,The World Wide WebPreferred CustomerEdgeRaymond Greenlaw4Microsoft PowerPoint@e!@@^t@WGhg  ,"  y--$xx--'̙-- % % --'̙--%"EE--'@Garamond-. f3"2 &The World Wide Web   ."Systemȶ-՜.+,D՜.+,p,    On-screen Shown Arial GaramondTimes New Roman WingdingsPapyrusArial Unicode MSEdgeThe World Wide WebThe Web DefinedWeb Browser FeaturesWeb Browser Features (cont)Web Browser Features (cont)Web Publishing'Key Elements and Design Considerations'Key Elements and Design Considerations'Key Elements and Design Considerations'Key Elements and Design Considerations'Key Elements and Design Considerations'Key Elements and Design Considerations'Key Elements and Design Considerations'Key Elements and Design Considerations Slide 15 Web Design Web Design Web Design Web DesignRegistering Web Pages  Fonts UsedDesign Template Slide Titlesh 8@ _PID_HLINKSA  ,http://www.webstyleguide.com/type/case.html-http://www.webstyleguide.com/type/align.html(_JRaymond GreenlawRaymond Greenlaw  !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_abcdefgijklmnoqrstuvwzRoot EntrydO)Current UserpSummaryInformation(`PowerPoint Document(nDocumentSummaryInformation8h