Tutorial 1: Getting Started with Adobe Dreamweaver CS4

2 Objectives 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

Tutorial 1: Getting Started with Adobe Dreamweaver CS43 Dreamweaver and the Internet (1.1) What is Dreamweaver?

Tutorial 1: Getting Started with Adobe Dreamweaver CS44 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 CS45 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 CS46 The Internet and the World Wide Web (cont’d.) Web page –_______________________________ Web site –____________________________________ __________________ –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 CS47 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 CS48 Common Web Page Elements ________________

Tutorial 1: Getting Started with Adobe Dreamweaver CS49 Web Address Called a ________________________________ Used to open Web pages ________________

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

Tutorial 1: Getting Started with Adobe Dreamweaver CS411 Content Information presented in a Web page __________________________________________ __________________________________________ __________________________________________ Note: __________________________________________ __________________________________________ __________________________________________

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

Tutorial 1: Getting Started with Adobe Dreamweaver CS413 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 CS414 The Designer Workspace Configuration Dreamweaver in the Designer workspace configuration

Tutorial 1: Getting Started with Adobe Dreamweaver CS415 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 CS416 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 CS417 Creating a Local Site Definition Site Definition dialog box

Tutorial 1: Getting Started with Adobe Dreamweaver CS418 Creating a Local Site Definition Advanced tab

Tutorial 1: Getting Started with Adobe Dreamweaver CS419 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 CS420 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 CS421 Files Panel Files panel with the files list

Tutorial 1: Getting Started with Adobe Dreamweaver CS422 Using the Files Panel Web pages open in Dreamweaver

Tutorial 1: Getting Started with Adobe Dreamweaver CS423 Document Window __________________________________________ _______________ ______________________________________ _______________

Tutorial 1: Getting Started with Adobe Dreamweaver CS424 Document Window: Split View Home page in Split View

Tutorial 1: Getting Started with Adobe Dreamweaver CS425 Document Window: Design View Home page in Design View

Tutorial 1: Getting Started with Adobe Dreamweaver CS426 Document Window: Code View Home page in Code View

Tutorial 1: Getting Started with Adobe Dreamweaver CS427 Document Window: Status Bar _______________

Tutorial 1: Getting Started with Adobe Dreamweaver CS428 Document Window: Status Bar Items Status bar items

Tutorial 1: Getting Started with Adobe Dreamweaver CS429 Property Inspector __________________________________________

Tutorial 1: Getting Started with Adobe Dreamweaver CS430 Property Inspector Property Inspector with HTML text attributes

Tutorial 1: Getting Started with Adobe Dreamweaver CS431 Property Inspector Property Inspector with HTML text link attributes

Tutorial 1: Getting Started with Adobe Dreamweaver CS432 Property Inspector Property Inspector with CSS attributes

Tutorial 1: Getting Started with Adobe Dreamweaver CS433 Insert Panel Insert panel categories

Tutorial 1: Getting Started with Adobe Dreamweaver CS434 Insert Panel Common category in the Insert panel

Tutorial 1: Getting Started with Adobe Dreamweaver CS435 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 CS436 Getting Help in Dreamweaver Adobe Dreamweaver CS4 online help

Tutorial 1: Getting Started with Adobe Dreamweaver CS437 Getting Help in Dreamweaver Context-sensitive help

Tutorial 1: Getting Started with Adobe Dreamweaver CS438 Getting Help in Dreamweaver Dreamweaver Help search

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