片是网页上不可缺少的元素,在网页上放置适当数量和大小的图片可以使网页显得更加生动和活泼,但是,在网页上使用图片也有一些问题和技巧需要注意,由于Dreamweaver是当前最流行的可视化网页制作工具,所以这里就借Dreamweaver3.0对这些方面作一点儿探讨。
1:关于图片的格式
严格地说,在网页上放置何种格式的图片对于Dreamweaver3.0来说没有太大的关系,因为任何一种网页制作工具用的几乎都是Jpg和Gif格式的图片,当然,Dreamweaver3.0也不例外,这是因为Jpg和Gif格式的图片体积小,易于在网上传输,但两者还是有区别的,Jpg图片虽然没有Bmp图片那样多的颜色数,但它的显示效果还是比Gif图片理想一点,所以网页上比较大的图片用的一般都是Jpg格式,而256色的Gif图片也有它的优势:Gif图片可以将图片中的背景设为透明色,以便更好地与网页融为一体;Gif图片最大的优点是它能够在一幅图片中内嵌多幅图片,并设置一定的时间间隔让这多幅图片循环交替显示,以此达到动画的效果,由着Gif图片的这些特点,它比较多地用在网页上显示面积比较小的图片上,比如导航栏中的标题、一些小动画,等等。
如果过多地使用动态的Gif图片,可能会因为占用太多的资源而使网页浏览速度变慢,因为动态的Gif图片文件的体积还是比较大,其实我们可以使用Dreamweaver3.0中的时间线来做动画――用这种方法制作的动画是建立在普通的超文本或脚本语言上的,所以不用担心“体积”问题,另外时间线动画可以比Gif动画有多得多的动画效果,制作时间线动画时首先要选中一幅图片或一个层(在Dreamweaver3.0中,时间线只支持图片和层),然后访问主菜单Modify中的Timeline子菜单下的级联菜单Add Object to Timeline,打开时间线检测器,即可在其中制作动画。
对于需要鼠标感应,在两幅图片之间作“翻转”的动画来说,还有比用时间线检测器更简单的方法:打开Insert菜单,选择其下的Rollover Image子菜单,在出现的对话框中的Original Image和Rollover Image文本框中设置两幅图片的路径,在When clicked,Go To URL文本框中,还可以设置单击图片时跳转的超链接,其实这种方法就是为其中一幅图片设置了一个事件行为,如果你此时打开Behaviors检测器窗口,就会发现在窗口中已建立了两个行为。
现在对于网上图片的使用已不囿于Jpg和Gif两种格式了,PNG图片正在悄悄崛起,它是Dreamweaver的同门师弟Fireworks生成的图片格式,PNG图片是专为网页图片而“生”的,因此,在网页上它比Jpg和Gif图片有更强的生命力。
2:关于图片的编辑
在Dreamweaver3.0中,编辑图片可以使用外挂的图片处理软件,当然事先要设定:打开Edit菜单中的Preferences子菜单,在Category列表中选择External Editors,在右下角左边的Extensions列表框中选择.gif ;在右边的Editors列表框的上方单击加号按钮,出现一个文件选定框,指定一个你喜欢的图片处理软件,这样做的意义是为后缀名为gif的文件连接一个编辑软件,以后只要在gif图片上单击鼠标右键,在出现的快捷菜单的Edit With菜单项中,即可找到你指定的图片处理软件,用类似的方法可以为jpg图片也指定相应的图片处理软件。
3:关于图片的属性
Dreamweaver3.0中的图片都有一个属性窗口,在此窗口中可以设置图片的各种属性。值得一提的是,改变属性窗口中的W和H参数固然可以在视觉上调整图片的大小,但这种改变却不会影响浏览时图片的下载速度,也就是说,如果你通过W和H参数调小了图片的宽度和高度,但在浏览时图片的显示速度并不会因此而改善,这是因为浏览器下载图片时总是按照图片的原始大小工作的,至于调整大小后的图片显示,则是在下载之后的事儿,所以要使图片的下载速度快一些,关键不是在网页设计时调整图片的大小,而是应该事先就控制原始图片的大小;另外,那些过于“花哨”的图片的下载速度也会慢一些,为了不使浏览者在图片下载完成前因为等得不耐烦而跑掉,你可以事先制作一幅与原始图片大小、内容相同但颜色数少一点,最好为黑白的图片,把它赋给属性窗口中的Low Src参数,这样一来,在颜色数较多的图片下载完成之前,浏览器会以较快的速度先行显示Low Src参数指定的图片,这样既可以使浏览者避免等得过于焦急,又可使浏览者以最快的速度知晓目标图片的内容;有一些浏览者为了加快浏览速度,特地在浏览器的设置中将“允许图片下载”的选项关掉,这样网页上原来放置图片的地方将会是“白板”一块,为了不使这种不雅的情况出现,可以在这些“白板”处放置一些说明文字,这些文字可以写在图片属性窗口中的Alt文本框内,在浏览者的鼠标指针滑过图片上方时,Alt文本框内的文字还会出现在提示框内。
4:关于图像地图
所谓图像地图,就是在一幅图片上,存在多个区域,而每个区域都有自己的链接,有时候,这些区域也被称为“热点”(hotspot),在Dreamweaver3.0中制作图像地图很简单。
选中一幅图片,打开它的属性窗口,在窗口左下角中你会发现有一个Map文本框和三个小按钮――它们就是用来作图像地图的:在Map文本框中键入图像地图的名字,第一个小按钮可以在图片上画出一个矩形“热点”;第二个小按钮可以在图片上画出一个圆形“热点”;第三个小按钮可以在图片上画出一个不规则形状的“热点”;选中任何一个“热点”,属性窗口会变化,在窗口的Link文本框中可以为当前“热点”指定一个超链接
本文作者:新闻热点
疑难解答