52
PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Embed Size (px)

DESCRIPTION

Why do you need to know Dreamweaver? As an Instructional Designer, you may be asked to create training intended for the internet. Benefits of Dreamweaver : Simplifies the web page building process. Supports the latest web technologies. Works on both Mac OS and Windows platforms. Offers a variety of publishing options. Allows for easy web page maintenance. 3 Graduate Design production

Citation preview

Page 1: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

PRESENTED BY GRADUATE DESIGNGROUP 2

MEREDITH, JENNIFER, CAMMAY AND DIANE

How to build a web site in Dreamweaver

Page 2: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

2

What is Dreamweaver?

Dreamweaver is a software application:“ideal for web designers, web developers,

and visual designers.”Authors websites and other applications.Creates web pages:

From a template With code From scratch

Works with Photoshop and Fireworks.

Page 3: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

3

Why do you need to know Dreamweaver?

As an Instructional Designer, you may be asked to create training intended for the internet.

Benefits of Dreamweaver :Simplifies the web page building process.Supports the latest web technologies.Works on both Mac OS and Windows

platforms.Offers a variety of publishing options.Allows for easy web page maintenance.

Page 4: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

4

Outline

Lesson 1: Dreamweaver OverviewLesson 2: PreparationLesson 3: Creating Your Own WebsiteLesson 4: Publishing Your WebsiteLesson 5: Editing Your WebsiteLesson 6: Conclusion

Page 5: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

5

Objectives

By the end of this training module, you should be able to:

Use the correct terms, tools and buttons when you navigate through Dreamweaver.

Prepare for creating a website through the strategic gathering of information, files and documents.

Create a webpage by customizing the layout, and adding sound, graphics, and content.

Link multiple web pages together for a layered web site.Understand the web site publishing options, and process.Edit and maintain your website after publication.

Page 6: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

6

Lesson 1: Introduction to Dreamweaver

OverviewDW termsDW navigationDW tools/buttonsShow Me DemonstrationKnowledge CheckSummary

Page 7: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

7

Dreamweaver Overview

By the end of this lesson, you should be able to:Use the correct terms, tools and buttons

when you navigate through Dreamweaver.

Page 8: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

8

Talkin’ the talk

Dreamweaver Terms Adobe Creative Suite 4 Web Premium JavaScript Code CSS HTML XML database

Page 9: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

9

Walkin’ the walk

Dreamweaver Navigation

Page 10: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

10

Every expert needs their tools

Dreamweaver Tools & Buttons

Page 11: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

11

Show Me Demonstration

Captivate Demo goes here. Demo Dreamweaver Menus, Navigation, Tools and

Buttons Less than 5 minutes. With audio

Page 12: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

12

Knowledge Check

Question

a. Distracterb. Answerc. Distracterd. Distracter

Page 13: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

13

Lesson 1 Summary

In this lesson, you learned:Terms related to web development and

DreamweaverTools and buttons meant to help you navigate

and use Dreamweaver.

Page 14: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

14

Lesson 2: Preparation

Preparation OverviewFile storage / serverPurpose & ObjectivesStoryboardingImages / GraphicsSoundTimelineResourcesShow Me DemonstrationKnowledge CheckSummary

Page 15: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

15

Preparation Overview

By the end of this lesson, you should be able to:Prepare for creating a website through the

strategic gathering of information, files and documents.

Page 16: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

16

File storage / server

Page 17: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

17

Purpose & Objectives

Page 18: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

18

Storyboarding

Page 19: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

19

Images / Graphics

Page 20: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

20

Sound

Page 21: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

21

Timeline

Page 22: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

22

Resources

Page 23: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

23

Show Me Demonstration

Captivate demo goes here.Shows:

Where and how to access file storage/server info How to set up and save images and graphics How to set up and save audio files

Page 24: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

24

Knowledge Check

Question

a. Distracterb. Answerc. Distracterd. Distracter

Page 25: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

25

Lesson 2 Summary

Page 26: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

26

Lesson 3: Creating Your Own Website

OverviewCreate pagesLayout and setup pagesTemplatesAdding contentAdding soundAdding graphicsLinking pagesShow Me DemonstrationKnowledge CheckSummary

Page 27: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

27

Overview of Website Creation

By the end of this lesson, you should be able to:Create a webpage by customizing the layout,

and adding sound, graphics, and content.Link multiple web pages together for a

layered web site.

Page 28: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

28

Create Pages

Page 29: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

29

Layout and Set up

Page 30: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

30

Templates

Page 31: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

31

Adding Content

Page 32: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

32

Adding Sound

Page 33: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

33

Adding Graphics

Page 34: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

34

Linking Pages

Page 35: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

35

Show Me Demonstration

Captivate Demo goes here.Shows:

How to create a web page from a template How to choose a layout and set up a page How to create a template How to add content, sound and graphics How to link pages

Page 36: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

36

Knowledge Check

Question

a. Distracterb. Answerc. Distracterd. Distracter

Page 37: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

37

Lesson 3 Summary

Page 38: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

38

Lesson 4: Publishing Your Website

OverviewPublishing optionsLoading to a serverShow Me DemonstrationKnowledge CheckSummary

Page 39: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

39

Publishing Overview

By the end of this lesson, you should be able to:Understand the web site publishing options,

and process.

Page 40: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

40

Loading to a server

Page 41: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

41

Show Me Demonstration

Captivate demo goes here.Shows:

Location of publishing options Demo publishing a page

Page 42: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

42

Knowledge Check

Question

a. Distracterb. Answerc. Distracterd. Distracter

Page 43: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

43

Lesson 4 Summary

Page 44: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

44

Lesson 5: Editing Your Website

OverviewMaking changes after publishingMaintaining the web pageShow Me DemonstrationKnowledge CheckSummary

Page 45: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

45

Editing Overview

By the end of this lesson, you should be able to:Edit and maintain your website after

publication.

Page 46: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

46

Making Changes After Publishing

Page 47: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

47

Show Me Demonstration

Captivate Demo goes here.Show:

How to make changes after publishing How to maintain the web page files.

Page 48: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

48

Knowledge Check

Question

a. Distracterb. Answerc. Distracterd. Distracter

Page 49: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

49

Lesson 5 Summary

Page 50: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

50

Lesson 6: Conclusion

Module ReviewKnowledge Check

Page 51: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

51

Module Summary

Page 52: PRESENTED BY GRADUATE DESIGN GROUP 2 MEREDITH, JENNIFER, CAMMAY AND DIANE How to build a web site in Dreamweaver

Graduate Design production

52

Knowledge Check