如何使用DW工具给图片添加热点 用DW怎么在图片上加热点
\u5728Dreamweaver\u4e2d\u5982\u4f55\u63d2\u5165\u70ed\u70b9\u5728dreamweaver\u4e2d\u53ef\u4ee5\u7ed9\u56fe\u7247\u6dfb\u52a0\u70ed\u70b9\u3002
1\u3001\u5728\u8981\u6dfb\u52a0\u70ed\u70b9\u7684\u56fe\u7247\u4e0a\u70b9\u51fb\uff0c\u70b9\u51fb\u540e\u8f6f\u4ef6\u4e0b\u65b9\u4f1a\u663e\u793a\u56fe\u7247\u673a\u5173\u5c5e\u6027\uff08\u5de6\u4e0b\u90e8\u5206\u201c\u5c5e\u6027\u201d\uff09\uff0c\u4f1a\u770b\u5230\u5c5e\u6027\u9762\u677f\u4e0a\u201c\u6c34\u5e73\u8fb9\u8ddd\u201d\u8fd9\u4e00\u884c\u5de6\u8fb9\u6709\u4e00\u4e9b\u7bad\u5934\u3001\u65b9\u6846\u3001\u5706\u5f62\u3001\u4e0d\u89c4\u5219\u591a\u8fb9\u5f62\uff0c\u8fd9\u4e9b\u5c31\u662f\u7528\u6765\u64cd\u4f5c\u6dfb\u52a0\u70ed\u70b9\u7684\u3002
2\u3001\u7528\u4e0a\u9762\u7684\u8fd9\u4e9b\u65b9\u6846\u3001\u5706\u5f62\u3001\u591a\u8fb9\u5f62\u53bb\u9009\u62e9\u4f60\u5bf9\u5e94\u7684\u56fe\u7247\u533a\u57df\uff0c\u6bd4\u5982\u4f60\u7684\u56fe\u7247\u4e2d\u8981\u7ed9\u4e00\u4e2a\u5706\u5f62\u7684\u90e8\u5206\u52a0\u70ed\u70b9\uff0c\u5c31\u7528\u5706\u5f62\uff0c\u7136\u540e\u5728\u4f60\u7684\u9009\u4e2d\u7684\u56fe\u7247\u4e0a\u753b\u4e00\u4e2a\u5706\u5f62\uff0c\u5708\u4e2d\u5bf9\u5e94\u52a0\u70ed\u70b9\u7684\u90a3\u90e8\u5206
3\u3001\u9009\u4e2d\u533a\u57df\u540e\u5c31\u53ef\u4ee5\u6dfb\u52a0\u94fe\u63a5\u4e86\uff0c\u5728\u4e9b\u7bad\u5934\u3001\u65b9\u6846\u3001\u5706\u5f62\u8fd9\u4e9b\u7684\u53f3\u4e0a\u4e00\u70b9\u6709\u4e24\u884c\uff0c\u4e00\u4e2a\u662f\u201c\u94fe\u63a5\u201d\uff0c\u4e00\u4e2a\u662f\u201c\u76ee\u6807\u201d\uff0c\u94fe\u63a5\u5c31\u662f\u4f60\u8981\u6dfb\u52a0\u7684\u5730\u5740\uff0c\u76ee\u6807\u662f\u4f60\u60f3\u8bbe\u7f6e\u6253\u5f00\u7a97\u53e3\u7684\u65b9\u5f0f\uff0c\u4e00\u822c\u9009\u62e9\u6700\u4e0a\u4e00\u4e2a-blank\uff0c\u662f\u8868\u793a\u5728\u65b0\u7a97\u53e3\u4e2d\u6253\u5f00\u3002
\u57fa\u672c\u8fd9\u6837\u5c31\u7b97\u5b8c\u6210\u4e86\uff0c\u633a\u7b80\u5355\u7684\uff0c\u5982\u679c\u8fd8\u4e0d\u6e05\u695a\u53ef\u4ee5\u8ffd\u95ee\u3002
\u63d2\u5165\u56fe\u7247\u540e\uff0c
\u9f20\u6807\u70b9\u51fb\u56fe\u7247\uff0c
\u6253\u5f00\u201c\u5c5e\u6027\u201d\u9762\u677f\uff0c
\u91cc\u9762\u6709\u4e2a\u201c\u5730\u56fe\u201d\u9009\u9879\uff0c
\u5c31\u662f\u70ed\u533a\u4e86
准备一张需要给不同区域添加不同热点的图片。
二、插入图片:
打开Dreamweaver,新建一个网页,将图片插入到页面中。
三、找到地图工具:
单击鼠标左键点击图片,这时候软件下方的属性面板就会变成和图片相关的属性,注意看左下角部分,如图一中的红色框内所示。
注:如果没有上图显示的热点地图工具,是地图工具属性隐藏了,可以点击属性面板右侧的三角符号打开,如下图:
四、绘制热点:
注意方块、圆形、多边形三个小图标,它们就是我们要用的“图片热点”工具,不同的热点工具可以绘制出不同形状的热点区域。
先点击方块按钮,将鼠标移动到图片上,这时候鼠标就变成了十字,在你想加链接的地方画一个方块。添加热点后的图片区域会出现一个浅蓝色蒙版,意味着该区域已经添加了热点。依次添加其他区域的热点。
五、给热点添加链接:
热点区域画好后,下面的属性面板就会变成该热点区域的属性,如下图:
“链接”就是点击此处跳转的链接地址;
“目标”就是点击此处时窗口的打开方式;
“替换”就是鼠标悬浮在该区域时提示的文字。一般使用"_blank",指超链接将在新窗口打开。
注:可以采用画一个区域,添加对应的连接,也可以依次把所有的区域热点画完,然后点击热点区域,依次添加对应的连接。初学者建议一个一个的添加。
六、修改热点:对热点区域进行拖动或者局部调整
如果需要修改热点区域,或者需要进行微调,如中国地图添加热点,不可能把所有的热点区域都做到刚好覆盖对应的区域,那就需要对已经添加热点的区域进行调整。
点击热点区域,热点区域四周会出现浅蓝色的点。光标放在浅蓝色的点,点击鼠标左键,即可调整热点区域的大小。
七、对个图片添加热点:
如果一个页面中有多个图片需要添加热点,那么久需要给每一张图片对应的热点设置不同的热点名称,如图示,地图(M)处的文本框中的字符就是当前热点的名称。
可以使用map1、map2、map3。。。也可以使用不同图片的内容对热点进行命名,如top_map,foot_map,act_map。。。总之,不同图片的热点名称不同即可。
图呢?需要天马行空的想象力啊
绛旓細娣樺疂鍥剧墖dw璁剧疆瓒呴摼鎺ョ殑鏂规硶鏄細1銆佹墦寮Adobe Dreamweaver锛屾柊寤轰竴涓狧TML鏂囦欢锛2銆佺偣鍑绘彃鍏ュ浘鍍忥紝鎴栬呮寜蹇嵎閿瓹trl+Alt+I锛3銆佸湪娣樺疂绌洪棿閲岄潰澶嶅埗瑕佸紕鐨勫浘鐗囧湴鍧閾炬帴锛岀矘璐村湪URL閲岄潰锛岀偣鍑荤‘瀹氾紱4銆佺偣鍑讳唬鐮佷笂鏂圭殑鎷嗗垎锛岃繖鏍峰氨鑳界湅鍒拌淇敼鐨勫浘鐗囧湪鍙宠竟锛岀偣鍑诲浘鐗囷紝涓嬮潰浼氬脊鍑轰竴涓宸ュ叿锛5銆佺偣鍑诲乏涓嬭鐑偣...
绛旓細dw鎻掑叆鍥剧墖鍚庯紝鍦ㄨ璁℃ā寮忓崟鍑讳竴娆″浘鐗囷紝涓嬮潰灏变細鍑虹幇鐢荤儹鍖虹殑宸ュ叿浜
绛旓細1銆侀鍏堟墦寮dw锛岀偣鍑昏璁★紱2銆佺劧鍚庣敤榧犳爣鐐瑰嚮浣犳兂瑕佸姞鐑偣鐨鍥剧墖锛岀偣鍑婚変腑浠ュ悗锛岀敤榧犳爣鐐瑰嚮宸︿笅瑙掑垝鐑偣鐨勪竴绉嶇煩褰宸ュ叿锛3銆侀夋嫨宸ュ叿浠ュ悗灏卞彲浠ュ湪瑕佸姞鐑偣鐨勫浘鐗囦笂鍒掔儹鐐逛簡锛4銆佸垝涓婄儹鐐逛互鍚庡湪宸︿笅瑙娣诲姞涓婇摼鎺ャ傚湪html涓樉绀哄涓嬶細 ...
绛旓細DW鎻掑叆涓寮鍥剧墖锛岀獥鍙-灞炴ч潰鏉垮嬀閫夛紝鐐瑰嚮鍥剧墖锛屽睘鎬宸ュ叿鏍忎笅鏂瑰氨浼氬嚭鐜 鈥滅粯鍒剁煩褰鐑偣鈥濆伐鍏
绛旓細閫変腑DW閲岄潰鐨勫浘灞炴ф閲屾湁涓変釜锛傝摑鑹诧紓鐨勬寜閽紝涓涓槸鍥涜竟褰紝涓涓槸鍦嗗舰锛屼竴涓槸澶氳竟褰紟杩欏氨鏄鐑偣锛庨夋嫨浠绘剰涓鐐规寜閽紝鍐嶅埌鍥剧墖鏄崟鍑婚紶鏍囧乏閿紝妗嗗嚭鐑偣锛嶰K 鐑偣鍙互鍋氳秴閾炬帴銆傚浜嗗幓浜嗐傚仛娣樺疂鏄繀澶囩殑锛
绛旓細浣犺蒋浠舵墦寮涓涓綉椤靛悗锛岄変腑璇ョ綉椤典腑鐨勪竴涓鍥剧墖锛屽氨鏄笅鏂瑰睘鎬ч潰鏉跨殑宸︿笅瑙掞紝浼氬嚭鐜板渾褰紝鏂瑰舰鍜屽杈瑰舰涓変釜鍥炬銆傞偅涓氨鏄鐑偣銆
绛旓細鎶婁綘鐨鍥剧墖浠モ滄彃鍏ュ浘鐗団濈殑鏂瑰紡璋冪敤鍒拌〃鏍间腑锛岀劧鍚庣敤宸︿笅瑙掔殑 鐑偣宸ュ叿缁樺埗鐑偣銆傝儗鏅槸涓嶅彲浠ョ粯鍒剁殑銆
绛旓細浣犳爣娉ㄧ殑鍥剧墖宸︿笅瑙掓湁涓涓湴鍥炬寚鏍囦竴鏍风殑閫夐」锛屽鍥炬垜鏍囨敞鐨勫湴鏂癸紝鐐瑰嚮灏卞彲浠ラ夋嫨鐑偣鍖哄煙 鑷繁妗嗛
绛旓細鐢╠reamweaver杩涜鑷畾涔夋窐瀹濊淇楠ゅ涓嬶細1.鎶婂浘鐗囦笂浼犳窐瀹濈殑鍥剧墖绌洪棿锛2.鐢―reamweaver鏂板缓HTML鏂囦欢锛屾妸鍥剧墖娣诲姞杩汬TML鏂囦欢閲岋紝澶嶅埗娣樺疂鍥剧墖绌洪棿鐨勫浘鐗囧湴鍧鏇挎崲鐩稿搴旂殑鍥剧墖閾炬帴锛屽苟娣诲姞鐑偣鍜岃秴閾炬帴锛3.杩涘叆娣樺疂鈥滃簵閾鸿淇濆悗鍙帮紝娣诲姞涓涓嚜瀹氫箟妯″潡锛屾妸Dreamweaver閲岀殑浠g爜鐩存帴澶嶅埗绮樿创杩涜锛岀偣鍑荤‘璁わ紱4....
绛旓細鐑偣浠g爜涓湁usemap鍜宮ap name 杩欎袱娈碉紝浣犲湪涓や釜鍙屽紩鍙烽噷鐨#map鍜宮ap鍚庨潰鍔犱笂鑻辨枃鎴栬呮暟瀛楋紝鍓嶅悗鍔犵殑鍐呭瑕佷竴鑷淬 濡傛埅鍥鹃噷闈㈡璧锋潵鐨勪袱閮ㄥ垎灏辨槸鑷鍔犱笂鍘荤殑銆 鏈鍚庡啀澶嶅埗浠g爜璇曡瘯銆 瑕佹槸閾炬帴杩樻湁闂锛屽苟涓斾綘鐨勮嚜瀹氫箟閭d竴鏍忛噷鏈夊ソ鍑犲潡閮藉仛浜嗙儹鐐逛唬鐮侊紝姣忎竴鍧椾唬鐮侀噷鐨勯偅涓ら儴鍒嗛兘瑕佹敼锛屼笉鍚屽潡...