Transcript Training Module 4 and 5

United Nations
ESCAP
Module II:
Design Principles I
Naylin Oo
Information, Communication and Space Technology Division
UNESCAP
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
United Nations
ESCAP
•
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
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
United Nations
ESCAP
Session 3:
Drawing Board
Naylin Oo
Information, Communication and Space Technology Division
UNESCAP
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
United Nations
ESCAP
•
•
•
•
•
•
•
•
Structure
Style
Layout
Font
Color
Theme
Content
Functionality
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
United Nations
ESCAP
• Be frugal
• Stick to the point
• Cultivate a voice
• Think globally
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
United Nations
ESCAP
Source: Web Style Guide, www.webstyleguide.com
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
United Nations
ESCAP
Source: Web Style Guide, www.webstyleguide.com
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)
United Nations
ESCAP
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
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
United Nations
ESCAP
Source: Web Style Guide, www.webstyleguide.com
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
United Nations
ESCAP
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
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
United Nations
ESCAP
Source: Web Style Guide, www.webstyleguide.com
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
United Nations
ESCAP
Session 4:
Introduction to HTML
Front Page Basics
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
United Nations
ESCAP
What is HTML?
• Telling the browser what to do, and what
props to use.
• A series of tags that are integrated into a
text document.
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
United Nations
ESCAP
HTML: Tags
Tags are - surrounded with angle brackets
 <B> or <I>
 Most tags come in pairs
 exceptions: <P>, <br>, <li> tags …
 The first tag turns the action on, and the
second turns it off
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: Tags (cont.)
United Nations
ESCAP
 The second tag (off switch) starts with a
forward slash.
 For example ,<B> text </B>
 Can embedded, for instance, to do this:
 <HEAD><TITLE>Your text</HEAD></TITLE>
it won't work.
 The correct order is<HEAD><TITLE>Your text</TITLE></HEAD>
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: Tags (cont.)
United Nations
ESCAP
 Not case sensitivity
 Many tags have attributes.
 For example, <P ALIGN=CENTER>
centers the paragraph following it
 Some browsers don't support the some
tags and some attributes.
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
Basic HTML Document Format
United Nations
ESCAP
<HTML>
<HEAD>
<TITLE>WENT'99</TITLE>
</HEAD>
<BODY>
Went'99
</BODY>
</HTML>
See what it
looks like:
 HTML documents begin and end with <html> and </html> tags
 Comments appear between <!-- and -->
 HEAD section enclosed between <head> and </head>
 BODY section enclosed between <body> and </body>
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
Creating HTML Documents
United Nations
ESCAP
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)
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
Images
United Nations
ESCAP
Adding Images:
• Use <IMG SRC=imagefilename> tags
• By default, browsers can display GIF, PNG,
and JPEG files
• Other image formats may require plug-in
applications for display
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
Images (cont.)
United Nations
ESCAP
Attributes of IMG tag:
<Img src=my.gif width=50 height=50 align=right alt=“My image”>
• width, height
• align
• alt
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
Images (cont.)
United Nations
ESCAP
Example
<IMG ALT=UNESCAP SRC=/images/UNESCAP.gif>
Display as
Display as
with the image
UNESCAP
without the image
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
United Nations
ESCAP
 <a> to create a link to another document.
 The target attribute:
 <a href=“…”, target=“_blank”>xxx</a>
opens the document in a new browser
window.
 The name attribute:
 <a name=“abc”>
 <a href=“#abc”>Useful text</a>
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
Hypertext Links
United Nations
ESCAP
 Links can contain images and other text-level
elements (i.e., <A HREF…> ... </A>)
 Link to Absolute URL:
 Use a complete URL beginning with http://
<A HREF="http://host/path/chapter2.html">Chapter 2</A>
 Link to Relative URL:
Use a filename or relative path to filename
Interpreted location of current file
<A HREF="chapter2.html">Chapter 2</A>.
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
Hypertext Links
United Nations
ESCAP
 Link to Section:
 Use a section name (see below) preceded by #
 <A HREF="#Section2">Section 2</A>
 Link to Section in URL:
 Use absolute or relative URL, then #, then section name
 <A HREF="chapter1.html#Section2">Sec. 2 of Chap. 1</A>
 Naming a Section:
 Use <A NAME="..."> and do not include the pound sign
 <H2><A NAME="Section2">Images</A></H2>
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
How to change color in HTML?
United Nations
ESCAP
 Color names:
 <Font color=white>
 Color names can also be defined by Hexadecimal number
 Changing the Background color:
 <BODY BGCOLOR=#19378a>
 Changing Text color:
 <BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff66
VLINK=#66ffff>
 Spot color:
 <FONT COLOR=#66ffcc>WENT'99</FONT>
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
United Nations
ESCAP
Session 5:
Tables
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
United Nations
ESCAP
Tables are common tools for arranging complex layout on a Web page
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
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
United Nations
ESCAP
Cellpadding
Gutter
Cellspacing
Source: Web Style Guide, www.webstyleguide.com
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
Layout in a Table
United Nations
ESCAP
<html>
<!–- COMP519
page12.html
1.09.05 -->
<head>
<title>Table Layout</title>
</head>
<body>
<table border=1>
<tr align="center">
<td>Left<br>Column</td>
<td valign="top">Right Column</td>
</tr>
<tr>
<td>Some data</td>
<td>Some data</td>
</tr>
</table>
</body>
</html>
 Can have a border on tables using the
BORDER attribute: <table border=1>
 Increasing the number makes the
border thicker <table border=2>
 Can control the horizontal and vertical
layout within cells
<td align="center"><td align="right">
<td valign="top"><td valign="bottom">
 Can apply layout to an entire row
<tr align="center">
<tr valign="top">
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
Table Width
United Nations
ESCAP
<html>
<!–- COMP519 page13.html 1.09.05 -->
<head>
<title>Table Width</title>
</head>
<body>
<table width="100%“ >
<tr>
<td>left-most
<td align="right">right-most</td>
</tr>
</table>
</body>
</html>
 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="60%">
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
Other Table Attributes
United Nations
ESCAP
 Can control the space between cells & margins within cells:
<table border=1 cellspacing=4 cellpadding=8>
 Can add headings: <th> is similar to <td> but displays
heading centered in bold:
<th>HEAD1</th> <th>HEAD2</th>
 Can have data that spans more than one column:
<td rowspan=2 align="center">four</td>
 Similarly, can span more than one row:
<td colspan=2 align="center"> five </td>
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
United Nations
ESCAP
Source: Web Style Guide, www.webstyleguide.com
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
United Nations
ESCAP
See the
different
Source: Web Style Guide, www.webstyleguide.com
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
United Nations
ESCAP
FrontPage Basics
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
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
United Nations
ESCAP
Switch to different view mode
Preview webpage in browser
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
Create a Web Page from scratch
United Nations
ESCAP
 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”.
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
Toolbars
United Nations
ESCAP
These toolbars are mostly used in FrontPage
for creating and designing web pages.
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: Insert Hyerlink
United Nations
ESCAP




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.
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: Insert Pictures
United Nations
ESCAP
 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.
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: Formatting Text
United Nations
ESCAP
 Highlight the text
 Go to the style boxes
 Select the desire style
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