How to build a web site in Dreamweaver

1. How to build a web site in Dreamweaver Presented by Graduate Design Group 2 Meredith, Jennifer, Cammay and Diane

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 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 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 • Overview • DW terms • DW navigation • DW tools/buttons • Show Me Demonstration • Knowledge Check • Summary 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: 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 production

9. Walkin’ the walk Dreamweaver Navigation • Made up of many windows in the same screen. • Can be customized by the user. Graduate Design production

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

11. Every expert needs their tools • Dreamweaver Tools & Buttons • 1 Application bar: Found at the top of the screen. It contains menus and other application controlsfor which you may already know from similar programs. Graduate Design production

12. Every expert needs their tools • 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 production

13. Every expert needs their tools • 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 production

14. Every expert needs their tools • 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 production

15. Every expert needs their tools • Dreamweaver Tools & Buttons • 5 CSS window: Displays the html code that dictates the structure, format, and content of your website. Graduate Design production

16. Every expert needs their tools • 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 production

17. Every expert needs their tools • Dreamweaver Tools & Buttons • 7 Document window: Displays the template layout and content as you develop your site. Graduate Design production

18. Every expert needs their tools • 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 production

19. Every expert needs their tools • 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 production

20. Every expert needs their tools • 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 Codeview. Graduate Design production

21. Show Me Demonstration • Captivate Demo goes here. • Demo Dreamweaver Menus, Navigation, Tools and Buttons • Less than 5 minutes. • With audio Graduate Design production

22. Knowledge Check Where do you look for your assets in Dreamweaver? • Application bar • Files panel • Document window • Properties menu How do you change your view in Dreamweaver? • Workspace switcher • Status bar • Properties inspector • Layout and formatting tabs Graduate Design production

23. Lesson 1 Summary 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 production

24. Lesson 2: Preparation • Preparation Overview • File set up • Storyboarding • Images and Sound • Show Me Demonstration • Knowledge Check • Summary Graduate Design production

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

26. File set up • 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 production

27. Storyboarding • What do you want your website to look like? • 1st 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 production

28. Images and sound • 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 production

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

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

31. Lesson 2 Summary 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 production

32. Lesson 3: Creating Your Own Website • Overview • Create pages • Layout and setup pages • Templates • Adding content • Adding sound/graphics • Linking pages • Show Me Demonstration • Knowledge Check • Summary Graduate Design production

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

34. Create Pages To identify your Local Root folder: • Assumption: You have opened Dreamweaverand see the Welcome screen. • Click: Dreamweaver Site… • Select: the Advanced tab. • Enter: your site name. • Select: the browse folder next to the Local root folder field. Navigate to the desired folder on your computer, and Select. • Review: the additional tabs and fields. Enter information where appropriate. • 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 production

35. Create Pages, continued To create your first page (with blank template): • Assumption: You are at the Welcome screen. • Click: More…under the Create New column. Result: A new document window appears. • Select: the Blank Page tab, and HTML template under Page Type. • Choose: a template type from the list, and click Create. • Select: File>Save As. Result: Your Local root folder will be shown by default. • 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. • 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. • Select: File>Save. Graduate Design production

36. Layout and Set up Graduate Design production

37. Adding Content • Draft info in notes • Screen shot needed Graduate Design production

38. Adding sound/graphics Graduate Design production

39. Linking Pages Graduate Design production

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

41. Knowledge Check Question • Answer • Distracter • Distracter • Distracte Question • Distracter • Answer • Distracter • Distracter Graduate Design production

42. Lesson 3 Summary Graduate Design production

43. Lesson 4: Publishing Your Website • Overview • Publishing options • Loading to a server • Show Me Demonstration • Knowledge Check • Summary Graduate Design production

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

45. Publishing options Graduate Design production

46. Loading to a server • Draft info in notes Graduate Design production

47. Show Me Demonstration • Captivate demo goes here. • Shows: • Location of publishing options • Demo publishing a page Graduate Design production

48. Knowledge Check Question • Distracter • Distracter • Answer • Distracter Question • Distracter • Distracter • Distracter • Answer Graduate Design production

49. Lesson 4 Summary Graduate Design production

50. Lesson 5: Editing Your Website • Overview • Making changes after publishing • Maintaining the web page • Show Me Demonstration • Knowledge Check • Summary Graduate Design production