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

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.

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.

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

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.

Graduate Design production

6

Lesson 1: Introduction to Dreamweaver

OverviewDW termsDW navigationDW tools/buttonsShow Me DemonstrationKnowledge CheckSummary

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.

Graduate Design production

8

Talkin’ the talk

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

Graduate Design production

9

Walkin’ the walk

Dreamweaver Navigation

Graduate Design production

10

Every expert needs their tools

Dreamweaver Tools & Buttons

Graduate Design production

11

Show Me Demonstration

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

Buttons Less than 5 minutes. With audio

Graduate Design production

12

Knowledge Check

Question

a. Distracterb. Answerc. Distracterd. Distracter

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.

Graduate Design production

14

Lesson 2: Preparation

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

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.

Graduate Design production

16

File storage / server

Graduate Design production

17

Purpose & Objectives

Graduate Design production

18

Storyboarding

Graduate Design production

19

Images / Graphics

Graduate Design production

20

Sound

Graduate Design production

21

Timeline

Graduate Design production

22

Resources

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

Graduate Design production

24

Knowledge Check

Question

a. Distracterb. Answerc. Distracterd. Distracter

Graduate Design production

25

Lesson 2 Summary

Graduate Design production

26

Lesson 3: Creating Your Own Website

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

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.

Graduate Design production

28

Create Pages

Graduate Design production

29

Layout and Set up

Graduate Design production

30

Templates

Graduate Design production

31

Adding Content

Graduate Design production

32

Adding Sound

Graduate Design production

33

Adding Graphics

Graduate Design production

34

Linking Pages

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

Graduate Design production

36

Knowledge Check

Question

a. Distracterb. Answerc. Distracterd. Distracter

Graduate Design production

37

Lesson 3 Summary

Graduate Design production

38

Lesson 4: Publishing Your Website

OverviewPublishing optionsLoading to a serverShow Me DemonstrationKnowledge CheckSummary

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.

Graduate Design production

40

Loading to a server

Graduate Design production

41

Show Me Demonstration

Captivate demo goes here.Shows:

Location of publishing options Demo publishing a page

Graduate Design production

42

Knowledge Check

Question

a. Distracterb. Answerc. Distracterd. Distracter

Graduate Design production

43

Lesson 4 Summary

Graduate Design production

44

Lesson 5: Editing Your Website

OverviewMaking changes after publishingMaintaining the web pageShow Me DemonstrationKnowledge CheckSummary

Graduate Design production

45

Editing Overview

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

publication.

Graduate Design production

46

Making Changes After Publishing

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.

Graduate Design production

48

Knowledge Check

Question

a. Distracterb. Answerc. Distracterd. Distracter

Graduate Design production

49

Lesson 5 Summary

Graduate Design production

50

Lesson 6: Conclusion

Module ReviewKnowledge Check

Graduate Design production

51

Module Summary

Graduate Design production

52

Knowledge Check