Case Study: Incorporating Multimedia into a Web Site

Transcript Case Study: Incorporating Multimedia into a Web Site

Incorporating
Multimedia into a Web
Site (Case Study)
Unit G
Objectives
Explore HTML
Plan the Web site
Create home page
Create child page
Create additional
pages
Use text links
2
Objectives
Use graphics links
Add animation
Add sound and
video
Create external
links
Add JavaScript
Enhance a Web
page
3
Case Scenario
Travel
Northwest
4
Working with HTML
HyperText Markup Language
Tells browser how to display and
link web pages
Can work with HTML using
Dreamweaver
A Web authoring program
MS Word
An office application
Notepad
A text editor
5
HTML Features
<center>My Web Page</center>
Container tags; used in pairs
Opening/closing tags
Tags not case sensitive; be
consistent
Indent tags for readability
6
Basic HTML Tags
7
HTML Sections
Head
<head>
.
.
</head>
<body>
.
.
.
</body>
– Information used to display page
in browser
– Search engine information
– Specify web page title (used in
Favorites)
– Write scripts
Body
– Contents of Web page visible to
user
8
Using a Text Editor
Save document
often
Save as .htm file
Open two windows:
– Text editor
– Browser window
9
Directory Structure
Web Site includes .htm
pages, graphics files,
audio files and video files
Large sites use multiple
folders
File structure hierarchy
– Parent page
– Child page
10
Planning the Site
for Travel Northwest
Concept
Goal
Target Audience
Treatment
Specifications
Storyboard
Navigation
11
Concept
Status: owns B&Bs, inns and resorts
Location: pacific northwest
Mission: provide a unique vacation experience
12
Goal
Increase occupancy rate via
– Increased potential client awareness of
each B&B, inn and resort
– Show uniqueness of individual facilities
13
Target Audience
Middle- and upper-income
couples
Clients who want more
personalized experience
14
Treatment
Simplicity
Ease of use
Photographic-quality images
Animation for important points
Sound and video to enhance
experience
15
Target Playback System
Win95 or later and Pentium or
Mac G3 and OS7
56K modem
IE 3.0/Netscape 3.0 or later
Graphics (hi res 16-bit JPEG)
Animated GIFS
Times New Roman font
Sound card (WAV files with controls)
Video (AVI clips with controls)
16
Storyboard and Navigation
All (but home page) have Home buttons
17
#1 Setup
Set resolution to 800
x 600
Set colors to 16 bit
Browser is IE 5
Create mysite folder
Copy publisher files
to mysite folder
18
#2 Create Home Page
Save as
index.htm
View in IE as
you create
19
#3 Create Child Page
Save as B&Bpage.htm
20
#4 Create Additional Pages
Save as RHpage.htm
21
#5 Text Links
create
alinks
text
link
in Index.htm
create
text
create
text
linesin
inB&Bpage.htm
Rhpage.htm
22
#6 Graphic Links
23
#7 Adding Animation
Marquee (scrolling text)
– Text may only display in quotes in
Netscape
24
#7 Adding GIF Animation
25
#8 Adding Sound/Video
<a href=“whale-snd.wav”>whales</a>
26
External (URL) Links
First part is the scheme or protocol
– HTTP (HyperText Transfer Protocol)
Second part is server location
where file is
Make sure you check them often
27
#9 External Links
28
JavaScript Can:
Check for a
password
Display a visit
counter
Display a graphic
rollover
Create an animated
button
29
#10 JavaScript Rollover
Image changes from Roche
Harbor graphic to a balcony view
when mouse rolls over it
30
#10 JavaScript Rollover
31
#11 Enhancing Web Page
32
Additional HTML Tags
33
Incorporating
Multimedia Into a Web
Site (Case Study)
End