 |
| Photo credit: Yi-Lin Hsieh , uploaded via Flickr, Creative Commons License |
9.1 Web Image File Formats:
In this section, our tutor discusses the pros and cons of various image file formats. This discussion has been previously covered in Flash Assignment 5, posted 05/25/2011.
9.2 Inserting Images and “Alt” Text:
We begin this lesson by editing our “About Us” page to include a JPG image. We inset this image by means of the Image icon on the Insert Bar (Common tab). After browsing for the image file to attach, we are presented with an alternate text dialogue box, asking us to insert a description of the image to be read aloud by screen reader applications.
Once our image has been inserted on the page, we can select the image, and note that the Properties panel now contains fields related to the selected image. From the panel, we can adjust properties associated with the image, but at this point we will be content to simply adjust the alignment property. By default, our picture has been inserted “inline”, meaning that it has occupied a series of lines on the page, and pushed the existing text down below it. We choose to change this alignment to “Left”. This does not move the image on the page, as it was already aligned with the left margin. What it does do, is place the image in an invisible box and truncates the pictures use of the lines at the image width. This allows the text to move up and occupy the remaing area on each line to the right of the picture. This is analogous to the Box layout in MS Word.
9.3 Image File Path:
Here we draw our attention to the Src field in the image properties panel. We note that the path in the Src field points to the location from whence we retrieved out picture. It is important that this path be HTML “legal”; that is, avoid using capital letters, spaces, or special characters in the path. While the system one is developing on may be tolerant of such pathnames, many web servers will not be, which may result in the image not displaying as intended.
We also note here that if we move the image source file from within the Files panel in Dreamweaver, the application will acknowledge the move, and prompt us for approval to update the image path. If, however, we executed the move at OS file system level, Dreamweaver would be left out-of-the-loop, and thus would not be able to find and display the image.
9.4 Working with the Assets Panel:
Here we refer to the Assets tab of our Files panel, and note that this tab lists for us, among other things, all of the image files in existing throughout the files and folders included in our Files panel. Optimally, we really should keep our images together in one folder, but in some cases there may be good reason for separating them in the file structure. Regardless, the images list on the Assets tab will parse all of included file strycture for image format files, and list them along with their associated properties (Pixel dimensions, file size, format, path). It also includes a preview area, so a selected image can be viewed. Furthermore, we can add images to a page directly from this panel, vis drag-and-drop, or by using the Insert button at the bottom of the panel.
9.5 Modifying Images:
We take a look here at the rudimentary image editing functions baked-in to Dreamweaver. With an image such as a simple JPG photograph, we can make a few adjustments, such as cropping, scaling, and adjusting the brightness/contrast. One should be mindful that when making adjustments to an image placed on a page, one is not merely adjusting the instance of the image on said page, but rather modifying the source file itself.
It is advisable to perform anything beyond the very simplest of editing within a dedicated image editing application, such as Photoshop or Fireworks. The Dreamweaver program preferences can actually be set so as to launch an external editor by default when opting to edit an image.
9.6 Photoshop Smart Objects:
If one is keen to work with images in Photoshop, and specifically in the native PSD format, then one can take advantage of the Smart Object image-linking feature in Dreamweaver. This feature allows one to add select PSD files from the Files panel, and add them to ones page. Now, browsers will not render PSD files, so what Dreamweaver does is make a copy of the PSD image and stores it in a standard format file (such as JPG). The copy of the image is inserted into the page, but that copy maintains a link with the source PSD file. So, if one wishes to modify the source file in Photoshop, Dreamweaver is notified that the source file has changed, and prompts the user to refresh the JPG copy on the page. It is not necessary to manually replace the JPG file with an updated copy of the PSD source; Dreamweaver will cheerfully do that if given the nod.
9.7 Flash Files:
We see here that the process of inserting Flash SWF files is essentially the same as tha for inserting images. We note that our Assets panel has an icon to display the Flash-format files in our file structure, and we can easily select, preview, and insert into our page Flash content just as we did with image files.
As with image files, we note that when a Flash file on our page is selected, the Properties panel displays information associated with this file type, and allows for the selection of some options governing the file’s behavior and appearance on the page.
9.8 Flash Video:
Adding Flash video (FLV or F4V) files to one’s webpage allows video playback to occur from within the browser (provided that the browser supports Flash content; sorry iPad users), rather than launching a stand-alone media player. This may or may not be the best solution for one’s project, but Dreamweaver give one this option, regardless.
Again, referring to the Assets panel, we note there is an icon for Video files. Here, one can find a list of the FLV or F4V files contained within the site file structure. Adding a video is as easy as drag-and-drop, but note that the Insert FLV dialogue box will appear, asking us to specify a skin option for the video. The skin is just a set of playback controls that gives the user some degree of control over the video playback.
Again, note that one added to the page, a video object can be selected and the relevant properties associated with same will be accessible in the Properties panel.
We also note that Adobe provides a media encoder with CS5 that allows one to convert numerous video formats into the Flash FLV or F4V formats for use in inline video playback. This is fine if one has an uncompressed source video file to convert from. However, because of its large file size, most video is stored in compressed formant (often encoded on-the-fly by digital video cameras). If one has only video in a compressed format, such as MPEG, to begin with, then it is ill-advised to re-encode that video to another compressed format. Doing so has the effect of amplifying compression artifacts, resulting in severe degradation of the video (and audio) quality.
9.9 Favorites:
In an effort to enhance user convenience, Dreamweaver has added the Favorites feature to each of the Asset categories covered above. That is, if one browses over to the Images list in the Assets panel, and finds that one has exactly three ka-jillion image files therein, it will of course prove tiresome searching for the images that one needs, especially those used frequently.
Fortunately, one can add those oft-used files to the Favorites area of the assets panel. This is as simple as a right-click on a selected item (or group of selected items), and selecting Add to Favorites from the context menu. Now, when one navigates to the Images list on the Assets panel, one can select between the radio buttons atop the panel labeled Files and Favorites, which correspond to all images in the file structure, or just those added to the favorites.
Of course, this feature apples to each of the asset lists, not just Images.
No comments:
Post a Comment