1. Tutorial 1 Getting Started with Adobe Dreamweaver CS5

2. Objectives Session 1.1 – Explore the structure and history of the Internet and the Web – Become familiar with the role of Web servers and Web clients – Learn the basic components of a Web page – Review the history of Web design software – Open a Web page in a browser 2New Perspectives on Adobe Dreamweaver CS5

3. Objectives Session 1.2 – Start Dreamweaver and select a workspace layout – Create a local site definition – Explore the Dreamweaver tool set – Investigate the Dreamweaver Help features – Exit Dreamweaver New Perspectives on Adobe Dreamweaver CS53

4. Session 1.1 Visual Overview Illustration of the World Wide Web New Perspectives on Adobe Dreamweaver CS54

5. Dreamweaver and the Internet The Internet and the World Wide Web – Internet Global network of millions of small computer networks that are all connected – Network A series of connected computers that share information and resources – Server A computer that stores and distributes information to other computers in the network New Perspectives on Adobe Dreamweaver CS55

6. Dreamweaver and the Internet – Protocol A set of technical specifications that defines a format for sharing information – Simple Mail Transfer Protocol (SMTP) – File Transfer Protocol (FTP) – World Wide Web (WWW) Developed in 1989 by Timothy Berners-Lee and his team of scientists at CERN Designed to help scientists locate and share data more easily New Perspectives on Adobe Dreamweaver CS56

7. Dreamweaver and the Internet – The WWW is a subset of the Internet with its own: Protocol – HTTP (Hypertext Transfer Protocol) – Controls transfer of Web pages over the Internet Document structure – HTML (Hypertext Markup Language) – Provides instructions on how to format Web pages for display New Perspectives on Adobe Dreamweaver CS57

8. Dreamweaver and the Internet – Web Page An electronic document of information on the Web – Web Site A group of interconnected Web pages – Hyperlink Node that provides a user the ability to cross- reference information within a document and to move from one document or Web page to another New Perspectives on Adobe Dreamweaver CS58

9. Dreamweaver and the Internet New Perspectives on Adobe Dreamweaver CS59

10. Dreamweaver and the Internet Web Servers and Clients – Web Server Specialized computer that stores and distributes information to computers that are connected to the Internet – Web Client Computer used by an individual to access information via the Internet – Ex: A home computer with Internet access New Perspectives on Adobe Dreamweaver CS510

11. Dreamweaver and the Internet – Internet Service Provider (ISP) Company that has direct access to the Internet and sells access to smaller entities – Web Browser Software that interprets and displays Web pages New Perspectives on Adobe Dreamweaver CS511

12. Dreamweaver and the Internet Common Web Elements – Web Address – Hyperlinks – Content Encryption (HTTPS protocol) – Process of encoding and decoding data so that only the sender and/or receiver can read it – Important for information such as social security or credit card numbers New Perspectives on Adobe Dreamweaver CS512

13. Dreamweaver and the Internet Web Address – Uniform Resource Locator A unique address for every Web page Protocol – First part of URL – HTTP or HTTPS followed by :// New Perspectives on Adobe Dreamweaver CS513

14. Dreamweaver and the Internet Machine Name – Second part of URL – Series of characters that the server administrator assigns to the Web server – Often is www but can be any word, phrase, or acronym – Can be omitted entirely New Perspectives on Adobe Dreamweaver CS514

15. Dreamweaver and the Internet Domain Name – Third part of URL – Identifies a Web site – Chosen by the site owner – Combined with a top-level domain – The folder name, file name, and extension follow the domain name New Perspectives on Adobe Dreamweaver CS515.com.org.net.biz.edu.gov

16. Dreamweaver and the Internet New Perspectives on Adobe Dreamweaver CS516

17. Dreamweaver and the Internet Hyperlinks – Can be text, graphics, or buttons – Provide navigation to a related section of the same Web page, another Web page in the same Web site, or a completely new Web site Content – Information presented in a Web page – Contains text, graphics, and perhaps multimedia elements New Perspectives on Adobe Dreamweaver CS517

18. Session 1.2 Visual Overview Designer Workspace Configuration New Perspectives on Adobe Dreamweaver CS518

19. Evolving Web Design Tools Early Days – Web pages contained only text and were created by typing HTML code into text editor programs such as Notepad or Simple Text – The more graphically complex Web pages became, the more hand coding became impractical for many people WYSIWYG – People who were not programmers could not use HTML to design Web pages New Perspectives on Adobe Dreamweaver CS519

20. Evolving Web Design Tools – “What You See Is What You Get” software packages became popular – WYSIWYG software programs automatically write the HTML code – WYSIWYG acronym is not used much now Dreamweaver is one of the most widely used site development and management tools available today – Knowledge of HTML is not required – Familiarity with HTML can be helpful for troubleshooting purposes New Perspectives on Adobe Dreamweaver CS520

21. Starting Dreamweaver and Selecting a Workspace Configuration Dreamweaver contains eight preset workspace configurations – App Developer– Coder Plus – App Developer Plus– *Designer – Classic– Compact – Coder– Dual Screen *The Designer configuration will be used in class Dreamweaver opens in the same configuration it was in when it closed New Perspectives on Adobe Dreamweaver CS521

22. Starting Dreamweaver and Selecting a Workspace Configuration Basic Elements of Designer Workspace Configuration – Application bar Provides a set of menus that gives access to all tools and features available in Dreamweaver – Panel Groups Each panel contains related commands, controls, and information about working with Dreamweaver New Perspectives on Adobe Dreamweaver CS522

23. Setting Up a New Site Local Version – Original Web site stored on a local computer Remote Version – Copy of the Web site that Dreamweaver posts on a server Site Definition – Tells Dreamweaver where to find the local and remote files for the Web site New Perspectives on Adobe Dreamweaver CS523

24. Setting Up a New Site – Site definition main categories Local information Remote information Configuring a Local Site Definition – Information stored in a local computer that tells Dreamweaver where the local site files are located – Local site folder Location where all files used by the local version of the Web site are stored New Perspectives on Adobe Dreamweaver CS524

25. Setting Up a New Site – Site name An internal name given to the Web site for your reference Appears on the Site menu and in the Files panel Not used outside Dreamweaver – Default images folder Folder in which site’s graphic images are stored – Links relative to Sets the path of the hyperlinks New Perspectives on Adobe Dreamweaver CS525

26. Setting Up a New Site – HTTP address URL of the Web site – Case-sensitive links Option that makes all hyperlinks case sensitive – Cache Option that allows Dreamweaver to use a temporary local storage space (cache) to speed up the processing time needed to update links New Perspectives on Adobe Dreamweaver CS526

27. Setting Up a New Site New Perspectives on Adobe Dreamweaver CS527

28. Exploring the Dreamweaver Environment Files Panel – Located in the Files panel group – Used to manage local and remote site files and folders – Includes an integrated file browser Can browse files located outside the site Document Window – Main workspace used to create and edit Web pages New Perspectives on Adobe Dreamweaver CS528

29. Exploring the Dreamweaver Environment – Document toolbar located below page tabs Includes buttons for the most commonly used commands in the Document window – Views Design view – Displays page as it will appear in a browser – All HTML code is hidden Code view – Displays underlying HTML and CSS code New Perspectives on Adobe Dreamweaver CS529

30. Exploring the Dreamweaver Environment Split view – Divides Document window into two vertical panes – Left pane shows underlying code – Right pane shows how page will appear in the browser New Perspectives on Adobe Dreamweaver CS530

31. Exploring the Dreamweaver Environment New Perspectives on Adobe Dreamweaver CS531

32. Exploring the Dreamweaver Environment – Status Bar Displays details about the content in the Document window Options on Status bar include: Property Inspector – Toolbar with buttons – Used to examine or edit the attributes of any element that is currently selected on the active page New Perspectives on Adobe Dreamweaver CS532 Tag selectorSelect toolHand tool Zoom toolSet magnificationWindow size Document size& Download time

33. Exploring the Dreamweaver Environment – Page element An object or text New Perspectives on Adobe Dreamweaver CS533

34. Exploring the Dreamweaver Environment Insert Panel – Used to create and insert objects – An object is anything inserted into or created in a page New Perspectives on Adobe Dreamweaver CS534

35. Getting Help in Dreamweaver Dreamweaver Help Command – Starts browser and opens Adobe Community Help – Adobe Dreamweaver CS5 window – Dreamweaver help (Web) link opens Adobe Dreamweaver CS5 online help New Perspectives on Adobe Dreamweaver CS535

36. Getting Help in Dreamweaver New Perspectives on Adobe Dreamweaver CS536

37. Exiting Dreamweaver Procedure – Close the Web site – Exit Dreamweaver program Exit command on File menu exits Dreamweaver and closes all open windows New Perspectives on Adobe Dreamweaver CS537