Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. <ul><li>Explore the Dreamweaver Workspace </li></ul><ul><li>View a Web page and use Help </li></ul><ul><li>Plan and Define a Web site </li></ul><ul><li>Add a Folder and Pages, and set the Home page </li></ul><ul><li>Create and View a Site Map </li></ul>Unit Lessons OVERVIEW
  2. 2. <ul><li>What is Dreamweaver? </li></ul><ul><ul><li>Web design software for creating a Web page or a complex Web site </li></ul></ul><ul><li>What is a Web site? </li></ul><ul><ul><li>A group of related Web pages that are linked together and share a common interface and design </li></ul></ul>Getting Started with Dreamweaver INTRODUCTION
  3. 3. <ul><li>What does Dreamweaver offer? </li></ul><ul><ul><li>Design tools that don’t require coding </li></ul></ul><ul><ul><li>Organizational tools </li></ul></ul><ul><ul><li>Site management tools </li></ul></ul><ul><ul><li>Graphic site maps </li></ul></ul>Using Dreamweaver Tools INTRODUCTION
  4. 4. Understanding Platform Interfaces <ul><li>Use Photoshop in two interfaces: </li></ul><ul><ul><li>Windows and Macintosh </li></ul></ul><ul><li>Differences are slight; for example: </li></ul><ul><ul><li>Use [ Ctrl ] and [ Alt ] keys in Windows </li></ul></ul><ul><ul><li>Use [ command ] and [ option ] keys in Macintosh </li></ul></ul>INTRODUCTION
  5. 5. Explore the Dreamweaver workspace LESSON 1 Title bar Menu bar Insert bar Document toolbar Standard toolbar Document window Status bar Tag selector Property inspector
  6. 6. Working with Dreamweaver Views <ul><li>Design view </li></ul><ul><li>Code view </li></ul><ul><li>Code and Design view </li></ul>LESSON 1
  7. 7. Start Dreamweaver (Windows) <ul><li>Click the Start button on the taskbar </li></ul><ul><li>Point to Programs , then click Macromedia Dreamweaver MX </li></ul>LESSON 1 Start Button
  8. 8. Start Dreamweaver (Macintosh) <ul><li>Double-click the hard drive icon, then double-click the Macromedia Dreamweaver MX folder </li></ul><ul><li>Double-click the Macromedia </li></ul><ul><li>Dreamweaver MX program icon </li></ul>LESSON 1 Program icon
  9. 9. Change views…. <ul><li>Click the Show Code View button </li></ul><ul><li>Click the Show Code and Design Views button </li></ul><ul><li>Click the Show Design View button </li></ul>LESSON 1
  10. 10. …and view panels <ul><li>Expand the Code panel </li></ul><ul><li>Click each panel tab </li></ul><ul><li>Collapse the Code panel </li></ul><ul><li>Repeat for Design, Application, Files and Answers panels </li></ul>LESSON 1
  11. 11. Opening a Web page <ul><li>Web site </li></ul><ul><li>Web page </li></ul><ul><li>Home page </li></ul>LESSON 2
  12. 12. Basic Web page elements <ul><li>Text </li></ul><ul><li>Hyperlinks </li></ul><ul><li>Graphics </li></ul><ul><li>Navigation bars </li></ul><ul><li>Flash objects </li></ul><ul><li>Tables </li></ul><ul><li>Forms </li></ul>LESSON 2
  13. 13. Find the Web element Page Title Graphics Navigation bar
  14. 14. Getting Help <ul><li>Contents </li></ul><ul><li>Index </li></ul><ul><li>Search </li></ul><ul><li>Favorites </li></ul>LESSON 2
  15. 15. Web Site Creation Process
  16. 16. Planning a Web Site <ul><li>Audience needs? </li></ul><ul><li>Site goals </li></ul><ul><li>Gathering content </li></ul><ul><li>Budget </li></ul><ul><li>Schedule </li></ul><ul><li>Team </li></ul><ul><li>Updates </li></ul>LESSON 3
  17. 17. Storyboard LESSON 3
  18. 18. Testing Web Pages LESSON 3 <ul><li>Browsers and Browser versions </li></ul><ul><li>Platforms </li></ul><ul><li>Screen sizes </li></ul><ul><li>Speed on different connections </li></ul><ul><li>Links </li></ul><ul><li>Client review </li></ul>
  19. 19. Publish a Web Site <ul><li>IP: Internet Protocol </li></ul><ul><ul><li>IP address </li></ul></ul><ul><ul><li>Example: 207.456.123.2 </li></ul></ul><ul><li>ISP: Internet Service Provider </li></ul><ul><ul><li>Hosts web site </li></ul></ul><ul><ul><li>Evaluate </li></ul></ul><ul><li>FTP: File Transfer Protocol </li></ul><ul><ul><li>User, password, path </li></ul></ul>LESSON 3
  20. 20. Create a root folder LESSON 3
  21. 21. Define a Web site LESSON 3 Root folder Default Image folder Categories
  22. 22. Set up Web server access LESSON 3 FTP Server address Path Login Password Remote Info
  23. 23. Assets folder <ul><li>Add the folder in the Site panel </li></ul><ul><li>Designate as the “default image folder” in the Site Definition dialog box </li></ul><ul><li>Stores all non-HTML (media) files: </li></ul><ul><ul><li>Image files </li></ul></ul><ul><ul><li>Sound files </li></ul></ul><ul><ul><li>Video files… </li></ul></ul>LESSON 4
  24. 24. Home page <ul><li>Index.htm or Index.html (usually) </li></ul><ul><li>Designate home page in Site Definition dialog box </li></ul><ul><li>Starting point for a site map </li></ul>LESSON 4
  25. 25. Property inspector <ul><li>Display/edit properties of selected object </li></ul><ul><li>Source: Path/filename of selected object </li></ul><ul><li>Selection handles </li></ul>LESSON 4
  26. 26. Site Map LESSON 5 <ul><li>Graphical representation of pages </li></ul><ul><li>Page link type/status </li></ul><ul><li>Checked out pages </li></ul><ul><li>Site Map command or Map View command </li></ul>
  27. 27. Page Title <ul><li>Search engine keywords </li></ul><ul><li>Title in browser window </li></ul><ul><li>Bookmark in browser </li></ul>LESSON 5
  28. 28. Site Map uses <ul><li>In a Web site for information (PNG or JPEG) </li></ul><ul><li>Print for report or meeting (BMP or PICT) </li></ul>LESSON 5
  29. 29. Site Map options LESSON 5 <ul><li>Site Definition dialog box </li></ul><ul><ul><li>Home page </li></ul></ul><ul><ul><li>Layout </li></ul></ul><ul><ul><li>Icon labels </li></ul></ul><ul><li>Expand/Collapse </li></ul>
  30. 30. Unit Tasks <ul><li>Examine the workspace </li></ul><ul><li>View a Web page </li></ul><ul><li>Use Help </li></ul><ul><li>Plan and Define a Web site </li></ul><ul><li>Add Folders and Pages to a site </li></ul><ul><li>Define a Home page </li></ul><ul><li>Create and View a Site Map </li></ul>SUMMARY