1. Before We Begin Please download the files from http://bit.ly/14LyGLM, as we will be using them in our walkthroughs

2. Dreamweaver 1: Getting Started

3. Services for Faculty, Staff, and GTAs Services for Students Instructional Design & Project Consulting Instructional Equipment Checkout Tech Training Workshops: Open-enrollment and Custom Tech Training Workshops Multimedia Equipment (Digital Aquarium)

4. Dreamweaver 1: Getting Started

5. Objectives In this course, you will learn how to: Create your site’s folder structure Navigate the Workspace Create a webpage Add text, images, embedded videos, and links to your pages Structure text & page layout

6. Lesson 1 Setting up A New Site

7. File Organization

8. 1.Open Dreamweaver. 2.In the Create New menu, click Site Setup. 3.Enter Workshop in Site Name field. 4.Click folder icon for Local Site Folder field. 5.Click New folder icon in bottom of screen. 6.Type Websites and press Create. 7.Click New folder icon in bottom of screen. 8.Type Workshop and press Create (this will be your root folder for your site – think of it as your home folder). 9.Click New folder icon in bottom of screen. 10.Type Images and press Enter. 11.Navigate back up to Workshop folder and click Choose. 12.In Site Setup window, click Advanced Settings. 13.On Local Info tab, choose Images folder just created for Default Images folder: field and click Choose. 14.Navigate through other tabs, but let them know these are for more advanced features. 15.Click Save. 16.At this point move exercise files to this newly created Images folder. Dreamweaver 1: Getting Started

9. Walkthrough: Site Definition When finished Files Panel should look like this:

10. Lesson 2 Navigating the Workspace

11. Walkthrough Navigation

12. Tool Bar

13. Code/Design View

14. Document Window

15. Properties Inspector Properties

16. Insert Panel

17. CSS Styles Panel

18. Files Panel

19. Lesson 3 Creating a Webpage

20. HTML & CSS Webpages are built up of many different elements, the most common of which are: HTML – Hyper Text Markup Language CSS – Cascading Style Sheets

21. Getting started in HTML In this course, we will follow the principle that: Content is first (HTML) Presentation is second (CSS) As such, we will focus this workshop on HTML elements of site development, and handle CSS in Dreamweaver 2: Adding Style to Pages

22. Process 1.Select File > New... from the menu bar 2.Click the Blank Page tab, set the Page Type to HTML, Layout to, and DocType to HTML5. Click Create. 3.Choose Split view to display code and design views. 4.Enter Workshop in the Title field. 5.Open lorem_ipsum.rtf from your saved exercise files. 6.Copy the text from this file. 7.Paste your copied text in the Design View of the Document Window. 8.In Insert Panel, select Common from dropdown menu, then click Images: Image to add each image from the Images folder. Note: Enter Alt Text and a link to description files to accommodate screen readers. These files should also be in your Images folder 9.Save your page, naming the file index.html in the Save window

23. Walkthrough Page Creation

24. Lesson 4 Structuring Text

25. Structuring Text - Recap Broken into two sets of instructions: HTML – defines the type of text (header, paragraph, etc) CSS – defines the style of each type of text

26. Common Structure Tags TagTag NameDefinition Paragraphparagraph,,, etc Heading 1, 2, 3, etcheadings Unordered Listbulleted list Ordered Listnumbered list List Item items within an ordered or unordered list Anchorhyperlinks

27. Walkthrough Structuring Text

28. Lesson 4 Structuring Layout

29. Divs Provide a means, through HTML, to structurally differentiate layout elements Act as containers Are styled through CSS

30. Emerging Div Standards The most common names used for Div IDs are: header content nav sidebar footer

31. Process 1.Select text & images previously entered as main content for webpage (do not include the unordered list starting the text, or the hyperlink footer at the end of the text). 2.Click Insert Div Tag from Insert Panel. 3.Type content in ID field. 4.Click OK.

32. Walkthrough Structuring Layout

33. Remember!! Save your file for Dreamweaver 2

34. Review You should now be able to: Create your site’s folder structure Navigate the Workspace Create a webpage Add text, images, embedded videos, and links to your pages Structure text & page layout

35. Images Courtesy: Walkthrough images and descriptions: http://commons.wikimedia.org/wiki/File:Metabolism_branch_at _the_central_cancer_research_labs.jpg http://commons.wikimedia.org/wiki/File:Chemical_laboratory_ at_the_central_cancer_research_labs.jpg http://commons.wikimedia.org/wiki/File:Immunology_laborator y_at_the_central_cancer_research_labs.jpg Icons & interface: Adobe, Inc. & Apple, Inc. The E chang e

36. What’s next? Dreamweaver 2 – Adding Style to Pages Lynda.com - Dreamweaver CS6 Essential Training technology.gsu.edu/training The E chang e

37. Your feedback is important to us: http://bit.ly/14CAJ4B The E chang e