Macromedia Dreamweaver MX 2004 – Design Professional Dreamweaver GETTING STARTED WITH

Web Collection: Dreamweaver MX 2004 Chapter A 2Getting Started with Dreamweaver MX 2004 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 Chapter Lessons

Web Collection: Dreamweaver MX 2004 Chapter A 3Getting Started with Dreamweaver MX 2004 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 Getting Started with Dreamweaver

Web Collection: Dreamweaver MX 2004 Chapter A 4Getting Started with Dreamweaver MX 2004 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 Using Dreamweaver Tools

Web Collection: Dreamweaver MX 2004 Chapter A 5Getting Started with Dreamweaver MX 2004 Understanding Platform Interfaces Use Dreamweaver in two interfaces: –Windows and Macintosh Differences are slight; for example: –Use [Ctrl] and [Alt] keys in Windows –Use [command] and [option] keys in Macintosh

Web Collection: Dreamweaver MX 2004 Chapter A 6Getting Started with Dreamweaver MX 2004 Explore the Dreamweaver workspace Title bar Menu bar Insert bar Document toolbar Standard toolbar Document window Status bar Tag selector Property inspector

Web Collection: Dreamweaver MX 2004 Chapter A 7Getting Started with Dreamweaver MX 2004 Working with Dreamweaver Views Design view Code view Code and Design view

Web Collection: Dreamweaver MX 2004 Chapter A 8Getting Started with Dreamweaver MX 2004 Start Dreamweaver (Windows) Click the Start button on the taskbar Point to Programs, then click Macromedia Dreamweaver MX 2004 Start Menu

Web Collection: Dreamweaver MX 2004 Chapter A 9Getting Started with Dreamweaver MX 2004 Start Dreamweaver (Macintosh) Double-click the hard drive icon, then double- click the Macromedia Dreamweaver MX folder Double-click the Macromedia Dreamweaver MX program icon Hard Drive Icon

Web Collection: Dreamweaver MX 2004 Chapter A 10Getting Started with Dreamweaver MX 2004 Change view… Show Code View Show Code and Design View Show Design View

Web Collection: Dreamweaver MX 2004 Chapter A 11Getting Started with Dreamweaver MX 2004 Change views… Click the Show Code View button Click the Show Code and Design Views button Click the Show Design View button

Web Collection: Dreamweaver MX 2004 Chapter A 12Getting Started with Dreamweaver MX 2004 …and view panels Expand the Code panel Click each panel tab Collapse the Code panel Repeat for Design, Application, Files and Answers panels

Web Collection: Dreamweaver MX 2004 Chapter A 13Getting Started with Dreamweaver MX 2004 Opening a Web page Web site Web page Home page

Web Collection: Dreamweaver MX 2004 Chapter A 14Getting Started with Dreamweaver MX 2004 Basic Web page elements Text Hyperlinks Graphics Navigation bars Flash objects Tables Forms

Web Collection: Dreamweaver MX 2004 Chapter A 15Getting Started with Dreamweaver MX 2004 Common Web elements Page Title Graphics Navigation structure Including several sets of text links Text Form

Web Collection: Dreamweaver MX 2004 Chapter A 16Getting Started with Dreamweaver MX 2004 Common Web elements File Currently open Show View Buttons Table used for page layout Flash buttons Banner Layer Text Link

Web Collection: Dreamweaver MX 2004 Chapter A 17Getting Started with Dreamweaver MX 2004 Getting Help Contents Index Search Favorites Search help for topics

Web Collection: Dreamweaver MX 2004 Chapter A 18Getting Started with Dreamweaver MX 2004 Web Site Creation Process

Web Collection: Dreamweaver MX 2004 Chapter A 19Getting Started with Dreamweaver MX 2004 Planning a Web Site Audience needs? Site goals Gathering content Budget Schedule Team Updates

Web Collection: Dreamweaver MX 2004 Chapter A 20Getting Started with Dreamweaver MX 2004 Storyboard

Web Collection: Dreamweaver MX 2004 Chapter A 21Getting Started with Dreamweaver MX 2004 Testing Web Pages Browsers and Browser versions Platforms Screen sizes Speed on different connections Links Client review

Web Collection: Dreamweaver MX 2004 Chapter A 22Getting Started with Dreamweaver MX 2004 Publishing the Site Means that you transfer all the files to a web server A web server is a computer that is connect to the Internet with an IP address A web site must be published to the web server before it can be viewed by others

Web Collection: Dreamweaver MX 2004 Chapter A 23Getting Started with Dreamweaver MX 2004 Publish a Web Site IP: Internet Protocol –IP address –Example: ISP: Internet Service Provider –Hosts web site –Evaluate FTP: File Transfer Protocol –User, password, path

Web Collection: Dreamweaver MX 2004 Chapter A 24Getting Started with Dreamweaver MX 2004 Create a root folder Windows Your drive may differ Click the drive to select it Trip Smart Root folder

Web Collection: Dreamweaver MX 2004 Chapter A 25Getting Started with Dreamweaver MX 2004 Create a root folder Macintosh Trip Smart Root folder

Web Collection: Dreamweaver MX 2004 Chapter A 26Getting Started with Dreamweaver MX 2004 Define a Web site Default Image folder Root folder Categories

Web Collection: Dreamweaver MX 2004 Chapter A 27Getting Started with Dreamweaver MX 2004 Set up Web server access Access List Arrow Remote Info

Web Collection: Dreamweaver MX 2004 Chapter A 28Getting Started with Dreamweaver MX 2004 Assets folder Add the folder in the Site panel Designate as the “default image folder” in the Site Definition dialog box Stores all non-HTML (media) files: –Image files –Sound files –Video files

Web Collection: Dreamweaver MX 2004 Chapter A 29Getting Started with Dreamweaver MX 2004 Home page index.htm or index.html (usually) Designate home page in Site Definition dialog box Starting point for a site map

Web Collection: Dreamweaver MX 2004 Chapter A 30Getting Started with Dreamweaver MX 2004 Site Map Graphical representation of pages Displays folder structure Page link type/status Checked out pages Site Map command or Map View command

Web Collection: Dreamweaver MX 2004 Chapter A 31Getting Started with Dreamweaver MX 2004 Page Title Search engine keywords Title in browser window Bookmark in browser

Web Collection: Dreamweaver MX 2004 Chapter A 32Getting Started with Dreamweaver MX 2004 Uses of a Site Map In the Web site for as an informational tool (PNG or JPEG) Print for report or meeting (BMP or PICT)

Web Collection: Dreamweaver MX 2004 Chapter A 33Getting Started with Dreamweaver MX 2004 Site Map options Site Definition dialog box –Home page –Layout –Icon labels Site Map Layout Option Button Page Title Option button Home page path

Web Collection: Dreamweaver MX 2004 Chapter A 34Getting Started with Dreamweaver MX 2004 Chapter A 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