Assets Panel
Besides adding background images, you also can add images such as photos to your Web pages. To enhance your index.htm Web page, you will add two images. One image will be displayed in the upper-left part of the page, and the second image will be displayed to the right of the bulleted list. Dreamweaver has features to assist with placing and enhancing images. The Assets panel provides visual cues for your images, the invisible element feature provides placement control for the images, and the accessibility tools provide information for individuals with disabilities.
Assets are elements, such as images or Flash files, that you use in building a page or a site. The Assets panel, which is grouped with the Files panel, helps you manage and organize your Web site’s assets (Figure 2-18). This panel contains a list of all the asset types (images, colors, URLs, Flash and Shockwave files, movies, scripts, templates, and library items) within the selected local root folder. The Site option shows the assets in your site. The Favorites list shows only the assets you have selected and added to the list. The Assets panel in Figure 2-18 is resized to show all options.
You can insert most asset types into a document by dragging them into the Document window, using the Insert button at the bottom of the Assets panel, or using the Media command on the Insert menu. Also, you can either insert colors and URLs or apply them to selected text in Design view. Additionally, you can apply URLs to other elements in Design view, such as images. When an image file name is selected, a thumbnail of the image is displayed at the top of the Assets panel. You will use the Assets panel to insert the images into the Montana Parks Web pages.
Figure 2-18
Accessibility
When developing a Web page, the Web page developer needs to consider the full spectrum of visitors who might access the site. Dreamweaver provides accessibility tools that allow the Web site developer to create pages to meet the needs of all visitors, including those with disabilities. The four accessibility object tools included in Dreamweaver are form objects, frames, media, and images. This topic includes accessibility information relative to images. The three other objects are covered in later topics.
Consider accessibility.
Accessibility features let people with visual, auditory, motor, and other disabilities use Web sites easily. Prepare for providing accessible content on your Web pages by using the following guidelines:
• Set up the workspace for accessible page design. Make sure that Dreamweaver reminds you to enter accessibility information for objects such as images. Use the Accessibility category in the Preferences dialog box to select the Show Attributes When Inserting option.
• Enter accessibility attributes. When you insert an image, Dreamweaver prompts you to enter accessibility attributes such as text equivalents for the image. Electronic screen readers can then recite the text equivalents. Be sure to enter text that describes the image briefly but thoroughly.
When you insert an image, the Image Tag Accessibility Attributes dialog box is displayed (Figure 2-19). This dialog box contains two text boxes — one for Alternate text and one for Long description. Screen readers translate and recite the information you enter in both text boxes. You should limit your Alternate text entry to 50 characters or less so it is easy to remember. For a more detailed description of the image, create and save a text file and then add it as a link to the file. When the link is activated, the screen reader recites the text for visually impaired visitors. Clicking Cancel removes the dialog box and inserts the image. The Accessibility feature is turned on by default when you install Dreamweaver. To turn off the Accessibility feature, click Edit on the Application bar and then click Preferences. Click Accessibility in the Category column and then deselect the check boxes for the four attributes.
Figure 2-19
Invisible Elements
Dreamweaver’s Document window displays basically what you see in a Web browser window. It sometimes is helpful, however, when designing a Web page to see the placement of certain code elements. For example, viewing the Line Break code <br/> provides a visual cue regarding the layout. Dreamweaver lets you control the visibility of 13 different codes, including those for image placement, through the Preferences dialog box.
When you insert and then align an image in a Document window, Dreamweaver can display an invisible element marker that shows the location of the inserted image within the HTML code. This visual aid is displayed as a small yellow icon. When you select the icon, you can use it to cut and paste or drag and drop the image. When using invisible elements with images, however, the invisible element marker is not displayed if the image is aligned to the left. Dreamweaver provides the invisible element marker for 12 other elements, including tables, ActiveX objects, plug-ins, and applets. To hide all invisible elements temporarily, select Hide All on the View menu Visual Aids submenu or use CTRL+SHIFT+I.
To Set Invisible Element Preferences and Turn on Visual Aids
The following steps illustrate how to display the invisible element marker for aligned elements such as images and how to turn on invisible elements through the Visual Aids submenu command.
Figure 2-20
1
• Click Edit on the Application bar and then click Preferences to display the Preferences dialog box (Figure 2-20).
2
• Click Invisible Elements in the Category list to display the Invisible Elements options in the Preferences dialog box (Figure 2-21).
Figure 2-21
3
• Click the Anchor points for aligned elements check box to select this option, which makes it easier to align elements (Figure 2-22).
Figure 2-22
Q&A
Is it necessary for O me to display the invisible element markers when working with images?
No. You can work with images without displaying the invisible element markers. However, the markers help you locate and work with images on a Web page in Design view.
4
• Click the OK button in the Preferences dialog box to confirm the new setting and close the Preferences dialog box.
• Click View on the Application bar, point to Visual Aids, and then point to Invisible Elements on the Visual Aids submenu to highlight the command (Figure 2-23).
Figure 2-23
5
• If necessary, click Invisible Elements to add a check mark to the Invisible Elements command (Figure 2-24).
Figure 2-24
