网页多幅图片显示妙法－Dreamweaver技巧

有些主页包含大量展示性的图片，并且要显示在特定位置上。在设计主页时，如果将每张图片放在新开窗口中，浏览者就经常需要关闭新打开的窗口，这样很不方便；也可以将所有图片都放在同一窗口中的不同层中隐藏起来，需要谁就显示谁，但这种做法又会使打开该网页的时间猛增（即使是隐藏的图片也要打开时一并读入）。笔者曾设计一个有20幅图片的网页，采用此法，在28.8KB/s的连接速率下，显示打开时间竟然有208秒。后来，笔者无意中发现，设置分层文本可以解决这个问题。利用“行为”面板，可以动态设置某层中的文本或替换层中的内容，新设置的内容可以是任意类型的HTML，因此，利用该“动作”可动态地显示各种信息，当然包括图片。最为关键的是，利用这一技巧，可以做到需要显示哪幅图片，就可将其调出装入特定的层中，即用即读，避免一次装入，占用大量时间。笔者上面提到的208秒网页，经过这样处理后，打开只需18秒。具体做法如下：
　　1.新建层,命名为：ImgeLayer，此层将作为图片的展示窗口；

　　2.将要显示的图片分别制作缩略图，并摆放在页面上，以便点击此略图，并相应在ImgeLayer中显示源图。假设略图为：SImge1、SImge2、SImge3……，分别对应源图：Imge1、Imge2、Imge3……

　　3.选中SImge1，打开“行为”面板，确保Events For下拉按钮显示为IE 4.0（或IE 5.0），点击“+”按钮，在弹出的“动作”选单中，选“设置文字”项下的“设置图层文字”，打开设置图层文字对话框，在图层下拉列表中选ImgeLayer，在新的HTML输入框中输入：〈img src="imge1.jpg" width="300" height="200"〉(读者可根据实际情况，调整文件路径及图形尺寸)。

　　4.其他图片的设置方法同上。

　　需要注意的是，上面提到的设计方法需要IE 4.0以上浏览器支持。