36
Adobe Dreamweaver CS4 - Adobe Dreamweaver CS4 - Illustrated Illustrated Getting Started with Getting Started with Adobe Dreamweaver CS4 Adobe Dreamweaver CS4

Adobe Dreamweaver CS4 - Illustrated Getting Started with Adobe Dreamweaver CS4

Embed Size (px)

Citation preview

Adobe Dreamweaver CS4 - IllustratedAdobe Dreamweaver CS4 - Illustrated

Getting Started with Getting Started with Adobe Dreamweaver CS4Adobe Dreamweaver CS4

Unit ObjectivesUnit 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 ObjectivesUnit Objectives

• Get helpGet help

• View a Web page in a browser View a Web page in a browser windowwindow

• Close a Web page and exit Close a Web page and exit DreamweaverDreamweaver

Adobe Dreamweaver CS4 - Illustrated

Defining Web design softwareDefining 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 Use the Property inspector to view and edit page elementselements

• Use Roundtrip HTMLUse Roundtrip HTML

• Manage Web sitesManage Web sites

Adobe Dreamweaver CS4 - Illustrated

Defining Web Design SoftwareDefining Web Design Software

Adobe Dreamweaver CS4 - Illustrated

Defining Web Design SoftwareDefining Web Design Software

Adobe Dreamweaver CS4 - Illustrated

Starting Adobe Dreamweaver CS4Starting Adobe Dreamweaver CS4

• WindowsWindows• Click the Start button on the taskbarClick the Start button on the taskbar• Point to Point to All ProgramsAll Programs, click , click Adobe Adobe

Web Premium CS4Web Premium CS4 or or Adobe Design Adobe Design Premium CS4Premium CS4, then click , then click Adobe Adobe Dreamweaver CS4Dreamweaver CS4

• Click Click HTML HTML in the Create New column in the Create New column on the Dreamweaver welcome Screenon the Dreamweaver welcome Screen

Adobe Dreamweaver CS4 - Illustrated

Starting Adobe Dreamweaver CS4Starting Adobe Dreamweaver CS4

Adobe Dreamweaver CS4 - Illustrated

Starting Adobe Dreamweaver CS4Starting Adobe Dreamweaver CS4

• MacMac• Click Click FinderFinder in the dock, then click in the dock, then click

ApplicationsApplications• Click the Click the Adobe Dreamweaver CS3 Adobe Dreamweaver CS3

folder, then double-click the folder, then double-click the Dreamweaver CS4 applicationDreamweaver CS4 application

• Click Click HTMLHTML in the Create New category in the Create New category on the Dreamweaver welcome Screenon the Dreamweaver welcome Screen

Adobe Dreamweaver CS4 - Illustrated

Starting Adobe Dreamweaver CS4Starting Adobe Dreamweaver CS4

Adobe Dreamweaver CS4 - Illustrated

Viewing the Dreamweaver Viewing the Dreamweaver WorkspaceWorkspace

Adobe Dreamweaver CS4 - Illustrated

Viewing the Dreamweaver Viewing the Dreamweaver WorkspaceWorkspace

Adobe Dreamweaver CS4 - Illustrated

Working with Views and PanelsWorking with Views and Panels

• Click the Click the Show Code view buttonShow Code view button on the Document toolbaron the Document toolbar

• Click the Click the Show Code and Design Show Code and Design views buttonviews button on the Document on the Document toolbartoolbar

• Click the Click the Show Design view buttonShow Design view button on the Document toolbaron the Document toolbar

• Double-click the CSSDouble-click the CSS Styles panel Styles panel tabtab

Adobe Dreamweaver CS4 - Illustrated

Working with Views and PanelsWorking with Views and Panels

• Click each Click each panel tabpanel tab on the CSS on the CSS Styles panel group display the Styles panel group display the contents of each panelcontents of each panel

• Click the CSS Styles panel tabClick the CSS Styles panel tab• Double-click the Double-click the panel tabs panel tabs to view to view

the panels in each of the other panel the panels in each of the other panel groupsgroups

• Collapse all panel groups except the Collapse all panel groups except the Files panel groupFiles panel group

Adobe Dreamweaver CS4 - Illustrated

Working with Views and Working with Views and PanelsPanels• Click Click FileFile on the Application bar on the Application bar

(Win) or Menu bar (Mac), then click (Win) or Menu bar (Mac), then click CloseClose to close the untitled document to close the untitled document

• If you are asked if you want to save If you are asked if you want to save the untitled page, click the untitled page, click NoNo

Adobe Dreamweaver CS4 - Illustrated

Working with Views and PanelsWorking with Views and Panels

Adobe Dreamweaver CS4 - Illustrated

Clues to UseClues to Use

• Panel groupsPanel groups• Three panel groups open when you first Three panel groups open when you first

start Dreamweaver in Windowsstart Dreamweaver in Windows• Insert, CSS Styles, and FilesInsert, CSS Styles, and Files

• Retain arrangement from one session Retain arrangement from one session to the nextto the next

• The The panel group title barpanel group title bar is the title is the title bar at the top of each panel groupbar at the top of each panel group

Adobe Dreamweaver CS4 - Illustrated

Opening a Web PageOpening a Web Page

• Click Click FileFile on the Application bar on the Application bar (Win) or Menu bar (Mac), then click (Win) or Menu bar (Mac), then click OpenOpen

• Click the Click the Look in list arrowLook in list arrow (Win) or (Win) or click the Current file location list click the Current file location list arrow (Mac), navigate to the drive arrow (Mac), navigate to the drive and folder where your Data Files are and folder where your Data Files are stored, then double-click the stored, then double-click the unit_a unit_a folderfolder (Win) or click the (Win) or click the unit_a unit_a folderfolder (Mac) (Mac)

• Click Click dwa_1.htmldwa_1.html, then click , then click OpenOpenAdobe Dreamweaver CS4 - Illustrated

Opening a Web PageOpening a Web Page

• If your Document window is not If your Document window is not maximized, click the maximized, click the Maximize Maximize buttonbutton on the Document window title on the Document window title barbar

• Click the Click the Show Code view buttonShow Code view button• Scroll through the code, click the Scroll through the code, click the

Show Design view buttonShow Design view button to return to return to Design view, then scroll to display to Design view, then scroll to display the top of the page if necessarythe top of the page if necessary

Adobe Dreamweaver CS4 - Illustrated

Opening a Web PageOpening a Web Page

Adobe Dreamweaver CS4 - Illustrated

Clues to UseClues to Use

• Docking panel groupsDocking panel groups• You can move panel groups by You can move panel groups by

dragging the panel group title bardragging the panel group title bar• Dock a panel group by dragging it back Dock a panel group by dragging it back

to the right side of the screento the right side of the screen• A heavy bar indicates the position it will A heavy bar indicates the position it will

take when you release the mousetake when you release the mouse

Adobe Dreamweaver CS4 - Illustrated

Viewing Web Page ElementsViewing Web Page Elements

Adobe Dreamweaver CS4 - Illustrated

• TextText

• ImagesImages

• HyperlinksHyperlinks

• TablesTables

• Div tags and Div tags and AP ElementsAP Elements

• Flash MoviesFlash Movies

• Flash VideoFlash Video

Viewing Web Page ElementsViewing Web Page Elements

Adobe Dreamweaver CS4 - Illustrated

Getting HelpGetting Help

• Click Click HelpHelp on the Application bar (Win) or on the Application bar (Win) or Menu bar (Mac)Menu bar (Mac)

• Click Click Dreamweaver HelpDreamweaver Help• Click the Click the Dreamweaver help (web) Dreamweaver help (web) link in link in

the top right corner of the Dreamweaver the top right corner of the Dreamweaver Help and Support windowHelp and Support window

• Click the Click the plus sign plus sign next to Workspace in next to Workspace in the left column, click the plus sign next to the left column, click the plus sign next to Working in the Document window, then Working in the Document window, then click click Switch between views in the Switch between views in the Document windowDocument window

Adobe Dreamweaver CS4 - Illustrated

Getting HelpGetting Help

• Read the text in the content side of the Read the text in the content side of the Help window, then close the Help windowHelp window, then close the Help window

• Type Type CSS Property inspector CSS Property inspector in the in the search text box in the Dreamweaver Help search text box in the Dreamweaver Help and Support window, then press and Support window, then press [Enter] [Enter] (Win) or (Win) or [Return] [Return] (Mac)(Mac)

• Click one of the links to read information Click one of the links to read information about one of the topics of your choiceabout one of the topics of your choice

• Close the Dreamweaver Help and Support Close the Dreamweaver Help and Support windowwindow

Adobe Dreamweaver CS4 - Illustrated

Getting HelpGetting Help

Adobe Dreamweaver CS4 - Illustrated

Getting HelpGetting Help

Adobe Dreamweaver CS4 - Illustrated

Viewing a Web Page in a Viewing a Web Page in a Browser WindowBrowser Window• Click the Click the Restore Down button Restore Down button

(Win), click the (Win), click the Window Size Window Size shortcut menushortcut menu, then click , then click 760 × 420 760 × 420 (800 × 600, Maximized)(800 × 600, Maximized)

• Click the Click the Preview/Debug in Preview/Debug in Browser buttonBrowser button on the Document on the Document toolbar, then click toolbar, then click Preview in [your Preview in [your browser name]browser name]

• Click Click FileFile on the browser’s menu bar, on the browser’s menu bar, click click PrintPrint, then click , then click PrintPrint

Adobe Dreamweaver CS4 - Illustrated

Viewing a Web Page in a Viewing a Web Page in a Browser WindowBrowser Window

Adobe Dreamweaver CS4 - Illustrated

Viewing a Web Page in a Viewing a Web Page in a Browser WindowBrowser Window

Adobe Dreamweaver CS4 - Illustrated

Closing a Web Page and Closing a Web Page and Exiting DreamweaverExiting Dreamweaver• Click Click FileFile on the menu bar, then click on the menu bar, then click

ExitExit(Win), or click (Win), or click Safari Safari on the on the Menu bar, then click Menu bar, then click Quit Safari Quit Safari (Mac)(Mac)

• In Dreamweaver, click In Dreamweaver, click FileFile on the on the Application bar, then click Application bar, then click ExitExit (Win) (Win) or click or click DreamweaverDreamweaver on the Menu on the Menu bar, then click bar, then click Quit Dreamweaver Quit Dreamweaver (Mac)(Mac)

Adobe Dreamweaver CS4 - Illustrated

Closing a Web Page and Closing a Web Page and Exiting DreamweaverExiting Dreamweaver

Adobe Dreamweaver CS4 - Illustrated

Clues to UseClues 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 An asterisk appears next to the file name

in Dreamweaver if you have unsaved in Dreamweaver if you have unsaved changeschanges

Adobe Dreamweaver CS4 - Illustrated

Clues to UseClues to Use

• Using Adobe Community HelpUsing Adobe Community Help• Online and offline helpOnline and offline help• Adobe provides extensive help Adobe provides extensive help

information on their Web siteinformation on their Web site• Adobe Community HelpAdobe Community Help

• Collection of materials such as tutorials, Collection of materials such as tutorials, published articles, or blogs, in addition published articles, or blogs, in addition to regular help contentto regular help content

Adobe Dreamweaver CS4 - Illustrated

Unit SummaryUnit 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 SummaryUnit Summary

• Get helpGet help

• View a Web page in a browser View a Web page in a browser windowwindow

• Close a Web page and exit Close a Web page and exit DreamweaverDreamweaver

Adobe Dreamweaver CS4 - Illustrated