Incorporating Multimedia into a Web Site Case Study

1
Incorporating Multimedia into a Web Site (Case
Study)

• Unit G

2
Objectives

• Explore HTML
• Plan the Web site
• Create home page
• Create child page
• Create additional pages
• Use text links

3
Objectives

• Use graphics links
• Add animation
• Add sound and video
• Create external links
• Add JavaScript
• Enhance a Web page

4
Case Scenario
Travel Northwest
5
Working with HTML

• HyperText Markup Language
• Tells browser how to display and link web pages
• Can work with HTML using

6
HTML Features
ltcentergtMy Web Pagelt/centergt

• Container tags used in pairs
• Opening/closing tags
• Tags not case sensitive be consistent
• Indent tags for readability

7
Basic HTML Tags
8
HTML Sections

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

9
Using a Text Editor

• Save document often
• Save as .htm file
• Open two windows
• Text editor
• Browser window

10
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

11
Planning the Site for Travel Northwest

• Concept
• Goal
• Target Audience
• Treatment
• Specifications
• Storyboard
• Navigation

12
Concept
Status owns BBs, inns and resorts
Location pacific northwest
Mission provide a unique vacation experience
13
Goal

• Increase occupancy rate via
• Increased potential client awareness of each BB,
  inn and resort
• Show uniqueness of individual facilities

14
Target Audience

• Middle- and upper-income couples
• Clients who want more personalized experience

15
Treatment

• Simplicity
• Ease of use
• Photographic-quality images
• Animation for important points
• Sound and video to enhance experience

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

17
Storyboard and Navigation
All (but home page) have Home buttons
18
Setup
1

• Set resolution to 800 x 600
• Set colors to 16 bit
• Browser is IE 5
• Create mysite folder
• Copy publisher files to mysite folder

19
Create Home Page
2

• Save as index.htm
• View in IE as you create

20
Create Child Page
3

• Save as BBpage.htm

21
Create Additional Pages
4

• Save as RHpage.htm

22
Text Links
5
23
Graphic Links
6
24
Adding Animation
7

• Marquee (scrolling text)
• Text may only display in quotes in Netscape

25
Adding GIF Animation
7
26
Adding Sound/Video
8
27
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

28
External Links
9
29
JavaScript Can

• Check for a password
• Display a visit counter
• Display a graphic rollover
• Create an animated button

30
JavaScript Rollover
10

• Image changes from Roche Harbor graphic to a
  balcony view when mouse rolls over it

31
JavaScript Rollover
10
32
Enhancing Web Page
11
33
Additional HTML Tags
34
Incorporating Multimedia Into a Web Site (Case
Study)

• End