Dreamweaver制作網(wǎng)頁(yè)幻燈片效果_Dreamweaver教程
作為一位不懂代碼的業(yè)余網(wǎng)頁(yè)制作愛(ài)好者,經(jīng)常羨慕專(zhuān)業(yè)程序人員在瀏覽器中編制出的效果超酷的一些多媒體作品。唉,無(wú)奈程序那東東,酶澀南學(xué),非一日之功,需要良好的邏輯思維能力和足夠的磨練方可成就。是不是不會(huì)程序,就永遠(yuǎn)就不能實(shí)現(xiàn)自己的創(chuàng)意和想法了呢?非也!現(xiàn)在我們要制作的就是在網(wǎng)頁(yè)中的一個(gè)幻燈片播放器。當(dāng)用戶按下控制盤(pán)上的“PLAY”鍵時(shí)圖片將作幻燈片似的連續(xù)循環(huán)播放。按下“PAUSE”時(shí),播放中的圖片就停留在當(dāng)前位置。按下“RESTART”鍵時(shí),幻燈片又從頭播放。而這一切,僅僅采用Dreamweaver3的內(nèi)嵌的層(Layer)、時(shí)間鏈(Timeline)和行為(Behavior)技術(shù),就可實(shí)現(xiàn),所有的JavaScript代碼都會(huì)在Dreamweaver中自動(dòng)生成。這里不是鼓勵(lì)大家不要接觸程序代碼,相反,若讀者把握了一些編程技術(shù)的基礎(chǔ),會(huì)在網(wǎng)頁(yè)制作中起到相當(dāng)重要的作用。實(shí)際上,這已是當(dāng)今專(zhuān)業(yè)WEB頁(yè)面制作人員的一項(xiàng)基本素質(zhì)要求。
下面分步驟對(duì)這個(gè)播放器的制作加以說(shuō)明。
步驟一:圖形元素的制作和預(yù)備。
制作幻燈片所用的圖片并將之放入Dreamweaver的層中。我們預(yù)備在每個(gè)幻燈片中實(shí)現(xiàn)7幅圖片的交替變換,因此我們需要制作7幅內(nèi)容不同的圖片。注重圖片要在Photoshop中進(jìn)行優(yōu)化壓縮,并調(diào)整成相同的尺寸。建立一個(gè)層,插入初始圖片,該圖片就是幻燈片默認(rèn)得頭一張圖片。將層命名為L(zhǎng)ayer_main,并把該層的Index值設(shè)為1。
步驟二:制作播放器的外觀和四個(gè)控制按鈕。
利用Photoshop制作一個(gè)金屬效果的播放器外觀。(具體效果就看你的喜好啦,也許你可從Winamp的skin中受點(diǎn)啟發(fā))。作最佳優(yōu)化后,輸出一個(gè)透明的GIF圖片。為了讓鼠標(biāo)移上后按鈕有些變化,你不得不每個(gè)按鈕制作2張圖片(共6個(gè)),兩個(gè)按鈕只需有顏色上的差異即可。先建三個(gè)層,調(diào)整好位置,并插入三個(gè)播放鍵的各自的二張翻滾圖片(Rollover Image)(Insert-Rollover Image)。通過(guò)調(diào)節(jié)層的Index-Z的值,確保播放器所在的層在Layer_main層的上面,在按鈕所在層的下面。排版好的各層如圖所示。

按Ctrl F9鍵打開(kāi)時(shí)間鏈浮動(dòng)工具面板。選取其中幻燈片所在層(Layer_main)中的初始圖片(確保選取的是圖像,而不是層),用鼠標(biāo)拖至?xí)r間鏈浮動(dòng)工具面板,在時(shí)間鏈起始處釋放鼠標(biāo)。設(shè)定幀速率為Fps為5,并勾選Loop框。選擇時(shí)間鏈中的其中一幀,右擊鼠標(biāo),選擇"Add Keyframe"(添加要害幀),選擇另一幅幻燈片圖片,以更換層(Layer_main)中的初始圖片。重復(fù)這個(gè)操作,將剩下的5幅圖片全部加到該時(shí)間鏈的不同要害幀上。最后適當(dāng)調(diào)節(jié)各要害幀之間的距離。并將該時(shí)間鏈命名為T(mén)imeLine_main。建立好的時(shí)間鏈如圖所示。

步驟四:為按鈕和其它添加行為(Behavior)。
點(diǎn)擊選擇PLAY按鈕所在的圖片,在行為浮動(dòng)工具面板中,從 (添加)動(dòng)作下拉列表中選擇Timeline-Play Timeline(播放時(shí)間鏈),并在彈出的對(duì)話框中選擇時(shí)間鏈Timeline_main。單擊OK。默認(rèn)方式下,就會(huì)為切換動(dòng)作設(shè)置一個(gè)onClick事件。點(diǎn)擊選擇PAUSE所在的圖片。在行為浮動(dòng)工具面板中,從 (添加)動(dòng)作下拉列表中選擇Timeline---Stop Timeline(停止播放時(shí)間鏈),并在彈出的對(duì)話框中選擇時(shí)間鏈Timeline_main。單擊OK。默認(rèn)方式下,就會(huì)為切換動(dòng)作設(shè)置一個(gè)onClick事件。
點(diǎn)擊選擇REPLAY所在的圖片。在行為浮動(dòng)工具面板中,從 (添加)動(dòng)作下拉列表中選擇Timeline---Go to Timeline Frame(轉(zhuǎn)向放時(shí)間鏈幀),并在彈出的對(duì)話框中選擇時(shí)間鏈Timeline_main,在Frame文本框中輸入1。單擊OK。默認(rèn)方式下,就會(huì)為切換動(dòng)作設(shè)置一個(gè)onClick事件。再添加下一個(gè)動(dòng)作。從 (添加)動(dòng)作下拉列表中選擇Timeline---Play Timeline(播放時(shí)間鏈),并在彈出的對(duì)話框中選擇時(shí)間鏈Timeline_main。單擊OK。默認(rèn)方式下,就會(huì)為切換動(dòng)作設(shè)置一個(gè)onClick事件。REPLAY的圖片添加好的行為如圖所示。
- 用Dreamweaver在網(wǎng)頁(yè)中插入Flash按鈕
- 在Dreamweaver中編寫(xiě)CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計(jì)CSS?
- Dreamweaver文字自動(dòng)換行
- 探討Dreamweaver制作網(wǎng)頁(yè)時(shí)的空格
- 使用Dreamweaver制作網(wǎng)頁(yè)的20個(gè)技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運(yùn)用代碼片斷工具提高css開(kāi)發(fā)效率
- 在DreamWeaver中編寫(xiě)CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁(yè)
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
- DW MX 設(shè)計(jì)留言本實(shí)戰(zhàn)
- Dreamweaver開(kāi)發(fā)ASP實(shí)例視頻教程登錄頁(yè)面
- DW2004 中文亂碼解決方案 [3]
- 用Dreamweaver做搜索表單
- Dreamweaver制作網(wǎng)頁(yè)技巧之層的應(yīng)用
- 在 Dreamweaver 中指定哪里處理動(dòng)態(tài)頁(yè)
- 分欄及回復(fù)的實(shí)現(xiàn)-Dreamweaver構(gòu)建Blog
- 玩轉(zhuǎn) Dreamweaver8.0:速記 CSS 屬性
- 使用Dreamweaver制作網(wǎng)頁(yè)事如何使用庫(kù)
- Dreamweaver 入門(mén):使用CSS設(shè)置頁(yè)面格式
猜你也喜歡看這些
- 巧學(xué)巧用Dreamweaver8制作網(wǎng)頁(yè)
- 巧學(xué)巧用Dreamweaver制作網(wǎng)頁(yè)習(xí)題精解
- Dreamweaver 8完美網(wǎng)頁(yè)設(shè)計(jì):商業(yè)網(wǎng)站篇
- Dreamweaver 8完美網(wǎng)頁(yè)設(shè)計(jì): 網(wǎng)頁(yè)特效篇
- Dreamweaver 8 完美網(wǎng)頁(yè)設(shè)計(jì)—CSS網(wǎng)頁(yè)設(shè)計(jì)篇
- Dreamweaver 2004視頻教程下載
- Dreamweaver 8.0網(wǎng)頁(yè)設(shè)計(jì)
- Dreamweaver 8 完美網(wǎng)站建設(shè)從入門(mén)到精通
- DreamweaverMX2004互動(dòng)網(wǎng)站百寶箱for PHP
- DreamWeaver MX 2004 即學(xué)即會(huì)
- 相關(guān)鏈接:
- 教程說(shuō)明:
Dreamweaver教程-Dreamweaver制作網(wǎng)頁(yè)幻燈片效果
。