Transcript Document
Module III: Design Principles II
United Nations
ESCAP
Sessions:
7,8, and 9
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 III: Design Principles II
United Nations
ESCAP
Session 7: Frames, Forms, Multimedia
Session 8: Using Cascading Style Sheet (CSS)
Session 9: Dynamic Pages (JavaScript)
Using Web Site Templates
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 III: Design Principles II
United Nations
ESCAP
Session 7:
HTML Frames
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
Introduction to frames
• A frame page is best described as a page that divides
the browser’s window into multiple windowpanes
(frames).
• Frame pages are a special type of HTML page that aid
navigation.
• Particularly useful for content consisting of lists,
categories, and pictures, such as that found in catalogs.
• Not compatible with very early versions of web
browsers.
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
Frames
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
Frame Template
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD><TITLE>Document Title</TITLE></HEAD>
<FRAMESET ...>
<!-- FRAME and Nested FRAMESET Entries -->
<NOFRAMES>
<BODY>
<!-- Stuff for non-Frames browsers -->
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
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
Frame Border
Frame Border
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
Creating a Frames Page (1)
Select
File >>> New >>> Page
from the menu bar and
click the Frames Pages tab.
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
Creating a Frames Page (2)
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
Creating a Frames Page (3)
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
Creating a Frames Page (4)
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
Frame Properties
Name
Assign a name to each frame for
linking purposes.
Initial Page
Assign the initial HTML source page.
Frame size
Designate the width and height of the
frame in absolute pixels or as a
percentage of the screen.
Options
Check "Resizable in Browser" if the
user should be able to click and drag
the frame borders to resize them.
Make a selection from "Show scroll
bars" if scroll bars should be visible in
the frame.
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
Linking Frames
Page Default
will load the page in the default
frame indicated in parentheses.
Same Frame
will load the new page in the
same frame.
New Window
will open a new browser
window.
Parent Window
will load the page in the current
window.
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 III: Design Principles II
United Nations
ESCAP
Session 7:
HTML Forms
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
Introduction to Forms
United Nations
ESCAP
• Forms allow you to receive information
from the visitors to your web site.
• Forms work with all browsers
• Forms are platform independents
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
Form Page Wizard (1)
Steps
File >>> New >>> Page
from the menu bar and
Click the General tab.
Double-click on
Form Page Wizard and
Click Next on the first
explanatory wizard window.
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
Form Page Wizard (2)
Steps
The second window will
allow you to add the
questions that will
appear on the form.
Click the Add button to
insert new questions
into the form.
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
Form Page Wizard (3)
Steps
Select an input type
from the scrolling menu
and edit the prompt for
the question in the text
box below if necessary.
Click Next > when
finished.
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
Form Page Wizard (4)
Steps
Select the input type for
the question you
entered in the previous
window. The contents of
this window will vary
depending on the type
of question that was
entered.
Click Next > when the
selections have been
made.
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
Form Page Wizard (5)
Steps
The question will now appear in
the question listing. Click Add
to add more elements to the
form. If a question should be
changed, highlight the title in
the list and click Modify or
Remove to delete the question.
Reorder the questions using the
Move Up and Move Down
buttons. Click Next > to proceed
to the next step after the
questions have been added.
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
Form Page Wizard (6)
Steps
Presentation Options - On
this window, determine
the layout of the form
from several options and
click Next >.
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
Form Page Wizard (7)
Steps
Output Options - Now that the
form elements are in place,
you need to designate a way
to view the results of the form.
You will want to save them
either as a web page or text
file and enter the base name
for the file where results will
be stored.
Click Next > when finished.
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
Creating a Form manually
• Activate the Form toolbar by
selecting Insert >>> Form
and dragging the menu off
the menu bar.
• First, click the Form button. A
dotted area with Submit and
Reset buttons inside will
appear.
• Click the Form Properties
button.
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
Creating a Form manually (2)
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
Creating a Form manually (3)
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
Text Box
• Text boxes allow the
user to enter one line
of text.
• Click the Text Box
button on the form
toolbar to add a text
box to the form.
• Activate the text box
and select
Format|Properties
from the menu bar.
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
Text Box Validation
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
Text Area
• Text boxes allow the
user to enter multiple
lines of text.
• Click the Text Area
button on the form
toolbar to add a text
area to the form.
• Activate the text area
and select
Format|Properties from
the menu bar.
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
Check Box
• Check boxes allow the user
to make multiple selections
from a list.
• Add check boxes by clicking
the button on the form
toolbar, enter value, and
press ENTER or
SHIFT+ENTER after each
one.
• Select Format >>>
Properties to change the
checkbox properties.
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
Radio Button
• Radio buttons allow the
user to make only a single
selection from a list.
• Add a list of radio buttons
by clicking the button on
the form toolbar, enter
value, and press ENTER
or SHIFT+ENTER after
each one.
• Select Format >>>
Properties to change the
radio butto properties.
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
•
•
•
•
Drop-down Menu
Drop-down menu is more
suitable if a check box or radio
button is too long. The menu will
consolidate the choices and take
up less vertical space on the
page.
Add a drop-down menu to the
form by clicking its button on
the form toolbar.
Add values to the menu by
double-clicking on the menu.
First, name the drop-down menu
in the first field. Add choices to
the menu by clicking the Add...
button.
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
Drop-down Menu Properties
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
Forms - Example
United Nations
ESCAP
<html>
<head>
<title>Get Identity</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<p><b>Who are you?</b></p>
<form method="post" action="">
<p>Name:
<input type="text" name="textfield">
</p>
<p>Gender:
<input type="radio" name="gender" value="m">Male
<input type="radio" name="gender"
value="f">Female</p>
</form>
</body>
</html>
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 III: Design Principles II
United Nations
ESCAP
Session 7:
HTML and Multimedia
Basic Audio and Video
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
Multimedia
United Nations
ESCAP
Multimedia is everything you can hear or see: texts, books, pictures,
music, sounds, CDs, videos, DVDs, Records, Films, and more.
Multimedia comes in many different formats. On the Internet you will
find many of these elements embedded in web pages, and today's
web browsers have support for a number of multimedia formats.
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
File Extensions and Types
United Nations
ESCAP
File Type
Extention/Mime type
======================================================
Plain text:
HTML document:
GIF image:
Acrobat file:
AIFF sound file:
MP3
QuickTime movie:
MPEG movie:
.txt
.html
.gif or .jpg or .png
.pdf
.aiff .au . wav
.mp3
.mov
.mpeg or .mpg
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
Embedding Audio
United Nations
ESCAP
For Internet Explorer, you can use BGSOUND:
<BGSOUND src=" http://www.domain.com//sound.wav ">
Netscape doesn’t support BGSOUND, so you need to
use the EMBED tag:
<EMBED SRC="http://www.domain.com/sound.wav"
CONTROLS="playbutton" WIDTH=25 HEIGHT=25
AUTOSTART=false>
Use the Embed tag:
<EMBED SRC="http://www.domain.com/video.avi"
AUTOSTART=false width="300" height="300">
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 III: Design Principles II
United Nations
ESCAP
Session 7:
Using Cascading Style Sheet
(CSS)
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
Definition of CSS
United Nations
ESCAP
Cascading Style Sheets (CSS) is a stylesheet language
used to describe the presentation of a document
written in a markup language. Its most common
application is to style web pages. - WikiPedia
Benefits of Using CSS
Pages load faster
Increased accessibility
Pages are easier to maintain and update
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
Types of CSS
United Nations
ESCAP
External
Internal/Embedded
Imported
Inline
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
CSS - External
Connection made via the LINK tag
Use the optional TYPE attribute to specify a
media type
<head>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css”/>
</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
CSS - Internal/Embedded
United Nations
ESCAP
Style characteristics are embedded in the
HEAD section of the webpage
Perhaps best used when a single page
requires a unique style sheet
<head>
<style type=“text/css”>
hr { color: navy}
body {margin-left: 20px}
</style>
</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
CSS - Imported
United Nations
ESCAP
Allows for using style sheets from other
sources
Must be included at the beginning of the style
sheet using the @import statement
Other CSS rules can be included
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
CSS - Inline
United Nations
ESCAP
Least flexible
Requires each element to be tagged if you
want them to appear differently
Looses the advantage of using CSS
<p style=“color: yellow; font-family: verdana”>
This is a paragraph
</p>
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 III: Design Principles II
United Nations
ESCAP
Session 7:
Dynamic 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
Dynamic Pages
United Nations
ESCAP
First introduced in 1995 with the creation of
JavaScript
Multiple technologies of delivering
interactive content used
Two major categories of technologies:
a) Server-side technology
b) Client-side technology
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
Server-Side
United Nations
ESCAP
Web pages are produced on-the-fly by server-side
programs, frequently based on parameters in the
URL or from an HTML form.
1)
2)
3)
4)
The browser sends an HTTP request.
The server retrieves the requested file with the script.
The server executes the script or program which typically
outputs an HTML web page.
The server sends the HTML output to the client's
browser.
Scripting Languages (PHP, Perl, Coldfusion, etc.) in
combination with database.
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
Client-Side
United Nations
ESCAP
Web pages containing content that can change
without the actual HTML code being changed.
Client-side dynamic content is generated on the
client's computer.
JavaScript: client-side scripting language.
Flash: an alternative approach to scripting
language, prepackages the scripted actions into
a new file format.
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
JavaScript — Strength
United Nations
ESCAP
Speed: fast, code functions run immediately on the
user’s computer
Simplicity: relatively simple to learn and implement
Versatility: plays nicely with other languages, can be
inserted into any web page regardless of the file
extension.
Server load: reduces the demand on the site server.
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 III: Design Principles II
United Nations
ESCAP
Session 7:
Using Website Templates
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
What is a Web Site Template?
United Nations
ESCAP
A Web Template is a ready-made website that will
allow you to create high-quality websites in a
fraction of the time.
Why web templates make sense in web design:
Fast Speed
Reduce Cost
In a nutshell: web templates offer a lot of variety in
both style and presentation, with all the nitty gritty
problems already solved.
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
Website Template Sources
United Nations
ESCAP
Included with Web Editor
web page editors (FrontPage, Dreamweaver, Net Fusion Objects)
come with pre-built templates which you can use or modify.
Make your Own Template
Need to understand web page layout.
Use tables for the layout and CSS for the element formatting
Free or Purchased Template
Many websites offering good high quality professional templates
for free or low cost.
need to change are the navigation options and the logo
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