1 / 39

Tutorial 1: Getting Started with Adobe Dreamweaver CS4

Tutorial 1: Getting Started with Adobe Dreamweaver CS4. Session 1.1 Explore the structure and history of the Internet and the Web Become familiar with the roles of Web servers and Web clients Learn the basic components of a Web page Open a Web page in a browser. Session 1.2

ursula
Télécharger la présentation

Tutorial 1: Getting Started with Adobe Dreamweaver CS4

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. Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  2. Session 1.1 Explore the structure and history of the Internet and the Web Become familiar with the roles of Web servers and Web clients Learn the basic components of a Web page Open a Web page in a browser Session 1.2 Review the history of Web design software Start Dreamweaver and select a workspace layout Create a local site definition Explore the Dreamweaver tool set Investigate the Dreamweaver Help features Exit Dreamweaver Objectives Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  3. Dreamweaver and the Internet (1.1) • What is Dreamweaver? Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  4. The Internet and the World Wide Web • ______________ • Global network of smaller computer networks that are all connected • ______________ • Series of computers that are connected to share information and resources • ______________ • Computer that stores and distributes information to other computers in the network Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  5. The Internet and the World Wide Web (cont’d.) • _____________ • Set of technical specifications that defines a format for sharing information • _______________________________ • ___________________________ • _________________________________ • Subset of the Internet that has its own protocol (HTTP) and its own document structure (HTML) Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  6. The Internet and the World Wide Web (cont’d.) • Webpage • _______________________________ • Website • ____________________________________ • __________________ • Node that provides a user the ability to cross-reference information within a document or a Web page and to move from one document or Web page to another Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  7. Web Servers and Clients • __________________ • Specialized server that stores/distributes information to computers that are connected to the Internet • __________________ • Computer an individual uses to access information (via the Internet) that is stored on Web servers throughout the world • _______________________________ • Company that has direct access to the Internet and sells that access • ________________ • Software that interprets and displays Web pages Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  8. Common Web Page Elements • ________________ • ________________ • ________________ Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  9. Web Address • Called a ________________________________ • Used to open Web pages • ________________ Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  10. Hyperlinks • Can be _______________________________that when clicked, take you to: • ____________________________________ • ____________________________________ • ____________________________________ • Give the Web its nonlinear nature Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  11. Content • Information presented in a Web page • ______________________________________________________________________________________________________________________________ • Note:______________________________________________________________________________________________________________________________ Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  12. Evolving Web Design Tools (1.2) • Early days of Web design • As the Web evolved • Dreamweaver Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  13. Starting Dreamweaver and Selecting a Workspace Configuration • Choose one of eight preset workspace ______________________________________________________________________________________________________________________________ • Each configuration optimizes the panels display to help focus on working in a different way • Dreamweaver opens in the same workspace configuration it was in when it was closed Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  14. The Designer Workspace Configuration • Dreamweaver in the Designer workspace configuration Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  15. Creating a Site Definition • Two main categories in a site definition • ________________: original site stored on your computer • ________________: the copy that Dreamweaver posts • Dreamweaver stores the local Web site in same format as it will be posted on the Web • Before working on a Web site, create the local site definition ______________________________________________________________________________________________________________________________ Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  16. Configuring a Local Site Definition • Create local site definition in Site Definition dialog box or enter the information manually on the Advanced tab • Parts of a local site definition: Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  17. Creating a Local Site Definition • Site Definition dialog box Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  18. Creating a Local Site Definition • Advanced tab Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  19. Exploring the Dreamweaver Environment • _____________ • Manages local and remote site files and folders • ________________ • Main workspace for creating and editing Web pages • ________________ • Toolbar with buttons for examining/editing attributes of any element currently selected on active page in Document window • _____________ • Used to create and insert objects (e.g., tables, images, links) Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  20. Files Panel • _____________________________________________________________________________ • Transfer files to a remote site when you are ready to post the site to the Web • Includes an integrated file browser that enables you to browse files located outside of the site • ______________________ Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  21. Files Panel • Files panel with the files list Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  22. Using the Files Panel • Web pages open in Dreamweaver Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  23. Document Window • _________________________________________________________ • ______________________________________ • _______________ Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  24. Document Window: Split View • Home page in Split View Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  25. Document Window: Design View • Home page in Design View Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  26. Document Window: Code View • Home page in Code View Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  27. Document Window: Status Bar • _______________ • _______________ • _______________ • _______________ • _______________ • _______________ • _______________ Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  28. Document Window: Status Bar Items • Status bar items Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  29. Property Inspector • ____________________________________________________________________________________ • ____________________________________________________________________________________ Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  30. Property Inspector • Property Inspector with HTML text attributes Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  31. Property Inspector • Property Inspector with HTML text link attributes Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  32. Property Inspector • Property Inspector with CSS attributes Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  33. Insert Panel • Insert panel categories Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  34. Insert Panel • Common category in the Insert panel Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  35. Getting Help in Dreamweaver • Dreamweaver Help command starts your Web browser and opens the Adobe Dreamweaver Support Center – Help and Support window • Dreamweaver help (web) link near upper-right corner of the page opens Adobe Dreamweaver CS4 online help • Two ways to access information about Dreamweaver • _____________________________ • _____________________________________ • __________ • __________________________________________________________________________ Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  36. Getting Help in Dreamweaver • Adobe Dreamweaver CS4 online help Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  37. Getting Help in Dreamweaver • Context-sensitive help Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  38. Getting Help in Dreamweaver • Dreamweaver Help search Tutorial 1: Getting Started with Adobe Dreamweaver CS4

  39. Exiting Dreamweaver • Close the home page • On the index.html page tab, click the Close button • Exit Dreamweaver • On the Application bar, click File, and then click Exit • Dreamweaver prompts you to save unsaved Web pages Tutorial 1: Getting Started with Adobe Dreamweaver CS4

More Related