怎样在Dreamweaver中制作鼠标掠过时图片变大

当鼠标离开图像时,图像就恢复原图,这样的效果在Dreamweaver中可轻松实现我,下面我们一起来看看怎么制作的吧!​
 
操作步骤:
1、打开Dreamweaver,先修改一下页面属性,将页面修改为灰色的,适合图片展示
 
2、打开布局属性,我们添加一个apdiv​,用来盛放我们的图片
 
3、将该apdiv设置宽度和高度分别为800和299​,将溢出设置成hidden,这样图片放大以后不会影响整体布局
 
​4、接着再添加一个apdiv,设置宽度和高度,位置放在第一个apdiv的中间,如图所示
 
5、接着在插入一个1行5列的表格,用来放置五张照片​,表格宽度设置成100%
 
​6、插入五张图片,如图所示,这样就形成了一个基本的图片展示栏​,接着要做图片经过的时候的放大效果。
 
​7、选择一个图片,在属性栏,给其添加一个id,比如im1,
 
​8、接着给图片添加行为,如图所示,点击添加按钮,打开一个列表,选择【改变属性】​
 
​9、打开改变属性的对话框,选择元素类型为img,ID为刚才设置的im1,属性选择【输入】,填写width,这是图片的宽度属性,新的值设置为300
 
​10、将触发行为修改为onmouseover,也就是鼠标放到图片上面的时候,就会将图片的宽度改为300​
 
​11、接着再添加一个行为,属性设置如图所示,目的是让鼠标放在上面的时候,高度改为150​
 
​12、还有两个行为要添加,这里就不讲了,按照上面的方法,目的是当鼠标离开图片的时候,让图片恢复到原来的大小,如图所示:​
 
​13、好了,给所有的图片添加这四个行为,这样当鼠标放到上面的时候就看到下面的第一幅图,当鼠标离开的时候就看到下面第二幅图​
 
Adobe
Dreamweaver
CS5下载:
软件名称:Adobe
Dreamweaver
CS5简体中文版 
大小:481.41MB版本:CS5简体中文版类别:设计软件
语言:中文使用平台:Win_xp/Win7/Win8/Ubuntu



  • 濡備綍鍦―reamweaver涓鎻掑叆琛ㄦ牸
    绛旓細涓銆佷娇鐢ㄥ伐鍏凤細姝e父浣跨敤鐨勭數鑴戜竴鍙般Dreamweaver 浜屻佹柟娉曟楠わ細1銆佹墦寮DW杞欢锛屾柊寤轰竴涓狧TML鏂囨。锛屽涓嬪浘鎵绀 2銆佹垜浠厛鎶婃爣棰樹慨鏀逛竴涓嬶紝濡備笅鍥炬墍绀恒3銆佸湪銆愩戜腑闂达紝鎴戜滑鎸夊洖杞︼紝澶氭寜鍑犳锛屼竴浼氳〃鏍煎氨鎻掑叆鍒拌繖閲岋紝濡備笅鍥炬墍绀恒4銆佺偣鍑汇愭彃鍏ャ--銆愯〃鏍笺戯紝濡備笅鍥炬墍绀恒5銆佽緭鍏ャ愯銆戙愬垪銆戠瓑鍙...
  • 濡備綍鍦―reamweaver涓寤虹珛绔欑偣
    绛旓細1.鍦ㄦ湰鍦扮‖鐩樹笂寤虹珛涓涓敤鏉ュ瓨鏀剧珯鐐圭殑鏂囦欢澶癸紝杩欎釜鏂囦欢澶瑰氨鏄湰鍦扮珯鐐圭殑鏍圭洰褰曘2.鍚姩Dreamweaver锛屾墽琛屸滅珯鐐>绠$悊绔欑偣>鏂板缓>绔欑偣鈥濊彍鍗曞懡浠ゃ3.鍦ㄥ脊鍑虹殑濡傚浘鎵绀虹殑绔欑偣瀹氫箟瀵硅瘽妗嗕腑璁剧疆鏂板缓绔欑偣鐨勫弬鏁般傞粯璁ょ姸鎬佷笅锛屾縺娲荤殑鏄滈珮绾р濋夐」鍗★紝骞朵笖椤垫涓滃垎绫烩濆垪琛ㄩ変腑鐨勬槸鈥滄湰鍦颁俊鎭濄4.绔欑偣...
  • 濡備綍鍦―reamweaver涓鎻掑叆琛ㄦ牸
    绛旓細鐒惰岋紝閴翠簬琛ㄦ牸鐨勪紭鐐圭‘瀹炲緢澶氾紝鎵浠ユ垜浠粛鐒堕渶瑕佺啛缁冪殑鎺屾彙瀹冦 鎻掑叆琛ㄦ牸 鍦ㄨ蒋浠惰彍鍗曟爮涓偣鍑烩滄彃鍏モ--琛ㄦ牸锛屾垨鑰呭湪鎻掑叆宸ュ叿鏍忎腑鈥滃父鐢ㄢ濋」涓偣鍑烩滄彃鍏ヨ〃鏍煎浘鏍団濓紙鍥句竴锛夛紝鍦ㄥ脊鍑虹殑鎻掑叆琛ㄦ牸瀵硅瘽妗嗕腑瀹氫箟琛ㄦ牸鍐呭锛堝浘浜岋級銆 鎻掑叆琛ㄦ牸瀵硅瘽妗嗗垎涓夐儴鍒嗭紝绗竴閮ㄥ垎瀹氫箟琛ㄦ牸澶у皬锛屽嵆琛ㄦ牸灏哄锛涚浜岄儴鍒嗗畾涔...
  • 鍦╠reamweaver涓庝箞璁剧疆,鎵嶈兘璋冭瘯asp缃戦〉?
    绛旓細鎬庝箞璁剧疆瀹冧篃涓嶈兘杩愯ASP,瀹冨彧鏄竴涓紑鍙戠幆澧,鏈韩涓嶅惈ASP杩愯鎵闇鐨勮剼鏈紩鎿庛備綘鍙互涓嬭浇涓皬鏃嬮ASP鏈嶅姟鍣ㄦ潵璋冭瘯,鍦╠reamweaver鏂板缓绔欑偣绗竴姝ョ殑鏃跺欐妸鈥滄偍鐨勭珯鐐圭殑HTTP鍦板潃(URL)鏄粈涔?鈥濅竴椤逛腑濉啓鈥渉ttp://127.0.0.1鈥,濡傛灉浣犱慨鏀逛簡榛樿绔彛,灏卞啓鈥渉ttp://127.0.0.1:浣犵殑绔彛鍙封濆湪绗笁姝ヤ腑,閫夋嫨鈥滃湪鏈...
  • 濡備綍鍦―reamweaver涓寤虹珛绔欑偣
    绛旓細璁剧疆姝ラ濡備笅锛1銆侀鍏堝皢鎵鏈夌浉鍏崇綉椤垫枃浠跺拰鏂囦欢澶归兘澶嶅埗鍒颁竴涓柊寤虹殑鏂囦欢澶逛腑锛屾湰渚嬩负D鐩樻祴璇曟枃浠跺す锛2銆佸惎鍔Dreamweaver锛岀偣鍑荤珯鐐硅彍鍗曪紝鐐瑰嚮鏂板缓绔欑偣鍛戒护锛3銆佷负绔欑偣鍛藉悕锛寀rl鍙殏涓嶅~鍐欙紝鐐瑰嚮涓嬩竴姝ワ紱4銆佹槸鍚﹂噰鐢ㄦ湇鍔″櫒鎶鏈牴鎹疄闄呰繘琛岄夋嫨锛岀偣鍑讳笅涓姝ワ紱5銆佺偣鍑诲悗绔枃浠跺す鎸夐挳锛岄夋嫨棰勫鐨凞鐩樻祴璇...
  • 濡備綍鍦―reamweaver涓鎻掑叆琛ㄦ牸
    绛旓細宸茬粡杈规銆佸唴杈硅窛 4 绗洓姝 鎴愬姛鎻掑叆琛ㄦ牸鍚庯紝鍦╤tml浠g爜涓氨浼氳嚜鍔ㄧ敓鎴愪唬鐮併傚叾涓敞鎰忓埌涓や釜鍙傛暟锛宑ellspacing鎺у埗杈规鍍忕礌锛宑ellpadding鎺у埗鍐呭鍒拌竟妗嗙殑璺濈 5 绗簲姝 瑕佸湪琛ㄦ牸閲岄潰杈撳叆鍐呭鍙互鐩存帴浠庤璁¤鍥句腑杈撳叆銆傜幇鍦ㄤ笉寤鸿鍦ㄨ〃鏍间腑鎻掑叆鍥剧墖锛岃〃鏍间腑鍔犲浘鐗囩殑瀹氫綅娌℃湁DIV鐏垫椿 ...
  • 濡備綍鍦―reamweaver涓寤虹珛绔欑偣
    绛旓細鐐瑰嚮鈥滅鐞嗙珯鐐光濆彲浠ョ湅鍒扮鐞嗙珯鐐瑰璇濇锛岀偣鍑烩滄柊寤衡濆嚭鐜颁竴涓笅鎷夎彍鍗曪紝杩欓噷閫夋嫨鈥滅珯鐐光濓紝鍙互鐪嬪埌鏂板缓绔欑偣鐨勫璇濇锛氬湪杩欎釜鐣岄潰浣犵湅鍒颁簡涓や釜鏍囩鈥滃熀鏈濆拰鈥滈珮绾р濓紝杩欐槸涓ょ鏂板缓绔欑偣鐨勬柟寮忥紝杞欢榛樿鐨勬槸鈥滃熀鏈濇爣绛撅紝鎴戜滑鍙互鐪嬬湅鈥滈珮绾р濇爣绛撅紝杩欎釜涓嶅父鐢ㄣ傚熀鏈爣绛剧浉褰撲簬涓涓悜瀵硷紝涓姝ヤ竴姝ョ殑...
  • 濡備綍鍦―reamweaver涓杩涜鏁版嵁搴撹繛鎺
    绛旓細寰堝浜轰篃璁镐細濂囨紝涓轰粈涔堟垜浠笉鍦ㄥ垱寤鸿繛鎺ユ椂灏变娇鐢ㄧ浉瀵硅矾寰勫憿锛熷叾瀹炶繖鏄湁鍘熷洜鐨勩鍦―reamweaver涓锛屾娴嬭繛鎺ユ枃浠舵椂鏄細杩炴敞閲婁竴璧疯В閲婄殑锛屽湪Dreamweaver涓仛绋嬪簭鏃跺氨浼氫娇鐢ㄧ涓涓嚭鐜扮殑杩炴帴瀛楃涓诧紱鑰屽湪鏈嶅姟鍣ㄤ腑IIS瑙i噴鏂囦欢鏃朵細蹇界暐鎺夋敞閲婏紝浼氫娇鐢ㄧ浜屼釜杩炴帴瀛楃涓层傚懙鍛碉紝鏄庣櫧浜嗗惂锛岃繖鏍锋垜浠氨瀹炵幇浜嗗湪...
  • 濡備綍鍦―reamweaver涓鎻掑叆琛ㄦ牸
    绛旓細鍦―reamweaver鍦ㄨ〃鍗曚腑鎻掑叆琛ㄦ牸 1. 鐐瑰嚮榧犳爣锛屽皢鍏夋爣瀹氫綅鍦ㄨ〃鍗曟绾垮唴閮紝鐒跺悗鎻掑叆琛ㄦ牸锛屽拰鍦ㄦ櫘閫氭枃妗d腑鐨勬柟娉曚竴鏍枫傚涓嬪浘鎵绀猴細鍦ㄢ滀唬鐮佲濊鍥句腑鍙互鏌ョ湅婧愪唬鐮侊細2. 鎻掑叆琛ㄦ牸浠ュ悗锛屽湪琛ㄦ牸鐨勫崟鍏冩牸涓啀鎻掑叆琛ㄥ崟鐨勫璞℃垨鑰呭煙鏍囩銆傚涓嬪浘鎵绀猴細
  • 鎬庢牱鍦╠reamweaver涓娣诲姞妯℃澘
    绛旓細涓嬮潰灏鐢鎹ogo鏉ヨ鏄庢ā鏉挎槸濡備綍鏇存柊鏂囦欢鐨勩傛垜浠妸logo鍥剧墖鎹㈡垚鍙﹀鎴戜滑鍠滄鐨勫浘鐗囷紝瀹屾垚鍚庝繚瀛榖ody.dwt鏂囦欢锛岃繖鏃DW浼氬脊鍑虹獥鍙h闂槸鍚﹂渶瑕佹洿鏂版枃浠讹紝閫夋嫨Update锛孌W灏变細鑷姩鐨勫皢鎵鏈夌敤姝ゆā鏉跨敓鎴愮殑椤甸潰閮芥洿鏂帮紝鏇存柊鏃禗W浼氬脊鍑篣pdate Pages绐楀彛锛屽畬鎴愬悗锛屽湪Update Pages绐楀彛涓細缁欏嚭鏇存柊鏃ュ織銆傗诲鏋滈夋嫨浜...
  • 扩展阅读:dreamware网页制作 ... dreamwearver下载安装 ... dreamwearver手机版下载 ... dreamweaver新建站点步骤 ... dreamweaver手机版安装 ... 怎么用dreamwearver做网页 ... dream weaver软件 ... dreamware安装教程 ... 在dreamware软件中下面关于资源 ...

    本站交流只代表网友个人观点,与本站立场无关
    欢迎反馈与建议,请联系电邮
    2024© 车视网