Sessions: 7,8, and 9

jellytrickInternet και Εφαρμογές Web

10 Νοε 2013 (πριν από 3 χρόνια και 7 μήνες)

55 εμφανίσεις

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 III: Design Principles II




Sessions
:

7,8, and 9




Naylin Oo


Information, Communication and Space Technology Division

UNESCAP

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 III: Design Principles II



Session 7
: Frames, Forms, Multimedia


Session 8
: Using Cascading Style Sheet (CSS)


Session 9
:
Dynamic Pages (JavaScript)


Using Web Site Templates





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 7:

HTML Frames

Module III: Design Principles II

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


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.

Introduction to frames

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

Frames

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

<!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>

Frame Template

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

Frame Border

Frame Border

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


File >>> New >>> Page



from the menu bar and


click the
Frames Pages

tab.

Creating a Frames Page (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

Creating a Frames Page (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

Creating a Frames Page (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

Creating a Frames Page (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

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.

Frame Properties

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 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.

Linking Frames

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 7:

HTML Forms

Module III: Design Principles II

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


Forms allow you to receive information
from the visitors to your web site.



Forms work with all browsers



Forms are platform independents

Introduction to Forms

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

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.

Form Page Wizard (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

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.

Form Page Wizard (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

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.


Form Page Wizard (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

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.

Form Page Wizard (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

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.

Form Page Wizard (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

Steps



Presentation Options
-

On
this window, determine
the layout of the form
from several options and
click Next >.



Form Page Wizard (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

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.

Form Page Wizard (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


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.

Creating a Form manually

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

Creating a Form manually (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

Creating a Form manually (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


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.


Text Box

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

Text Box Validation

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


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.

Text Area

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


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.


Check Box

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


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.


Radio Button

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


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.

Drop
-
down Menu

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

Drop
-
down Menu Properties

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>

<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>

Forms
-

Example

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 7:

HTML and Multimedia

Basic Audio and Video

Module III: Design Principles II

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

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.

Multimedia

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

File Type



Extention/Mime type

======================================================

Plain text:


.txt

HTML document:

.html

GIF image:



.gif or .jpg or .png

Acrobat file:



.pdf

AIFF sound file:


.aiff .au . wav

MP3




.mp3

QuickTime movie:

.mov

MPEG movie:


.mpeg or .mpg


File Extensions and Types

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


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">

Embedding Audio

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 7:

Using Cascading Style Sheet
(CSS)

Module III: Design Principles II

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

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

Definition of CSS

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


External



Internal/Embedded



Imported



Inline

Types of CSS

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


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>


CSS
-

External

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


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>

CSS
-

Internal/Embedded

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


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

CSS
-

Imported

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


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>

CSS
-

Inline

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 7:

Dynamic Pages

Module III: Design Principles II

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


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



Dynamic Pages

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


Web pages are produced on
-
the
-
fly by server
-
side
programs, frequently based on parameters in the
URL or from an HTML form.

1)
The browser sends an HTTP request.

2)
The server retrieves the requested file with the script.

3)
The server executes the script or program which typically
outputs an HTML web page.

4)
The server sends the HTML output to the client's
browser.



Scripting Languages (PHP, Perl, Coldfusion, etc.) in
combination with database.

Server
-
Side

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


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.

Client
-
Side

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


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.

JavaScript


Strength

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 7:

Using Website Templates

Module III: Design Principles II

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


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.

What is a Web Site Template?

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

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

Website Template Sources