1. Copyright © 2013 MyGraphicsLab / Pearson Education THE INTERFACE MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

2. OBJECTIVES Copyright © 2013 MyGraphicsLab / Pearson Education This presentation covers the following ACA Exam objectives: 3.1 Identify elements of the Dreamweaver interface. 3.2 Use the Insert bar. 3.6 Customize the workspace.

3. THE INTERFACE Dreamweaver CS6 Interface: Default View Copyright © 2013 MyGraphicsLab / Pearson Education Default workspace Collapse/expand panels column Panel “flyout” menu Panel group Welcome Screen Properties panel

4. THE WELCOME SCREEN Dreamweaver CS6 welcome screen:  Convenient for opening recent files, creating new pages  Useful for making new pages quickly  Easy access to Adobe tutorials  Connects to Adobe Exchange (access to extensions and widgets) Copyright © 2013 MyGraphicsLab / Pearson Education For an overview, watch the videos What is Dreamweaver? and The Welcome Screen.

5. WORKSPACE PREFERENCES (1 OF 2) Dreamweaver CS6 welcome screen:  Can be enabled/disabled under Preferences  Preferences can be accessed using Command+U (Mac) or Ctrl+U (Windows) Copyright © 2013 MyGraphicsLab / Pearson Education

6. WORKSPACE PREFERENCES (2 OF 2) Dreamweaver CS6 Preferences:  Preferences can be changed on a wide range of categories.  Some preferences affect only how the Dreamweaver interface and dialog boxes appear (Fonts, for example).  Some preferences affect how code is written (for example, CSS Styles > Use Shorthand). Copyright © 2013 MyGraphicsLab / Pearson Education To learn more, watch the video Organizing Your Workspace.

7. DREAMWEAVER CS6: DESIGN VIEW VS. CODE VIEW Code: displays single window with code view. Split: displays two windows for code and design views. Design: displays single window with design view. See Adobe Dreamweaver CS6 Classroom in a Book, pages 26–29. For more info, watch the video Exploring the Document Window. Copyright © 2013 MyGraphicsLab / Pearson Education Page view modes Code view tools and shortcuts Tag selector Properties panel modes Code view Design view Page design display information Document title

8. DREAMWEAVER CS6: LIVE VIEW Live View: displays your pages as they would appear in a browser, including testing of hover states and dynamic content. Live Code view is available only when viewing a document in Live view. Live Code view displays the actual code that a browser uses to execute the page, and can dynamically change as you interact with the page in Live view. Live Code view is not editable. Copyright © 2013 MyGraphicsLab / Pearson Education Page view modes Code view tools and shortcuts Tag selector Properties panel modes Code view Design view Page design display information Document title

9. CODE VIEW Code View offers syntax coloring, line numbers, and highlighting of invalid code. Code View offers tools for common tasks. Code View offers code hinting for HTML, CSS, jQuery, and server scripting. Copyright © 2013 MyGraphicsLab / Pearson Education Code view Code view tools and shortcuts

10. APPLICATION BAR: VIEW MODES The Application bar offers quick access to Code, Split Code, Design, and Code and Design views. Code and Design views can be split vertically or horizontally. Design view can be placed on left or right. Copyright © 2013 MyGraphicsLab / Pearson Education View mode menu

11. APPLICATION BAR: EXTENSIONS AND WIDGETS The Application bar offers quick access to Extension Manager, Widget Browser, and Adobe Exchange. Extension Manager can also be accessed via menu: choose Commands > Manage Extensions. Adobe Exchange is the repository for all Dreamweaver extensions and widgets. Extension Manager allows you to install, remove, or disable extensions.  Extensions are.MXP files. Widgets are a different format from extensions, and are managed with the Widget Browser. Copyright © 2013 MyGraphicsLab / Pearson Education Access to extensions and widgets

12. APPLICATION BAR: SITE MENU The Application bar offers quick access to creating new site definitions and editing existing site definitions. New site definition and management can also be accessed under the main menu: choose Site > New Site or Site > Manage Sites, respectively. Copyright © 2013 MyGraphicsLab / Pearson Education Site definition and management

13. DOCUMENT WINDOW SIZE Document bar  Enable/disable under View > Toolbars > Document from the main menu bar. Multiscreen Preview Menu  Preview pages at different view sizes on the fly.  Change page orientation.  Build Media Queries for different devices and viewports.  Can also be accessed from the status bar at the bottom right of page.  Can also be accessed from the main menu bar by choosing View > Window Size. Copyright © 2013 MyGraphicsLab / Pearson Education

14. BROWSER PREVIEW Preview/debug in browser  Preview pages locally or on server.  Preview in multiple browsers.  Access to adding/editing more browsers.  Preview browsers can be made primary or secondary.  Can also be accessed from main menu bar: File > Preview in Browser  Add/Remove browsers by choosing Edit Browser List and then clicking the +/- button in the preferences.  If Preview Using Temporary File is selected in preferences, pages can be previewed without saving first.  Preview in Adobe BrowserLab is an online service that provides an easier solution for cross-browser testing. Copyright © 2013 MyGraphicsLab / Pearson Education

15. FILE MANAGEMENT MENU (1 OF 3) Locked files can be unlocked to allow editing. Get  Lets you download from server a newer version if present  Server connection has to be defined in the site setup procedure Check Out  Has to be enabled in the Advanced tab in the Server category of Site Setup  Offers another form of downloading a file from server  Server connection has to be defined in the site setup procedure  Files that are checked out are automatically locked on the server with a note indicating who checked it out Copyright © 2013 MyGraphicsLab / Pearson Education

16. FILE MANAGEMENT MENU (2 OF 3) Put  Lets you upload files to server  Server connection has to be defined in the site setup procedure Check In  Has to be enabled in the Advanced tab in the Server category of Site Setup  Gives you another way to upload files to server  Server connection has to be defined in the site setup procedure  Files that are checked in are automatically unlocked on the server and locked locally Copyright © 2013 MyGraphicsLab / Pearson Education

17. FILE MANAGEMENT MENU (3 OF 3) Design Notes  Design Notes are notes that you create for a file. Design Notes are associated with the file they describe. Locate in Site  Lets you locate and highlight the file for the page in the Site panel  Can also be accessed under Main Menu Bar > Site Copyright © 2013 MyGraphicsLab / Pearson Education

18. W3C VALIDATION MENU The W3C Validation menu lets you validate the current document or a selected tag. Validate Current Document (W3C)  Uploads page to W3C to validate markup as standards compliant  Displays results in the Validation tab in the results panel Validate Live Document (W3C)  Validates live document markup on the sever Settings  Allows you to change preferences and settings for the Validator  Defaults to XHTML 1.0 Transitional DOCTYPE if none is found  Allows you to change default DOCTYPE Copyright © 2013 MyGraphicsLab / Pearson Education

19. CHECK BROWSER COMPATIBILITY MENU (1 OF 2) Check Browser Compatibility  Shows errors or warnings  Can also be accessed via File > Check Page on the main menu bar  Displays results in the Browser Compatibility tab in the results panel Next Issue / Previous Issue  Jumps to next or previous found issue in the code Show All Issues  Shows all issues in the results panel Edit Ignored Issues List  Opens Exceptions.xml, finds the issue that you want deleted from the Ignored Issues list, and deletes it Check Spelling  Default is English United States  Dictionary can be changed in the Dreamweaver preferences General category Copyright © 2013 MyGraphicsLab / Pearson Education

20. CHECK BROWSER COMPATIBILITY MENU (2 OF 2) Check CSS Advisor Website for New Issues  Takes you to the Adobe Developer Connection site for reported browser compatibility CSS issues ￭ Report a Browser Rendering Issue  Displays the page on the CSS advisor site to submit a new post  Browser profiles are stored in the Browser Profile folder inside the Dreamweaver Configuration folder. Each browser profile is defined as a text file that is named for the browser. ￭ Settings  Lets you change minimum versions of target browsers Copyright © 2013 MyGraphicsLab / Pearson Education

21. VISUAL AIDS Visual aids provide help visualizing the design elements typically invisible in the browser. Invisible Elements  When the Invisible Elements option is selected, it shows icons marking the location of invisible elements in Design view.  Examples of invisible elements include line breaks, named anchors, scripts, comments, and hidden form fields.  Shown icons would need to be checked in the Preferences dialog box in the Invisible Elements category before visual aids can be made visible. Copyright © 2013 MyGraphicsLab / Pearson Education Line Break Visual Aid

22. REFRESH DESIGN VIEW Refresh Design View updates the document in Design view to reflect any changes you made in the code. Changes you make in the code don’t automatically appear in Design view until you perform certain actions, such as saving the file or clicking the Refresh Design View button. Copyright © 2013 MyGraphicsLab / Pearson Education

23. DOCUMENT TITLE Document titles are displayed in the browser’s title bar. Document titles are used for:  Browser bookmarks  Browser page title  Search engine indexing See Adobe Dreamweaver CS6 Classroom in a Book, pages 26–29. Copyright © 2013 MyGraphicsLab / Pearson Education

24. PANELS Panels can be opened and closed (collapsed) using the Window menu. Items with checkmarks are opened panels. Most panels have keyboard shortcuts to open and close them. Shortcut to toggle the Files panel is F8 on Windows and Command+Shift+F on Mac. Shortcut for the Properties panel is Ctrl+F3 on Windows and Command+F3 on Mac. Double-clicking a panel’s tab will collapse it. A single click will expand it. See Adobe Dreamweaver CS6 Classroom in a Book, pages 5–10. Copyright © 2013 MyGraphicsLab / Pearson Education

25. PANEL MENUS: FLYOUT MENUS Every panel has a flyout menu. The flyout menus are contextual (relevant to the panel role). Copyright © 2013 MyGraphicsLab / Pearson Education Panel “flyout” menu

26. CSS STYLES PANEL The CSS Styles panel has two modes  All –– displays all rules  Current –– displays only applied rules Supplies shortcut icons to common CSS functions Has properties viewing modes, and two panes:  Rules  Properties Used to manage all style sheets CSS style tasks can also be accessed via the main menu bar:  Choose Format > CSS Styles Copyright © 2013 MyGraphicsLab / Pearson Education CSS properties viewing modes Shortcuts to common CSS tasks

27. TAG SELECTOR BAR The Tag Selector bar is located in the status bar at the bottom of the Document window. It shows a trail of parent and children tags based on the location of the cursor or selection. It allows you to select parent or children tags. Click a tag to select it with all of its content. Right-click (Windows) or Control-click (Mac) a tag in the tag selector to access tag-related menus, including the Quick Tag Editor. Copyright © 2013 MyGraphicsLab / Pearson Education

28. QUICK TAG EDITOR Used to quickly insert and edit HTML tags without leaving Design view. Displays as a small pop-up window. Allows you to edit a tag, add a tag, or enclose the current selection within a tag. You can use a list of tags and attributes to help you remember HTML tags, and save you some typing. Can be used in three ways:  Insert HTML (used for adding new tags and code at current cursor position)  Wrap Tag (wrap one tag around one or more other tags and content)  Edit HTML (displays the entire selected tag with all the attributes) Copyright © 2013 MyGraphicsLab / Pearson Education

29. STATUS BAR (1 OF 2) The Status Bar is located at the bottom of the document window. The Select tool (pointer) is the default. It lets you select any content on the page. The Hand tool is used to drag the page, or pan if you have zoomed in. The Zoom tool lets you zoom in or out.  Click, or click and drag, to zoom in.  Hold down Alt (Windows) or Option (Mac) and click to zoom out.  Useful when you need to zoom in and align elements in the page; especially handy when you need to precisely align Absolute Positioned (AP) elements along guides and grids Copyright © 2013 MyGraphicsLab / Pearson Education

30. STATUS BAR (2 OF 2) Mobile, Tablet, and Desktop size previews Document size and download time  Shows you the estimated document size and approximate download time for the page, including all dependent files, such as images and other media files. Encoding indicator  Shows you the text encoding for the current page.  UTF ‑ 8 can safely represent all characters in Western languages.  Encoding option can be changed when a new document is created, or permanently under Preferences > New Document. Copyright © 2013 MyGraphicsLab / Pearson Education

31. CODE NAVIGATOR The Code Navigator appears automatically after you click in an area that has any applied CSS rules. When clicked, it displays all the CSS selectors that cascade down to the cursor location on the page. Clicking a Selector takes you to the CSS code in the style sheet. Keyboard shortcuts to the Code Navigator are Alt-click (Windows) or Command+Option-click (Mac). See Adobe Dreamweaver CS6 Classroom in a Book, pages 53–55. Copyright © 2013 MyGraphicsLab / Pearson Education