DW MX实例:图片应用技巧

2016-02-19 21:19 7 1 收藏

图老师小编精心整理的DW MX实例:图片应用技巧希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

【 tulaoshi.com - Web开发 】

  加快图片下载速度

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

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

  操作步骤

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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


  图 36-2  插入图片

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

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

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

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

  随机广告图片

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

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

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  操作步骤

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

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


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


  

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

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

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

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

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

来源:http://www.tulaoshi.com/n/20160219/1625898.html

延伸阅读
标签: Web开发
如今网页的排版格式越来越复杂,很多效果需要通过CSS来实现,Dreamweaver MX 2004在CSS功能设计上做了很大的改进。下面我们就来看看这些改进的地方。 一、属性面板的改进 Dreamweaver MX 2004在属性面板中增加了“Style”选项,我们在设计页面时所做的添加的字体、颜色、大小等样式,“Style”会将这些设计自动记忆生成“Style1...
标签: Web开发
Macromedia官方将在其他软件中内建Fireworks技术称为Fireworks技术,网上也称之为内建图片编辑器。Dreamweaver MX 2004给人的一个感觉就是与Macromedia公司其它产品的全面无缝集成,这样就大大缩短了开发人员的开发周期,提高工作效率。 以前的Dreamweaver中是没有图片处理功能的,即使你要处理也只能使用CSS中的相关滤镜进行一些效果...
标签: flash教程
    今天我们来一起看看 MX 2004在 使用 Element 方面的新功能。 Dreamweaver MX 2004版本中增加了Flash Element功能,这使Dreamweaver和Flash的关联更加紧密了。这个Flash Element究竟有什么特别的呢?它可以帮你方便快捷地制作一个Flash动画版本的图片浏览器!下面我们通过具体的实例来了解这个...
标签: Web开发
Dreamweaver MX 2004中对源代码编辑的操作功能也有一定的改进,下面我们来看看这些新的改动。 一、右键菜单 在源代码区域如果选中一个范围,点击右键菜单看到新增了“Selection”功能,在这个功能下包括了转换大小写、转换标签等等功能,如图1。 图1 二、Tag标签 在Tag标签的群组里,除了以前有的行为、CSS面板...
标签: Web开发
今天我们来一起看看Dreamweaver MX 2004在动态浏览器检测方面的新功能。 Dreamweaver MX 2004版本中,新增了多浏览器检测页面运行错误的功能。我们设计的页面,在某一种浏览器效果下可能正常运行,在其它浏览器中可能会报错,有时候连文字链接、版式都不统一了。为了避免这样的情况发生,2004 版本增加了支持多款浏览器检测功能。 ...

经验教程

761

收藏

71
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部