1. Incorporating Multimedia into a Web Site (Case Study) Unit G

2. 2 Objectives Explore HTML Plan the Web site Create home page Create child page Create additional pages Use text links

3. 3 Objectives Use graphics links Add animation Add sound and video Create external links Add JavaScript Enhance a Web page

4. 4 Case Scenario TravelNorthwest

5. 5 Working with HTML HyperText Markup Language Tells browser how to display and link web pages Can work with HTML using A Web authoring program Dreamweaver A text editor Notepad An office application MS Word

6. 6 HTML Features Container tags; used in pairs Opening/closing tags Tags not case sensitive; be consistent Indent tags for readability My Web Page My Web Page

7. 7 Basic HTML Tags

8. 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. 9 Using a Text Editor Save document often Save as.htm file Open two windows: –Text editor –Browser window

10. 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. 11 Planning the Site for Travel Northwest ConceptGoal Target Audience TreatmentSpecificationsStoryboardNavigation

12. 12 Concept Status: owns B&Bs, inns and resorts Location: pacific northwest Mission: provide a unique vacation experience

13. 13 Goal Increase occupancy rate via –Increased potential client awareness of each B&B, inn and resort –Show uniqueness of individual facilities

14. 14 Target Audience Middle- and upper-income couples Clients who want more personalized experience

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

16. 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. 17 Storyboard and Navigation All (but home page) have Home buttons

18. 18 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 #1

19. 19 Create Home Page #2 Save as index.htm View in IE as you create

20. 20 Create Child Page #3 Save as B&Bpage.htm

21. 21 Create Additional Pages #4 Save as RHpage.htm

22. 22 create a text link in Index.htm Text Links #5 create text links in B&Bpage.htm create text lines in Rhpage.htm

23. 23 Graphic Links #6

24. 24 Adding Animation Marquee (scrolling text) –Text may only display in quotes in Netscape #7

25. 25 Adding GIF Animation Adding GIF Animation #7

26. 26 Adding Sound/Video #8 whales

27. 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. 28 External Links #9

29. 29 JavaScript Can: Check for a password Display a visit counter Display a graphic rollover Create an animated button

30. 30 JavaScript Rollover Image changes from Roche Harbor graphic to a balcony view when mouse rolls over it #10

31. 31 JavaScript Rollover #10

32. 32 Enhancing Web Page #11

33. 33 Additional HTML Tags

34. Incorporating Multimedia Into a Web Site (Case Study) End