WDV 331 Dreamweaver Applications

WDV 331 Dreamweaver Applications Site Assets Dreamweaver CS6 Chapter 15

Site Assets Web pages • Web pages integrate lots of different elements: PNGs, GIFs, JPEGs, links, colors, JavaScript files, and Flash movies, to name just a few. • On a large site with lots of files, it’s a challenge to locate a particular image or remember an exact color. • To simplify the process, Dreamweaver provides the Assets panel. • Dreamweaver defines the term asset to mean any element you use on a web page, such as a JPEG, a link, or even an individual color.

Viewing the Assets Panel

Viewing the Assets Panel • Dreamweaver duplicates most of the Assets panel’s drop-down menu commands in the panel itself, but three options appear only on the drop-down menu. • “Recreate Site List” comes in handy if you add or delete files without Dreamweaver’s help using Windows Explorer or the Mac Finder. It rebuilds the site cache and updates the list of assets. • “Copy to Site” copies the selected asset to another site. • “Locate in Site” switches to the Files panel and selects the file. You can also open the contextual menu by right-clicking (Control-clicking) any asset in the list.

Your site’s assets nine categories • The Images category lists all the GIF, JPEG, and PNG files in your site. Dreamweaver lists the dimensions of each image next to its name so you can quickly identify whether logo1. gif or logo2. gif is your 728 x 90 pixel banner logo. You can also see the images’ sizes, types, and locations (you may need to scroll to the right to see all this). • The Colors category shows you all the colors specified in your site’s pages and style sheets. These include link colors, background colors, and text colors. • The Links category lists all external links — and not just standard http:// links, but also email links, FTP addresses, and JavaScript links.

Your site’s assets  nine categories • The three multimedia categories —They each display movie files with their corresponding extensions: .swf (Flash), .dcr (Shockwave), .flv (Flash video), and .mov or .mpg (QuickTime and MPEG). Unfortunately, the Movies category hasn’t kept up with the times: Thanks to HTML5 video (see Other Video Options ), there are other movie formats to think about, such as MPEG4 (. mp4), OggVorbis (. ogv), and WebM (. webm). The Movies category doesn’t list any movies with those extensions.

Your site’s assets  nine categories • The Scripts category lists JavaScript files. It includes only external script files your web pages link to, such as those Dreamweaver’s Spry Framework uses. • It doesn’t include scripts embedded in a web page — like those that Dreamweaver behaviors create. More on Behaviors in latter lecture • .

Your site’s assets  nine categories • The last two categories — Templates and Library — are advanced assets that streamline website production. They’re discussed in upcoming lectures. • You can switch between two views for each asset category — Site and Favorites — by clicking the radio buttons near the top of the Assets panel. • The Site option lists all the assets in your site for the chosen category. • Favorites lets you create a select list of your most important and frequently used assets.

Refresh Site • If you add additional assets as you work on a site — for example, if you create a GIF image in Fireworks and import it into your site — you need to update the Assets panel. To do so, click the Refresh Site List button

Inserting Assets into Your Web Site • The Assets panel’s prime mission is to make it easy for you to add assets by a drag-and-drop operation or right click on the asset name and select insert. • Most of the categories on the panel refer to external files you commonly find on web pages: images, Flash and Shockwave files, movies, and scripts. You can drop an asset anywhere on a page you’d normally insert an object — in a table cell, a < div > tag, at the beginning or end of a page, or within a paragraph. • you’ll insert most assets into the body of a web page, usually should place script files at the head of the page.

Inserting Assets into Your Web Site • Insert Color or Text • highlighting the text (to change its color or turn it into a link) or image (to turn it into a link). • In the Assets panel, click the appropriate category button — Colors or Links. • Click the color or link you want, and then click Apply. Alternatively, you can drag the color or link asset from the panel to the selected text or image.

Favorite Assets • On a large site, you may have thousands of images, movies, colors, and external links. Dreamweaver lets you create a compact list of your favorite, frequently used assets. • For example, you might come up with five main colors that define your site’s color scheme, which you’ll use much more often. Add them to your assets list of favorite colors. • Likewise, adding graphics you use over and over i.e. logos

Identifying Your Favorites • If the color, graphic, or other element you want to add to your Favorites list already appears on your Assets panel, highlight it in the list and then click the “Add to Favorites” button • Even quicker, you can add favorites as you go, snagging them right from your web page. If you’re working on your site’s home page, for example, and you insert a company logo, that’s a perfect time to make the logo a favorite. Simply right-click the image, choose “Add Image to Favorites.” Dreamweaver instantly adds the graphic to your list of favorites within that asset category — meaning that you’ll see the file when you’re in the Favorites

Identifying Your Favorites • Give favorite assets an easily identifiable nickname. • Instead of listing a favorite image using its file name, use an easily understood name like New Product. • Naming favorite colors use like Page Background • To name a favorite asset, click to select it, pause a moment, and then click again to edit its name. These nicknames only apply in the Assets panel. • Right click when your in the favorites area and you can make folders for your favorite assets

WDV 331 Dreamweaver Applications