1. Presented by Graduate Design Group 2 Meredith, Jennifer, Cammay and Diane

2. 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 production2

3. 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 production3

4.  Lesson 1: Dreamweaver Overview  Lesson 2: Preparation  Lesson 3: Creating Your Own Website  Lesson 4: Publishing Your Website  Lesson 5: Editing Your Website  Lesson 6: Conclusion Graduate Design production4

5. 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 production5

6.  Overview  DW terms  DW navigation  DW tools/buttons  Show Me Demonstration  Knowledge Check  Summary Graduate Design production6

7. 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 production7

8.  Dreamweaver Terms ◦ Adobe Creative Suite 4 Web Premium: Creates the full range of digital experiences, including interactive websites, applications, user interfaces, presentations, and mobile device content through related Adobe products. ◦ JavaScript: A programming language used in websites for the internet. ◦ CSS: Cascading Style Sheets, style sheet language that describes the look and feel of an html website. ◦ HTML code: HyperText Markup Language, the language used to create and support the structure of a website. ◦ Database: a collection of files, stored to serve many needs. ◦ Assets: Elements, such as images and graphics, that help you build your website. Graduate Design production8

9. Dreamweaver Navigation  Made up of many windows in the same screen.  Can be customized by the user. Graduate Design production9

10. 10 1Application bar 2Layout and formatting tabs 3Workspace switcher 4Document toolbar 5CSS window 6Files panel 7Document window 8Status bar 9Properties inspector 1 2 4 5 6 3 7 9 8

11.  Dreamweaver Tools & Buttons ◦ 1 Application bar: Found at the top of the screen. It contains menus and other application controls for which you may already know from similar programs. Graduate Design production11

12.  Dreamweaver Tools & Buttons ◦ 2 Layout and formatting tabs: Shortcuts which contain many of the common operations that are needed when creating a website. All of these operations can also be found in the Application bar. Ex. Hyperlink = Insert>Hyperlink Tip: These tabs only appear when working in the Classic view. Graduate Design production12

13.  Dreamweaver Tools & Buttons ◦ 3 Workspace Switcher: Allows you to change the layout of your work environment. Example: Classic view shows the Document window. Designer view shows the CSS window. Graduate Design production13

14.  Dreamweaver Tools & Buttons ◦ 4 Document toolbar: Contains buttons that let you switch between different views of your document quickly. The toolbar also contains: ◦ Common commands ◦ Document viewing options ◦ Options for transferring between the local and remote sites Graduate Design production14

15.  Dreamweaver Tools & Buttons ◦ 5 CSS window: Displays the html code that dictates the structure, format, and content of your website. Graduate Design production15

16.  Dreamweaver Tools & Buttons ◦ 6 Files panel: View and manage the files (assets) in Your Dreamweaver site. Tip: You can customize the Files panel by changing the view in order to switch between your local or remote site more easily. Graduate Design production16

17.  Dreamweaver Tools & Buttons ◦ 7 Document window: Displays the template layout and content as you develop your site. Graduate Design production17

18.  Dreamweaver Tools & Buttons ◦ 8 Status bar Located at the bottom of the Document window, displays additional information about the website you are creating. Includes: ◦ Tag selector ◦ Select tool ◦ Hand tool ◦ Zoom tool and Set Magnification pop-up menu ◦ Window size pop-up menu(Not available in Code view.) ◦ Document size and download time ◦ Encoding indicator Graduate Design production18

19.  Dreamweaver Tools & Buttons ◦ 9 Properties control Allows you examine and edit the most common properties for the currently selected page element, such as text or an inserted object. The contents of the Property inspector varies depending on the element selected. Example: If you select an image on your page, the Property inspector changes to show properties for the image (the file path to the image, the width and height of the image, the border around the image, etc.). Graduate Design production19

20.  Dreamweaver Tools & Buttons ◦ Coding toolbar: Contains buttons that allow you perform standard coding operations. Example: collapsing and expanding code selections Tip: The Coding toolbar appears vertically on the left side of the Document window, and is only visible in Code view. Graduate Design production20

21.  Captivate Demo goes here. ◦ Demo Dreamweaver Menus, Navigation, Tools and Buttons ◦ Less than 5 minutes. ◦ With audio Graduate Design production21

22. Where do you look for your assets in Dreamweaver? a. Application bar b. Files panel c. Document window d. Properties menu How do you change your view in Dreamweaver? a. Workspace switcher b. Status bar c. Properties inspector d. Layout and formatting tabs Graduate Design production22

23. In this lesson, you learned:  Terms related to web development and Dreamweaver  Tools and buttons meant to help you navigate and use Dreamweaver. Graduate Design production23

24.  Preparation Overview  File set up  Storyboarding  Images and Sound  Show Me Demonstration  Knowledge Check  Summary Graduate Design production24

25. 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 production25

26.  Start by creating or identifying folders for the Local Root Folder.  A typical set up would include a folder with the following folders inside: ◦ Text ◦ Images ◦ Sound  These folders are an important part of organizing the assets of your website. Graduate Design production26

27.  What do you want your website to look like?  1 st step: sketch out a comprehensive picture of what the website will look like.  Repeat for linked or additional websites.  This will evolve into graphic organizer that displays the websites in sequence for the purpose of pre-visualizing your project. Graduate Design production27

28.  It’s a good idea to collect and organize your image and sound files prior to beginning with Dreamweaver.  Check the file type and size so they can be utilized without problems later.  File them in the Local Root Folder you created in the beginning. Graduate Design production28

29.  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 production29

30. What is a storyboard? a. A folder of images b. A folder of sounds c. A folder of text documents d. A graphic organizer What three folders should you create prior to starting Dreamweaver? a. Text, images, and assets b. Images, assets, and local root c. Text, images, and sound d. Sound, text, and assets Graduate Design production30

31. In this lesson, you have learned:  How to set up your files for use in Dreamweaver  The importance of storyboarding your website prior to creation.  Where to save your image and audio files for use in Dreamweaver. Graduate Design production31

32.  Overview  Create pages  Layout and setup pages  Templates  Adding content  Adding sound/graphics  Linking pages  Show Me Demonstration  Knowledge Check  Summary Graduate Design production32

33. 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 production33

34. To identify your Local Root folder:  Assumption: You have opened Dreamweaver and see the Welcome screen. 1. Click: Dreamweaver Site… 2. Select: the Advanced tab. 3. Enter: your site name. 4. Select: the browse folder next to the Local root folder field. Navigate to the desired folder on your computer, and Select. 5. Review: the additional tabs and fields. Enter information where appropriate. 6. Click: OK when you’re finished. Result: The Local root folder (and related folders) for all the files related to this Dreamweaver site have been identified. They appear in the Files panel. Graduate Design production34

35. To create your first page (with blank template):  Assumption: You are at the Welcome screen. 1. Click: More…under the Create New column. Result: A new document window appears. 2. Select: the Blank Page tab, and HTML template under Page Type. 3. Choose: a template type from the list, and click Create. 2. Select: File>Save As. Result: Your Local root folder will be shown by default. 3. Enter: the File Name (index.html), and Save. Result: The file name appears in the title bar at the top of the application window, as well as in the tab of your new document. 4. Type: the title of your page in the Document Title text box in the Document toolbar. Note: This is the title of your page (different from the file name) and will be seen by your site visitors when they view your page in a web browser. 5. Select: File>Save. Graduate Design production35

36. Graduate Design production36

37.  Draft info in notes  Screen shot needed Graduate Design production37

38. Graduate Design production38

39. Graduate Design production39

40.  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 production40

41. Question a. Answer b. Distracter c. Distracter d. Distracte Question a. Distracter b. Answer c. Distracter d. Distracter Graduate Design production41

42. Graduate Design production42

43.  Overview  Publishing options  Loading to a server  Show Me Demonstration  Knowledge Check  Summary Graduate Design production43

44. By the end of this lesson, you should be able to:  Understand the web site publishing options, and process. Graduate Design production44

45. Graduate Design production45

46.  Draft info in notes Graduate Design production46

47.  Captivate demo goes here.  Shows: ◦ Location of publishing options ◦ Demo publishing a page Graduate Design production47

48. Question a. Distracter b. Distracter c. Answer d. Distracter Question a. Distracter b. Distracter c. Distracter d. Answer Graduate Design production48

49. Graduate Design production49

50.  Overview  Making changes after publishing  Maintaining the web page  Show Me Demonstration  Knowledge Check  Summary Graduate Design production50

51. By the end of this lesson, you should be able to:  Edit and maintain your website after publication. Graduate Design production51

52. Graduate Design production52

53.  Captivate Demo goes here.  Show: ◦ How to make changes after publishing ◦ How to maintain the web page files. Graduate Design production53

54. Question a. Distracter b. Answer c. Distracter d. Distracte Question a. Distracter b. Distracter c. Distracter d. Answer Graduate Design production54

55. Graduate Design production55

56.  Module Review  Knowledge Check Graduate Design production56

57. Graduate Design production57

58. Question a. Distracter b. Distracter c. Answer d. Distracter Question a. Distracter b. Answer c. Distracter d. Distracter Graduate Design production58