1. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Module II: Design Principles I Naylin Oo Information, Communication and Space Technology Division UNESCAP

2. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Module II: Design Principles Section 3: Best practices, drawing board, layout, and concepts of color, font, theme... Section 4: HTML, links, images Section 5: Tables, FrontPage basics Section 6: Practical exercise

3. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Session 3: Drawing Board Naylin Oo Information, Communication and Space Technology Division UNESCAP Module II: Design Principles I

4. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Drawing board Structure Style Layout Font Color Theme Content Functionality

5. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Stylistic Considerations Be frugal Stick to the point Cultivate a voice Think globally

6. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Visual Structure Source: Web Style Guide, www.webstyleguide.com

7. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Visual Structure Source: Web Style Guide, www.webstyleguide.com

8. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Page size (length) Web pages should not be longer than 2 to 6 screens. This limit is recommended for 2 reasons: –To economize on download time and be user friendly to those using slow connections –To facilitate quick and efficient response to Search programs

9. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Page Layout Source: Web Style Guide, www.webstyleguide.com

10. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Page headers and footers Headers: Site identity –User may enter the site on ANY page –Unique visual identity –Include basic navigation links Footer: Provenance –Origin of the page –Age of the page –Basic link (Top page, home) –Legal notice

11. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Sample Page Layout Source: Web Style Guide, www.webstyleguide.com

12. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Session 4: Introduction to HTML Front Page Basics Module II: Design Principles I

13. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Telling the browser what to do, and what props to use. A series of tags that are integrated into a text document. What is HTML?

14. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Tags are - surrounded with angle brackets  or  Most tags come in pairs  exceptions:,, tags …  The first tag turns the action on, and the second turns it off HTML: Tags

15. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan  The second tag (off switch) starts with a forward slash.  For example, text  Can embedded, for instance, to do this:  Your text it won't work.  The correct order is- Your text HTML: Tags (cont.)

16. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan  Not case sensitivity  Many tags have attributes.  For example, centers the paragraph following it  Some browsers don't support the some tags and some attributes. HTML: Tags (cont.)

17. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan WENT'99 Went'99 WENT'99 Went'99 See what it looks like:  HTML documents begin and end with and tags  Comments appear between  HEAD section enclosed between and  BODY section enclosed between and Basic HTML Document Format

18. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Many high-level tools (Annex I) exist for creating Web pages  Microsoft FrontPage  Netscape Composer  Adobe PageMill  Macromedia DreamWeaver, HotDog, …  Also, many applications have "save to HTML" options (e.g., Word) Creating HTML Documents

19. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Adding Images: Use tags By default, browsers can display GIF, PNG, and JPEG files Other image formats may require plug-in applications for display Images

20. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Attributes of IMG tag: width, height align alt Images (cont.)

21. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Example Display as with the image Display as UNESCAP without the image Images (cont.)

22. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan HTML Links  to create a link to another document.  The target attribute:  xxx opens the document in a new browser window.  The name attribute:   Useful text

23. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan  Links can contain images and other text-level elements (i.e.,... )  Link to Absolute URL:  Use a complete URL beginning with http:// Chapter 2  Link to Relative URL: Use a filename or relative path to filename Interpreted location of current file Chapter 2. Hypertext Links

24. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan  Link to Section:  Use a section name (see below) preceded by #  Section 2  Link to Section in URL:  Use absolute or relative URL, then #, then section name  Sec. 2 of Chap. 1  Naming a Section:  Use and do not include the pound sign  Images Hypertext Links

25. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan  Color names :   Color names can also be defined by Hexadecimal number  Changing the Background color :   Changing Text color :   Spot color :  WENT'99 How to change color in HTML?

26. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Session 5: Tables Module II: Design Principles I

27. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Tables are common tools for arranging complex layout on a Web page Tables

28. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Tables

29. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Tables Gutter Cellpadding Cellspacing Source: Web Style Guide, www.webstyleguide.com

30. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan  Can have a border on tables using the BORDER attribute:  Increasing the number makes the border thicker  Can control the horizontal and vertical layout within cells  Can apply layout to an entire row Table Layout Left Column Right Column Some data Layout in a Table

31. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan  By default, the table is sized to fit the data  Can override and specify the width of a table relative to the page Table Width left-most right-most Table Width

32. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan  Can control the space between cells & margins within cells:  Can add headings: is similar to but displays heading centered in bold: HEAD1 HEAD2  Can have data that spans more than one column: four  Similarly, can span more than one row: five Other Table Attributes

33. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Tables Source: Web Style Guide, www.webstyleguide.com

34. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Flexible Tables Source: Web Style Guide, www.webstyleguide.com See the different

35. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan FrontPage Basics Module II: Design Principles I

36. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan FrontPage Basics

37. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan Switch to different view mode Preview webpage in browser FrontPage Basics

38. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan  Click on “File” in the file menu and select “New”. New task pane will appear on the right hand side of FrontPage.  Click on “One page web site” under “New web site” section.  In the pop up box, double click on “One page site”. Create a Web Page from scratch

39. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan These toolbars are mostly used in FrontPage for creating and designing web pages. Toolbars

40. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan  Select either some text or a picture  Click on “Insert” on the file menu  Select “Hyperlink”  In the pop-up box, type in the URL in the Address box. Then, put the name of this URL in “Text to display” box. Example: Insert Hyerlink

41. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan  Click on “Insert” on the file menu.  Point the mouse to “Picture”.  Select “From File”.  In the pop-up box, locate the picture on the computer that you could like to upload. Example: Insert Pictures

42. United Nations ESCAP Third Group Training Course in Application of Information and Communication Technology to Production and Dissemination of Official Statistics: Website Design, 28 May – 1 June 2007, SIAP, Chiba, Japan  Highlight the text  Go to the style boxes  Select the desire style Example: Formatting Text