Dreamweaver MX Example: Image Application Skills

Speed ​​up image downloads

If there are too many pictures in the web page, it will affect the browsing speed. Dreamweaver can easily set up preloaded images to speed up image downloads, allowing the site to appear in front of users as quickly as possible.

The effect description is to create a file and preload the image first so that the image is downloaded to the cache in advance to speed up the image download speed. For the actual effect, please browse the file "Example 36 - Speeding Up Image Download Speed" in the "Dreamweaver MX 2004 100 Examples" directory on the CD that comes with the book.

Creative Thoughts Open the new page of Dreamweaver MX 2004 software, then open the label panel, and select the [Preload Image] option in [Behavior] to speed up image downloading.

Operation steps

(1) Create a new file, the operation is shown in Figure 36-1.



(2) Save the page and insert the picture. In order not to prompt for relative paths when inserting pictures, first save the page as "36.htm". Then insert the image to be preloaded, as shown in Figure 36-2.


Figure 36-2 Insert picture

(3) Add "preload image" function. Use Dreamweaver's behavior panel to add the "preload image" function, as shown in Figure 36-3.

(4) Select the picture to be preloaded, and the operation is as shown in Figure 36-4.

Tip: If there are several large images on the site, you can click the [+] icon above [Preload Image] to add multiple preload images. The specific operation is the same as shown in Figure 36-4.

(5) Save the file to complete the operation. In this way, the download speed of images can be accelerated, so that users will not wait too long when browsing the web, which is of great significance for improving the performance of the website.

Random advertising images

When browsing a web page, viewers can find that dynamically updated advertising images on the web page are more dynamic and attractive than static, fixed images. How to create random advertising images in web pages is the issue to be studied in this example.

Effect Description When browsing a web page, an advertising image will appear in the banner area of ​​the web page, as shown in Figure 38-1. Subsequently, the advertising image is updated every two seconds, and the advertising image appears in a random manner, as shown in Figure 38-2.

Creative Ideas By using Macromedia's extension plug-in Advance_Random_Images, you can easily create random advertising images in web pages.

Operation steps

(1) Install the plug-in. Use the [Command] | [Extension Management] command in the menu bar to bring up the [Macromedia Extension Manager] dialog box and install the Advance_Random_Images extension, as shown in Figure 38-3.

(2) Call the command. Open the banner.htm file in the source folder of this example, place the cursor at the location where you want to insert the advertisement, and call up the [AdvancedRandomImages] command, as shown in Figure 38-4.

(3) Set the image. Set the image transformation properties in the [RandomImages] dialog box that pops up, as shown in Figure 38-5.

(4) Add pictures. Add the first advertising image, as shown in Figure 38-6.

Tip: The pictures used in this example are placed in the banner folder in the material folder of this example.

(5) Then use the same method to add other pictures. After the addition is completed, click the [OK] button to confirm the operation, as shown in Figure 38-7.

(6) Then save the page file and preview it, and the effect of the random advertising image will be created. Readers can refer to the bannerok.htm effect file in the material folder of this example to see whether the production result is correct. At this point, this example is completed.

The technology described in this example is commonly used in various websites. For example, on several large domestic portal websites, these transformation advertisements can be seen on almost every page. Readers can refer to these contents to practice more.