學(xué)習(xí)網(wǎng)頁(yè)制作也不是一件簡(jiǎn)單的事情，你的網(wǎng)站必須要做到吸引人，有活力那可不是那么簡(jiǎn)單的，那怎樣制作網(wǎng)頁(yè)幻燈片呢？現(xiàn)在就跟著錯(cuò)新技術(shù)頻道小編帶大家進(jìn)入下文看看制作網(wǎng)頁(yè)幻燈片的分解步驟吧！

作為一位不懂代碼的業(yè)余網(wǎng)頁(yè)制作愛(ài)好者，常常羨慕專(zhuān)業(yè)程序人員在瀏覽器中編制出的效果超酷的一些多媒體作品。唉，無(wú)奈程序那東東，酶澀南學(xué)，非一日之功，需要良好的邏輯思維能力和足夠的磨練方可成就。是不是不會(huì)程序，就永遠(yuǎn)就不能實(shí)現(xiàn)自己的創(chuàng)意和想法了呢？非也！現(xiàn)在我們要制作的就是在網(wǎng)頁(yè)中的一個(gè)幻燈片播放器。當(dāng)用戶(hù)按下控制盤(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ō)明。

步驟一：圖形元素的制作和準(zhǔn)備。

制作幻燈片所用的圖片并將之放入Dreamweaver的層中。我們準(zhǔn)備在每個(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層的上面，在按鈕所在層的下面。排版好的各層如圖1所示。
?

?

步驟三：創(chuàng)建幻燈片播放時(shí)間鏈。

按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"（添加關(guān)鍵幀），選擇另一幅幻燈片圖片，以更換層(Layer_main)中的初始圖片。重復(fù)這個(gè)操作，將剩下的5幅圖片全部加到該時(shí)間鏈的不同關(guān)鍵幀上。最后適當(dāng)調(diào)節(jié)各關(guān)鍵幀之間的距離。并將該時(shí)間鏈命名為T(mén)imeLine_main。建立好的時(shí)間鏈如圖2所示。

?

?

?

?

步驟四：為按鈕和其它添加行為（Behavior）。

點(diǎn)擊選擇PLAY按鈕所在的圖片，在行為浮動(dòng)工具面板中，從+（添加）動(dòng)作下拉列表中選擇Timeline-Play Timeline(播放時(shí)間鏈)，并在彈出的對(duì)話(huà)框中選擇時(shí)間鏈Timeline_main。單擊OK。默認(rèn)方式下，就會(huì)為切換動(dòng)作設(shè)置一個(gè)onClick事件。點(diǎn)擊選擇PAUSE所在的圖片。在行為浮動(dòng)工具面板中，從+（添加）動(dòng)作下拉列表中選擇Timeline---Stop Timeline(停止播放時(shí)間鏈)，并在彈出的對(duì)話(huà)框中選擇時(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ì)話(huà)框中選擇時(shí)間鏈Timeline_main，在Frame文本框中輸入1。單擊OK。默認(rèn)方式下，就會(huì)為切換動(dòng)作設(shè)置一個(gè)onClick事件。再添加下一個(gè)動(dòng)作。從+（添加）動(dòng)作下拉列表中選擇Timeline---Play Timeline(播放時(shí)間鏈)，并在彈出的對(duì)話(huà)框中選擇時(shí)間鏈Timeline_main。單擊OK。默認(rèn)方式下，就會(huì)為切換動(dòng)作設(shè)置一個(gè)onClick事件。REPLAY的圖片添加好的行為如圖3所示。

?

?

?

?

若要把這個(gè)播放器放到網(wǎng)上，同時(shí)圖片總?cè)萘砍^(guò)150K，可以給頁(yè)面作一個(gè)“Loading（加載）層”，待全部?jī)?nèi)容下載完畢后，才顯示出來(lái)。以免由于圖片未下載完而產(chǎn)生播放不暢的感覺(jué)。關(guān)于“Loading”層的制作方法，在很多地方有介紹，這里就不再詳述了。

把這個(gè)例子變通一下，我們可以作一個(gè)相冊(cè)。你可以把你的家庭或女朋友的相片加在幻燈片所在的時(shí)間鏈上，并且加上Last（上一張）、 Next（下一張）等按鈕，便于瀏覽者逐張欣賞。若覺(jué)得相片太小不能看清楚細(xì)節(jié)，你還可以加一個(gè)Zoom In（放大）按鈕，鏈接到一個(gè)有單張放大相片的新窗口頁(yè)面。最后把它放到網(wǎng)上，相信一定會(huì)給你的家人或女朋友帶去一份驚喜。

上文是制作網(wǎng)頁(yè)幻燈片的分解步驟介紹，大家可以跟著這些步驟操作一遍，感謝大家支持錯(cuò)新技術(shù)頻道！