30
Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

Embed Size (px)

Citation preview

Page 1: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

Copyright © 2013 MyGraphicsLab / Pearson Education

FILES AND ASSETS PANELS

MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

Page 2: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

OBJECTIVES

Copyright © 2013 MyGraphicsLab / Pearson Education

This presentation covers the following ACA Exam objectives:

3.4 Use the Assets panel.

3.5 Use the Files panel.

Page 3: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE FILES PANEL

The Files panel lists site files and folder structure for the defined active site.

Used for file management operations: Move, Delete, Rename, Duplicate

Used to transfer files from and to remote server.

The list of files for a site become available after a site has been defined in Dreamweaver.

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 4: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE FILES PANEL: SITE NAME

The Site Name field displays the name of the currently active site.

The drop-down menu lists all defined sites. Switching to a different site in the menu lists

files and directory structure for that site.

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 5: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE FILES PANEL: SORTING FILES

Files and folders can be sorted based on: Name (click Local Files label) Size (click Size label) Type (click Type label) Date modified (click Modified label)

Click twice to sort in ascending or descending order.

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 6: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE FILES PANEL: LOCAL VIEW

The Local View field lists files and folders for the active site on the local computer.

The drop-down menu lists the following: Remote server

• Displays the files and directory structure on the remote server

• The remote server is available if a server is already defined in the site setup

Testing server• Displays the files and directory structure of the

testing server

• A testing server is available if a testing server is already defined in the site setup

• The testing server is often same as remote server

• The testing server is used to test server scripts and database-driven content

Repository view• Displays the Subversion (SVN) Repository if one

is defined Copyright © 2013 MyGraphicsLab / Pearson Education

Page 7: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE FILES PANEL: CONNECT TO REMOTE SERVER

The Connect to Remote Server button is used to connect to a remote server.

When connected, click to disconnect or reconnect from a remote server.

The remote server must be defined in the site setup first. Connection can be based on: FTP, RDS, and WebDAV protocol

Dreamweaver disconnects from the remote site if it has been idle for more than 30 minutes (FTP only) To change the time limit, choose Edit >

Preferences (Windows) or Dreamweaver > Preferences (Mac) > Site

See Adobe Dreamweaver CS6 Classroom in a Book, pages 402–404.

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 8: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE FILES PANEL: REFRESH BUTTON

The Refresh button refreshes the local and remote directory lists.

Use this button to manually refresh the file and directory lists.

Refreshing is necessary if you added files outside of Dreamweaver.

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 9: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE FILES PANEL: PUT AND GET

The Put button is used to put or upload file(s) to a remote server. You can upload an entire site. You can upload multiple selected files or

folders:• Select multiple files: Ctrl-click (Windows)

• Select multiple files: Command-click (Mac)

The Get button is used to get or download file(s) from a remote server. You can download an entire site. You can download multiple selected files or

folders:• Select multiple files: Ctrl-click (Windows)

• Select multiple files: Command-click (Mac)

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 10: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE FILES PANEL: CHECK-IN / CHECK-OUT

Check In Must be enabled on the Advanced tab in the

site setup Server category. Is another form of uploading a file 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.

Check Out Must be enabled on the Advanced tab in the

site setup Server category. Is 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 them out.

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 11: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE FILES PANEL: SYNCHRONIZING

The Synchronize button is used to synchronize files between local and the remote server.

It’s used to keep files on server and the local computer up to date by uploading or downloading most recent files.

Synchronization is important when working from multiple locations or collaborating on a site with others.

It has to be enabled on the Advanced tab in the site setup Server category.

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 12: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE FILES PANEL: EXPAND / COLLAPSE

The Expand/Collapse button is used to expand or collapse the Files panel.

When expanded, it displays two panes. Click once to expand; click again to collapse. If you click to expand, the panel maximizes

so that you cannot work in the Document window. Click again to collapse.

If you click Expand while the Files panel is not docked, you can still work in the document window.

Before you can dock the panel again, you must first collapse it.

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 13: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE FILES PANEL: EXPANDED VIEW

The right pane of the expanded view displays local files; the left pane represents remote server files and directory structure. The position of the panes can be

changed using the Preferences > Site dialog box.

The buttons represent connectivity to: Remote server Testing server Repository files

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 14: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE FILES PANEL: FLYOUT/OPTIONS MENU

The flyout or panel options menu reflects options relevant to the Files panel.

You can use flyout menus to perform important file and site management tasks, for example: File: rename, check links Edit: duplicate View: view hidden files Site: sitewide operations

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 15: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE ASSETS PANEL

The Assets panel is used to manage assets in the current site. Window > Assets

A site must be defined before you can view its assets in the Assets panel.

The Assets panel shows all assets in the site, regardless of where they are stored within the site root folder.

You can resize the preview area by dragging the splitter bar (between the preview area and the list of assets) up or down.

The Assets panel provides two ways to view assets: Site list: shows all of the assets in your site. Favorites list: shows only the assets you’ve added

to favorites.

See Adobe Dreamweaver CS6 Classroom in a Book, pages 210–212.

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 16: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE ASSETS PANEL: SORTING

Assets can be sorted based on: Name (click Name label) Dimensions (Click Dimensions Label) Size (click Size label) Date Modified (click Type label)

Click twice to sort in ascending or descending order.

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 17: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE ASSETS PANEL: IMAGES CATEGORY

The Images button in the Assets panel lists all image files in GIF, JPEG, or PNG formats.

To use an image in a page: Click, and then drag and drop from the panel

onto the page. Select the image file, and then click Insert.

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 18: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE ASSETS PANEL: COLORS CATEGORY

The Colors button is used to list all colors in the documents and style sheets, including colors of text, backgrounds, and links.

The Assets panel automatically adds the colors you’ve already applied to various elements, such as text, table borders, backgrounds, and so on.

To apply colors: Select the text in the document. Select the desired color in the panel, and then

click Apply. Colors can also be sampled by using the color

sampler tool and clicking the swatch.

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 19: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE ASSETS PANEL: URLS CATEGORY

The URL button lists all external links used in your current site: FTP HTTP and HTTPs email (mailto) local file (file://)

It does not show local relative links. To apply a URL to an image or text:

Select the text or image. Select the URL. Drag the URL from the panel to the selection

in the Design view, or click Apply. Select the URL, and then click Insert.

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 20: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE ASSETS PANEL: FLASH CATEGORY

The Flash button displays SWF files (compressed files created with Flash), but not FLA (Flash source) files.

To add SWF files: Click, and then drag and drop on the page. Select the SWF file, and then click Insert.

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 21: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE ASSETS PANEL: SHOCKWAVE CATEGORY

The Shockwave button displays files in any version of Adobe Shockwave.

In order to use: Click, and then drag and drop on the page. Select the file, and then click Insert.

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 22: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE ASSETS PANEL: MOVIES CATEGORY

The Movies button displays QuickTime, MPEG, and Flash Video (.flv) files.

In order to use: Click, and then drag and drop on the page. Select the file, and then click Insert.

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 23: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE ASSETS PANEL: SCRIPTS CATEGORY

The Scripts button displays independent (external) JavaScript or VBScript files that are stored anywhere within the root folder.

Scripts inside HTML files (embedded) do not appear.

In order to use: Drag into the head content area of the

document window; if that area isn’t visible, choose View > Head Content.

Drag into the code view. Select the script file, and then click Insert.

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 24: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE ASSETS PANEL: TEMPLATES

The Templates button displays templates available in the site.

There is no “favorite” category for templates. In order to use:

Click and apply to an entire document. A template can’t be inserted into a document.

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 25: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE ASSETS PANEL: LIBRARY CATEGORY

The Library button displays Library items available in the site.

There is no “favorite” category for libraries. In order to use:

Click, and then drag and drop library items onto the document.

Select an item, and then click Insert.

See Adobe Dreamweaver CS6 Classroom in a Book, pages 156–157.

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 26: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE ASSETS PANEL: REFRESH

Certain changes don’t appear immediately in the Assets panel. When you add or remove an asset from your site, the changes don’t appear in the Assets panel until you refresh the Site list. Examples: When you add or remove an asset outside of

Dreamweaver When you remove the only instance of a

particular color or URL in your site When you save a new file that contains a

color or URL that isn’t already used in the site

To refresh the Site list manually, click the Refresh Site List button. Dreamweaver creates the site cache or updates it as necessary.

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 27: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE ASSETS PANEL: EDIT

The Edit icon is used to edit an asset in the designated editing application.

Editing an asset in the Assets panel varies according to the asset type: For images, you use an external editor, which

opens automatically if you have defined an editor for that asset type.

You can edit colors and URLs in the Favorites list only.

When you edit templates and library items, you make the changes within Dreamweaver.

To edit an asset, select it, and then click the Edit button.

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 28: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE ASSETS PANEL: ADD TO FAVORITES

The Add to Favorites button adds frequently used assets to a Favorites list.

You can group related assets together and give them names.

The Favorites list make assets easier to find in the Assets panel.

Favorites are not stored as separate files, they’re references to the files in the Site list.

Adding a color or URL to the Favorites list requires an extra step. You can’t add new colors or URLs to the Site list; the Site list contains only assets that are already in use in your site.

You can select one or more assets in the Site list of the Assets panel, and then click Add To Favorites.

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 29: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE ASSETS PANEL: FAVORITES LIST

Most operations of the Assets panel are the same in the Favorites list as in the Site list. However, there are several tasks that you can perform only in the Favorites list.

To remove assets from the Favorites list: Select one or more assets (or a folder) in the

Favorites list. Click the Remove From Favorites button. The assets are removed from the Favorites

list, but not from the Site list.

Copyright © 2013 MyGraphicsLab / Pearson Education

Page 30: Copyright © 2013 MyGraphicsLab / Pearson Education FILES AND ASSETS PANELS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication

THE ASSETS PANEL: FAVORITES LIST MENU

The Favorites list flyout menu reflects options relevant to the Assets panel.

You can copy assets from one site to another. Examples: Individual assets Group of individual assets Entire favorites folder at once

Copyright © 2013 MyGraphicsLab / Pearson Education