17
Lesson 9: Fine- Tuning Your Workflow Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

Lesson 9: Fine-Tuning Your Workflow Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

Embed Size (px)

Citation preview

Page 1: Lesson 9: Fine-Tuning Your Workflow Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

Lesson 9: Fine-Tuning Your Workflow

Introduction to Adobe Dreamweaver CS6Adobe Certified Associate:

Web Communication using Adobe Dreamweaver CS6

Page 2: Lesson 9: Fine-Tuning Your Workflow Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 2

Overview

Page 3: Lesson 9: Fine-Tuning Your Workflow Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 3

3.1 Know the Dreamweaver

Interface• Panels can be moved, grouped, and docked to

help organize items you use most often.• In the next part of this lesson, you’ll create a

custom workspace layout for CSS layouts.• You’ll start by removing certain panels and

repositioning the remaining panels.

Page 4: Lesson 9: Fine-Tuning Your Workflow Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

4

3.6 Customize the Workspace

Follow these steps to customize Dreamweaver panels:1. Make sure your dw09lessons folder is defined as

a site. See the Starting Up section. 2. Locate the Business Catalyst tab, click the top-

right panel menu, and choose Close Tab Group.3. Right-click or Control+click (Mac) the Adobe

Browserlab tab and choose Close Tab Group.

© 2013 John Wiley & Sons, Inc.

Page 5: Lesson 9: Fine-Tuning Your Workflow Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

5

3.6 Customize the Workspace

4. Click once on the Files tab to expand it (right).To show a closed panel,click once. To hide it, double-click it.

© 2013 John Wiley & Sons, Inc.

Page 6: Lesson 9: Fine-Tuning Your Workflow Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

6

3.6 Customize the Workspace

5. Click and hold the AP Elements tab. Drag this tab into your workspace so it becomes a floating window (right). You may prefer all your panels in a single column, so add it back in now.

© 2013 John Wiley & Sons, Inc.

Page 7: Lesson 9: Fine-Tuning Your Workflow Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

7

3.6 Customize the Workspace

6. You can dock the AP Elements panel with the other panels. Place your cursor over the top of its panel, and click and hold.

7. Drag the AP Elements panel above the Files panel group title bar. Watch for a thin blue line above the Files tab. This indicates you are creating a new group. When the solid line appears, release the AP Elements panel.

© 2013 John Wiley & Sons, Inc.

Page 8: Lesson 9: Fine-Tuning Your Workflow Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

8

3.6 Customize the Workspace

8. Adjust the panels’ width and height by placing your cursor on the edges of a group. When the black double-arrow appears, you can click and drag to adjust. The panels should look similar those at right.

© 2013 John Wiley & Sons, Inc.

Page 9: Lesson 9: Fine-Tuning Your Workflow Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

9

3.6 Customize the Workspace

9. Click the double-arrows on the top-right corner of the entire panels column to collapse to the icon view.

10. Click the Files icon; that group will expand. This group will stay open until you start working on the document or click another icon.

11. Click the double-arrows to return to the expanded panel view.

© 2013 John Wiley & Sons, Inc.

Page 10: Lesson 9: Fine-Tuning Your Workflow Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

10

3.6 Customize the Workspace

12. Choose Window > Workspace Layout > New Workspace. When the New Workspace Layout dialog box appears, type CSS Layout into the Name text field and press OK.

13. Choose Window > Workspace Layout > Designer to switch to the default workspace. Choose Window > Workspace Layout > CSS Layout to switch your custom workspace.

© 2013 John Wiley & Sons, Inc.

Page 11: Lesson 9: Fine-Tuning Your Workflow Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 11

3.1 Know the Dreamweaver

Interface• Dreamweaver groups similar items into

categories in the Insert panel. You may have already found yourself using certain items more often than others.

• The Favorites category lets you group items you commonly use into one place.

Page 12: Lesson 9: Fine-Tuning Your Workflow Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

12

3.2 Use the Insert BarFollow these steps to edit the Favorites tab:1. Double-click the index.html file in the Files panel. 2. Expand the Insert panel by clicking the Insert tab

at the top of the panel. 3. Set the menu at the top of the Insert panel to

Common. Click on it and choose the Common option. Click on the menu again. Choose the Layout option and note the Draw AP Div object is listed.

© 2013 John Wiley & Sons, Inc.

Page 13: Lesson 9: Fine-Tuning Your Workflow Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

13

3.2 Use the Insert Bar4. Click the Favorites category in the Insert panel’s

drop-down menu. Right-click (Windows) or Ctrl+click (Mac OS) in the gray area under the Favorite category, and choose Customize Favorites from the contextual menu.

© 2013 John Wiley & Sons, Inc.

Page 14: Lesson 9: Fine-Tuning Your Workflow Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

14

3.2 Use the Insert Bar5. On the left side of the Customize Favorite

Objects dialog box, available objects are organized by the tabs, which indicate where each object can be found in the Insert bar. Select Image, then press the Add button (>>).

© 2013 John Wiley & Sons, Inc.

Page 15: Lesson 9: Fine-Tuning Your Workflow Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

15

3.2 Use the Insert Bar6. Click the Available Objects menu and choose the

Layout category. Locate Draw AP Div; then press the Add button. Press OK. The Favorites category now features the Image and Draw AP Div elements.

© 2013 John Wiley & Sons, Inc.

Page 16: Lesson 9: Fine-Tuning Your Workflow Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

© 2013 John Wiley & Sons, Inc. 16

Lesson Summary

Page 17: Lesson 9: Fine-Tuning Your Workflow Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6

Copyright 2013 John Wiley & Sons, Inc.. All rights reserved. Reproduction or translation of this work beyond that named in Section 117 of the 1976 United States Copyright Act without the express written consent of the copyright owner is unlawful. Requests for further information should be addressed to the Permissions Department, John Wiley & Sons, Inc.. The purchaser may make back-up copies for his/her own use only and not for distribution or resale. The Publisher assumes no responsibility for errors, omissions, or damages, caused by the use of these programs or from the use of the information contained herein.