1. Macromedia Dreamweaver 8 Revealed DREAMWEAVER GETTING STARTED WITH

2. Chapter 12Macromedia Dreamweaver 8 Revealed Explore the Dreamweaver workspace View a Web page and use Help Plan and define a Web site Add a folder and pages, and set the home page Create and view a site map Chapter Lessons

3. Chapter 13Macromedia Dreamweaver 8 Revealed What is Dreamweaver? –Web design software for creating a Web page or a complex Web site What is a Web site? –A group of related Web pages that are linked together and share a common interface and design Getting Started with Dreamweaver

4. Chapter 14Macromedia Dreamweaver 8 Revealed What does Dreamweaver offer? –Design tools that can create dynamic and interactive web page without writing HTML code –Organizational tools –Site management tools –Graphic site maps Using Dreamweaver Tools

5. Chapter 15Macromedia Dreamweaver 8 Revealed Title bar Menu bar Insert bar Document window Status bar Property inspector Select tool Hand tool Zoom tool FIGURE 1 Dreamweaver 8 workspace

6. Chapter 16Macromedia Dreamweaver 8 Revealed Working with Dreamweaver Views Design view Code view Code and Design view

7. Chapter 17Macromedia Dreamweaver 8 Revealed Starting Dreamweaver (Windows) Click the Start button on the taskbar Click (All) Programs  Macromedia  Macromedia Dreamweaver 8

8. Chapter 18Macromedia Dreamweaver 8 Revealed Dreamweaver 8 FIGURE 3 Starting Dreamweaver 8 (Windows)

9. Chapter 19Macromedia Dreamweaver 8 Revealed Starting Dreamweaver (Macintosh) Click Finder in the Dock, then click Applications Click the Macromedia Dreamweaver 8 folder, then double-click the Dreamweaver 8 application Dreamweaver 8 FIGURE 4 Starting Dreamweaver 8 (Macintosh)

10. Chapter 110Macromedia Dreamweaver 8 Revealed Changing Views Click the Show Code View button Click the Show Code and Design Views button Click the Show Design View button

11. Chapter 111Macromedia Dreamweaver 8 Revealed Show Code View button Show Code and Design View button Show Design View button Coding toolbar FIGURE 5 Code view for new document

12. Chapter 112Macromedia Dreamweaver 8 Revealed Viewing Panels Expand the Application panel Click each panel tab Collapse the Application panel Study the CSS and Files panel groups Collapse the CSS panel group

13. Chapter 113Macromedia Dreamweaver 8 Revealed Opening a Web Page Create new or open existing –Web site –Web page Homepage –First Web page that appears when viewers go to a Web site –Sets the look and feel of the Web site and directs viewers to the rest of the pages in the Web site

14. Chapter 114Macromedia Dreamweaver 8 Revealed Basic Web Page Elements Text Hyperlinks (links) Graphics –Banners Navigation bars –Image map Flash button objects

15. Chapter 115Macromedia Dreamweaver 8 Revealed Graphic Form Navigation bar FIGURE 7 Common Web page elements

16. Chapter 116Macromedia Dreamweaver 8 Revealed Banner Table Flash button object Text links Text Graphic FIGURE 8 Striped Umbrella Web page elements

17. Chapter 117Macromedia Dreamweaver 8 Revealed Getting Help Contents Index Search Favorites Keywords … Topics found … in results FIGURE 9 Dreamweaver 8 Help window

18. Chapter 118Macromedia Dreamweaver 8 Revealed Web Site Creation Process FIGURE 10 Phases of a Web site development project

19. Chapter 119Macromedia Dreamweaver 8 Revealed Planning a Web Site Audience needs Site goals Gathering content Budget Schedule Team Updates

20. Chapter 120Macromedia Dreamweaver 8 Revealed Creating Storyboards FIGURE 11 The Striped Umbrella Web site storyboard

21. Chapter 121Macromedia Dreamweaver 8 Revealed Testing the Pages Browsers and browser versions Screen sizes Speed on different connections Testing is a continuous process

22. Chapter 122Macromedia Dreamweaver 8 Revealed Modifying the Pages Changes are constantly needed Test page after each change Modifying and testing is an ongoing process

23. Chapter 123Macromedia Dreamweaver 8 Revealed Publishing the Site Transfer all the files to a Web server –Web server: a computer that is connected to the Internet with an IP address A Web site must be published to the Web server before it can be viewed by others

24. Chapter 124Macromedia Dreamweaver 8 Revealed Publishing the Site IP: Internet Protocol –IP address –Example: 207.456.123.2 ISP: Internet Service Provider –Hosts Web site FTP: File Transfer Protocol –Host, host directory, login, password

25. Chapter 125Macromedia Dreamweaver 8 Revealed Publishing the Site Create a root folder Define the Web site Set up Web server access

26. Chapter 126Macromedia Dreamweaver 8 Revealed Root folder FIGURE 12 Creating a root folder using Windows Explorer

27. Chapter 127Macromedia Dreamweaver 8 Revealed FIGURE 13 Creating a root folder using a Macintosh

28. Chapter 128Macromedia Dreamweaver 8 Revealed Links relative to options Enable cache Refresh local file list automatically Web site name Local root folder FIGURE 14 Site definition for The Striped Umbrella dialog box

29. Chapter 129Macromedia Dreamweaver 8 Revealed Remote info category Access list arrow FIGURE 15 Setting the remote access for The Striped Umbrella Web site

30. Chapter 130Macromedia Dreamweaver 8 Revealed The Assets Folder Stores all non-HTML (media) files: –Image files –Sound files –Video files Set it as the default location to store the Web site images You might want to create subfolders for each type of file

31. Chapter 131Macromedia Dreamweaver 8 Revealed Setting the Home Page Usually index.html (.htm), or default.html (.htm) Starting point for a site map Tell Dreamweaver which page you have designated to be your home page Add folders to the Web site –Set the default images folder

32. Chapter 132Macromedia Dreamweaver 8 Revealed FIGURES 16 and 17 The Striped Umbrella site in Files panel with assets folder created Windows (left) and Macintosh (right)

33. Chapter 133Macromedia Dreamweaver 8 Revealed Default images folder Browse for file icon FIGURE 18 Site definition for The Striped Umbrella Web site with assets folder set as the default images folder

34. Chapter 134Macromedia Dreamweaver 8 Revealed Index.html Page title and path FIGURE 19 index.html placed in the striped_umbrella root folder

35. Chapter 135Macromedia Dreamweaver 8 Revealed The Site Map Graphical representation of pages Displays folder structure Page link type/status Checked out pages Map view in the Files panel Tree structure

36. Chapter 136Macromedia Dreamweaver 8 Revealed Verifying Page Titles Search engine keywords Title in browser window Bookmark in browser

37. Chapter 137Macromedia Dreamweaver 8 Revealed Uses of a Site Map In the Web site as an informational tool –PNG or JPEG Print for report or meeting –BMP or PICT

38. Chapter 138Macromedia Dreamweaver 8 Revealed Site Map Layout category Page titles option button Path for home page FIGURE 24 Options for the site map layout

39. Chapter 139Macromedia Dreamweaver 8 Revealed Site list arrow View list arrow Click to hide all panels FIGURE 25 Expanding the site map

40. Chapter 140Macromedia Dreamweaver 8 Revealed Chapter 1 Tasks Explore the Dreamweaver workspace View a Web page and use Help Plan and define a Web site Add a Folder and Pages, and set the home page Create and view a Site Map