当前位置: 首页 > 图文教程 > 网页制作 > Dreamweaver > DW MX实例:图片应用技巧

Dreamweaver
Dreamweaver 限制访问的BUG
Dreamweaver 数据库路径的使用
用Dreamweaver做搜索表单
Dreamweaver 事件简述
[Dreamweaver教程]Meta标签详解
提高 Dreamweaver行为全接触(5)
提高 Dreamweaver行为全接触(1)
提高 Dreamweaver行为全接触(3)
提高 Dreamweaver行为全接触(2)
提高 Dreamweaver行为全接触(4)
Dreamweaver MX2004视频宝典教程(7) Dreamweaver安装与启动
Dreamweaver MX2004视频宝典教程(9) 工作区结构
Dreamweaver MX2004视频宝典教程(5) 配色原则
Dreamweaver MX2004视频宝典教程(4) 网页布局
Dreamweaver MX2004视频宝典教程(8) Dreamweaver文档使用
Dreamweaver MX2004视频宝典教程(10) 菜单概述
Dreamweaver MX2004视频宝典教程(3) 网页的基本元素
Dreamweaver MX2004视频宝典教程(6) HTML与渲染
Dreamweaver MX2004视频宝典教程(1) 课程简介
Dreamweaver MX2004视频宝典教程(2) 网站与网页的概述

Dreamweaver 中的 DW MX实例:图片应用技巧


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-23   浏览: 96 ::
收藏到网摘: n/a

  加快图片下载速度

  如果网页中有过多的图片,就会影响浏览的速度。 Dreamweaver 可以轻松设置预载图片,加快图片下载速度,让站点以最快的速度出现在用户面前。

  效果说明 建立文件,先预载图片,使图片预先下载到缓存中,加快图片下载速度。实际效果请浏览随书光盘中《 Dreamweaver MX 2004 100 例》目录下的《实例 36 -加快图片下载速度》文件。

  创作思想 打开 Dreamweaver MX 2004 软件新建页面,再打开标签面板,在【行为】中选择【预先载入图像】选项,加快图片下载速度。

  操作步骤

  ( 1 )新建文件,操作如图 36-1 所示。

  
Dreamweaver


  ( 2 )保存页面并插入图片。为了在插入图片时不提示相对路径,先保存页面为“ 36.htm ”。然后插入要预载的图片,如图 36-2 所示。

  
Dreamweaver
图 36-2  插入图片


  ( 3 )添加“预先载入图像”功能。使用 Dreamweaver 的行为面板添加“预先载入图像”功能,如图 36-3 所示。

  ( 4 )选择要预载的图片,操作如图 36-4 所示。

  
Dreamweaver



  提示:如果站点上有几张大图片,可以单击【预先载入图像】上方的【 + 】图标,添加多张预载图像,具体操作与图 36-4 所示相同。

  ( 5 )保存文件完成操作。这样就可以加快图片的下载速度,让用户在浏览网页时不会等太久,这对于提高网站的效能具有非常重要的意义。

  随机广告图片

  浏览者浏览网页时可以发现,网页中动态更新的广告图片比静态固定的图像更具有活力和吸引力。如何制作网页中的随机广告图片是本实例所要研究的问题。   

  效果说明 在浏览网页时,网页的 banner 区域将出现一张广告图片,如图 38-1 所示。随后每两秒更新一次广告图片,而且广告图片是以随机的方式出现的,如图 38-2 所示。

  

Dreamweaver



  创作思想 通过使用 Macromedia 的扩展插件 Advance_Random_Images ,可以轻松地完成网页中随机广告图片的制作。

  操作步骤

  ( 1 )安装插件。使用菜单栏中的【命令】|【扩展管理】命令调出【 Macromedia 扩展管理器】对话框,安装 Advance_Random_Images 扩展,如图 38-3 所示。

  

Dreamweaver



  ( 2 )调用命令。打开本实例源文件夹中的 banner.htm 文件,将光标置于要插入广告的位置上,并调出【 AdvancedRandomImages 】命令,如图 38-4 所示。

  

Dreamweaver



  ( 3 ) 设置图像。 在弹出的【 RandomImages 】对话框中对图片变换属性进行设定,如图 38-5 所示。

  

Dreamweaver



  ( 4 )添加图片。添加第一张广告图片,如图 38-6 所示。

  

Dreamweaver



  提示:本实例所用到的图片放于本实例素材文件夹中的 banner 文件夹中。

  ( 5 )接着用同样的方法添加其他图片,添加完成后单击【 OK 】按钮确定操作,如图 38-7 所示。

  

Dreamweaver



  ( 6 )然后保存页面文件并进行预览,随机广告图片的效果就制作出来了。读者可参考本实例素材文件夹中的 bannerok.htm 效果文件,看制作的结果是否正确。至此本实例制作完成。

  本实例所讲的技术常用于各类的网站中,如国内几个较大的门户网站上,几乎在他们的每个页面中都可看到这些变换广告,读者可参考这些内容来多加练习。