Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Tutorial 1 Getting Started with Adobe Dreamweaver CS5 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 New Perspectives on Adobe Dreamweaver CS5 2 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 CS5 3 Session 1.1 Visual Overview Illustration of the World Wide Web New Perspectives on Adobe Dreamweaver CS5 4 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 CS5 5 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 CS5 6 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 CS5 7 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 crossreference information within a document and to move from one document or Web page to another New Perspectives on Adobe Dreamweaver CS5 8 Dreamweaver and the Internet New Perspectives on Adobe Dreamweaver CS5 9 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 CS5 10 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 CS5 11 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 CS5 12 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 CS5 13 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 CS5 14 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 .com .biz .org .net .edu .gov – The folder name, file name, and extension follow the domain name New Perspectives on Adobe Dreamweaver CS5 15 Dreamweaver and the Internet New Perspectives on Adobe Dreamweaver CS5 16 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 CS5 17 Session 1.2 Visual Overview Designer Workspace Configuration New Perspectives on Adobe Dreamweaver CS5 18 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 CS5 19 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 CS5 20 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 CS5 21 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 CS5 22 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 CS5 23 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 CS5 24 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 CS5 25 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 CS5 26 Setting Up a New Site New Perspectives on Adobe Dreamweaver CS5 27 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 CS5 28 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 CS5 29 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 CS5 30 Exploring the Dreamweaver Environment New Perspectives on Adobe Dreamweaver CS5 31 Exploring the Dreamweaver Environment – Status Bar • Displays details about the content in the Document window • Options on Status bar include: Tag selector Select tool Hand tool Zoom tool Set magnification Window size Document size& Download time • 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 CS5 32 Exploring the Dreamweaver Environment – Page element • An object or text New Perspectives on Adobe Dreamweaver CS5 33 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 CS5 34 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 CS5 35 Getting Help in Dreamweaver New Perspectives on Adobe Dreamweaver CS5 36 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 CS5 37