• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 2. Working with Graphics > Inserting an Image from the Assets Panel

Inserting an Image from the Assets Panel

You may find it difficult to manage all your images, especially if you are working on a large site. The Assets panel provides a way for you to keep track of those images. Before you begin the following exercise, make sure that the Assets panel is open. It is in the Files panel group. If the Files panel group is not visible, choose Window > Assets.

Open the Files panel group. On the Macintosh, the Assets panel is the only panel in the Files panel group, so you will not see the Assets tab. In Windows, you will need to select the Assets panel from the Files panel group. Click the Images button located at the top of the column of buttons on the left side of the Assets panel (or the Files panel group if you are on the Macintosh).

The other buttons represent different types of assets that may be available to your site, including colors, which you used in Lesson 1.

You can work with the Assets panel in two ways: view it with the Site list, which gives you a complete list of the images in your site; or view it with the Favorites list, which allows you to add images.


You can also open the Assets panel by choosing Window > Assets. On the Macintosh, the Files panel group contains only the Assets panel, so you will not see the Assets tab even though you have actually opened the Assets panel.

Click the Site button at the top of the Assets panel.

All images within the site are shown in the Site Assets window. The images appear in this window automatically, whether or not they are used in any document. It may take a few seconds for the panel to create a catalog of the image assets available for your site. If you haven't created a site cache for this site, the Assets panel prompts you to do so; the Assets list cannot be created without a site cache.

If you add a new asset to your site, it might not appear in the Assets panel immediately. To update the panel to match all the images in your site, you need to refresh the site catalog. To do so, click the Refresh Site List button in the bottom right corner of the Assets panel.

Insert a paragraph break after the first paragraph by pressing Return (Macintosh) or Enter (Windows). Find the ptarena_lens.jpg graphic in the Assets panel that is located in the Lesson_02_Graphics/Images folder and drag it to the document between the first and second paragraphs.

You may see multiple copies of the same images in the Assets panel. This is due to duplicates of lesson files that are contained in the Completed folders for each lesson, and the fact that you will be using certain files many times throughout the course of this book. On your own sites, you probably will not have this situation, unless you duplicate files in each folder.


Alternatively, you can place the insertion point in the document, select the image in the Assets panel, and click the Insert button.

The image appears in the document window.


This photographic image was saved as a JPEG. The same image would appear posterized if saved as a GIF image, because all of the different shades would be mapped to only a few colors. In this case, JPEG was the best option.

Select the image you just inserted. In the image-name text field of the Property inspector, type lightsource. In the Alt text box, type Point Arena Light Source Photo. Define a border of 1 pixel.

Giving names and <alt> tags to your images as you insert them will save you time and make it easier to work with them in Code View later, if necessary.

Center the ptarena_lens.jpg image. Create a line break after the image and type the following: (photo above: The light source inside the 1st order Fresnel lens in Point Arena Lighthouse, California).

Providing captions for your images will help viewers understand them in the proper context. The caption will be centered, because it is considered to be in the same paragraph block as the image above.

Use the Property inspector to apply the following text formatting to the text: the font should be Verdana, the size should be –2, and the color should be #333333.

In this case, you are fading the text and making it smaller in order to subtly differentiate it from the body text of the document.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint