Adobe Dreamweaver CS4 - Illustrated Getting Started with Adobe Dreamweaver CS4

Unit Objectives Define Web design softwareDefine Web design software Start Adobe Dreamweaver CS4Start Adobe Dreamweaver CS4 View the Dreamweaver workspaceView the Dreamweaver workspace Work with views and panelsWork with views and panels Open a Web pageOpen a Web page View Web page elementsView Web page elements Adobe Dreamweaver CS4 - Illustrated

Unit Objectives Get helpGet help View a Web page in a browser windowView a Web page in a browser window Close a Web page and exit DreamweaverClose a Web page and exit Dreamweaver Adobe Dreamweaver CS4 - Illustrated

Defining Web design software Using Dreamweaver you can:Using Dreamweaver you can: Create Web pages or Web sitesCreate Web pages or Web sites Add text, images, tables, and media filesAdd text, images, tables, and media files Display Web pages as they will appear to usersDisplay Web pages as they will appear to users Use the Property inspector to view and edit page elementsUse the Property inspector to view and edit page elements Use Roundtrip HTMLUse Roundtrip HTML Manage Web sitesManage Web sites Adobe Dreamweaver CS4 - Illustrated

Defining Web Design Software Adobe Dreamweaver CS4 - Illustrated

Defining Web Design Software Adobe Dreamweaver CS4 - Illustrated

Starting Adobe Dreamweaver CS4 WindowsWindows Click the Start button on the taskbarClick the Start button on the taskbar Point to All Programs, click Adobe Web Premium CS4 or Adobe Design Premium CS4, then click Adobe Dreamweaver CS4Point to All Programs, click Adobe Web Premium CS4 or Adobe Design Premium CS4, then click Adobe Dreamweaver CS4 Click HTML in the Create New column on the Dreamweaver welcome ScreenClick HTML in the Create New column on the Dreamweaver welcome Screen Adobe Dreamweaver CS4 - Illustrated

Starting Adobe Dreamweaver CS4 Adobe Dreamweaver CS4 - Illustrated

Starting Adobe Dreamweaver CS4 MacMac Click Finder in the dock, then click ApplicationsClick Finder in the dock, then click Applications Click the Adobe Dreamweaver CS3 folder, then double-click the Dreamweaver CS4 applicationClick the Adobe Dreamweaver CS3 folder, then double-click the Dreamweaver CS4 application Click HTML in the Create New category on the Dreamweaver welcome ScreenClick HTML in the Create New category on the Dreamweaver welcome Screen Adobe Dreamweaver CS4 - Illustrated

Starting Adobe Dreamweaver CS4 Adobe Dreamweaver CS4 - Illustrated

Viewing the Dreamweaver Workspace Adobe Dreamweaver CS4 - Illustrated

Viewing the Dreamweaver Workspace Adobe Dreamweaver CS4 - Illustrated

Working with Views and Panels Click the Show Code view button on the Document toolbarClick the Show Code view button on the Document toolbar Click the Show Code and Design views button on the Document toolbarClick the Show Code and Design views button on the Document toolbar Click the Show Design view button on the Document toolbarClick the Show Design view button on the Document toolbar Double-click the CSS Styles panel tabDouble-click the CSS Styles panel tab Adobe Dreamweaver CS4 - Illustrated

Working with Views and Panels Click each panel tab on the CSS Styles panel group display the contents of each panelClick each panel tab on the CSS Styles panel group display the contents of each panel Click the CSS Styles panel tabClick the CSS Styles panel tab Double-click the panel tabs to view the panels in each of the other panel groupsDouble-click the panel tabs to view the panels in each of the other panel groups Collapse all panel groups except the Files panel groupCollapse all panel groups except the Files panel group Adobe Dreamweaver CS4 - Illustrated

Working with Views and Panels Click File on the Application bar (Win) or Menu bar (Mac), then click Close to close the untitled documentClick File on the Application bar (Win) or Menu bar (Mac), then click Close to close the untitled document If you are asked if you want to save the untitled page, click NoIf you are asked if you want to save the untitled page, click No Adobe Dreamweaver CS4 - Illustrated

Working with Views and Panels Adobe Dreamweaver CS4 - Illustrated

Clues to Use Panel groupsPanel groups Three panel groups open when you first start Dreamweaver in WindowsThree panel groups open when you first start Dreamweaver in Windows Insert, CSS Styles, and FilesInsert, CSS Styles, and Files Retain arrangement from one session to the nextRetain arrangement from one session to the next The panel group title bar is the title bar at the top of each panel groupThe panel group title bar is the title bar at the top of each panel group Adobe Dreamweaver CS4 - Illustrated

Opening a Web Page Click File on the Application bar (Win) or Menu bar (Mac), then click OpenClick File on the Application bar (Win) or Menu bar (Mac), then click Open Click the Look in list arrow (Win) or click the Current file location list arrow (Mac), navigate to the drive and folder where your Data Files are stored, then double-click the unit_a folder (Win) or click the unit_a folder (Mac)Click the Look in list arrow (Win) or click the Current file location list arrow (Mac), navigate to the drive and folder where your Data Files are stored, then double-click the unit_a folder (Win) or click the unit_a folder (Mac) Click dwa_1.html, then click OpenClick dwa_1.html, then click Open Adobe Dreamweaver CS4 - Illustrated

Opening a Web Page If your Document window is not maximized, click the Maximize button on the Document window title barIf your Document window is not maximized, click the Maximize button on the Document window title bar Click the Show Code view buttonClick the Show Code view button Scroll through the code, click the Show Design view button to return to Design view, then scroll to display the top of the page if necessaryScroll through the code, click the Show Design view button to return to Design view, then scroll to display the top of the page if necessary Adobe Dreamweaver CS4 - Illustrated

Opening a Web Page Adobe Dreamweaver CS4 - Illustrated

Clues to Use Docking panel groupsDocking panel groups You can move panel groups by dragging the panel group title barYou can move panel groups by dragging the panel group title bar Dock a panel group by dragging it back to the right side of the screenDock a panel group by dragging it back to the right side of the screen A heavy bar indicates the position it will take when you release the mouseA heavy bar indicates the position it will take when you release the mouse Adobe Dreamweaver CS4 - Illustrated

Viewing Web Page Elements Adobe Dreamweaver CS4 - Illustrated TextText ImagesImages HyperlinksHyperlinks TablesTables Div tags and AP ElementsDiv tags and AP Elements Flash MoviesFlash Movies Flash VideoFlash Video

Viewing Web Page Elements Adobe Dreamweaver CS4 - Illustrated

Getting Help Click Help on the Application bar (Win) or Menu bar (Mac)Click Help on the Application bar (Win) or Menu bar (Mac) Click Dreamweaver HelpClick Dreamweaver Help Click the Dreamweaver help (web) link in the top right corner of the Dreamweaver Help and Support windowClick the Dreamweaver help (web) link in the top right corner of the Dreamweaver Help and Support window Click the plus sign next to Workspace in the left column, click the plus sign next to Working in the Document window, then click Switch between views in the Document windowClick the plus sign next to Workspace in the left column, click the plus sign next to Working in the Document window, then click Switch between views in the Document window Adobe Dreamweaver CS4 - Illustrated

Getting Help Read the text in the content side of the Help window, then close the Help windowRead the text in the content side of the Help window, then close the Help window Type CSS Property inspector in the search text box in the Dreamweaver Help and Support window, then press [Enter] (Win) or [Return] (Mac)Type CSS Property inspector in the search text box in the Dreamweaver Help and Support window, then press [Enter] (Win) or [Return] (Mac) Click one of the links to read information about one of the topics of your choiceClick one of the links to read information about one of the topics of your choice Close the Dreamweaver Help and Support windowClose the Dreamweaver Help and Support window Adobe Dreamweaver CS4 - Illustrated

Getting Help Adobe Dreamweaver CS4 - Illustrated

Getting Help Adobe Dreamweaver CS4 - Illustrated

Viewing a Web Page in a Browser Window Click the Restore Down button (Win), click the Window Size shortcut menu, then click 760 × 420 (800 × 600, Maximized)Click the Restore Down button (Win), click the Window Size shortcut menu, then click 760 × 420 (800 × 600, Maximized) Click the Preview/Debug in Browser button on the Document toolbar, then click Preview in [your browser name]Click the Preview/Debug in Browser button on the Document toolbar, then click Preview in [your browser name] Click File on the browser’s menu bar, click Print, then click PrintClick File on the browser’s menu bar, click Print, then click Print Adobe Dreamweaver CS4 - Illustrated

Viewing a Web Page in a Browser Window Adobe Dreamweaver CS4 - Illustrated

Viewing a Web Page in a Browser Window Adobe Dreamweaver CS4 - Illustrated

Closing a Web Page and Exiting Dreamweaver Click File on the menu bar, then click Exit(Win), or click Safari on the Menu bar, then click Quit Safari (Mac)Click File on the menu bar, then click Exit(Win), or click Safari on the Menu bar, then click Quit Safari (Mac) In Dreamweaver, click File on the Application bar, then click Exit (Win) or click Dreamweaver on the Menu bar, then click Quit Dreamweaver (Mac)In Dreamweaver, click File on the Application bar, then click Exit (Win) or click Dreamweaver on the Menu bar, then click Quit Dreamweaver (Mac) Adobe Dreamweaver CS4 - Illustrated

Closing a Web Page and Exiting Dreamweaver Adobe Dreamweaver CS4 - Illustrated

Clues to Use Saving and closing Dreamweaver filesSaving and closing Dreamweaver files Save files frequently as you workSave files frequently as you work Filename is “untitled” until you saveFilename is “untitled” until you save An asterisk appears next to the file name in Dreamweaver if you have unsaved changesAn asterisk appears next to the file name in Dreamweaver if you have unsaved changes Adobe Dreamweaver CS4 - Illustrated

Clues to Use Using Adobe Community HelpUsing Adobe Community Help Online and offline helpOnline and offline help Adobe provides extensive help information on their Web siteAdobe provides extensive help information on their Web site Adobe Community HelpAdobe Community Help Collection of materials such as tutorials, published articles, or blogs, in addition to regular help contentCollection of materials such as tutorials, published articles, or blogs, in addition to regular help content Adobe Dreamweaver CS4 - Illustrated

Unit Summary Define Web design softwareDefine Web design software Start Adobe Dreamweaver CS4Start Adobe Dreamweaver CS4 View the Dreamweaver workspaceView the Dreamweaver workspace Work with views and panelsWork with views and panels Open a Web pageOpen a Web page View Web page elementsView Web page elements Adobe Dreamweaver CS4 - Illustrated

Unit Summary Get helpGet help View a Web page in a browser windowView a Web page in a browser window Close a Web page and exit DreamweaverClose a Web page and exit Dreamweaver Adobe Dreamweaver CS4 - Illustrated