Dreamweaver mx instance: Picture Application Tips

Dreamweaver mx instance: Picture Application Tips

Speed up Picture downloads

If there are too many pictures in the page, it will affect the speed of browsing. Dreamweaver makes it easy to set up pre-loaded images, speed up the download of pictures, and make the site appear to users at the fastest speed.

The effect explanation establishes the file, pre-loading the picture, causes the picture to pre-download to the cache, speeds up the picture download speed. For the actual effect, please visit the "example 36-speed up image download" file in the "Dreamweaver MX 2004 100 Example" catalogue on CD-ROM.

Creative Ideas Open the Dreamweaver MX 2004 software New page, open the Tabs panel, and select the "Preload images" option in the behavior to speed up the download of the pictures.

Operation Steps

(1) Create a new file, as shown in Operation 36-1.

(2) Save the page and insert the picture. To not prompt for a relative path when inserting a picture, save the page as "36.htm" first. Then insert the picture you want to preload, as shown in 36-2.

Figure 36-2 Inserting a picture

(3) Add "preload image" function. Use the Dreamweaver behavior panel to add the pre-load images feature, shown in 36-3.

(4) Select the picture to preload, as shown in Operation 36-4.

Tip: If you have several large pictures on your site, you can click the + icon above the preloaded image to add multiple preloaded images, as shown in Figure 36-4.

(5) Save the file to complete the operation. This can speed up the download speed of the picture, so that users do not wait too long to browse the Web, which is very important to improve the effectiveness of the site.

Random AD Images

When browsing the Web page, visitors can find that dynamically updated AD images are more dynamic and attractive than static fixed images. How to make a random ad image in a webpage is a problem to be researched in this example.

Effect description When you browse the Web page, an ad image appears in the banner area of the page, as shown in 38-1. The ad image is then updated every two seconds, and the ad image appears in a random fashion, as shown in 38-2.

Creative ideas by using the Macromedia extension advance_random_images, you can easily complete the production of random ad images on your Web pages.

Operation Steps

(1) Install the plugin. Use the Commands | Extension Management command in the menu bar to bring up the Macromedia Extension Manager dialog box, which installs the advance_random_images extension, as shown in 38-3.

(2) Invoke command. Open the banner.htm file in the source folder of this instance, place the cursor where you want to insert the ad, and bring up the "advancedrandomimages" command, as shown in 38-4.

(3) Set the image. In the "Randomimages" dialog box that pops up, set the image Transform property to 38-5.

(4) Add a picture. Add the first image of your ad, shown in 38-6.

Tip: The images used in this example are placed in the banner folder in the footage folder of this instance.

(5) Then use the same method to add other pictures, add the completion of the click "OK" button to determine the operation, 38-7 is shown.

(6) Then save the page file and preview, the effect of the random ad image is produced. Readers can refer to the bannerok.htm effect file in this example footage folder to see if the result is correct. At this point the production of this example is completed.

This example of the technology is often used in various types of Web sites, such as several large domestic portals, almost on each of their pages can see these transformation ads, readers can refer to these content to practice.

Dreamweaver mx instance: Picture Application Tips