1 / 40

Chapter Lessons

OVERVIEW. Chapter Lessons. 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. INTRODUCTION. Getting Started with Dreamweaver. What is Dreamweaver?

kirby-frazier
Télécharger la présentation

Chapter Lessons

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. OVERVIEW Chapter Lessons • 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

  2. INTRODUCTION Getting Started with Dreamweaver • 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

  3. INTRODUCTION Using Dreamweaver Tools • 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

  4. LESSON 1 FIGURE 1 Dreamweaver 8 workspace Select tool Hand tool Title bar Menu bar Insert bar Zoom tool Document window Status bar Property inspector

  5. LESSON 1 Working with Dreamweaver Views • Design view • Code view • Code and Design view

  6. LESSON 1 Starting Dreamweaver (Windows) • Click the Start button on the taskbar • Click (All) Programs Macromedia  Macromedia Dreamweaver 8

  7. LESSON 1 Dreamweaver 8 FIGURE 3 Starting Dreamweaver 8 (Windows)

  8. LESSON 1 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)

  9. LESSON 1 Changing Views • Click the Show Code View button • Click the Show Code and Design Views button • Click the Show Design View button

  10. LESSON 1 FIGURE 5 Code view for new document Show Code and Design View button Show Code View button Show Design View button Coding toolbar

  11. LESSON 1 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

  12. LESSON 2 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

  13. LESSON 2 Basic Web Page Elements • Text • Hyperlinks (links) • Graphics • Banners • Navigation bars • Image map • Flash button objects

  14. LESSON 2 FIGURE 7 Common Web page elements Navigation bar Graphic Form

  15. LESSON 2 FIGURE 8 Striped UmbrellaWeb page elements Graphic Text Banner Table Flash button object Text links

  16. LESSON 2 Getting Help • Contents • Index • Search • Favorites Keywords … … in results Topics found FIGURE 9 Dreamweaver 8 Help window

  17. LESSON 3 Web Site Creation Process FIGURE 10 Phases of a Web site development project

  18. LESSON 3 Planning a Web Site • Audience needs • Site goals • Gathering content • Budget • Schedule • Team • Updates

  19. LESSON 3 Creating Storyboards FIGURE 11 The Striped Umbrella Web site storyboard

  20. LESSON 3 Testing the Pages • Browsers and browser versions • Screen sizes • Speed on different connections • Testing is a continuous process

  21. LESSON 3 Modifying the Pages • Changes are constantly needed • Test page after each change • Modifying and testing is an ongoing process

  22. LESSON 3 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

  23. LESSON 3 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

  24. LESSON 3 Publishing the Site • Create a root folder • Define the Web site • Set up Web server access

  25. LESSON 3 Root folder FIGURE 12 Creating a root folder using Windows Explorer

  26. LESSON 3 FIGURE 13 Creating a root folder using a Macintosh

  27. LESSON 3 Web site name Links relative to options Local root folder Enable cache Refresh local file list automatically FIGURE 14 Site definition for The Striped Umbrella dialog box

  28. LESSON 3 Remote info category Access list arrow FIGURE 15 Setting the remote access for The Striped Umbrella Web site

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

  30. LESSON 4 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

  31. LESSON 4 FIGURES 16 and 17 The Striped Umbrella site in Files panel with assets folder created Windows (left) and Macintosh (right)

  32. LESSON 4 Browse for file icon Default images folder FIGURE 18 Site definition for The Striped Umbrella Web site with assets folder set as the default images folder

  33. LESSON 4 Page title and path Index.html FIGURE 19 index.html placed in the striped_umbrella root folder

  34. LESSON 5 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

  35. LESSON 5 Verifying Page Titles • Search engine keywords • Title in browser window • Bookmark in browser

  36. LESSON 5 Uses of a Site Map • In the Web site as an informational tool • PNG or JPEG • Print for report or meeting • BMP or PICT

  37. LESSON 5 Site Map Layout category Path for home page Page titles option button FIGURE 24 Options for the site map layout

  38. LESSON 5 Site list arrow View list arrow Click to hide all panels FIGURE 25 Expanding the site map

  39. SUMMARY 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

More Related